mo-bai
4 years ago
7 changed files with 367 additions and 96 deletions
Split 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 唯一环境变量 |
|||
*/ |
|||
// const env = 'test'
|
|||
const env = 'test' |
|||
// const env = 'dev'
|
|||
const env = 'production' |
|||
// const env = 'production'
|
|||
|
|||
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