726 lines
17 KiB
Vue
726 lines
17 KiB
Vue
<template>
|
||
<view class="asset-page voucher-page" @click="closeTips">
|
||
<asset-page-shell title="抵用券" />
|
||
|
||
<view class="asset-scroll voucher-scroll">
|
||
<view class="voucher-header">
|
||
<view class="voucher-header__bg">
|
||
<image
|
||
class="voucher-header__bg-image"
|
||
src="https://imgs.agrimedia.cn/shop/d-bg.png"
|
||
mode="aspectFill"
|
||
></image>
|
||
<view class="voucher-header__content">
|
||
<view class="voucher-header__current">
|
||
<text class="voucher-header__current-label">当前抵用券：</text>
|
||
<text class="voucher-header__current-value asset-number-font">{{
|
||
summary.balance
|
||
}}</text>
|
||
</view>
|
||
|
||
<view class="voucher-header__totals">
|
||
<view class="voucher-header__total-item">
|
||
<text class="voucher-header__total-value asset-number-font">{{
|
||
summary.totalIn
|
||
}}</text>
|
||
<view
|
||
class="voucher-header__total-text"
|
||
@click.stop="toggleTip('showTip1')"
|
||
>
|
||
<text>累计收入</text>
|
||
<image
|
||
class="voucher-header__help-icon"
|
||
src="https://imgs.agrimedia.cn/shop/%E6%84%9F%E5%8F%B9%E5%8F%B7.svg"
|
||
mode="widthFix"
|
||
></image>
|
||
</view>
|
||
|
||
<view
|
||
v-if="showTip1"
|
||
class="voucher-tooltip voucher-tooltip--left"
|
||
@click.stop
|
||
>
|
||
<view class="voucher-tooltip__row">
|
||
<text class="voucher-tooltip__text">
|
||
收入不包含消费、退款扣回等扣除抵用券的场景
|
||
</text>
|
||
<view
|
||
class="voucher-tooltip__close"
|
||
@click.stop="showTip1 = false"
|
||
>
|
||
<image
|
||
src="https://imgs.agrimedia.cn/shop/line-close.png"
|
||
mode="aspectFit"
|
||
></image>
|
||
</view>
|
||
</view>
|
||
<view class="voucher-tooltip__arrow voucher-tooltip__arrow--left"></view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="voucher-header__total-item">
|
||
<text class="voucher-header__total-value asset-number-font">{{
|
||
summary.totalOut
|
||
}}</text>
|
||
<view
|
||
class="voucher-header__total-text"
|
||
@click.stop="toggleTip('showTip2')"
|
||
>
|
||
<text>累计支出</text>
|
||
<image
|
||
class="voucher-header__help-icon"
|
||
src="https://imgs.agrimedia.cn/shop/%E6%84%9F%E5%8F%B9%E5%8F%B7.svg"
|
||
mode="widthFix"
|
||
></image>
|
||
</view>
|
||
|
||
<view
|
||
v-if="showTip2"
|
||
class="voucher-tooltip voucher-tooltip--right"
|
||
@click.stop
|
||
>
|
||
<view class="voucher-tooltip__row">
|
||
<text class="voucher-tooltip__text">
|
||
支出包含消费、退款扣回等扣除抵用券的场景
|
||
</text>
|
||
<view
|
||
class="voucher-tooltip__close"
|
||
@click.stop="showTip2 = false"
|
||
>
|
||
<image
|
||
src="https://imgs.agrimedia.cn/shop/line-close.png"
|
||
mode="aspectFit"
|
||
></image>
|
||
</view>
|
||
</view>
|
||
<view class="voucher-tooltip__arrow"></view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="voucher-wrapper">
|
||
<view class="voucher-nav">
|
||
<view class="voucher-tabs">
|
||
<view
|
||
v-for="item in tabOptions"
|
||
:key="item.key"
|
||
class="voucher-tabs__item"
|
||
:class="{ 'is-active': activeTab === item.key }"
|
||
@click.stop="changeTab(item.key)"
|
||
>
|
||
<text class="voucher-tabs__text">{{ item.label }}</text>
|
||
<image
|
||
v-if="activeTab === item.key"
|
||
class="voucher-tabs__line"
|
||
src="https://imgs.agrimedia.cn/shop/active.png"
|
||
mode="widthFix"
|
||
></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="voucher-list" :class="{ 'voucher-list--filled': sections.length }">
|
||
<view
|
||
v-for="section in sections"
|
||
:key="section.key"
|
||
class="voucher-card"
|
||
>
|
||
<view class="voucher-card__head">
|
||
<view class="voucher-card__month">
|
||
<text class="voucher-card__month-text asset-number-font">{{
|
||
section.label
|
||
}}</text>
|
||
</view>
|
||
<view class="voucher-card__totals">
|
||
<text class="voucher-card__total-text">
|
||
收入：
|
||
<text class="voucher-card__total-income asset-number-font">{{
|
||
section.income
|
||
}}</text>
|
||
</text>
|
||
<text class="voucher-card__total-text">
|
||
支出：
|
||
<text class="voucher-card__total-expense asset-number-font">
|
||
-{{ section.expense }}
|
||
</text>
|
||
</text>
|
||
</view>
|
||
</view>
|
||
|
||
<view
|
||
v-for="item in section.items"
|
||
:key="item.id"
|
||
class="voucher-row"
|
||
>
|
||
<view class="voucher-row__left">
|
||
<view class="voucher-row__icon">
|
||
<image
|
||
src="https://imgs.agrimedia.cn/shop/sifang-icon.png"
|
||
mode="aspectFit"
|
||
></image>
|
||
</view>
|
||
<view class="voucher-row__body">
|
||
<text class="voucher-row__title">{{ item.title }}</text>
|
||
<text class="voucher-row__time asset-number-font">{{
|
||
item.time
|
||
}}</text>
|
||
</view>
|
||
</view>
|
||
<text
|
||
class="voucher-row__amount asset-number-font"
|
||
:class="
|
||
item.amountTone === 'income'
|
||
? 'voucher-row__amount--income'
|
||
: 'voucher-row__amount--expense'
|
||
"
|
||
>
|
||
{{ item.amount }}
|
||
</text>
|
||
</view>
|
||
</view>
|
||
|
||
<view v-if="sections.length" class="voucher-loading">
|
||
<text class="voucher-loading__text asset-number-font">{{
|
||
loadMoreText
|
||
}}</text>
|
||
</view>
|
||
|
||
<view v-else class="voucher-empty">
|
||
<text class="voucher-empty__title">暂无记录哦～</text>
|
||
<text class="voucher-empty__desc">
|
||
当前分类下还没有抵用券流水数据。
|
||
</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import AssetPageShell from "../../components/asset-page-shell.vue";
|
||
import { fetchVoucherCenterPage } from "../../api/assets";
|
||
|
||
export default {
|
||
components: {
|
||
AssetPageShell,
|
||
},
|
||
data() {
|
||
return {
|
||
summary: {
|
||
balance: "0",
|
||
totalIn: "0",
|
||
totalOut: "0",
|
||
},
|
||
tabOptions: [
|
||
{ key: "all", label: "全部" },
|
||
{ key: "normal", label: "常规补贴" },
|
||
{ key: "order", label: "单单补贴" },
|
||
],
|
||
activeTab: "all",
|
||
sections: [],
|
||
page: 1,
|
||
pageSize: 10,
|
||
hasMore: false,
|
||
loadingMore: false,
|
||
showTip1: false,
|
||
showTip2: false,
|
||
};
|
||
},
|
||
computed: {
|
||
loadMoreText() {
|
||
if (this.loadingMore) {
|
||
return "加载中...";
|
||
}
|
||
|
||
if (this.hasMore) {
|
||
return "加载更多";
|
||
}
|
||
|
||
return "暂无更多";
|
||
},
|
||
},
|
||
onLoad() {
|
||
this.loadPage(true, 1);
|
||
},
|
||
onReachBottom() {
|
||
this.loadMore();
|
||
},
|
||
methods: {
|
||
closeTips() {
|
||
this.showTip1 = false;
|
||
this.showTip2 = false;
|
||
},
|
||
toggleTip(key) {
|
||
if (this[key]) {
|
||
this[key] = false;
|
||
return;
|
||
}
|
||
|
||
this.showTip1 = false;
|
||
this.showTip2 = false;
|
||
this[key] = true;
|
||
},
|
||
mergeSections(currentSections, nextSections) {
|
||
const sectionMap = {};
|
||
const mergedSections = [];
|
||
const appendSection = (section) => {
|
||
if (!section || !section.key) {
|
||
return;
|
||
}
|
||
|
||
if (!sectionMap[section.key]) {
|
||
sectionMap[section.key] = {
|
||
key: section.key,
|
||
label: section.label,
|
||
income: section.income,
|
||
expense: section.expense,
|
||
items: [],
|
||
};
|
||
mergedSections.push(sectionMap[section.key]);
|
||
}
|
||
|
||
const targetSection = sectionMap[section.key];
|
||
targetSection.income = section.income || targetSection.income;
|
||
targetSection.expense = section.expense || targetSection.expense;
|
||
|
||
const itemMap = {};
|
||
targetSection.items.forEach((item) => {
|
||
itemMap[item.id] = true;
|
||
});
|
||
|
||
(section.items || []).forEach((item) => {
|
||
if (!item || itemMap[item.id]) {
|
||
return;
|
||
}
|
||
itemMap[item.id] = true;
|
||
targetSection.items.push(item);
|
||
});
|
||
};
|
||
|
||
(currentSections || []).forEach(appendSection);
|
||
(nextSections || []).forEach(appendSection);
|
||
|
||
return mergedSections;
|
||
},
|
||
changeTab(key) {
|
||
if (this.activeTab === key) {
|
||
return;
|
||
}
|
||
|
||
this.activeTab = key;
|
||
this.closeTips();
|
||
this.loadPage(true, 1);
|
||
},
|
||
async loadPage(showLoading, targetPage) {
|
||
const page = Number(targetPage || 1);
|
||
const isLoadMore = page > 1;
|
||
|
||
if (isLoadMore && (this.loadingMore || !this.hasMore)) {
|
||
return;
|
||
}
|
||
|
||
if (isLoadMore) {
|
||
this.loadingMore = true;
|
||
}
|
||
|
||
try {
|
||
const requestOptions =
|
||
!isLoadMore && showLoading
|
||
? {
|
||
showLoading: true,
|
||
loadingText: "加载中",
|
||
}
|
||
: null;
|
||
const result = await fetchVoucherCenterPage(
|
||
this.activeTab,
|
||
{
|
||
page: page,
|
||
pageSize: this.pageSize,
|
||
},
|
||
requestOptions,
|
||
);
|
||
const nextSections = Array.isArray(result.sections) ? result.sections : [];
|
||
|
||
this.summary = Object.assign({}, this.summary, result.summary || {});
|
||
this.sections = isLoadMore
|
||
? this.mergeSections(this.sections, nextSections)
|
||
: nextSections;
|
||
|
||
const pagination = result.pagination || {};
|
||
this.page = Number(pagination.page || page || 1);
|
||
this.hasMore = Boolean(pagination.hasMore);
|
||
} catch (error) {
|
||
uni.showToast({
|
||
title: error.message || (isLoadMore ? "加载更多失败" : "页面加载失败"),
|
||
icon: "none",
|
||
});
|
||
} finally {
|
||
if (isLoadMore) {
|
||
this.loadingMore = false;
|
||
}
|
||
}
|
||
},
|
||
loadMore() {
|
||
if (this.loadingMore || !this.hasMore) {
|
||
return;
|
||
}
|
||
|
||
this.loadPage(false, this.page + 1);
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
@import "../../styles/tokens.scss";
|
||
@import "../../styles/common.scss";
|
||
|
||
.voucher-page {
|
||
min-height: 100vh;
|
||
background: #f5f5f5;
|
||
}
|
||
|
||
.voucher-scroll {
|
||
padding: 16rpx 12rpx calc(env(safe-area-inset-bottom) + 36rpx);
|
||
}
|
||
|
||
.voucher-header {
|
||
margin-top: 6rpx;
|
||
}
|
||
|
||
.voucher-header__bg {
|
||
position: relative;
|
||
width: 100%;
|
||
height: 206rpx;
|
||
overflow: visible;
|
||
}
|
||
|
||
.voucher-header__bg-image {
|
||
width: 100%;
|
||
height: 206rpx;
|
||
border-radius: 24rpx;
|
||
}
|
||
|
||
.voucher-header__content {
|
||
position: absolute;
|
||
inset: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
}
|
||
|
||
.voucher-header__current {
|
||
position: absolute;
|
||
bottom: 130rpx;
|
||
display: flex;
|
||
align-items: baseline;
|
||
justify-content: center;
|
||
width: 618rpx;
|
||
color: #ffffff;
|
||
}
|
||
|
||
.voucher-header__current-label {
|
||
font-size: 36rpx;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.voucher-header__current-value {
|
||
margin-left: 8rpx;
|
||
font-size: 48rpx;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.voucher-header__totals {
|
||
position: absolute;
|
||
top: 100rpx;
|
||
left: 0;
|
||
right: 0;
|
||
display: flex;
|
||
justify-content: space-around;
|
||
color: #ffffff;
|
||
}
|
||
|
||
.voucher-header__total-item {
|
||
position: relative;
|
||
text-align: center;
|
||
}
|
||
|
||
.voucher-header__total-value {
|
||
display: block;
|
||
font-size: 42rpx;
|
||
font-weight: 600;
|
||
line-height: 1.2;
|
||
}
|
||
|
||
.voucher-header__total-text {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-top: 6rpx;
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
.voucher-header__help-icon {
|
||
width: 30rpx;
|
||
margin-left: 10rpx;
|
||
}
|
||
|
||
.voucher-tooltip {
|
||
position: absolute;
|
||
top: calc(100% + 14rpx);
|
||
width: 360rpx;
|
||
max-width: calc(100vw - 48rpx);
|
||
padding: 16rpx 18rpx;
|
||
border-radius: 12rpx;
|
||
background: #333333;
|
||
color: #ffffff;
|
||
z-index: 30;
|
||
text-align: left;
|
||
box-shadow: 0 12rpx 24rpx rgba(0, 0, 0, 0.18);
|
||
}
|
||
|
||
.voucher-tooltip--left {
|
||
left: 0;
|
||
right: auto;
|
||
}
|
||
|
||
.voucher-tooltip--right {
|
||
right: 0;
|
||
left: auto;
|
||
}
|
||
|
||
.voucher-tooltip__row {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
}
|
||
|
||
.voucher-tooltip__text {
|
||
flex: 1;
|
||
min-width: 0;
|
||
font-size: 24rpx;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
.voucher-tooltip__close {
|
||
width: 44rpx;
|
||
height: 44rpx;
|
||
margin-left: 14rpx;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.voucher-tooltip__close image {
|
||
width: 44rpx;
|
||
height: 44rpx;
|
||
}
|
||
|
||
.voucher-tooltip__arrow {
|
||
position: absolute;
|
||
top: -14rpx;
|
||
right: 60rpx;
|
||
width: 0;
|
||
height: 0;
|
||
border-left: 12rpx solid transparent;
|
||
border-right: 12rpx solid transparent;
|
||
border-bottom: 16rpx solid #333333;
|
||
}
|
||
|
||
.voucher-tooltip__arrow--left {
|
||
left: 80rpx;
|
||
right: auto;
|
||
}
|
||
|
||
.voucher-wrapper {
|
||
margin-top: 20rpx;
|
||
}
|
||
|
||
.voucher-nav {
|
||
display: flex;
|
||
justify-content: center;
|
||
}
|
||
|
||
.voucher-tabs {
|
||
display: flex;
|
||
width: 100%;
|
||
padding: 0 8rpx;
|
||
}
|
||
|
||
.voucher-tabs__item {
|
||
position: relative;
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
min-width: 0;
|
||
padding: 8rpx 0 18rpx;
|
||
}
|
||
|
||
.voucher-tabs__text {
|
||
font-size: 30rpx;
|
||
color: #000;
|
||
}
|
||
|
||
.voucher-tabs__item.is-active .voucher-tabs__text {
|
||
color: #ec0208;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.voucher-tabs__line {
|
||
position: absolute;
|
||
bottom: 0;
|
||
width: 60rpx;
|
||
height: 16rpx;
|
||
}
|
||
|
||
.voucher-list {
|
||
width: 100%;
|
||
margin-top: 20rpx;
|
||
border-radius: 20rpx;
|
||
}
|
||
|
||
.voucher-card {
|
||
width: 100%;
|
||
margin-bottom: 20rpx;
|
||
padding: 34rpx 28rpx 20rpx;
|
||
border-radius: 22rpx;
|
||
background: #ffffff;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.voucher-card__head {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
justify-content: space-between;
|
||
margin-bottom: 20rpx;
|
||
gap: 20rpx;
|
||
}
|
||
|
||
.voucher-card__month-text {
|
||
font-size: 32rpx;
|
||
line-height: 44rpx;
|
||
color: #000000;
|
||
}
|
||
|
||
.voucher-card__totals {
|
||
flex-shrink: 0;
|
||
font-size: 28rpx;
|
||
line-height: 40rpx;
|
||
color: #000000;
|
||
}
|
||
|
||
.voucher-card__total-text + .voucher-card__total-text {
|
||
margin-top: 6rpx;
|
||
}
|
||
|
||
.voucher-card__total-income {
|
||
margin-left: 8rpx;
|
||
color: #fc2838;
|
||
}
|
||
|
||
.voucher-card__total-expense {
|
||
margin-left: 8rpx;
|
||
color: #40ae36;
|
||
}
|
||
|
||
.voucher-row {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
min-height: 115rpx;
|
||
padding: 10rpx 0;
|
||
color: #999999;
|
||
}
|
||
|
||
.voucher-row + .voucher-row {
|
||
border-top: 1px solid rgba(0, 0, 0, 0.04);
|
||
}
|
||
|
||
.voucher-row__left {
|
||
flex: 1;
|
||
min-width: 0;
|
||
display: flex;
|
||
align-items: center;
|
||
margin-right: 20rpx;
|
||
}
|
||
|
||
.voucher-row__icon {
|
||
width: 48rpx;
|
||
height: 48rpx;
|
||
margin-right: 30rpx;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.voucher-row__icon image {
|
||
width: 48rpx;
|
||
height: 48rpx;
|
||
}
|
||
|
||
.voucher-row__body {
|
||
flex: 1;
|
||
min-width: 0;
|
||
}
|
||
|
||
.voucher-row__title {
|
||
display: block;
|
||
font-size: 26rpx;
|
||
color: #000000;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.voucher-row__time {
|
||
display: block;
|
||
margin-top: 12rpx;
|
||
font-size: 24rpx;
|
||
color: #999999;
|
||
}
|
||
|
||
.voucher-row__amount {
|
||
font-size: 36rpx;
|
||
font-weight: 400;
|
||
line-height: 1;
|
||
}
|
||
|
||
.voucher-row__amount--income {
|
||
color: #e93323;
|
||
}
|
||
|
||
.voucher-row__amount--expense {
|
||
color: #16ac57;
|
||
}
|
||
|
||
.voucher-loading {
|
||
display: flex;
|
||
justify-content: center;
|
||
padding: 10rpx 0 0;
|
||
}
|
||
|
||
.voucher-loading__text {
|
||
font-size: 24rpx;
|
||
color: rgba(255, 255, 255, 0.72);
|
||
}
|
||
|
||
.voucher-empty {
|
||
padding: 72rpx 28rpx 120rpx;
|
||
text-align: center;
|
||
}
|
||
|
||
.voucher-empty__title {
|
||
display: block;
|
||
font-size: 30rpx;
|
||
font-weight: 700;
|
||
color: #ffffff;
|
||
}
|
||
|
||
.voucher-empty__desc {
|
||
display: block;
|
||
margin-top: 16rpx;
|
||
font-size: 24rpx;
|
||
line-height: 1.7;
|
||
color: rgba(255, 255, 255, 0.68);
|
||
}
|
||
</style>
|