|
@@ -0,0 +1,223 @@ |
|
|
|
|
|
<template>
|
|
|
|
|
|
<view class="page">
|
|
|
|
|
|
<!-- 头像 -->
|
|
|
|
|
|
<view class="avatarBox">
|
|
|
|
|
|
<up-avatar :src="avatarUrl" size="150"></up-avatar>
|
|
|
|
|
|
<view class="changeAvatar">
|
|
|
|
|
|
<image src="../../assets/icon/reset.png" mode="scaleToFill" />
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<!-- 金币 -->
|
|
|
|
|
|
<view class="coinBox">
|
|
|
|
|
|
我的金币: 30
|
|
|
|
|
|
<text @click="goBuyCoin">[点击购买]</text></view
|
|
|
|
|
|
>
|
|
|
|
|
|
<!-- tab栏 -->
|
|
|
|
|
|
<u-tabs
|
|
|
|
|
|
:list="tabList"
|
|
|
|
|
|
:activeStyle="{
|
|
|
|
|
|
color: '#4452d7',
|
|
|
|
|
|
fontWeight: 'bold',
|
|
|
|
|
|
transform: 'scale(1.05)',
|
|
|
|
|
|
}"
|
|
|
|
|
|
@click="clickTabHandle"
|
|
|
|
|
|
></u-tabs>
|
|
|
|
|
|
<!-- 显示风格列表内容 -->
|
|
|
|
|
|
<view v-show="showListActive == 2" class="showStyleList">
|
|
|
|
|
|
<view class="showListItem">
|
|
|
|
|
|
<view class="top">
|
|
|
|
|
|
<text>风格名称</text>
|
|
|
|
|
|
<text>生成时间</text>
|
|
|
|
|
|
</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>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<!-- 显示邀请列表内容 -->
|
|
|
|
|
|
<view v-show="showListActive == 3" class="showInviteList">
|
|
|
|
|
|
<view v-for="item in 3" 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>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<!-- 显示消费列表内容 -->
|
|
|
|
|
|
<view v-show="showListActive == 1" class="showOrderList">
|
|
|
|
|
|
<view class="top">
|
|
|
|
|
|
<text>名称</text>
|
|
|
|
|
|
<text>时间</text>
|
|
|
|
|
|
<text>花费</text>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<view
|
|
|
|
|
|
v-for="item in 16"
|
|
|
|
|
|
class="OrderListItem"
|
|
|
|
|
|
:class="item % 2 != 1 ? 'otherBgc' : ''"
|
|
|
|
|
|
>
|
|
|
|
|
|
<view class="name">大西瓜</view>
|
|
|
|
|
|
<view class="time">2023/7/29</view>
|
|
|
|
|
|
<view class="coin">-2金币</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
|
|
<script setup>
|
|
|
|
|
|
//#region 导入
|
|
|
|
|
|
|
|
|
|
|
|
import { ref, reactive } from "vue";
|
|
|
|
|
|
import { voiceTotalApi } from "../../api/login.js";
|
|
|
|
|
|
//#endregion
|
|
|
|
|
|
|
|
|
|
|
|
//#region 头像
|
|
|
|
|
|
const avatarUrl = ref(null);
|
|
|
|
|
|
function goBuyCoin() {
|
|
|
|
|
|
uni.navigateTo({
|
|
|
|
|
|
url: "buyCoin",
|
|
|
|
|
|
});
|
|
|
|
|
|
}
|
|
|
|
|
|
//#endregion
|
|
|
|
|
|
|
|
|
|
|
|
//#region tab
|
|
|
|
|
|
const tabList = ref([
|
|
|
|
|
|
{ name: "我的写真", value: 1 },
|
|
|
|
|
|
{ name: "我的邀请", value: 2 },
|
|
|
|
|
|
{ name: "消费记录", value: 3 },
|
|
|
|
|
|
]);
|
|
|
|
|
|
const showListActive = ref(1);
|
|
|
|
|
|
function clickTabHandle(e) {
|
|
|
|
|
|
showListActive.value = e.value;
|
|
|
|
|
|
}
|
|
|
|
|
|
//#endregion
|
|
|
|
|
|
|
|
|
|
|
|
//#region
|
|
|
|
|
|
|
|
|
|
|
|
//#endregion
|
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
<style lang="scss">
|
|
|
|
|
|
.avatarBox {
|
|
|
|
|
|
position: relative;
|
|
|
|
|
|
.changeAvatar {
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
right: -0%;
|
|
|
|
|
|
top: 70%;
|
|
|
|
|
|
width: 40rpx;
|
|
|
|
|
|
height: 40rpx;
|
|
|
|
|
|
image {
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
height: 100%;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
.coinBox {
|
|
|
|
|
|
margin-top: 30rpx;
|
|
|
|
|
|
text {
|
|
|
|
|
|
font-weight: 700;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
.u-tabs {
|
|
|
|
|
|
margin-top: 20rpx;
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
}
|
|
|
|
|
|
// 风格列表
|
|
|
|
|
|
.showStyleList {
|
|
|
|
|
|
margin-top: 20rpx;
|
|
|
|
|
|
width: 750rpx;
|
|
|
|
|
|
.showListItem {
|
|
|
|
|
|
.top {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
|
padding: 0 30rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
.imgListBox {
|
|
|
|
|
|
white-space: nowrap;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
|
flex-wrap: nowrap;
|
|
|
|
|
|
height: 250rpx;
|
|
|
|
|
|
.item {
|
|
|
|
|
|
width: 240rpx;
|
|
|
|
|
|
height: 240rpx;
|
|
|
|
|
|
margin-right: 20rpx;
|
|
|
|
|
|
display: inline-flex; // item的外层定义成行内元素才可进行滚动 inline-block / inline-flex 均可
|
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
.cover {
|
|
|
|
|
|
width: 240rpx;
|
|
|
|
|
|
height: 240rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
// 邀请列表
|
|
|
|
|
|
.showInviteList {
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
.InviteList {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
justify-content: flex-start;
|
|
|
|
|
|
margin-top: 15rpx;
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
height: 150rpx;
|
|
|
|
|
|
border: 5rpx solid #000;
|
|
|
|
|
|
border-radius: 30rpx;
|
|
|
|
|
|
.u-avatar {
|
|
|
|
|
|
margin: 0 30rpx;
|
|
|
|
|
|
height: 150rpx !important;
|
|
|
|
|
|
}
|
|
|
|
|
|
.info {
|
|
|
|
|
|
flex: 1;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
|
justify-content: space-evenly;
|
|
|
|
|
|
}
|
|
|
|
|
|
.getCoin {
|
|
|
|
|
|
width: 145rpx;
|
|
|
|
|
|
height: 145rpx;
|
|
|
|
|
|
line-height: 145rpx;
|
|
|
|
|
|
text-align: center;
|
|
|
|
|
|
border-left: 5rpx solid #000;
|
|
|
|
|
|
border-radius: 30rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
// 消费列表
|
|
|
|
|
|
.showOrderList {
|
|
|
|
|
|
margin-top: 30rpx;
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
.top {
|
|
|
|
|
|
padding: 0 30rpx;
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
height: 80rpx;
|
|
|
|
|
|
line-height: 80rpx;
|
|
|
|
|
|
border-radius: 30rpx;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
|
background-color: #e9e9e9;
|
|
|
|
|
|
}
|
|
|
|
|
|
.OrderListItem {
|
|
|
|
|
|
margin-top: 15rpx;
|
|
|
|
|
|
padding: 0 15rpx;
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
height: 80rpx;
|
|
|
|
|
|
line-height: 80rpx;
|
|
|
|
|
|
border-bottom: 5rpx solid #fff;
|
|
|
|
|
|
border-radius: 15rpx;
|
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
|
}
|
|
|
|
|
|
.otherBgc {
|
|
|
|
|
|
background-color: #f6f7f9;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
</style>
|