XinLingKeJi/jdt-user
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

i

Browse Source
This commit is contained in:
YuanHuakk
2023-09-06 03:49:21 +08:00
parent 8b5de95140
commit b6ca53f70e
39 changed files with 2146 additions and 679 deletions
Download Patch File Download Diff File Expand all files Collapse all files

183
src/pages/users/account/index.vue
View File

@@ -1,31 +1,154 @@
<script lang="ts" setup>
import { ref } from "vue";
import { showToast, useLoad, getStorageSync } from "@tarojs/taro";
import { getIntegralDetail, getBeanDetail } from "@/api/user";
const tabValue = ref(0);
const tabsList = ref([
{
title: "积分明细",
value: 0,
},
{
title: "豆子明细",
value: 1,
},
]);
const tabChange = (index: number) => {
tabValue.value = index;
getList();
};
const data = ref([]);
const userInfo = ref<any>({});
useLoad(() => {
getList();
userInfo.value = getStorageSync("userInfo");
});
const page = ref({
PageNum: 1,
PageSize: 10,
ItemCount: 0,
});
const pageChange = (e: number) => {
page.value.PageNum = e;
getList();
};
const getList = async () => {
try {
let res: any;
if (tabValue.value === 0) {
res = await getBeanDetail({
PageNum: page.value.PageNum,
PageSize: page.value.PageSize,
});
} else {
res = await getIntegralDetail({
PageNum: page.value.PageNum,
PageSize: page.value.PageSize,
});
}
data.value = res.data.data || [];
page.value.ItemCount = res.data.count;
} catch (error) {
showToast({
title: error.msg,
icon: "none",
});
}
};
</script>
<template>
<view>
<view class="card">
<view class="greeting">Hello! YuanHuakk</view>
<!-- <view class="greeting">Hello! YuanHuakk</view> -->
<view class="info">
<view class="left">
<view>
<view class="num">豆子：188888</view>
<view class="num">豆子: {{ userInfo.pulse }}</view>
</view>
<view>
<view class="num">积分：188888</view>
<view class="num">积分: {{ userInfo.integral }}</view>
</view>
</view>
<image class="img" src="https://picdm.sunbangyan.cn/2023/08/15/ste192.png"/>
<!-- <image class="img" src="https://picdm.sunbangyan.cn/2023/08/15/ste192.png"/> -->
</view>
</view>
<view class="tabs-box">
<view
v-for="item in tabsList"
:key="item.value"
@click="tabChange(item.value)"
>
<view class="text">{{ item.title }}</view>
<view
class="line"
:class="{ lineColor: item.value === tabValue }"
></view>
</view>
</view>
<view v-if="data.length > 0">
<view v-if="tabValue === 0">
<view
class="card-list"
v-for="(item, index) in (data as any[])"
:key="index"
>
<view class="left">
<view>购买商品：{{ item.goods_name }}</view>
<view>支付时间：{{ item.add_time.slice(0, 10) }}</view>
</view>
<view class="right">
<view style="color: green"
>-<text>{{ item.number }}积分</text></view
>
</view>
</view>
</view>
<view v-else>
<view
class="card-list"
v-for="(item, index) in (data as any[])"
:key="index"
>
<view class="left">
<view>购买商品：{{ item.goods_name }}</view>
<view>支付金额：{{ item.order_number }}元</view>
<view>支付时间：{{ item.add_time.slice(0, 10) }}</view>
</view>
<view class="right">
<view style="color: red"
>+<text>{{ item.number }}</text
>豆子</view
>
</view>
</view>
</view>
<nut-pagination
v-model="page.PageNum"
:total-items="page.ItemCount"
:items-per-page="page.PageSize"
@change="pageChange"
/>
</view>
<nut-empty v-else description="暂无明细"></nut-empty>
</view>
</template>
<style lang="scss">
page {
//background-color: #111;
.nut-pagination {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
.card {
width: 90%;
height: 300px;
@@ -35,7 +158,7 @@ page {
background-size: 100% 100%;
background-repeat: no-repeat;
margin: 10px auto;
color: #D0A568;
color: #d0a568;
padding: 20px;
.greeting {
@@ -50,7 +173,8 @@ page {
.left {
height: 300px;
width: 50%;
text-align: center;
text-align: left;
margin-left: 50px;
display: flex;
flex-direction: column;
justify-content: center;
@@ -67,7 +191,42 @@ page {
height: 270px;
}
}
}
</style>
.tabs-box {
display: flex;
flex-direction: row;
justify-content: space-evenly;
align-items: center;
height: auto;
background-color: #fff;
padding: 0 20px;
text-align: center;
.text {
margin: 10px 20px;
align-items: center;
}
.line {
margin: 0 auto;
width: 50px;
height: 5px;
border-radius: 30px;
transition: all 0.3s ease-in-out;
}
.lineColor {
background-color: #ff0000;
}
}
.card-list {
margin: 10px 20px;
background-color: #fff;
display: flex;
border-radius: 10px;
padding: 20px;
justify-content: space-between;
align-items: center;
}
</style>