xusfood_h5/pages/index/index.vue

<template>
	<view class="pages">
		<view class="" :style="{height: navHeight+'px' }"></view>
		<view class="page-wrap">
			<view class="user u-flex"  @click="$u.route('/center/center',{})">
				<u-icon name="../../static/img/icon-user.png" color="#333" size="38rpx"></u-icon>
				<text class="name">{{vuex_user_info.username}}</text>
				<!-- <text class="level">白金代理人</text> -->
			</view>
			<u-swiper
				:list="bannerList"
				indicator
				height="130"
				keyName="sliderImg"
				indicatorMode="dot"
				@click="bannerClick"
			></u-swiper>
			
			<view class="icon-nav u-flex u-row-around">
			<!-- 	<view class="nav-item" @click="$u.route('/center/mybalance')">
					<u--image class="image" :src="staticUrl+'/img/index-nav-4.png'" width="101rpx" height="101rpx"></u--image>
					需要删除
				</view> -->
				<view class="nav-item" @click="$u.route('/shopping/producTypetList',{})">
					<u--image class="image" src="../../static/img/index-nav-1.png" width="101rpx" height="101rpx"></u--image>
					选品
				</view>
				<view class="nav-item" @click="$u.route('/shopping/cart',{})">
					<u--image class="image" src="../../static/img/index-nav-2.png" width="101rpx" height="101rpx"></u--image>
					购物车
				</view>
				<view class="nav-item" @click="$u.route('/center/dealList',{})">
					<u--image class="image" src="../../static/img/index-nav-3.png" width="101rpx" height="101rpx"></u--image>
					我的业绩
				</view>
				<view class="nav-item" @click="$u.route('/center/client',{type:'reLaunch'})">
					<u--image class="image" src="../../static/img/index-nav-4.png" width="101rpx" height="101rpx"></u--image>
					我的会员
				</view>
				<view class="nav-item" @click="$u.route('/center/mystore',{type:'reLaunch'})">
					<u--image class="image" src="../../static/img/index-nav-5.png" width="101rpx" height="101rpx"></u--image>
					我的门店
				</view>
			</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="">
										<text class="price">¥ <text class="price-num">{{item.patchPrice}}</text></text>
									</view>
								</view>
								<view class="down">
									<!-- <text class="original-price gray line-through">¥ {{item.salePrice}}</text> -->
								</view>
							</view>
							<view class="btn">去看看</view>
						</view>
					</view>
				</view>
			</view>
			<view class="experience">
				<view class="single-til u-flex u-row-between">
					<text class="text">体验店分布</text>
				<!-- 	<view class="u-flex">
						<text class="more-text" @click="$u.route('/xushuo/experience')">更多</text>
						<u-icon name="arrow-right" color="#676767" size="24rpx"></u-icon>
					</view> -->
				</view>
				<view class="index-img">
					<u--image class="image" :src="indexData.uxImg" width="100%" height="500rpx" radius="15rpx"></u--image>
				</view>
			</view>
			<!-- <tabbar :tabbarIndexProps='0' /> -->
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import { systemInfo } from "@/mixin.js";
	import tabbar from "../../components/tabbar.vue";
	export default {
		components:{
			tabbar,
		},
		mixins:[systemInfo],
		data() {
			return {
				staticUrl:this.$commonConfig.staticUrl,
				advantageSize:14,
				bannerList: [],
				hotGoods:[],
				xsIntro:{},
				indexData:{},
			}
		},
		onLoad() {
			// let userInfo = uni.getStorageSync('userInfo');
			// console.log('userInfo',userInfo);
			let that = this;
			this.swiperList();
			this.getSystemInfo();
			// console.log('statusBarHeight',this.statusBarHeight);
			// console.log('navigationBarHeight',this.navigationBarHeight);
			// console.log('windowHeight',this.windowHeight);
			// console.log('navHeight',this.navHeight);
		},
		onShow() {
			this.getHotGoods();
			this.getIndexData();
		},
		methods: {
			swiperList(){
				this.$u.api.swiperList({postion:4}).then(res=>{
					this.bannerList = 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('/pages/news/newsdetails', {
					type: 'swiperDetail',
					id: item.id
				});
			},
			getHotGoods(){
				this.$u.api.topGoodList({pageNum:1,pageSize:1}).then(res=>{
					this.hotGoods = res.data.rows;
					console.log('res',res);
				}).catch(err=>{
					console.log('getHotGoods',err.data);
				})
			},
			getIndexData(){
				this.$u.api.indexData().then(res=>{
					this.indexData = res.data;
					console.log('this.indexData',this.indexData);
				}).catch(err=>{
					console.log('getHotGoods',err.data);
				})
			},

		}
	}
</script>
<style>
page{
	background-color: #F9F9F9;
	padding-top: 0;
}
</style>
<style lang="scss" scoped>
.page-bg{
	.img{
		height: 100vh;
	}
}
.icon-nav{
	margin: 50rpx auto;
}
.user{
	margin-bottom: 40rpx;
	.name{
		margin: 0 20rpx 0 24rpx;
		font-size: 36rpx;
		font-weight: 600;
		color: #333333;
	}
	.level{
		font-size: 20rpx;
		font-weight: 400;
		color: #999999;
	}
}
.experience{
	margin-bottom: 50rpx;
}
.product{
	background-color: #F5F5F5;
	border-bottom: 0;
	.btn{
		padding: 14rpx 40rpx;
		background: linear-gradient(90deg, #00D17D 0%, #00A447 100%);
		color: #fff;
		position: relative;
		right: -20rpx;
		border-top-left-radius: 50rpx;
		border-bottom-left-radius: 50rpx;
	}
}
</style>