xusfood_client/center/privilege.vue

<template>
	<view class="pages">
		<u-navbar
			title="会员权益"
			:placeholder="true"
			:autoBack="false"
			@leftClick="leftClick"
			bgColor="transparent"
			leftIconColor="#fff"
			:titleStyle="{color:'#fff'}"
			:safeAreaInsetTop="true"
		>
		</u-navbar>
		<view class="page-bg">
			<img style="height: 100vh;" class="img" :src="staticUrl+'/img/privilege-bg.png'" alt="">
		</view>
		<view class="content page-wrap">
			<u--image :showLoading="true" :src="staticUrl+'/img/privilege-title.png'" width="356rpx" height="53rpx"></u--image>
			<view class="sub-title"> </view>
			<view class="privilege-block" v-for="item in memberLevel" :key="item.id">
				<view class="mini-title u-flex u-row-center">
					<view class="left">
						<u--image :showLoading="true" :src="staticUrl+'/img/privilege-title-left.png'" width="47rpx" height="20rpx"></u--image>
					</view>
					<view class="text">{{item.name}}</view>
					<view class="right">
						<u--image :showLoading="true" :src="staticUrl+'/img/privilege-title-right.png'" width="47rpx" height="20rpx"></u--image>
					</view>
				</view>
				<view class="privilege-wrap u-flex u-row-between u-flex-wrap">
					<view class="privilege-item" @click="levelClick(item,level)" v-for="(level,index) in item.list" :key="index">
						<!-- <u--image :showLoading="true" shape="circle" :src="level.logo" width="122rpx" height="122rpx"></u--image> -->
						<img class="logo" :src="level.logo" alt="">
						<view class="remark">{{level.name}}</view>
					</view>
					<view class="empty" v-if="item.list<1">
						敬请期待
					</view>
				</view>
			</view>
		</view>
		<u-popup :show="levelShow" @close="levelShow=false" mode='center' @open="levelOpen" :customStyle="{'border-radius': '8rpx'}">
			<view class="level-content">
				<view class="header">
					<img class="bg" :src="staticUrl+'/img/privilege-pop-bg.png'" alt="" srcset="">
					<view class="name">{{levelContent.levelName}}</view>
				</view>
				<view class="content">
					{{levelContent.name}}：{{levelContent.remark}}
				</view>
				<view class="bottom u-flex u-row-center">
					<view class="btn cancel" @click="levelShow=false">取消</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				staticUrl:this.$commonConfig.staticUrl,
				memberLevel:[],
				levelShow:false,
				levelContent:{levelName:''}
			}
		},
		onShow() {
		},
		onLoad() {
			uni.setNavigationBarColor({
			    frontColor: '#ffffff',
			    backgroundColor: 'transparent',
			    animation: {
			        duration: 400,
			        timingFunc: 'easeIn'
			    }
			});
			this.getMemberLevel();
		},
		methods: {
			leftClick(e){
				let pages = getCurrentPages();
				if(pages.length==1){
					uni.$u.route('/pages/index/index')
				}else{
					uni.navigateBack()
				};
			},
			getMemberLevel(){
				this.$u.api.memberLevel({pageNum:1,pageSize:100}).then(res=>{
					this.memberLevel = res.data.rows;
					console.log('memberLevel',res.data);
				}).catch(err=>{
					console.log('memberLevel',err);
				})
			},
			levelOpen(){
				this.levelShow = true;
			},
			levelClick(item,level){
				// console.log('levelClick',item);
				this.levelContent = level;
				this.levelContent.levelName = item.name;
				this.levelOpen();
			}
		}
	}
</script>
<style>
page{
	background-color: #18161F;
}
</style>
<style lang="scss" scoped>
.sub-title{
	margin-top: 16rpx;
	margin-bottom: 30rpx;
	font-size: 30rpx;
	font-weight: 400;
	color: rgba(255,255,255,0.5);
	line-height: 42rpx;
}
.privilege-block{
	padding: 40rpx 40rpx 0;
	background: rgba(255,255,255,0.04);
	border-radius: 8rpx;
	border: 2rpx solid;
	border-image: linear-gradient(91deg, rgba(255, 236, 223, 0.3), rgba(255, 160, 104, 0.5), rgba(255, 212, 188, 0.3)) 2 2;
	overflow: hidden;
	margin-bottom: 30rpx;
	.mini-title{
		margin-bottom: 29rpx;
		.text{
			margin: 0 20rpx;
			font-size: 32rpx;
			font-weight: 500;
			color: #FFFFFF;
			line-height: 45rpx;
			background: linear-gradient(270deg, #D6986B 0%, #FFEFDC 100%);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
		}
	}
	.privilege-wrap{
		.empty{
			width: 100%;
			text-align: center;
			padding: 40rpx 0;
			font-size: 40rpx;
			color: #ababab;
		}
	}
	.privilege-item{
		text-align: center;
		width: 25%;
		margin-bottom: 40rpx;
		.logo{
			width: 120rpx;
			height: 120rpx;
			border-radius: 50%;
		}
		.remark{
			margin-top: 16rpx;
			font-size: 26rpx;
			font-weight: 400;
			color: #D6986B;
			background-color: #D6986B;
			line-height: 37rpx;
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
		}
		
	}
}
.level-content{
	width: 80vw;
	background-color: #fff;
	border-radius: 8rpx;
	overflow: hidden;
	.header{
		height: 100rpx;
		.name{
			line-height: 100rpx;
			font-size: 34rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #CB8D5F;
			background-color: #CB8D5F;
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
			position: relative;
			text-align: center;
		}
		.bg{
			width: 100%;
			height: 100rpx;
			position: absolute;
			left: 0;
			right: 0;
			bottom: 0;
			top: 0;
		}
	}
	.content{
		text-align: center;
		padding: 30rpx 20rpx 60rpx;
		font-size: 30rpx;
		font-weight: 400;
		color: #333333;
		line-height: 42rpx;
	}
	.bottom{
		.btn{
			background: #F5F5F5;
			border-radius: 34rpx;
			text-align: center;
			margin-bottom: 30rpx;
			font-size: 30rpx;
			font-weight: 400;
			color: #333333;
			line-height: 42rpx;
			padding: 13rpx 136rpx;
		}
	}
}
</style>