时舟年
86 lines
3.3 KiB
Vue
86 lines
3.3 KiB
Vue
<template>
|
|
<view class="coupon-section">
|
|
<view class="coupon-section__inner">
|
|
<view class="coupon-section__header">
|
|
<view class="coupon-section__header-inner">
|
|
<text class="coupon-section__title">优惠券 & 积分</text>
|
|
<view
|
|
class="coupon-section__link"
|
|
hover-class="mi-tap--hover"
|
|
:hover-stay-time="150"
|
|
@tap="$emit('view-all')"
|
|
>
|
|
<text class="coupon-section__view-all">更多详情</text>
|
|
<image
|
|
class="coupon-section__link-arrow"
|
|
src="/static/images/chevronright5.png"
|
|
mode="aspectFit"
|
|
/>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="coupon-section__cards">
|
|
<view class="coupon-section__cards-inner">
|
|
<view
|
|
class="coupon-section__coupon"
|
|
hover-class="mi-tap-card--hover"
|
|
:hover-stay-time="150"
|
|
@tap="$emit('use-coupon')"
|
|
>
|
|
<view class="coupon-section__coupon-inner">
|
|
<text class="coupon-section__amount">{{ data.amount }}</text>
|
|
<text class="coupon-section__desc">{{ data.couponDesc }}</text>
|
|
<view class="coupon-section__coupon-status">
|
|
<text class="coupon-section__status">{{ data.couponAction }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view
|
|
class="coupon-section__points"
|
|
hover-class="mi-tap-card--hover"
|
|
:hover-stay-time="150"
|
|
@tap="$emit('redeem-points')"
|
|
>
|
|
<view class="coupon-section__points-inner">
|
|
<text class="coupon-section__num">{{ data.points }}</text>
|
|
<text class="coupon-section__points-label">{{ data.pointsLabel }}</text>
|
|
<view class="coupon-section__points-action">
|
|
<text class="coupon-section__text">{{ data.pointsAction }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
options: {
|
|
virtualHost: false,
|
|
styleIsolation: 'apply-shared'
|
|
},
|
|
props: {
|
|
data: {
|
|
type: Object,
|
|
default: () => ({
|
|
amount: '¥50',
|
|
couponDesc: '满500可用 · 1张',
|
|
couponAction: '去使用',
|
|
points: 1250,
|
|
pointsLabel: '我的积分',
|
|
pointsAction: '去兑换'
|
|
})
|
|
}
|
|
},
|
|
emits: ['view-all', 'use-coupon', 'redeem-points']
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
@import '@/common/style/memberInfo/member-info-component-reset.css';
|
|
@import '@/common/style/memberInfo/member-info-coupon-points.css';
|
|
@import '@/common/style/memberInfo/member-info-tap.css';
|
|
</style>
|