| @@ -40,40 +40,50 @@ onLaunch(() => { | |||||
| }, | }, | ||||
| }); | }); | ||||
| // 微信登录授权 | // 微信登录授权 | ||||
| uni.login({ | |||||
| provider: "weixin", // 使用微信登录授权 | |||||
| success: async (res) => { | |||||
| console.log(res); | |||||
| if (res.code) { | |||||
| console.log(res.code); | |||||
| try { | |||||
| uni.showLoading({ | |||||
| title: "加载中...", | |||||
| mask: true, | |||||
| }); | |||||
| const data = { | |||||
| appId: "wx75cf14e3a0d45821", | |||||
| code: res.code, | |||||
| }; | |||||
| const res2 = await loginApi(data); | |||||
| userInfoModulesPinia.openId = res2.data.openId; | |||||
| userInfoModulesPinia.token = res2.token; | |||||
| console.log(userInfoModulesPinia.openId, "获取openid"); | |||||
| uni.hideLoading(); | |||||
| if (res2.token) { | |||||
| uni.redirectTo({ | |||||
| url: "/pages/home/index", | |||||
| }); | |||||
| } else { | |||||
| uni.redirectTo({ | |||||
| url: "/pages/index/index", | |||||
| if (userInfoModulesPinia.platForm != 1) { | |||||
| uni.login({ | |||||
| provider: "weixin", // 使用微信登录授权 | |||||
| success: async (res) => { | |||||
| console.log(res); | |||||
| if (res.code) { | |||||
| console.log(res.code); | |||||
| try { | |||||
| uni.showLoading({ | |||||
| title: "加载中...", | |||||
| mask: true, | |||||
| }); | }); | ||||
| const data = { | |||||
| appId: "wx75cf14e3a0d45821", | |||||
| code: res.code, | |||||
| }; | |||||
| const res2 = await loginApi(data); | |||||
| userInfoModulesPinia.openId = res2.data.openId; | |||||
| userInfoModulesPinia.token = res2.data.token; | |||||
| console.log(userInfoModulesPinia.openId, "获取openid"); | |||||
| uni.hideLoading(); | |||||
| if (res2.data.token) { | |||||
| uni.redirectTo({ | |||||
| url: "/pages/index/index", | |||||
| }); | |||||
| } else { | |||||
| uni.redirectTo({ | |||||
| url: "/pages/login/index", | |||||
| }); | |||||
| uni.showToast({ | |||||
| title: "登录失败,请重试", | |||||
| icon: "none", | |||||
| }); | |||||
| } | |||||
| } catch (error) { | |||||
| // uni.redirectTo({ | |||||
| // url: "pages/index/index", | |||||
| // }); | |||||
| uni.showToast({ | uni.showToast({ | ||||
| title: "登录失败,请重试", | title: "登录失败,请重试", | ||||
| icon: "none", | icon: "none", | ||||
| }); | }); | ||||
| } | } | ||||
| } catch (error) { | |||||
| } else { | |||||
| // uni.redirectTo({ | // uni.redirectTo({ | ||||
| // url: "pages/index/index", | // url: "pages/index/index", | ||||
| // }); | // }); | ||||
| @@ -82,7 +92,8 @@ onLaunch(() => { | |||||
| icon: "none", | icon: "none", | ||||
| }); | }); | ||||
| } | } | ||||
| } else { | |||||
| }, | |||||
| fail: (err) => { | |||||
| // uni.redirectTo({ | // uni.redirectTo({ | ||||
| // url: "pages/index/index", | // url: "pages/index/index", | ||||
| // }); | // }); | ||||
| @@ -90,18 +101,9 @@ onLaunch(() => { | |||||
| title: "登录失败,请重试", | title: "登录失败,请重试", | ||||
| icon: "none", | icon: "none", | ||||
| }); | }); | ||||
| } | |||||
| }, | |||||
| fail: (err) => { | |||||
| // uni.redirectTo({ | |||||
| // url: "pages/index/index", | |||||
| // }); | |||||
| uni.showToast({ | |||||
| title: "登录失败,请重试", | |||||
| icon: "none", | |||||
| }); | |||||
| }, | |||||
| }); | |||||
| }, | |||||
| }); | |||||
| } | |||||
| }); | }); | ||||
| onShow(() => { | onShow(() => { | ||||
| console.log("App Show!"); | console.log("App Show!"); | ||||
| @@ -51,6 +51,17 @@ | |||||
| /* 小程序特有相关 */ | /* 小程序特有相关 */ | ||||
| "mp-weixin": { | "mp-weixin": { | ||||
| "appid": "wx75cf14e3a0d45821", | "appid": "wx75cf14e3a0d45821", | ||||
| "permission": { | |||||
| "scope.userLocation": { | |||||
| "desc": "获取您的地理位置信息" | |||||
| }, | |||||
| "scope.userInfo": { | |||||
| "desc": "获取您的用户信息" | |||||
| }, | |||||
| "scope.userPhoneNumber": { | |||||
| "desc": "获取您的手机号码" | |||||
| } | |||||
| }, | |||||
| "setting": { | "setting": { | ||||
| "urlCheck": false, | "urlCheck": false, | ||||
| "ignoreDevUnusedFiles": false, | "ignoreDevUnusedFiles": false, | ||||
| @@ -7,51 +7,51 @@ | |||||
| } | } | ||||
| }, | }, | ||||
| { | { | ||||
| "path": "pages/uploadPhoto/uploadPhoto", | |||||
| "path": "pages/index/buyCoin", | |||||
| "style": { | "style": { | ||||
| "navigationBarTitleText": "智像" | |||||
| "navigationBarTitleText": "购买金币" | |||||
| } | } | ||||
| }, | }, | ||||
| { | { | ||||
| "path": "pages/uploadPhoto/success", | |||||
| "path": "pages/login/index", | |||||
| "style": { | "style": { | ||||
| "navigationBarTitleText": "智像" | "navigationBarTitleText": "智像" | ||||
| } | } | ||||
| }, | }, | ||||
| { | { | ||||
| "path": "pages/closeStyle/closeStyle", | |||||
| "path": "pages/uploadPhoto/uploadPhoto", | |||||
| "style": { | "style": { | ||||
| "navigationBarTitleText": "智像" | "navigationBarTitleText": "智像" | ||||
| } | } | ||||
| }, | }, | ||||
| { | { | ||||
| "path": "pages/closeStyle/goCreatePhoto", | |||||
| "path": "pages/uploadPhoto/success", | |||||
| "style": { | "style": { | ||||
| "navigationBarTitleText": "智像" | "navigationBarTitleText": "智像" | ||||
| } | } | ||||
| }, | }, | ||||
| { | { | ||||
| "path": "pages/createing/index", | |||||
| "path": "pages/closeStyle/closeStyle", | |||||
| "style": { | "style": { | ||||
| "navigationBarTitleText": "智像" | "navigationBarTitleText": "智像" | ||||
| } | } | ||||
| }, | }, | ||||
| { | { | ||||
| "path": "pages/lookPhoto/index", | |||||
| "path": "pages/closeStyle/goCreatePhoto", | |||||
| "style": { | "style": { | ||||
| "navigationBarTitleText": "智像" | "navigationBarTitleText": "智像" | ||||
| } | } | ||||
| }, | }, | ||||
| { | { | ||||
| "path": "pages/home/index", | |||||
| "path": "pages/createing/index", | |||||
| "style": { | "style": { | ||||
| "navigationBarTitleText": "智像" | "navigationBarTitleText": "智像" | ||||
| } | } | ||||
| }, | }, | ||||
| { | { | ||||
| "path": "pages/home/buyCoin", | |||||
| "path": "pages/lookPhoto/index", | |||||
| "style": { | "style": { | ||||
| "navigationBarTitleText": "购买金币" | |||||
| "navigationBarTitleText": "智像" | |||||
| } | } | ||||
| }, | }, | ||||
| { | { | ||||
| @@ -1,511 +0,0 @@ | |||||
| <template> | |||||
| <view class="page"> | |||||
| <!-- 背景图 --> | |||||
| <!-- <image class="bgc" src="../../assets/img/avatar.png"></image> --> | |||||
| <!-- 头像 --> | |||||
| <view class="avatarBox"> | |||||
| <image | |||||
| class="avatar" | |||||
| src="../../assets/img/avatar.png" | |||||
| mode="scaleToFill" | |||||
| /> | |||||
| <view @click="chooseAvatar" class="changeAvatar"> | |||||
| <image src="../../assets/img/reset.png" mode="aspectFit" /> | |||||
| </view> | |||||
| </view> | |||||
| <!-- 金币 --> | |||||
| <view class="coinBox"> | |||||
| 我的金币: 30 | |||||
| <text @click="goBuyCoin">购买金币</text></view | |||||
| > | |||||
| <!-- tab栏 --> | |||||
| <view class="tabsBox"> | |||||
| <view | |||||
| class="tabItem" | |||||
| v-for="item in tabList" | |||||
| :key="item.id" | |||||
| :class="showListActive == item.id ? 'active' : ''" | |||||
| @click="clickTabHandle(item)" | |||||
| > | |||||
| {{ item.name }}</view | |||||
| > | |||||
| </view> | |||||
| <!-- 显示风格列表内容 --> | |||||
| <scroll-view | |||||
| :scroll-y="true" | |||||
| v-show="showListActive == 1" | |||||
| class="showStyleList" | |||||
| > | |||||
| <view v-for="item in 7" :key="item" class="showListItem"> | |||||
| <view class="top"> | |||||
| <text class="name">风格名称</text> | |||||
| <view class="time"> | |||||
| <text>生成时间</text> | |||||
| <!-- 更多 --> | |||||
| <view class="moreBox"> | |||||
| <image src="../../assets/icon/more.png" mode="widthFix" /> | |||||
| </view> | |||||
| </view> | |||||
| </view> | |||||
| <scroll-view :scroll-x="true" class="imgListBox"> | |||||
| <view v-for="item in 6" :key="item" class="item"> | |||||
| <image | |||||
| src="../../assets/icon/uploadImg.png" | |||||
| class="cover" | |||||
| mode="aspectFill" | |||||
| ></image> | |||||
| </view> | |||||
| </scroll-view> | |||||
| </view> | |||||
| </scroll-view> | |||||
| <!-- 显示视频列表内容 --> | |||||
| <scroll-view | |||||
| :scroll-y="true" | |||||
| v-show="showListActive == 2" | |||||
| class="showVideoList" | |||||
| > | |||||
| <view v-for="item in 7" :key="item" class="showListItem"> | |||||
| <image | |||||
| class="showImg" | |||||
| src="../../assets/img/avatar.png" | |||||
| mode="aspectFit" | |||||
| /> | |||||
| <view class="videoInfo"> | |||||
| <view class="name">视频名称</view> | |||||
| <view class="time">生成时间</view> | |||||
| </view> | |||||
| <!-- 播放按钮 --> | |||||
| <view class="playIcon"> | |||||
| <image src="../../assets/icon/play.png" mode="aspectFit" /> | |||||
| </view> | |||||
| <!-- 更多 --> | |||||
| <view class="moreBox"> | |||||
| <image src="../../assets/icon/more.png" mode="widthFix" /> | |||||
| </view> | |||||
| </view> | |||||
| </scroll-view> | |||||
| <!-- 显示邀请列表内容 --> | |||||
| <view class="InviteBox" v-show="showListActive == 3"> | |||||
| <scroll-view :scroll-y="true" class="showInviteList"> | |||||
| <view v-for="item in 9" class="InviteList"> | |||||
| <up-avatar :src="avatarUrl" size="50"></up-avatar> | |||||
| <view class="info"> | |||||
| <view class="name">猕猴桃</view> | |||||
| <view class="time">2023/7/29</view> | |||||
| </view> | |||||
| <view class="getCoin"> 金币+2 </view> | |||||
| </view> | |||||
| </scroll-view> | |||||
| <view class="inviteBtn">继续邀请好友</view> | |||||
| </view> | |||||
| <!-- 显示消费列表内容 --> | |||||
| <view v-show="showListActive == 4" class="showOrderList"> | |||||
| <view class="top"> | |||||
| <text>名称</text> | |||||
| <text>时间</text> | |||||
| <text>金币</text> | |||||
| </view> | |||||
| <scroll-view :scroll-y="true" class="bottom"> | |||||
| <view class="OrderListItem" v-for="item in 16"> | |||||
| <view class="name">大西瓜</view> | |||||
| <view class="time">2023/7/29 </view> | |||||
| <view class="coin">-2金币</view> | |||||
| </view> | |||||
| </scroll-view> | |||||
| </view> | |||||
| </view> | |||||
| </template> | |||||
| <script setup> | |||||
| //#region 导入 | |||||
| import { ref, reactive } from "vue"; | |||||
| import { voiceTotalApi } from "../../api/login.js"; | |||||
| import { userInfoModules } from "@/store/modules/userInfo"; | |||||
| import imageCompression from "browser-image-compression"; //压缩图片插件 | |||||
| //#endregion | |||||
| const userInfoModulesPinia = userInfoModules(); | |||||
| //#region 头像 | |||||
| const avatarUrl = ref(null); | |||||
| function chooseAvatar(params) { | |||||
| uni.chooseImage({ | |||||
| count: 1, // 最多可以选择的图片张数,这里设置为1,只选择一张图片 | |||||
| success: async (res) => { | |||||
| // avatarUrl.value = res.tempFilePaths[0]; | |||||
| // TODO: 在这里处理图片上传逻辑,你可以调用上传接口将图片上传到服务器 | |||||
| // 示例代码: | |||||
| // uploadImageToServer(tempFilePaths[0]); | |||||
| // 图片压缩 | |||||
| console.log(res.tempFiles[0].size); | |||||
| if (userInfoModulesPinia.platForm != 1) { | |||||
| uni.compressImage({ | |||||
| src: res.tempFilePaths[0], | |||||
| quality: 20, | |||||
| success: (res2) => { | |||||
| avatarUrl.value = res2.tempFilePath; | |||||
| console.log(res2.tempFilePath); | |||||
| }, | |||||
| }); | |||||
| } else { | |||||
| const options = { | |||||
| maxSizeMB: 2, // 最大压缩大小为 4MB | |||||
| useWebWorker: true, // 使用 Web Worker 进行压缩,提高性能 | |||||
| }; | |||||
| const compressedFile = await imageCompression( | |||||
| res.tempFiles[0], | |||||
| options | |||||
| ); | |||||
| //compressedFile是一个blob对象 | |||||
| avatarUrl.value = URL.createObjectURL(compressedFile); | |||||
| console.log(compressedFile); | |||||
| // avatarUrl.value = compressedFile; | |||||
| console.log("压缩图片h5"); | |||||
| } | |||||
| }, | |||||
| fail: (err) => { | |||||
| console.error("选择图片失败", err); | |||||
| }, | |||||
| }); | |||||
| } | |||||
| function goBuyCoin() { | |||||
| uni.navigateTo({ | |||||
| url: "buyCoin", | |||||
| }); | |||||
| } | |||||
| //#endregion | |||||
| //#region tab | |||||
| const tabList = ref([ | |||||
| { name: "我的写真", id: 1 }, | |||||
| { name: "我的视频", id: 2 }, | |||||
| { name: "我的邀请", id: 3 }, | |||||
| { name: "消费记录", id: 4 }, | |||||
| ]); | |||||
| const showListActive = ref(1); | |||||
| function clickTabHandle(e) { | |||||
| showListActive.value = e.id; | |||||
| } | |||||
| //#endregion | |||||
| //#region | |||||
| //#endregion | |||||
| </script> | |||||
| <style lang="scss"> | |||||
| .page { | |||||
| position: relative; | |||||
| height: 100vh; | |||||
| background-color: rgba(0, 0, 0, 0.8); | |||||
| // background: url("../../assets/img/avatar.png"); | |||||
| .bgc { | |||||
| position: absolute; | |||||
| width: 750rpx; | |||||
| height: 750rpx; | |||||
| transform: scale(1.5); | |||||
| top: 187rpx; | |||||
| left: 0; | |||||
| object-fit: cover; | |||||
| z-index: -2; | |||||
| backdrop-filter: blur(3px); | |||||
| // backdrop-filter: blur(20px); | |||||
| } | |||||
| } | |||||
| .avatarBox { | |||||
| position: relative; | |||||
| width: 260rpx; | |||||
| height: 260rpx; | |||||
| .avatar { | |||||
| width: 260rpx; | |||||
| height: 260rpx; | |||||
| border-radius: 130rpx; | |||||
| } | |||||
| .changeAvatar { | |||||
| position: absolute; | |||||
| right: -20rpx; | |||||
| bottom: 0; | |||||
| width: 66rpx; | |||||
| height: 66rpx; | |||||
| image { | |||||
| width: 100%; | |||||
| height: 100%; | |||||
| } | |||||
| } | |||||
| } | |||||
| .coinBox { | |||||
| margin-top: 38rpx; | |||||
| line-height: 50rpx; | |||||
| text { | |||||
| margin-left: 28rpx; | |||||
| display: inline-block; | |||||
| width: 160rpx; | |||||
| height: 50rpx; | |||||
| border-radius: 50rpx; | |||||
| font-size: 26rpx; | |||||
| text-align: center; | |||||
| // font-weight: 700; | |||||
| background-color: rgba(255, 255, 255, 0.1); | |||||
| } | |||||
| } | |||||
| // tab栏样式 | |||||
| .tabsBox { | |||||
| display: flex; | |||||
| justify-content: space-between; | |||||
| margin-top: 50rpx; | |||||
| .tabItem { | |||||
| margin: 0 9rpx; | |||||
| width: 160rpx; | |||||
| height: 80rpx; | |||||
| line-height: 80rpx; | |||||
| text-align: center; | |||||
| border-radius: 12rpx; | |||||
| background-color: rgba(255, 255, 255, 0.1); | |||||
| } | |||||
| .active { | |||||
| background-color: rgba(255, 79, 0, 1); | |||||
| } | |||||
| } | |||||
| // 风格列表 | |||||
| .showStyleList { | |||||
| flex: 1; | |||||
| overflow: hidden; | |||||
| margin-top: 30rpx; | |||||
| width: 690rpx; | |||||
| .showListItem { | |||||
| margin-top: 10rpx; | |||||
| .top { | |||||
| display: flex; | |||||
| justify-content: space-between; | |||||
| padding: 0 30rpx; | |||||
| margin-bottom: 20rpx; | |||||
| .name { | |||||
| font-weight: 900; | |||||
| } | |||||
| .time { | |||||
| display: inline-block; | |||||
| font-size: 22rpx; | |||||
| font-weight: 100; | |||||
| line-height: 33rpx; | |||||
| text { | |||||
| margin-right: 50rpx; | |||||
| } | |||||
| .moreBox { | |||||
| display: inline-block; | |||||
| width: 8rpx; | |||||
| height: 33rpx; | |||||
| image { | |||||
| vertical-align: top; | |||||
| width: 100%; | |||||
| } | |||||
| } | |||||
| } | |||||
| } | |||||
| .imgListBox { | |||||
| white-space: nowrap; | |||||
| display: flex; | |||||
| justify-content: space-between; | |||||
| flex-wrap: nowrap; | |||||
| height: 200rpx; | |||||
| .item { | |||||
| width: 150rpx; | |||||
| height: 200rpx; | |||||
| border-radius: 30rpx; | |||||
| margin-right: 30rpx; | |||||
| display: inline-flex; // item的外层定义成行内元素才可进行滚动 inline-block / inline-flex 均可 | |||||
| flex-direction: column; | |||||
| align-items: center; | |||||
| .cover { | |||||
| width: 150rpx; | |||||
| height: 200rpx; | |||||
| border-radius: 30rpx; | |||||
| } | |||||
| } | |||||
| } | |||||
| } | |||||
| } | |||||
| // 视频列表 | |||||
| .showVideoList { | |||||
| flex: 1; | |||||
| overflow: hidden; | |||||
| margin-top: 30rpx; | |||||
| width: 690rpx; | |||||
| padding: 15rpx; | |||||
| display: flex; | |||||
| flex-wrap: wrap; | |||||
| justify-content: flex-start; | |||||
| word-break: keep-all; | |||||
| .showListItem { | |||||
| position: relative; | |||||
| display: inline-block; | |||||
| width: 330rpx; | |||||
| height: 440rpx; | |||||
| background-color: #000; | |||||
| margin-bottom: 25rpx; | |||||
| border-radius: 25rpx; | |||||
| overflow: hidden; | |||||
| .showImg { | |||||
| position: absolute; | |||||
| top: 0; | |||||
| z-index: 1; | |||||
| width: 100%; | |||||
| } | |||||
| .videoInfo { | |||||
| position: absolute; | |||||
| bottom: 0; | |||||
| width: 100%; | |||||
| height: 100rpx; | |||||
| padding: 10rpx 20rpx; | |||||
| background-color: red; | |||||
| z-index: 2; | |||||
| .name { | |||||
| font-weight: 900; | |||||
| margin-bottom: 10rpx; | |||||
| } | |||||
| .time { | |||||
| font-size: 22rpx; | |||||
| font-weight: 100; | |||||
| } | |||||
| } | |||||
| .playIcon { | |||||
| position: absolute; | |||||
| top: 50%; | |||||
| left: 50%; | |||||
| transform: translate(-50%, -50%); | |||||
| z-index: 2; | |||||
| image { | |||||
| width: 72rpx; | |||||
| height: 72rpx; | |||||
| } | |||||
| } | |||||
| .moreBox { | |||||
| position: absolute; | |||||
| top: 23rpx; | |||||
| right: 26rpx; | |||||
| width: 8rpx; | |||||
| height: 33rpx; | |||||
| image { | |||||
| width: 100%; | |||||
| } | |||||
| } | |||||
| } | |||||
| .showListItem:nth-child(odd) { | |||||
| margin-right: 30rpx; | |||||
| } | |||||
| } | |||||
| // 邀请列表 | |||||
| .InviteBox { | |||||
| width: 100%; | |||||
| position: relative; | |||||
| flex: 1; | |||||
| display: flex; | |||||
| flex-direction: column; | |||||
| align-items: center; | |||||
| overflow: hidden; | |||||
| .inviteBtn { | |||||
| position: absolute; | |||||
| bottom: 20rpx; | |||||
| left: 50%; | |||||
| transform: translate(-50%, 0); | |||||
| width: 520rpx; | |||||
| height: 100rpx; | |||||
| line-height: 100rpx; | |||||
| text-align: center; | |||||
| font-size: 30rpx; | |||||
| background-color: rgba(255, 79, 0, 1); | |||||
| border-radius: 50rpx; | |||||
| } | |||||
| } | |||||
| .showInviteList { | |||||
| position: relative; | |||||
| margin-top: 15rpx; | |||||
| flex: 1; | |||||
| overflow: hidden; | |||||
| width: 100%; | |||||
| .InviteList { | |||||
| display: flex; | |||||
| justify-content: flex-start; | |||||
| margin-bottom: 12rpx; | |||||
| width: 100%; | |||||
| height: 120rpx; | |||||
| border-radius: 24rpx; | |||||
| background-color: rgba(255, 255, 255, 0.1); | |||||
| .u-avatar { | |||||
| margin: 0 30rpx; | |||||
| height: 120rpx !important; | |||||
| } | |||||
| .info { | |||||
| flex: 1; | |||||
| display: flex; | |||||
| flex-direction: column; | |||||
| justify-content: space-evenly; | |||||
| .name { | |||||
| font-weight: bold; | |||||
| } | |||||
| .time { | |||||
| font-size: 22rpx; | |||||
| } | |||||
| } | |||||
| .getCoin { | |||||
| width: 145rpx; | |||||
| height: 120rpx; | |||||
| line-height: 120rpx; | |||||
| text-align: center; | |||||
| margin-right: 30rpx; | |||||
| } | |||||
| } | |||||
| .InviteList:last-child::after { | |||||
| content: ""; | |||||
| width: 1rpx; | |||||
| height: 130rpx; | |||||
| padding-bottom: 130rpx; | |||||
| } | |||||
| } | |||||
| // 消费列表 | |||||
| .showOrderList { | |||||
| position: relative; | |||||
| flex: 1; | |||||
| margin-top: 30rpx; | |||||
| background-color: rgba(255, 255, 255, 0.1); | |||||
| border-radius: 24rpx; | |||||
| width: 100%; | |||||
| box-sizing: border-box; | |||||
| padding: 15rpx 20rpx; | |||||
| // padding-top: 80rpx; | |||||
| overflow: hidden; | |||||
| display: flex; | |||||
| flex-direction: column; | |||||
| align-items: center; | |||||
| .top { | |||||
| width: 100%; | |||||
| padding: 0 50rpx; | |||||
| height: 64rpx; | |||||
| line-height: 64rpx; | |||||
| border-radius: 40rpx; | |||||
| display: flex; | |||||
| justify-content: space-between; | |||||
| background-color: rgba(0, 0, 0, 0.2); | |||||
| font-size: 22rpx; | |||||
| } | |||||
| .bottom { | |||||
| // flex: 1; | |||||
| width: 100%; | |||||
| overflow: hidden; | |||||
| .OrderListItem { | |||||
| display: flex; | |||||
| justify-content: space-between; | |||||
| padding: 0 20rpx; | |||||
| height: 65rpx; | |||||
| line-height: 65rpx; | |||||
| .name, | |||||
| .coin { | |||||
| font-weight: 900; | |||||
| } | |||||
| .time { | |||||
| font-weight: 100; | |||||
| } | |||||
| } | |||||
| } | |||||
| } | |||||
| </style> | |||||
| @@ -1,156 +1,525 @@ | |||||
| <template> | <template> | ||||
| <view class="page"> | |||||
| <image class="bgImg" src="../../assets/img/homeImg.png" mode="aspectFit" /> | |||||
| <!-- 视频,已废弃 --> | |||||
| <view v-show="false" class="videoBox"> | |||||
| <!-- <video | |||||
| src="https://video.metavatar.cc/sv/d51a6f6-187fa2dff79/d51a6f6-187fa2dff79.mp4" | |||||
| autoplay | |||||
| muted | |||||
| loop | |||||
| :controls="false" | |||||
| /> --> | |||||
| <!-- <video | |||||
| src="https://wenlian.wenzhou.gov.cn//upload/video/2021-01-14%E3%80%8A%E7%93%AF%E8%B6%8A%E4%B9%8B%E5%8D%8E%E3%80%8B%E6%B8%A0%E5%B7%9D%EF%BC%9A%E8%B5%B0%E7%AC%94%E5%86%99%E4%BA%BA%E7%94%9F.mp4" | |||||
| autoplay | |||||
| loop | |||||
| :controls="false" | |||||
| /> --> | |||||
| <view :class="pageClass"> | |||||
| <!-- 背景图 --> | |||||
| <!-- <image class="bgc" src="../../assets/img/avatar.png"></image> --> | |||||
| <!-- 头像 --> | |||||
| <view class="avatarBox"> | |||||
| <image | |||||
| class="avatar" | |||||
| src="../../assets/img/avatar.png" | |||||
| mode="scaleToFill" | |||||
| /> | |||||
| <view @click="chooseAvatar" class="changeAvatar"> | |||||
| <image src="../../assets/img/reset.png" mode="aspectFit" /> | |||||
| </view> | |||||
| </view> | </view> | ||||
| <view class="bottomBox"> | |||||
| <view class="bottomBtn" @click="toCreate"> 开始制作我的数字分身 </view> | |||||
| <u-checkbox-group v-model="checkboxValue1" placement="row"> | |||||
| <u-checkbox | |||||
| labelColor="white" | |||||
| activeColor="red" | |||||
| v-for="(item, index) in checkboxList1" | |||||
| :key="index" | |||||
| :label="item.name" | |||||
| :name="item.name" | |||||
| > | |||||
| </u-checkbox> | |||||
| </u-checkbox-group> | |||||
| <!-- 金币 --> | |||||
| <view class="coinBox"> | |||||
| 我的金币: 30 | |||||
| <text @click="goBuyCoin">购买金币</text></view | |||||
| > | |||||
| <!-- tab栏 --> | |||||
| <view class="tabsBox"> | |||||
| <view | |||||
| class="tabItem" | |||||
| v-for="item in tabList" | |||||
| :key="item.id" | |||||
| :class="showListActive == item.id ? 'active' : ''" | |||||
| @click="clickTabHandle(item)" | |||||
| > | |||||
| {{ item.name }}</view | |||||
| > | |||||
| </view> | |||||
| <!-- 显示风格列表内容 --> | |||||
| <scroll-view | |||||
| :scroll-y="true" | |||||
| v-show="showListActive == 1" | |||||
| class="showStyleList" | |||||
| > | |||||
| <view v-for="item in 7" :key="item" class="showListItem"> | |||||
| <view class="top"> | |||||
| <text class="name">风格名称</text> | |||||
| <view class="time"> | |||||
| <text>生成时间</text> | |||||
| <!-- 更多 --> | |||||
| <view class="moreBox"> | |||||
| <image src="../../assets/icon/more.png" mode="widthFix" /> | |||||
| </view> | |||||
| </view> | |||||
| </view> | |||||
| <scroll-view :scroll-x="true" class="imgListBox"> | |||||
| <view v-for="item in 6" :key="item" class="item"> | |||||
| <image | |||||
| src="../../assets/icon/uploadImg.png" | |||||
| class="cover" | |||||
| mode="aspectFill" | |||||
| ></image> | |||||
| </view> | |||||
| </scroll-view> | |||||
| </view> | |||||
| </scroll-view> | |||||
| <!-- 显示视频列表内容 --> | |||||
| <scroll-view | |||||
| :scroll-y="true" | |||||
| v-show="showListActive == 2" | |||||
| class="showVideoList" | |||||
| > | |||||
| <view v-for="item in 7" :key="item" class="showListItem"> | |||||
| <image | |||||
| class="showImg" | |||||
| src="../../assets/img/avatar.png" | |||||
| mode="aspectFit" | |||||
| /> | |||||
| <view class="videoInfo"> | |||||
| <view class="name">视频名称</view> | |||||
| <view class="time">生成时间</view> | |||||
| </view> | |||||
| <!-- 播放按钮 --> | |||||
| <view class="playIcon"> | |||||
| <image src="../../assets/icon/play.png" mode="aspectFit" /> | |||||
| </view> | |||||
| <!-- 更多 --> | |||||
| <view class="moreBox"> | |||||
| <image src="../../assets/icon/more.png" mode="widthFix" /> | |||||
| </view> | |||||
| </view> | |||||
| </scroll-view> | |||||
| <!-- 显示邀请列表内容 --> | |||||
| <view class="InviteBox" v-show="showListActive == 3"> | |||||
| <scroll-view :scroll-y="true" class="showInviteList"> | |||||
| <view v-for="item in 9" class="InviteList"> | |||||
| <up-avatar :src="avatarUrl" size="50"></up-avatar> | |||||
| <view class="info"> | |||||
| <view class="name">猕猴桃</view> | |||||
| <view class="time">2023/7/29</view> | |||||
| </view> | |||||
| <view class="getCoin"> 金币+2 </view> | |||||
| </view> | |||||
| </scroll-view> | |||||
| <view class="inviteBtn">继续邀请好友</view> | |||||
| </view> | |||||
| <!-- 显示消费列表内容 --> | |||||
| <view v-show="showListActive == 4" class="showOrderList"> | |||||
| <view class="top"> | |||||
| <text>名称</text> | |||||
| <text>时间</text> | |||||
| <text>金币</text> | |||||
| </view> | |||||
| <scroll-view :scroll-y="true" class="bottom"> | |||||
| <view class="OrderListItem" v-for="item in 16"> | |||||
| <view class="name">大西瓜</view> | |||||
| <view class="time">2023/7/29 </view> | |||||
| <view class="coin">-2金币</view> | |||||
| </view> | |||||
| </scroll-view> | |||||
| </view> | </view> | ||||
| </view> | </view> | ||||
| </template> | </template> | ||||
| <script setup> | <script setup> | ||||
| //#region 导入 | //#region 导入 | ||||
| import { ref, reactive } from "vue"; | |||||
| import { voiceTotalApi, loginPhoneApi } from "../../api/login.js"; | |||||
| import { ref, reactive, computed } from "vue"; | |||||
| import { voiceTotalApi } from "../../api/login.js"; | |||||
| import { userInfoModules } from "@/store/modules/userInfo"; | import { userInfoModules } from "@/store/modules/userInfo"; | ||||
| import imageCompression from "browser-image-compression"; //压缩图片插件 | |||||
| //#endregion | //#endregion | ||||
| const userInfoModulesPinia = userInfoModules(); | |||||
| //#region 勾选 | |||||
| const checkboxValue1 = ref([]); | |||||
| const checkboxList1 = ref([ | |||||
| { | |||||
| name: "同意智像相机用户使用协议", | |||||
| disabled: false, | |||||
| }, | |||||
| ]); | |||||
| async function toCreate() { | |||||
| if (checkboxValue1.value[0]) { | |||||
| await handleLogin(); | |||||
| // 定义,杂项 | |||||
| const userInfoModulesPinia = userInfoModules(); | |||||
| const pageClass = computed(() => { | |||||
| if (userInfoModulesPinia.platForm == 1) { | |||||
| return "page pageH5"; | |||||
| } else { | } else { | ||||
| uni.showModal({ | |||||
| title: "提示", | |||||
| content: "同意慧图相机用户使用协议?", | |||||
| success: function (res) { | |||||
| if (res.confirm) { | |||||
| checkboxList1.value[0].disabled = true; | |||||
| handleLogin(); | |||||
| } else if (res.cancel) { | |||||
| } | |||||
| }, | |||||
| }); | |||||
| return "page"; | |||||
| } | } | ||||
| } | |||||
| const userInfo = ref(null); | |||||
| async function handleLogin() { | |||||
| // uni.getUserInfo({}); | |||||
| uni.getUserProfile({ | |||||
| desc: "用于完善用户信息", | |||||
| success: async (res1) => { | |||||
| userInfo.value = res1.userInfo; | |||||
| userInfoModulesPinia.userInfo = res1.userInfo; | |||||
| console.log(userInfoModulesPinia.openId, "拿出openid"); | |||||
| }); | |||||
| const data = { | |||||
| appId: "wx75cf14e3a0d45821", | |||||
| openId: userInfoModulesPinia.openId, | |||||
| encryptedData: res1.encryptedData, | |||||
| iv: res1.iv, | |||||
| }; | |||||
| try { | |||||
| const res2 = await loginPhoneApi(data); | |||||
| uni.showToast({ | |||||
| icon: "none", | |||||
| title: "获取成功", | |||||
| }); | |||||
| } catch (error) { | |||||
| uni.showToast({ | |||||
| icon: "none", | |||||
| title: "获取失败", | |||||
| //#endregion | |||||
| //#region 头像 | |||||
| const avatarUrl = ref(null); | |||||
| function chooseAvatar(params) { | |||||
| uni.chooseImage({ | |||||
| count: 1, // 最多可以选择的图片张数,这里设置为1,只选择一张图片 | |||||
| success: async (res) => { | |||||
| // avatarUrl.value = res.tempFilePaths[0]; | |||||
| // TODO: 在这里处理图片上传逻辑,你可以调用上传接口将图片上传到服务器 | |||||
| // 示例代码: | |||||
| // uploadImageToServer(tempFilePaths[0]); | |||||
| // 图片压缩 | |||||
| console.log(res.tempFiles[0].size); | |||||
| if (userInfoModulesPinia.platForm != 1) { | |||||
| uni.compressImage({ | |||||
| src: res.tempFilePaths[0], | |||||
| quality: 20, | |||||
| success: (res2) => { | |||||
| avatarUrl.value = res2.tempFilePath; | |||||
| console.log(res2.tempFilePath); | |||||
| }, | |||||
| }); | }); | ||||
| } else { | |||||
| const options = { | |||||
| maxSizeMB: 2, // 最大压缩大小为 4MB | |||||
| useWebWorker: true, // 使用 Web Worker 进行压缩,提高性能 | |||||
| }; | |||||
| const compressedFile = await imageCompression( | |||||
| res.tempFiles[0], | |||||
| options | |||||
| ); | |||||
| //compressedFile是一个blob对象 | |||||
| avatarUrl.value = URL.createObjectURL(compressedFile); | |||||
| console.log(compressedFile); | |||||
| // avatarUrl.value = compressedFile; | |||||
| console.log("压缩图片h5"); | |||||
| } | } | ||||
| }, | }, | ||||
| fail: (err) => { | fail: (err) => { | ||||
| console.log(err); | |||||
| uni.showToast({ | |||||
| icon: "none", | |||||
| title: "用户拒绝获取", | |||||
| }); | |||||
| console.error("选择图片失败", err); | |||||
| }, | }, | ||||
| }); | }); | ||||
| } | } | ||||
| //#endregion --------------------- | |||||
| function goBuyCoin() { | |||||
| uni.navigateTo({ | |||||
| url: "buyCoin", | |||||
| }); | |||||
| } | |||||
| //#endregion | |||||
| //#region tab | |||||
| const tabList = ref([ | |||||
| { name: "我的写真", id: 1 }, | |||||
| { name: "我的视频", id: 2 }, | |||||
| { name: "我的邀请", id: 3 }, | |||||
| { name: "消费记录", id: 4 }, | |||||
| ]); | |||||
| const showListActive = ref(1); | |||||
| function clickTabHandle(e) { | |||||
| showListActive.value = e.id; | |||||
| } | |||||
| //#endregion | |||||
| voiceTotalApi(); | |||||
| //#region | |||||
| //#endregion | |||||
| </script> | </script> | ||||
| <style lang="scss"> | <style lang="scss"> | ||||
| .page { | .page { | ||||
| position: relative; | position: relative; | ||||
| padding: 0; | |||||
| min-height: 100vh; | |||||
| } | |||||
| .bgImg { | |||||
| width: 750rpx; | |||||
| height: 100vh; | height: 100vh; | ||||
| background-color: rgba(0, 0, 0, 0.8); | |||||
| // background: url("../../assets/img/avatar.png"); | |||||
| .bgc { | |||||
| position: absolute; | |||||
| width: 750rpx; | |||||
| height: 750rpx; | |||||
| transform: scale(1.5); | |||||
| top: 187rpx; | |||||
| left: 0; | |||||
| object-fit: cover; | |||||
| z-index: -2; | |||||
| backdrop-filter: blur(3px); | |||||
| // backdrop-filter: blur(20px); | |||||
| } | |||||
| } | } | ||||
| .videoBox { | |||||
| width: 750rpx; | |||||
| height: 1120rpx; | |||||
| // aspect-ratio: 9/12; | |||||
| video { | |||||
| width: 100%; | |||||
| height: 100%; | |||||
| // aspect-ratio: 9/12; | |||||
| .pageH5 { | |||||
| height: calc(100vh - 44px); | |||||
| } | |||||
| .avatarBox { | |||||
| position: relative; | |||||
| width: 260rpx; | |||||
| height: 260rpx; | |||||
| .avatar { | |||||
| width: 260rpx; | |||||
| height: 260rpx; | |||||
| border-radius: 130rpx; | |||||
| } | |||||
| .changeAvatar { | |||||
| position: absolute; | |||||
| right: -20rpx; | |||||
| bottom: 0; | |||||
| width: 66rpx; | |||||
| height: 66rpx; | |||||
| image { | |||||
| width: 100%; | |||||
| height: 100%; | |||||
| } | |||||
| } | |||||
| } | |||||
| .coinBox { | |||||
| margin-top: 38rpx; | |||||
| line-height: 50rpx; | |||||
| text { | |||||
| margin-left: 28rpx; | |||||
| display: inline-block; | |||||
| width: 160rpx; | |||||
| height: 50rpx; | |||||
| border-radius: 50rpx; | |||||
| font-size: 26rpx; | |||||
| text-align: center; | |||||
| // font-weight: 700; | |||||
| background-color: rgba(255, 255, 255, 0.1); | |||||
| } | |||||
| } | |||||
| // tab栏样式 | |||||
| .tabsBox { | |||||
| display: flex; | |||||
| justify-content: space-between; | |||||
| margin-top: 50rpx; | |||||
| .tabItem { | |||||
| margin: 0 9rpx; | |||||
| width: 160rpx; | |||||
| height: 80rpx; | |||||
| line-height: 80rpx; | |||||
| text-align: center; | |||||
| border-radius: 12rpx; | |||||
| background-color: rgba(255, 255, 255, 0.1); | |||||
| } | |||||
| .active { | |||||
| background-color: rgba(255, 79, 0, 1); | |||||
| } | |||||
| } | |||||
| // 风格列表 | |||||
| .showStyleList { | |||||
| flex: 1; | |||||
| overflow: hidden; | |||||
| margin-top: 30rpx; | |||||
| width: 690rpx; | |||||
| .showListItem { | |||||
| margin-top: 10rpx; | |||||
| .top { | |||||
| display: flex; | |||||
| justify-content: space-between; | |||||
| padding: 0 30rpx; | |||||
| margin-bottom: 20rpx; | |||||
| .name { | |||||
| font-weight: 900; | |||||
| } | |||||
| .time { | |||||
| display: inline-block; | |||||
| font-size: 22rpx; | |||||
| font-weight: 100; | |||||
| line-height: 33rpx; | |||||
| text { | |||||
| margin-right: 50rpx; | |||||
| } | |||||
| .moreBox { | |||||
| display: inline-block; | |||||
| width: 8rpx; | |||||
| height: 33rpx; | |||||
| image { | |||||
| vertical-align: top; | |||||
| width: 100%; | |||||
| } | |||||
| } | |||||
| } | |||||
| } | |||||
| .imgListBox { | |||||
| white-space: nowrap; | |||||
| display: flex; | |||||
| justify-content: space-between; | |||||
| flex-wrap: nowrap; | |||||
| height: 200rpx; | |||||
| .item { | |||||
| width: 150rpx; | |||||
| height: 200rpx; | |||||
| border-radius: 30rpx; | |||||
| margin-right: 30rpx; | |||||
| display: inline-flex; // item的外层定义成行内元素才可进行滚动 inline-block / inline-flex 均可 | |||||
| flex-direction: column; | |||||
| align-items: center; | |||||
| .cover { | |||||
| width: 150rpx; | |||||
| height: 200rpx; | |||||
| border-radius: 30rpx; | |||||
| } | |||||
| } | |||||
| } | |||||
| } | |||||
| } | |||||
| // 视频列表 | |||||
| .showVideoList { | |||||
| flex: 1; | |||||
| overflow: hidden; | |||||
| margin-top: 30rpx; | |||||
| width: 690rpx; | |||||
| padding: 15rpx; | |||||
| display: flex; | |||||
| flex-wrap: wrap; | |||||
| justify-content: flex-start; | |||||
| word-break: keep-all; | |||||
| .showListItem { | |||||
| position: relative; | |||||
| display: inline-block; | |||||
| width: 330rpx; | |||||
| height: 440rpx; | |||||
| background-color: #000; | |||||
| margin-bottom: 25rpx; | |||||
| border-radius: 25rpx; | |||||
| overflow: hidden; | |||||
| .showImg { | |||||
| position: absolute; | |||||
| top: 0; | |||||
| z-index: 1; | |||||
| width: 100%; | |||||
| } | |||||
| .videoInfo { | |||||
| position: absolute; | |||||
| bottom: 0; | |||||
| width: 100%; | |||||
| height: 100rpx; | |||||
| padding: 10rpx 20rpx; | |||||
| background-color: red; | |||||
| z-index: 2; | |||||
| .name { | |||||
| font-weight: 900; | |||||
| margin-bottom: 10rpx; | |||||
| } | |||||
| .time { | |||||
| font-size: 22rpx; | |||||
| font-weight: 100; | |||||
| } | |||||
| } | |||||
| .playIcon { | |||||
| position: absolute; | |||||
| top: 50%; | |||||
| left: 50%; | |||||
| transform: translate(-50%, -50%); | |||||
| z-index: 2; | |||||
| image { | |||||
| width: 72rpx; | |||||
| height: 72rpx; | |||||
| } | |||||
| } | |||||
| .moreBox { | |||||
| position: absolute; | |||||
| top: 23rpx; | |||||
| right: 26rpx; | |||||
| width: 8rpx; | |||||
| height: 33rpx; | |||||
| image { | |||||
| width: 100%; | |||||
| } | |||||
| } | |||||
| } | |||||
| .showListItem:nth-child(odd) { | |||||
| margin-right: 30rpx; | |||||
| } | } | ||||
| } | } | ||||
| .bottomBox { | |||||
| position: absolute; | |||||
| bottom: 0; | |||||
| // 邀请列表 | |||||
| .InviteBox { | |||||
| width: 100%; | width: 100%; | ||||
| height: 345rpx; | |||||
| position: relative; | |||||
| flex: 1; | |||||
| display: flex; | display: flex; | ||||
| flex-direction: column; | flex-direction: column; | ||||
| align-items: center; | align-items: center; | ||||
| background-color: rgba(0, 0, 0, 0.8); | |||||
| color: #fff !important; | |||||
| .bottomBtn { | |||||
| margin-top: 55rpx; | |||||
| margin-bottom: 65rpx; | |||||
| overflow: hidden; | |||||
| .inviteBtn { | |||||
| position: absolute; | |||||
| bottom: 20rpx; | |||||
| left: 50%; | |||||
| transform: translate(-50%, 0); | |||||
| width: 520rpx; | width: 520rpx; | ||||
| height: 100rpx; | height: 100rpx; | ||||
| border-radius: 50rpx; | |||||
| line-height: 100rpx; | line-height: 100rpx; | ||||
| text-align: center; | text-align: center; | ||||
| background-color: rgba(255, 79, 0, 1); | |||||
| font-size: 30rpx; | font-size: 30rpx; | ||||
| font-weight: 900; | |||||
| background-color: rgba(255, 79, 0, 1); | |||||
| border-radius: 50rpx; | |||||
| } | |||||
| } | |||||
| .showInviteList { | |||||
| position: relative; | |||||
| margin-top: 15rpx; | |||||
| flex: 1; | |||||
| overflow: hidden; | |||||
| width: 100%; | |||||
| .InviteList { | |||||
| display: flex; | |||||
| justify-content: flex-start; | |||||
| margin-bottom: 12rpx; | |||||
| width: 100%; | |||||
| height: 120rpx; | |||||
| border-radius: 24rpx; | |||||
| background-color: rgba(255, 255, 255, 0.1); | |||||
| .u-avatar { | |||||
| margin: 0 30rpx; | |||||
| height: 120rpx !important; | |||||
| } | |||||
| .info { | |||||
| flex: 1; | |||||
| display: flex; | |||||
| flex-direction: column; | |||||
| justify-content: space-evenly; | |||||
| .name { | |||||
| font-weight: bold; | |||||
| } | |||||
| .time { | |||||
| font-size: 22rpx; | |||||
| } | |||||
| } | |||||
| .getCoin { | |||||
| width: 145rpx; | |||||
| height: 120rpx; | |||||
| line-height: 120rpx; | |||||
| text-align: center; | |||||
| margin-right: 30rpx; | |||||
| } | |||||
| } | |||||
| .InviteList:last-child::after { | |||||
| content: ""; | |||||
| width: 1rpx; | |||||
| height: 130rpx; | |||||
| padding-bottom: 130rpx; | |||||
| } | |||||
| } | |||||
| // 消费列表 | |||||
| .showOrderList { | |||||
| position: relative; | |||||
| flex: 1; | |||||
| margin-top: 30rpx; | |||||
| background-color: rgba(255, 255, 255, 0.1); | |||||
| border-radius: 24rpx; | |||||
| width: 100%; | |||||
| box-sizing: border-box; | |||||
| padding: 15rpx 20rpx; | |||||
| // padding-top: 80rpx; | |||||
| overflow: hidden; | |||||
| display: flex; | |||||
| flex-direction: column; | |||||
| align-items: center; | |||||
| .top { | |||||
| width: 100%; | |||||
| padding: 0 50rpx; | |||||
| height: 64rpx; | |||||
| line-height: 64rpx; | |||||
| border-radius: 40rpx; | |||||
| display: flex; | |||||
| justify-content: space-between; | |||||
| background-color: rgba(0, 0, 0, 0.2); | |||||
| font-size: 22rpx; | |||||
| } | |||||
| .bottom { | |||||
| // flex: 1; | |||||
| width: 100%; | |||||
| overflow: hidden; | |||||
| .OrderListItem { | |||||
| display: flex; | |||||
| justify-content: space-between; | |||||
| padding: 0 20rpx; | |||||
| height: 65rpx; | |||||
| line-height: 65rpx; | |||||
| .name, | |||||
| .coin { | |||||
| font-weight: 900; | |||||
| } | |||||
| .time { | |||||
| font-weight: 100; | |||||
| } | |||||
| } | |||||
| } | } | ||||
| } | } | ||||
| </style> | </style> | ||||
| @@ -0,0 +1,215 @@ | |||||
| <template> | |||||
| <view :class="pageClass"> | |||||
| <!-- mode="aspectFit" --> | |||||
| <image class="bgImg" src="../../assets/img/homeImg.png" /> | |||||
| <!-- 视频,已废弃 --> | |||||
| <view v-show="false" class="videoBox"> | |||||
| <!-- <video | |||||
| src="https://video.metavatar.cc/sv/d51a6f6-187fa2dff79/d51a6f6-187fa2dff79.mp4" | |||||
| autoplay | |||||
| muted | |||||
| loop | |||||
| :controls="false" | |||||
| /> --> | |||||
| <!-- <video | |||||
| src="https://wenlian.wenzhou.gov.cn//upload/video/2021-01-14%E3%80%8A%E7%93%AF%E8%B6%8A%E4%B9%8B%E5%8D%8E%E3%80%8B%E6%B8%A0%E5%B7%9D%EF%BC%9A%E8%B5%B0%E7%AC%94%E5%86%99%E4%BA%BA%E7%94%9F.mp4" | |||||
| autoplay | |||||
| loop | |||||
| :controls="false" | |||||
| /> --> | |||||
| </view> | |||||
| <view class="bottomBox"> | |||||
| <button | |||||
| class="bottomBtn" | |||||
| open-type="getPhoneNumber" | |||||
| type="default" | |||||
| @getphonenumber="toCreate" | |||||
| > | |||||
| 开始制作我的数字分身 | |||||
| </button> | |||||
| <!-- <view class="bottomBtn" @click="toCreate"> 开始制作我的数字分身 </view> --> | |||||
| <u-checkbox-group v-model="checkboxValue1" placement="row"> | |||||
| <u-checkbox | |||||
| labelColor="white" | |||||
| activeColor="red" | |||||
| v-for="(item, index) in checkboxList1" | |||||
| :key="index" | |||||
| :label="item.name" | |||||
| :name="item.name" | |||||
| > | |||||
| </u-checkbox> | |||||
| </u-checkbox-group> | |||||
| </view> | |||||
| </view> | |||||
| </template> | |||||
| <script setup> | |||||
| //#region 导入 | |||||
| import { ref, reactive } from "vue"; | |||||
| import { voiceTotalApi, loginPhoneApi } from "../../api/login.js"; | |||||
| import { userInfoModules } from "@/store/modules/userInfo"; | |||||
| //#endregion | |||||
| const userInfoModulesPinia = userInfoModules(); | |||||
| const pageClass = computed(() => { | |||||
| if (userInfoModulesPinia.platForm == 1) { | |||||
| return "page pageH5"; | |||||
| } else { | |||||
| return "page"; | |||||
| } | |||||
| }); | |||||
| //#region 勾选 | |||||
| const checkboxValue1 = ref([]); | |||||
| const checkboxList1 = ref([ | |||||
| { | |||||
| name: "同意智像相机用户使用协议", | |||||
| disabled: false, | |||||
| }, | |||||
| ]); | |||||
| async function getphonenumber(e) { | |||||
| console.log(e); | |||||
| if (e.detail.errMsg.includes("ok")) { | |||||
| //用户授权了手机号 | |||||
| const data = { | |||||
| appId: "wx75cf14e3a0d45821", | |||||
| openId: userInfoModulesPinia.openId, | |||||
| encryptedData: e.detail.encryptedData, | |||||
| iv: e.detail.iv, | |||||
| }; | |||||
| try { | |||||
| const res2 = await loginPhoneApi(data); | |||||
| uni.showToast({ | |||||
| icon: "none", | |||||
| title: "获取成功", | |||||
| }); | |||||
| userInfoModulesPinia.token = res2.data.token; | |||||
| uni.redirectTo({ | |||||
| url: "/pages/index/index", | |||||
| }); | |||||
| } catch (error) { | |||||
| uni.showToast({ | |||||
| icon: "none", | |||||
| title: "获取失败", | |||||
| }); | |||||
| } | |||||
| } else { | |||||
| uni.showToast({ | |||||
| icon: "none", | |||||
| title: "获取手机号失败", | |||||
| }); | |||||
| //code已过期 重新拿code再授权 | |||||
| } | |||||
| } | |||||
| async function toCreate(e) { | |||||
| if (checkboxValue1.value[0]) { | |||||
| // await handleLogin(); | |||||
| await getphonenumber(e); | |||||
| } else { | |||||
| uni.showModal({ | |||||
| title: "提示", | |||||
| content: "同意慧图相机用户使用协议?", | |||||
| success: function (res) { | |||||
| if (res.confirm) { | |||||
| checkboxList1.value[0].disabled = true; | |||||
| // handleLogin(); | |||||
| getphonenumber(e); | |||||
| } else if (res.cancel) { | |||||
| } | |||||
| }, | |||||
| fail: (err) => {}, | |||||
| }); | |||||
| } | |||||
| } | |||||
| const userInfo = ref(null); | |||||
| async function handleLogin() { | |||||
| // uni.getUserInfo({}); | |||||
| // getPhoneNumber | |||||
| // getUserProfile | |||||
| uni.getUserProfile({ | |||||
| desc: "用于完善用户信息", | |||||
| success: async (res1) => { | |||||
| console.log(res1); | |||||
| userInfo.value = res1.userInfo; | |||||
| userInfoModulesPinia.userInfo = res1.userInfo; | |||||
| console.log(userInfoModulesPinia.openId, "拿出openid"); | |||||
| const data = { | |||||
| appId: "wx75cf14e3a0d45821", | |||||
| openId: userInfoModulesPinia.openId, | |||||
| encryptedData: res1.encryptedData, | |||||
| iv: res1.iv, | |||||
| }; | |||||
| try { | |||||
| const res2 = await loginPhoneApi(data); | |||||
| uni.showToast({ | |||||
| icon: "none", | |||||
| title: "获取成功", | |||||
| }); | |||||
| } catch (error) { | |||||
| uni.showToast({ | |||||
| icon: "none", | |||||
| title: "获取失败", | |||||
| }); | |||||
| } | |||||
| }, | |||||
| fail: (err) => { | |||||
| console.log(err); | |||||
| uni.showToast({ | |||||
| icon: "none", | |||||
| title: "用户拒绝获取", | |||||
| }); | |||||
| }, | |||||
| }); | |||||
| } | |||||
| //#endregion --------------------- | |||||
| voiceTotalApi(); | |||||
| </script> | |||||
| <style lang="scss"> | |||||
| .page { | |||||
| position: relative; | |||||
| padding: 0; | |||||
| min-height: 100vh; | |||||
| } | |||||
| .bgImg { | |||||
| width: 750rpx; | |||||
| height: 100vh; | |||||
| } | |||||
| .videoBox { | |||||
| width: 750rpx; | |||||
| height: 1120rpx; | |||||
| // aspect-ratio: 9/12; | |||||
| video { | |||||
| width: 100%; | |||||
| height: 100%; | |||||
| // aspect-ratio: 9/12; | |||||
| } | |||||
| } | |||||
| .bottomBox { | |||||
| position: absolute; | |||||
| bottom: 0; | |||||
| width: 100%; | |||||
| height: 345rpx; | |||||
| display: flex; | |||||
| flex-direction: column; | |||||
| align-items: center; | |||||
| background-color: rgba(0, 0, 0, 0.8); | |||||
| color: #fff !important; | |||||
| .bottomBtn { | |||||
| margin-top: 55rpx; | |||||
| margin-bottom: 65rpx; | |||||
| width: 520rpx; | |||||
| height: 100rpx; | |||||
| border-radius: 50rpx; | |||||
| line-height: 100rpx; | |||||
| text-align: center; | |||||
| color: #fff; | |||||
| background-color: rgba(255, 79, 0, 1); | |||||
| font-size: 30rpx; | |||||
| font-weight: 900; | |||||
| } | |||||
| } | |||||
| </style> | |||||
| @@ -7,12 +7,15 @@ | |||||
| // background-color: #fff; | // background-color: #fff; | ||||
| font-size: 26rpx; | font-size: 26rpx; | ||||
| color: #fff; | color: #fff; | ||||
| min-height: 100vh; | |||||
| position: relative; | position: relative; | ||||
| min-height: 100vh; | min-height: 100vh; | ||||
| background-color: rgba(0, 0, 0, 0.8); | background-color: rgba(0, 0, 0, 0.8); | ||||
| } | } | ||||
| .pageH5 { | |||||
| min-height: calc(100vh - 44px); | |||||
| } | |||||
| body { | body { | ||||
| -webkit-touch-callout: none; | -webkit-touch-callout: none; | ||||
| /*系统默认菜单被禁用*/ | /*系统默认菜单被禁用*/ | ||||