时舟年
75 lines
3.1 KiB
Vue
75 lines
3.1 KiB
Vue
<template>
|
|
<view class="scroll-container theme-light">
|
|
<view class="bt-page" v-if="coupon">
|
|
<MemberInfoSubNav title="优惠券详情" @back="onBack" />
|
|
<view class="bt-page__body">
|
|
<view class="mi-mod-coupon mi-mod-coupon--detail">
|
|
<view class="mi-mod-coupon__left">
|
|
<text class="mi-mod-coupon__amount">¥{{ coupon.amount }}</text>
|
|
<text class="mi-mod-coupon__min">满{{ coupon.minSpend }}可用</text>
|
|
</view>
|
|
<view class="mi-mod-coupon__right">
|
|
<text class="mi-mod-coupon__title">{{ coupon.title }}</text>
|
|
<text class="mi-mod-coupon__desc">{{ coupon.desc }}</text>
|
|
<text class="mi-mod-coupon__expire">有效期至 {{ coupon.expire }}</text>
|
|
</view>
|
|
</view>
|
|
<view class="bt-card">
|
|
<text class="bt-card__title">使用规则</text>
|
|
<text class="bt-card__desc" style="white-space: pre-line;">{{ coupon.rules }}</text>
|
|
</view>
|
|
<view class="bt-card">
|
|
<text class="bt-card__title">适用范围</text>
|
|
<text class="bt-card__desc">{{ coupon.scope }}</text>
|
|
</view>
|
|
<view class="bt-card">
|
|
<text class="bt-card__title">使用流程</text>
|
|
<text class="bt-card__desc">{{ coupon.flow }}</text>
|
|
</view>
|
|
<view v-if="coupon.status === 'available'" class="bt-footer-actions">
|
|
<view class="bt-btn bt-btn--primary" hover-class="mi-tap-btn--hover" @tap="useNow">
|
|
<text class="bt-btn__text">立即使用</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import MemberInfoSubNav from '@/components/memberInfo/MemberInfoSubNav.vue'
|
|
import { PAGE, navigateToPage, goBackOrTab } from '@/common/constants/routes.js'
|
|
import { loadMemberStore } from '@/common/memberInfo/store.js'
|
|
import { getCouponById } from '@/common/memberInfo/moduleStore.js'
|
|
|
|
export default {
|
|
components: { MemberInfoSubNav },
|
|
data() {
|
|
return { coupon: null }
|
|
},
|
|
onLoad(options) {
|
|
const store = loadMemberStore()
|
|
this.coupon = getCouponById(store, options?.id)
|
|
},
|
|
methods: {
|
|
onBack() { goBackOrTab(PAGE.COUPONS) },
|
|
useNow() {
|
|
navigateToPage(PAGE.COURSE_LIST)
|
|
}
|
|
}
|
|
}
|
|
</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';
|
|
@import '@/common/style/memberInfo/pages/module-pages-common.css';
|
|
.mi-mod-coupon--detail { margin-bottom: 12px; }
|
|
.bt-footer-actions .bt-btn { flex: 1; }
|
|
</style>
|