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.
282 lines
8.1 KiB
282 lines
8.1 KiB
<template>
|
|
<view class="content">
|
|
<uni-nav-bar left-icon="back" @clickLeft="back" statusBar fixed title="会员中心"></uni-nav-bar>
|
|
<view class="flex-col group_4">
|
|
<view class="flex-col">
|
|
<view class="flex-col section_1">
|
|
<text class="text_4">超级VIP</text>
|
|
<view class="flex-col group_6">
|
|
<text class="text_5">开通立即尊享</text>
|
|
<text class="text_6">{{ money }} 元/年</text>
|
|
</view>
|
|
</view>
|
|
<view class="flex-col group_7">
|
|
<view class="flex-col">
|
|
<text class="text_7">会员权益</text>
|
|
<view class="flex-row equal-division">
|
|
<view class="equal-division-item flex-col">
|
|
<view class="top-image-wrapper flex-col items-center">
|
|
<image src="/static/imgs/vip-center/1.png" class="image_4" />
|
|
</view>
|
|
<text class="text_8">账期变现</text>
|
|
</view>
|
|
<view class="equal-division-item flex-col group_10">
|
|
<view class="top-image-wrapper flex-col items-center">
|
|
<image src="/static/imgs/vip-center/2.png" class="image_4" />
|
|
</view>
|
|
<text class="text_8">电子签约</text>
|
|
</view>
|
|
<view class="equal-division-item_1 flex-col">
|
|
<view class="flex-col items-center image-wrapper">
|
|
<image src="/static/imgs/vip-center/3.png" class="image_7" />
|
|
</view>
|
|
<text class="text_11">智能合同</text>
|
|
</view>
|
|
<view class="equal-division-item_1 flex-col">
|
|
<view class="top-image-wrapper flex-col items-center">
|
|
<image src="/static/imgs/vip-center/4.png" class="image_4" />
|
|
</view>
|
|
<text class="text_11">征信管理</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="flex-col group_13">
|
|
<text class="text_14">服务说明</text>
|
|
<text class="text_15">1.纸掌柜会员支付支持微信支付。</text>
|
|
<text class="text_16">2.支付成功后会员权益立即生效。</text>
|
|
<text class="text_17">3.会员权益最终解释权归千鸟互联电商科技有限公司所有。</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="flex-col section_2">
|
|
<view class="flex-col items-center button" @click="payForVip">
|
|
<text>立即支付</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
<script>
|
|
import { back } from '@/utils/hook.js'
|
|
import { openVip, openVipPay } from '@/apis/commonApi.js'
|
|
export default {
|
|
data() {
|
|
return {
|
|
money: 10000,
|
|
}
|
|
},
|
|
methods: {
|
|
back,
|
|
payForVip() {
|
|
openVip({
|
|
mallSupplierId: this.$store.state.supplierInfo.supplierId,
|
|
type: 1, // 年费
|
|
}).then((res) => {
|
|
if (res) {
|
|
openVipPay({
|
|
tradeOrderId: res.orderId,
|
|
channelId: res.channelId,
|
|
}).then((info) => {
|
|
if (info) {
|
|
console.log('info', info)
|
|
uni.requestPayment({
|
|
provider: 'wxpay',
|
|
orderInfo: info.extra,
|
|
success: (res) => {
|
|
uni.showToast({
|
|
title: '支付成功',
|
|
icon: 'none',
|
|
duration: 1500,
|
|
})
|
|
setTimeout(() => {
|
|
go2('mine', {}, true)
|
|
}, 1500)
|
|
},
|
|
fail: (err) => {
|
|
uni.showToast({
|
|
title: '支付失败',
|
|
icon: 'none',
|
|
duration: 1500,
|
|
})
|
|
},
|
|
})
|
|
}
|
|
})
|
|
}
|
|
})
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.content {
|
|
width: 750rpx;
|
|
}
|
|
.group_4 {
|
|
flex: 1 1 auto;
|
|
overflow-y: auto;
|
|
.section_2 {
|
|
margin-top: 329rpx;
|
|
padding: 28rpx 0 30rpx;
|
|
color: rgb(126, 86, 28);
|
|
font-size: 36rpx;
|
|
font-weight: 500;
|
|
line-height: 50rpx;
|
|
white-space: nowrap;
|
|
background-image: linear-gradient(180deg, rgb(43, 41, 44) 0%, rgb(43, 41, 44) 0%, rgb(60, 58, 52) 100%, rgb(60, 58, 52) 100%);
|
|
.button {
|
|
margin: 0 32rpx;
|
|
padding: 23rpx 0;
|
|
background-image: linear-gradient(90deg, rgb(255, 234, 208) 0%, rgb(255, 234, 208) 0%, rgb(255, 206, 144) 100%, rgb(255, 206, 144) 100%);
|
|
border-radius: 48rpx;
|
|
}
|
|
}
|
|
.section_1 {
|
|
padding: 86rpx 72rpx 63rpx;
|
|
background-image: url('https://project-user-resource-1256085488.cos.ap-guangzhou.myqcloud.com/611dd17441a9be0011f45822/620ccb0962a7d90011fe5c8f/16456699151285633679.png');
|
|
background-position: 0px 0px;
|
|
background-size: 100% 100%;
|
|
background-repeat: no-repeat;
|
|
.text_4 {
|
|
color: rgb(237, 221, 187);
|
|
font-size: 68rpx;
|
|
font-weight: 500;
|
|
line-height: 95rpx;
|
|
letter-spacing: 3rpx;
|
|
white-space: nowrap;
|
|
}
|
|
.group_6 {
|
|
margin-top: 110rpx;
|
|
.text_5 {
|
|
color: rgb(247, 251, 255);
|
|
font-size: 24rpx;
|
|
font-weight: 500;
|
|
line-height: 33rpx;
|
|
white-space: nowrap;
|
|
}
|
|
.text_6 {
|
|
margin-top: 9rpx;
|
|
color: rgb(247, 251, 255);
|
|
font-size: 60rpx;
|
|
font-weight: 500;
|
|
line-height: 84rpx;
|
|
white-space: nowrap;
|
|
}
|
|
}
|
|
}
|
|
.group_7 {
|
|
padding-top: 20rpx;
|
|
.group_13 {
|
|
margin-top: 65rpx;
|
|
padding: 0 32rpx;
|
|
.text_14 {
|
|
color: rgb(51, 51, 51);
|
|
font-size: 32rpx;
|
|
font-weight: 600;
|
|
line-height: 45rpx;
|
|
white-space: nowrap;
|
|
}
|
|
.text_15 {
|
|
margin-top: 25rpx;
|
|
color: rgb(136, 136, 136);
|
|
font-size: 26rpx;
|
|
font-weight: 500;
|
|
line-height: 37rpx;
|
|
letter-spacing: 4rpx;
|
|
white-space: nowrap;
|
|
}
|
|
.text_16 {
|
|
margin-top: 17rpx;
|
|
color: rgb(136, 136, 136);
|
|
font-size: 26rpx;
|
|
font-weight: 500;
|
|
line-height: 37rpx;
|
|
letter-spacing: 4rpx;
|
|
white-space: nowrap;
|
|
}
|
|
.text_17 {
|
|
margin-right: 25rpx;
|
|
margin-top: 17rpx;
|
|
color: rgb(136, 136, 136);
|
|
font-size: 26rpx;
|
|
font-weight: 500;
|
|
line-height: 37rpx;
|
|
letter-spacing: 4rpx;
|
|
text-align: left;
|
|
}
|
|
}
|
|
.text_7 {
|
|
margin-left: 32rpx;
|
|
color: rgb(51, 51, 51);
|
|
font-size: 40rpx;
|
|
font-weight: 500;
|
|
line-height: 56rpx;
|
|
white-space: nowrap;
|
|
}
|
|
.equal-division {
|
|
margin-top: 32rpx;
|
|
color: rgb(85, 85, 85);
|
|
font-size: 26rpx;
|
|
font-weight: 500;
|
|
line-height: 37rpx;
|
|
letter-spacing: 4rpx;
|
|
white-space: nowrap;
|
|
.equal-division-item {
|
|
flex: 1 1 168rpx;
|
|
padding-left: 28rpx;
|
|
padding-right: 20rpx;
|
|
.text_8 {
|
|
margin-top: 8rpx;
|
|
}
|
|
}
|
|
.group_10 {
|
|
margin-left: 26rpx;
|
|
}
|
|
.equal-division-item_1 {
|
|
margin-left: 26rpx;
|
|
flex: 1 1 168rpx;
|
|
padding-left: 27rpx;
|
|
padding-right: 21rpx;
|
|
.image-wrapper {
|
|
margin: 0 4rpx;
|
|
padding: 30rpx 0;
|
|
background-image: linear-gradient(
|
|
90deg,
|
|
rgba(255, 224, 192, 0.6) 0%,
|
|
rgba(255, 224, 192, 0.6) 0%,
|
|
rgba(243, 193, 130, 0.6) 100%,
|
|
rgba(243, 193, 130, 0.6) 100%
|
|
);
|
|
box-shadow: 0px 2rpx 4rpx 0px rgba(0, 0, 0, 0.1);
|
|
border-radius: 50%;
|
|
.image_7 {
|
|
width: 52rpx;
|
|
height: 52rpx;
|
|
}
|
|
}
|
|
.text_11 {
|
|
margin-top: 8rpx;
|
|
}
|
|
}
|
|
.top-image-wrapper {
|
|
margin: 0 4rpx;
|
|
padding: 26rpx 0;
|
|
background-image: linear-gradient(
|
|
90deg,
|
|
rgba(255, 224, 192, 0.6) 0%,
|
|
rgba(255, 224, 192, 0.6) 0%,
|
|
rgba(243, 193, 130, 0.6) 100%,
|
|
rgba(243, 193, 130, 0.6) 100%
|
|
);
|
|
box-shadow: 0px 2rpx 4rpx 0px rgba(0, 0, 0, 0.1);
|
|
border-radius: 50%;
|
|
.image_4 {
|
|
width: 60rpx;
|
|
height: 60rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|