完成发现，个人中心
This commit is contained in:
cbb
241
pages/my-index/wallet/record.vue
Normal file
241
pages/my-index/wallet/record.vue
Normal file
@@ -0,0 +1,241 @@
|
||||
<script setup>
|
||||
import { ref, reactive, computed } from 'vue'
|
||||
import {
|
||||
getUserWithdrawList,
|
||||
getUserTradeRecordList
|
||||
} from '@/api/my-index'
|
||||
|
||||
const props = defineProps({
|
||||
// 0 积分记录 1 提现记录
|
||||
type: {
|
||||
type: String,
|
||||
default: '0'
|
||||
}
|
||||
})
|
||||
|
||||
const topNav = computed(() => {
|
||||
const list =
|
||||
props.type === '0'
|
||||
? [
|
||||
{ name: '全部', id: '' },
|
||||
{ name: '拼单获得', id: '1', state: '+', color: '#2ecc71' },
|
||||
{ name: '消费', id: '2', state: '-', color: '#e74c3c' },
|
||||
{ name: '退款', id: '3', state: '-', color: '#f39c12' },
|
||||
{ name: '系统赠送', id: '4', state: '+', color: '#2ecc71' },
|
||||
{ name: '系统扣除', id: '5', state: '-', color: '#e74c3c' },
|
||||
{ name: '签到', id: '6', state: '+', color: '#2ecc71' },
|
||||
{ name: '提现', id: '7', state: '-', color: '#e74c3c' },
|
||||
{ name: '提现冻结', id: '8', state: '-', color: '#f39c12' },
|
||||
{
|
||||
name: '提现拒绝释放',
|
||||
id: '9',
|
||||
state: '-',
|
||||
color: '#e74c3c'
|
||||
},
|
||||
{
|
||||
name: '提现成功扣除',
|
||||
id: '10',
|
||||
state: '-',
|
||||
color: '#e74c3c'
|
||||
}
|
||||
]
|
||||
: [
|
||||
{ name: '全部', id: '' },
|
||||
{ name: '待处理', id: '0', state: '', color: '#95a5a6' },
|
||||
{ name: '处理中', id: '1', state: '', color: '#3498db' },
|
||||
{ name: '提现成功', id: '2', state: '-', color: '#2ecc71' },
|
||||
{ name: '提现失败', id: '3', state: '', color: '#e74c3c' },
|
||||
{ name: '已取消', id: '4', state: '', color: '#95a5a6' }
|
||||
]
|
||||
return list
|
||||
})
|
||||
|
||||
const paging = ref(null)
|
||||
const dataList = ref([])
|
||||
const formData = reactive({
|
||||
type: '',
|
||||
pageSize: 15
|
||||
})
|
||||
|
||||
const getData = async (pageNum, pageSize) => {
|
||||
try {
|
||||
const isShow = props.type === '0'
|
||||
const api = isShow ? getUserTradeRecordList : getUserWithdrawList
|
||||
const res = await api({
|
||||
pageNum,
|
||||
pageSize,
|
||||
[isShow ? 'changeType' : 'status']: formData.type
|
||||
})
|
||||
paging.value.complete(res.rows)
|
||||
} catch (error) {
|
||||
paging.value.complete(false)
|
||||
}
|
||||
}
|
||||
|
||||
const onTop = id => {
|
||||
formData.type = id
|
||||
getData(1, formData.pageSize)
|
||||
}
|
||||
|
||||
// onLoad(() => {
|
||||
// getData()
|
||||
// })
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<z-paging
|
||||
ref="paging"
|
||||
v-model="dataList"
|
||||
:default-page-size="formData.pageSize"
|
||||
safe-area-inset-bottom
|
||||
use-safe-area-placeholder
|
||||
@query="getData"
|
||||
>
|
||||
<template #top>
|
||||
<view class="top-options">
|
||||
<view
|
||||
v-for="(item, index) in topNav"
|
||||
:key="index"
|
||||
:class="{ active: item.id === formData.type }"
|
||||
class="text"
|
||||
@click="onTop(item.id)"
|
||||
>
|
||||
{{ item.name }}
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<view class="card-box">
|
||||
<view
|
||||
v-for="item in dataList"
|
||||
:key="item.withdrawalId"
|
||||
class="item-row"
|
||||
>
|
||||
<image
|
||||
v-if="props.type === '0'"
|
||||
src="/static/images/my-index/shangjia.png"
|
||||
mode="heightFix"
|
||||
class="left-icon"
|
||||
></image>
|
||||
<image
|
||||
v-else
|
||||
src="/static/images/my-index/shangjia1.png"
|
||||
mode="heightFix"
|
||||
class="left-icon"
|
||||
></image>
|
||||
<view class="right-box">
|
||||
<view class="name-box">
|
||||
<text>
|
||||
{{
|
||||
props.type === '0' ? item.description : item.withdrawalNo
|
||||
}}
|
||||
</text>
|
||||
<text>
|
||||
{{ props.type === '0' ? item.createTime : item.updateTime }}
|
||||
</text>
|
||||
</view>
|
||||
<view class="state-box">
|
||||
<text
|
||||
:style="{
|
||||
color:
|
||||
topNav[
|
||||
props.type === '0' ? item.changeType : item.status + 1
|
||||
].color
|
||||
}"
|
||||
>
|
||||
{{
|
||||
topNav[
|
||||
props.type === '0' ? item.changeType : item.status + 1
|
||||
].name
|
||||
}}
|
||||
</text>
|
||||
<text>
|
||||
{{
|
||||
topNav[
|
||||
props.type === '0' ? item.changeType : item.status + 1
|
||||
].state
|
||||
}}{{
|
||||
props.type === '0' ? item.changeAmount : item.actualAmount
|
||||
}}
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</z-paging>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '@/styles/top-selector.scss';
|
||||
// 全屏背景色
|
||||
page {
|
||||
background: #f9f9f9;
|
||||
}
|
||||
|
||||
.top-options {
|
||||
margin: 0;
|
||||
background: #ffffff;
|
||||
padding: 32rpx 24rpx;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.card-box {
|
||||
padding: 32rpx 24rpx;
|
||||
|
||||
.item-row + .item-row {
|
||||
margin-top: 16rpx;
|
||||
}
|
||||
|
||||
.item-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: #ffffff;
|
||||
border-radius: 16rpx;
|
||||
padding: 16rpx 32rpx;
|
||||
.left-icon {
|
||||
height: 96rpx;
|
||||
margin-right: 16rpx;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.right-box {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-family: PingFang SC, PingFang SC;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
.name-box,
|
||||
.state-box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.name-box {
|
||||
text {
|
||||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
color: #000000;
|
||||
&:last-child {
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
}
|
||||
.state-box {
|
||||
margin-left: 16rpx;
|
||||
flex-shrink: 0;
|
||||
text-align: right;
|
||||
text {
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
&:last-child {
|
||||
font-weight: 500;
|
||||
font-size: 32rpx;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user