|
|
@@ -2,11 +2,12 @@ |
|
|
|
<view :class="pageClass">
|
|
|
|
<!-- 背景图 -->
|
|
|
|
<!-- <image class="bgc" src="../../assets/img/avatar.png"></image> -->
|
|
|
|
<!-- 头像 -->
|
|
|
|
|
|
|
|
<!-- 毛玻璃 -->
|
|
|
|
<view class="glass">
|
|
|
|
<image src="../../assets/img/homeImg.png" mode="scaleToFill" />
|
|
|
|
</view>
|
|
|
|
<!-- 头像 -->
|
|
|
|
<view class="avatarBox">
|
|
|
|
<image
|
|
|
|
class="avatar"
|
|
|
@@ -22,7 +23,7 @@ |
|
|
|
<view class="coinBox">
|
|
|
|
我的金币: {{ userInfoModulesPinia.myGlod }}
|
|
|
|
<image src="../../assets/icon/icon.png" mode="scaleToFill" />
|
|
|
|
<text @click="goBuyCoin">购买金币</text></view
|
|
|
|
<text @click="goOtherPage('buyCoin')">购买金币</text></view
|
|
|
|
>
|
|
|
|
<!-- tab栏 -->
|
|
|
|
<view class="tabsBox">
|
|
|
@@ -36,33 +37,67 @@ |
|
|
|
{{ item.name }}</view
|
|
|
|
>
|
|
|
|
</view>
|
|
|
|
<!-- 显示风格列表内容 -->
|
|
|
|
<!-- 显示写真列表内容 -->
|
|
|
|
<scroll-view
|
|
|
|
@scrolltolower="getMorePhotoList"
|
|
|
|
:scroll-y="true"
|
|
|
|
v-show="showListActive == 1"
|
|
|
|
class="showStyleList"
|
|
|
|
>
|
|
|
|
<view v-for="item in 7" :key="item" class="showListItem">
|
|
|
|
<view
|
|
|
|
v-for="item in PhotoList"
|
|
|
|
:key="item.id"
|
|
|
|
class="showListItem"
|
|
|
|
@click="goOtherPage(`/pages/lookPhoto/index?id=${item.id}`)"
|
|
|
|
>
|
|
|
|
<view class="top">
|
|
|
|
<text class="name">风格名称</text>
|
|
|
|
<view class="time">
|
|
|
|
<text>生成时间</text>
|
|
|
|
<text
|
|
|
|
>生成时间
|
|
|
|
{{ dayjs(item.createDate).format("YYYY-MM-DD HH:mm:ss") }}</text
|
|
|
|
>
|
|
|
|
<!-- 更多 -->
|
|
|
|
<view class="moreBox">
|
|
|
|
<view class="moreBox" @click="clickDel(item)">
|
|
|
|
<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">
|
|
|
|
<!-- 成功时 -->
|
|
|
|
<scroll-view
|
|
|
|
v-if="item.status == 2"
|
|
|
|
:scroll-x="true"
|
|
|
|
class="imgListBox"
|
|
|
|
>
|
|
|
|
<view v-for="item2 in item.photoList" :key="item2.id" class="item">
|
|
|
|
<image :src="item2.image" class="cover" mode="aspectFill"></image>
|
|
|
|
</view>
|
|
|
|
</scroll-view>
|
|
|
|
<!-- 生产中时 -->
|
|
|
|
<scroll-view
|
|
|
|
v-if="item.status != 2"
|
|
|
|
:scroll-x="true"
|
|
|
|
class="imgListBox"
|
|
|
|
>
|
|
|
|
<view class="creating">
|
|
|
|
<image
|
|
|
|
src="../../assets/icon/uploadImg.png"
|
|
|
|
src="../../assets/img/logo-4.png"
|
|
|
|
class="cover"
|
|
|
|
mode="aspectFill"
|
|
|
|
mode="widthFix"
|
|
|
|
></image>
|
|
|
|
<text>生成中,请稍后</text>
|
|
|
|
</view>
|
|
|
|
</scroll-view>
|
|
|
|
</view>
|
|
|
|
<!-- 空处理 -->
|
|
|
|
<view v-show="PhotoList.length == 0" class="noData"
|
|
|
|
>暂无数据 ,
|
|
|
|
<text
|
|
|
|
@click="goOtherPage('/pages/closeStyle/closeStyle')"
|
|
|
|
class="goCreate"
|
|
|
|
>去生成!</text
|
|
|
|
>
|
|
|
|
</view>
|
|
|
|
</scroll-view>
|
|
|
|
<!-- 显示视频列表内容 -->
|
|
|
|
<scroll-view
|
|
|
@@ -113,23 +148,46 @@ |
|
|
|
<text>金币</text>
|
|
|
|
</view>
|
|
|
|
<scroll-view :scroll-y="true" class="bottom">
|
|
|
|
<view class="OrderListItem" v-for="item in 16" :key="item">
|
|
|
|
<view class="name">大西瓜</view>
|
|
|
|
<view class="time">2023/7/29 </view>
|
|
|
|
<view class="coin">-2金币</view>
|
|
|
|
<view class="OrderListItem" v-for="item in ConsumeList" :key="item.id">
|
|
|
|
<view class="name">{{ getConsumeName(item.type) }}</view>
|
|
|
|
<view class="time">{{
|
|
|
|
dayjs(item.createDate).format("YYYY-MM-DD HH:mm:ss")
|
|
|
|
}}</view>
|
|
|
|
<view class="coin">{{ getSymbol(item.type) }}{{ item.goldNum }}</view>
|
|
|
|
</view>
|
|
|
|
<!-- 空处理 -->
|
|
|
|
<view v-show="ConsumeList.length == 0" class="noData">暂无数据</view>
|
|
|
|
</scroll-view>
|
|
|
|
</view>
|
|
|
|
<!-- 弹出层 -->
|
|
|
|
<view v-if="showPopup" class="mask">
|
|
|
|
<view class="myPopup">
|
|
|
|
<image
|
|
|
|
@click="showPopup = false"
|
|
|
|
src="../../assets/icon/close.png"
|
|
|
|
mode="scaleToFill"
|
|
|
|
/>
|
|
|
|
<view class="text">确定要删除这个写真吗?</view>
|
|
|
|
<view class="del" @click="deletePhoto">删除</view>
|
|
|
|
<view class="cancel" @click="showPopup = false">取消</view>
|
|
|
|
</view>
|
|
|
|
</view>
|
|
|
|
</view>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script setup>
|
|
|
|
//#region 导入
|
|
|
|
|
|
|
|
import dayjs from "dayjs";
|
|
|
|
import { onLoad } from "@dcloudio/uni-app";
|
|
|
|
import { ref, reactive, computed, inject } from "vue";
|
|
|
|
// import App from "../../App.vue";
|
|
|
|
import { findImageApi, findGlodApi, getPhotoListApi } from "../../api/home.js";
|
|
|
|
import {
|
|
|
|
findImageApi,
|
|
|
|
findGlodApi,
|
|
|
|
getPhotoListApi,
|
|
|
|
getConsumeListApi,
|
|
|
|
deleteApi,
|
|
|
|
} from "../../api/home.js";
|
|
|
|
import { userInfoModules } from "@/store/modules/userInfo";
|
|
|
|
import imageCompression from "browser-image-compression"; //压缩图片插件
|
|
|
|
//#endregion
|
|
|
@@ -193,9 +251,9 @@ function chooseAvatar() { |
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
function goBuyCoin() {
|
|
|
|
function goOtherPage(url) {
|
|
|
|
uni.navigateTo({
|
|
|
|
url: "buyCoin",
|
|
|
|
url: url,
|
|
|
|
});
|
|
|
|
}
|
|
|
|
//#endregion
|
|
|
@@ -214,20 +272,86 @@ function clickTabHandle(e) { |
|
|
|
//#endregion
|
|
|
|
|
|
|
|
//#region 获取写真列表
|
|
|
|
const pageSize = ref(6);
|
|
|
|
const pageNum = ref(1);
|
|
|
|
const pageSize1 = ref(8);
|
|
|
|
const pageNum1 = ref(1);
|
|
|
|
const PhotoList = ref(7);
|
|
|
|
async function getPhotoList(pageSize, pageNum) {
|
|
|
|
try {
|
|
|
|
const res = await getPhotoListApi(pageSize, pageNum);
|
|
|
|
PhotoList.value = res.data.list;
|
|
|
|
} catch (error) {}
|
|
|
|
}
|
|
|
|
//#endregion
|
|
|
|
//#region 获取图片,金币,
|
|
|
|
async function getMorePhotoList() {
|
|
|
|
try {
|
|
|
|
pageNum1.value += 1;
|
|
|
|
const res = await getPhotoListApi(pageSize1.value, pageNum1.value);
|
|
|
|
if (res.data.list.length == 0) {
|
|
|
|
pageNum1.value -= 1;
|
|
|
|
}
|
|
|
|
PhotoList.value.push(...res.data.list);
|
|
|
|
} catch (error) {
|
|
|
|
uni.showToast({
|
|
|
|
title: "获取数据失败,请重试",
|
|
|
|
icon: "none",
|
|
|
|
});
|
|
|
|
}
|
|
|
|
}
|
|
|
|
//#endregion 获取图片,金币,
|
|
|
|
|
|
|
|
//#region 获取消费记录
|
|
|
|
const pageSize2 = ref(20);
|
|
|
|
const pageNum2 = ref(1);
|
|
|
|
const ConsumeList = ref(20);
|
|
|
|
async function getConsumeList(pageSize, pageNum) {
|
|
|
|
try {
|
|
|
|
const res = await getConsumeListApi(pageSize, pageNum);
|
|
|
|
ConsumeList.value = res.data.list;
|
|
|
|
} catch (error) {}
|
|
|
|
}
|
|
|
|
async function getMoreConsumeList() {
|
|
|
|
try {
|
|
|
|
pageNum2.value += 1;
|
|
|
|
const res = await getConsumeList(pageSize2.value, pageNum2.value);
|
|
|
|
if (res.data.list.length == 0) {
|
|
|
|
pageNum2.value -= 1;
|
|
|
|
}
|
|
|
|
ConsumeList.value.push(...res.data.list);
|
|
|
|
} catch (error) {
|
|
|
|
uni.showToast({
|
|
|
|
title: "获取数据失败,请重试",
|
|
|
|
icon: "none",
|
|
|
|
});
|
|
|
|
}
|
|
|
|
}
|
|
|
|
// 判断消费名称
|
|
|
|
function getConsumeName(type) {
|
|
|
|
if (type == 1) {
|
|
|
|
return "注册";
|
|
|
|
} else if (type == 2) {
|
|
|
|
return "邀请";
|
|
|
|
} else if (type == 3) {
|
|
|
|
return "充值";
|
|
|
|
} else if (type == 10) {
|
|
|
|
return "生成照片";
|
|
|
|
} else if (type == 11) {
|
|
|
|
return "照片超分";
|
|
|
|
}
|
|
|
|
}
|
|
|
|
// 判断正负
|
|
|
|
function getSymbol(type) {
|
|
|
|
if ([1, 2, 3].includes(type)) {
|
|
|
|
return "+";
|
|
|
|
} else {
|
|
|
|
return "-";
|
|
|
|
}
|
|
|
|
}
|
|
|
|
//#endregion 获取图片,金币,
|
|
|
|
|
|
|
|
const myAvatar = ref(
|
|
|
|
"https://suimang.oss-accelerate.aliyuncs.com/capi/2023-08-25/03b58cd2f52c49829435addbf1ec435a.jpg?x-oss-process=image/resize,w_10000/quality,q_60"
|
|
|
|
);
|
|
|
|
const myGlod = ref(0);
|
|
|
|
const PhotoList = ref(0);
|
|
|
|
|
|
|
|
async function findImage() {
|
|
|
|
try {
|
|
|
|
const res = await findImageApi();
|
|
|
@@ -248,30 +372,53 @@ async function findGlod() { |
|
|
|
|
|
|
|
//#endregion ---------------------------
|
|
|
|
|
|
|
|
//#region 删除弹出框
|
|
|
|
const showPopup = ref(false);
|
|
|
|
const temporarily = ref(null); //暂存的
|
|
|
|
// const delModalContent = "确定要删除这个写真吗?";
|
|
|
|
function clickDel(item) {
|
|
|
|
showPopup.value = true;
|
|
|
|
temporarily.value = item;
|
|
|
|
}
|
|
|
|
async function deletePhoto() {
|
|
|
|
try {
|
|
|
|
const data = {
|
|
|
|
id: temporarily.value.id,
|
|
|
|
};
|
|
|
|
const res = await deleteApi(data);
|
|
|
|
pageNum1.value = 1;
|
|
|
|
await getPhotoList(pageSize1.value, pageNum1.value);
|
|
|
|
showPopup.value = false;
|
|
|
|
console.log(res);
|
|
|
|
// if (res.data.code == 200) {
|
|
|
|
// } else {
|
|
|
|
// uni.showToast({
|
|
|
|
// title: "删除失败,请重试",
|
|
|
|
// icon: "none",
|
|
|
|
// });
|
|
|
|
// }
|
|
|
|
} catch (error) {
|
|
|
|
console.log(error, "删除失败");
|
|
|
|
}
|
|
|
|
}
|
|
|
|
//#endregion ---------------------------
|
|
|
|
|
|
|
|
//#region 初始化和卸载
|
|
|
|
function init() {
|
|
|
|
if (userInfoModulesPinia.token == 1) {
|
|
|
|
getPhotoList(pageSize.value, pageNum.value);
|
|
|
|
getPhotoList(pageSize1.value, pageNum1.value);
|
|
|
|
} else {
|
|
|
|
setTimeout(init, 500); // 继续等待 0.5 秒后再次执行函数
|
|
|
|
}
|
|
|
|
}
|
|
|
|
onLoad(async () => {
|
|
|
|
// if (!userInfoModulesPinia.token) {
|
|
|
|
// setTimeout(() => {
|
|
|
|
// onLoad();
|
|
|
|
// }, 500);
|
|
|
|
// return;
|
|
|
|
// } else {
|
|
|
|
// console.log(userInfoModulesPinia.token);
|
|
|
|
|
|
|
|
// }
|
|
|
|
setTimeout(() => {
|
|
|
|
getPhotoList(pageSize.value, pageNum.value);
|
|
|
|
getPhotoList(pageSize1.value, pageNum1.value);
|
|
|
|
getConsumeList(pageSize2.value, pageNum2.value);
|
|
|
|
// findImage();
|
|
|
|
// findGlod();
|
|
|
|
// getPhotoList();
|
|
|
|
}, 1000);
|
|
|
|
}, 2000);
|
|
|
|
});
|
|
|
|
|
|
|
|
//#endregion ---------------------------
|
|
|
@@ -363,18 +510,18 @@ onLoad(async () => { |
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
// 风格列表
|
|
|
|
// 写真列表
|
|
|
|
.showStyleList {
|
|
|
|
flex: 1;
|
|
|
|
overflow: hidden;
|
|
|
|
margin-top: 30rpx;
|
|
|
|
width: 690rpx;
|
|
|
|
.showListItem {
|
|
|
|
margin-top: 10rpx;
|
|
|
|
margin-top: 30rpx;
|
|
|
|
.top {
|
|
|
|
display: flex;
|
|
|
|
justify-content: space-between;
|
|
|
|
padding: 0 30rpx;
|
|
|
|
padding: 0 10rpx;
|
|
|
|
margin-bottom: 20rpx;
|
|
|
|
.name {
|
|
|
|
font-weight: 900;
|
|
|
@@ -388,8 +535,9 @@ onLoad(async () => { |
|
|
|
margin-right: 50rpx;
|
|
|
|
}
|
|
|
|
.moreBox {
|
|
|
|
padding: 0 0 0 40rpx;
|
|
|
|
display: inline-block;
|
|
|
|
width: 8rpx;
|
|
|
|
width: 48rpx;
|
|
|
|
height: 33rpx;
|
|
|
|
image {
|
|
|
|
vertical-align: top;
|
|
|
@@ -418,6 +566,38 @@ onLoad(async () => { |
|
|
|
border-radius: 30rpx;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.creating {
|
|
|
|
position: relative;
|
|
|
|
width: 200rpx;
|
|
|
|
height: 200rpx;
|
|
|
|
border-radius: 30rpx;
|
|
|
|
margin-right: 30rpx;
|
|
|
|
display: inline-flex; // item的外层定义成行内元素才可进行滚动 inline-block / inline-flex 均可
|
|
|
|
flex-direction: column;
|
|
|
|
align-items: center;
|
|
|
|
.cover {
|
|
|
|
width: 200rpx;
|
|
|
|
height: 200rpx;
|
|
|
|
border-radius: 30rpx;
|
|
|
|
}
|
|
|
|
text {
|
|
|
|
position: absolute;
|
|
|
|
top: 50%;
|
|
|
|
left: 150%;
|
|
|
|
transform: translate(-50%, -50%);
|
|
|
|
width: 100%;
|
|
|
|
font-weight: 900;
|
|
|
|
text-align: center;
|
|
|
|
color: #ff4f00;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.noData {
|
|
|
|
text-align: center;
|
|
|
|
.goCreate {
|
|
|
|
color: #ff4f00;
|
|
|
|
text-decoration: dashed;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
@@ -592,7 +772,7 @@ onLoad(async () => { |
|
|
|
.OrderListItem {
|
|
|
|
display: flex;
|
|
|
|
justify-content: space-between;
|
|
|
|
padding: 0 20rpx;
|
|
|
|
padding: 0 50rpx;
|
|
|
|
height: 65rpx;
|
|
|
|
line-height: 65rpx;
|
|
|
|
.name,
|
|
|
@@ -605,4 +785,56 @@ onLoad(async () => { |
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
// 弹出层遮罩层
|
|
|
|
.mask {
|
|
|
|
position: absolute;
|
|
|
|
width: 100%;
|
|
|
|
height: 100%;
|
|
|
|
background-color: rgba(0, 0, 0, 0.3);
|
|
|
|
z-index: 999;
|
|
|
|
}
|
|
|
|
// 弹出层
|
|
|
|
.myPopup {
|
|
|
|
display: flex;
|
|
|
|
flex-direction: column;
|
|
|
|
align-items: center;
|
|
|
|
position: absolute;
|
|
|
|
top: 50%;
|
|
|
|
left: 50%;
|
|
|
|
transform: translate(-50%, -50%);
|
|
|
|
width: 600rpx;
|
|
|
|
height: 500rpx;
|
|
|
|
padding: 30rpx;
|
|
|
|
background: #000000;
|
|
|
|
border-radius: 24rpx;
|
|
|
|
font-size: 30rpx;
|
|
|
|
font-weight: bold;
|
|
|
|
text-align: center;
|
|
|
|
image {
|
|
|
|
position: absolute;
|
|
|
|
top: -20rpx;
|
|
|
|
right: -20rpx;
|
|
|
|
width: 70rpx;
|
|
|
|
height: 70rpx;
|
|
|
|
}
|
|
|
|
.text {
|
|
|
|
height: 250rpx;
|
|
|
|
line-height: 250rpx;
|
|
|
|
}
|
|
|
|
.del {
|
|
|
|
width: 70%;
|
|
|
|
height: 80rpx;
|
|
|
|
line-height: 80rpx;
|
|
|
|
border-radius: 80rpx;
|
|
|
|
background-color: #ff4f00;
|
|
|
|
margin-bottom: 30rpx;
|
|
|
|
}
|
|
|
|
.cancel {
|
|
|
|
width: 70%;
|
|
|
|
height: 80rpx;
|
|
|
|
line-height: 80rpx;
|
|
|
|
border-radius: 80rpx;
|
|
|
|
border: #ff4f00 2rpx solid;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</style>
|