pdkj
/
jiqu-library-miniprogram
6
0
Fork 0
Code Releases Activity

对接购买会员相关接口

hui.zhou
h30830569 2022-05-18 13:58:29 +08:00
parent 082d16cfbc
commit 663c9d5bed
13 changed files with 198 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

78
src/pageB/record/index.vue 100644
View File

@ -0,0 +1,78 @@
<template>
<view class="px-30rpx pt-20rpx">
<view class="sticky top-0 z-1500 bg-hex-F5F5F5 rounded-full grid grid-cols-3 text-28rpx text-hex-333 leading-40rpx py-10rpx">
<view class="text-center">会员类型</view>
<view class="text-center">购买金额</view>
<view class="text-center">购买时间</view>
</view>
<mescroll-body :height="height" ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption"
:up="upOption">
<block v-for="(item,index) in dataList" :key="index">
<view class="grid grid-cols-3 text-28rpx text-h666 py-18rpx mt-16rpx ">
<view class="text-center line-1 ">{{item.name}}</view>
<view class="text-center price-text">{{item.price}}</view>
<view class="text-center " v-if="item.success_time">{{item.success_time.substring(0,10)}}</view>
</view>
<u-line></u-line>
</block>
</mescroll-body>
</view>
</template>
<script>
import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
export default {
mixins: [MescrollMixin], // 使用mixin
data() {
return {
downOption: {
auto: false,
},
upOption: {
page: {
size: 20
},
noMoreSize: 1,
},
dataList: [], //获取到的数据
};
},
computed:{
height() {
const {
windowHeight,
statusBarHeight
} = this.$u.sys();
return windowHeight - statusBarHeight - 44 + 'px';
},
},
methods: {
downCallback() {
this.mescroll.resetUpScroll();
},
async upCallback(page) {
this.loadData(page);
},
loadData(page) {
this.$api.get(`/v1/vip/buy`, {
params: {
page: page.num,
per_page: page.size
}
}).then(res => {
this.mescroll.endSuccess(res.data.length)
if (page.num == 1) this.dataList = [];
this.dataList = this.dataList.concat(res.data,);
}).catch(err => {
this.mescroll.endErr()
})
},
}
}
</script>
<style lang="scss">
page{
background: #ffffff;
}
</style>

137
src/pageB/svip/index.vue
View File

@ -1,75 +1,152 @@
<template>
<view >
<view class="bg-hex-303133 flex p-30rpx ">
<cu-avatar size="120" :src="user.avatar ? user.avatar : ''"></cu-avatar>
<view class="ml-20rpx mt-10rpx">
<image src="@/static/images/svip/no_svip.png" class="w-48rpx h-48rpx" mode=""></image>
<view class="text-hex-f5f5f5 text-22rpx mt-10rpx">您暂未开通会员</view>
<view>
<loading-view v-if="isFirstLoading"></loading-view>
<view class="bg-hex-303133 flex items-center justify-between p-30rpx ">
<view class="flex">
<cu-avatar size="120" :src="user.avatar ? user.avatar : ''"></cu-avatar>
<view class="ml-20rpx mt-10rpx">
<image :src="!user.is_vip?'/static/images/svip/vip_failure.png':'/static/images/svip/vip.png'" class="w-48rpx h-48rpx" mode=""></image>
<view v-if="!user.is_vip" class="text-hex-f5f5f5 text-22rpx mt-10rpx">您暂未开通会员</view>
<view v-else class="text-hex-f5f5f5 text-22rpx mt-10rpx">vip到期日期：{{time}}</view>
</view>
</view>
<view class="text-white flex items-center text-26rpx" @click="$u.route('/pageB/record/index')">
<view class="mr-8rpx">购买记录</view>
<u-icon color="#ffffff" name="arrow-right" size="26"></u-icon>
</view>
</view>
<!-- -->
<view class="bg-white pb-40rpx">
<view class="p-30rpx text-32rpx ">尊享特权</view>
<view class="grid grid-cols-4 gap-30rpx">
<view class="flex items-center justify-center flex-col" v-for="(item,index) in 8 " :key="index">
<image src="@/static/images/user/share_friends.png" class="w-64rpx h-64rpx" mode=""></image>
<view class="flex items-center justify-center flex-col ">
<view class="item">
<image src="@/static/images/svip/vip_icon02.png" class="w-36rpx h-36rpx" mode="aspectFill"></image>
</view>
<view class="mt-20rpx text-24rpx">会员折扣</view>
</view>
<view class="flex items-center justify-center flex-col">
<view class="item">
<image src="@/static/images/svip/vip_icon03.png" class="w-36rpx h-36rpx" mode="aspectFill"></image>
</view>
<view class="mt-20rpx text-24rpx">会员礼卷</view>
</view>
<view class="flex items-center justify-center flex-col">
<view class="item">
<image src="@/static/images/svip/vip_icon01.png" class="w-36rpx h-36rpx" mode="aspectFill"></image>
</view>
<view class="mt-20rpx text-24rpx">会员特权</view>
</view>
<view class="flex items-center justify-center flex-col">
<view class="item">
<image src="@/static/images/svip/vip_icon04.png" class="w-36rpx h-36rpx" mode="aspectFill"></image>
</view>
<view class="mt-20rpx text-24rpx">尊贵标识</view>
</view>
</view>
</view>
<!-- -->
<view class="bg-white mt-20rpx p-30rpx">
<!-- -->
<view class="grid grid-cols-3 gap-30rpx">
<view @click="choose(index)" :class="Index==index?'text-hex-f59e0b border-hex-f59e0b':'border-hex-F5F5F5'" class="rounded-15rpx py-50rpx flex items-center justify-center flex-col border border-solid " v-for="(item,index) in list" :key="index">
<view class="text-26rpx">{{item.name}}</view>
<view class="price-text text-34rpx font-medium mt-15rpx">{{item.money}}</view>
<view :class="Index==index?'text-hex-f59e0b':''" class="text-26rpx mt-15rpx text-hex-909399">{{item.time}}</view>
<view @click="Index=index" :class="Index==index?'text-hex-f59e0b border-hex-f59e0b':'border-hex-F5F5F5'"
class="rounded-15rpx py-50rpx flex items-center justify-center flex-col border border-solid "
v-for="(item,index) in list" :key="index">
<view class="text-26rpx">{{item.name}}</view>
<view class="price-text text-34rpx font-medium mt-15rpx">{{item.price}}</view>
<view :class="Index==index?'text-hex-f59e0b':''" class="text-26rpx mt-15rpx text-hex-909399">{{item.times.text}}
</view>
</view>
</view>
<!-- -->
<view class="mt-30rpx text-28rpx">
<view class="leading-40rpx">瞭男书店季卡</view>
<view class="leading-40rpx">咖啡饮品9折，书籍9折，免费咖啡饮品12杯</view>
<view class="leading-40rpx">通用现金卷100元 （有限期90天）</view>
<text class="leading-40rpx">
{{chooseVip.description}}
</text>
</view>
<!-- -->
<view class="flex items-center mt-20rpx">
<u-checkbox v-model="checked" shape="circle" active-color="#f59e0b" size="28" icon-size="18"></u-checkbox>
<view class="text-22rpx -ml-15rpx mt-8rpx " >
<view class="text-22rpx -ml-15rpx mt-8rpx ">
已同意并阅读
<text class="text-hex-f59e0b">《平台协议》、</text>
<text class="text-hex-f59e0b">《价格说明》</text>
</view>
</view>
<!-- -->
<view class="w-full mt-30rpx h-88rpx bg-hex-404040 rounded-full text-center text-hex-f59e0b leading-88rpx text-32rpx">立即开通</view>
<view
class="w-full mt-30rpx h-88rpx bg-hex-404040 rounded-full text-center text-hex-f59e0b leading-88rpx text-32rpx" @click="onSumbit">
{{user.is_vip?'续费':'立即开通'}}</view>
</view>
</view>
</template>
<script>
import { wxpay, alipay } from '@/utils/pay.js';
export default {
data() {
return {
user: {},
list:[
{name:'年卡',money:'1288',time:'1年'},
{name:'季卡',money:'1288',time:'3月'},
{name:'月卡',money:'1288',time:'30天'}
],
Index:0,
checked:true
isFirstLoading:false,
list: [],
Index: 0,
checked: true
};
},
methods:{
choose(e){
this.Index=e
computed:{
user() {
return this.$store.getters.user ?? {};
},
chooseVip(){
return this.list[this.Index]
},
time(){
return this.$u.timeFormat(this.user.vip_expired, 'yyyy-mm-dd');
}
},
onLoad() {
this.getDate()
},
methods: {
async getDate(){
try{
const resData=await this.$api.get('/v1/vip')
this.list=resData
}catch(err){}finally{
this.isFirstLoading=false
}
},
async onSumbit(){
if(!this.checked) return this.$u.toast('请勾选协议')
try{
const resData=await this.$api.post('/v1/vip/buy',{vip_id:this.chooseVip.id})
const res=await wxpay(resData.data)
if(res=='success'){
this.$u.toast('充值成功');
this.$store.dispatch('user/getUserInfo');
setTimeout(()=>{
uni.navigateBack({})
},300)
}else{
this.$u.toast('支付失败');
}
}catch(err){
}
}
}
}
</script>
<style lang="scss">
<style lang="scss" scoped>
.item {
background-image: linear-gradient(-90deg,
#e3a96d 0%,
#f8cfb4 100%), linear-gradient(#c59f6d,
#c59f6d);
border-radius: 50%;
width: 64rpx;
height: 64rpx;
display: flex;
align-items: center;
justify-content: center;
}
</style>

8
src/pages.json
View File

@ -577,6 +577,14 @@
"enablePullDownRefresh": false,
"navigationStyle": "default"
}
},
{
"path": "record/index",
"style": {
"navigationBarTitleText": "会员购买记录",
"enablePullDownRefresh": false,
"navigationStyle": "default"
}
}
]
}

7
src/pages/me/me.vue
View File

@ -36,7 +36,7 @@
</view>
</view>
<view class="flex items-center justify-between mt-20rpx text-txBase text-lg">
<view @tap="$u.routeAuth('/pageB/svip/index')" class="flex-1" v-if="walletShow"
<view class="flex-1" v-if="walletShow"
>余额: <text class="font-medium">{{ balance.balance }}</text></view
>
<view class="w-200rpx flex-none">
@ -66,7 +66,7 @@
<block v-if="!isVerify">
<block v-if="show_vip_banner && user.is_vip == true">
<view
@tap="$u.route('/pageA/membership_interests/index')"
@tap="$u.routeAuth('/pageB/svip/index')"
:style="[{ backgroundImage: 'url(' + show_vip_banner + ')' }]"
class="bg_advertisement mt flex items-center justify-end px-30rpx"
>
@ -75,11 +75,10 @@
<!-- 还未成为会员 -->
<block v-if="become_vip_banner && user.is_vip == false">
<view
@tap="$u.route('/pageA/membership_interests/index')"
@tap="$u.routeAuth('/pageB/svip/index')"
:style="[{ backgroundImage: 'url(' + become_vip_banner + ')' }]"
class="bg_advertisements mt px-30rpx"
>
<view class="text-white pt-base pl-140rpx">当前成长值：{{ user.growth_value ? user.growth_value : '0' }} / 650</view>
</view>
</block>
</block>

BIN
src/static/images/svip/no_svip.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 6.0 KiB

BIN
src/static/images/svip/svip.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 6.2 KiB

BIN
src/static/images/svip/vip.png 100644
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 745 B

BIN
src/static/images/svip/vip_failure.png 100644
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 778 B

BIN
src/static/images/svip/vip_icon01.png 100644
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

BIN
src/static/images/svip/vip_icon02.png 100644
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

BIN
src/static/images/svip/vip_icon03.png 100644
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 966 B

BIN
src/static/images/svip/vip_icon04.png 100644
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 602 B

3
src/store/modules/user.js
View File

@ -158,12 +158,13 @@ const actions = {
custom: {
silence: true
}
}).then(({ phone, user_info, is_vip, wallet, balance }) => {
}).then(({ phone, user_info, is_vip, wallet, balance,vip_expired }) => {
let user = user_info
user.phone = phone
user.is_vip = is_vip
user.wallet = wallet
user.balance = balance
user.vip_expired=vip_expired
commit('SET_USERINFO', user)
dispatch('bindCid')
dispatch('getAccounts', { info: { ...user, token: state.token }, switchAllaccounts })