@@ -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; | ||||
/*系统默认菜单被禁用*/ | /*系统默认菜单被禁用*/ | ||||