<template>
|
<view class="pb100" v-if="!loading">
|
<view class="head-card pr mb20">
|
<view class="p40 pr card-box">
|
<view class="item-wrap"
|
:style="state_active==1?'background: url('+detail.card.card_style_url+') left top / 100% 100% no-repeat;':'background: url('+detail.card_style_url+') left top / 100% 100% no-repeat;'">
|
<view class="item-wrap-box">
|
<image class="item-wrap-box-image" src="/static/vip.png" mode=""></image>
|
<view class="tc f40 mb23 fb">{{detail.card_name||detail.card.card_name}}</view>
|
<view class="tc f28">{{detail.expire_time_text}}</view>
|
</view>
|
</view>
|
</view>
|
<image class="card-bottom" src="/static/bg-bottom.png" alt=""></image>
|
</view>
|
<view class="placeholde"></view>
|
<view class="bg-white p-20-40">
|
<view class="text-title"><text class="bg-white">会员特权</text></view>
|
<view class="d-c-c">
|
<view class="d-c d-c-c m-0-20" v-if="detail.open_coupon">
|
<image class="privilege-image" src="/static/icon/card-coupon.png" mode=""></image>
|
<text class="f22 gray6">开卡送券</text>
|
</view>
|
<view class="d-c d-c-c m-0-20" v-if="detail.open_money">
|
<image class="privilege-image" src="/static/icon/card-money.png" mode=""></image>
|
<text class="f22 gray6">开卡送余额</text>
|
</view>
|
<view class="d-c d-c-c m-0-20" v-if="detail.open_points">
|
<image class="privilege-image" src="/static/icon/card-point.png" mode=""></image>
|
<text class="f22 gray6">开卡送积分</text>
|
</view>
|
<view class="d-c d-c-c m-0-20" v-if="detail.is_discount">
|
<image class="privilege-image" src="/static/icon/card-discont.png" mode=""></image>
|
<text class="f22 gray6">开卡享{{detail.discount*1}}折</text>
|
</view>
|
</view>
|
</view>
|
<view class="bg-white p-20-40 mb20" v-if=" detail.open_coupons.length>0">
|
<view class="text-title"><text class="bg-white">开卡赠送</text></view>
|
<view class="d-s-c diy-coupon">
|
<scroll-view scroll-x="true">
|
<view class="swiper swiper-list">
|
<view class="coupon-item bg-red" v-for="(item, index) in detail.open_coupons" :key="index">
|
<view :class="'coupon-item coupon-item-'+item.color.text">
|
<!--装饰用的小圆-->
|
<view class="circles">
|
<text v-for="(circle, num) in 8" :key="num"></text>
|
</view>
|
<view class="info">
|
<view class="f28">{{item.coupon_type.text}}</view>
|
</view>
|
<view class="operation d-b-c">
|
<view class="flex-1 coupon-content">
|
<view class="text-ellipsis">
|
<template v-if=" item.coupon_type.value == 10 ">
|
<view class="price" style="font-size: ;">
|
<text>￥</text>
|
<text class="f32 fb">{{ item.reduce_price }}</text>
|
</view>
|
</template>
|
<template v-if="item.coupon_type.value == 20 ">
|
<text class="f32 fb">{{ item.discount }}</text><text>折</text>
|
</template>
|
</view>
|
<view class="f22 text-ellipsis">{{item.name}}</view>
|
<view class="f22">
|
<template v-if="item.min_price ==0">
|
无最低消费门槛
|
</template>
|
<template v-if="item.min_price >0">
|
最低消费{{item.min_price}}元
|
</template>
|
</view>
|
</view>
|
<view class="right-box d-c-c" style="padding-right: 16rpx;">
|
<view type="default" class="f24">
|
{{state_active==1?'已发放':'开卡领取'}}
|
</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
</scroll-view>
|
</view>
|
</view>
|
<view class="bg-white p-20-0">
|
<view class="text-title"><text class="bg-white">使用说明</text></view>
|
<view class="d-s-c p-0-30">
|
<view class="lh200" style="white-space: pre-wrap;" v-html="state_active==1?detail.card.content:detail.content"></view>
|
</view>
|
</view>
|
<view class="buy-btn-box bg-white">
|
<view class="buy-btn m20 d-s-c" v-if="state_active==0" @click="onPayOrder">
|
<text class="flex-1 pl50 f32">¥{{detail.money}}<text class="f26">/{{detail.expire_time_text}}</text></text>
|
<text class="p-0-40">立即开通</text>
|
</view>
|
</view>
|
<!--支付选择-->
|
<Popup :show="isPayPopup" msg="支付方式" @hidePopup="hidePopupFunc">
|
<!--支付方式-->
|
<view class="buy-checkout ww100">
|
<view :class="pay_type == 20 ? 'item active border-b-e' : 'item border-b-e'" @click="payTypeFunc(20)">
|
<view class="d-s-c">
|
<view class="icon-box d-c-c mr10"><span class="icon iconfont icon-weixin"></span></view>
|
<text class="key">微信支付</text>
|
</view>
|
<view class="icon-box d-c-c"></view>
|
</view>
|
<view :class="pay_type == 10 ? 'item active' : 'item'" @click="payTypeFunc(10)">
|
<view class="d-s-c">
|
<view class="icon-box d-c-c mr10"><span class="icon iconfont icon-yue"></span></view>
|
<text class="key">余额支付</text>
|
</view>
|
<view class="icon-box d-c-c"></view>
|
</view>
|
</view>
|
<view class="bts"></view>
|
</Popup>
|
</view>
|
</template>
|
|
<script>
|
import Popup from '@/components/uni-popup.vue';
|
import {
|
pay
|
} from '@/common/pay.js';
|
export default {
|
components: {
|
Popup
|
},
|
props: ['card_id'],
|
data() {
|
return {
|
loading: true,
|
// card_id: 0,
|
order_id: 0,
|
state_active: 0,
|
isSub: 0,
|
detail: {
|
open_coupons: [],
|
card_qrcode: '',
|
open_points: 0,
|
open_coupon: 0,
|
subcard: {
|
card_style_url: '',
|
card_id: 0
|
}
|
},
|
/*是否显示支付类别弹窗*/
|
isPayPopup: false,
|
/*支付方式*/
|
pay_type: 20,
|
};
|
},
|
mounted() {
|
this.getData();
|
},
|
onLoad(e) {
|
if (e) {
|
this.card_id = e.card_id;
|
this.order_id = e.order_id;
|
this.state_active = e.state_active;
|
}
|
},
|
methods: {
|
/*获取数据*/
|
getData() {
|
let self = this;
|
self.loading = true;
|
let url = '';
|
let params = {
|
// source: self.getPlatform()
|
source: 'h5'
|
}
|
if (self.state_active == 1) {
|
url = 'user.UserCard/recordDetail';
|
params.order_id = self.order_id
|
} else {
|
url = 'user.UserCard/detail';
|
params.card_id = self.card_id
|
}
|
self._get(url, params, function(res) {
|
self.detail = res.data.detail;
|
self.loading = false;
|
});
|
},
|
/*隐藏支付方式*/
|
hidePopupFunc() {
|
this.isPayPopup = false;
|
},
|
/*去支付*/
|
payTypeFunc(payType) {
|
let self = this;
|
self.isPayPopup = false;
|
uni.showLoading({
|
title: '加载中'
|
});
|
let type = payType;
|
if (self.detail.money == 0) {
|
type = 10;
|
}
|
self._post(
|
'user.UserCard/buy', {
|
pay_type: type,
|
card_id: self.card_id,
|
pay_source: self.getPlatform()
|
},
|
function(res) {
|
pay(res, self, function() {
|
self.showSuccess('购买成功');
|
self.state_active = 1;
|
self.order_id = res.data.order_id;
|
self.getData();
|
}, function() {
|
self.showError('购买失败');
|
self.getData();
|
});
|
}
|
);
|
},
|
/*支付方式选择*/
|
onPayOrder() {
|
let self = this;
|
self.isPayPopup = true;
|
},
|
}
|
};
|
</script>
|
|
<style lang="scss">
|
page {
|
background-color: #f6f6f6;
|
}
|
.item-wrap {
|
padding: 22rpx;
|
box-sizing: border-box;
|
height: 369rpx;
|
border-radius: 30rpx;
|
box-shadow: 0 0 20rpx rgba(0, 0, 0, .3)
|
}
|
|
.item-wrap-box {
|
// border: 1rpx solid #99999980;
|
padding: 0rpx 20rpx 35rpx 20rpx;
|
height: 100%;
|
color: rgba($color: #ffffff, $alpha: 0.7);
|
}
|
|
.privilege-image {
|
width: 108rpx;
|
height: 108rpx;
|
margin-bottom: 24rpx;
|
}
|
|
.text-title {
|
font-size: 32rpx;
|
font-weight: 800;
|
line-height: 60rpx;
|
text-align: center;
|
margin-bottom: 10rpx;
|
position: relative;
|
}
|
|
.text-title::after {
|
content: '';
|
position: absolute;
|
left: 0;
|
right: 0;
|
top: 0;
|
bottom: 0;
|
margin: auto;
|
width: 320rpx;
|
height: 4rpx;
|
z-index: 0;
|
background-color: #e2d7c4;
|
}
|
|
.text-title .bg-white {
|
position: relative;
|
z-index: 1;
|
padding: 0 10rpx;
|
}
|
|
|
|
.subcard {
|
width: 670rpx;
|
height: 224rpx;
|
margin: 0 auto;
|
padding: 20rpx;
|
box-sizing: border-box;
|
font-size: 38rpx;
|
color: #ccab7b;
|
}
|
|
.subbtn {
|
width: 150rpx;
|
height: 58rpx;
|
background-color: #b3985d;
|
color: #FFFFFF;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
font-weight: 600;
|
font-size: 28rpx;
|
border-radius: 8rpx;
|
}
|
|
.f52 {
|
font-size: 52rpx;
|
}
|
|
.buy-btn-box {
|
position: fixed;
|
width: 100%;
|
left: 0;
|
bottom: 0;
|
z-index: 98;
|
}
|
|
.buy-btn {
|
height: 80rpx;
|
line-height: 80rpx;
|
background-color: #ccab7b;
|
border-radius: 80rpx;
|
overflow: hidden;
|
}
|
|
.buy-btn text:first-child {
|
background-color: #342E25;
|
color: #ccab7b;
|
}
|
|
.item-wrap-box-image {
|
width: 50rpx;
|
height: 50rpx;
|
margin: 50rpx auto 20rpx auto;
|
opacity: 0.8;
|
}
|
|
.swiper-list {
|
display: flex;
|
}
|
|
.coupon-item {
|
width: 530rpx;
|
margin-right: 20rpx;
|
height: 140rpx;
|
}
|
|
.head-card {
|
background-color: #000000;
|
height: 344rpx;
|
}
|
.card-bottom {
|
position: absolute;
|
bottom: 0;
|
left: 0;
|
width: 100%;
|
height: 80rpx;
|
}
|
.card-box {
|
z-index: 10;
|
}
|
.placeholde {
|
height: 80rpx;
|
}
|
</style>
|
