rice-front/pages/index/member.vue

<template>
	<view class="page">
		<navbar title="会员" />

		<view class="swipe">
			<uv-swiper 
			:list="bannerList" 
			indicator 
			height="320rpx" 
			keyName="image"></uv-swiper>
		</view>
		
		<view class="vip">
			<view class="title1">
				限时活动
			</view>
			<view class="title2">
				会员套餐
			</view>
			<view class="box-content">
				限时活动<text>{{ configList.vip_open_num }}</text>名
			</view>
			<view class="di">
				<view class="pad">
					{{ riceInfo.memberNum }}/{{ configList.vip_open_num }}
				</view>
				<view class="submitOpen"
				@click="submitOpen">
					开通会员
				</view>
			</view>
		</view>

		<view class="middle">
			<view class="rights">会员权益</view>
			<view class="middle-one">会员条件：{{ configList.vip_rloe }}</view>

			<!-- <view class="middle-boxs">
				<view class="middle-two-1">权益一</view>
				<view class="middle-box">
					<view class="middlex-minBox">
						<view class="middle-box-one">
							<view>赠送价值</view>
							<view style="color: #D15206; font-size: 28rpx;">100元</view>
							<view>的三诺血糖</view>
						</view>
						<view>检测仪*1台</view>
					</view>
				</view>
				<view class="img">
					<image src="../../static/image/member/1.png" mode="aspectFill"></image>
				</view>
			</view>


			<view class="middle-boxs">
				<view style="padding: 20rpx;"></view>
				<view class="middle-two-2">权益二</view>
				<view class="middle-box">
					<view class="middlex-minBox-2">
						<view class="middle-box-one">
							<view>会员推荐朋友购买会员，</view>
							<view>第一个</view>
						</view>
						<view>返利10%、第二个返利20%、第三个返利30%、</view>
						<view style="display: flex; align-items: center;">
							<view>第四个返利40%、</view>
							<text style="color: #474747; font-size: 24rpx;">四四循环</text>
						</view>
					</view>
				</view>
				<view class="img-2">
					<image src="../../static/image/member/2.png" mode="aspectFill"></image>
				</view>
			</view>


			<view class="middle-boxs">
				<view class="middle-two-1">权益三</view>
				<view class="middle-box">
					<view class="middlex-minBox">
						<view>所推荐朋友购买产品及今后产生复购</view>
						<view class="middle-box-one">
							<view>产品的</view>
							<view style="color: #D15206; font-size: 28rpx;">返15%佣金</view>
							<view>（体验价不计算在内）</view>
						</view>
					</view>
				</view>
				<view class="img">
					<image src="../../static/image/member/3.png" mode="aspectFill"></image>
				</view>
			</view> -->
			
			
			<template
			v-for="(item, index) in vipInfoList">
				<view class="middle-boxs"
				v-if="index % 2 == 0"
				:key="index">
					<view class="middle-two-1">{{ item.title }}</view>
					<view class="middle-box">
						<view class="middlex-minBox">
							<uv-parse :content="item.details"></uv-parse>
						</view>
					</view>
					<view class="img">
						<image :src="item.image" mode="aspectFill"></image>
					</view>
				</view>
				
				<view class="middle-boxs"
				v-else
				:key="index">
					<view style="padding: 20rpx;"></view>
					<view class="middle-two-2">{{ item.title }}</view>
					<view class="middle-box">
						<view class="middlex-minBox-2">
							<uv-parse :content="item.details"></uv-parse>
						</view>
					</view>
					<view class="img-2">
						<image :src="item.image" mode="aspectFill"></image>
					</view>
				</view>
			</template>
			

			<!-- <view class="middle-bottom">
				<view>*仅限前</view>
				<text>1000名</text>
				<view>充值会员</view>
			</view> -->
			
			<view class="middle-bottom">
				{{ configList.vip_text }}
			</view>
		</view>


		<tabber select="member" />
	</view>
</template>

<script>
	import tabber from '@/components/base/tabbar.vue'
	import { mapState } from 'vuex'
	export default {
		components: {
			tabber,
		},
		data() {
			return {
				bannerList: [],
				vipInfoList: [],
			};
		},
		computed : {
			...mapState(['userInfo', 'riceInfo']),
		},
		onShow() {
			this.getBanner()
			this.getRiceVipList()
			this.$store.commit('getRiceInfo')
		},
		methods : {
			// 获取轮播图
			getBanner(){
				this.$api('getRiceBanner', res => {
					if(res.code == 200){
						this.bannerList = res.result
					}
				})
			},
			// 获取轮播图
			getRiceVipList(){
				this.$api('getRiceVipList', res => {
					if(res.code == 200){
						this.vipInfoList = res.result
					}
				})
			},
			// 开通会员
			submitOpen(){
				uni.showModal({
					title: this.configList.vip_rloe,
					confirmText: '去开通',
					success : res => {
						if(res.confirm){
							uni.navigateTo({
								url: '/pages/index/category'
							})
						}
					},
				})
			},
		}
	}
</script>

<style lang="scss">
	.page {
		min-height: 100vh;
		color: #F3F3F3;
		z-index: 0;

		.swipe {
			overflow: hidden;
			border-radius: 20rpx;
			margin: 20rpx;
		}
		
		.vip{
			background: url(/static/image/member/a.png);
			background-size: 100% 100%;
			margin: 20rpx;
			position: relative;
			color: #000;
			padding-bottom: 10rpx;
			.title1{
				padding: 10rpx 60rpx;
			}
			.title2{
				position: absolute;
				left: 300rpx;
				top: 30rpx;
			}
			.box-content{
				background-color: #00000013;
				padding: 50rpx;
				margin:  40rpx;
				text-align: center;
				border-radius: 20rpx;
				font-size: 50rpx;
				font-weight: 900;
				margin-bottom: 0;
				text{
					color: #f40;
				}
			}
			.di{
				display: flex;
				justify-content: space-between;
				padding: 20rpx;
				align-items: flex-end;
				.pad{
					font-size: 26rpx;
				}
				.submitOpen{
					padding: 20rpx 40rpx;
					border-radius: 40rpx;
					background-color: #F6CD59;
					color: #fff;
					font-size: 26rpx;
				}
			}
		}

		.middle {
			margin: 20rpx;
			border-radius: 16rpx;
			background-color: #fff;
			padding-top: 20rpx;

			.rights {
				margin-left: 20rpx;
				padding: 0 20rpx;
				color: #474747;
				font-size: 32rpx;
				font-weight: 600;
				border-left: 6rpx solid #A3D250;
			}

			.middle-one {
				font-size: 28rpx;
				padding: 10rpx 120rpx 10rpx 40rpx;
				color: #D15206;

			}

			.middle-boxs {
				padding: 40rpx 40rpx 20rpx 20rpx;
				position: relative;
				margin-top: 40rpx;


				.middle-two-1,
				.middle-two-2,
				.middle-two-3 {
					display: inline-block;
					font-size: 32rpx;
					font-weight: 600;
					color: #474747;
					padding: 10rpx 40rpx;
					background-color: #F6CD59;
					border-radius: 30rpx;
				}

				.middle-two-2 {
					position: absolute;
					top: 10rpx;
					right: 20rpx;
				}

				.middle-box {
					margin-top: -30rpx;
					min-height: 160rpx;
					background-color: #FFFBF2;

					.middlex-minBox {
						display: flex;
						flex-direction: column;
						padding: 60rpx 0rpx 0rpx 40rpx;
						font-size: 24rpx;
						color: #474747;

						.middle-box-one {
							display: flex;
							align-items: center;
						}
					}

					.middlex-minBox-2 {
						display: flex;
						padding: 80rpx 0rpx 30rpx 40rpx;
						font-size: 24rpx;
						color: #474747;
						flex-direction: column;
						justify-content: center;
						margin-right: 10rpx;

						.middle-box-one {
							display: flex;
							justify-content: flex-end;
							align-items: center;
						}

						view:nth-child(2) {
							font-size: 28rpx;
							color: #D15206;
						}

						view:nth-child(3) {
							font-size: 28rpx;
							color: #D15206;
						}
					}
				}

				.img {
					position: absolute;
					height: 220rpx;
					width: 180rpx;
					top: -40rpx;
					right: 80rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}


				.img-2 {
					position: absolute;
					height: 220rpx;
					width: 180rpx;
					top: -40rpx;
					left: 50rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}

			.middle-bottom {
				display: flex;
				color: #CCCCCC;
				padding: 10rpx 20rpx;
				font-size: 24rpx;
				text {
					color: #D15206;
				}
			}

		}
	}
</style>