Commit 11974f4c by zhangzhen

功能完善优化

parent c9688615
import http from "@/common/vmeitime-http/index.js"
// 会员配置列表
export const memberConfigList=(data)=>{
let url=`/memberConfig/query`
return http.get(url,data)
}
......@@ -204,6 +204,20 @@
"navigationBarTitleText": "活动规则",
"enablePullDownRefresh" : false
}
},
{
"path" : "equityDetail/index",
"style": {
"navigationBarTitleText": "权益详情",
"enablePullDownRefresh" : false
}
},
{
"path" : "levelDetail/index",
"style": {
"navigationBarTitleText": "会员等级详情",
"enablePullDownRefresh" : false
}
}
]
}
......
......@@ -14,19 +14,19 @@
<view class="flex-col margin-left user-info-box">
<text class="text-title text-lg text-bold text-xxl">{{userInfo.nickName||"凑角用户"}}</text>
<view class="flex-row" style="margin-top: 10rpx;">
<view v-if="userInfo.consumerMember&&userInfo.consumerMember.isRecharge" class="relative">
<view v-if="userInfo.consumerMember&&userInfo.consumerMember.isRecharge" class="relative" @tap.stop="onNavToVip">
<image class="img-icon" :src="assetsPath+'/tag_icon_1.png'" mode="widthFix"></image>
<view class="absolute">
<text class="text-1">充值会员</text>
</view>
</view>
<view v-if="userInfo.consumerMember&&userInfo.consumerMember.isRights" class="relative" >
<view v-if="userInfo.consumerMember&&userInfo.consumerMember.isRights" class="relative" @tap.stop="onNavByPath('equityDetail')">
<image class="img-icon" :src="assetsPath+'/tag_icon_2.png'" mode="widthFix"></image>
<view class="absolute">
<text class="text-2">权益会员</text>
</view>
</view>
<view v-if="!userInfo.consumerMember || !(userInfo.consumerMember.isRights && userInfo.consumerMember.isRecharge) " class="relative" >
<view v-if="!userInfo.consumerMember || !(userInfo.consumerMember.isRights && userInfo.consumerMember.isRecharge) " class="relative" @tap.stop="onNavToVip">
<image class="img-icon" :src="assetsPath+'/tag_icon_3.png'" mode="widthFix"></image>
<view class="absolute">
<text class="text-3">普通会员</text>
......@@ -34,7 +34,8 @@
</view>
</view>
<view v-if="userInfo.consumerMember.isRights" class="tip-date">
<text>权益{{userInfo.consumerMember.expirationDate}}到期</text>
<text>权益 <text class="text-bold">{{userInfo.consumerMember.expirationDate}}</text> 到期</text>
<text class="text-blue" @tap.stop="onGetEquityMembersList">续费</text>
</view>
</view>
<view class="nav-right" @tap.stop="onNavToSetUserInfo">
......@@ -44,7 +45,7 @@
</view>
<view class="remeber-info-box">
<view class="relative flex-7">
<view class="relative flex-7" @tap="onNavByPath('levelDetail')" >
<image v-if="userInfo.memberConfig && userInfo.memberConfig.membershipLevel ===1" class="level-bg" :src="assetsPath+'/user/tj_bg_1.png'" mode="scaleToFill"></image>
<image v-else-if="userInfo.memberConfig && userInfo.memberConfig.membershipLevel ===2" class="level-bg" :src="assetsPath+'/user/tongj_bg_1.png'" mode="scaleToFill"></image>
<image v-else-if="userInfo.memberConfig && userInfo.memberConfig.membershipLevel ===3" class="level-bg" :src="assetsPath+'/user/yj_bg_1.png'" mode="scaleToFill"></image>
......@@ -327,6 +328,53 @@
</view>
</view>
</uni-popup>
<uni-popup ref="popupPay" type="center">
<view class="popup-box-content">
<view class="popup-box popup-box-2">
<view class="close-box" @tap="onClose">
<text class="cuIcon-close text-xl text-icon" ></text>
</view>
<view class="title-header">
<text class="text-title text-black text-lg text-bold">购买详情</text>
</view>
<view class="flex-col popup-content">
<view class="recharge-content">
<text v-if="consumerMemberStatus" class="text-1">权益续期,<text class="text-pink">{{userInfo.consumerMember.expirationDate}}</text> 过期,优惠享不停,待支付:</text>
<text v-else class="text-1">购买权益,优惠享不停,待支付:</text>
<view class="payfee-text">
<text>{{list[0].requiredAmount}}</text>
</view>
<view class="flex-row content-tip">
<text class="text-3">可享权益:</text>
<view class="flex-col">
<view class="flex-row-center">
<view class="gift-box">
<image class="gift-icon" :src="assetsPath+'/gift_icon.png'" mode="widthFix"></image>
</view>
<text class="text-13">房间预定,会员日即可享98折起</text>
</view>
<view class="flex-row-center">
<view class="gift-box">
<image class="gift-icon" :src="assetsPath+'/gift_icon.png'" mode="widthFix"></image>
</view>
<text class="text-13">房间预定,下单即可享会员积分赠送</text>
</view>
<view class="flex-row-center">
<text class="text-13">更多权益请查看多动规则</text>
</view>
</view>
</view>
</view>
</view>
<view class="btn-list-box">
<view class="btn-box">
<button class="cu-btn bg-pink" @tap="onCreateEquityMembers">确认支付</button>
</view>
</view>
</view>
</view>
</uni-popup>
</view>
</template>
......@@ -345,6 +393,10 @@
import {
orderList
} from "@/api/order.js"
import {
equityMembersList,
createEquityMembers
} from "@/api/userInfo.js";
export default {
components: {
......@@ -400,8 +452,12 @@
deviceManage:"/pages/deviceManage/index",
cleanManage:"/pages/cleanManage/cleanManage",
cleanRecord:"/pages/cleanRecord/index",
couponList:"/pages/couponList/index"
}
couponList:"/pages/couponList/index",
equityDetail:"/setting/rule/rule?keyData=user_equity_details",
levelDetail:"/setting/levelDetail/index"
},
list:[],
consumerMemberStatus:false
}
},
onShow() {
......@@ -444,6 +500,9 @@
getUserInfo().then(res => {
if (res.data.code == 200) {
this.userInfo = res.data.data;
if (this.userInfo.consumerMember && this.userInfo.consumerMember.isRights) {
this.consumerMemberStatus = true;
}
this.userName = this.userInfo.phone.slice(-4);
uni.setStorageSync('userInfo', this.userInfo)
this.onGetOrderInfo();
......@@ -561,6 +620,80 @@
uni.navigateTo({
url:this.routePathEnum[pathName]
})
},
onNavToVip(){
uni.switchTab({
url:"/pages/vipCreate/vipCreate"
})
},
onGetEquityMembersList(){
equityMembersList().then(res => {
console.log(res, 999999)
if (res.data.code == 200 && res.data.rows) {
this.list = res.data.rows;
if(this.list&&this.list.length){
this.$refs.popupPay.open();
}else{
uni.showToast({
icon:"none",
title:"暂时无法续费,请联系客服"
})
}
}
})
},
onCreateEquityMembers(){
let that = this;
uni.showLoading({
title: "提交中..."
})
createEquityMembers({
payType: 1,
equityMembersConfigId: this.list[0].id
}).then(res => {
uni.hideLoading();
if (res.data.data && res.data.data.jsConfig) {
wx.requestPayment({
"timeStamp": res.data.data.jsConfig.timeStamp,
"nonceStr": res.data.data.jsConfig.nonceStr,
"package": res.data.data.jsConfig.packages,
"signType": res.data.data.jsConfig.signType,
"paySign": res.data.data.jsConfig.paySign,
"success": (resp) => {
// 支付成功
uni.showToast({
icon: "success",
title: "下单成功",
success: () => {
that.$refs.popupPay.close();
setTimeout(() => {
this.onGetUserInfo();
}, 1000)
}
})
},
"fail": (resp) => {
// 取消支付或支付失败
uni.showToast({
title: "取消支付"
})
},
"complete": (resp) => {
that.$refs.popupPay.close();
// 接口调用结束的回调函数(调用成功、失败都会执行)
}
});
} else {
uni.showToast({
icon:"none",
title: res.data.msg
})
}
})
},
onClose() {
this.$refs.popupPay.close()
}
}
}
......@@ -884,10 +1017,19 @@
filter: grayscale(100%);
}
.tip-date{
display: flex;
flex-direction: row;
align-items: center;
font-weight: normal;
font-size: 20rpx;
color: #A3A3A3;
margin-top: 10upx;
.text-bold{
margin: 0 4upx;
}
.text-blue{
margin-left: 6upx;
}
}
}
.remeber-info-box{
......@@ -1114,4 +1256,191 @@
}
}
.popup-box {
display: flex;
flex-direction: column;
// background: linear-gradient(-45deg,rgba(255, 170, 0, 0.98), rgba(255,255,255,0.98));
background: linear-gradient(-45deg, #ffffff, #f1f1f1);
border-radius: 12upx;
width: 80%;
margin: 0 auto;
.title-header {
display: flex;
justify-content: center;
align-items: center;
padding: 24upx 0;
border-bottom: 1px dashed #fce051;
}
.popup-content {
display: flex;
align-items: center;
padding: 30upx 24upx;
width: 100%;
border-radius: 0 0 0 0;
min-height: 180upx;
}
.btn-list-box {
display: flex;
flex-direction: row;
align-items: center;
width: 100%;
border-top: 1px solid #fce051;
.btn-box {
display: flex;
flex: 1;
justify-content: center;
align-items: center;
padding: 24upx 0;
.cu-btn {
width: 80%;
}
.bg-gray {
// color: #ffffff;
}
.bg-pink {
background-color: rgba(224, 57, 151, 0.74);
}
}
}
}
.popup-box-content{
background-color: #ffffff;
width: 72vw;
border-radius: 36upx;
overflow: hidden;
}
.popup-box-2{
position: relative;
width: 100%;
background: linear-gradient(0deg, rgba(255,255,255,0.65), rgba(255,214,241,0.43));
.close-box{
position: absolute;
top: 16upx;
right: 20upx;
display: flex;
justify-content: center;
align-items: center;
width: 24px;
height: 24px;
font-size: 36upx;
}
.title-header{
display: flex;
justify-content: center;
align-items: center;
padding: 30upx 24upx 8upx;
border-bottom: none;
.text-title{
font-size: 36upx;
color: #333333;
}
}
.popup-content{
padding: 0 24upx;
min-height: 240upx;
.recharge-content{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
.text-1{
font-weight: 400;
font-size: 24upx;
color: #666666;
}
.payfee-text{
display: flex;
justify-content: center;
align-items: center;
width: 100%;
padding: 10upx 0 16upx;
margin-bottom: 16upx;
border-bottom: 1px dashed #C9CACA;
text{
font-size: 52rpx;
color: #E40583;
}
}
.flex-row{
.flex-col{
.text-12{
width: 77upx;
color: #000000;
font-size: 28upx;
font-weight: bold;
text-align: justify-all;
}
.text-13{
color: #999999;
font-size: 26upx;
margin-left: 4upx;
}
.text-14{
color: #000000;
}
}
}
.content-tip{
display: flex;
flex-direction: column;
margin: 20upx 0 12upx;
.text-3{
font-size: 28upx;
color: #333333;
margin-bottom: 20upx;
}
.flex-col{
align-items: flex-start;
.flex-row-center{
margin: 8upx 0;
.gift-box{
display: flex;
justify-content: center;
align-items: center;
width: 22px;
height: 22px;
background: #FCE8F2;
border-radius: 6px;
.gift-icon{
display: block;
width: 70%;
max-height: 40upx;
}
}
}
}
}
}
}
.btn-list-box{
display: flex;
justify-content: center;
align-items: center;
width: 100%;
border-top: none;
.btn-box{
display: flex;
flex: none;
width: 87%;
.cu-btn{
padding: 0;
width: 100%;
height: 88upx;
background: #E40583;
border-radius: 44upx;
font-size: 37upx;
color: #FFFFFF;
}
}
}
}
</style>
\ No newline at end of file
......@@ -68,7 +68,16 @@
</view>
<view v-if="tabIndex ==2" class="flex-col list-box-2">
<view class="flex-row part-1">
<view v-if="consumerMemberStatus" class="flex-row part-1">
<view class="text-bg-1">
<text>专属</text>
</view>
<text class="text-2">超值回馈!</text>
<text class="text-3">(权益会员独享)</text>
</view>
<view v-else class="flex-row part-1">
<view class="text-bg-1">
<text>特惠</text>
</view>
......@@ -77,7 +86,28 @@
</view>
<view class="part-2">
<image class="img-bg" :src="assetsPath+'/vip/qy_bg_1.png'" mode="widthFix"></image>
<view class="absolute">
<view v-if="consumerMemberStatus" class="absolute">
<view class="flex-5">
<view class="flex-row">
<text class="text-1">次卡</text>
<text class="text-2">充值 畅玩无忧</text>
</view>
<text class="text-3">有效期:领取后1年内有效</text>
</view>
<view class="flex-3">
<view class="flex-col">
<!-- <text class="text-1"></text> -->
<text class="text-2">暂未上线</text>
<text class="text-2">敬请期待</text>
</view>
<!-- <view class="cu-btn-box" @tap="onSubmit">
<button class="cu-btn bg-pink">立即购买</button>
</view> -->
</view>
</view>
<view v-else class="absolute">
<view class="flex-5">
<view class="flex-row">
<text class="text-1">权益</text>
......@@ -88,8 +118,10 @@
<view class="flex-3">
<view class="flex-row">
<text class="text-1"></text>
<text class="text-2">{{equityAmountList.length? equityAmountList[0]:'99'}}.</text>
<text class="text-3">{{equityAmountList.length? equityAmountList[1]:'00'}}</text>
<text
class="text-2">{{equityAmountList.length? equityAmountList[0]:'99'}}.</text>
<text
class="text-3">{{equityAmountList.length? equityAmountList[1]:'00'}}</text>
</view>
<view class="cu-btn-box" @tap="onSubmit">
<button class="cu-btn bg-pink"> {{consumerMemberStatus? '权益续期':'立即开通'}}</button>
......@@ -102,7 +134,8 @@
<checkbox class='round yellow' :class="checked?'checked':''" :checked="checked"
value="checked" style="transform: scale(0.6);"></checkbox>
</checkbox-group>
<text>我已阅读</text><text class="text-pink" @tap="onNavToRule2">用户充值协议</text><text>,并同意协议内容</text>
<text>我已阅读</text><text class="text-pink"
@tap="onNavToRule2">用户充值协议</text><text>,并同意协议内容</text>
</view>
</view>
</view>
......@@ -154,7 +187,7 @@
</view>
</view>
<view class="adorn-1">
<image class="img" :src="assetsPath+'/vip/adorn_1.png'" mode="widthFix"></image>
</view>
......@@ -179,18 +212,19 @@
<button class="cu-btn bg-gray" @tap="onClose">取 消</button>
</view>
<view class="btn-box">
<button class="cu-btn bg-pink" open-type="getPhoneNumber" @getphonenumber="onGetPhoneNumber">授 权</button>
<button class="cu-btn bg-pink" open-type="getPhoneNumber" @getphonenumber="onGetPhoneNumber">
</button>
</view>
</view>
</view>
</uni-popup>
<uni-popup ref="popupPay" type="center">
<view class="popup-box-content">
<view class="popup-box popup-box-2">
<view class="close-box" @tap="onClose">
<text class="cuIcon-close text-xl text-icon" ></text>
<text class="cuIcon-close text-xl text-icon"></text>
</view>
<view class="title-header">
<text class="text-title text-black text-lg text-bold">购买详情</text>
......@@ -204,30 +238,38 @@
<view class="flex-row content-tip">
<text class="text-3">赠送:</text>
<view class="flex-col">
<view class="flex-row-center" v-if="rechargeConfList[rechargeIndex].giveType.includes('1')">
<view class="gift-box">
<image class="gift-icon" :src="assetsPath+'/gift_icon.png'" mode="widthFix"></image>
</view>
<text class="text-12">{{rechargeConfList[rechargeIndex].giveAmount}}</text>
<text class="text-13">钱包余额,下单可抵扣</text>
<view class="flex-row-center"
v-if="rechargeConfList[rechargeIndex].giveType.includes('1')">
<view class="gift-box">
<image class="gift-icon" :src="assetsPath+'/gift_icon.png'" mode="widthFix">
</image>
</view>
<text class="text-12">{{rechargeConfList[rechargeIndex].giveAmount}}</text>
<text class="text-13">钱包余额,下单可抵扣</text>
</view>
<view class="flex-row-center" v-if="rechargeConfList[rechargeIndex].giveType.includes('2')">
<view class="flex-row-center"
v-if="rechargeConfList[rechargeIndex].giveType.includes('2')">
<view class="gift-box">
<image class="gift-icon" :src="assetsPath+'/gift_icon.png'" mode="widthFix"></image>
<image class="gift-icon" :src="assetsPath+'/gift_icon.png'" mode="widthFix">
</image>
</view>
<text class="text-12">{{rechargeConfList[rechargeIndex].giveDuration}}小时</text>
<text class="text-13">时长,下单可抵扣</text>
</view>
<view class="flex-row-center" v-if="rechargeConfList[rechargeIndex].giveType.includes('3')">
<view class="flex-row-center"
v-if="rechargeConfList[rechargeIndex].giveType.includes('3')">
<view class="gift-box">
<image class="gift-icon" :src="assetsPath+'/gift_icon.png'" mode="widthFix"></image>
<image class="gift-icon" :src="assetsPath+'/gift_icon.png'" mode="widthFix">
</image>
</view>
<text class="text-12">{{rechargeConfList[rechargeIndex].giveRatio}}%</text>
<text class="text-13">充值金额积分比例赠送</text>
</view>
<view class="flex-row-center" v-if="rechargeConfList[rechargeIndex].giveType.includes('4')">
<view class="flex-row-center"
v-if="rechargeConfList[rechargeIndex].giveType.includes('4')">
<view class="gift-box">
<image class="gift-icon" :src="assetsPath+'/gift_icon.png'" mode="widthFix"></image>
<image class="gift-icon" :src="assetsPath+'/gift_icon.png'" mode="widthFix">
</image>
</view>
<text class="text-14">优惠券</text>
<text class="text-13">1张,下单可抵扣</text>
......@@ -236,7 +278,9 @@
</view>
</view>
<view v-else-if="tabIndex ==2" class="recharge-content">
<text v-if="consumerMemberStatus" class="text-1">权益续期,<text class="text-pink">{{userInfo.consumerMember.expirationDate}}</text> 过期,优惠享不停,待支付:</text>
<text v-if="consumerMemberStatus" class="text-1">权益续期,<text
class="text-pink">{{userInfo.consumerMember.expirationDate}}</text>
过期,优惠享不停,待支付:</text>
<text v-else class="text-1">购买权益,优惠享不停,待支付:</text>
<view class="payfee-text">
<text>{{list[0].requiredAmount}}</text>
......@@ -244,19 +288,21 @@
<view class="flex-row content-tip">
<text class="text-3">可享权益:</text>
<view class="flex-col">
<view class="flex-row-center" v-if="rechargeConfList[rechargeIndex].giveType.includes('1')">
<view class="flex-row-center">
<view class="gift-box">
<image class="gift-icon" :src="assetsPath+'/gift_icon.png'" mode="widthFix"></image>
<image class="gift-icon" :src="assetsPath+'/gift_icon.png'" mode="widthFix">
</image>
</view>
<text class="text-13">房间预定,会员日即可享98折起</text>
<text class="text-13">房间预定,会员日即可享98折起</text>
</view>
<view class="flex-row-center" v-if="rechargeConfList[rechargeIndex].giveType.includes('2')">
<view class="flex-row-center">
<view class="gift-box">
<image class="gift-icon" :src="assetsPath+'/gift_icon.png'" mode="widthFix"></image>
<image class="gift-icon" :src="assetsPath+'/gift_icon.png'" mode="widthFix">
</image>
</view>
<text class="text-13">房间预定,下单即可享会员积分赠送</text>
<text class="text-13">房间预定,下单即可享会员积分赠送</text>
</view>
<view class="flex-row-center" v-if="rechargeConfList[rechargeIndex].giveType.includes('3')">
<view class="flex-row-center">
<text class="text-13">更多权益请查看多动规则</text>
</view>
</view>
......@@ -265,13 +311,13 @@
</view>
<view class="btn-list-box">
<view class="btn-box">
<button class="cu-btn bg-pink" @tap="onConfirmPay">确认支付</button>
<button class="cu-btn bg-pink" @tap="onConfirmPay">确认支付</button>
</view>
</view>
</view>
</view>
</uni-popup>
<f-tabbar></f-tabbar>
</view>
</template>
......@@ -304,14 +350,14 @@
checked: false,
assetsPath: config.assetsPath,
list: [],
userInfo:{},
userInfo: {},
rechargeConfList: [],
tabIndex: 1,
rechargeIndex: 0,
index: 0,
phoneCode:'',
phoneCode: '',
consumerMemberStatus: false,
equityAmountList:[],
equityAmountList: [],
preferList: [{
iconUrl: config.assetsPath + "/vip/p_1.png",
title: "会员价",
......@@ -371,19 +417,19 @@
this.onLoading();
},
methods: {
onConfirmPay(){
if(this.tabIndex ==1){
onConfirmPay() {
if (this.tabIndex == 1) {
this.onCreateRecharge()
}else if(this.tabIndex ==2){
} else if (this.tabIndex == 2) {
this.onCreateEquityMembers()
}
},
onClose(){
onClose() {
this.$refs.popup.close()
this.$refs.popupPay.close()
},
onGetPhoneNumber(e){
if(e.detail.errMsg !== "getPhoneNumber:ok") return;
onGetPhoneNumber(e) {
if (e.detail.errMsg !== "getPhoneNumber:ok") return;
this.onClose();
let that = this;
this.phoneCode = e.detail.code;
......@@ -393,12 +439,12 @@
title: "授权中"
})
register({
loginCode:res.code,
loginCode: res.code,
phoneCode: this.phoneCode,
type: "routine",
}).then(res => {
uni.hideLoading();
console.log(JSON.stringify(res),"注册后的数据结构")
console.log(JSON.stringify(res), "注册后的数据结构")
if (res.data.code == 200) {
uni.setStorageSync('loginStatus', res.data.data.type || 'login')
uni.setStorageSync('tokenHeaders', "Authori-zation")
......@@ -406,12 +452,12 @@
key: uni.getStorageSync('tokenHeaders'),
data: res.data.data.token,
success: (res) => {
if(that.tabIndex ==1 ){
if (that.tabIndex == 1) {
that.onNavToRecharge();
}else{
} else {
that.onSubmit();
}
}
})
}
......@@ -423,8 +469,8 @@
getUserInfo().then(res => {
if (res.data.code == 200) {
this.userInfo = res.data.data;
if (this.userInfo.consumerMember && this.userInfo.consumerMember.isRights ) {
this.consumerMemberStatus = true;
if (this.userInfo.consumerMember && this.userInfo.consumerMember.isRights) {
this.consumerMemberStatus = true;
}
}
})
......@@ -442,8 +488,9 @@
console.log(res, 999999)
if (res.data.code == 200 && res.data.rows) {
this.list = res.data.rows
this.equityAmountList = Number(this.list[0].requiredAmount).toFixed(2).toString().split('.');
console.log(this.equityAmountList,9999)
this.equityAmountList = Number(this.list[0].requiredAmount).toFixed(2).toString().split(
'.');
console.log(this.equityAmountList, 9999)
}
this.onGetUserInfo();
})
......@@ -466,7 +513,7 @@
this.tabIndex = val;
this.checked = false;
},
onNavToRule() {
uni.navigateTo({
url: "/setting/rule/rule?keyData=vip_user_rule"
......@@ -477,7 +524,7 @@
url: "/setting/rule/rule?keyData=user_pay_protocol"
})
},
onNavToRule3(){
onNavToRule3() {
uni.navigateTo({
url: "/setting/rule/rule?keyData=user_equity_details"
})
......@@ -491,7 +538,7 @@
})
return;
}
if(uni.getStorageSync('loginStatus') != 'login'){
if (uni.getStorageSync('loginStatus') != 'login') {
this.$refs.popup.open();
return
}
......@@ -505,13 +552,13 @@
})
return;
}
if(uni.getStorageSync('loginStatus') != 'login'){
if (uni.getStorageSync('loginStatus') != 'login') {
this.$refs.popup.open();
return
}
this.$refs.popupPay.open();
this.$refs.popupPay.open();
},
onCreateRecharge(){
onCreateRecharge() {
uni.showLoading({
title: "提交中..."
})
......@@ -534,12 +581,12 @@
icon: "success",
title: "下单成功",
success: () => {
that.$refs.popupPay.close();
setTimeout(()=>{
that.$refs.popupPay.close();
setTimeout(() => {
uni.switchTab({
url:"/pages/my/myInfo"
url: "/pages/my/myInfo"
})
},1000)
}, 1000)
}
})
},
......@@ -555,10 +602,10 @@
}
});
}
})
},
onCreateEquityMembers(){
onCreateEquityMembers() {
let that = this;
uni.showLoading({
title: "提交中..."
......@@ -584,7 +631,7 @@
that.$refs.popupPay.close();
setTimeout(() => {
uni.switchTab({
url:"/pages/my/myInfo"
url: "/pages/my/myInfo"
})
}, 1000)
}
......@@ -603,7 +650,7 @@
});
} else {
uni.showToast({
icon:"none",
icon: "none",
title: res.data.msg
})
}
......@@ -700,20 +747,24 @@
}
}
}
.adorn-1{
.adorn-1 {
position: absolute;
top: -24upx;
right: 20upx;
.img{
.img {
width: 74upx;
max-height: 78upx;
}
}
.adorn-2{
.adorn-2 {
position: absolute;
bottom: -40upx;
left: 24upx;
.img{
.img {
width: 78upx;
max-height: 90upx;
}
......@@ -757,7 +808,8 @@
padding: 0 1%;
justify-content: center;
align-items: center;
.absolute-1{
.absolute-1 {
display: flex;
justify-content: center;
align-items: center;
......@@ -768,11 +820,13 @@
background: linear-gradient(90deg, #FF7800, #FF0000);
border-radius: 6rpx;
z-index: 8;
text{
text {
font-size: 18rpx;
color: #FFFFFF;
}
}
.item {
position: relative;
display: flex;
......@@ -1024,6 +1078,13 @@
}
}
.flex-col{
.text-2 {
color: #D27E1F;
font-size: 32upx;
font-weight: bold;
}
}
.cu-btn-box {
margin-top: 10upx;
......@@ -1179,180 +1240,209 @@
text-align: center;
}
}
.popup-box{
.popup-box {
display: flex;
flex-direction: column;
// background: linear-gradient(-45deg,rgba(255, 170, 0, 0.98), rgba(255,255,255,0.98));
background: linear-gradient(-45deg,#ffffff, #f1f1f1);
background: linear-gradient(-45deg, #ffffff, #f1f1f1);
border-radius: 12upx;
width: 80%;
margin: 0 auto;
.title-header{
.title-header {
display: flex;
justify-content: center;
align-items: center;
padding: 24upx 0;
border-bottom: 1px dashed #fce051;
}
.popup-content{
.popup-content {
display: flex;
align-items: center;
padding: 30upx 24upx;
min-height: 180upx;
}
.btn-list-box{
.btn-list-box {
display: flex;
flex-direction: row;
align-items: center;
width: 100%;
border-top: 1px solid #fce051;
.btn-box{
.btn-box {
display: flex;
flex: 1;
justify-content: center;
align-items: center;
padding: 24upx 0;
.cu-btn{
.cu-btn {
width: 80%;
}
.bg-gray{
.bg-gray {
// color: #ffffff;
}
.bg-pink{
.bg-pink {
background-color: rgba(224, 57, 151, 0.74);
}
}
}
}
.popup-box-content{
background-color: #ffffff;
width: 72vw;
border-radius: 36upx;
overflow: hidden;
}
.popup-box-2{
position: relative;
width: 100%;
background: linear-gradient(0deg, rgba(255,255,255,0.65), rgba(255,214,241,0.43));
.close-box{
position: absolute;
top: 16upx;
right: 20upx;
display: flex;
justify-content: center;
align-items: center;
width: 24px;
height: 24px;
font-size: 36upx;
.popup-box-content {
background-color: #ffffff;
width: 72vw;
border-radius: 36upx;
overflow: hidden;
}
.title-header{
display: flex;
justify-content: center;
align-items: center;
padding: 30upx 24upx 8upx;
border-bottom: none;
.text-title{
.popup-box-2 {
position: relative;
width: 100%;
background: linear-gradient(0deg, rgba(255, 255, 255, 0.65), rgba(255, 214, 241, 0.43));
.close-box {
position: absolute;
top: 16upx;
right: 20upx;
display: flex;
justify-content: center;
align-items: center;
width: 24px;
height: 24px;
font-size: 36upx;
color: #333333;
}
}
.popup-content{
padding: 0 24upx;
min-height: 240upx;
.recharge-content{
.title-header {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
.text-1{
font-weight: 400;
font-size: 24upx;
color: #666666;
padding: 30upx 24upx 8upx;
border-bottom: none;
.text-title {
font-size: 36upx;
color: #333333;
}
.payfee-text{
}
.popup-content {
padding: 0 24upx;
min-height: 240upx;
.recharge-content {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
padding: 10upx 0 16upx;
margin-bottom: 16upx;
border-bottom: 1px dashed #C9CACA;
text{
font-size: 52rpx;
color: #E40583;
.text-1 {
font-weight: 400;
font-size: 24upx;
color: #666666;
}
}
.flex-row{
.flex-col{
.text-12{
width: 77upx;
color: #000000;
font-size: 28upx;
font-weight: bold;
text-align: justify-all;
}
.text-13{
color: #999999;
font-size: 26upx;
margin-left: 4upx;
}
.text-14{
color: #000000;
.payfee-text {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
padding: 10upx 0 16upx;
margin-bottom: 16upx;
border-bottom: 1px dashed #C9CACA;
text {
font-size: 52rpx;
color: #E40583;
}
}
}
.content-tip{
display: flex;
flex-direction: column;
margin: 20upx 0 12upx;
.text-3{
font-size: 28upx;
color: #333333;
margin-bottom: 20upx;
.flex-row {
.flex-col {
.text-12 {
width: 77upx;
color: #000000;
font-size: 28upx;
font-weight: bold;
text-align: justify-all;
}
.text-13 {
color: #999999;
font-size: 26upx;
margin-left: 4upx;
}
.text-14 {
color: #000000;
}
}
}
.flex-col{
.flex-row-center{
margin: 8upx 0;
.gift-box{
display: flex;
justify-content: center;
align-items: center;
width: 22px;
height: 22px;
background: #FCE8F2;
border-radius: 6px;
.gift-icon{
display: block;
width: 70%;
max-height: 40upx;
.content-tip {
display: flex;
flex-direction: column;
margin: 20upx 0 12upx;
.text-3 {
font-size: 28upx;
color: #333333;
margin-bottom: 20upx;
}
.flex-col {
.flex-row-center {
margin: 8upx 0;
.gift-box {
display: flex;
justify-content: center;
align-items: center;
width: 22px;
height: 22px;
background: #FCE8F2;
border-radius: 6px;
.gift-icon {
display: block;
width: 70%;
max-height: 40upx;
}
}
}
}
}
}
}
}
.btn-list-box{
display: flex;
justify-content: center;
align-items: center;
width: 100%;
border-top: none;
.btn-box{
.btn-list-box {
display: flex;
flex: none;
width: 87%;
.cu-btn{
padding: 0;
width: 100%;
height: 88upx;
background: #E40583;
border-radius: 44upx;
font-size: 37upx;
color: #FFFFFF;
justify-content: center;
align-items: center;
width: 100%;
border-top: none;
.btn-box {
display: flex;
flex: none;
width: 87%;
.cu-btn {
padding: 0;
width: 100%;
height: 88upx;
background: #E40583;
border-radius: 44upx;
font-size: 37upx;
color: #FFFFFF;
}
}
}
}
}
</style>
\ No newline at end of file
<template>
</template>
<script>
</script>
<style>
page {
background-color: #f1f1f1;
}
</style>
<style lang="scss" scoped>
</style>
\ No newline at end of file
<template>
<view class="level-view">
<view class="flex-col user-info-box">
<view class="flex-row">
<view v-for="(item,k) in memberTypeList" :key="k" class="relative" :class="index ===k ?'active':''" @tap="onTypeChange(k)">
<image class="img-icon" :src="item.imgUrl" mode="widthFix"></image>
<view class="absolute">
<text :class="'text-'+item.value">{{item.label}}</text>
</view>
</view>
</view>
</view>
<view class="remeber-info-box">
<view v-for="(item,k) in list" :key="k" class="relative flex-7">
<image v-if="item.membershipLevel" class="level-bg" :src="levelPath[item.membershipLevel]" mode="scaleToFill"></image>
<view v-else class="level-bg level-bg-0"></view>
<view class="absolute level-content">
<view class="part-left">
<view class="level" :class="'level-'+item.membershipLevel">
<view class="text-label">
<text class="text-1">LV {{item.levelName}}</text>
<view v-if="item.discountRatio < 100" class="discount-ratio">
<text class="text-white"><text class="text-white text-xl text-bold">{{item.discountRatio}}</text></text>
</view>
</view>
<view class="member-config">
<text v-if="item.membershipLevel === userInfo.memberConfig.membershipLevel && index < 2" class="text-2">还差 {{userInfo.memberConfig.nextLimitRequirements - userInfo.consumerWallet.remainingIntegral}} 积分可升级为{{userInfo.memberConfig.nextMembershipName}}</text>
</view>
<view class="flex-row">
<text class="text-3">升级所需积分</text>
<text class="text-4">{{item.limitRequirements}}</text>
</view>
</view>
<!-- <view v-else-if="item.membershipLevel ===3" class="level level-3">
<text class="text-1">LV {{userInfo.memberConfig.levelName}}</text>
<text class="text-2">还差 {{userInfo.memberConfig.nextLimitRequirements - Number(userInfo.consumerWallet.remainingIntegral)}} 积分可升级为{{userInfo.memberConfig.nextMembershipName}}</text>
<view class="flex-row">
<text class="text-3">当前积分</text>
<text class="text-4">{{userInfo.consumerWallet.remainingIntegral}}</text>
</view>
</view> -->
<!-- <view v-else-if="item.membershipLevel ===2" class="level level-2">
<text class="text-1">LV {{userInfo.memberConfig.levelName}}</text>
<text class="text-2">还差 {{userInfo.memberConfig.nextLimitRequirements - Number(userInfo.consumerWallet.remainingIntegral)}} 积分可升级为{{userInfo.memberConfig.nextMembershipName}}</text>
<view class="flex-row">
<text class="text-3">当前积分</text>
<text class="text-4">{{userInfo.consumerWallet.remainingIntegral}}</text>
</view>
</view> -->
<!--
<view v-else-if="item.membershipLevel ===1" class="level level-1">
<text class="text-1">LV {{userInfo.memberConfig.levelName}}</text>
<text class="text-2">还差 {{userInfo.memberConfig.nextLimitRequirements - Number(userInfo.consumerWallet.remainingIntegral)}} 积分可升级为{{userInfo.memberConfig.nextMembershipName}}</text>
<view class="flex-row">
<text class="text-3">当前积分</text>
<text class="text-4">{{userInfo.consumerWallet.remainingIntegral}}</text>
</view>
</view> -->
<!-- <view v-else-if="item.membershipLevel === 0" class="level level-0">
<text class="text-1">LV 0</text>
<text class="text-2">您还没有会员等级!</text>
<text class="text-2">还差 {{userInfo.memberConfig.nextLimitRequirements - Number(userInfo.consumerWallet.remainingIntegral)}} 积分可升级为{{userInfo.memberConfig.nextMembershipName}}</text>
<view class="flex-row">
<text class="text-3">当前积分</text>
<text class="text-4">{{userInfo.consumerWallet.remainingIntegral}}</text>
</view>
</view> -->
<!-- <view v-else class="level level-0">
<text class="text-1">LV 0</text>
<text class="text-2">您还不是会员哦,快来加入吧!</text>
</view> -->
</view>
<view class="part-right">
<image v-if="item.membershipLevel ===4" class="tag-icon" :src="assetsPath+'/user/tag_icon_4.png'" mode="widthFix"></image>
<image v-else-if="item.membershipLevel ===3" class="tag-icon" :src="assetsPath+'/user/tag_icon_3.png'" mode="widthFix"></image>
<image v-else-if="item.membershipLevel ===2" class="tag-icon" :src="assetsPath+'/user/tag_icon_2.png'" mode="widthFix"></image>
<image v-else-if="item.membershipLevel ===1" class="tag-icon" :src="assetsPath+'/user/tag_icon_1.png'" mode="widthFix"></image>
<image v-else class="tag-icon" :src="assetsPath+'/user/tag_icon_0.png'" mode="widthFix"></image>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
import {memberConfigList} from "@/api/memberConfig.js"
import config from "@/config/index.config"
import {getUserInfo} from "@/api/index.js"
export default {
data(){
return {
userInfo:{},
list:[],
assetsPath:config.assetsPath,
levelPath:{
0: config.assetsPath+'/user/tj_bg_1.png',
1: config.assetsPath+'/user/tj_bg_1.png',
2: config.assetsPath+'/user/tongj_bg_1.png',
3: config.assetsPath+'/user/yj_bg_1.png',
4: config.assetsPath+'/user/jj_bg_1.png',
},
memberTypeList:[
{
value:1,
label:'充值会员',
imgUrl: config.assetsPath+'/tag_icon_1.png'
},
{
value:2,
label:'权益会员',
imgUrl: config.assetsPath+'/tag_icon_2.png'
},
{
value:0,
label:'普通会员',
imgUrl: config.assetsPath+'/tag_icon_3.png'
}
],
index:0
}
},
onLoad() {
this.onGetUserInfo();
},
methods:{
onTypeChange(i){
if(this.index === i) return;
this.index = i;
this.onLoading();
},
onLoading(){
memberConfigList({
memberType: this.memberTypeList[this.index].value
}).then(res => {
console.log(res,9999)
if(res.data.code == 200 && res.data.data){
this.list = res.data.data.map(item =>{
let discountText = item.discountRatio;
if(discountText > 0 && discountText < 100){
discountText = Number(discountText.toString().split('').reverse().join('')).toString();
if(discountText.length ==2){
discountText = item.discountRatio;
}
}
return {
...item,
discountRatio: discountText
}
})
}
})
},
onGetUserInfo() {
getUserInfo().then(res => {
if (res.data.code == 200) {
this.userInfo = res.data.data;
this.onLoading();
}
})
}
}
}
</script>
<style>
page {
background-color: #f1f1f1;
}
</style>
<style lang="scss" scoped>
.level-view{
display: flex;
flex-direction: column;
width: 100%;
}
.user-info-box{
width: 90%;
padding: 36upx 0 24upx;
margin: 0 auto;
.relative{
margin-right: 4upx;
.img-icon{
display: block;
width: 148upx;
max-height: 40upx;
}
}
.active{
transform: scale(1.2);
}
.absolute{
display: flex;
justify-content: center;
align-items: center;
text{
font-weight: normal;
font-size: 20rpx;
margin: 0 0 2upx 30upx;
}
.text-1{
color: #8C1E41;
}
.text-2{
color: #472F1E;
}
.text-3{
color: #3E3A39;
}
}
.grayscale{
filter: grayscale(100%);
}
.tip-date{
display: flex;
flex-direction: row;
align-items: center;
font-weight: normal;
font-size: 20rpx;
color: #A3A3A3;
margin-top: 10upx;
.text-bold{
margin: 0 4upx;
}
.text-blue{
margin-left: 6upx;
}
}
}
.remeber-info-box{
display: flex;
flex-direction: column;
width: 90%;
margin: 10upx auto 10upx;
.flex-7{
display: flex;
flex: 1;
height: 100%;
margin: 12upx 0;
.level-bg{
display: block;
width: 100%;
height: 136rpx;
}
.level-bg-0{
background: #F9F9F9;
border-radius: 14upx;
border: 1px solid #A9ACB4;
}
.level-content{
display: flex;
justify-content: space-between;
.part-left{
height: 100%;
.level{
display: flex;
flex-direction: column;
justify-content: center;
padding-left: 24upx;
height: 100%;
.text-label{
display: flex;
flex-direction: row;
align-items: center;
.discount-ratio{
display: flex;
flex-direction: row;
align-items: center;
margin-left: 24upx;
.text-bold{
margin: 0 4upx;
}
}
}
.member-config{
min-height: 24upx;
}
.text-1{
font-weight: 900;
font-size: 32upx;
color: #A3A3A3;
font-style: italic;
}
.text-2{
font-weight: normal;
font-size: 20upx;
margin-top: 4upx;
}
.flex-row{
display: flex;
align-items: center;
justify-content: center;
height: 32upx;
border-radius: 4upx;
margin-top: 8upx;
padding: 0 12upx;
.text-3{
font-weight: normal;
font-size: 18upx;
}
.text-4{
font-weight: normal;
font-size: 26rpx;
font-style: italic;
margin-left: 10upx;
}
}
}
.level-4{
.text-1{
color: #9D680D;
}
.text-2{
color: #BC8902;
}
.flex-row{
background: #FDF4C4;
border: 1px solid #CB8402;
.text-3{
color: #CB8402;
}
.text-4{
color: #CB8402;
}
}
}
.level-3{
.text-1{
color: #898E9D;
}
.text-2{
color: #898E9D;
}
.flex-row{
background: #DDDEEB;
border: 1px solid #81828A;
.text-3{
color: #7A7B84;
}
.text-4{
color: #81828A;
}
}
}
.level-2{
.text-1{
color: #FEEDE3;
}
.text-2{
color: #FFFFFF;
}
.flex-row{
background: #FFEED9;
border: 1px solid #DE966F;
.text-3{
color: #985E39;
}
.text-4{
color: #6F4133;
}
}
}
.level-1{
.text-1{
background: linear-gradient(47deg, #E9EEEE 0%, #FBFFFC 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.text-2{
color: #F1F6F4;
}
.flex-row{
display: flex;
flex-direction: row;
align-items: center;
background: #F5E0ED;
border: 1px solid #F46DB9;
.text-3{
color: #E40583;
}
.text-4{
color: #C72380;
}
}
}
.level-0{
.text-1{
color: #969696;
}
.text-2{
color: #969696;
}
.flex-row{
display: flex;
flex-direction: row;
align-items: center;
background: #E3E6E8;
border-radius: 4upx;
border: 1px solid #E3E6E8;
.text-3{
color: #333333;
}
.text-4{
color: #333333;
}
}
}
}
.part-right{
display: flex;
align-items: center;
height: 100%;
padding-right: 20upx;
.tag-icon{
display: block;
width: 120upx;
max-height: 100upx;
}
}
}
}
.flex-3{
display: flex;
flex-direction: column;
justify-content: center;
width: 184rpx;
height: 136rpx;
background: linear-gradient(71deg, #FFFFFF 0%, #FBF5DD 0%, #FCDFC5 0%, #FFCD9C 98%);
border-radius: 14rpx;
border: 1px solid #FDD8B8;
margin-left: 20upx;
padding-left: 20upx;
.text-1{
font-weight: bolder;
font-size: 32rpx;
font-style: italic;
color: #A3A3A3;
background: linear-gradient(47deg, #FD7C01 0%, #FCAB00 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.text-2{
font-size: 20rpx;
color: #985E39;
margin-top: 4upx;
}
.flex-row{
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
width: 102rpx;
height: 32rpx;
background: #FFEED9;
border-radius: 4rpx;
border: 1px solid #E6A37F;
margin-top: 8upx;
.text-3{
font-size: 18rpx;
color: #985E39;
}
.text-4{
font-size: 26rpx;
color: #701700;
margin: 2upx 4upx 0;
}
}
}
}
</style>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment