145 lines
4.6 KiB
Vue
145 lines
4.6 KiB
Vue
<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: 'none' })
|
||
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>
|
||
|