| @@ -1,20 +1,26 @@ | |||||
| <!DOCTYPE html> | <!DOCTYPE html> | ||||
| <html lang="en"> | <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": "智像相册", | "navigationBarTitleText": "智像相册", | ||||
| "navigationBarBackgroundColor": "#F8F8F8", | "navigationBarBackgroundColor": "#F8F8F8", | ||||
| "backgroundColor": "#F8F8F8", | "backgroundColor": "#F8F8F8", | ||||
| "navigationStyle": "custom" | |||||
| "navigationStyle": "custom", | |||||
| "rpxCalcMaxDeviceWidth": 1080, | |||||
| "rpxCalcBaseDeviceWidth": 1080, | |||||
| "rpxCalcIncludeWidth": 1080 | |||||
| } | } | ||||
| } | } | ||||
| @@ -7,8 +7,8 @@ | |||||
| lineWidth="50" | lineWidth="50" | ||||
| lineColor="#ff4f00" | lineColor="#ff4f00" | ||||
| :itemStyle="{ width: '150rpx', height: '90rpx', padding: '0' }" | :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" | @click="chooseTab" | ||||
| ></u-tabs> | ></u-tabs> | ||||
| <view class="moreTabs"> | <view class="moreTabs"> | ||||
| @@ -69,7 +69,11 @@ | |||||
| <text class="single">{{ peopleNum(item.mouldType) }}</text> | <text class="single">{{ peopleNum(item.mouldType) }}</text> | ||||
| </view> | </view> | ||||
| </u-list-item> | </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-item> | ||||
| </u-list> | </u-list> | ||||
| </view> | </view> | ||||
| @@ -186,15 +190,15 @@ function peopleNum(num) { | |||||
| //#region 点击图片 | //#region 点击图片 | ||||
| function createPhoto(item) { | 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 --------------------- | //#endregion --------------------- | ||||
| @@ -208,7 +212,11 @@ function createPhoto(item) { | |||||
| .tabBox { | .tabBox { | ||||
| position: relative; | position: relative; | ||||
| width: 100vw; | width: 100vw; | ||||
| .u-tabs { | .u-tabs { | ||||
| :deep(.u-tabs__wrapper__nav__item__text) { | |||||
| font-size: 30rpx; | |||||
| } | |||||
| // width: calc(100% - 100rpx); | // width: calc(100% - 100rpx); | ||||
| width: 100%; | width: 100%; | ||||
| color: #fff !important; | color: #fff !important; | ||||
| @@ -239,6 +247,15 @@ function createPhoto(item) { | |||||
| } | } | ||||
| } | } | ||||
| // <!-- 更多tab弹出层 --> | // <!-- 更多tab弹出层 --> | ||||
| .u-popup { | |||||
| :deep(.u-popup__content__close--top-right) { | |||||
| top: 35rpx; | |||||
| right: 35rpx; | |||||
| } | |||||
| :deep(.uicon-close) { | |||||
| font-size: 30rpx !important; | |||||
| } | |||||
| } | |||||
| .popupBox { | .popupBox { | ||||
| padding-bottom: 30rpx; | padding-bottom: 30rpx; | ||||
| .type { | .type { | ||||
| @@ -1,7 +1,126 @@ | |||||
| <template> | <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> | </template> | ||||
| <script setup> | <script setup> | ||||
| //#region 导入 | |||||
| import { ref } from "vue"; | 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> | </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> | </script> | ||||
| <style lang="scss" scoped> | <style lang="scss" scoped> | ||||
| .page { | .page { | ||||
| padding: 0; | |||||
| position: relative; | position: relative; | ||||
| width: 100vw; | width: 100vw; | ||||
| height: 100vh; | height: 100vh; | ||||
| @@ -46,7 +46,6 @@ view { | |||||
| } | } | ||||
| } | } | ||||
| .orangeBtn { | .orangeBtn { | ||||
| background-color: #FF4F00; | background-color: #FF4F00; | ||||
| width: 520rpx; | width: 520rpx; | ||||
| @@ -71,4 +70,20 @@ view { | |||||
| border-radius: 100rpx; | border-radius: 100rpx; | ||||
| color: #FF4F00; | color: #FF4F00; | ||||
| border: 2rpx solid #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; | |||||
| } | } | ||||