304 lines
7.0 KiB
Vue
304 lines
7.0 KiB
Vue
<script lang="ts" setup>
|
||
import {computed, ref} from 'vue';
|
||
import Taro from '@tarojs/taro';
|
||
import * as dayjs from 'dayjs';
|
||
import {getIntegralDetail, getBeanDetail, getGiftRecord} from '@/api/user';
|
||
import {TriangleDown} from '@nutui/icons-vue-taro';
|
||
|
||
const tabValue = ref(1);
|
||
|
||
const tabsList = ref([
|
||
{
|
||
title: '兑换明细',
|
||
value: 1,
|
||
},
|
||
{
|
||
title: '赠送明细',
|
||
value: 3,
|
||
},
|
||
{
|
||
title: '豆子明细',
|
||
value: 2,
|
||
},
|
||
{
|
||
title: '活动赠送',
|
||
value: 4,
|
||
},
|
||
{
|
||
title: '聚合积分',
|
||
value: 5,
|
||
},
|
||
]);
|
||
|
||
const computerType = computed(() => {
|
||
return (val: number) => {
|
||
switch (val) {
|
||
case 5:
|
||
return '注册赠送';
|
||
case 6:
|
||
return '签到赠送';
|
||
case 7:
|
||
return '系统赠送';
|
||
}
|
||
};
|
||
});
|
||
|
||
const tabChange = (index: number) => {
|
||
tabValue.value = index;
|
||
data.value = [];
|
||
getList();
|
||
page.value.PageNum = 1;
|
||
};
|
||
|
||
interface DataType {
|
||
goods_name: string;
|
||
add_time: string;
|
||
number: number;
|
||
order_number: number;
|
||
type: number;
|
||
oid: string;
|
||
residue: number;
|
||
}
|
||
|
||
const data = ref<DataType[]>([]);
|
||
|
||
const userInfo = ref<any>({});
|
||
|
||
Taro.useLoad(() => {
|
||
pickerVal.value = [
|
||
dayjs().format('YYYY-MM-DD'),
|
||
dayjs().format('YYYY-MM-DD'),
|
||
];
|
||
getList();
|
||
userInfo.value = Taro.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;
|
||
const newData = {
|
||
PageNum: page.value.PageNum,
|
||
PageSize: page.value.PageSize,
|
||
Type: tabValue.value,
|
||
TimeStart: pickerVal.value[0],
|
||
TimeEnd: pickerVal.value[1],
|
||
};
|
||
if (tabValue.value === 1 || tabValue.value === 3 || tabValue.value === 5) {
|
||
res = await getBeanDetail(newData);
|
||
} else if (tabValue.value === 2) {
|
||
// delete data.value.Type;
|
||
Reflect.deleteProperty(data.value, 'Type');
|
||
res = await getIntegralDetail(newData);
|
||
} else if (tabValue.value === 4) {
|
||
res = await getGiftRecord(newData);
|
||
}
|
||
data.value = res.data.data || [];
|
||
page.value.ItemCount = res.data.count;
|
||
} catch (error) {
|
||
Taro.showToast({
|
||
title: error.msg,
|
||
icon: 'none',
|
||
});
|
||
}
|
||
};
|
||
|
||
const pickerRef = ref();
|
||
const showPicker = ref(false);
|
||
|
||
const pickerVal = ref<Array<string>>([]);
|
||
|
||
const openPicker = () => {
|
||
showPicker.value = true;
|
||
pickerRef.value.scrollToDate(dayjs().format('YYYY-MM-DD'));
|
||
};
|
||
const choose = e => {
|
||
pickerVal.value = [e[0][3], e[1][3]];
|
||
getList();
|
||
};
|
||
|
||
const closePicker = () => {
|
||
showPicker.value = false;
|
||
};
|
||
</script>
|
||
|
||
<template>
|
||
<view>
|
||
<view class="tabs-box">
|
||
<view
|
||
class="item"
|
||
v-for="(item, idx) in tabsList"
|
||
:key="idx"
|
||
@click="tabChange(item.value)"
|
||
:style="{
|
||
backgroundColor: item.value === tabValue ? '#ff0000' : '#F0F0F0',
|
||
color: item.value === tabValue ? '#fff' : '#333',
|
||
}">
|
||
<view>{{ item.title }}</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view
|
||
@click="openPicker"
|
||
class="pt-[20px] pb-[20px] pl-[25px] text-[30px] text-[#333] flex items-center">
|
||
<text>时间筛选</text>
|
||
<TriangleDown size="20px" color="#333" />
|
||
</view>
|
||
|
||
<nut-calendar
|
||
ref="pickerRef"
|
||
type="range"
|
||
title="时间筛选"
|
||
v-model:visible="showPicker"
|
||
:default-value="pickerVal"
|
||
start-date="2023-01-01"
|
||
end-date="2070-01-01"
|
||
@close="closePicker"
|
||
@choose="choose">
|
||
</nut-calendar>
|
||
|
||
<view v-if="data.length > 0">
|
||
<view v-if="tabValue === 1">
|
||
<view class="card-list" v-for="(item, index) in data" :key="index">
|
||
<view class="left">
|
||
<view>订单号: {{ item.oid }}</view>
|
||
<text class="jf">{{
|
||
dayjs(item.add_time).format('YYYY/MM/DD mm:ss')
|
||
}}</text>
|
||
</view>
|
||
<view class="right">
|
||
<view v-if="tabValue === 1" style="color: red"
|
||
>-
|
||
<text>{{ item.number }}</text>
|
||
</view>
|
||
<text class="jf">积分余额: {{ item.residue || 0 }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view v-if="tabValue === 3 || tabValue === 5">
|
||
<view class="card-list" v-for="(item, index) in data" :key="index">
|
||
<view class="left">
|
||
<view>订单：{{ item.oid }}</view>
|
||
<view>时间：{{ item.add_time.slice(0, 10) }}</view>
|
||
</view>
|
||
<view class="right">
|
||
<view v-if="tabValue === 5" style="color: red"
|
||
>-
|
||
<text>{{ item.number }}积分</text>
|
||
</view>
|
||
<view v-if="tabValue === 3" style="color: green"
|
||
>+
|
||
<text>{{ item.number }}</text>
|
||
积分
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view v-else-if="tabValue === 2">
|
||
<view class="card-list" v-for="(item, index) in data" :key="index">
|
||
<view class="left">
|
||
<view class="text">订单：{{ item.oid }}</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-if="tabValue === 4">
|
||
<view class="card-list" v-for="(item, index) in data" :key="index">
|
||
<view class="left">
|
||
<view class="text">类型：{{ computerType(item.type) }}</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>
|
||
<nut-pagination
|
||
class="mt-3"
|
||
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">
|
||
.nut-pagination {
|
||
position: absolute;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
}
|
||
|
||
.tabs-box {
|
||
display: flex;
|
||
align-items: center;
|
||
background-color: #fff;
|
||
text-align: center;
|
||
flex-wrap: wrap;
|
||
padding: 15px;
|
||
justify-content: space-evenly;
|
||
|
||
.item {
|
||
padding: 10px 20px;
|
||
font-size: 23px;
|
||
border-radius: 10px;
|
||
}
|
||
}
|
||
|
||
.card-list {
|
||
// margin: 10px 20px;
|
||
background-color: #fff;
|
||
display: flex;
|
||
border-radius: 10px;
|
||
padding: 20px;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
font-size: 25px;
|
||
|
||
.jf {
|
||
color: #484848;
|
||
}
|
||
|
||
.left {
|
||
.text {
|
||
text-align: left;
|
||
font-weight: bolder;
|
||
display: -webkit-box;
|
||
-webkit-box-orient: vertical;
|
||
-webkit-line-clamp: 1;
|
||
overflow: hidden;
|
||
word-break: break-word;
|
||
color: #484848;
|
||
}
|
||
}
|
||
|
||
.right {
|
||
flex: 1;
|
||
text-align: right;
|
||
}
|
||
}
|
||
</style>
|