ZF sun
2e535b9d93
1. extract common onShow login check to dedicated method redirectTologinOnShowLifecycle 2. add fallback callback for login failure to navigate back on wechat mini program 3. update all page login redirect calls to use the new unified method 4. add debug logs for redirect and auth flow tracing
261 lines
8.4 KiB
Vue
261 lines
8.4 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('validUntil') }}{{ $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('enjoyDiscountAnd') }}</view>
|
|
<view class="growr-value">{{ $lang('memberGiftBenefits') }}</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('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('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('freeShipping') }}</view>
|
|
<view class="card-privilege-text">{{ $lang('enjoyFreeShipping') }}</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('consumptionDiscount') }}</view>
|
|
<view class="card-privilege-text">{{ $lang('enjoyDiscountOnSomeProducts', { discount: levelInfo.consume_discount / 10 }) }}</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('pointsReward') }}</view>
|
|
<view class="card-privilege-text">{{ $lang('earnPointsMultiplier', { multiplier: parseFloat(levelInfo.point_feedback) }) }}</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('welcomeGift') }}</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('pointsGift') }}</view>
|
|
<view class="card-privilege-text">{{ $lang('giftPoints', { points: levelInfo.send_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('redPacketGift') }}</view>
|
|
<view class="card-privilege-text">{{ $lang('giftRedPacket', { amount: parseFloat(levelInfo.send_balance) }) }}</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('couponGift') }}</view>
|
|
<view class="card-privilege-text">{{ $lang('giftCoupons', { count: levelInfo.send_coupon.split(',').length }) }}</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('cardDescription') }}</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('cardDescription') }}</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 //小程序分享数据
|
|
};
|
|
},
|
|
onShow() {
|
|
if (!this.storeToken) {
|
|
this.redirectTologinOnShowLifecycle('/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;
|
|
|
|
|
|
//小程序分享
|
|
// #ifdef MP-WEIXIN
|
|
this.$util.getMpShare('/pages_tool/member/card').then(res => {
|
|
this.mpShareData = res;
|
|
}).catch(err => {
|
|
// 如果后台没配置，用默认值
|
|
this.mpShareData = {
|
|
appMessage: {
|
|
title: this.$lang('shareTitle'),
|
|
path: '/pages_tool/member/card'
|
|
},
|
|
timeLine: {
|
|
title: this.$lang('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('shareTitle'),
|
|
path: '/pages_tool/member/card'
|
|
};
|
|
},
|
|
onShareTimeline() {
|
|
return this.mpShareData?.timeLine || {
|
|
title: this.$lang('shareTitle'),
|
|
query: '/pages_tool/member/card'
|
|
};
|
|
},
|
|
onAddToFavorites() {
|
|
return {
|
|
title: this.$lang('shareTitle'),
|
|
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> |