czg_team/cashier_weapp
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

会员相关功能更新

Browse Source
This commit is contained in:
GaoHao
2024-08-14 10:47:16 +08:00
parent 05c7b85a75
commit 5550649e8a
17 changed files with 2343 additions and 197 deletions
Download Patch File Download Diff File Expand all files Collapse all files

327
pages/member/memberdetails.vue
View File

@@ -1,71 +1,138 @@
<template>
<!-- 会员详情 -->
<view class="content">
<card :userInfo="userInfo"></card>
<view class="memberdetailsStyle">
<text>会员详情</text>
<view @click="goUrl('member/billDetails')">
<text>账单明细</text>
<uni-icons type="right" style="color: #333;" size="20"></uni-icons>
</view>
<view @click="goUrlinfo('member/index')">
<text>会员充值</text>
<uni-icons type="right" style="color: #333;" size="20"></uni-icons>
<!-- <card :userInfo="userInfo"></card> -->
<view class="card_info">
<image class="card_info_bg" src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/menber/member_bg.png" mode="aspectFill"></image>
<view class="card_content">
<view class="card_head">
<view class="card_head_left">
<image class="card_head_left_head" src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/menber/member_head.png" mode="aspectFill"></image>
<text class="card_head_left_name">{{userInfo.shopName}}会员卡</text>
<view class="card_head_left_icon_box" v-if="userInfo.isVip != 0">
<image class="card_head_left_icon1" src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/menber/member_icon1.png" mode="aspectFill"></image>
<text class="card_head_left_iconText">VL1</text>
</view>
</view>
<view class="card_head_right" @click="clickEvent" v-if="userInfo.isVip != 0">
<image class="card_head_left_qrCode" src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/menber/member_qrCode.png" mode="aspectFill"></image>
</view>
</view>
<view class="card_cen">
<view class="card_cen_left">{{ userInfo.isVip == 0 ? '尚未开通会员暂无法享受会员权益' : '欢迎加入本店会员~'}}</view>
<view class="card_cen_right" v-if="userInfo.isVip != 0">查看特权</view>
</view>
<view class="card_bom" v-if="userInfo.isVip != 0">
<view class="card_bom_item">
<text>{{userInfo.amount || '0.00'}}</text><text>储值</text>
</view>
<view class="card_bom_item">
<text>0</text><text>积分</text>
</view>
<view class="card_bom_item">
<text>0</text><text>优惠券</text>
</view>
<view class="card_bom_item">
<text>0</text><text>权益卡</text>
</view>
</view>
</view>
</view>
<view class="card_bottom" :class="userInfo.isVip == 0 ? 'n' : ''">
<view class="card_bottom_Box" v-if="userInfo.isVip != 0">
<view class="card_bottom_left flex-start">
<image class="card_bottom_head" src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/menber/member_head2.png" mode="aspectFill"></image>
<view class="">
<view class="card_bottom_title">感谢你 2 天陪伴</view>
<view class="flex-start">
<view class="card_bottom_text">您今天的幸运词：<text class="luckyWord">林波微步</text></view>
<image class="card_bottom_icon" src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/menber/member_icon2.png" mode="aspectFill"></image>
</view>
</view>
</view>
<image class="card_bottom_right_img" src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/menber/member_img3.png" mode="aspectFill"></image>
</view>
<view class="card_bottom_Box" v-else >
<view class="card_bottom_equity">
<view class="card_bottom_equity_title">专享2项权益</view>
<view class="card_bottom_equity_list">
<view class="card_bottom_equity_list_item">
<image class="list_item_icon" src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/menber/member_icon01.png" mode="aspectFill"></image>
<text class="list_item_text">会员专属活动</text>
</view>
<view class="card_bottom_equity_list_item">
<image class="list_item_icon" src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/menber/member_icon02.png" mode="aspectFill"></image>
<text class="list_item_text">福利商品</text>
</view>
</view>
</view>
</view>
</view>
<registermember :show="memberOpen" :shopId="shopId_id" :userInfo="userInfo" @getRegisterMember="getRegisterMember"></registermember>
</view>
</template>
<script>
import card from './components/card.vue'
import registermember from './components/registermember.vue'
export default {
components: {
card
registermember
},
data() {
return {
shopId_id: null,
inputshow: 0,
memberlist: {},
listdata: [],
memberOpen: false,
amount: '',
userInfo: {},
lucky: {
list: ['鸿运当头',"财运亨通","时来运转","否极泰来","花逢时发"],
index: 0,
text: ""
}
}
},
onLoad(e) {
console.log(e)
this.shopId_id = e.shopId_id
},
onShow() {
this.paygetShopByMember(this.shopId_id)
this.paygetShopByMember()
},
methods: {
async paygetShopByMember(w) {
/**
* 获取会员卡信息
*/
async paygetShopByMember() {
let res = await this.api.paygetShopByMember({
page: 1,
pageSize: 10,
userId: uni.cache.get('userInfo').id,
shopId: w
shopId: this.shopId_id
})
this.userInfo = res.data.list[0]
this.userInfo = res.data.list[0];
if ( this.userInfo.isVip == 0 ) {
this.memberOpen = true;
return;
}
},
clickinput(a, b) {
console.log(a, b)
this.inputshow = b
this.amount = a.minNum
/**
* 注册会员卡
* @param {Object} e
*/
getRegisterMember (e) {
this.memberOpen = e;
this.paygetShopByMember()
},
goUrl(url) {
uni.pro.navigateTo(url, this.userInfo)
},
goUrlinfo(url) {
uni.pro.navigateTo(url, {
shopId: this.shopId_id,
type: 'list'
clickEvent() {
uni.navigateTo({
url: '/pages/pay_code/pay_code?shopInfo=' + JSON.stringify(this.userInfo)
})
}
},
}
}
</script>
@@ -77,7 +144,197 @@
.content {
padding: 0 28rpx;
font-size: 12rpx;
.card_info{
width: 630rpx;
height: 304rpx;
margin: auto;
position: relative;
z-index: 2;
.card_info_bg{
width: 630rpx;
height: 304rpx;
position: absolute;
z-index: 1;
}
.card_content{
position: relative;
left: 0;
top: 0;
z-index: 2;
color: #fff;
padding: 30rpx;
.card_head{
display: flex;
align-items: center;
justify-content: space-between;
.card_head_left{
display: flex;
align-items: center;
.card_head_left_head{
width: 40rpx;
height: 40rpx;
margin-right: 16rpx;
}
.card_head_left_name{
font-weight: 400;
font-size: 32rpx;
color: #FFFFFF;
margin-right: 12rpx;
}
.card_head_left_icon_box{
width: 64.23rpx;
height: 26.56rpx;
position: relative;
display: flex;
align-items: center;
justify-content: center;
.card_head_left_icon1{
width: 64.23rpx;
height: 26.56rpx;
position: absolute;
left: 0;
top: 0;
}
.card_head_left_iconText{
font-weight: bold;
font-size: 18rpx;
color: #FFFFFF;
position: relative;
z-index: 1;
}
}
}
.card_head_right{
width: 56rpx;
height: 56rpx;
border-radius: 50%;
background: #000000;
box-shadow: 0rpx 6rpx 12rpx 2rpx rgba(0,0,0,0.16);
display: flex;
justify-content: center;
align-items: center;
.card_head_left_qrCode{
width: 24rpx;
height: 24rpx;
}
}
}
.card_cen{
display: flex;
justify-content: space-between;
font-weight: 400;
font-size: 20rpx;
color: #FFFFFF;
margin-top: 20rpx;
}
.card_bom{
display: flex;
justify-content: space-between;
margin-top: 60rpx;
.card_bom_item{
width: 25%;
display: flex;
flex-direction: column;
align-items: center;
font-weight: 400;
text:nth-child(1){
font-size: 30rpx;
color: #FFFFFF;
}
text:nth-child(2){
font-size: 24rpx;
color: #FFFFFF;
}
}
}
}
}
.card_bottom{
width: 100%;
height: 280rpx;
background-color: #fff;
border-radius: 24rpx;
position: relative;
z-index: 1;
margin-top: -120rpx;
display: flex;
align-items: flex-end;
padding: 16rpx 42rpx;
.card_bottom_Box{
width: 100%;
display: flex;
justify-content: space-between;
align-items: flex-end;
.card_bottom_left{
margin-bottom: 16rpx;
}
.card_bottom_head{
width: 80rpx;
height: 80rpx;
margin-right: 14rpx;
}
.card_bottom_title{
font-weight: 400;
font-size: 32rpx;
color: #333333;
}
.card_bottom_text{
font-weight: 400;
font-size: 24rpx;
color: #999999;
margin-right: 8rpx;
}
.card_bottom_icon{
width: 22.7rpx;
height: 22.18rpx;
}
.card_bottom_right_img{
width: 132rpx;
height: 132rpx;
}
.card_bottom_equity{
display: flex;
flex-direction: column;
.card_bottom_equity_title{
font-weight: bold;
font-size: 32rpx;
color: #333333;
}
.card_bottom_equity_list{
display: flex;
flex-wrap: wrap;
margin-top: 32rpx;
.card_bottom_equity_list_item{
display: flex;
flex-direction: column;
align-items: center;
margin-right: 56rpx;
.list_item_icon{
width: 52rpx;
height: 46rpx;
margin-bottom: 6rpx;
}
.list_item_text{
font-weight: 500;
font-size: 22rpx;
color: #333333;
}
}
}
}
}
}
.card_bottom.n{
padding: 24rpx 42rpx;
margin-top: -80rpx;
}
.towcontentitem {
width: 100%;
position: relative;