302 lines
9.2 KiB
Vue
302 lines
9.2 KiB
Vue
<template>
|
||
<view class="mobile-page" v-if="configObj && rechargeList.length">
|
||
<view class="member-recharge overflow-hidden" :style="[boxStyle]">
|
||
<!-- 头部信息 -->
|
||
<view class="header acea-row row-between-wrapper mb20">
|
||
<view class="left acea-row row-middle">
|
||
<view class="f-s-30 f-w-500 mr-12" :style="[titleColor]">
|
||
{{ configObj.titleConfig.val }}
|
||
</view>
|
||
<view class="f-s24" :style="[infoColor]">
|
||
{{ configObj.infoConfig.val }}
|
||
</view>
|
||
</view>
|
||
<view v-show="isLogin && merMemberInfo.isMerchantMember" @click="handleMore" class="f-s-24 flex-y-center" :style="[moreColor]">
|
||
更多<i class="iconfont icon-ic_rightarrow f-s-24"></i>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 套餐列表 -->
|
||
<view class="recharge-list flex flex-wrap" :class="'list-' + listStyle">
|
||
<view
|
||
class="recharge-item flex-center flex-column relative overflow-hidden"
|
||
v-for="(item, index) in rechargeList"
|
||
:key="index"
|
||
@click="clickRecharge(item, index)"
|
||
:style="[
|
||
itemStyle,
|
||
{ marginRight: (index + 1) % colNum === 0 ? '0' : configObj.contentConfig.val + 'px' },
|
||
{ marginBottom: configObj.contentConfig.val + 'px' },
|
||
index === checkedIndex
|
||
? {
|
||
borderColor: themeStyle ? amountColor : themeColor,
|
||
backgroundColor: themeStyle ? rechargeBgColor : themeRgba,
|
||
}
|
||
: {},
|
||
]"
|
||
>
|
||
<view
|
||
class="f-w-600 mb-6 recharge-price"
|
||
:style="{
|
||
color: index === checkedIndex ? (themeStyle ? amountColor : themeColor) : themeStyle ? amountColor : themeColor,
|
||
}"
|
||
>
|
||
<span class="mr-4 symbol">充</span>
|
||
<span class="num semiBold">{{ item.rechargeAmount }}</span>
|
||
</view>
|
||
<view class="f-s-26 regular" :style="{ color: giveAwayColor }">送{{ item.giftAmount }}</view>
|
||
<!-- 选中角标 -->
|
||
<view
|
||
class="active-icon absolute"
|
||
v-if="index === checkedIndex"
|
||
:style="{ borderTopColor: themeStyle ? amountColor : themeColor }"
|
||
>
|
||
<i class="iconfont icon-ic_complete absolute f-s-24"></i>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 充值按钮 -->
|
||
<view class="recharge-btn flex-center flex-column rd-50rpx mt20 w-100-p111-" @click="handleRecharge" :style="[btnColorStyle]">
|
||
<view class="f-s-30 fw-500 mb-6">{{isLogin&&merMemberInfo.isMerchantMember ? '立即充值' : '入会并充值'}}</view>
|
||
<view class="f-s-22" :style="[btnInfoColor]">{{ configObj.btnInfoConfig.val }}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {setLinearThemeColor, setThemeColor, themeRgba} from "../../../utils/setTheme";
|
||
import { mapGetters } from "vuex";
|
||
import {toLogin} from "../../../libs/login";
|
||
import {getMemberCreditsApi} from "../../../pages/member/memberApi";
|
||
import {handleGoRecharge} from "../../../pages/member/member";
|
||
const recharge = [
|
||
{ rechargeAmount: '4500', giftAmount: '200',id: 1 },
|
||
{ rechargeAmount: '4500', giftAmount: '200',id: 2 },
|
||
{ rechargeAmount: '4500', giftAmount: '200',id: 3 },
|
||
{ rechargeAmount: '4500', giftAmount: '200',id: 4 },
|
||
];
|
||
export default {
|
||
name: "memberRecharge",
|
||
props: {
|
||
merMemberInfo:{ //店铺会员信息
|
||
type: Object,
|
||
default: () => {}
|
||
},
|
||
merId: { // 商户id
|
||
type: Number,
|
||
default: 0
|
||
},
|
||
configObj: {
|
||
type: Object,
|
||
default: () => {}
|
||
}
|
||
},
|
||
computed: {
|
||
...mapGetters(['isLogin']),
|
||
themeStyle(){
|
||
return this.configObj.themeStyleConfig.tabVal
|
||
},
|
||
listStyle(){
|
||
return this.configObj.tabConfig.tabVal;
|
||
},
|
||
//最外层盒子的样式
|
||
boxStyle() {
|
||
return { 'border-radius': this.configObj.bgStyle.val ? 2 * this.configObj.bgStyle.val + 'rpx' : '0',
|
||
background: `linear-gradient(to right,${this.configObj.bgColor.color[0].item}, ${this.configObj.bgColor.color[1].item})`,
|
||
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'}
|
||
},
|
||
//内容边距
|
||
contentConfig() {
|
||
return this.configObj.contentConfig.val ? 2 * this.configObj.contentConfig.val + 'rpx' : '0';
|
||
},
|
||
titleColor(){
|
||
return { color: this.configObj.titleColor.color[0].item };
|
||
},
|
||
infoColor(){
|
||
return { color: this.configObj.infoColor.color[0].item };
|
||
},
|
||
moreColor(){
|
||
return { color: this.configObj.moreColor.color[0].item };
|
||
},
|
||
scopeColor() {
|
||
return { color: this.configObj.scopeColor? this.configObj.scopeColor.color[0].item:'' };
|
||
},
|
||
rechargeBgColor() {
|
||
return this.configObj.rechargeBgColor.color[0].item;
|
||
},
|
||
//优惠金额颜色
|
||
giveAwayColor() {
|
||
return this.configObj.giveAwayColor.color[0].item;
|
||
},
|
||
amountColor() {
|
||
return this.configObj.amountColor.color[0].item;
|
||
},
|
||
btnInfoColor() {
|
||
return { color: this.themeStyle ? this.configObj.btnInfoColor.color[0].item : '#fff' };
|
||
},
|
||
//领取按钮
|
||
btnColorStyle() {
|
||
return {
|
||
background: this.themeStyle
|
||
? `linear-gradient(90deg,${this.configObj.btnColor.color[0].item}, ${this.configObj.btnColor.color[1].item})`
|
||
: setLinearThemeColor(),
|
||
color: this.themeStyle ? this.configObj.btnBgColor.color[0].item : '#fff',
|
||
}
|
||
},
|
||
// 单个卡片样式
|
||
itemStyle() {
|
||
const margin = this.configObj.contentConfig.val;
|
||
const col = this.colNum;
|
||
// 计算宽度: (100% - (列数-1) * 间距) / 列数
|
||
// 注意：这里需要返回字符串形式的 calc
|
||
return {
|
||
borderRadius: 2 * this.configObj.contentStyle.val + 'rpx',
|
||
width: `calc((100% - ${(col - 1) * margin}px) / ${col})`,
|
||
};
|
||
},
|
||
// 列数
|
||
colNum() {
|
||
if (this.listStyle == 0) return 2;
|
||
if (this.listStyle == 1) return 3;
|
||
if (this.listStyle == 2) return 4;
|
||
return 2;
|
||
},
|
||
// 卡片宽度百分比
|
||
itemWidth() {
|
||
// (100 - (列数-1) * 间距) / 列数
|
||
// 这里简化处理，直接用 calc 在 style 中动态计算可能更精确，或者用 flex
|
||
// 简单起见，这里返回近似值，实际宽度在 CSS 中控制更好
|
||
// 但因为有 marginRight，需要精确计算
|
||
// 100% / colNum - margin * (colNum - 1) / colNum
|
||
// 为了简单，我们用 flex 布局控制
|
||
return 100; // 这里的返回值会在 style 中被覆盖，或者我们可以直接不返回宽度，用 flex
|
||
},
|
||
},
|
||
data(){
|
||
return{
|
||
checkedIndex: 0,
|
||
themeColor: setThemeColor(),
|
||
themeRgba: themeRgba(),
|
||
rechargeList: [],
|
||
recharge: {
|
||
id: '',
|
||
price: ''
|
||
}
|
||
}
|
||
},
|
||
mounted(){
|
||
this.getMemberRecharge()
|
||
},
|
||
methods: {
|
||
clickRecharge(item, index){
|
||
this.checkedIndex = index
|
||
this.recharge = {
|
||
id: item.id,
|
||
price: item.rechargeAmount
|
||
}
|
||
},
|
||
async getMemberRecharge(){
|
||
if(this.configObj.rechargeConfig.ids){
|
||
let { data } = await getMemberCreditsApi(this.configObj.rechargeConfig.ids)
|
||
this.rechargeList = [...data]
|
||
let item = this.rechargeList[this.checkedIndex]
|
||
this.recharge = {
|
||
id: item.id,
|
||
price: item.rechargeAmount
|
||
}
|
||
}else{
|
||
this.rechargeList = []
|
||
}
|
||
},
|
||
handleMore(){ //去更多
|
||
this.$util.navigateTo(`/pages/member/recharge_amount/index?merId=${this.merId}`)
|
||
},
|
||
handleRecharge(){
|
||
if(this.isLogin){
|
||
if(this.merMemberInfo.isMerchantMember){
|
||
this.handlerOpen()
|
||
}else{
|
||
this.$emit('activate-membership')
|
||
}
|
||
}else{
|
||
toLogin();
|
||
}
|
||
},
|
||
handlerOpen() { //充值
|
||
handleGoRecharge(this.recharge, this.merId)
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.member-recharge {
|
||
.recharge-list {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
|
||
.recharge-item {
|
||
background: #fff;
|
||
border: 2rpx solid #eee;
|
||
padding: 28rpx 0;
|
||
box-sizing: border-box;
|
||
.recharge-price {
|
||
font-size: 26px;
|
||
|
||
.symbol {
|
||
font-size: 15px;
|
||
}
|
||
}
|
||
.active-icon {
|
||
right: 0;
|
||
top: 0;
|
||
width: 0;
|
||
height: 0;
|
||
border-top: 48rpx solid;
|
||
border-left: 48rpx solid transparent;
|
||
color: #fff;
|
||
|
||
.icon-ic_complete {
|
||
position: absolute;
|
||
top: -44rpx;
|
||
right: 2rpx;
|
||
transform: scale(0.8);
|
||
}
|
||
}
|
||
}
|
||
|
||
// 2列
|
||
&.list-0 {
|
||
.recharge-item {
|
||
// width 由内联样式控制
|
||
}
|
||
}
|
||
// 3列
|
||
&.list-1 {
|
||
.recharge-item {
|
||
// width 由内联样式控制
|
||
}
|
||
}
|
||
// 4列
|
||
&.list-2 {
|
||
.recharge-item {
|
||
// width 由内联样式控制
|
||
padding: 20rpx 0;
|
||
.recharge-price {
|
||
font-size: 14px;
|
||
}
|
||
.num{
|
||
font-size: 20px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.recharge-btn {
|
||
height: 46px;
|
||
}
|
||
}
|
||
</style> |