时舟年
136 lines
6.5 KiB
Vue
136 lines
6.5 KiB
Vue
<template>
|
|
<view class="member-card-section">
|
|
<view class="member-card-section__inner">
|
|
<view class="member-card-section__head">
|
|
<view class="member-card-section__head-inner">
|
|
<text class="member-card-section__title">
|
|
我的会员卡
|
|
</text>
|
|
<view
|
|
class="member-card-section__link"
|
|
hover-class="mi-tap--hover"
|
|
:hover-stay-time="150"
|
|
@tap="$emit('view-all')"
|
|
>
|
|
<text
|
|
class="member-card-section__link-text"
|
|
>
|
|
查看全部
|
|
</text>
|
|
<image class="member-card-section__link-arrow" src="/static/images/chevronright12.png" mode="aspectFit" />
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view
|
|
class="member-card-preview"
|
|
hover-class="mi-tap-card--hover"
|
|
:hover-stay-time="150"
|
|
@tap="$emit('view-all')"
|
|
>
|
|
<view class="member-card-preview__inner">
|
|
<view class="member-card-preview__head">
|
|
<view class="member-card-preview__head-inner">
|
|
<view
|
|
class="member-card-preview__type-row"
|
|
>
|
|
<view
|
|
class="member-card-preview__icon-wrap"
|
|
>
|
|
<view
|
|
class="member-card-preview__icon-border"
|
|
>
|
|
<view
|
|
class="member-card-preview__icon-bg"
|
|
></view>
|
|
<view
|
|
class="member-card-preview__icon-stroke"
|
|
></view>
|
|
</view>
|
|
<image class="member-card-preview__icon-line" src="/static/images/Line_2_468.png" mode="aspectFill" />
|
|
</view>
|
|
<text
|
|
class="member-card-preview__name"
|
|
>
|
|
{{ cardInfo.name }}
|
|
</text>
|
|
</view>
|
|
<view
|
|
class="member-card-preview__tag"
|
|
>
|
|
<text class="member-card-preview__tag-text">
|
|
{{ cardInfo.detailTag || '详情' }}
|
|
</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<text class="member-card-preview__expire">
|
|
{{ cardInfo.expireDate }}
|
|
</text>
|
|
<view class="member-card-preview__footer">
|
|
<view class="member-card-preview__footer-inner">
|
|
<view
|
|
class="member-card-preview__days"
|
|
>
|
|
<text
|
|
class="member-card-preview__days-num"
|
|
>
|
|
{{ cardInfo.remainingDays }}
|
|
</text>
|
|
<text
|
|
class="member-card-preview__days-unit"
|
|
>
|
|
天剩余
|
|
</text>
|
|
</view>
|
|
<view
|
|
class="member-card-preview__renew"
|
|
hover-class="mi-tap-btn--hover"
|
|
:hover-stay-time="150"
|
|
@tap.stop="$emit('renew')"
|
|
>
|
|
<text
|
|
class="member-card-preview__renew-text"
|
|
>
|
|
续费
|
|
</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="member-card-tip">
|
|
<view class="member-card-tip__inner">
|
|
<view class="member-card-tip__content">
|
|
<image class="member-card-tip__icon" src="/static/images/clock1.png" mode="aspectFit" />
|
|
<text
|
|
class="member-card-tip__text"
|
|
>
|
|
{{ cardInfo.tip }}
|
|
</text>
|
|
</view>
|
|
</view>
|
|
<view class="member-card-tip__border"></view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
options: {
|
|
virtualHost: false,
|
|
styleIsolation: 'apply-shared'
|
|
},
|
|
props: {
|
|
cardInfo: { type: Object, required: true }
|
|
},
|
|
emits: ['view-all', 'renew'],
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
@import '@/common/style/memberInfo/member-info-component-reset.css';
|
|
@import '@/common/style/memberInfo/member-info-member-card.css';
|
|
@import '@/common/style/memberInfo/member-info-tap.css';
|
|
</style>
|