xusfood_client/pages/index/index.vue

<template>
	<view class="pages">
		<view class="page-bg">
			<img class="img" :src="staticUrl+'/img/index-bg.png'" alt="">
		</view>
		<view class="page-wrap">
			<view class="search-out">
				<u-search
					placeholder="请输入搜索的商品" 
					:clearabled="true"
					:showAction="false"
					height="80rpx"
					@search="topSearch"
					bgColor="transparent"
					v-model="goodsName">
				</u-search>
			</view>
			<u-swiper
				:list="bannerList"
				indicator
				keyName="sliderImg"
				indicatorMode="dot"
				@click="bannerClick()"
			></u-swiper>
			<view class="advantage u-flex u-row-around">
				<view class="u-flex">
					<u-icon :size="advantageSize" class="icon" :name="staticUrl+'/img/zheng.png'"></u-icon>
					正品保证
				</view>
				<view class="u-flex">
					<u-icon :size="advantageSize" class="icon" :name="staticUrl+'/img/pei.png'"></u-icon>
					假一赔十
					</view>
				<view class="u-flex">
					<u-icon :size="advantageSize" class="icon" :name="staticUrl+'/img/rmb.png'"></u-icon>
					性价比高
				</view>
			</view>
			
			<view class="icon-nav u-flex u-row-around">
				<view class="nav-item" @click="$u.route('/shopping/productList',{typeId:1,typeName:'特价专区',type:'reLaunch'})">
					<u--image class="image" :src="staticUrl+'/img/index-nav-1.png'" width="101rpx" height="101rpx"></u--image>
					特价专区
				</view>
				<view class="nav-item" @click="$u.route('/shopping/productList',{typeId:2,typeName:'爆款专区',type:'reLaunch'})">
					<u--image class="image" :src="staticUrl+'/img/index-nav-2.png'" width="101rpx" height="101rpx"></u--image>
					爆款专区
				</view>
				<view class="nav-item" @click="$u.route('/credits/credits',{type:'reLaunch'})">
					<u--image class="image" :src="staticUrl+'/img/index-nav-3.png'" width="101rpx" height="101rpx"></u--image>
					积分商城
				</view>
				<view class="nav-item">
					<u--image class="image" :src="staticUrl+'/img/index-nav-4.png'" width="101rpx" height="101rpx"></u--image>
					充值中心
				</view>
			</view>
			
			<view class="index-img">
				<u-swiper
					:list="centerImg"
					:indicator="centerImg.length>1"
					keyName="sliderImg"
					indicatorMode="dot"
					height="161rpx"
					@click="centerImgClick()"
				></u-swiper>
			</view>
			<view class="hot-product">
				<view class="single-til u-flex u-row-between">
					<text class="text">热销产品</text>
					<!-- <view class="u-flex" @click="$u.route('/shopping/productList',{typeId:1,typeName:'热销产品',type:'redirectTo'})">
						<text class="more-text">更多</text>
						<u-icon name="arrow-right" color="#676767" size="24rpx"></u-icon>
					</view> -->
				</view>
				<view class="product u-flex" @click="$u.route('/shopping/productdetails',{id:item.id})" v-for="item in hotGoods" :key="item.id">
					<u--image :showLoading="true" :src="item.mainImg" width="180rpx" height="180rpx"></u--image>
					<view class="text">
						<view class="name ellipsis-2">{{item.goodsName}}</view>
						<view class="u-flex u-row-between">
							<view class="left">
								<view class="up">
									<view class="" v-if="vuex_member_info.levelType>1">
										<text class="price">¥ <text class="price-num">{{item.vipPrice}}</text></text>
										<text class="vip-icon">VIP</text>
									</view>
									<view class="" v-else>
										<text class="price">¥ <text class="price-num">{{item.salePrice}}</text></text>
									</view>
								</view>
								<view class="down">
									<!-- <text class="discount">8.8折</text> -->
									<text v-if="vuex_member_info.levelType>1" class="original-price gray line-through">¥ {{item.salePrice}}</text>
									<!-- <text class="sales gray">销量 {{item.salePrice}}</text> -->
								</view>
							</view>
							<u--image :showLoading="false" @click.native.stop="addCart(item.id)" :src="staticUrl+'/img/add.png'" width="48rpx" height="48rpx"></u--image>
						</view>
					</view>
				</view>
			</view>
			<tabbar :tabbarIndexProps='0' />
			<cartfixed ref="cartfixed" @getCartList="getCartList" />
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import tabbar from "../../components/tabbar.vue";
	import cartfixed from "../../components/cartfixed.vue"
	export default {
		components:{
			tabbar,
			cartfixed
		},
		data() {
			return {
				goodsName:'',
				staticUrl:this.$commonConfig.staticUrl,
				advantageSize:20,
				bannerList: [],
				centerImg:[],
				hotGoods:[]
			}
		},
		onLoad() {
			// let userInfo = uni.getStorageSync('userInfo');
			// console.log('userInfo',userInfo);
			this.getCenterImg();
			this.swiperList();
		},
		onShow() {
			this.$refs.cartfixed.getCartList();
			this.getHotGoods();
		},
		methods: {
			swiperList(){
				this.$u.api.swiperList({postion:1}).then(res=>{
					this.bannerList = res.data.rows;
					// 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(e){
				// 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
				});
			},
			centerImgClick(e){
				let item = this.centerImg[e];
				uni.$u.route('/xushuo/dynamicdetails', {
					type: 'swiperDetail',
					id: item.id
				});
			},
			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);
				})
			},
			addCart(id){
				// console.log('addCart',id);
				this.$u.api.addCart({goodsId:id}).then(res=>{
					this.$refs.cartfixed.getCartList('isAdd');
					console.log('res',res);
					}).catch(err=>{
					console.log('addCart',err.data);
				})
			},
			topSearch(){
				uni.$u.route('/shopping/productsearch', {
					goodsName: this.goodsName
				});
				// console.log('topSearch',this.goodsName);
			}
		}
	}
</script>
<style>
page{
	background-color: #F9F9F9;
}
</style>
<style lang="scss" scoped>
.page-bg{
	.img{
		height: 100vh;
	}
}
.search-out{
	background-color: rgba(0,0,0,0.04);
	border-radius: 100rpx;
	margin-bottom: 20rpx;
}
.advantage{
	margin-top: 20rpx;
	margin-bottom: 50rpx;
	font-size: 20rpx;
	color: #ccc;
	/deep/ .u-icon{
		margin-right: 10rpx;
	}
}
.index-img{
	margin-bottom: 56rpx;
}
.hot-product{
	.product{
		padding: 30rpx;
		background-color: #fff;
		border: 0;
	}
}
</style>