universal-wechat-uniapp-241007/components/user/sharePopup.vue

<template>
	<uv-popup ref="popup" :round="30">

		<view class="page">
			<view class="UniversalWall">
				<view class="logo">
					<image src="/static/image/logo.jpg" mode="aspectFill"></image>
				</view>
				<view class="wall">
					瑶都万能墙
				</view>
				<view class="invite">
					<button open-type="share">
						<uv-icon name="attach"></uv-icon>
						邀请好友
					</button>
				</view>
			</view>
			
			<view class="vipList">
				<view 
				@click="selectVip(item)"
				:class="{vip : true, act : item == vipKeyName}"
				:key="index"
				v-for="(item, index) in vipList">
					<view class="title">
						{{ headInfo[item].keyName }}
						
						<view :class="vipStatus.class"
						v-if="vipList.indexOf(item) + 1 == vipLog.type">
							{{ vipStatus.title }}
						</view>
					</view>
					<view class="price">
						￥{{ headInfo[item].keyValue }}
					</view>
					<view class="end_time"
					v-if="vipList.indexOf(item) + 1 == vipLog.type">
						{{ vipLog.endTime }}到期
					</view>
					<uv-parse :content="headInfo[item].keyDetails"></uv-parse>
					
					<view class="">
						
					</view>
				</view>
			</view>
			
			<view class="uni-color-btn"
			@click="submit">
			
				<text v-if="vipStatus.success 
				&& vipLog.type != vipList.indexOf(vipKeyName) + 1">
					升级会员￥{{ headInfo[vipKeyName].keyValue }}/每月
				</text>
				
				<text v-else>
					{{ vipStatus.submit }}￥{{ headInfo[vipKeyName].keyValue }}/每月
				</text>
			</view>
		</view>

	</uv-popup>
</template>

<script>
	import { mapState } from 'vuex'
	export default {
		data() {
			return {
				vipKeyName : 'vip',
				vipList : ['vip', 'vipBig'],
			}
		},
		computed : {
			...mapState(['headInfo', 'vipLogList']),
			vipLog(){
				return this.vipLogList.length ? this.vipLogList[0] : {}
			},
			vipStatus(){
				
				if(!this.vipLog.endTime){
					return {
						title : '',
						class : 'status',
						submit : '开通',
					}
				}
				
				let endTime = new Date(this.vipLog.endTime).getTime()
				let time = new Date().getTime()
				
				if(endTime > time){
					return {
						title : '进行中',
						class : 'status',
						submit : '续费',
						success : true,//进行中
					}
				}else{
					return {
						title : '过期',
						class : 'status end',
						submit : '续费',
					}
				}
			}
		},
		methods: {
			selectVip(item){
				this.vipKeyName = item
			},
			open() {
				this.$refs.popup.open('bottom')
				this.$store.commit('getMemberInfo')
			},
			submit(){
				this.$api('openMember', {
					type : this.vipList.indexOf(this.vipKeyName) + 1,
				}, res => {
					if(res.code == 200){
						uni.requestPaymentWxPay(res)
						.then(res => {
							this.$refs.popup.close()
							this.$store.commit('getMemberInfo')
							uni.showToast({
								title: '会员开通成功',
								icon: 'none'
							})
						})
					}
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.page {
		padding: 20rpx;
		.vipList{
			display: flex;
			.vip{
				flex: 1;
				border-radius: 10rpx;
				border: 4rpx solid #00000033;
				padding: 16rpx;
				box-sizing: border-box;
				margin: 5rpx;
				line-height: 40rpx;
				font-size: 24rpx;
				.title{
					font-weight: 900;
					display: flex;
					align-items: center;
					.status{
						font-size: 20rpx;
						font-weight: 500;
						padding: 2rpx 10rpx;
						border-radius: 10rpx;
						background-color: #5ac725;
						color: #fff;
						margin-left: auto;
					}
					.status.end{
						background-color: #909399;
					}
				}
				.price{
					font-weight: 900;
					color: #fa0;
					font-size: 32rpx;
					line-height: 50rpx;
				}
			}
			.act{
				border: 4rpx solid #fa0;
			}
		}
		.uni-color-btn{
			width: 80%;
		}
		
		.UniversalWall {
			height: 100%;
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;

			.wall {
				font-size: 30rpx;
				letter-spacing: 2px;
				color: black;
			}

			.invite {
				margin-left: auto;
				button {
					background-color: white;
					font-size: 30rpx;
					display: flex;
					width: 200rpx;
					justify-content: center;
					align-items: center;
					border-radius: 20rpx !important;
					padding: 0 !important;
					margin: 0 !important;
				}

			}

			.logo {
				width: 120rpx;
				height: 120rpx;
				margin: 20rpx;
				image {
					width: 100%;
					height: 100%;
					border-radius: 15rpx;
				}
			}
		}

	}
</style>