第一次上传
This commit is contained in:
@@ -0,0 +1,408 @@
|
||||
<template>
|
||||
<view class="coupon-page">
|
||||
<!-- 沉浸式状态栏 -->
|
||||
<view class="status-bar"></view>
|
||||
|
||||
<!-- 顶部导航 -->
|
||||
<view class="nav-bar">
|
||||
<image class="back-icon" src="/static/icons/back.svg" @click="goBack" mode="aspectFit" />
|
||||
<text class="nav-title">优惠券</text>
|
||||
<view class="nav-placeholder"></view>
|
||||
</view>
|
||||
|
||||
<!-- Tab 切换 - 简约文字Tab -->
|
||||
<view class="tab-bar">
|
||||
<view v-for="(tab, index) in tabs" :key="index" class="tab-item" :class="{ active: currentTab === index }"
|
||||
@click="switchTab(index)">
|
||||
<text class="tab-text">{{ tab.label }}</text>
|
||||
<text v-if="tab.count > 0" class="tab-count">({{ tab.count }})</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 优惠券列表 - 简约卡片 -->
|
||||
<view class="coupon-list">
|
||||
<view v-for="coupon in coupons" :key="coupon.id" class="coupon-card" :class="`coupon-${coupon.status}`">
|
||||
<!-- 左侧金额 -->
|
||||
<view class="coupon-left">
|
||||
<!-- <view v-if="coupon.code === 'discount'" class="coupon-amount">
|
||||
<text class="amount-number">{{ coupon.deductMoney }}</text>
|
||||
<text class="amount-unit">折</text>
|
||||
</view> -->
|
||||
<view v-if="coupon.code === 'Special'" class="coupon-amount">
|
||||
<text class="amount-symbol">¥</text>
|
||||
<text class="amount-number">{{ coupon.deductMoney }}</text>
|
||||
</view>
|
||||
<view v-else class="coupon-amount">
|
||||
<text class="amount-gift">礼品</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 分割线 -->
|
||||
<view class="coupon-divider">
|
||||
<view class="divider-circle top"></view>
|
||||
<view class="divider-line"></view>
|
||||
<view class="divider-circle bottom"></view>
|
||||
</view>
|
||||
|
||||
<!-- 右侧信息 -->
|
||||
<view class="coupon-right">
|
||||
<view class="coupon-title">{{ coupon.code=='Special'?'满减券':'' }}</view>
|
||||
<view class="coupon-condition">
|
||||
<text v-if="coupon.needMoney > 0">满{{ coupon.needMoney }}元可用</text>
|
||||
<text v-else>无门槛</text>
|
||||
</view>
|
||||
<view class="coupon-expire">有效期至 {{ coupon.endTime }}</view>
|
||||
|
||||
<!-- 状态标识 -->
|
||||
<view v-if="coupon.status === 1" class="coupon-status used">
|
||||
<text>已使用</text>
|
||||
</view>
|
||||
<view v-else-if="coupon.status === 2" class="coupon-status expired">
|
||||
<text>已过期</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 空状态 -->
|
||||
<view v-if="coupons.length === 0" class="empty">
|
||||
<text class="empty-text">{{ emptyText }}</text>
|
||||
</view>
|
||||
<view v-else >
|
||||
<up-loadmore :status="status" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onShow, onLoad, onReachBottom } from "@dcloudio/uni-app";
|
||||
import { Service } from "@/Service/Service"
|
||||
import { ref, computed } from "vue";
|
||||
import { vpDiscountService } from "@/Service/vp/vpDiscountService"
|
||||
|
||||
|
||||
let coupons = ref<Array<any>>([])
|
||||
let status = ref<string>('loadmore')
|
||||
let pageNo = ref<number>(1)
|
||||
|
||||
// 数据
|
||||
const currentTab = ref(0)
|
||||
|
||||
const tabs = ref([
|
||||
{ label: '未使用', value: 'unused', count: 0 ,type:1 },
|
||||
{ label: '已使用', value: 'used', count: 0 , type:2 },
|
||||
{ label: '已过期', value: 'expired', count: 0 ,type:3}
|
||||
])
|
||||
|
||||
// 空状态文本
|
||||
const emptyText = computed(() => {
|
||||
const textMap = ['暂无可用优惠券', '暂无已使用的优惠券', '暂无已过期的优惠券']
|
||||
return textMap[currentTab.value]
|
||||
})
|
||||
|
||||
onLoad(() => {
|
||||
getData()
|
||||
})
|
||||
|
||||
onReachBottom(() => {
|
||||
getList()
|
||||
});
|
||||
|
||||
|
||||
const getData = () => {
|
||||
coupons.value = []
|
||||
status.value = 'loadmore'
|
||||
pageNo.value = 1
|
||||
getList()
|
||||
}
|
||||
|
||||
|
||||
const getList = () => {
|
||||
if (status.value == 'nomore' || status.value == 'loading') {
|
||||
return
|
||||
}
|
||||
|
||||
status.value = 'loading'
|
||||
|
||||
vpDiscountService.GetUserDiscountList( tabs.value[currentTab.value].type, pageNo.value).then(res => {
|
||||
if (res.code == 0) {
|
||||
coupons.value = [...coupons.value, ...res.data.list]
|
||||
status.value = 10 == res.data.list.length ? 'loadmore' : 'nomore'
|
||||
tabs.value[0].count =res.data.wsy
|
||||
tabs.value[1].count =res.data.ysy
|
||||
tabs.value[2].count =res.data.ygq
|
||||
pageNo.value++
|
||||
} else {
|
||||
Service.Msg(res.msg)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
|
||||
// 切换Tab
|
||||
const switchTab = (index : number) => {
|
||||
currentTab.value = index
|
||||
getData()
|
||||
}
|
||||
|
||||
// 返回我的页面
|
||||
const goBack = () => {
|
||||
Service.GoPageBack()
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.coupon-page {
|
||||
min-height: 100vh;
|
||||
background-color: #F5F5F5;
|
||||
}
|
||||
|
||||
/* 状态栏 */
|
||||
.status-bar {
|
||||
background: linear-gradient(135deg, #FF6B00, #FF9500);
|
||||
height: var(--status-bar-height);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* 导航栏 */
|
||||
.nav-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 60rpx 24rpx 20rpx 24rpx;
|
||||
background: linear-gradient(135deg, #FF6B00, #FF9500);
|
||||
}
|
||||
|
||||
.back-icon {
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
padding: 8rpx;
|
||||
}
|
||||
|
||||
.nav-title {
|
||||
font-size: 36rpx;
|
||||
font-weight: 600;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.nav-placeholder {
|
||||
width: 48rpx;
|
||||
}
|
||||
|
||||
/* Tab栏 - 简约文字Tab */
|
||||
.tab-bar {
|
||||
display: flex;
|
||||
background: #FFFFFF;
|
||||
padding: 20rpx 20rpx 0;
|
||||
border-bottom: 1rpx solid #E5E5E5;
|
||||
}
|
||||
|
||||
.tab-item {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding-bottom: 20rpx;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.tab-item.active .tab-text {
|
||||
color: #222;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.tab-item.active::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 32rpx;
|
||||
height: 4rpx;
|
||||
background: #FF6B00;
|
||||
border-radius: 2rpx;
|
||||
}
|
||||
|
||||
.tab-text {
|
||||
font-size: 28rpx;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.tab-count {
|
||||
font-size: 24rpx;
|
||||
color: inherit;
|
||||
margin-left: 4rpx;
|
||||
}
|
||||
|
||||
/* 优惠券列表 */
|
||||
.coupon-list {
|
||||
padding: 20rpx;
|
||||
}
|
||||
|
||||
.coupon-card {
|
||||
background: #FFFFFF;
|
||||
border-radius: 12rpx;
|
||||
margin-bottom: 20rpx;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* 未使用 - 橙色边框 */
|
||||
.coupon-unused {
|
||||
border: 2rpx solid #FF6B00;
|
||||
}
|
||||
|
||||
/* 已使用 - 灰色 */
|
||||
.coupon-used {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
/* 已过期 - 灰色 */
|
||||
.coupon-expired {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
/* 左侧金额区 */
|
||||
.coupon-left {
|
||||
flex-shrink: 0;
|
||||
width: 200rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: linear-gradient(135deg, #FFF4E6, #FFE0B2);
|
||||
padding: 32rpx 20rpx;
|
||||
}
|
||||
|
||||
.coupon-amount {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
}
|
||||
|
||||
.amount-symbol {
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
color: #FF6B00;
|
||||
}
|
||||
|
||||
.amount-number {
|
||||
font-size: 56rpx;
|
||||
font-weight: 600;
|
||||
color: #FF6B00;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.amount-unit {
|
||||
font-size: 24rpx;
|
||||
font-weight: 500;
|
||||
color: #FF6B00;
|
||||
margin-left: 4rpx;
|
||||
}
|
||||
|
||||
.amount-gift {
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
color: #FF6B00;
|
||||
}
|
||||
|
||||
/* 分割线 */
|
||||
.coupon-divider {
|
||||
position: relative;
|
||||
width: 4rpx;
|
||||
background: #F5F5F5;
|
||||
}
|
||||
|
||||
.divider-circle {
|
||||
position: absolute;
|
||||
width: 20rpx;
|
||||
height: 20rpx;
|
||||
background: #F5F5F5;
|
||||
border-radius: 50%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.divider-circle.top {
|
||||
top: -10rpx;
|
||||
}
|
||||
|
||||
.divider-circle.bottom {
|
||||
bottom: -10rpx;
|
||||
}
|
||||
|
||||
.divider-line {
|
||||
position: absolute;
|
||||
top: 10rpx;
|
||||
bottom: 10rpx;
|
||||
left: 50%;
|
||||
width: 2rpx;
|
||||
background: repeating-linear-gradient(to bottom,
|
||||
#F5F5F5 0rpx,
|
||||
#F5F5F5 6rpx,
|
||||
transparent 6rpx,
|
||||
transparent 12rpx);
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
/* 右侧信息 */
|
||||
.coupon-right {
|
||||
flex: 1;
|
||||
padding: 24rpx 20rpx;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.coupon-title {
|
||||
font-size: 30rpx;
|
||||
font-weight: 600;
|
||||
color: #222;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
|
||||
.coupon-condition {
|
||||
font-size: 22rpx;
|
||||
color: #999;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.coupon-expire {
|
||||
font-size: 22rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
/* 状态标识 */
|
||||
.coupon-status {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 20rpx;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.coupon-status text {
|
||||
font-size: 24rpx;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.coupon-status.used text {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.coupon-status.expired text {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
/* 空状态 */
|
||||
.empty {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 120rpx 0;
|
||||
}
|
||||
|
||||
.empty-text {
|
||||
font-size: 26rpx;
|
||||
color: #999;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user