TmOct5/barter-app
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

更新优惠券领取

Browse Source
This commit is contained in:
zhangmanman
2021-09-18 14:03:01 +08:00
parent bcbb98ec4a
commit 5464ff258a
31 changed files with 24582 additions and 22763 deletions
Download Patch File Download Diff File Expand all files Collapse all files

480
pages/vip/index.vue
View File

@@ -1,30 +1,108 @@
<template>
<!-- v-if="!loding" -->
<view class="content">
<!-- <swiper class="vip-container" previous-margin="45rpx" next-margin="45rpx" circular @change="swiperChange">
<swiper-item class="vip-item">
<view>
VIP企业会员
<swiper class="vip-container" previous-margin="45rpx" next-margin="45rpx" circular @change="swiperChange">
<swiper-item class="swiper-item" v-for="(item, index) in identities" :key="index">
<view class="vip-item" :class="tabsIndex == index ? 'color-item-img' : ''">
<view class="vip-top">
<view class="vip-name">
<image class="vip-name-icon" src="../../static/icons/vip_icon.png" mode="aspectFill"></image>
{{item.name}}
</view>
<view class="vip-price">
{{identities[tabsIndex].price}}/年
</view>
</view>
<view class="vip-time">
{{identityTime}}
</view>
</view>
</swiper-item>
<swiper-item class="vip-item">
<view>
普通会员
</view>
</swiper-item>
<swiper-item class="vip-item">
<view>
超级会员
</view>
</swiper-item>
</swiper> -->
</swiper>
<!-- 轮播点 -->
<view class="vip-spot">
<view class="vip-spot-label" :class="tabsIndex == index ? 'vip-spot-color' : ''" v-for="(item, index) in identities" :key="index"></view>
</view>
<!-- 选择开通年限 -->
<view class="vip-years">
<view class="vip-years-name">
<image class="vip-years-icon" src="../../static/icons/vip_yearsIcon.png" mode="aspectFill"></image>
选择开通年限
</view>
<view class="vip-years-tool">
<view class="vip-years-btn" @click="yearsBtn('remove')">-</view>
<view class="vip-years-input">{{sumNumber}}</view>
<view class="vip-years-btn" @click="yearsBtn('plus')">+</view>
</view>
</view>
<!-- 会员特权 -->
<view class="privilege">
<image class="privilege-img" src="../../static/icons/vip_privilege_tittle.png" mode="heightFix"></image>
<view class="privilege-list">
<view class="privilege-label" v-for="(item, index) in rights" :key="index">
<image class="privilege-label-tips" src="../../static/icons/vip_privilege_tips.png" mode="heightFix"></image>
<view class="privilege-label-text">
{{item.name}}
</view>
</view>
</view>
</view>
<!-- 支付方式 -->
<view class="privilege payWay">
<image class="privilege-img" src="../../static/icons/vip_pay_title.png" mode="heightFix"></image>
<view class="payWay-way">
<radio-group @change="radioChange">
<view class="payWay-way-label">
<view class="payWay-way-name">
<image class="payWay-way-img" src="../../static/icons/payWay_icon_00.png"></image>
<text>微信支付</text>
</view>
<radio class="radio" value="weChat" checked style="transform: scale(.8);" color="#ff2828"></radio>
</view>
<view class="payWay-way-label">
<view class="payWay-way-name">
<image class="payWay-way-img" src="../../static/icons/payWay_icon_01.png"></image>
<text>余额支付</text>
</view>
<radio class="radio" value="balance" style="transform: scale(.8);" color="#9b9b9b"></radio>
</view>
</radio-group>
</view>
</view>
<!-- 用户协议 -->
<view class="agree">
<view class="agree-tips" @click="$Router.push({name: 'vipAgree'})">
请仔细阅读并确认服务协议
</view>
</view>
<view class="agree-btn" @click="agreeChange">
<radio :checked="selected" style="transform: scale(.7);" color="#ff2828"></radio>会员服务协议
</view>
<!-- 开通按钮 -->
<view class="footer">
<button class="footer-btn" type="default" @click="openOrder" :disabled="payChecked">
<view class="footer-btn-num">
合计：{{total}}
</view>
<view class="footer-btn-pay">
立即支付
</view>
</button>
</view>
<!-- 会员类型 -->
<view class="tabs">
<!-- <view class="tabs">
<view class="item" :class="{'show': index === tabsIndex}" v-for="(item, index) in identities" :key="index" @click="onTabs(index)">{{item.name}}</view>
</view>
</view> -->
<!-- 会员信息 -->
<view class="cards">
<!-- <view class="cards">
<view class="card">
<view class="card-content">
<image class="cover" src="@/static/dev/good_cover_01.png" mode="aspectFill"></image>
@@ -35,9 +113,9 @@
</view>
<view class="cards-back"></view>
<image class="cards-angle" src="@/static/imgs/vip-angle-back.png" mode="widthFix"></image>
</view>
</view> -->
<!-- 会员权限 -->
<view class="privilege">
<!-- <view class="privilege">
<view class="title">开通会员享特权</view>
<view class="privilege-box">
<view class="item" v-for="(item, index) in rights" :key="index" @click="showRemark(item.name, item.remark)">
@@ -45,23 +123,23 @@
<view class="text">{{item.name}}</view>
</view>
</view>
</view>
</view> -->
<!-- 会员 -->
<view class="footer">
<!-- <view class="footer">
<button class="footer-btn" type="default" @click="openOrder">￥{{identities[tabsIndex].price}}/年&nbsp;开通</button>
</view>
</view> -->
<!-- 会员服务信息 -->
<view class="notice">
<!-- <view class="notice">
<view class="title">开通须知</view>
<view class="item">
<text>{{description}}</text>
</view>
</view>
</view> -->
</view>
</template>
<script>
import { identities, vipOrder, vipWechatPay } from '@/apis/interfaces/vip'
import { identities, vipOrder, vipWechatPay, vipCont } from '@/apis/interfaces/vip'
export default {
data() {
return {
@@ -70,43 +148,63 @@
user : {},
identities : [],
rights : [],
description : ''
description : '',
identityTime: '', // 到期时间
valuePay : 'weChat', // 支付方式
sumNumber : 1, // 开通年限
total : '', // 开通年限总资金额
selected : false, // 用户协议
payChecked : false // 支付选择
}
},
created() {
// 获取当前用户信息
identities().then(res => {
this.loding = false
this.user = res.user
this.description= res.description
this.identities = res.identities
this.rights = res.identities[0].rights
this.total = res.identities[0].price
}).catch(err =>{
uni.showToast({
title: err.message,
icon : 'none'
})
})
// 获取支付总金额 默认传VIP会员id=2
this.totalData(2);
},
methods: {
// 切换开通身份
onTabs(index){
if(this.tabsIndex === index) return
this.tabsIndex = index
this.rights = this.identities[index].rights
},
// 会员权益介绍
showRemark(title, text){
uni.showModal({
title : title + '说明',
content : text,
showCancel : false
})
},
// onTabs(index){
// if(this.tabsIndex === index) return
// this.tabsIndex = index
// this.rights = this.identities[index].rights
// },
// 切换开通身份
swiperChange(e) {
this.tabsIndex = e.detail.current
this.total = this.identities[e.detail.current].price
this.sumNumber = 1
this.totalData(this.identities[e.detail.current].identity_id);
},
// 开通会员
openOrder(){
if(this.selected == false) {
uni.showToast({
title: '请勾选用户协议',
icon : 'none'
})
return
}
let identitiesId = this.identities[this.tabsIndex].identity_id
vipOrder(identitiesId).then(res => {
console.log(res.test)
vipOrder(identitiesId,{
year: this.sumNumber
}).then(res => {
if(!res.test){
let verifyForm = res
this.wechatPay(res.id)
@@ -137,6 +235,40 @@
})
})
},
// 选择权限
yearsBtn(val) {
let newNumber = this.sumNumber
if (val == 'plus'){
newNumber ++;
}else{
if (newNumber > 1){
newNumber --;
}else{
uni.showToast({
title : '商品数量不能小于1',
icon : 'none'
})
}
}
this.sumNumber = newNumber
this.totalData(this.identities[this.tabsIndex].identity_id);
},
// 支付总金额数据
totalData(id) {
vipCont(id,{
year: this.sumNumber
}).then(res => {
this.identityTime = res.identity.description
this.total = res.identity.price
}).catch(err =>{
uni.showToast({
title: err.message,
icon : 'none'
})
})
},
// 微信支付
wechatPay(id){
@@ -154,7 +286,35 @@
}
})
})
}
},
// 支付选择
radioChange(val) {
let valuePay = val.detail.value
if( val.detail.value == 'balance') {
uni.showToast({
title: '抱歉暂未开通',
icon : 'none'
})
this.payChecked = true
return
}
this.payChecked = false
},
// 勾选协议
agreeChange() {
this.selected = !this.selected
},
// 会员权益介绍
showRemark(title, text){
uni.showModal({
title : title + '说明',
content : text,
showCancel : false
})
}
}
}
</script>
@@ -164,20 +324,213 @@
background-color: #FFFFFF;
}
// 新增样式
.vip-container {
width: 750rpx;
height: 350rpx;
.vip-item {
background-color: #c8c8c8;
border-radius: 20rpx;
height: 300rpx;
margin-top: $margin;
}
.swiper-item {
width: 630rpx;
height: 280rpx;
display: flex;
}
.vip-item {
width: 630rpx;
height: 280rpx;
border-radius: 20rpx;
background-color: #c8c8c8;
padding: 0 40rpx;
box-sizing: border-box;
.vip-top {
display: flex;
position: relative;
height: 80rpx;
line-height: 80rpx;
margin: $margin + 20 0 $margin + 20;
.vip-name {
font-size: $title-size + 6;
border-radius: 60rpx;
padding: 0 $padding;
box-sizing: border-box;
background-image: linear-gradient(to right, #f11a22, #ff252f);
display: flex;
.vip-name-icon {
width: 50rpx;
height: 50rpx;
margin: $margin - 15 $margin - 10 0 0;
}
}
.vip-price {
font-size: $title-size + 10;
font-weight: 600;
position: absolute;
right: 0;
top: 0;
}
}
.vip-time {
font-size: $title-size-lg;
text-align: center;
}
}
.content{
min-height: 100vh;
background: #fefaef;
}
.color-item-img {
background-color: #ff252f;
color: #FFFFFF;
box-shadow: 0 0 20rpx rgba(145,196,255,.5);
}
// 轮播点
.vip-spot {
margin-bottom: $margin;
text-align: center;
.vip-spot-label {
display: inline-block;
background-color: #e8ecf1;
width: 80rpx;
height: 8rpx;
margin: 0 10rpx;
&.vip-spot-color {
background-color: #fb560a;
}
}
}
// 选择年限
.vip-years {
display: flex;
line-height: 60rpx;
padding: $padding + 10 $padding + 20;
box-sizing: border-box;
border-top: $padding - 10 solid #f8fbfe;
border-bottom: $padding - 10 solid #f8fbfe;
.vip-years-name {
flex: 1;
display: flex;
color: #c8c8c8;
.vip-years-icon {
width: 60rpx;
height: 60rpx;
margin-right: 20rpx;
}
}
.vip-years-tool {
display: flex;
.vip-years-btn {
background-color: #ff9f43;
color: #ffffff;
border-radius: 10rpx;
width: 48rpx;
height: 48rpx;
line-height: 40rpx;
text-align: center;
border: 2rpx solid #f8fbfe;
font-size: $title-size + 4;
font-weight: 600;
}
.vip-years-input {
line-height: 48rpx;
padding: 0 $padding;
color: #000000;
}
}
}
// 会员特权
.privilege {
text-align: center;
.privilege-img {
height: 40rpx;
}
.privilege-list {
padding: 0 $padding;
box-sizing: border-box;
text-align: left;
margin-top: $margin;
.privilege-label {
border-bottom: 2rpx #e6eaef dashed;
font-size: $title-size;
padding: $padding + 10 0;
display: flex;
.privilege-label-tips {
width: 40rpx;
height: 40rpx;
margin-right: 20rpx;
}
.privilege-label-text {
width: calc(100% - 60rpx);
}
}
}
}
// 支付方式
.payWay {
margin-top: $margin * 4;
.payWay-way {
padding: 0 $padding;
box-sizing: border-box;
margin-top: $margin;
.payWay-way-label {
display: flex;
border-bottom: 2rpx #e6eaef dashed;
padding: $padding 0;
.payWay-way-name {
font-size: $title-size;
line-height: 58rpx;
flex: 1;
display: flex;
.payWay-way-img {
width: 58rpx;
height: 58rpx;
margin-right: $margin - 10;
}
}
}
.radio[type="radio"].disabled {
background-color: #007aff;
border-color: #007aff;
color: #007aff;
&::before {
background-color: #007aff;
border-color: #007aff;
}
&::after {
background-color: #007aff;
border-color: #007aff;
}
}
}
}
// 用户协议
.agree {
margin: $margin 0;
text-align: center;
.agree-tips {
background-color: #999999;
display: inline-block;
padding: 14rpx $padding;
color: #FFFFFF;
border-radius: 60rpx;
}
}
.agree-btn {
display: flex;
font-size: $title-size-lg;
text-align: left;
color: #999999;
padding: $padding;
}
// .content{
// min-height: 100vh;
// background: #fefaef;
// }
// 开通须知
.notice{
font-size: $title-size-m;
@@ -195,16 +548,29 @@
}
// footer
.footer{
padding: $padding $padding*2;
padding: $padding;
box-sizing: border-box;
.footer-btn{
background-color: #201212;
padding: 0 $padding + 10;
box-sizing: border-box;
background-color: #ff2828;
height: 90rpx;
line-height: 90rpx;
padding: 0;
border-radius: 0;
color: #f7d79c;
border-radius: 60rpx;
color: #FFFFFF;
font-size: $title-size;
font-weight: bold;
text-align: left;
display: flex;
.footer-btn-num {
flex: 1;
}
.footer-btn-pay {
color: #f6ff00;
}
&[disabled] {
background-color: #b1b1b1;
}
}
}
// 会员权限