|
|
|
|
<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-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>
|
|
|
|
|
</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">
|
|
|
|
|
1、持有本卡用户可享受先洗衣，后付费服务<br />2、享受全国服务商家门店9折洗衣服务<br />3、本卡仅限绑定手机号本人使用<br />4、本卡一经出售，恕不退换！。<br />5、本套餐不自动续订，过期用户请再次购买会员
|
|
|
|
|
</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: 15px;">
|
|
|
|
|
<view class="equity-active-top"
|
|
|
|
|
:style="{ 'left': leftNum + '%','height': ((equityList.length*35)+20) + 'px' }">
|
|
|
|
|
<view class="equity-active-th" v-for="(item,index) in equityList"
|
|
|
|
|
:class="index==0?'equit-tips-title':''">
|
|
|
|
|
<text v-if="index==0">{{index==0?item.p_gmall:item.l_gmall}}</text>
|
|
|
|
|
<text v-else>{{tabIndex==0?(item.retail==10?'√':'-'):(item.wholesale==10?'√':'-')}}</text>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="equityList" v-for="(item,index) in equityList">
|
|
|
|
|
<view class="equit-tips" :class="index==0?'equit-tips-title':''">
|
|
|
|
|
{{index==0?item.name:item.function_name}}
|
|
|
|
|
</view>
|
|
|
|
|
<view class="equit-tips" :class="index==0?'equit-tips-title':''">
|
|
|
|
|
{{index==0?item.p_gmall:(item.retail==10?'√':'-')}}
|
|
|
|
|
</view>
|
|
|
|
|
<view class="equit-tips" :class="index==0?'equit-tips-title':''">
|
|
|
|
|
{{index==0?item.l_gmall:(item.wholesale==10?'√':'-')}}
|
|
|
|
|
</view>
|
|
|
|
|
</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>
|
|
|
|
|
</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
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
onLoad() {
|
|
|
|
|
this.retail = uni.getStorageSync('userInfo').retail
|
|
|
|
|
console.log(this.retail)
|
|
|
|
|
this.getRetailList()
|
|
|
|
|
this.getDescribe()
|
|
|
|
|
},
|
|
|
|
|
onShow() {
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
tabItem1(i) {
|
|
|
|
|
if (i == 1) {
|
|
|
|
|
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();
|
|
|
|
|
if (status == 200) {
|
|
|
|
|
let all = {
|
|
|
|
|
name: '可享权益',
|
|
|
|
|
p_gmall: '批发商城',
|
|
|
|
|
l_gmall: '零售商城'
|
|
|
|
|
}
|
|
|
|
|
data.list.unshift(all)
|
|
|
|
|
that.equityList = data.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;
|
|
|
|
|
that.tabType = data.list.list
|
|
|
|
|
that.paymentMethods = data.list.paymentMethods
|
|
|
|
|
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%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.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 {
|
|
|
|
|
border: 4rpx solid rgba(251, 197, 198, 1) !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tab-pro {
|
|
|
|
|
margin: 20rpx 13rpx 0 13rpx;
|
|
|
|
|
width: 214rpx;
|
|
|
|
|
height: 248rpx;
|
|
|
|
|
border-radius: 48rpx;
|
|
|
|
|
background-color: rgba(255, 255, 255, 1);
|
|
|
|
|
background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(255, 217, 217, 0.01) 100%);
|
|
|
|
|
border: 4rpx solid #D6D6D6;
|
|
|
|
|
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: 40rpx;
|
|
|
|
|
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: 68rpx;
|
|
|
|
|
color: rgba(243, 74, 64, 1);
|
|
|
|
|
margin: 8rpx 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-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: rgba(243, 74, 64, 0.06);
|
|
|
|
|
border: 2rpx solid #D6D6D6;
|
|
|
|
|
position: relative;
|
|
|
|
|
|
|
|
|
|
.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 {
|
|
|
|
|
border: 2rpx 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;
|
|
|
|
|
|
|
|
|
|
.equityList {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 35px;
|
|
|
|
|
line-height: 35px;
|
|
|
|
|
background-color: #fff;
|
|
|
|
|
display: flex;
|
|
|
|
|
// flex-direction: column;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
font-size: 26rpx;
|
|
|
|
|
|
|
|
|
|
.equit-tips {
|
|
|
|
|
width: 33.33333%;
|
|
|
|
|
text-align: center;
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
color: rgba(51, 51, 51, 1);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.equit-tips-title {
|
|
|
|
|
font-size: 28rpx;
|
|
|
|
|
font-weight: 700;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.equity-active-top {
|
|
|
|
|
opacity: 1;
|
|
|
|
|
/* 这里的0.5表示50%透明度 */
|
|
|
|
|
width: 33.33333%;
|
|
|
|
|
position: absolute;
|
|
|
|
|
height: 100%;
|
|
|
|
|
padding: 10px 0;
|
|
|
|
|
top: -10px;
|
|
|
|
|
left: 33.33333%;
|
|
|
|
|
z-index: 1;
|
|
|
|
|
border-radius: 8rpx;
|
|
|
|
|
background: linear-gradient(180deg, rgba(255, 227, 209, 1) 0%, rgba(255, 193, 179, 1) 100%);
|
|
|
|
|
|
|
|
|
|
.equit-tips-title {
|
|
|
|
|
font-size: 32rpx !important;
|
|
|
|
|
font-weight: 700 !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.equity-active-th {
|
|
|
|
|
width: 100%;
|
|
|
|
|
text-align: center;
|
|
|
|
|
font-size: 26rpx;
|
|
|
|
|
font-weight: 500;
|
|
|
|
|
line-height: 35px;
|
|
|
|
|
color: rgba(125, 44, 26, 1);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.equityList:nth-child(even) {
|
|
|
|
|
background: rgba(246, 246, 246, 1);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.equityList:nth-child(1) {
|
|
|
|
|
font-size: 28rpx !important;
|
|
|
|
|
font-weight: 700 !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.equityList:nth-child(2) {
|
|
|
|
|
border-top: 1rpx solid rgba(229, 229, 229, 1);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.equityList:last-child {
|
|
|
|
|
border-bottom: 1rpx solid rgba(229, 229, 229, 1);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.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>
|
