mo-bai
4 years ago
7 changed files with 367 additions and 96 deletions
Unified View
Diff Options
-
BIN.DS_Store
-
50apis/commonApi.js
-
3enums/index.js
-
4env/index.js
-
8pages.json
-
104pages/mine/index.vue
-
294pages/vip-center/index.vue
@ -1,8 +1,8 @@ |
|||||
/** |
/** |
||||
* @description 唯一环境变量 |
* @description 唯一环境变量 |
||||
*/ |
*/ |
||||
// const env = 'test'
|
|
||||
|
const env = 'test' |
||||
// const env = 'dev'
|
// const env = 'dev'
|
||||
const env = 'production' |
|
||||
|
// const env = 'production'
|
||||
|
|
||||
export default env |
export default env |
||||
@ -0,0 +1,294 @@ |
|||||
|
<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="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/611dd17441a9be0011f45822/620ccb0962a7d90011fe5c8f/16456699126307827649.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="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/611dd17441a9be0011f45822/620ccb0962a7d90011fe5c8f/16456699126326656192.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="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/611dd17441a9be0011f45822/620ccb0962a7d90011fe5c8f/16456699126346194649.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="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/611dd17441a9be0011f45822/620ccb0962a7d90011fe5c8f/16456699133425037124.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> |
||||
Write
Preview
Loading…
Cancel
Save