327 lines
7.8 KiB
Vue
327 lines
7.8 KiB
Vue
|
<template>
|
|||
|
|
<view class="xilu">
|
|||
|
|
<view class="page-foot bg-normal" @click.stop="submitRecharge()">
|
|||
|
|
<view class="plr25 pb50">
|
|||
|
|
<view :class="[agreeFlag ? 'btn1' : 'btn2']">支付：¥{{rechargeInfo.recharge_amount || 0}} 立即开通</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="container">
|
|||
|
|
<view class="pt30 pb50 plr25">
|
|||
|
|
<view class="xilu_info_nav">
|
|||
|
|
<image v-if="web_url" :src="web_url+'/uniapp_image/xilu_bg_big.png'" mode="aspectFill" class="xilu_info_nav_bg"></image>
|
|||
|
|
<view class="xilu_info_nav_view">
|
|||
|
|
<view class="flex-box">
|
|||
|
|
<image :src="userInfo.xilufitness_urls.avatar || '../../static/images/avatar.png'"
|
|||
|
|
mode="aspectFill" class="xilu_head_img">
|
|||
|
|
</image>
|
|||
|
|
<view class="flex-grow-1 pl30 pr30">
|
|||
|
|
<view class="flex-box">
|
|||
|
|
<view class="flex-grow-1 m-ellipsis pr20 fs40 colf fw500 lh56">
|
|||
|
|
{{userInfo.nickname || ''}}
|
|||
|
|
</view>
|
|||
|
|
<view @click.stop="cms_detail(6)" class="tdu fs28 cola lh40">充值须知</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="col8 mt20 fs28 lh40" v-if="userInfo.is_vip == 0">未开通会员</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="mt30 xilu_text">MEMBERSHIP CARD</view>
|
|||
|
|
<view class="mt20 fs30 colf lh42">开通会员卡预计省¥{{rechargeInfo.cut_amount || 0}}/年</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="xilu_box">
|
|||
|
|
<view class="colf fs36 colf lh36 pb10">充值开通</view>
|
|||
|
|
<view>
|
|||
|
|
<template v-for="(vo,keys) in recharge_list">
|
|||
|
|
<view :class="[vo.id == recharge_id ? 'xilu_money_item active' : 'xilu_money_item']"
|
|||
|
|
@click="chooseRecharge(vo)">
|
|||
|
|
<text class="fs36 fw500">¥{{vo.recharge_amount || 0}}</text><text
|
|||
|
|
class="fs24">（到账{{vo.account_amount || vo.recharge_amount}}元）</text>
|
|||
|
|
<image src="@/static/images/xilu_choose.png" mode="aspectFill"
|
|||
|
|
class="xilu_money_item_choose" v-if="vo.id == recharge_id"></image>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="xilu_box1">
|
|||
|
|
<template v-if="member_tips">
|
|||
|
|
<view class="fs36 colf lh36 pl25">会员权益</view>
|
|||
|
|
<view class="mt30 xilu_interests colf p25">
|
|||
|
|
<mp-html :content="member_tips"></mp-html>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<view class="xilu_box1_fixed flex-box">
|
|||
|
|
<image @click="argeeAccount()"
|
|||
|
|
:src="'../../static/images/xilu_radio_'+(agreeFlag ? 's' : 'u')+'c.png'" mode="aspectFill"
|
|||
|
|
class="ico30"></image>
|
|||
|
|
<view class="pl15 fs28 col9">我已同意并阅读<text class="col2" @click.stop="cms_detail(6)">《充值须知》</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
const webConfig = require("@/util/config");
|
|||
|
|
var eventChannel = null;
|
|||
|
|
export default {
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
userInfo: null,
|
|||
|
|
rechargeInfo: null,
|
|||
|
|
recharge_id: 0,
|
|||
|
|
recharge_list: [],
|
|||
|
|
agreeFlag: false,
|
|||
|
|
member_tips: ''
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
getRechargeList() {
|
|||
|
|
let _this = this;
|
|||
|
|
this.$http({
|
|||
|
|
url: '/addons/xilufitness/recharge/index',
|
|||
|
|
method: 'get'
|
|||
|
|
}).then(res => {
|
|||
|
|
if (res.code == 1) {
|
|||
|
|
_this.recharge_list = res.data.list;
|
|||
|
|
}
|
|||
|
|
}).catch(error => {
|
|||
|
|
console.log('rechargeError', error);
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
//选择套餐
|
|||
|
|
chooseRecharge(rechargeInfo) {
|
|||
|
|
this.rechargeInfo = rechargeInfo;
|
|||
|
|
this.recharge_id = rechargeInfo.id || 0;
|
|||
|
|
},
|
|||
|
|
//同意协议
|
|||
|
|
argeeAccount() {
|
|||
|
|
this.agreeFlag = !this.agreeFlag;
|
|||
|
|
},
|
|||
|
|
//立即充值
|
|||
|
|
submitRecharge() {
|
|||
|
|
let _this = this;
|
|||
|
|
if (!_this.agreeFlag) {
|
|||
|
|
_this.$api.toast('请先同意协议');
|
|||
|
|
} else if (!_this.rechargeInfo) {
|
|||
|
|
_this.$api.toast('请选择套餐');
|
|||
|
|
} else {
|
|||
|
|
_this.$http({
|
|||
|
|
url: '/addons/xilufitness/order/createOrder',
|
|||
|
|
data: {
|
|||
|
|
id: _this.recharge_id,
|
|||
|
|
is_type: 0,
|
|||
|
|
num: 1,
|
|||
|
|
pay_type: 2
|
|||
|
|
},
|
|||
|
|
method: 'POST'
|
|||
|
|
}).then(res => {
|
|||
|
|
if (res.code == 1) {
|
|||
|
|
//去支付
|
|||
|
|
_this.toPay(res.data);
|
|||
|
|
} else {
|
|||
|
|
_this.$api.toast(res.msg);
|
|||
|
|
}
|
|||
|
|
}).catch(error => {
|
|||
|
|
console.log('rechargeError', error);
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
//去支付
|
|||
|
|
toPay(data) {
|
|||
|
|
let _this = this;
|
|||
|
|
this.$http({
|
|||
|
|
url: '/addons/xilufitness/pay/index',
|
|||
|
|
data: data,
|
|||
|
|
method: 'get'
|
|||
|
|
}).then(res => {
|
|||
|
|
if (res.code == 1) {
|
|||
|
|
if (data.pay_type == 2) {
|
|||
|
|
//发起微信支付
|
|||
|
|
_this.wechatPay(res.data, data.order_type);
|
|||
|
|
} else {
|
|||
|
|
//预约订单
|
|||
|
|
_this.$api.navigate('../booking/booking');
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
_this.$api.toast(res.msg);
|
|||
|
|
}
|
|||
|
|
}).catch(error => {
|
|||
|
|
console.log('payError', error);
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
//发起微信支付
|
|||
|
|
wechatPay(data, order_type) {
|
|||
|
|
let _this = this;
|
|||
|
|
this.$api.toPay(data, order_type, function(res) {
|
|||
|
|
if (order_type == 0) {
|
|||
|
|
//会员充值
|
|||
|
|
_this.$api.navigate('../member_order/member_order');
|
|||
|
|
} else {
|
|||
|
|
//预约订单
|
|||
|
|
_this.$api.navigate('../booking/booking');
|
|||
|
|
}
|
|||
|
|
}, function(error) {
|
|||
|
|
console.log('payError', error);
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
//充值须知
|
|||
|
|
cms_detail(is_type) {
|
|||
|
|
this.$api.navigate('../about_us/about_us?is_type=' + is_type);
|
|||
|
|
},
|
|||
|
|
//会员权益
|
|||
|
|
getMemberTips() {
|
|||
|
|
let _this = this;
|
|||
|
|
this.$http({
|
|||
|
|
url: '/addons/xilufitness/cms/detail',
|
|||
|
|
data: {
|
|||
|
|
is_type: 5
|
|||
|
|
}
|
|||
|
|
}).then(res => {
|
|||
|
|
if (res.code == 1) {
|
|||
|
|
_this.member_tips = (res.data.info && res.data.info.content) ? res.data.info.content : '';
|
|||
|
|
}
|
|||
|
|
}).catch(error => {
|
|||
|
|
console.log('tipsError', error);
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
onLoad(options) {
|
|||
|
|
let _this = this;
|
|||
|
|
this.web_url = webConfig.base_url || '';
|
|||
|
|
_this.recharge_id = options.recharge_id || 0;
|
|||
|
|
console.log('recharge_id', _this.recharge_id);
|
|||
|
|
eventChannel = this.getOpenerEventChannel();
|
|||
|
|
eventChannel.on('memberCardData', function(params) {
|
|||
|
|
_this.userInfo = params.userInfo || null;
|
|||
|
|
_this.rechargeInfo = params.rechargeInfo;
|
|||
|
|
});
|
|||
|
|
this.getRechargeList();
|
|||
|
|
this.getMemberTips();
|
|||
|
|
},
|
|||
|
|
onShareAppMessage() {
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
.xilu {
|
|||
|
|
&_info_nav {
|
|||
|
|
width: 700rpx;
|
|||
|
|
height: 312rpx;
|
|||
|
|
position: relative;
|
|||
|
|
|
|||
|
|
&_bg {
|
|||
|
|
width: 700rpx;
|
|||
|
|
height: 312rpx;
|
|||
|
|
position: relative;
|
|||
|
|
z-index: 1;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&_view {
|
|||
|
|
width: 700rpx;
|
|||
|
|
height: 312rpx;
|
|||
|
|
position: absolute;
|
|||
|
|
z-index: 1;
|
|||
|
|
top: 0;
|
|||
|
|
left: 0;
|
|||
|
|
right: 0;
|
|||
|
|
padding-left: 20rpx;
|
|||
|
|
padding-right: 0;
|
|||
|
|
padding-top: 30rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&_head_img {
|
|||
|
|
width: 130rpx;
|
|||
|
|
height: 130rpx;
|
|||
|
|
border: 5rpx solid rgba(255, 255, 255, 0.3);
|
|||
|
|
border-radius: 50%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&_text {
|
|||
|
|
font-size: 22rpx;
|
|||
|
|
font-weight: 400;
|
|||
|
|
color: #999999;
|
|||
|
|
line-height: 30rpx;
|
|||
|
|
letter-spacing: 30rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&_box {
|
|||
|
|
width: 700rpx;
|
|||
|
|
padding: 30rpx 25rpx;
|
|||
|
|
background: #292B2C;
|
|||
|
|
border-radius: 20rpx;
|
|||
|
|
margin-top: 30rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&_money_item {
|
|||
|
|
width: 315rpx;
|
|||
|
|
height: 98rpx;
|
|||
|
|
border-radius: 20rpx;
|
|||
|
|
border: 1px solid #999999;
|
|||
|
|
display: inline-block;
|
|||
|
|
vertical-align: top;
|
|||
|
|
margin-right: 20rpx;
|
|||
|
|
padding-left: 20rpx;
|
|||
|
|
line-height: calc(98rpx - 2px);
|
|||
|
|
color: #999999;
|
|||
|
|
position: relative;
|
|||
|
|
margin-top: 20rpx;
|
|||
|
|
|
|||
|
|
&.active {
|
|||
|
|
background: rgba(246, 204, 25, 0.2);
|
|||
|
|
color: #FFCF00;
|
|||
|
|
border: 1rpx solid #FFCF00;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&_choose {
|
|||
|
|
width: 38rpx;
|
|||
|
|
height: 36rpx;
|
|||
|
|
position: absolute;
|
|||
|
|
right: -1px;
|
|||
|
|
bottom: -1px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&_money_item:nth-of-type(2n) {
|
|||
|
|
margin-right: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&_box1 {
|
|||
|
|
width: 700rpx;
|
|||
|
|
height: 528rpx;
|
|||
|
|
background: #292B2C;
|
|||
|
|
border-radius: 20rpx;
|
|||
|
|
margin-top: 30rpx;
|
|||
|
|
padding-top: 30rpx;
|
|||
|
|
position: relative;
|
|||
|
|
|
|||
|
|
&_fixed {
|
|||
|
|
width: 700rpx;
|
|||
|
|
height: 70rpx;
|
|||
|
|
background: #404243;
|
|||
|
|
border-radius: 15rpx;
|
|||
|
|
position: absolute;
|
|||
|
|
bottom: 0;
|
|||
|
|
left: 0;
|
|||
|
|
right: 0;
|
|||
|
|
padding-left: 20rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&_interests {
|
|||
|
|
width: 100%;
|
|||
|
|
height: auto;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.tdu {
|
|||
|
|
text-decoration: underline;
|
|||
|
|
}
|
|||
|
|
</style>
|