会员到期

components/page-component/app-user-center-top/app-user-center-top.vue

@@ -114,7 +114,7 @@
                         </button>
                         <!-- #endif-->
                     </view>
-                    <app-form-id @click="goMember" v-if="mall.setting.is_icon_members_grade == 1">
+					<app-form-id @click="goMember" v-if="mall.setting.is_icon_members_grade == 1">
                         <view class="member-info inline-flex cross-center dir-left-nowrap">
                             <view>
                                 <image :src="getMemberPicUrl" class="member-icon" mode="aspectFill"></image>
@@ -122,6 +122,9 @@
                             <view class="t-omit">{{userInfo.identity.level_name}}</view>
                         </view>
                     </app-form-id>
+					<view class="" v-if="userInfo.identity.member_level>0" style="font-size: 22rpx;color: #fff;">
+						到期时间：{{formattime(userInfo.user_level_date.end_date)}}
+					</view>
                 </template>
                 <template v-else>
                     <app-form-id>
@@ -196,6 +199,10 @@
             }
         },
         methods: {
+			formattime(date){
+				date = date.split(' ')[0]
+				return date
+			},
             callLogin() {
                 this.$store.dispatch('user/accessToken');
             },

pages/member/index/index.vue

@@ -15,6 +15,7 @@
 		                    <text v-if="level == 0">{{userInfo.identity.level_name}}</text>
 		                    <text v-if="level > 0" class="t-omit member-level-name">{{detail.name}}</text>
 		                </view>
+						<text v-if="level > 0" style="margin-left: 15rpx;" class="t-omit">到期时间：{{formattime(userInfo.user_level_date.end_date)}}</text>
 		                <view class="progress" v-if="nextMember.money > 0">
 		                	<view class="progress-line">
 		                		<view :style="[{'width': prop + `%`}]" class="progress-active"></view>
@@ -191,6 +192,10 @@
             }
         },
         methods: {
+			formattime(date){
+				date = date.split(' ')[0]
+				return date
+			},
             b() {
                 let currentRoute = this.currentRoute;
                 for (let i = 0; i < this.tabBarNavs.length; i++) {
@@ -405,6 +410,8 @@
 		.user-member-info {
 		    margin-top: #{16rpx};
 		    font-size: #{20rpx};
+			display: flex;
+			align-items: center;
 		}
 		.avatar {
 		    height: #{100rpx};
@@ -425,7 +432,7 @@
 	    padding: 0 #{16rpx} 0 #{54rpx};
 	    background-color: #454955;
 	    display: inline-block;
-	    margin-bottom: #{15rpx};
+	    // margin-bottom: #{15rpx};
 	}
 
 	.member-detail .level-icon{

pages/member/upgrade/upgrade.vue

@@ -1,335 +1,347 @@
-<template>
-	<app-layout>
-	    <view class="nav">
-	        <swiper class='member-list' :current="index" @change="change" previous-margin='20px' next-margin="20px">
-	            <swiper-item class='member-item' v-for="item in list" :key="item.id">
-	            	<!-- #ifdef MP-ALIPAY -->
-	                <image class='memeber-img' :src='item.bg_pic_url ? item.bg_pic_url : item.pic_url' style="margin-top: 0"></image>
-	                <!-- #endif -->
-	            	<!-- #ifndef MP-ALIPAY -->
-	                <image class='memeber-img' :src='item.bg_pic_url ? item.bg_pic_url : item.pic_url'></image>
-	                <!-- #endif -->
-	            </swiper-item>
-	        </swiper>
-	    </view>
-	    <view class='method' v-if="detail.is_purchase != 0 || detail.auto_update != 0">
-	        <view class='member-info'>
-	            <view>{{detail.name}}</view>
-	        </view>
-	        <view class='method-title'>
-	            <image src='./../image/how.png'></image>
-	            <text>如何获得该卡</text>
-	        </view>
-	        <view class='method-list'>
-	            <view class="dir-left cross-center way" v-if="detail.is_purchase != 0">
-	                <image class="way-num" :src='memberImg.one'></image>
-	                <view class='way-money'>直接购买
-	                    <text>￥{{detail.price}}</text>
-	                </view>
-	            </view>
-	            <view class="dir-left cross-center way" v-if="detail.auto_update != 0">
-	                <image class="way-num" v-if="detail.is_purchase != 0" :src='memberImg.two'></image>
-	                <image class="way-num" v-else :src='memberImg.one'></image>
-	                <view class="way-money">累积消费满
-	                    <text>￥{{detail.money}}</text>
-	                </view>
-	            </view>
-	        </view>
-	    </view>
-	    <view class='right'>
-	        <view class='method-title'>
-	            <image src='./../image/right.png'></image>
-	            <text>特权说明</text>
-	        </view>
-	        <view class='right-list'>
-	            <view v-for="item in detail.rights" :key="item.id">{{item.content}}</view>
-	        </view>
-	    </view>
-	    <view class='right-away' v-if="detail.is_purchase == 1 && detail.level > level">
-	        <view class="to-recharge" @click="payMember(detail.level)">
-	            <button class='way-btn'>￥{{detail.price}} 立即升级</button>
-	        </view>
-	    </view>
-	</app-layout>
-</template>
-
-<script>
-
-    import {  mapGetters, mapState} from "vuex";
-
-    export default {
-        data() {
-            return {
-		        auto: false,
-		        list: [],
-		        index: 0,
-		        level: 0,
-		        other: 0,
-		        current: 'wechat',
-		        detail: {
-		        	price: '',
-		        	money: ''
-		        }
-            }
-        },
-        name: "upgrade",
-        computed: {
-            ...mapState({
-                memberImg: state => state.mallConfig.__wxapp_img.member,
-            })
-        },
-        methods: {
-            payMember(member_level) {
-		        let that = this;
-				uni.showLoading({
-                    title: '领取中...'
-                });
-                that.$request({
-                    url: that.$api.member.purchase,
-                    data: {
-                        member_level: member_level
-                    },
-            		method: 'post'
-                }).then(response => {
-                    uni.hideLoading();
-                    if (response.code === 0) {
-                        if (response.data.retry && response.data.retry === 1) {
-                            that.getPayDataTimer = setTimeout(() => {
-                                that.payMember(member_level);
-                            }, 1000);
-                        } else {
-                            that.pay(response.data.pay_id,member_level);
-                        }
-                    } else {
-                        uni.showModal({
-                            title: '提示',
-                            content: response.msg,
-                            showCancel: false,
-                        });
-                    }
-                }).catch(e => {
-                    uni.hideLoading();
-                    uni.showModal({
-                        title: '提示',
-                        content: e.errMsg,
-                        showCancel: false,
-                    });
-                });
-            },
-
-            pay(id,level) {
-            	let that = this;
-                that.$payment.pay(id).then(res => {
-                    uni.showToast({
-                        title: '支付成功',
-                        duration: 1000
-                    });
-	        		that.level = level;
-					 that.$store.dispatch('user/refreshMember',that.detail.level,that.detail.name);
-                }).catch(res => {
-                    uni.showToast({
-                        title: '支付失败',
-                        icon: 'none',
-                        duration: 1000
-                    });
-                });
-            },
-
-		    change(e) {
-		        let that = this;
-		        that.index = e.detail.current;
-		        that.detail = that.list[that.index];
-		    },
-
-            getList() {
-                let that = this;
-                that.$request({
-                    url: that.$api.member.all,
-                    method: 'get',
-                }).then(response=>{
-                    uni.hideLoading();
-                    that.$hideLoading();
-                    if(response.code == 0) {
-		                that.list = response.data.list;
-		                that.index = 0;
-		                if (that.other > 0) {
-		                    for (let i = 0; i < that.list.length; i++) {
-		                        if (that.other == that.list[i].level) {
-		                            that.index = i;
-		                        }
-		                    }
-		                }else {
-		                	for (let i = 0; i < that.list.length; i++) {
-		                        if (that.level == that.list[i].level) {
-		                            that.index = i;
-		                        }
-		                    }
-		                }
-		                that.detail = that.list[that.index];
-                    }else {
-                        uni.showToast({
-                            title: response.msg,
-                            icon: 'none',
-                            duration: 1000
-                        });
-                    }
-                }).catch(response => {
-                    uni.hideLoading();
-                    that.$hideLoading();
-                });
-            },
-        },
-        onLoad(options) {
-	        let that = this;
-	        if (options.level) {
-	            that.level = options.level
-	        }
-	        if (options.other) {
-	            that.other = options.other
-	        }
-            that.$showLoading({
-                text: '加载中...'
-            });
-	        that.getList();
-	    },
-    }
-</script>
-
-<style scoped lang="scss">
-	.nav {
-	    margin-top: #{32rpx};
-	    position: relative;
-	    text-align: center;
-	    height: #{370rpx};
-	    image {
-		    margin-top: #{20rpx};
-		    height: #{330rpx};
-		    width: #{640rpx};
-		    border-radius: #{16rpx};
-		    box-shadow: 0 0 #{20rpx} rgba(0, 0, 0, 0.3);
-	    }
-	    .to-recharge {
-		    position: absolute;
-		    bottom: #{102rpx};
-		    left: 0;
-		    right: 0;
-		    margin: 0 auto;
-		    height: #{70rpx};
-		    width: #{240rpx};
-		}
-	}
-
-	.member-list {
-	    height: #{370rpx};
-	}
-
-	.upgrade-btn {
-	    height: #{70rpx};
-	    line-height: #{68rpx};
-	    width: #{240rpx};
-	    border: #{1rpx} solid #b4914f;
-	    border-radius: #{36rpx};
-	    font-size: #{32rpx};
-	    color: #b4914f;
-	    background-color: #f8f2e2;
-	}
-
-	.method {
-	    margin-top: #{96rpx};
-	}
-
-	.member-info {
-	    font-size: #{36rpx};
-	    color: #353535;
-	    padding: 0 #{55rpx};
-	    margin-bottom: #{40rpx};
-	}
-
-	.method-title {
-	    height: #{48rpx};
-	    font-size: #{32rpx};
-	    color: #353535;
-	    padding: 0 #{55rpx};
-	}
-
-	.method-title image {
-	    height: #{48rpx};
-	    width: #{48rpx};
-	    float: left;
-	    margin-right: #{40rpx};
-	}
-
-	.method-list {
-	    margin-top: #{32rpx};
-	    margin-left: #{143rpx};
-	}
-
-	.way-num {
-	    height: #{36rpx};
-	    width: #{36rpx};
-	    display: block;
-	    margin-top: #{8rpx};
-	    margin-right: #{16rpx};
-	}
-
-	.way {
-	    height: #{60rpx};
-	    line-height: #{60rpx};
-	}
-
-	.way-money {
-	    font-size: #{32rpx};
-	    color: #353535;
-	}
-
-	.way-money text {
-	    font-size: #{36rpx};
-	    color: #b4914f;
-	    font-family: DIN
-	}
-
-	.right {
-	    margin-top: #{64rpx};
-	    padding-bottom: #{150rpx};
-	}
-
-	.right-list {
-	    margin-left: #{143rpx};
-	    color: #666;
-	    font-size: #{28rpx};
-	    width: #{540rpx};
-	}
-
-	.right-away {
-	    height: #{140rpx};
-	    position: fixed;
-	    bottom: 0;
-	    left: 0;
-	    right: 0;
-	    background-color: #ffffff;
-	    .way-btn {
-		    margin: #{30rpx} auto 0;
-		    height: #{80rpx};
-		    line-height: #{80rpx};
-		    width: #{640rpx};
-		    background-color: #b4914f;
-		    border-radius: #{40rpx};
-		    font-size: #{32rpx};
-		    color: #ffffff;
-		}
-	}
-
-	.member-name {
-	    position: absolute;
-	    text-align: center;
-	    left: 0;
-	    right: 0;
-	    font-size: #{44rpx};
-	    color: #fff;
-	    top: #{85rpx};
-	}
-
-	.memeber-info {
-	    display: none;
-	}
-</style>
+<template>
+	<app-layout>
+		<view class="nav">
+			<swiper class='member-list' :current="index" @change="change" previous-margin='20px' next-margin="20px">
+				<swiper-item class='member-item' v-for="item in list" :key="item.id">
+					<!-- #ifdef MP-ALIPAY -->
+					<image class='memeber-img' :src='item.bg_pic_url ? item.bg_pic_url : item.pic_url'
+						style="margin-top: 0"></image>
+					<!-- #endif -->
+					<!-- #ifndef MP-ALIPAY -->
+					<image class='memeber-img' :src='item.bg_pic_url ? item.bg_pic_url : item.pic_url'></image>
+					<!-- #endif -->
+				</swiper-item>
+			</swiper>
+		</view>
+		<view class='method' v-if="detail.is_purchase != 0 || detail.auto_update != 0">
+			<view class='member-info'>
+				<view>{{detail.name}}</view>
+			</view>
+			<view class='method-title'>
+				<image src='./../image/how.png'></image>
+				<text>如何获得该卡</text>
+			</view>
+			<view class='method-list'>
+				<view class="dir-left cross-center way" v-if="detail.is_purchase != 0">
+					<image class="way-num" :src='memberImg.one'></image>
+					<view class='way-money'>直接购买
+						<text>￥{{detail.price}}</text>
+					</view>
+				</view>
+				<view class="dir-left cross-center way" v-if="detail.auto_update != 0">
+					<image class="way-num" v-if="detail.is_purchase != 0" :src='memberImg.two'></image>
+					<image class="way-num" v-else :src='memberImg.one'></image>
+					<view class="way-money">累积消费满
+						<text>￥{{detail.money}}</text>
+					</view>
+				</view>
+			</view>
+		</view>
+		<view class='right'>
+			<view class='method-title'>
+				<image src='./../image/right.png'></image>
+				<text>特权说明</text>
+			</view>
+			<view class='right-list'>
+				<view v-for="item in detail.rights" :key="item.id">{{item.content}}</view>
+			</view>
+		</view>
+		<view class='right-away' v-if="detail.is_purchase == 1 && detail.level > level">
+			<view class="to-recharge" @click="payMember(detail.level,1)">
+				<button class='way-btn'>￥{{detail.price}} 立即升级</button>
+			</view>
+		</view>
+		<view class='right-away' v-else-if="detail.level == level">
+			<view class="to-recharge" @click="payMember(detail.level,2)">
+				<button class='way-btn'>￥{{detail.price}} 立即续费</button>
+			</view>
+		</view>
+	</app-layout>
+</template>
+
+<script>
+	import {
+		mapGetters,
+		mapState
+	} from "vuex";
+
+	export default {
+		data() {
+			return {
+				auto: false,
+				list: [],
+				index: 0,
+				level: 0,
+				other: 0,
+				current: 'wechat',
+				detail: {
+					price: '',
+					money: ''
+				},
+			}
+		},
+		name: "upgrade",
+		computed: {
+			...mapState({
+				memberImg: state => state.mallConfig.__wxapp_img.member,
+			})
+		},
+		methods: {
+			payMember(member_level, type) {
+				let that = this;
+				uni.showLoading({
+					title: '领取中...'
+				});
+				that.$request({
+					url: that.$api.member.purchase,
+					data: {
+						member_level: member_level,
+						type: type
+					},
+					method: 'post'
+				}).then(response => {
+					uni.hideLoading();
+					if (response.code === 0) {
+						if (response.data.retry && response.data.retry === 1) {
+							that.getPayDataTimer = setTimeout(() => {
+								that.payMember(member_level);
+							}, 1000);
+						} else {
+							that.pay(response.data.pay_id, member_level);
+						}
+					} else {
+						uni.showModal({
+							title: '提示',
+							content: response.msg,
+							showCancel: false,
+						});
+					}
+				}).catch(e => {
+					uni.hideLoading();
+					uni.showModal({
+						title: '提示',
+						content: e.errMsg,
+						showCancel: false,
+					});
+				});
+			},
+
+			pay(id, level) {
+				let that = this;
+				that.$payment.pay(id).then(res => {
+					uni.showToast({
+						title: '支付成功',
+						duration: 1000
+					});
+					that.level = level;
+					that.$store.dispatch('user/refreshMember', that.detail.level, that.detail.name);
+				}).catch(res => {
+					uni.showToast({
+						title: '支付失败',
+						icon: 'none',
+						duration: 1000
+					});
+				});
+			},
+
+			change(e) {
+				let that = this;
+				that.index = e.detail.current;
+				that.detail = that.list[that.index];
+			},
+
+			getList() {
+				let that = this;
+				that.$request({
+					url: that.$api.member.all,
+					method: 'get',
+				}).then(response => {
+					uni.hideLoading();
+					that.$hideLoading();
+					if (response.code == 0) {
+						that.list = response.data.list;
+						that.index = 0;
+						if (that.other > 0) {
+							for (let i = 0; i < that.list.length; i++) {
+								if (that.other == that.list[i].level) {
+									that.index = i;
+								}
+							}
+						} else {
+							for (let i = 0; i < that.list.length; i++) {
+								if (that.level == that.list[i].level) {
+									that.index = i;
+								}
+							}
+						}
+						that.detail = that.list[that.index];
+					} else {
+						uni.showToast({
+							title: response.msg,
+							icon: 'none',
+							duration: 1000
+						});
+					}
+				}).catch(response => {
+					uni.hideLoading();
+					that.$hideLoading();
+				});
+			},
+		},
+		onLoad(options) {
+			let that = this;
+			if (options.level) {
+				that.level = options.level
+			}
+			if (options.other) {
+				that.other = options.other
+			}
+			that.$showLoading({
+				text: '加载中...'
+			});
+			that.getList();
+		},
+	}
+</script>
+
+<style scoped lang="scss">
+	.nav {
+		margin-top: #{32rpx};
+		position: relative;
+		text-align: center;
+		height: #{370rpx};
+
+		image {
+			margin-top: #{20rpx};
+			height: #{330rpx};
+			width: #{640rpx};
+			border-radius: #{16rpx};
+			box-shadow: 0 0 #{20rpx} rgba(0, 0, 0, 0.3);
+		}
+
+		.to-recharge {
+			position: absolute;
+			bottom: #{102rpx};
+			left: 0;
+			right: 0;
+			margin: 0 auto;
+			height: #{70rpx};
+			width: #{240rpx};
+		}
+	}
+
+	.member-list {
+		height: #{370rpx};
+	}
+
+	.upgrade-btn {
+		height: #{70rpx};
+		line-height: #{68rpx};
+		width: #{240rpx};
+		border: #{1rpx} solid #b4914f;
+		border-radius: #{36rpx};
+		font-size: #{32rpx};
+		color: #b4914f;
+		background-color: #f8f2e2;
+	}
+
+	.method {
+		margin-top: #{96rpx};
+	}
+
+	.member-info {
+		font-size: #{36rpx};
+		color: #353535;
+		padding: 0 #{55rpx};
+		margin-bottom: #{40rpx};
+	}
+
+	.method-title {
+		height: #{48rpx};
+		font-size: #{32rpx};
+		color: #353535;
+		padding: 0 #{55rpx};
+	}
+
+	.method-title image {
+		height: #{48rpx};
+		width: #{48rpx};
+		float: left;
+		margin-right: #{40rpx};
+	}
+
+	.method-list {
+		margin-top: #{32rpx};
+		margin-left: #{143rpx};
+	}
+
+	.way-num {
+		height: #{36rpx};
+		width: #{36rpx};
+		display: block;
+		margin-top: #{8rpx};
+		margin-right: #{16rpx};
+	}
+
+	.way {
+		height: #{60rpx};
+		line-height: #{60rpx};
+	}
+
+	.way-money {
+		font-size: #{32rpx};
+		color: #353535;
+	}
+
+	.way-money text {
+		font-size: #{36rpx};
+		color: #b4914f;
+		font-family: DIN
+	}
+
+	.right {
+		margin-top: #{64rpx};
+		padding-bottom: #{150rpx};
+	}
+
+	.right-list {
+		margin-left: #{143rpx};
+		color: #666;
+		font-size: #{28rpx};
+		width: #{540rpx};
+	}
+
+	.right-away {
+		height: #{140rpx};
+		position: fixed;
+		bottom: 0;
+		left: 0;
+		right: 0;
+		background-color: #ffffff;
+
+		.way-btn {
+			margin: #{30rpx} auto 0;
+			height: #{80rpx};
+			line-height: #{80rpx};
+			width: #{640rpx};
+			background-color: #b4914f;
+			border-radius: #{40rpx};
+			font-size: #{32rpx};
+			color: #ffffff;
+		}
+	}
+
+	.member-name {
+		position: absolute;
+		text-align: center;
+		left: 0;
+		right: 0;
+		font-size: #{44rpx};
+		color: #fff;
+		top: #{85rpx};
+	}
+
+	.memeber-info {
+		display: none;
+	}
+</style>