|
- <template>
- <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"
- :src="userInfoModulesPinia.myAvatar"
- mode="aspectFill"
- />
- <view @click="chooseAvatar" class="changeAvatar">
- <image src="../../assets/img/reset.png" mode="aspectFit" />
- </view>
- </view>
-
- <!-- 金币 -->
- <view class="coinBox">
- 我的金币: {{ userInfoModulesPinia.myGlod }}
- <image src="../../assets/icon/icon.png" mode="scaleToFill" />
- <text @click="goOtherPage('buyCoin')">购买金币</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
- @scrolltolower="getMorePhotoList"
- :scroll-y="true"
- v-show="showListActive == 1"
- class="showStyleList"
- >
- <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
- >生成时间
- {{ dayjs(item.createDate).format("YYYY-MM-DD HH:mm:ss") }}</text
- >
- <!-- 更多 -->
- <view class="moreBox" @click="clickDel(item)">
- <image src="../../assets/icon/more.png" mode="widthFix" />
- </view>
- </view>
- </view>
- <!-- 成功时 -->
- <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/img/logo-4.png"
- class="cover"
- 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
- :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" :key="item" 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 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,
- getConsumeListApi,
- deleteApi,
- } from "../../api/home.js";
- import { userInfoModules } from "@/store/modules/userInfo";
- import imageCompression from "browser-image-compression"; //压缩图片插件
- //#endregion
-
- //#region 定义,杂项
- const userInfoModulesPinia = userInfoModules();
- const pageClass = computed(() => {
- if (userInfoModulesPinia.platForm == 1) {
- return "page pageH5";
- } else {
- return "page";
- }
- });
- // console.log(userInfoModulesPinia.token, "token123123");
- //#endregion
-
- //#region 头像
- const avatarUrl = ref(null);
- function chooseAvatar() {
- uni.switchTab({
- url: "/pages/uploadPhoto/uploadPhoto",
- });
- return;
- 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 goOtherPage(url) {
- uni.navigateTo({
- url: url,
- });
- }
- //#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 获取写真列表
- 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) {}
- }
- 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);
-
- async function findImage() {
- try {
- const res = await findImageApi();
- myAvatar.value = res.data.image;
- } catch (error) {}
- }
-
- async function findGlod() {
- try {
- const res = await findGlodApi();
- if (!res.data) {
- myGlod.value = 0;
- } else {
- myGlod.value = res.data.coin;
- }
- } catch (error) {}
- }
-
- //#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(pageSize1.value, pageNum1.value);
- } else {
- setTimeout(init, 500); // 继续等待 0.5 秒后再次执行函数
- }
- }
- onLoad(async () => {
- setTimeout(() => {
- getPhotoList(pageSize1.value, pageNum1.value);
- getConsumeList(pageSize2.value, pageNum2.value);
- // findImage();
- // findGlod();
- // getPhotoList();
- }, 2000);
- });
-
- //#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);
- }
- }
- .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;
- image {
- width: 33rpx;
- height: 33rpx;
- vertical-align: middle;
- }
- 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: 30rpx;
- .top {
- display: flex;
- justify-content: space-between;
- padding: 0 10rpx;
- 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 {
- padding: 0 0 0 40rpx;
- display: inline-block;
- width: 48rpx;
- 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;
- }
- }
- .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;
- }
- }
- }
- // 视频列表
- .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;
- // background-color: #393b3d;
- 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 50rpx;
- height: 65rpx;
- line-height: 65rpx;
- .name,
- .coin {
- font-weight: 900;
- }
- .time {
- font-weight: 100;
- }
- }
- }
- }
- // 弹出层遮罩层
- .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>
|