| @@ -1,20 +1,26 @@ | |||
| <!DOCTYPE html> | |||
| <html lang="en"> | |||
| <head> | |||
| <meta charset="UTF-8" /> | |||
| <script> | |||
| var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') || | |||
| CSS.supports('top: constant(a)')) | |||
| document.write( | |||
| '<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' + | |||
| (coverSupport ? ', viewport-fit=cover' : '') + '" />') | |||
| </script> | |||
| <title></title> | |||
| <!--preload-links--> | |||
| <!--app-context--> | |||
| </head> | |||
| <body> | |||
| <div id="app"><!--app-html--></div> | |||
| <script type="module" src="/src/main.js"></script> | |||
| </body> | |||
| </html> | |||
| <head> | |||
| <meta charset="UTF-8" /> | |||
| <meta name="viewport" | |||
| content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"> | |||
| <script> | |||
| var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') || | |||
| CSS.supports('top: constant(a)')) | |||
| document.write( | |||
| '<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' + | |||
| (coverSupport ? ', viewport-fit=cover' : '') + '" />') | |||
| </script> | |||
| <title></title> | |||
| <!--preload-links--> | |||
| <!--app-context--> | |||
| </head> | |||
| <body> | |||
| <div id="app"><!--app-html--></div> | |||
| <script type="module" src="/src/main.js"></script> | |||
| </body> | |||
| </html> | |||
| @@ -38,6 +38,9 @@ | |||
| "navigationBarTitleText": "智像相册", | |||
| "navigationBarBackgroundColor": "#F8F8F8", | |||
| "backgroundColor": "#F8F8F8", | |||
| "navigationStyle": "custom" | |||
| "navigationStyle": "custom", | |||
| "rpxCalcMaxDeviceWidth": 1080, | |||
| "rpxCalcBaseDeviceWidth": 1080, | |||
| "rpxCalcIncludeWidth": 1080 | |||
| } | |||
| } | |||
| @@ -7,8 +7,8 @@ | |||
| lineWidth="50" | |||
| lineColor="#ff4f00" | |||
| :itemStyle="{ width: '150rpx', height: '90rpx', padding: '0' }" | |||
| :activeStyle="{ color: '#ff4f00' }" | |||
| :inactiveStyle="{ color: '#fff' }" | |||
| :activeStyle="{ color: '#ff4f00', fontsize: '30rpx' }" | |||
| :inactiveStyle="{ color: '#fff', fontsize: '30rpx' }" | |||
| @click="chooseTab" | |||
| ></u-tabs> | |||
| <view class="moreTabs"> | |||
| @@ -69,7 +69,11 @@ | |||
| <text class="single">{{ peopleNum(item.mouldType) }}</text> | |||
| </view> | |||
| </u-list-item> | |||
| <view v-if="styleList.length == 0">暂无数据</view> | |||
| <view | |||
| v-if="styleList.length == 0" | |||
| style="width: 100%; text-align: center" | |||
| >暂无数据</view | |||
| > | |||
| </u-list-item> | |||
| </u-list> | |||
| </view> | |||
| @@ -186,15 +190,15 @@ function peopleNum(num) { | |||
| //#region 点击图片 | |||
| function createPhoto(item) { | |||
| if (item.mouldType == 1) { | |||
| uni.navigateTo({ | |||
| url: `/pages/closeStyle/goCreatePhoto?id=${item.id}`, | |||
| }); | |||
| } else { | |||
| uni.navigateTo({ | |||
| url: `/pages/closeStyle/multiplayer?id=${item.id}`, | |||
| }); | |||
| } | |||
| uni.navigateTo({ | |||
| url: `/pages/createing/index?id=${item.id}`, | |||
| }); | |||
| // if (item.mouldType == 1) { | |||
| // } else { | |||
| // uni.navigateTo({ | |||
| // url: `/pages/closeStyle/multiplayer?id=${item.id}`, | |||
| // }); | |||
| // } | |||
| } | |||
| //#endregion --------------------- | |||
| @@ -208,7 +212,11 @@ function createPhoto(item) { | |||
| .tabBox { | |||
| position: relative; | |||
| width: 100vw; | |||
| .u-tabs { | |||
| :deep(.u-tabs__wrapper__nav__item__text) { | |||
| font-size: 30rpx; | |||
| } | |||
| // width: calc(100% - 100rpx); | |||
| width: 100%; | |||
| color: #fff !important; | |||
| @@ -239,6 +247,15 @@ function createPhoto(item) { | |||
| } | |||
| } | |||
| // <!-- 更多tab弹出层 --> | |||
| .u-popup { | |||
| :deep(.u-popup__content__close--top-right) { | |||
| top: 35rpx; | |||
| right: 35rpx; | |||
| } | |||
| :deep(.uicon-close) { | |||
| font-size: 30rpx !important; | |||
| } | |||
| } | |||
| .popupBox { | |||
| padding-bottom: 30rpx; | |||
| .type { | |||
| @@ -1,7 +1,126 @@ | |||
| <template> | |||
| <view> 主页 </view> | |||
| <view class="page"> | |||
| <!-- 毛玻璃 --> | |||
| <view class="glass"> | |||
| <image src="../../assets/img/homeImg.jpg" mode="scaleToFill" /> | |||
| </view> | |||
| <view class="showImgBox imgContenBox" | |||
| ><image :src="styleData.coverImg" | |||
| /></view> | |||
| <text class="name">{{ styleData.title }}</text> | |||
| <view class="orangeBtn" @click="createing(styleData.id)" | |||
| >开始制作写真 | |||
| </view> | |||
| </view> | |||
| </template> | |||
| <script setup> | |||
| //#region 导入 | |||
| import { ref } from "vue"; | |||
| import { onLoad, onShow } from "@dcloudio/uni-app"; | |||
| import { | |||
| findByIdApi, | |||
| findImageApi, | |||
| createPhotoApi, | |||
| } from "../../api/closeStyle"; | |||
| //#endregion | |||
| //#region 初始化 | |||
| const styleId = ref(null); | |||
| const styleData = ref({}); | |||
| onLoad((options) => { | |||
| styleId.value = options.id; | |||
| // getInfo(); | |||
| }); | |||
| onShow(() => { | |||
| getInfo(); | |||
| }); | |||
| async function getInfo() { | |||
| try { | |||
| const res = await findByIdApi(styleId.value); | |||
| styleData.value = res.data; | |||
| } catch (error) { | |||
| uni.showToast({ | |||
| title: "获取数据失败,请重试", | |||
| icon: "none", | |||
| }); | |||
| } | |||
| } | |||
| //#endregion --------------------- | |||
| //#region 生成写真照片 | |||
| async function createing(id) { | |||
| return; | |||
| try { | |||
| uni.showLoading({ | |||
| title: "生成中...", | |||
| mask: true, | |||
| }); | |||
| const res = await findImageApi(); | |||
| let myImg = res.data.image; | |||
| const data = { | |||
| plat: uni.getStorageSync("plat"), | |||
| digitalAvatarId: id, | |||
| userImages: JSON.stringify([myImg]), | |||
| title: styleData.value.title, | |||
| }; | |||
| const res2 = await createPhotoApi(data); | |||
| console.log(res2); | |||
| uni.navigateTo({ | |||
| url: `/pages/created/index?id=${res2.data.id}`, | |||
| }); | |||
| uni.hideLoading(); | |||
| } catch (error) { | |||
| console.log(error); | |||
| uni.hideLoading(); | |||
| uni.showToast({ | |||
| title: "生成失败,请重试", | |||
| icon: "none", | |||
| }); | |||
| } | |||
| } | |||
| //#endregion --------------------- | |||
| //#region | |||
| //#endregion --------------------- | |||
| </script> | |||
| <style lang="scss" scoped></style> | |||
| <style lang="scss"> | |||
| .showImgBox { | |||
| margin-top: 30rpx; | |||
| width: 540rpx; | |||
| height: 720rpx; | |||
| // background-color: #ccc; | |||
| border-radius: 30rpx; | |||
| image { | |||
| width: 100%; | |||
| height: 100%; | |||
| border-radius: 30rpx; | |||
| } | |||
| } | |||
| .name { | |||
| margin-top: 80rpx; | |||
| margin-bottom: 110rpx; | |||
| font-size: 44rpx; | |||
| font-weight: 800; | |||
| } | |||
| .orangeBtn { | |||
| position: relative; | |||
| .free { | |||
| position: absolute; | |||
| top: -18rpx; | |||
| right: -70rpx; | |||
| width: 142rpx; | |||
| height: 50rpx; | |||
| background-color: #000; | |||
| border-radius: 25rpx 25rpx 25rpx 0; | |||
| font-size: 22rpx; | |||
| font-weight: 900; | |||
| line-height: 50rpx; | |||
| text-align: center; | |||
| } | |||
| } | |||
| </style> | |||
| @@ -29,6 +29,7 @@ function toChooseStyle() { | |||
| </script> | |||
| <style lang="scss" scoped> | |||
| .page { | |||
| padding: 0; | |||
| position: relative; | |||
| width: 100vw; | |||
| height: 100vh; | |||
| @@ -46,7 +46,6 @@ view { | |||
| } | |||
| } | |||
| .orangeBtn { | |||
| background-color: #FF4F00; | |||
| width: 520rpx; | |||
| @@ -71,4 +70,20 @@ view { | |||
| border-radius: 100rpx; | |||
| color: #FF4F00; | |||
| border: 2rpx solid #FF4F00; | |||
| } | |||
| // 部分样式1080下适配 | |||
| .uni-toast { | |||
| width: 280rpx; | |||
| font-size: 30rpx; | |||
| .uni-toast__icon { | |||
| width: 50rpx !important; | |||
| height: 50rpx !important; | |||
| } | |||
| } | |||
| .uni-simple-toast__text { | |||
| padding: 10rpx 20rpx; | |||
| font-size: 30rpx; | |||
| } | |||