lucky_shop/pages_tool/member/card.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 //小程序分享数据
		};
	},
	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('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>