431 lines
10 KiB
Vue
431 lines
10 KiB
Vue
|
<template>
|
|||
|
|
<view>
|
|||
|
|
<view v-if="configObj" class="member-card-container" :style="[boxStyle]">
|
|||
|
|
<!-- 顶部会员信息栏 -->
|
|||
|
|
<view v-if="isLogin && merMemberInfo.isMerchantMember" class="member-header acea-row justify-between" :style="[bgImgStyle]">
|
|||
|
|
<view class="member-brand">
|
|||
|
|
<img v-if="configObj.logoConfig.url && logoShow" :src="configObj.logoConfig.url" alt="品牌logo"
|
|||
|
|
class="brand-image" />
|
|||
|
|
<span class="brand-name" :style="[merNameColor]">{{ configObj.titleConfig.val }}</span>
|
|||
|
|
<span v-if="levelShow" class="member-level" :style="[memNameColor]">{{merMemberInfo.levelName}}</span>
|
|||
|
|
</view>
|
|||
|
|
<view v-if="ruleShow" @click="handleRules" class="member-rule" :style="[rulesNameColor]">会员规则</view>
|
|||
|
|
<!-- 购物余额信息 -->
|
|||
|
|
<view class="balance-section">
|
|||
|
|
<view>
|
|||
|
|
<view v-if="priceShow" class="balance-info" :style="[moneyColor]">
|
|||
|
|
<span class="balance-label f-s-24">购物余额：</span>
|
|||
|
|
<span class="balance-amount line-heightOne f-s-36 fw-600 semiBold">¥ {{merMemberInfo.shoppingCreditsBalance}}</span>
|
|||
|
|
<navigator :url="`/pages/member/shoppingFund_details/index?merId=${merId}`" hover-class="none">
|
|||
|
|
<i :style="[moneyColor]" class="iconfont icon-ic_rightarrow"></i>
|
|||
|
|
</navigator>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view v-show="btnShow" class="recharge-btn-box" @click="handleMore">
|
|||
|
|
<view class="recharge-btn" :style="[btnColorStyle]">充值</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view v-else class="member-header flex-column flex-y-center" :style="[bgImgStyleShip]">
|
|||
|
|
<view class="f-s-32 text--w111-fff">邀您加入店铺会员</view>
|
|||
|
|
<view class="text--w111-fff f-s-28 mt-12 mb-28">-0元入会，尊享丰富会员特权-</view>
|
|||
|
|
<view class="bg--w111-fff w-264 rd-8rpx" @click="handleMemberShip">
|
|||
|
|
<view :style="[btnColorStyle]" class="h-64 flex-center">立即加入会员</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
// +----------------------------------------------------------------------
|
|||
|
|
// | CRMEB [ CRMEB赋能开发者，助力企业发展 ]
|
|||
|
|
// +----------------------------------------------------------------------
|
|||
|
|
// | Copyright (c) 2016~2026 https://www.crmeb.com All rights reserved.
|
|||
|
|
// +----------------------------------------------------------------------
|
|||
|
|
// | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权
|
|||
|
|
// +----------------------------------------------------------------------
|
|||
|
|
// | Author: CRMEB Team <admin@crmeb.com>
|
|||
|
|
// +----------------------------------------------------------------------
|
|||
|
|
import {
|
|||
|
|
setThemeColor,
|
|||
|
|
themeRgba
|
|||
|
|
} from "../../../utils/setTheme";
|
|||
|
|
import { mapGetters } from "vuex";
|
|||
|
|
import {toLogin} from "../../../libs/login";
|
|||
|
|
let app = getApp();
|
|||
|
|
export default {
|
|||
|
|
name: "memberCard",
|
|||
|
|
props: {
|
|||
|
|
merMemberInfo:{ //店铺会员信息
|
|||
|
|
type: Object,
|
|||
|
|
default: () => {}
|
|||
|
|
},
|
|||
|
|
merId: { // 商户id
|
|||
|
|
type: Number,
|
|||
|
|
default: 0
|
|||
|
|
},
|
|||
|
|
configObj: {
|
|||
|
|
type: Object,
|
|||
|
|
default: () => {}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
urlDomain: this.$Cache.get("imgHost"),
|
|||
|
|
themeColor: setThemeColor(),
|
|||
|
|
themeRgba: themeRgba()
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
computed: {
|
|||
|
|
...mapGetters(['isLogin']),
|
|||
|
|
bgImgUrl() {
|
|||
|
|
return this.configObj.cardLogoConfig.url ? this.configObj.cardLogoConfig.url :
|
|||
|
|
`${this.urlDomain}+'crmebimage/presets/cardBg.png'`;
|
|||
|
|
},
|
|||
|
|
//背景图片
|
|||
|
|
bgImgStyleShip() {
|
|||
|
|
return {
|
|||
|
|
'background-image': `linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url(${this.bgImgUrl})`,
|
|||
|
|
'border-radius': this.configObj.contentStyle.val ? 2 * this.configObj.contentStyle.val + 'rpx' : '0',
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
//背景图片
|
|||
|
|
bgImgStyle() {
|
|||
|
|
return {
|
|||
|
|
'background-image': `url(${this.bgImgUrl})`,
|
|||
|
|
'border-radius': this.configObj.contentStyle.val ? 2 * this.configObj.contentStyle.val + 'rpx' : '0',
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
//最外层盒子的样式
|
|||
|
|
boxStyle() {
|
|||
|
|
return {
|
|||
|
|
background: `linear-gradient(${this.configObj.bgColor.color[0].item}, ${this.configObj.bgColor.color[1].item})`,
|
|||
|
|
'border-radius': this.configObj.bgStyle.val ? 2 * this.configObj.bgStyle.val + 'rpx' : '0',
|
|||
|
|
margin: 2 * this.configObj.mbConfig.val + 'rpx' + ' ' + 2 * this.configObj.lrConfig.val + 'rpx' + ' ' + 0,
|
|||
|
|
padding: 2 * this.configObj.upConfig.val + 'rpx' + ' ' + '20rpx' + ' ' + 2 * this.configObj.downConfig.val + 'rpx'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
themeStyle() {
|
|||
|
|
return this.configObj.themeStyleConfig.tabVal
|
|||
|
|
},
|
|||
|
|
// 领取按钮
|
|||
|
|
btnColorStyle() {
|
|||
|
|
return {
|
|||
|
|
background: this.themeStyle ? this.configObj.btnColor.color[0].item : this.themeRgba,
|
|||
|
|
color: this.themeStyle ? this.configObj.itemBgColor.color[0].item : this.themeColor,
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
// 店铺名称
|
|||
|
|
merNameColor() {
|
|||
|
|
return {
|
|||
|
|
color: this.configObj.merNameColor.color[0].item
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
// 会员文字
|
|||
|
|
memNameColor() {
|
|||
|
|
return {
|
|||
|
|
color: this.configObj.memNameColor ? this.configObj.memNameColor.color[0].item : '',
|
|||
|
|
backgroundColor: 'rgba(0, 0, 0, 0.3)'
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
// 规则文字
|
|||
|
|
rulesNameColor() {
|
|||
|
|
return {
|
|||
|
|
color: this.configObj.rulesNameColor.color[0].item
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
// 购物金文字
|
|||
|
|
moneyColor() {
|
|||
|
|
return {
|
|||
|
|
color: this.configObj.moneyColor.color[0].item
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
logoShow() {
|
|||
|
|
if (this.configObj.typeConfig.activeValue.indexOf(0) !== -1) {
|
|||
|
|
return true;
|
|||
|
|
} else {
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
levelShow() {
|
|||
|
|
//等级
|
|||
|
|
if (this.configObj.typeConfig.activeValue.indexOf(1) !== -1) {
|
|||
|
|
return true;
|
|||
|
|
} else {
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
ruleShow() {
|
|||
|
|
//规则
|
|||
|
|
if (this.configObj.typeConfig.activeValue.indexOf(2) !== -1) {
|
|||
|
|
return true;
|
|||
|
|
} else {
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
btnShow() {
|
|||
|
|
//充值按钮
|
|||
|
|
if (this.configObj.typeConfig.activeValue.indexOf(3) !== -1) {
|
|||
|
|
return true;
|
|||
|
|
} else {
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
priceShow() {
|
|||
|
|
//购物金
|
|||
|
|
if (this.configObj.typeConfig.activeValue.indexOf(4) !== -1) {
|
|||
|
|
return true;
|
|||
|
|
} else {
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
// 会员权益列表
|
|||
|
|
benefitList() {
|
|||
|
|
return [{
|
|||
|
|
name: '会员专享价',
|
|||
|
|
icon: '💎'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: '充值赠送',
|
|||
|
|
icon: '💰'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: '会员专享券',
|
|||
|
|
icon: '🎫'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: '入会有礼',
|
|||
|
|
icon: '🎁'
|
|||
|
|
},
|
|||
|
|
];
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
handleMore(){ //去充值
|
|||
|
|
this.$util.navigateTo(`/pages/member/recharge_amount/index?merId=${this.merId}`)
|
|||
|
|
},
|
|||
|
|
// 会员规则
|
|||
|
|
handleRules(){
|
|||
|
|
this.$util.navigateTo(`/pages/member/membership_rules/index?merId=${this.merId}&level=${this.merMemberInfo.level}`)
|
|||
|
|
},
|
|||
|
|
handleMemberShip(){
|
|||
|
|
if(this.isLogin){
|
|||
|
|
this.$emit('activate-membership')
|
|||
|
|
}else{
|
|||
|
|
toLogin();
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped lang="scss">
|
|||
|
|
.member-card-container {
|
|||
|
|
overflow: hidden;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.member-header {
|
|||
|
|
background-repeat: no-repeat;
|
|||
|
|
background-size: 100% 100%;
|
|||
|
|
color: #ffffff;
|
|||
|
|
padding: 28rpx 0 28rpx 28rpx;
|
|||
|
|
position: relative;
|
|||
|
|
height: 250rpx;
|
|||
|
|
overflow: hidden;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.member-brand {
|
|||
|
|
display: flex;
|
|||
|
|
z-index: 1;
|
|||
|
|
height: 48rpx;
|
|||
|
|
align-items: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.brand-image {
|
|||
|
|
width: 44rpx;
|
|||
|
|
height: 44rpx;
|
|||
|
|
margin-right: 14rpx;
|
|||
|
|
border-radius: 8rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.brand-name {
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
font-weight: 500;
|
|||
|
|
margin-right: 18rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.member-box {
|
|||
|
|
height: 34rpx;
|
|||
|
|
border-radius: 8rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.member-level {
|
|||
|
|
display: inline-block;
|
|||
|
|
line-height: 34rpx;
|
|||
|
|
font-size: 20rpx;
|
|||
|
|
height: 34rpx;
|
|||
|
|
padding: 0 8rpx;
|
|||
|
|
border-radius: 8rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.member-rule {
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
z-index: 1;
|
|||
|
|
width: 136rpx;
|
|||
|
|
height: 48rpx;
|
|||
|
|
text-align: center;
|
|||
|
|
line-height: 48rpx;
|
|||
|
|
background-color: rgba(0, 0, 0, 0.3);
|
|||
|
|
border-radius: 24rpx 0 0 24rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.balance-section {
|
|||
|
|
position: absolute;
|
|||
|
|
bottom: 0;
|
|||
|
|
left: 0;
|
|||
|
|
right: 0;
|
|||
|
|
padding: 28rpx;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
background: rgba(0, 0, 0, 0.3);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.balance-info {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
height: 52rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.recharge-btn-box {
|
|||
|
|
background-color: #fff;
|
|||
|
|
border-radius: 8rpx;
|
|||
|
|
line-height: 54rpx;
|
|||
|
|
height: 52rpx;
|
|||
|
|
|
|||
|
|
.recharge-btn {
|
|||
|
|
padding: 0 20rpx;
|
|||
|
|
border-radius: 8rpx;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.level-progress {
|
|||
|
|
padding: 40rpx 24rpx;
|
|||
|
|
background-color: #ffffff;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.level-dots {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
position: relative;
|
|||
|
|
padding: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.level-dots::before {
|
|||
|
|
content: '';
|
|||
|
|
position: absolute;
|
|||
|
|
top: 20rpx;
|
|||
|
|
left: 0;
|
|||
|
|
right: 0;
|
|||
|
|
height: 4rpx;
|
|||
|
|
background-color: #e8e8e8;
|
|||
|
|
z-index: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.level-dot {
|
|||
|
|
position: relative;
|
|||
|
|
z-index: 1;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: center;
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
color: #999;
|
|||
|
|
width: 20%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.level-dot::before {
|
|||
|
|
content: '';
|
|||
|
|
width: 24px;
|
|||
|
|
height: 24px;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
background-color: #e8e8e8;
|
|||
|
|
margin-bottom: 8rpx;
|
|||
|
|
transition: all 0.3s ease;
|
|||
|
|
position: relative;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.level-dot.current::before {
|
|||
|
|
background-color: #ff4d4f;
|
|||
|
|
box-shadow: 0 0 0 6rpx rgba(255, 77, 79, 0.2);
|
|||
|
|
width: 32rpx;
|
|||
|
|
height: 32rpx;
|
|||
|
|
top: -4rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.level-dot.current::after {
|
|||
|
|
content: '当前';
|
|||
|
|
position: absolute;
|
|||
|
|
top: -50rpx;
|
|||
|
|
left: 50%;
|
|||
|
|
transform: translateX(-50%);
|
|||
|
|
background-color: #ff4d4f;
|
|||
|
|
color: #ffffff;
|
|||
|
|
padding: 8rpx 20rpx;
|
|||
|
|
border-radius: 30rpx;
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
font-weight: bold;
|
|||
|
|
white-space: nowrap;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.level-dot.current {
|
|||
|
|
color: #ff4d4f;
|
|||
|
|
font-weight: bold;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.member-benefits {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-around;
|
|||
|
|
padding: 32rpx 0;
|
|||
|
|
background-color: #ffffff;
|
|||
|
|
border-top: 2rpx solid #f0f0f0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.benefit-item {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: center;
|
|||
|
|
cursor: pointer;
|
|||
|
|
width: 25%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.benefit-icon {
|
|||
|
|
width: 120rpx;
|
|||
|
|
height: 120rpx;
|
|||
|
|
background-color: #fff5f5;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
margin-bottom: 16rpx;
|
|||
|
|
transition: all 0.3s ease;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.benefit-icon-content {
|
|||
|
|
font-size: 56rpx;
|
|||
|
|
color: #ff4d4f;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.benefit-name {
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
color: #666;
|
|||
|
|
text-align: center;
|
|||
|
|
word-break: keep-all;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.benefit-item:hover .benefit-icon {
|
|||
|
|
transform: scale(1.1);
|
|||
|
|
}
|
|||
|
|
</style>
|