xusfood_client/pages/index/index.vue

<template>
	<view class="pages">
		<view class="" :style="{height: navHeight+'px' }"></view>
		<view class="swiper-wrap">
			<!-- <u-swiper
				:list="bannerList"
				indicator
				height="750rpx"
				keyName="sliderImg"
				indicatorMode="dot"
				radius="0"
				:circular="true"
				imgMode="aspectFit"
				@click="bannerClick()"
			></u-swiper> -->
			<swiper 
				class="swiper" 
				indicator-color="rgba(255,255,255,0.3)"
				indicator-active-color="#fff"
				circular 
				@change="bannerChange"
				:current="bannerCurrent"
				:indicator-dots="true" 
				:autoplay="false" 
				:interval="5000"
				:duration="500">
				<swiper-item @click="bannerClick(item)" v-for="(item,index) in bannerList" :key="index">
					<u--image 
						v-if="item.type==1"
						:showLoading="true" 
						:src="item.sliderImg" 
						width="100%" 
						height="750rpx" 
						>
					</u--image>
					<!-- object-fit== contain：包含，fill：填充，cover：覆盖 -->
					<video 
						style="width: 100%;height: 100%"
						v-if="item.type==2"
						object-fit="fill"
						:id="`videoId${ index + 1}`" 
						:autoplay="false"
						src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4"
					    @error="videoErrorCallback" 
						:controls="false">
					</video>
				</swiper-item>
			</swiper>
		</view>
		<view class="swiper-block" :style="{height: ( 375 - navHeight )+'px' }"></view>
		<view class="page-wrap">
			
			<view class="member-info u-flex u-row-between" :style="[memberInfoBg]" v-if="vuex_member_info.name">
				<view class="left u-flex">
					<u-avatar :src="avatar||staticUrl+'/img/avatar-white.png'" size="88rpx"></u-avatar>
					<view class="text">
						<view class="name">{{vuex_member_info.name}}</view>
						<text class="level-name">{{vuex_member_info.levelName}}</text>
					</view>
				</view>
				<view class="right  u-flex">
					<text class="credit-text">积分</text>
					<text class="num">{{memberInfo.credit||0}}</text>
				</view>
			</view>
			<view class="member-info u-flex u-row-between unlogin" :style="[memberInfoBg]" v-else>
				<view class="left u-flex">
					<u-avatar :src="staticUrl+'/img/avatar-white.png'" size="88rpx"></u-avatar>
					<view class="text">
						<view class="name">欢迎登录</view>
					</view>
				</view>
				<view class="right" @click="goLogin">
					登录 / 注册
				</view>
			</view>
			
			<view class="index-nav u-flex u-row-between u-flex-wrap">
				<view class="nav-item" v-for="(item,index) in iconNavList" @click="indexNavClick(item)" :key="index">
					<!-- <u--image class="image" :src="item.icon" width="101rpx" height="101rpx"></u--image> -->
					<img class="image" :src="item.icon" alt="">
					<view class="name">{{item.name}}</view>
				</view>
			</view>
			
			<view class="index-img">
				<u-swiper
					:list="centerImg"
					:indicator="centerImg.length>1"
					radius="0"
					keyName="sliderImg"
					indicatorMode="dot"
					imgMode="aspectFit"
					height="240rpx"
					@click="centerImgClick()"
				></u-swiper>
			</view>
			
			<view class="activity">
				<view class="single-til u-flex u-row-between">
					<view class="text u-flex">
						活动专区
						<text class="sub-title">Activity Zone</text>
					</view>
					<!-- <view class="u-flex" @click="$u.route('/shopping/producTypetList')">
						<text class="more-text">更多</text>
						<u-icon name="arrow-right" color="#676767" size="24rpx"></u-icon>
					</view> -->
				</view>
				<view class="activity-list">
					<view class="activity-item" v-for="item in centerImg" :key="item.id"  @click="activityClick(item)">
						<u--image :showLoading="true" :src="item.sliderImg" mode="aspectFit" width="100%" height="240rpx"></u--image>
						<view class="title ellipsis-1">{{item.name}}</view>
						<view class="time">{{item.createTime}}</view>
					</view>
				</view>
			</view>
			
			<view class="product-list-v2">
				<view class="single-til u-flex u-row-between">
					<view class="text u-flex">
						全部产品
						<text class="sub-title">All Products</text>
					</view>
					<view class="u-flex" @click="$u.route('/shopping/producTypetList')">
						<text class="more-text">更多</text>
						<u-icon name="arrow-right" color="#676767" size="24rpx"></u-icon>
					</view>
				</view>
				<view class="product-wrap u-flex u-flex-wrap u-row-between">
					<view class="product-v2" @click="$u.route('/shopping/productdetails',{id:item.id})" v-for="item in hotGoods" :key="item.id">
						<u--image :showLoading="true" :src="item.mainImg" width="100%" height="280rpx"></u--image>
						<view class="name ellipsis-2">{{item.goodsName}}</view>
						<view class="price">
							<view class="myprice u-flex">
								¥ <text class="price-num">{{item.vipPrice}}</text>
								<text class="price-type">会员价</text>
							</view>
							<view class="salePrice">
								<text class="gray line-through">{{item.salePrice}}</text>
							</view>
						</view>
					</view>
				</view>
				<u-empty mode="list" text="暂无产品" v-if="hotGoods.length<1"></u-empty>
				
			</view>
		</view>
		
		<view class="goMap u-flex" @click="goMap" :style="{top:`${statusBarHeight}px`}">
			<img class="image" :src="staticUrl+'/img/go-map-icon.png'" alt="">
			<text class="text">去商场</text>
		</view>
		
		<tabbar :tabbarIndexProps='0' />
		<!-- <cartfixed ref="cartfixed" @getCartList="getCartList" /> -->
	</view>
</template>

<script>
	import { systemInfo } from "@/mixin.js";
	import tabbar from "../../components/tabbar.vue";
	import cartfixed from "../../components/cartfixed.vue"
	export default {
		components:{
			tabbar,
			// cartfixed
		},
		mixins:[systemInfo],
		data() {
			return {
				staticUrl:this.$commonConfig.staticUrl,
				bannerList: [],
				bannerCurrent: 0,
				previousIndex: 0,
				previousVideoId: '',
				currentVideoIndex: -1,
				centerImg:[],
				hotGoods:[],
				memberInfo:{},
				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:'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:''},
					{name:'月子中心',icon:`${this.$commonConfig.staticUrl}/img/index-nav-icon-6.png`,url:''},
					{name:'限时抢购',icon:`${this.$commonConfig.staticUrl}/img/index-nav-icon-7.png`,url:''},
					{name:'爆款专区',icon:`${this.$commonConfig.staticUrl}/img/index-nav-icon-8.png`,url:'/shopping/productList',param:{typeId:2,typeName:'爆款专区'}},
				],
				xsIntro:{},
				shopLatitude:'',
				shopLongitude:'',
			}
		},
		computed: {
		    memberInfoBg() {
		      return { backgroundImage: `url(${this.staticUrl}/img/index-member-info-bg.png)` }
		    }
		},
		onShow() {
			// this.$refs.cartfixed.getCartList();
			this.getHotGoods();
			// this.getMemberInfo()
		},
		onLoad(query) {
			const scene = decodeURIComponent(query.scene);
			scene&&uni.setStorage({
				key:'scene',
				data:scene
			});
			let that = this;
			this.swiperList();
			setTimeout(()=>{
				that.getCenterImg();
			},200);
			this.getSystemInfo();
			this.getIntro();
			// console.log('statusBarHeight',this.statusBarHeight);
			// console.log('navigationBarHeight',this.navigationBarHeight);
			// console.log('windowHeight',this.windowHeight);
			// console.log('navHeight',this.navHeight);
			console.log('vuex_member_info=======',this.vuex_member_info);

		},
		methods: {
			getIntro(){
				this.$u.api.xsGetIntro().then(res=>{
					this.xsIntro = res.data;
					// this.shopLatitude = res.data.shopLatitude;
					// this.shopLongitude = res.data.shopLongitude;
					// console.log('res',res);
				}).catch(err=>{
					console.log('xsGetIntro',err.data);
				})
			},
			goMap(){
				uni.openLocation({
				  latitude:this.xsIntro.shopLatitude,	//维度
				  longitude: this.xsIntro.shopLongitude, //经度
				  name: "商行地址",	//目的地定位名称
				  scale: 15,	//缩放比例
				  address: this.xsIntro.shopAddress	//导航详细地址
				})
			},
			getMemberInfo(){
				this.$u.api.memberInfo({id:this.vuex_member_info.id}).then(res=>{
					this.memberInfo = res.data;
					this.avatar =  res.data.avatar;
					this.$u.vuex('vuex_member_info', res.data);
					// console.log('memberInfo',this.memberInfo);
					}).catch(err=>{
					console.log('memberInfo',err.data);
				})
			},
			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);
				})
			},
			getCenterImg(){
				this.$u.api.swiperList({postion:2}).then(res=>{
					this.centerImg = res.data.rows;
					// console.log('res',res.data.rows);
				}).catch(err=>{
					console.log('swiperList',err.data);
				})
			},
			bannerClick(item){
				// console.log('e',e);
				// console.log('bannerClick',this.bannerList[e]);
				// let item = this.bannerList[e];
				uni.$u.route('/xushuo/dynamicdetails', {
					type: 'swiperDetail',
					id: item.id
				});
			},
			bannerChange(event){
				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];
				uni.$u.route('/xushuo/dynamicdetails', {
					type: 'swiperDetail',
					id: item.id
				});
			},
			indexNavClick(item){
				if(item.url){
					uni.$u.route(item.url,item.param );
				}else{
					uni.$u.toast('开发中，请等待')
				}
				
				// if(item.param){
				// 	uni.$u.route(item.url,item.param );
				// }
			},
			getHotGoods(){
				this.$u.api.topGoodList({pageNum:1,pageSize:20}).then(res=>{
					this.hotGoods = res.data.rows;
					console.log('res',res);
				}).catch(err=>{
					console.log('getHotGoods',err.data);
				})
			},
			activityClick(item){
				uni.$u.toast('开发中，请等待')
				uni.$u.route('/activity/activitydetails', {
					id: item.id
				});
			},
			goLogin(){
				uni.$u.route('/pages/login/login')
			},
		}
	}
</script>
<style>
page{
	padding-bottom: 40rpx;
}
</style>
<style lang="scss" scoped>
.swiper-wrap{
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 750rpx;
	z-index: 10;
	.swiper{
		height: 100%;
	}
}
.page-wrap{
	position: relative;
	z-index: 20;
	background-color: #fff;
}
.member-info{
	box-sizing: border-box;
	height: 136rpx;
	background: linear-gradient(270deg, #EACCA8 0%, #D6986B 100%);
	background-size: contain;
	background-repeat: no-repeat;
	border-radius: 8rpx 8rpx 0rpx 0rpx;
	padding: 24rpx;
	margin-bottom: 60rpx;
	color: #fff;
	font-size: 34rpx;
	.text{
		margin-left: 20rpx;
		.name{
			font-weight: 600;
			color: rgba(255,255,255,0.99);
			// line-height: 48rpx;
			// margin-bottom: 8rpx;
		}
		.level-name{
			font-size: 22rpx;
			font-weight: 400;
			// line-height: 30rpx;
		}
	}
	.right{
		.credit-text{
			font-size: 26rpx;
			font-weight: 400;
			color: rgba(255,255,255,0.99);
			margin-right: 16rpx;
		}
		.num{
			font-weight: 600;
		}
	}
	&.unlogin{
		.right{
			border-radius: 40rpx;
			border: 2rpx solid #FFFFFF;
			padding: 14rpx 33rpx;
			font-weight: 600;
			font-size: 30rpx;
		}
	}
}
.index-nav{
	padding: 0 32rpx;
	text-align: center;
	margin-bottom: 60rpx;
	.nav-item{
		width: 25%;
		margin-bottom: 30rpx;
		.image{
			margin-left: auto;
			width: 80rpx;
			height: 80rpx;
		}
		.name{
			font-size: 26rpx;
			font-weight: 400;
			color: #666666;
			line-height: 37rpx;
		}
	}
}
.index-img{
	margin-bottom: 60rpx;
}
.goMap{
	position: absolute;
	z-index: 31;
	padding: 20rpx;
	.image{
		width: 34rpx;
		height: 35rpx;
	}
	.text{
		font-size: 30rpx;
		font-weight: 400;
		color: #FFFFFF;
		margin-left: 12rpx;
	}
}
.activity{
	margin-bottom: 60rpx;
}
</style>