You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1312 lines
30 KiB
1312 lines
30 KiB
<template>
|
|
<view class="park">
|
|
<view class="park-top">
|
|
<view class="park-navbar">
|
|
<!-- :is-fixed='false' -->
|
|
<view class="navbarHeight">
|
|
<!-- #ifndef H5 -->
|
|
<u-navbar title="开通商城" :border-bottom="false" :background="scrollTop?background:backgroundNone">
|
|
</u-navbar>
|
|
<!-- #endif -->
|
|
</view>
|
|
<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>
|
|
<u-sticky :offset-top="heightTop">
|
|
<view class="tab_fix" :style="{ 'border-radius': radius}">
|
|
<view class="tab_pos">
|
|
<view class="tab_bg">
|
|
<view :class="[tabIndex==index ? 'tab_active' : 'tab_a']" v-for="(item,index) in tabbar"
|
|
@click="onChage(index)" :key="index">
|
|
{{item}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</u-sticky>
|
|
<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]}}的优势<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" style="margin-top: 0;">
|
|
<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" :key="ind">
|
|
<u-td class="box_name">{{a.name}}</u-td>
|
|
<u-td class='box_content'>
|
|
<u-tr v-for="(item,index) in a.list" :key="index">
|
|
<u-td class="box_cus flex-1">
|
|
<view class="box_tips" :style="{ color: index==0?'#333':'#594b40' }">
|
|
{{item.feature}}
|
|
<u-icon v-if="item.function_description"
|
|
@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" :key="index" @click="tabItem1(index)"
|
|
class="pay-item dis-flex flex-x-between">
|
|
<view class="item-left dis-flex flex-y-center">
|
|
<view v-if="a.method!=='huifu'" class="item-left_icon" :class="[a.method]">
|
|
<text class="iconfont" :class="[PayMethodIconEnum[a.method]]"></text>
|
|
</view>
|
|
<view v-else class="huifu-box">
|
|
<image :src="`${$picUrl}/static/yinlian.png`" mode="heightFix" class="huifu"></image>
|
|
</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 class="paytext" @click="goRules">
|
|
<view class="">
|
|
本产品为软件服务产品，购买后不支持退款
|
|
</view>
|
|
<view class="">
|
|
开通即表示接受<text style="color: #999;">《软件付费服务协议》</text>
|
|
</view>
|
|
</view>
|
|
</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() {
|
|
let img = 'https://www.royaum.com.cn/static/user/gmallBg.png'
|
|
return {
|
|
background: {
|
|
// background: 'url(' + img + ') center top no-repeat',
|
|
// backgroundSize: '100%',
|
|
background: '#fdcac5',
|
|
},
|
|
backgroundNone: {
|
|
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: '',
|
|
scrollTop: 0,
|
|
// #ifdef H5
|
|
heightTop: 0,
|
|
// #endif
|
|
// #ifndef H5
|
|
heightTop:136,
|
|
// #endif
|
|
}
|
|
},
|
|
onLoad() {
|
|
|
|
this.retail = uni.getStorageSync('userInfo').retail
|
|
this.getRetailList()
|
|
this.getDescribe()
|
|
uni.$on('appShow', this.solveShowMsg);
|
|
},
|
|
onUnload() {
|
|
uni.$off('appShow', this.solveShowMsg);
|
|
},
|
|
onShow() {
|
|
let that = this
|
|
that.checkIfElementIsAtTop()
|
|
},
|
|
onPageScroll(e) {
|
|
this.scrollTop = e.scrollTop > 120 ? true : false
|
|
if (this.scrollTop) {
|
|
this.radius = '0rpx';
|
|
} else {
|
|
this.radius = this.tabIndex == 0 ? '28rpx 0 0 0' : '0 28rpx 0 0';
|
|
}
|
|
},
|
|
methods: {
|
|
pxToRpx(px) {
|
|
const screenWidth = uni.getSystemInfoSync().screenWidth //窗口宽度
|
|
let rpx = (750 * Number.parseInt(px)) / screenWidth //转换单位为rpx
|
|
return Number(rpx)
|
|
},
|
|
checkIfElementIsAtTop() {
|
|
const query = uni.createSelectorQuery().in(this);
|
|
query.select('.navbarHeight ').boundingClientRect(data => {
|
|
if (data) {
|
|
// #ifndef H5
|
|
this.heightTop=this.pxToRpx(data.height)
|
|
// #endif
|
|
}
|
|
}).exec();
|
|
},
|
|
goRules() {
|
|
uni.navigateTo({
|
|
url: '/pages/gamll/rules'
|
|
})
|
|
},
|
|
openPopup(msg, name) {
|
|
this.feature_name = name
|
|
this.content_description = msg
|
|
if (msg) {
|
|
this.show = true
|
|
}
|
|
},
|
|
solveShowMsg(info) {
|
|
console.log(info);
|
|
if (this.miniPayRequest && Object.keys(this.miniPayRequest).length > 0 && info.appId === this
|
|
.miniPayRequest.miniuser) {
|
|
this.onTradeQuery(this.miniPayRequest.out_trade_no, this.paymentMethods[this.payIndex].method);
|
|
}
|
|
},
|
|
// 已完成支付按钮事件: 请求后端查单
|
|
onTradeQuery(outTradeNo, method) {
|
|
const app = this
|
|
// 交易查询
|
|
// 查询第三方支付订单是否付款成功
|
|
api.tradeQuery({
|
|
outTradeNo,
|
|
method,
|
|
client: app.platform
|
|
})
|
|
.then(result => {
|
|
if (result.data.isPay) {
|
|
uni.showToast({
|
|
title: result.message || "支付成功",
|
|
icon: 'success'
|
|
})
|
|
|
|
setTimeout(() => {
|
|
uni.switchTab({
|
|
url: "/pages/user/index"
|
|
})
|
|
}, 1000)
|
|
} else {
|
|
uni.showToast({
|
|
title: result.message || "支付失败",
|
|
icon: 'none'
|
|
})
|
|
}
|
|
})
|
|
.finally(() => app.showConfirmModal = false)
|
|
},
|
|
tabItem1(i) {
|
|
// if (this.paymentMethods[i].method == 'huifu') {
|
|
// this.$toast('抱歉，此支付方式暂未完善')
|
|
// return
|
|
// }
|
|
this.payIndex = i
|
|
if (this.paymentMethods[i].method == "huifu") {
|
|
this.huifuPay();
|
|
}
|
|
},
|
|
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()
|
|
this.getDescribe()
|
|
},
|
|
onChageBan(index) {
|
|
this.banIndex = index
|
|
this.getRetailList()
|
|
},
|
|
onChagePrice(index) {
|
|
this.priceIndex = index;
|
|
if (this.paymentMethods[this.payIndex].method == "huifu") {
|
|
this.huifuPay();
|
|
}
|
|
},
|
|
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))
|
|
}
|
|
});
|
|
},
|
|
// 设置默认的支付方式
|
|
setDefaultPayType() {
|
|
const app = this
|
|
const defaultIndex = app.paymentMethods.findIndex(item => item.is_default == true)
|
|
defaultIndex > -1 && app.tabItem1(defaultIndex);
|
|
},
|
|
huifuPay() {
|
|
const that = this
|
|
let params = {
|
|
retail_price_id: that.tabType[that.banIndex].retail_price_id,
|
|
year: that.tabFavour[that.priceIndex].year,
|
|
method: 'huifu',
|
|
client: 'MP-WEIXIN'
|
|
}
|
|
api.submit(params)
|
|
.then(result => {
|
|
console.log(result);
|
|
const {
|
|
miniPayRequest,
|
|
out_trade_no
|
|
} = result.data.payment;
|
|
that.miniPayRequest = miniPayRequest;
|
|
that.miniPayRequest.out_trade_no = out_trade_no;
|
|
})
|
|
.finally(() => that.isLoading = false)
|
|
},
|
|
//微信支付
|
|
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();
|
|
} else if (that.paymentMethods[that.payIndex].method == "huifu") {
|
|
that.isClick = true;
|
|
if (!this.miniPayRequest || Object.keys(this.miniPayRequest).length === 0) {
|
|
this.$toast(`暂无${this.PayMethodEnum[this.payType].name}支付信息`);
|
|
return
|
|
}
|
|
let appPayRequest = '';
|
|
appPayRequest = encodeURIComponent(JSON.stringify({
|
|
sign: this.miniPayRequest.sign,
|
|
prepayid: this.miniPayRequest.prepayid,
|
|
}));
|
|
uni.openEmbeddedMiniProgram({
|
|
appId: this.miniPayRequest.miniuser,
|
|
path: `${this.miniPayRequest.minipath}?appPayRequest=${appPayRequest}`
|
|
});
|
|
}
|
|
},
|
|
// 会员权益
|
|
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)
|
|
}
|
|
},
|
|
removeEmptyLines(htmlContent) {
|
|
// 使用正则表达式匹配连续的空白字符（包括空格、制表符、换页符等）
|
|
// 匹配两个换行符之间的任何内容，但不包括这两个换行符
|
|
const regex = />\s*\n\s*</g;
|
|
// 替换掉所有匹配到的内容为一个空格，这样就去除了空行
|
|
const newContent = htmlContent.replace(regex, ' > <');
|
|
return newContent;
|
|
},
|
|
// 列表
|
|
async getRetailList() {
|
|
let that = this;
|
|
let pames = {
|
|
retail_type: this.tabIndex == 0 ? 10 : 20,
|
|
// #ifdef H5
|
|
client: 'H5'
|
|
// #endif
|
|
// #ifndef H5
|
|
client: 'MP-WEIXIN'
|
|
// #endif
|
|
}
|
|
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 = this.removeEmptyLines(data.list.retail)
|
|
that.wholesale = this.removeEmptyLines(data.list.wholesale)
|
|
that.getBan()
|
|
this.setDefaultPayType();
|
|
} 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_fix {
|
|
overflow: hidden;
|
|
height: 126rpx;
|
|
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_pos {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 126rpx;
|
|
|
|
}
|
|
|
|
.tab_posxi {
|
|
// background: #fdcac5;
|
|
width: 100%;
|
|
height: 120rpx;
|
|
}
|
|
|
|
.tab_bg {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 126rpx;
|
|
z-index: 9;
|
|
display: flex;
|
|
justify-content: center;
|
|
// border-radius: 28rpx 28rpx, 0rpx, 0rpx;
|
|
|
|
}
|
|
|
|
.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 14rpx;
|
|
|
|
.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;
|
|
|
|
.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 .u-td {
|
|
// #ifndef H5
|
|
border: none !important;
|
|
// #endif
|
|
padding: 0 !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;
|
|
}
|
|
|
|
// #ifdef H5
|
|
::v-deep .u-tr:nth-child(1) .box_content .u-tr:nth-child(1) .flex-1 {
|
|
background-color: #e3e6f5 !important;
|
|
color: #333 !important;
|
|
font-size: 34rpx !important;
|
|
font-weight: 700 !important;
|
|
}
|
|
|
|
::v-deep .u-tr:nth-child(1) .box_content .u-tr:nth-child(1) .flex-2 {
|
|
background-color: #f6cdb1 !important;
|
|
font-size: 34rpx !important;
|
|
font-weight: 700 !important;
|
|
}
|
|
|
|
::v-deep .u-tr:nth-child(1) .box_content .u-tr:nth-child(1) .flex-3 {
|
|
background-color: #fe9a9a !important;
|
|
font-size: 34rpx !important;
|
|
font-weight: 700 !important;
|
|
}
|
|
::v-deep .u-tr:nth-child(1) .box_content .u-tr:nth-child(1) .flex-4 {
|
|
background-color: #5a74e3 !important;
|
|
font-size: 34rpx !important;
|
|
font-weight: 700 !important;
|
|
}
|
|
|
|
::v-deep .u-tr:nth-child(1) {
|
|
border-top: none;
|
|
}
|
|
// #endif
|
|
|
|
// #ifndef H5
|
|
::v-deep u-tr:nth-child(1) .box_content u-tr:nth-child(1) .flex-1 {
|
|
background-color: #e3e6f5 !important;
|
|
color: #333 !important;
|
|
font-size: 34rpx !important;
|
|
font-weight: 700 !important;
|
|
}
|
|
|
|
::v-deep u-tr:nth-child(1) .box_content u-tr:nth-child(1) .flex-2 {
|
|
background-color: #f6cdb1 !important;
|
|
font-size: 34rpx !important;
|
|
font-weight: 700 !important;
|
|
}
|
|
|
|
::v-deep u-tr:nth-child(1) .box_content u-tr:nth-child(1) .flex-3 {
|
|
background-color: #fe9a9a !important;
|
|
font-size: 34rpx !important;
|
|
font-weight: 700 !important;
|
|
}
|
|
::v-deep u-tr:nth-child(1) .box_content u-tr:nth-child(1) .flex-4 {
|
|
background-color: #5a74e3 !important;
|
|
font-size: 34rpx !important;
|
|
font-weight: 700 !important;
|
|
}
|
|
|
|
::v-deep u-tr:nth-child(1) {
|
|
border-top: none;
|
|
}
|
|
// #endif
|
|
|
|
::v-deep .box_name {
|
|
// #ifdef H5
|
|
flex: 0 0 20%;
|
|
height: auto;
|
|
// #endif
|
|
// #ifndef H5
|
|
width: 10%;
|
|
// #endif
|
|
border-top: 1rpx solid #e4e7ed;
|
|
}
|
|
::v-deep .u-td {
|
|
line-height: 2;
|
|
}
|
|
|
|
::v-deep .box_name {
|
|
background: #D6D6D6;
|
|
}
|
|
|
|
::v-deep .box_content {
|
|
// #ifdef H5
|
|
flex: 0 0 80%;
|
|
// #endif
|
|
// #ifndef H5
|
|
width: 80%;
|
|
// #endif
|
|
}
|
|
|
|
::v-deep .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;
|
|
}
|
|
}
|
|
|
|
::v-deep .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;
|
|
}
|
|
}
|
|
|
|
.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;
|
|
|
|
rich-text {
|
|
text-align: left;
|
|
line-height: 50rpx !important;
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.bottomBtn {
|
|
width: 100%;
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
height: 180upx;
|
|
z-index: 88;
|
|
background: #fff;
|
|
|
|
.paytext {
|
|
line-height: 24rpx;
|
|
font-size: 20rpx;
|
|
color: #333;
|
|
margin: 0 160rpx;
|
|
text-align: center;
|
|
}
|
|
|
|
}
|
|
|
|
.submitBtn {
|
|
height: 85rpx;
|
|
line-height: 85upx;
|
|
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: 20rpx 58rpx 16rpx 58rpx;
|
|
}
|
|
|
|
.payment-method {
|
|
width: 100%;
|
|
margin: 20rpx 0 220rpx 0;
|
|
padding: 0 40rpx 0 20rpx;
|
|
background-color: #ffffff;
|
|
border-radius: 20rpx;
|
|
|
|
.title {
|
|
padding: 30rpx 0 30rpx 20rpx;
|
|
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 {
|
|
width: 100rpx;
|
|
text-align: center;
|
|
font-size: 60rpx;
|
|
|
|
&.wechat {
|
|
color: #00c800;
|
|
}
|
|
|
|
&.alipay {
|
|
color: #009fe8;
|
|
}
|
|
|
|
&.balance {
|
|
color: #ff9700;
|
|
}
|
|
|
|
&.huifu {
|
|
color: #009fe8;
|
|
}
|
|
}
|
|
|
|
.huifu-box {
|
|
width: 100rpx;
|
|
display: flex;
|
|
justify-content: center;
|
|
|
|
.huifu {
|
|
height: 44rpx;
|
|
}
|
|
}
|
|
|
|
.item-left_text {
|
|
font-size: 28rpx;
|
|
}
|
|
|
|
.item-right {
|
|
font-size: 32rpx;
|
|
}
|
|
|
|
.user-balance {
|
|
margin-left: 20rpx;
|
|
font-size: 26rpx;
|
|
}
|
|
}
|
|
|
|
}
|
|
</style>
|
|
|