一些优化

2025-09-04 17:34:47 +08:00
parent b068fb00cc
commit 4659f30400
18 changed files with 508 additions and 87 deletions
@@ -0,0 +1,144 @@
+<template>
+	<view class="coupon-page">
+		<uni-nav-bar
+			left-icon="left"
+			title="积分券"
+			@clickLeft="goBack"
+			fixed
+			color="#8B2316"
+			height="140rpx"
+			:border="false"
+			backgroundColor="#ffffff"
+		/>
+
+		<!-- 顶部 tabs -->
+		<view class="tabs">
+			<view
+				v-for="(tab, i) in tabs"
+				:key="tab.value"
+				class="tab-item"
+				:class="{ active: activeTab === i }"
+				@click="setActiveTab(i)"
+			>
+				<text class="tab-text">{{ tab.label }}</text>
+			</view>
+		</view>
+
+		<!-- 列表 -->
+		<scroll-view scroll-y class="list" :show-scrollbar="false">
+			<view v-if="currentList.length" class="card-wrap">
+				<view :class="['coupon-card', { gray: activeTab !== 0 }]" v-for="(item, idx) in currentList" :key="idx">
+                    <view class="card-top" style="display: flex; padding: 32rpx 28rpx;">
+                        <view class="card-left">
+                            <text class="points">{{ item.points }}</text>
+                            <text class="points-unit">积分券</text>
+                        </view>
+                        <view class="card-right" style="text-align: center;">
+                            <view class="title">{{ item.title }}</view>
+                        </view>
+                    </view>
+                    <view class="card-bottom" style="display: flex; background-color: #fff;color: #000; padding: 32rpx 28rpx;">
+                        <view class="expire">有效期：{{ item.expire }}</view>
+						<button class="btn" v-if="activeTab === 0" @click="goExchange(item)">在线兑换</button>
+                    </view>
+				</view>
+			</view>
+			<view v-else class="empty">暂无数据</view>
+		</scroll-view>
+	</view>
+</template>
+
+<script setup>
+import { ref, computed, onMounted } from 'vue'
+import navTo from '@/utils/navTo.js'
+import api from '@/api/api.js'
+
+const tabs = [
+	{ label: '未兑换', value: '1' },
+	{ label: '已兑换', value: '2' },
+	{ label: '已过期', value: '3' },
+	{ label: '已作废', value: '4' }
+]
+const activeTab = ref(0)
+
+onMounted(() => {
+	getPointTicketList()
+})
+
+// 列表由接口返回
+const currentList = ref([])
+
+const goBack = () => {
+	uni.navigateBack()
+}
+
+const goExchange = (item) => {
+
+	// 确认后再跳转到现有在线兑换页
+	uni.showModal({
+		title: '确认兑换',
+		content: `将使用${item.points}积分券进行兑换，是否继续？`,
+		confirmText: '确认兑换',
+		cancelText: '再想想',
+		success: (res) => {
+			if (res.confirm) {
+				api.pointTicketExchange({uuid: item.uuid}).then(res => {
+					console.log(res)
+					if (res.code === 200 || res.code === '200') {
+						uni.showToast({ title: '兑换成功', icon: 'success' })
+						getPointTicketList()
+					}
+				})
+				
+			}
+		}
+	})
+}
+
+const getPointTicketList = () => {
+	api.pointTicketlist({page: 1, status: activeTab.value+1}).then(res => {
+		const rows = (res && res.data && res.data.list ? res.data.list : []).map(r => ({
+            uuid: r.uuid,
+			points: r.point,
+			title: '肝胆相照',
+			expire: formatDate(r.end_date)
+		}))
+		currentList.value = rows
+	})
+}
+
+const setActiveTab = (i) => {
+	activeTab.value = i
+	getPointTicketList()
+}
+
+const formatDate = (seconds) => {
+	if (!seconds) return ''
+	const d = new Date(seconds * 1000)
+	const y = d.getFullYear()
+	const m = `${d.getMonth() + 1}`.padStart(2, '0')
+	const day = `${d.getDate()}`.padStart(2, '0')
+	return `${y}年${m}月${day}日`
+}
+</script>
+
+<style scoped>
+.coupon-page{background:#f5f5f5;min-height:100vh}
+.tabs{display:flex;align-items:center;justify-content:space-around;height:88rpx;background:#fff;border-bottom:1px solid #f0f0f0}
+.tab-item{flex:1;display:flex;align-items:center;justify-content:center}
+.tab-text{font-size:28rpx;color:#999}
+.tab-item.active .tab-text{color:#8B2316;font-weight:600}
+.list{height:calc(100vh - 88rpx - 140rpx);}
+.card-wrap{padding:24rpx}
+.coupon-card{display:flex;flex-direction: column; background:linear-gradient(90deg,#ff7381, #ff6a7a);border-radius:16rpx;color:#fff;position:relative;margin-bottom:24rpx}
+.coupon-card.gray{background:#e5e5e5;color:#666}
+.card-left{width:220rpx;display:flex;flex-direction:column;align-items:center;justify-content:center;border-right:2rpx solid rgba(255,255,255,.5)}
+.points{font-size:80rpx;line-height:1}
+.points-unit{font-size:28rpx;margin-top:12rpx}
+.card-right{flex:1;padding-left:28rpx;display:flex;flex-direction:column;justify-content:center}
+.title{font-size:40rpx;font-weight:600}
+.expire{font-size:26rpx;opacity:.95;height:64rpx;line-height:64rpx;flex:3}
+.btn{border: 1px solid #ff4b5a;flex:1;height:64rpx;line-height:64rpx;padding:0 28rpx;background:#fff;color:#ff4b5a;border-radius:100rpx;font-size:28rpx}
+.empty{padding:120rpx 0;text-align:center;color:#999}
+</style>
+