时舟年
135 lines
4.0 KiB
Vue
135 lines
4.0 KiB
Vue
<template>
|
|
<view class="scroll-container theme-light">
|
|
<view class="bt-page">
|
|
<MemberInfoSubNav title="领券中心" @back="onBack" />
|
|
<view class="bt-page__body">
|
|
<view class="bt-card">
|
|
<text class="bt-card__title">可领取优惠券</text>
|
|
<text class="bt-card__desc">领取后自动放入「可用」列表</text>
|
|
</view>
|
|
<view
|
|
v-for="item in list"
|
|
:key="item.id"
|
|
class="mi-center-coupon"
|
|
>
|
|
<view class="mi-center-coupon__info">
|
|
<text class="mi-center-coupon__amount">¥{{ item.amount }}</text>
|
|
<view>
|
|
<text class="mi-center-coupon__title">{{ item.title }}</text>
|
|
<text class="mi-center-coupon__desc">{{ item.desc }} · {{ item.expireDays }}天有效</text>
|
|
</view>
|
|
</view>
|
|
<view
|
|
class="mi-center-coupon__btn"
|
|
:class="{ 'mi-center-coupon__btn--done': item.claimed }"
|
|
hover-class="mi-tap-btn--hover"
|
|
@tap="claim(item)"
|
|
>
|
|
<text>{{ item.claimed ? '已领取' : '立即领取' }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import MemberInfoSubNav from '@/components/memberInfo/MemberInfoSubNav.vue'
|
|
import { PAGE, goBackOrTab } from '@/common/constants/routes.js'
|
|
import { loadMemberStore, persistMemberStore } from '@/common/memberInfo/store.js'
|
|
import { getCouponCenterList, claimCouponFromCenter } from '@/common/memberInfo/moduleStore.js'
|
|
|
|
export default {
|
|
components: { MemberInfoSubNav },
|
|
data() {
|
|
return { list: [] }
|
|
},
|
|
onShow() {
|
|
const store = loadMemberStore()
|
|
this.list = getCouponCenterList(store)
|
|
},
|
|
methods: {
|
|
onBack() { goBackOrTab(PAGE.COUPONS) },
|
|
claim(item) {
|
|
if (item.claimed) return
|
|
const store = loadMemberStore()
|
|
const result = claimCouponFromCenter(store, item.id)
|
|
uni.showToast({ title: result.message, icon: result.ok ? 'success' : 'none' })
|
|
if (result.ok) {
|
|
persistMemberStore(store)
|
|
this.list = getCouponCenterList(store)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
@import '@/common/style/base.css';
|
|
@import '@/common/style/memberInfo/pages/page-reset.css';
|
|
@import '@/common/style/memberInfo/pages/sub-page-base.css';
|
|
@import '@/common/style/memberInfo/member-info-component-reset.css';
|
|
@import '@/common/style/memberInfo/member-info-sub-nav.css';
|
|
@import '@/common/style/memberInfo/member-info-tap.css';
|
|
@import '@/common/style/memberInfo/pages/body-test-common.css';
|
|
|
|
.mi-center-coupon {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 16px;
|
|
margin-bottom: 10px;
|
|
border-radius: 16px;
|
|
background: var(--bg-white, #fff);
|
|
box-shadow: var(--shadow-sm);
|
|
}
|
|
|
|
.mi-center-coupon__info {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
gap: 12px;
|
|
flex: 1;
|
|
}
|
|
|
|
.mi-center-coupon__amount {
|
|
font-size: 28px;
|
|
font-weight: 800;
|
|
color: var(--accent-orange, #FF6B35);
|
|
}
|
|
|
|
.mi-center-coupon__title {
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
color: var(--text-dark, #1E2A3A);
|
|
display: block;
|
|
}
|
|
|
|
.mi-center-coupon__desc {
|
|
font-size: 11px;
|
|
color: var(--text-muted, #5E6F8D);
|
|
display: block;
|
|
margin-top: 2px;
|
|
}
|
|
|
|
.mi-center-coupon__btn {
|
|
padding: 8px 14px;
|
|
border-radius: 999px;
|
|
}
|
|
|
|
.mi-center-coupon__btn text {
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
color: #fff;
|
|
}
|
|
|
|
.mi-center-coupon__btn--done {
|
|
background: var(--bg-gray, #F2F5F9);
|
|
}
|
|
|
|
.mi-center-coupon__btn--done text {
|
|
color: var(--text-light, #8A99B4);
|
|
}
|
|
</style>
|