新增会员权益页面

center/privilege.vue

@@ -0,0 +1,228 @@
+<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>

common/apiurl.js

@@ -314,6 +314,11 @@ const apiurl = {
 		url: '/common/uncompress',
 		type: 'get'
 	},
+	// 会员权益列表
+	memberLevel: {
+		url: '/memberLevel/pageList',
+		type: 'get'
+	},
 }
 
 

pages.json

@@ -116,6 +116,13 @@
 						"navigationBarTitleText": "支付码",
 						"navigationStyle": "custom"
 					}
+				},
+				{
+					"path": "privilege",
+					"style": {
+						"navigationBarTitleText": "会员权益",
+						"navigationStyle": "custom"
+					}
 				}
 			]
 		}, 

pages/index/index.vue

@@ -173,6 +173,7 @@
 				bannerList: [],
 				bannerCurrent: 0,
 				previousIndex: 0,
+				previousVideoId: '',
 				currentVideoIndex: -1,
 				centerImg:[],
 				hotGoods:[],
@@ -180,7 +181,7 @@
 				avatar:'',
 				iconNavList:[
 					{name:'品牌导览',icon:`${this.$commonConfig.staticUrl}/img/index-nav-icon-1.png`,url:''},
-					{name:'会员权益',icon:`${this.$commonConfig.staticUrl}/img/index-nav-icon-2.png`,url:''},
+					{name:'会员权益',icon:`${this.$commonConfig.staticUrl}/img/index-nav-icon-2.png`,url:'center/privilege'},
 					{name:'线上商城',icon:`${this.$commonConfig.staticUrl}/img/index-nav-icon-3.png`,url:'/shopping/producTypetList'},
 					{name:'积分兑换',icon:`${this.$commonConfig.staticUrl}/img/index-nav-icon-4.png`,url:'/credits/credits'},
 					{name:'酒店预定',icon:`${this.$commonConfig.staticUrl}/img/index-nav-icon-5.png`,url:''},
@@ -256,6 +257,13 @@
 			swiperList(){
 				this.$u.api.swiperList({postion:1}).then(res=>{
 					this.bannerList = res.data.rows;
+					if(this.bannerList[0].type==2){
+						this.currentVideoIndex = 0;
+						const videoId = 'videoId' + (this.currentVideoIndex + 1);
+						const video = uni.createVideoContext(videoId, this);
+						video.play();
+						this.previousVideoId = videoId;
+					}
 					// console.log('res',res.data.rows);
 				}).catch(err=>{
 					console.log('swiperList',err.data);
@@ -279,23 +287,33 @@
 				});
 			},
 			bannerChange(event){
-				console.log('current',event.detail);
-				// console.log('bannerCurrent',this.bannerCurrent);
-				// console.log('bannerChange',this.bannerList[event.detail.current]);
-				
-				const currentSwiperIndex = event.detail.current;
-				
-				  if (
-					this.bannerList[currentSwiperIndex].type === 2 && 
-					currentSwiperIndex !== this.currentVideoIndex
-				  ) {
-					const previousVideoId = 'videoId' + (this.currentVideoIndex + 1);
-					const previousVideo = uni.createVideoContext(previousVideoId, this);
-					previousVideo.stop();
-					this.currentVideoIndex = currentSwiperIndex;
-				  }
-			
-				  this.previousIndex = currentSwiperIndex;
+				console.log('current', event.detail);
+				  
+				    const currentSwiperIndex = event.detail.current;
+				  
+				    // console.log('currentSwiperIndex', currentSwiperIndex);
+					console.log('previousVideoId',this.previousVideoId);
+					if (this.previousVideoId !== '') {
+						// 停止上一个视频的播放
+						const previousVideo = uni.createVideoContext(this.previousVideoId);
+						previousVideo.stop();
+						console.log('stop video');
+					}
+					  
+				    if (this.bannerList[currentSwiperIndex].type === 2) {
+				      // console.log('Play video')
+				      
+				      // 播放当前视频
+				      const currentVideoId = 'videoId' + (currentSwiperIndex + 1);
+				      const currentVideo = uni.createVideoContext(currentVideoId, this);
+				      currentVideo.play();
+					   // console.log('Play video');
+				      
+				      // 更新上一个视频的ID
+				      this.previousVideoId = currentVideoId;
+				    }
+				    
+				    this.previousIndex = currentSwiperIndex;
 			},
 			centerImgClick(e){
 				let item = this.centerImg[e];