mo-bai
4 years ago
11 changed files with 802 additions and 113 deletions
Unified View
Diff Options
-
94apis/commonApi.js
-
71common/css/reset.scss
-
65enums/index.js
-
8pages.json
-
343pages/mine/index.vue
-
312pages/vip-center/index.vue
-
BINstatic/imgs/vip-center/1.png
-
BINstatic/imgs/vip-center/2.png
-
BINstatic/imgs/vip-center/3.png
-
BINstatic/imgs/vip-center/4.png
-
22store/index.js
@ -0,0 +1,312 @@ |
|||||
|
<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: 2000, |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
back, |
||||
|
payForVip() { |
||||
|
openVip({ |
||||
|
enterpriseId: this.$store.state.companyInfo.id, |
||||
|
type: 1, // 年费 |
||||
|
}).then((res) => { |
||||
|
if (res) { |
||||
|
openVipPay({ |
||||
|
tradeOrderId: res.orderId, |
||||
|
channelId: res.channelId, |
||||
|
}).then((info) => { |
||||
|
if (info) { |
||||
|
console.log('info', info) |
||||
|
if (typeof WeixinJSBridge == 'undefined') { |
||||
|
uni.showToast({ |
||||
|
title: '请在微信内置浏览器中支付，或微信扫码进入本系统', |
||||
|
icon: 'error', |
||||
|
}) |
||||
|
} else { |
||||
|
WeixinJSBridge.invoke( |
||||
|
'getBrandWCPayRequest', |
||||
|
info.extra, |
||||
|
function (res) { |
||||
|
if (res.err_msg == 'get_brand_wcpay_request:ok') { |
||||
|
uni.showToast({ |
||||
|
title: '支付成功', |
||||
|
icon: 'success', |
||||
|
duration: 2000, |
||||
|
}) |
||||
|
setTimeout(() => { |
||||
|
go2('mine', {}, true) |
||||
|
}, 2000) |
||||
|
// 使用以上方式判断前端返回,微信团队郑重提示： |
||||
|
//res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。 |
||||
|
} else { |
||||
|
uni.showToast({ |
||||
|
title: '支付失败', |
||||
|
icon: 'error', |
||||
|
duration: 2000, |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
) |
||||
|
} |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
}, |
||||
|
} |
||||
|
</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> |
||||
| Before | After |
|---|---|
|
|
| Width: 120 | Height: 120 | Size: 14 KiB |
| Before | After |
|---|---|
|
|
| Width: 120 | Height: 120 | Size: 2.3 KiB |
| Before | After |
|---|---|
|
|
| Width: 104 | Height: 104 | Size: 2.3 KiB |
| Before | After |
|---|---|
|
|
| Width: 120 | Height: 120 | Size: 14 KiB |
Write
Preview
Loading…
Cancel
Save