店铺会员制Vip功能增加
This commit is contained in:
317
pages/store/vip/index/index.vue
Normal file
317
pages/store/vip/index/index.vue
Normal file
@@ -0,0 +1,317 @@
|
||||
<template>
|
||||
<view class="store-vip">
|
||||
<image class="vip-bg" src="/static/store/store-vip-bg.png" mode="widthFix"/>
|
||||
<swiper class="swiper" circular>
|
||||
<swiper-item class="swiper-item" v-for="item in vip" :key="item.identity_id">
|
||||
<view class="top">
|
||||
<view class="left" v-if="vip.length > 1">
|
||||
<< 滑动获取更多 </view>
|
||||
<view class="content">
|
||||
<!-- 四个角标 -->
|
||||
<block> <image class="jiao" src="../../../../static/store/vip-left-top.png" mode="widthFix" /> <image class="jiao" src="../../../../static/store/vip-right-top.png" mode="widthFix" /> <image class="jiao" src="../../../../static/store/vip-left-bottom.png" mode="widthFix" /> <image class="jiao" src="../../../../static/store/vip-right-bottom.png" mode="widthFix" /> </block>
|
||||
<view class="title1"> {{item.shop.name}} </view>
|
||||
<image class="title2" :src="item.title_cover" mode="widthFix" />
|
||||
<view class="title3"> {{item.description}} </view> <!-- 分类 -->
|
||||
<view class="type">
|
||||
<view class="type-item" v-for="it in item.rules" :key="it.order">
|
||||
<image :src="it.cover" mode="aspectFill" />
|
||||
<view class="title">{{it.name}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="title4">---| 仅需开通 立享尊贵特权 |---</view>
|
||||
</view>
|
||||
<view class="right" v-if="vip.length > 1"> 滑动获取更多 >> </view>
|
||||
</view>
|
||||
<view class="bottom">
|
||||
<view class="left">
|
||||
<view class="title-1">立享尊贵特权 >> </view>
|
||||
<view class="title-2" v-if="item.vip_info.ended_at"> 到期时间：{{item.vip_info.ended_at}} </view>
|
||||
</view>
|
||||
<view class="right" @click="onOpenVip(item.identity_id)">{{item.is_vip?'立即续费':'立即开通'}} </view>
|
||||
</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import {
|
||||
shopVipInfo,
|
||||
shopVipCreate,
|
||||
shopVipWeChat
|
||||
} from '@/apis/interfaces/vip.js'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
vip: [],
|
||||
};
|
||||
},
|
||||
onLoad(e) {
|
||||
this.id = e.id;
|
||||
this.getInfo()
|
||||
},
|
||||
methods: {
|
||||
getInfo() {
|
||||
shopVipInfo(this.id).then(res => {
|
||||
uni.setNavigationBarTitle({
|
||||
title: res[0].shop.name + '会员'
|
||||
});
|
||||
this.vip = res;
|
||||
}).catch(err => {
|
||||
uni.showToast({
|
||||
title: err.message,
|
||||
icon: 'none',
|
||||
mask: true,
|
||||
})
|
||||
})
|
||||
},
|
||||
// 创建店铺vip会员
|
||||
onOpenVip(identity) {
|
||||
// 获取订单
|
||||
uni.showLoading({
|
||||
title: 'VIP会员开通中'
|
||||
})
|
||||
shopVipCreate(this.id,identity).then(res => {
|
||||
// 支付参数
|
||||
if (res.id) {
|
||||
uni.showLoading({
|
||||
title: '获取支付信息'
|
||||
})
|
||||
this.wxPay(res.id)
|
||||
}
|
||||
}).catch(err => {
|
||||
uni.showToast({
|
||||
title: err.message,
|
||||
icon: 'none'
|
||||
})
|
||||
})
|
||||
},
|
||||
// 微信支付
|
||||
wxPay(orderId) {
|
||||
shopVipWeChat(orderId).then(orderInfo => {
|
||||
uni.requestPayment({
|
||||
provider: "wxpay",
|
||||
orderInfo: JSON.parse(orderInfo),
|
||||
success: res => {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '开通成功',
|
||||
showCancel: false,
|
||||
success: () => {
|
||||
uni.navigateBack({})
|
||||
}
|
||||
})
|
||||
},
|
||||
fail(err) {
|
||||
let showToast = err.message
|
||||
if (err.errMsg === 'requestPayment:fail [payment微信:-2]User canceled') {
|
||||
showToast = '支付被取消'
|
||||
}
|
||||
uni.showToast({
|
||||
title: showToast,
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
})
|
||||
}).catch(err => {
|
||||
uni.showToast({
|
||||
title: err.message,
|
||||
icon: 'none',
|
||||
mask:true,
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.store-vip {
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
background-color: #f6f1eb;
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
overflow: hidden;
|
||||
|
||||
.vip-bg {
|
||||
width: 100%;
|
||||
// height: 100%;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
top: -50rpx;
|
||||
left: -50rpx;
|
||||
}
|
||||
|
||||
.swiper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
|
||||
.swiper-item {
|
||||
.top {
|
||||
height: calc(100vh - 160rpx);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
box-sizing: border-box;
|
||||
|
||||
.right {
|
||||
font-size: 30rpx;
|
||||
color: #999;
|
||||
text-align: right;
|
||||
width: 100%;
|
||||
padding-right: 20%;
|
||||
padding-bottom: 6%;
|
||||
}
|
||||
|
||||
.left {
|
||||
font-size: 30rpx;
|
||||
color: #999;
|
||||
text-align: left;
|
||||
width: 100%;
|
||||
padding-left: 20%;
|
||||
padding-top: 6%;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: $padding * 2;
|
||||
background-color: #fff;
|
||||
border-radius: 10rpx;
|
||||
width: 80%;
|
||||
min-height: 70%;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
|
||||
.title1 {
|
||||
font-size: 34rpx;
|
||||
color: #e5c175;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.title2 {
|
||||
padding-top: $padding - 0;
|
||||
width: 100%;
|
||||
height: 0;
|
||||
padding-bottom: $padding - 10;
|
||||
}
|
||||
|
||||
.title3 {
|
||||
font-size: 28rpx;
|
||||
color: #2f3245;
|
||||
}
|
||||
|
||||
.title4 {
|
||||
font-size: 28rpx;
|
||||
color: #e5c175;
|
||||
padding-top: 30rpx;
|
||||
}
|
||||
|
||||
.type {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
box-sizing: border-box;
|
||||
flex-wrap: wrap;
|
||||
margin-top: $padding * 2;
|
||||
width: 100%;
|
||||
|
||||
.type-item {
|
||||
width: 33.33%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
font-size: 28rpx;
|
||||
color: #2f3245;
|
||||
margin-bottom: 30rpx;
|
||||
|
||||
image {
|
||||
width: 90rpx;
|
||||
height: 90rpx;
|
||||
border-radius: 50%;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.jiao {
|
||||
width: 50rpx;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.jiao:nth-child(1) {
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.jiao:nth-child(2) {
|
||||
right: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.jiao:nth-child(3) {
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.jiao:nth-child(4) {
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bottom {
|
||||
height: 160rpx;
|
||||
background-color: #2f3245;
|
||||
color: #e5c175;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
.left {
|
||||
color: #e5c175;
|
||||
width: 70%;
|
||||
height: 100%;
|
||||
font-weight: bold;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
|
||||
.title-1 {
|
||||
font-size: 36rpx;
|
||||
}
|
||||
.title-2{
|
||||
font-size: 28rpx;
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
background-color: #e5c175;
|
||||
width: 30%;
|
||||
height: 100%;
|
||||
color: #2f3245;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
font-size: 36rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user