<template>
<view class="park">
<view class="park-top">
<view class="park-navbar">
<u-navbar title="开通商城" :border-bottom="false" :background="background"></u-navbar>
<view class="box_1">
<image :src="$picUrl+'/static/default-logo.png'" class="image_2"
@click="goJump('/pages/news1/setting')"></image>
<view class="group_1">
<view class="image-text_2" @click="goLogin()">
{{userInfo.mobile}}
</view>
<view class="image-text_1" @click="goLogin()">
{{retail==0?'您暂未开通商场哦～':'您已经开通商场啦～'}}
</view>
</view>
<image :src="$picUrl+'/static/user/gmallZuan.png'" class="image_1"></image>
</view>
</view>
</view>
<view class="tab_pos">
<view class="tab_bg" :style="{ 'border-radius': radius}">
<view :class="[tabIndex==index ? 'tab_active' : 'tab_a']" v-for="(item,index) in tabbar"
@click="onChage(index)" :key="index">
{{item}}
</view>
</view>
</view>
<view class="tab-type">
<view class="tab-pro" v-for="(item,index) in tabType" :class="index==banIndex?'tab-pro-active':''"
@click="onChageBan(index)" :key="index">
<view class="tab-name">
{{item.retail_name}}
</view>
<view class="tab-price">
<text style="font-size: 32rpx;">¥</text>{{Number(item.retail_current_price)}}
</view>
<view class="tab-line">
¥{{Number(item.retail_original_price)}}
</view>
<view class="tab-jian" v-if='item.jian>0'
:class="index==banIndex?'tab-jian-active':''">
立减 ¥{{Number(item.jian)}}元
</view>
<view class="tab-quan">
</view>
</view>
</view>
<view class="tab-box">
<view class="tabFavour">
<view class="favour" v-for="(item,index) in tabFavour" :class="index==priceIndex?'favourActive':''"
@click="onChagePrice(index)" :key="index">
<view class="favour_active">
{{item.name}}
</view>
<view class="favour_infor">
<view style="overflow: hidden;">
<view class="favour_year">
{{item.year}}<text style="font-weight: 500;">年</text>
</view>
<view class="favour_tips">
限时特惠
</view>
</view>
<view class="favour_price">
<text style="font-size: 32rpx;">¥</text>{{item.price}}
</view>
</view>
<view class="tab-quan"></view>
</view>
</view>
<view class="tab-title">
<view class="name">
<image :src="$picUrl+'/static/user/left.png'"></image>开通{{tabbar[tabIndex]}}的5大优势<image
:src="$picUrl+'/static/user/right.png'">
</image>
</view>
</view>
<view class="advantage">
<view class="advantage-tips" v-if="tabIndex==0" v-html="retail"></view>
<view class="advantage-tips" v-if="tabIndex==1" v-html="wholesale"></view>
</view>
<view class="tab-title">
<view class="name">
<image :src="$picUrl+'/static/user/left.png'"></image>功能对比<image
:src="$picUrl+'/static/user/right.png'">
</image>
</view>
</view>
<view class="equity" style="margin-top: 8px;">
<view class="table_box">
<u-table>
<u-tr v-for="(a,ind) in equityList">
<u-td class="box_name">{{a.name}}</u-td>
<u-td class='box_content'>
<u-tr v-for="(item,index) in a.list">
<u-td class="box_cus flex-1">
<view class="box_tips" :style="{ color: index==0?'#333':'#594b40' }">
{{item.feature}}
<u-icon custom-style='margin-left:10rpx' v-if="index>2"
@click="openPopup(item.function_description,item.feature)"
name="question-circle-fill" color="#999" size="30"></u-icon>
</view>
</u-td>
<u-td class="box_cus flex-2">
<view class="box_view">
<u-icon v-if="item.air=='10'" name="checkbox-mark" color="#594b40"
size="28"></u-icon>
<view v-else>
<u-icon v-if="item.air=='20'" name="close" color="#959595" size="28">
</u-icon>
<text :style="{ color: (index==0&&item.air=='air')?'#fff':'#594b40' }"
v-else>{{item.air}}</text>
</view>
</view>
</u-td>
<u-td class="box_cus flex-3">
<view class="box_view">
<u-icon v-if="item.pro=='10'" name="checkbox-mark" color="#b24341"
size="28"></u-icon>
<view v-else>
<u-icon v-if="item.pro=='20'" name="close" color="#959595" size="28">
</u-icon>
<text :style="{ color: (index==0&&item.pro=='pro')?'#fff':'#b24341' }"
v-else>{{item.pro}}</text>
</view>
</view>
</u-td>
<u-td class="box_cus flex-4">
<view class="box_view">
<u-icon v-if="item.H5=='10'" name="checkbox-mark" color="#5362d9" size="28">
</u-icon>
<view v-else>
<u-icon v-if="item.H5=='20'" name="close" color="#959595" size="28">
</u-icon>
<text :style="{ color: (index==0&&item.H5=='H5')?'#fff':'#5362d9' }"
v-else>{{item.H5}}</text>
</view>
</view>
</u-td>
</u-tr>
</u-td>
</u-tr>
</u-table>
</view>
</view>
<view class="payment-method">
<view class="title">选择支付方式</view>
<view v-for="(a,index) in paymentMethods" @click="tabItem1(index)"
class="pay-item dis-flex flex-x-between">
<view class="item-left dis-flex flex-y-center">
<view class="item-left_icon" :class="[a.method]">
<text class="iconfont" :class="[PayMethodIconEnum[a.method]]"></text>
</view>
<view class="item-left_text">
<text>{{ PayMethodEnum[a.method].name }}</text>
</view>
<view v-if="a.method === PayMethodEnum.BALANCE.value" class="user-balance">
<text>(可用￥{{ userInfo.balance }}元)</text>
</view>
</view>
<view class="item-right col-m" v-if="payIndex == index">
<text class="iconfont icon-check" style="color: red;"></text>
</view>
</view>
</view>
</view>
<view class="bottomBtn">
<button class="submitBtn" formType="submit" @click="submitPay">立即支付 ¥<text
style="font-size: 48rpx;">{{tabFavour[priceIndex].price}}</text>（开通您的{{tabbar[tabIndex]}}）</button>
</view>
<u-popup v-model="show" length="60%" mode='center' :mask='true' :closeable='true'>
<view class="content">
<view class="content-title">
{{feature_name}}
</view>
<view class="content-box">
{{content_description}}
</view>
</view>
</u-popup>
</view>
</template>
<script>
import * as api from '@/api/tutorial'
import {
Wechat
} from '@/core/payment'
import {
PayMethodEnum
} from '@/common/enum/payment'
// 支付方式对应的图标
const PayMethodIconEnum = {
[PayMethodEnum.WECHAT.value]: 'icon-wechat-pay',
[PayMethodEnum.ALIPAY.value]: 'icon-alipay',
[PayMethodEnum.BALANCE.value]: 'icon-balance-pay',
[PayMethodEnum.HUIFU.value]: 'icon-balance-pay'
}
// 支付方式的终端名称
const PayMethodClientNameEnum = {
[PayMethodEnum.WECHAT.value]: '微信',
[PayMethodEnum.ALIPAY.value]: '支付宝'
}
export default {
data() {
return {
background: {
background: 'none'
},
// 枚举类
PayMethodEnum,
PayMethodIconEnum,
PayMethodClientNameEnum,
paymentMethods: [],
isClick: true,
radius: '28rpx 0 0 0',
leftNum: 33.33333,
tabbar: ['零售商城', '批发商城'],
tabIndex: 0,
banIndex: 0,
priceIndex: 0,
payIndex: 0,
tabType: [],
tabFavour: [{
name: '限时享受额外权益',
price: 0,
year: 1
},
{
name: '限时享受额外权益',
price: 0,
year: 2
}
],
equityList: [],
userInfo: '',
retail: null,
show: false,
content_description: '',
feature_name: '',
retail:'',
wholesale:''
}
},
onLoad() {
this.retail = uni.getStorageSync('userInfo').retail
console.log(this.retail)
this.getRetailList()
this.getDescribe()
},
onShow() {
},
methods: {
openPopup(msg, name) {
this.feature_name = name
this.content_description = msg
if (msg) {
this.show = true
}
},
tabItem1(i) {
if (this.paymentMethods[i].method == 'huifu') {
this.$toast('抱歉，此支付方式暂未完善')
return
}
this.payIndex = i
},
onChage(index) {
this.radius = index == 0 ? '28rpx 0 0 0' : '0 28rpx 0 0';
this.leftNum = index == 0 ? 33.33333 : 66.66666;
this.tabIndex = index;
this.getRetailList()
},
onChageBan(index) {
this.banIndex = index
this.getRetailList()
},
onChagePrice(index) {
this.priceIndex = index
},
getBan() {
let that = this
that.tabFavour.forEach(item => {
if (item.year == 1) {
item.price = item.year * that.tabType[that.banIndex].retail_current_price
}
if (item.year == 2) {
item.price = Number((Number(item.year * (that.tabType[that.banIndex]
.retail_current_price)) - Number(that.tabType[that.banIndex]
.retail_discounts)).toFixed(2))
}
});
},
//微信支付
async toWechatPay() {
const that = this;
const {
status,
data
} = await api.submit({
method: 'wechat',
client: "MP-WEIXIN",
retail_price_id: that.tabType[that.banIndex].retail_price_id,
year: that.tabFavour[that.priceIndex].year
})
if (status == 200) {
Wechat.payment({
orderKey: data.payment.out_trade_no,
...data.payment
})
.then((result) => {
console.log(22, result)
uni.showToast({
title: "支付成功",
icon: 'success'
})
this.isClick = true;
setTimeout(() => {
uni.switchTab({
url: "/pages/user/index"
})
}, 1000)
})
.catch(err => {
uni.showToast({
title: "支付失败",
icon: 'none'
})
this.isClick = true;
})
}
},
//去支付 余额支付
async toPay() {
const that = this;
const {
status,
message
} = await api.submit({
method: 'balance',
client: "MP-WEIXIN",
retail_price_id: that.tabType[that.banIndex].retail_price_id,
year: that.tabFavour[that.priceIndex].year
})
if (status == 200) {
uni.showToast({
title: "支付成功"
})
this.isClick = true;
setTimeout(() => {
uni.switchTab({
url: "/pages/user/index"
})
}, 1000)
} else {
this.isClick = true;
uni.showToast({
icon: "none",
title: message
})
}
},
// 支付
async submitPay() {
let that = this;
if (that.isClick == false) {
return;
}
that.isClick = false;
if (that.paymentMethods[that.payIndex].method == "balance") {
if (Number(that.tabFavour[that.priceIndex].price) <= Number(that.userInfo.balance)) {
that.toPay()
} else {
that.isClick = true;
uni.showToast({
icon: "none",
title: "余额不足，请选择其他支付方式"
})
}
} else if (that.paymentMethods[that.payIndex].method == "wechat") {
that.toWechatPay();
}
},
// 会员权益
async getDescribe() {
let that = this;
let {
status,
message,
data
} = await api.describe({type:this.tabIndex==0?10:20});
if (status == 200) {
let list = Object.values(data.group)
let all = [{
name: '板块',
list: [{
feature: '功能',
air: 'air',
airIndex: 1,
pro: 'pro',
proIndex: 1,
H5: 'H5',
H5Index: 1,
function_description: '说明',
plate_id: 1
}]
}]
list = all.concat(list)
console.log(list)
this.equityList = list
} else {
that.$toast(message)
}
},
// 列表
async getRetailList() {
let that = this;
let pames = {
retail_type: this.tabIndex == 0 ? 10 : 20,
client: 'MP-WEIXIN',
}
let {
status,
message,
data
} = await api.retailList(pames);
if (status == 200) {
that.userInfo = data.list.personal;
data.list.list.forEach(item => {
item.jian=Number((Number(item.retail_original_price)-Number(item.retail_current_price)).toFixed(2))
})
that.tabType = data.list.list
that.paymentMethods = data.list.paymentMethods;
that.retail=data.list.retail
that.wholesale=data.list.wholesale
that.getBan()
} else {
that.$toast(message)
}
},
}
}
</script>
<style>
page {
background: #fff;
}
</style>
<style lang="scss" scoped>
::v-deep .u-empty {
padding: 100rpx 0;
}
page {
width: 100%;
}
.content {
padding: 0rpx 30rpx 40rpx 30rpx;
border-radius: 16rpx;
font-size: 30rpx;
color: #333;
.content-title {
font-size: 32rpx;
font-weight: 700;
height: 110rpx;
text-align: center;
line-height: 110rpx;
}
.content-box {
font-size: 28rpx;
line-height: 40rpx;
}
}
::v-deep .u-mode-center-box {
border-radius: 8rpx;
}
.warp {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
width: 100%;
position: relative;
background: black;
z-index: 999;
}
.park {
height: 100%;
width: 100%;
background: rgba(255, 255, 255, 1);
.park-top {
width: 100%;
height: 380rpx;
background: url(https://www.royaum.com.cn/static/user/gmallBg.png) center top no-repeat;
background-size: 100% 100%;
}
.box_1 {
flex-direction: row;
display: flex;
align-items: center;
margin: 40rpx auto 0 36rpx;
position: relative;
}
.image_2 {
width: 120rpx;
height: 120rpx;
border-radius: 50%;
}
.image_1 {
position: absolute;
width: 340rpx;
height: 316rpx;
bottom: -190rpx;
right: 35rpx;
z-index: 1;
transform: rotate(10deg)
}
.group_1 {
height: 96rpx;
display: flex;
flex-direction: column;
justify-content: space-between;
margin: 2rpx 0 0 30rpx;
button:after {
border: none !important;
}
}
.image-text_1 {
font-size: 28rpx;
font-size: 28rpx;
font-weight: 400;
letter-spacing: 0rpx;
line-height: 40rpx;
color: rgba(102, 102, 102, 1);
text-align: left;
}
.image-text_2 {
font-size: 40rpx;
font-weight: 500;
letter-spacing: 0rpx;
line-height: 56rpx;
color: rgba(51, 51, 51, 1);
text-align: left;
vertical-align: top;
}
.tab_pos {
position: relative;
width: 100%;
height: 126rpx;
}
.tab_bg {
position: absolute;
width: 100%;
height: 126rpx;
z-index: 9;
display: flex;
justify-content: center;
// border-radius: 28rpx 28rpx, 0rpx, 0rpx;
background: linear-gradient(180deg, rgba(253, 202, 197, 1) 0.42%, rgba(254, 231, 229, 1) 32.99%, rgba(255, 255, 255, 1) 100%);
}
.tab_a {
width: 50%;
height: 126rpx;
font-size: 36rpx;
font-weight: 500;
letter-spacing: 0rpx;
line-height: 126rpx;
color: rgba(184, 169, 169, 1);
text-align: left;
vertical-align: top;
text-align: center;
}
.tab_active {
width: 376rpx;
height: 126rpx;
background: linear-gradient(180deg, rgba(255, 245, 245, 1) 0%, rgba(255, 255, 255, 0) 100%);
border: 4rpx solid rgba(255, 255, 255, 1);
font-size: 36rpx;
font-weight: 500;
line-height: 126rpx;
color: rgba(51, 51, 51, 1);
text-align: center;
border-radius: 28rpx;
}
.tab-type {
display: flex;
// justify-content: space-between;
// justify-content: space-evenly;
overflow: hidden;
flex-wrap: wrap;
margin: 0 17rpx;
.tab-pro-active {
background: linear-gradient(180deg, rgba(255, 238, 237, 1) 0%, rgba(255, 202, 201, 1) 66.15%, rgba(255, 173, 173, 1) 100%) !important;
border: 4rpx solid rgba(243, 74, 64, 1) !important;
}
.tab-pro {
margin: 20rpx 13rpx 0 13rpx;
width: 214rpx;
height: 248rpx;
border-radius: 20rpx;
background: linear-gradient(180deg, rgba(255, 255, 255, 1) 40%, rgba(255, 217, 217, 0.01) 100%);
border: 4rpx solid rgba(255, 235, 235, 1);
overflow: hidden;
position: relative;
.tab-name {
width: 100%;
font-size: 30rpx;
font-weight: 500;
letter-spacing: 0rpx;
line-height: 42rpx;
color: rgba(51, 51, 51, 1);
margin-top: 35rpx;
text-align: center;
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
-webkit-line-clamp: 1;
white-space: normal
}
.tab-price {
text-align: center;
width: 100%;
font-size: 48rpx;
font-weight: 700;
line-height: 55rpx;
color: rgba(243, 74, 64, 1);
margin: 8rpx 0 0 0;
}
.tab-line {
width: 100%;
font-size: 28rpx;
font-weight: 400;
letter-spacing: 0rpx;
line-height: 40rpx;
text-decoration-line: line-through;
color: rgba(166, 166, 166, 1);
text-align: center;
}
.tab-quan {
border-radius: 50%;
width: 132rpx;
height: 132rpx;
transform: rotate(-44.85deg);
border: 40rpx solid rgba(243, 74, 64, 0.06);
position: absolute;
right: -50rpx;
bottom: -50rpx;
}
.tab-jian-active {
background: rgba(243, 74, 64, 1) !important;
}
.tab-jian {
position: absolute;
bottom: 0;
width: 100%;
height: 48rpx;
opacity: 1;
border-radius: 0rpx 0rpx, 20rpx, 20rpx;
background: rgba(255, 161, 162, 1);
line-height: 48rpx;
text-align: center;
opacity: 1;
font-size: 24rpx;
font-weight: 400;
color: rgba(255, 255, 255, 1);
}
}
}
.tab-box {
margin: 10rpx 30rpx 24rpx 30rpx;
overflow: hidden;
.tabFavour {
display: flex;
justify-content: space-between;
margin-top: 42rpx;
.favour {
width: 336rpx;
height: 144rpx;
border-radius: 20rpx;
background: linear-gradient(90deg, rgba(255, 255, 255, 0.01) 0%, rgba(255, 243, 242, 0.89) 100%);
border: 4rpx solid rgba(255, 235, 235, 1);
position: relative;
// .tab-quan {
// border-radius: 50%;
// width: 132rpx;
// height: 132rpx;
// transform: rotate(-44.85deg);
// border: 40rpx solid rgba(243, 74, 64, 0.06);
// position: absolute;
// right: -50rpx;
// bottom: -50rpx;
// overflow: hidden;
// }
.favour_active {
z-index: 99;
top: -20rpx;
left: 0;
line-height: 40rpx;
position: absolute;
padding: 0 18rpx;
height: 40rpx;
border-radius: 0rpx 24rpx 24rpx 24rpx;
background: linear-gradient(90deg, rgba(243, 74, 64, 1) 0%, rgba(255, 142, 89, 1) 100%);
font-size: 24rpx;
font-weight: 400;
letter-spacing: 0rpx;
color: rgba(255, 255, 255, 1);
}
.favour_infor {
margin: 35rpx 20rpx 0 20rpx;
display: flex;
justify-content: space-between;
.favour_year {
font-size: 32rpx;
font-weight: 700;
letter-spacing: 0rpx;
line-height: 45rpx;
color: rgba(51, 51, 51, 1);
}
.favour_tips {
font-size: 26rpx;
font-weight: 400;
letter-spacing: 0rpx;
line-height: 45rpx;
color: rgba(153, 153, 153, 1);
}
}
.favour_price {
font-size: 48rpx;
font-weight: 700;
letter-spacing: 0rpx;
line-height: 67rpx;
color: rgba(243, 74, 64, 1);
}
}
.favourActive {
background: linear-gradient(91.32deg, rgba(255, 248, 247, 0.56) 0%, rgba(255, 185, 181, 1) 100%) !important;
border: 4rpx solid rgba(243, 74, 64, 1) !important;
}
}
.tab-title {
overflow: hidden;
height: 100rpx;
display: flex;
align-items: center;
justify-content: center;
margin-top: 15rpx;
.name {
font-size: 32rpx;
font-weight: 700;
color: rgba(51, 51, 51, 1);
image {
width: 30rpx;
height: 30rpx;
margin: 0 10rpx;
}
}
}
.equity {
margin-bottom: 60rpx;
position: relative;
max-height: 1800rpx;
overflow: auto;
.table_box {
overflow: hidden;
border-radius: 20rpx;
}
::v-deep .u-table {
border: none !important;
}
::v-deep u-td,
u-th {
display: flex !important;
flex: auto !important
}
::v-deep .box_content .u-tr {
border: 1rpx solid #e4e7ed;
}
::v-deep .box_content .u-tr {
border-left: none;
border-right: none;
border-bottom: none;
}
::v-deep u-tr:nth-child(1) .box_content u-tr:nth-child(1) .flex-1 {
background-color: #e3e6f5;
color: #333 !important;
font-size: 34rpx;
font-weight: 700;
}
::v-deep u-tr:nth-child(1) .box_content u-tr:nth-child(1) .flex-2 {
background-color: #f6cdb1;
font-size: 34rpx;
font-weight: 700;
}
::v-deep u-tr:nth-child(1) .box_content u-tr:nth-child(1) .flex-3 {
background-color: #fe9a9a;
font-size: 34rpx;
font-weight: 700;
}
::v-deep u-tr:nth-child(1) .box_content u-tr:nth-child(1) .flex-4 {
background-color: #5a74e3;
font-size: 34rpx;
font-weight: 700;
}
::v-deep u-tr:nth-child(1) {
border-top: none;
}
.box_name {
width: 10%;
border-top: 1rpx solid #e4e7ed;
}
::v-deep .box_name {
background: #D6D6D6;
}
.box_content {
width: 80%;
}
.box_cus {
text-align: center;
padding: 10px 3px !important;
height: auto;
vertical-align: middle;
width: 25%;
// border-left: 1rpx solid #e4e7ed;
.box_view {
display: flex;
align-items: center;
height: 100%;
justify-content: center;
flex-grow: 1;
vertical-align: middle;
color: #333;
font-size: 28rpx;
image {
width: 30rpx;
height: 30rpx;
margin: 0 auto;
margin-left: calc(50% - 15rpx);
display: block;
vertical-align: middle;
}
}
.box_tips {
display: flex;
align-items: center;
justify-content: center;
}
}
.flex-1 {
width: 28% !important;
background-color: #F5F5F5;
}
.flex-2,
.flex-3,
.flex-4 {
width: 24% !important;
}
.flex-2 {
background-color: #fef4e8;
}
.flex-3 {
background-color: #feeaeb;
}
.flex-4 {
background-color: #eeedfd;
}
.box_cus:nth-child(1) {
border-left: none;
}
::v-deep .u-td {
border: none !important;
padding: 0 !important;
}
}
.advantage {
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
.advantage-tips {
font-size: 26rpx;
font-weight: 400;
letter-spacing: 0rpx;
line-height: 40rpx;
color: rgba(51, 51, 51, 1);
text-align: left;
}
}
}
}
.bottomBtn {
width: 100%;
position: fixed;
bottom: 0;
left: 0;
height: 160upx;
z-index: 88;
background: #fafafa;
}
.submitBtn {
height: 100rpx;
line-height: 88upx;
background: #FFAAA4;
background: #FE483B;
border-radius: 36px;
font-size: 30rpx;
font-weight: 700;
letter-spacing: 0rpx;
color: rgba(255, 255, 255, 1);
text-align: center;
margin: 30rpx 58rpx;
}
.payment-method {
width: 100%;
margin: 20rpx 0 180rpx 0;
padding: 0 40rpx;
background-color: #ffffff;
border-radius: 20rpx;
.title {
padding: 30rpx 0;
font-size: 30rpx;
}
.pay-item {
padding: 26rpx 0;
font-size: 28rpx;
border-bottom: 1rpx solid rgb(248, 248, 248);
&:last-child {
border-bottom: none;
}
.item-left_icon {
margin-right: 20rpx;
font-size: 44rpx;
&.wechat {
color: #00c800;
}
&.alipay {
color: #009fe8;
}
&.balance {
color: #ff9700;
}
&.huifu {
color: #009fe8;
}
}
.item-left_text {
font-size: 28rpx;
}
.item-right {
font-size: 32rpx;
}
.user-balance {
margin-left: 20rpx;
font-size: 26rpx;
}
}
}
</style>