congzc 1 year ago
parent
commit
38e153f005
5 changed files with 301 additions and 6 deletions
  1. BIN
      src/assets/icon/reset.png
  2. +16
    -5
      src/pages.json
  3. +49
    -0
      src/pages/home/buyCoin.vue
  4. +223
    -0
      src/pages/home/index.vue
  5. +13
    -1
      src/style/my.scss

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

Before After
Width: 200  |  Height: 200  |  Size: 9.0 KiB

+ 16
- 5
src/pages.json View File

@@ -3,20 +3,31 @@
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "慧"
"navigationBarTitleText": "慧"
}
},
{
"path": "pages/uploadPhoto/uploadPhoto",
"style": {
"navigationBarTitleText": "慧"
"navigationBarTitleText": "慧"
}
}
,
},
{
"path": "pages/closeStyle/closeStyle",
"style": {
"navigationBarTitleText": "慧图"
"navigationBarTitleText": "慧拍"
}
},
{
"path": "pages/home/index",
"style": {
"navigationBarTitleText": "慧拍"
}
},
{
"path": "pages/home/buyCoin",
"style": {
"navigationBarTitleText": "购买金币"
}
}
],


+ 49
- 0
src/pages/home/buyCoin.vue View File

@@ -0,0 +1,49 @@
<template>
<view class="page">
<up-alert
title="金币可以用来生成写真和制作视频"
type="warning"
center="true"
></up-alert>
<view v-for="item in orderList" class="orderListItem">
<text>金币{{ item.num }}枚</text>
<text>¥{{ item.money }}</text>
</view>
</view>
</template>

<script setup>
//#region 导入
import { ref, reactive } from "vue";
//#endregion --------------

//#region 列表数据
const orderList = ref([
{ num: 5, money: 4.9 },
{ num: 20, money: 18.9 },
{ num: 30, money: 28.9 },
]);
//#endregion --------------

//#region

//#endregion --------------
</script>

<style lang="scss">
.u-transition {
width: 100% !important;
}
.orderListItem {
margin-top: 50rpx;
padding: 0 30rpx;
width: 100%;
display: flex;
justify-content: space-between;
height: 120rpx;
line-height: 120rpx;
font-size: 40rpx;
border: 2rpx solid #000;
border-radius: 30rpx;
}
</style>

+ 223
- 0
src/pages/home/index.vue View File

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

+ 13
- 1
src/style/my.scss View File

@@ -6,6 +6,10 @@
padding: 20rpx;
}
view {
box-sizing: border-box;
}
.imgContenBox {
position: relative;
@@ -15,4 +19,12 @@
left: 50%;
transform: translate(-50%, -50%);
}
}
}
// 主要文字颜色和图片颜色
// .imgggg {
// color: #4452d7;
// }
// .texttttt {
// color: #8d43c9;
// }

Loading…
Cancel
Save