congzc 1 year ago
parent
commit
e80e764339
7 changed files with 390 additions and 66 deletions
  1. +25
    -0
      src/api/home.js
  2. +14
    -0
      src/api/lookPhoto.js
  3. BIN
      src/assets/icon/close.png
  4. BIN
      src/assets/img/logo-4.png
  5. +272
    -40
      src/pages/index/index.vue
  6. +76
    -26
      src/pages/lookPhoto/index.vue
  7. +3
    -0
      src/pages/uploadPhoto/uploadPhoto.vue

+ 25
- 0
src/api/home.js View File

@@ -36,3 +36,28 @@ export function getPhotoListApi(pageSize, pageNum) {

})
}

/**
* @description:获取消费记录
* @param (pageSize, pageNum)
* @return: data
*/
export function getConsumeListApi(pageSize, pageNum) {
return request({
url: `/api/userPropertyLog/list?projectType=5&pageSize=${pageSize}&pageNum=${pageNum}`,
method: 'get',
})
}

/**
* @description:删除写真
* @param id
* @return: data
*/
export function deleteApi(data) {
return request({
url: `/api/digitalAvatarPhoto/delete`,
method: 'post',
data,
})
}

+ 14
- 0
src/api/lookPhoto.js View File

@@ -0,0 +1,14 @@
import request from "../utils/request"


/**
* @description:得到写真信息
* @param id
* @return: data
*/
export function getPhotoListApi(id) {
return request({
url: `/api/digitalAvatarPhoto/findById?id=${id}`,
method: 'get',
})
}

BIN
src/assets/icon/close.png View File

Before After
Width: 69  |  Height: 69  |  Size: 1.5 KiB

BIN
src/assets/img/logo-4.png View File

Before After
Width: 800  |  Height: 800  |  Size: 19 KiB

+ 272
- 40
src/pages/index/index.vue View File

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

+ 76
- 26
src/pages/lookPhoto/index.vue View File

@@ -7,7 +7,8 @@
:radius="30"
:autoplay="false"
:list="swiperList"
@change=""
keyName="image"
@change="getSwiperIndex"
@click="click"
></u-swiper>
<view class="uploadBtn grayBtn">
@@ -67,36 +68,85 @@
<script setup>
// import myloading from '../../components/myLoading.vue'
//#region 导入
import { onLoad } from "@dcloudio/uni-app";
import { ref, reactive } from "vue";
import { userInfoModules } from "@/store/modules/userInfo";
import { getPhotoListApi } from "../../api/lookPhoto.js";
//#endregion
const userInfoModulesPinia = userInfoModules();
//#region 轮播图
const swiperList = ref([
"https://uiadmin.net/uview-plus/common/logo.png",
"https://uiadmin.net/uview-plus/common/logo.png",
"https://uiadmin.net/uview-plus/common/logo.png",
"https://uiadmin.net/uview-plus/common/logo.png",
]);
const workId = ref(null);
onLoad((options) => {
workId.value = options.id;
getSwiperList();
});
const swiperList = ref([]);
async function getSwiperList() {
const res = await getPhotoListApi(workId.value);
console.log(res.data.photoList);
swiperList.value = res.data.photoList;
}
//#endregion ---------------------
//#region 下载
const swiperIndex = ref(null);
function getSwiperIndex(index) {
swiperIndex.value = index.current;
}
function downloadImg() {
if (userInfoModulesPinia.platForm != 1) {
uni.saveImageToPhotosAlbum({
filePath: "https://uiadmin.net/uview-plus/common/logo.png",
success: function () {
console.log("save success");
},
});
} else {
const link = document.createElement("a");
link.href = "https://uiadmin.net/uview-plus/common/logo.png";
link.download = "image.jpg";
// document.body.appendChild(link);
link.click();
// document.body.removeChild(link);
}
uni.downloadFile({
url: swiperList.value[swiperIndex.value].image, //仅为示例,并非真实的资源
success: (res) => {
// console.log(res);
if (res.statusCode == 200) {
uni.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
success: () => {
//提示保存成功
uni.showToast({
mask: true,
title: "保存成功",
duration: 3000,
});
},
fail: (res) => {
//失败关闭提示信息!!!
uni.showToast({
icon: "none",
title: "下载失败",
duration: 3000,
});
console.log("下载失败", res);
},
complete: function () {
//隐藏提示
uni.hideLoading();
},
});
}
},
fail: (err) => {
console.log(err, "err");
uni.showToast({
icon: "none",
mask: true,
title: "下载失败,请重新下载",
});
},
});
// if (userInfoModulesPinia.platForm != 1) {
// uni.saveImageToPhotosAlbum({
// filePath: "https://uiadmin.net/uview-plus/common/logo.png",
// success: function () {
// console.log("save success");
// },
// });
// } else {
// const link = document.createElement("a");
// link.href = "https://uiadmin.net/uview-plus/common/logo.png";
// link.download = "image.jpg";
// link.click();
// }
}
//#endregion ---------------------
@@ -171,20 +221,20 @@ function bueCoin() {
border-radius: 50rpx;
swiper {
width: 100%;
height: 700rpx !important;
height: 720rpx !important;
image {
width: 100%;
height: 700rpx !important;
height: 720rpx !important;
}
}
// h5
:deep(.u-swiper__wrapper) {
width: 100%;
height: 700rpx !important;
height: 720rpx !important;
image {
width: 100%;
height: 700rpx !important;
height: 720rpx !important;
}
}
}


+ 3
- 0
src/pages/uploadPhoto/uploadPhoto.vue View File

@@ -171,6 +171,7 @@ async function toCloseStyle() {
token: userInfoModulesPinia.token,
},
success: async (res2) => {
let moment = res2;
if (JSON.parse(res2.data).code != 200) {
uploadState.value = 5;
uni.showToast({
@@ -186,6 +187,8 @@ async function toCloseStyle() {
});
if (res3.code == 200) {
// 改变全局的头像
userInfoModulesPinia.myAvatar = JSON.parse(moment.data).data.url;
uni.redirectTo({
url: "/pages/uploadPhoto/success",
});


Loading…
Cancel
Save