265 lines
8.7 KiB
Vue
265 lines
8.7 KiB
Vue
<template>
|
||
<view class="member-level" :style="themeColor">
|
||
<view class="level-top">
|
||
<image :src="$util.img('public/uniapp/level/card-top-bg.png')"></image>
|
||
</view>
|
||
<view class="banner-container">
|
||
<view class="memberInfo">
|
||
<image :src="$util.img(memberInfo.headimg)" v-if="memberInfo.headimg" @error="headimgError"
|
||
mode="aspectFill" show-menu-by-longpress/>
|
||
<image :src="$util.getDefaultImage().head" v-else mode="aspectFill" show-menu-by-longpress/>
|
||
<view class="member-desc">
|
||
<view class="font-size-toolbar">{{ memberInfo.nickname }}</view>
|
||
<view class="font-size-tag expire-time" v-if="memberInfo.level_expire_time > 0">
|
||
{{ $lang('level.expireTime') }}：{{ $util.timeStampTurnTime(memberInfo.level_expire_time, true) }}</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="image-container item-center">
|
||
<view class="slide-image">
|
||
<view class="bg-border"></view>
|
||
<image :src="$util.img('public/uniapp/level/card-bg.png')"></image>
|
||
<view class="info">
|
||
<view class="level-detail">{{ levelInfo.level_name }}</view>
|
||
<view class="growr-name">{{ levelInfo.level_name }}{{ $lang('card.canEnjoy') }}</view>
|
||
<view class="growr-value">{{ $lang('card.memberGiftEtc') }}</view>
|
||
<view class="growth-rules font-size-tag" @click="openExplainPopup"
|
||
v-if="levelInfo.remark != ''">
|
||
<text class="iconfont icon-wenhao font-size-tag"></text>
|
||
</view>
|
||
<button type="default" class="renew-btn"
|
||
@click="$util.redirectTo('/pages_tool/member/card_buy')">{{ $lang('card.renewNow') }}</button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="card-content"
|
||
v-if="levelInfo.is_free_shipping || levelInfo.consume_discount < 100 || levelInfo.point_feedback > 0">
|
||
<view class="card-content-head">
|
||
<view class="line-box">
|
||
<view class="line right"></view>
|
||
</view>
|
||
<view class="card-content-title">{{ $lang('level.memberBenefits') }}</view>
|
||
<view class="line-box">
|
||
<view class="line"></view>
|
||
</view>
|
||
<view class="clear"></view>
|
||
</view>
|
||
<view class="card-privilege-list">
|
||
<view class="card-privilege-item" v-if="levelInfo.is_free_shipping">
|
||
<view class="card-privilege-icon"><text class="iconfont icon-tedianquanchangbaoyou"></text>
|
||
</view>
|
||
<view class="card-privilege-name">{{ $lang('level.freeShipping') }}</view>
|
||
<view class="card-privilege-text">{{ $lang('level.freeShippingDesc') }}</view>
|
||
</view>
|
||
<view class="card-privilege-item" v-if="levelInfo.consume_discount < 100">
|
||
<view class="card-privilege-icon"><text class="iconfont icon-zhekou"></text></view>
|
||
<view class="card-privilege-name">{{ $lang('level.consumeDiscount') }}</view>
|
||
<view class="card-privilege-text">{{ $lang('level.consumeDiscountDesc') }}{{ levelInfo.consume_discount / 10 }}{{ $lang('level.discount') }}</view>
|
||
</view>
|
||
<view class="card-privilege-item" v-if="levelInfo.point_feedback > 0">
|
||
<view class="card-privilege-icon"><text class="iconfont icon-jifen2 f32"></text></view>
|
||
<view class="card-privilege-name">{{ $lang('level.pointReward') }}</view>
|
||
<view class="card-privilege-text">{{ $lang('level.pointRewardDesc') }}{{ parseFloat(levelInfo.point_feedback) }}{{ $lang('level.pointMultiplier') }}</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view v-if="levelInfo.send_coupon != '' || levelInfo.send_point > 0 || levelInfo.send_balance > 0">
|
||
<view class="card-content-head">
|
||
<view class="line-box">
|
||
<view class="line right"></view>
|
||
</view>
|
||
<view class="card-content-title">{{ $lang('level.openCardGift') }}</view>
|
||
<view class="line-box">
|
||
<view class="line"></view>
|
||
</view>
|
||
<view class="clear"></view>
|
||
</view>
|
||
<view class="card-privilege-list">
|
||
<view class="card-privilege-item" v-if="levelInfo.send_point > 0">
|
||
<view class="card-privilege-icon"><text class="iconfont icon-jifen3"></text></view>
|
||
<view class="card-privilege-name">{{ $lang('level.pointGift') }}</view>
|
||
<view class="card-privilege-text">{{ $lang('level.giftPoint') }}{{ levelInfo.send_point }}{{ $lang('level.point') }}</view>
|
||
</view>
|
||
<view class="card-privilege-item" v-if="levelInfo.send_balance > 0">
|
||
<view class="card-privilege-icon"><text class="iconfont icon-hongbao"></text></view>
|
||
<view class="card-privilege-name">{{ $lang('level.redPacketGift') }}</view>
|
||
<view class="card-privilege-text">{{ $lang('level.giftBalance') }}{{ parseFloat(levelInfo.send_balance) }}{{ $lang('level.redPacket') }}</view>
|
||
</view>
|
||
<view class="card-privilege-item" v-if="levelInfo.send_coupon != ''">
|
||
<view class="card-privilege-icon"><text class="iconfont icon-youhuiquan1"></text></view>
|
||
<view class="card-privilege-name">{{ $lang('level.couponGift') }}</view>
|
||
<view class="card-privilege-text">{{ $lang('level.giftCoupon') }}{{ levelInfo.send_coupon.split(',').length }}{{ $lang('level.coupon') }}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 弹出规则 -->
|
||
<view @touchmove.prevent.stop>
|
||
<uni-popup ref="explainPopup" type="bottom">
|
||
<view class="tips-layer">
|
||
<view class="head" @click="closeExplainPopup()">
|
||
<view class="title">{{ $lang('card.cardDesc') }}</view>
|
||
<text class="iconfont icon-close"></text>
|
||
</view>
|
||
<view class="body">
|
||
<view class="detail margin-bottom">
|
||
<block v-if="levelInfo.remark != ''">
|
||
<view class="tip">{{ $lang('card.cardDesc') }}</view>
|
||
<view class="font-size-base">{{ levelInfo.remark }}</view>
|
||
</block>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</uni-popup>
|
||
</view>
|
||
|
||
<ns-goods-recommend ref="goodrecommend" route="super_member"></ns-goods-recommend>
|
||
<ns-login ref="login"></ns-login>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
|
||
import scroll from '@/common/js/scroll-view.js';
|
||
|
||
export default {
|
||
mixins: [scroll],
|
||
data() {
|
||
return {
|
||
isSub: false, // 是否已提交
|
||
isIphoneX: false,
|
||
levelId: 0,
|
||
levelInfo: {
|
||
bg_color: '#333'
|
||
},
|
||
mpShareData: null //小程序分享数据
|
||
};
|
||
},
|
||
onLoad() {
|
||
//会员卡
|
||
if (!this.storeToken) {
|
||
this.$nextTick(() => {
|
||
this.$refs.login.open('/pages_tool/member/card');
|
||
});
|
||
return;
|
||
}
|
||
|
||
this.isIphoneX = this.$util.uniappIsIPhoneX();
|
||
|
||
this.levelId = this.memberInfo.member_level;
|
||
|
||
let levelInfo = this.memberInfo.member_level_info;
|
||
let charge_rule = levelInfo.charge_rule ? JSON.parse(levelInfo.charge_rule) : {};
|
||
levelInfo.charge_rule_arr = [];
|
||
Object.keys(charge_rule).forEach(key => {
|
||
levelInfo.charge_rule_arr.push({
|
||
key: key,
|
||
value: charge_rule[key]
|
||
});
|
||
});
|
||
this.levelInfo = levelInfo;
|
||
},
|
||
onShow() {
|
||
//小程序分享
|
||
// #ifdef MP-WEIXIN
|
||
this.$util.getMpShare('/pages_tool/member/card').then(res => {
|
||
this.mpShareData = res;
|
||
}).catch(err => {
|
||
// 如果后台没配置，用默认值
|
||
this.mpShareData = {
|
||
appMessage: {
|
||
title: this.$lang('card.shareTitle'),
|
||
path: '/pages_tool/member/card'
|
||
},
|
||
timeLine: {
|
||
title: this.$lang('card.shareTitle'),
|
||
query: '/pages_tool/member/card'
|
||
}
|
||
};
|
||
});
|
||
// #endif
|
||
},
|
||
methods: {
|
||
headimgError() {
|
||
this.memberInfo.headimg = this.$util.getDefaultImage().head;
|
||
},
|
||
/**
|
||
* 打开说明弹出层
|
||
*/
|
||
openExplainPopup() {
|
||
this.$refs.explainPopup.open();
|
||
},
|
||
/**
|
||
* 打开说明弹出层
|
||
*/
|
||
closeExplainPopup() {
|
||
this.$refs.explainPopup.close();
|
||
}
|
||
},
|
||
onBackPress(options) {
|
||
if (options.from === 'navigateBack') {
|
||
return false;
|
||
}
|
||
this.$util.redirectTo(this.$util.MEMBER_PAGE_URL);
|
||
return true;
|
||
},
|
||
onShareAppMessage() {
|
||
return this.mpShareData?.appMessage || {
|
||
title: this.$lang('member.memberRightsTip'),
|
||
path: '/pages_tool/member/card'
|
||
};
|
||
},
|
||
onShareTimeline() {
|
||
return this.mpShareData?.timeLine || {
|
||
title: this.$lang('member.memberRightsTip'),
|
||
query: '/pages_tool/member/card'
|
||
};
|
||
},
|
||
onAddToFavorites() {
|
||
return {
|
||
title: this.$lang('member.memberRightsTip'),
|
||
path: '/pages_tool/member/card'
|
||
};
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
@import './public/css/card.scss';
|
||
|
||
.banner-container .image-container .slide-image {
|
||
width: calc(100% - 60rpx);
|
||
height: 360rpx;
|
||
background-size: 100% 100%;
|
||
background-repeat: no-repeat;
|
||
}
|
||
|
||
.banner-container .image-container image {
|
||
background-color: #e3b66b;
|
||
}
|
||
|
||
.banner-container .slide-image .renew-btn {
|
||
text-align: center;
|
||
line-height: 56rpx;
|
||
height: 56rpx;
|
||
border-radius: $border-radius;
|
||
width: 160rpx;
|
||
font-size: $font-size-tag;
|
||
color: #e3b66b !important;
|
||
background: #fff;
|
||
position: absolute;
|
||
right: 10rpx;
|
||
bottom: 40rpx;
|
||
border: none;
|
||
z-index: 10;
|
||
}
|
||
</style>
|
||
|
||
<style lang="scss" scoped>
|
||
::v-deep .sku-layer .uni-popup__wrapper.uni-custom .uni-popup__wrapper-box {
|
||
max-height: unset !important;
|
||
}
|
||
</style> |