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">
			<u-swiper
				:list="bannerList"
				indicator
				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:'redirectTo'})">
					<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:'redirectTo'})">
					<u--image class="image" :src="staticUrl+'/img/index-nav-2.png'" width="101rpx" height="101rpx"></u--image>
					爆款专区
				</view>
				<view class="nav-item">
					<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--image class="image" src="https://cdn.uviewui.com/uview/swiper/swiper2.png" width="100%" height="161rpx" radius="15rpx" @click="click"></u--image>
			</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" @addToCart="addToCart" />
		</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 {
				staticUrl:this.$commonConfig.staticUrl,
				advantageSize:20,
				bannerList: [{
                    url: 'https://cdn.uviewui.com/uview/swiper/swiper1.png',
                    title: '昨夜星辰昨夜风，画楼西畔桂堂东'
                },{
                    url: 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
                    title: '身无彩凤双飞翼，心有灵犀一点通'
                },{
                    url: 'https://cdn.uviewui.com/uview/swiper/swiper3.png',
                    title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
                }],
				hotGoods:[]
			}
		},
		onLoad() {
			// let userInfo = uni.getStorageSync('userInfo');
			// console.log('userInfo',userInfo);
			this.getHotGoods()
		},
		methods: {
			bannerClick(e){
				console.log('bannerClick',e);
			},
			getHotGoods(){
				// {id:'111233',pageNum:1,pageSize:3,isExplode:1}
				this.$u.api.memberGoodList({pageNum:1,pageSize:3,isExplode:1}).then(res=>{
					this.hotGoods = res.data.rows;
					console.log('res',res);
				}).catch(err=>{
					console.log('err11111',err.data);
				})
			},
			addCart(id){
				// console.log('addCart',id);
				this.$u.api.addCart({goodsId:id}).then(res=>{
					this.$refs.uToast.show({
						type:"success",
						message:res.msg
					});
					this.$refs.cartfixed.addToCart(1);
					console.log('res',res);
					}).catch(err=>{
					console.log('addCart',err.data);
				})
			}
		}
	}
</script>
<style>
page{
	background-color: #F9F9F9;
}
</style>
<style lang="scss" scoped>
.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>