@@ -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({ | |||
title: "登录失败,请重试", | |||
icon: "none", | |||
}); | |||
} | |||
} catch (error) { | |||
} else { | |||
// uni.redirectTo({ | |||
// url: "pages/index/index", | |||
// }); | |||
@@ -82,7 +92,8 @@ onLaunch(() => { | |||
icon: "none", | |||
}); | |||
} | |||
} else { | |||
}, | |||
fail: (err) => { | |||
// uni.redirectTo({ | |||
// url: "pages/index/index", | |||
// }); | |||
@@ -90,18 +101,9 @@ onLaunch(() => { | |||
title: "登录失败,请重试", | |||
icon: "none", | |||
}); | |||
} | |||
}, | |||
fail: (err) => { | |||
// uni.redirectTo({ | |||
// url: "pages/index/index", | |||
// }); | |||
uni.showToast({ | |||
title: "登录失败,请重试", | |||
icon: "none", | |||
}); | |||
}, | |||
}); | |||
}, | |||
}); | |||
} | |||
}); | |||
onShow(() => { | |||
console.log("App Show!"); | |||
@@ -51,6 +51,17 @@ | |||
/* 小程序特有相关 */ | |||
"mp-weixin": { | |||
"appid": "wx75cf14e3a0d45821", | |||
"permission": { | |||
"scope.userLocation": { | |||
"desc": "获取您的地理位置信息" | |||
}, | |||
"scope.userInfo": { | |||
"desc": "获取您的用户信息" | |||
}, | |||
"scope.userPhoneNumber": { | |||
"desc": "获取您的手机号码" | |||
} | |||
}, | |||
"setting": { | |||
"urlCheck": false, | |||
"ignoreDevUnusedFiles": false, | |||
@@ -7,51 +7,51 @@ | |||
} | |||
}, | |||
{ | |||
"path": "pages/uploadPhoto/uploadPhoto", | |||
"path": "pages/index/buyCoin", | |||
"style": { | |||
"navigationBarTitleText": "智像" | |||
"navigationBarTitleText": "购买金币" | |||
} | |||
}, | |||
{ | |||
"path": "pages/uploadPhoto/success", | |||
"path": "pages/login/index", | |||
"style": { | |||
"navigationBarTitleText": "智像" | |||
} | |||
}, | |||
{ | |||
"path": "pages/closeStyle/closeStyle", | |||
"path": "pages/uploadPhoto/uploadPhoto", | |||
"style": { | |||
"navigationBarTitleText": "智像" | |||
} | |||
}, | |||
{ | |||
"path": "pages/closeStyle/goCreatePhoto", | |||
"path": "pages/uploadPhoto/success", | |||
"style": { | |||
"navigationBarTitleText": "智像" | |||
} | |||
}, | |||
{ | |||
"path": "pages/createing/index", | |||
"path": "pages/closeStyle/closeStyle", | |||
"style": { | |||
"navigationBarTitleText": "智像" | |||
} | |||
}, | |||
{ | |||
"path": "pages/lookPhoto/index", | |||
"path": "pages/closeStyle/goCreatePhoto", | |||
"style": { | |||
"navigationBarTitleText": "智像" | |||
} | |||
}, | |||
{ | |||
"path": "pages/home/index", | |||
"path": "pages/createing/index", | |||
"style": { | |||
"navigationBarTitleText": "智像" | |||
} | |||
}, | |||
{ | |||
"path": "pages/home/buyCoin", | |||
"path": "pages/lookPhoto/index", | |||
"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> | |||
<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 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> | |||
</template> | |||
<script setup> | |||
//#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 imageCompression from "browser-image-compression"; //压缩图片插件 | |||
//#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 { | |||
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) => { | |||
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> | |||
<style lang="scss"> | |||
.page { | |||
position: relative; | |||
padding: 0; | |||
min-height: 100vh; | |||
} | |||
.bgImg { | |||
width: 750rpx; | |||
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%; | |||
height: 345rpx; | |||
position: relative; | |||
flex: 1; | |||
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; | |||
overflow: hidden; | |||
.inviteBtn { | |||
position: absolute; | |||
bottom: 20rpx; | |||
left: 50%; | |||
transform: translate(-50%, 0); | |||
width: 520rpx; | |||
height: 100rpx; | |||
border-radius: 50rpx; | |||
line-height: 100rpx; | |||
text-align: center; | |||
background-color: rgba(255, 79, 0, 1); | |||
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> |
@@ -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; | |||
font-size: 26rpx; | |||
color: #fff; | |||
min-height: 100vh; | |||
position: relative; | |||
min-height: 100vh; | |||
background-color: rgba(0, 0, 0, 0.8); | |||
} | |||
.pageH5 { | |||
min-height: calc(100vh - 44px); | |||
} | |||
body { | |||
-webkit-touch-callout: none; | |||
/*系统默认菜单被禁用*/ | |||