congzc vor 1 Jahr
Ursprung
Commit
e21023d9ea
8 geänderte Dateien mit 765 neuen und 676 gelöschten Zeilen
  1. +43
    -41
      src/App.vue
  2. +11
    -0
      src/manifest.json
  3. +10
    -10
      src/pages.json
  4. +0
    -511
      src/pages/home/index.vue
  5. +0
    -0
      src/pages/index/buyCoin.vue
  6. +482
    -113
      src/pages/index/index.vue
  7. +215
    -0
      src/pages/login/index.vue
  8. +4
    -1
      src/style/my.scss

+ 43
- 41
src/App.vue Datei anzeigen

@@ -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!");


+ 11
- 0
src/manifest.json Datei anzeigen

@@ -51,6 +51,17 @@
/* 小程序特有相关 */
"mp-weixin": {
"appid": "wx75cf14e3a0d45821",
"permission": {
"scope.userLocation": {
"desc": "获取您的地理位置信息"
},
"scope.userInfo": {
"desc": "获取您的用户信息"
},
"scope.userPhoneNumber": {
"desc": "获取您的手机号码"
}
},
"setting": {
"urlCheck": false,
"ignoreDevUnusedFiles": false,


+ 10
- 10
src/pages.json Datei anzeigen

@@ -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": "智像"
}
},
{


+ 0
- 511
src/pages/home/index.vue Datei anzeigen

@@ -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">
我的金币:&nbsp; &nbsp;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>

src/pages/home/buyCoin.vue → src/pages/index/buyCoin.vue Datei anzeigen


+ 482
- 113
src/pages/index/index.vue Datei anzeigen

@@ -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">
我的金币:&nbsp; &nbsp;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>

+ 215
- 0
src/pages/login/index.vue Datei anzeigen

@@ -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>

+ 4
- 1
src/style/my.scss Datei anzeigen

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


Laden…
Abbrechen
Speichern