Homestay_manage_app/packageShang/pages/tabbar/home.vue

<template>
	<view class="box-sizing-b w-full">
		<!-- 最上层背景 -->
		<view class="top-bg">
			<view style="height: 54rpx;width: 100%;"></view>
			<!-- 01. 头部组件 -->
			<use-header :search-tip="searchTip" :search-auto="searchAuto" @search="search" style="margin-top: 54rpx"></use-header>
			<!-- 02. 轮播区 -->
			<view class="swiper-area pos-r" v-if="swiperDatas && swiperDatas.length > 0">
				<!-- 轮播组件 -->
				<swiper class="swiper w-full" autoplay indicator-dots indicator-color="#f7f7f7" indicator-active-color="rgba(36, 147, 241, 1)">
					<swiper-item class="swiper-item padding-lr wh-full box-sizing-b" v-for="(item, index) in swiperDatas" :key="index">
						<view class="wh-full" @click.stop="topage(item)">
							<image class="border-radius wh-full" mode="aspectFill" :lazy-load="true" :src="item.img" />
						</view>
					</swiper-item>
				</swiper>
			</view>
		

			<!-- 03. 分类区 -->
			<view class="category-area dflex dflex-wrap-w" v-if="categoryDatas && categoryDatas.length > 0">
				<view class="category-item dflex dflex-flow-c margin-bottom-sm" v-for="(item, index) in categoryDatas"
					:key="index" @click="topage2(item)">
					<image class="margin-bottom-xs" lazy-load :src="item.icon"></image>
					<text class="tac clamp" style="color: black;">{{ item.name }}</text>
				</view>
			</view>

			<!-- 04. 限时精选 -->
			<view class="xianshijing">
				<use-list-title title="限时精选" size="32" fwt="600" color="#333" iconfont="icondaishouhuo-" @goto="limit">
				</use-list-title>
				<view class="limit-area">
					<scroll-view class="padding-lr" scroll-x>
						<view class="dflex padding-bottom">
							<view class="item margin-right-sm" v-for="(item, index) in goodsLimitDatas" :key="index"
								@click="togoods(item)">
								<image class="border-radius-xs" v-if="((item.imgs).indexOf(',')) != -1"
								 mode="aspectFill" :lazy-load="true" :src="((item.imgs).substring(0, ((item.imgs).indexOf(','))))"></image>
								 <image class="border-radius-xs" v-else
								  mode="aspectFill" :lazy-load="true" :src="item.imgs"></image>
								<text class="title clamp padding-bottom-xs">{{ item.name }}</text>
								<text class="price">{{ item.price  }}</text><text class="m-price">{{ item.marketPrice  }}</text>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>

			<!-- 05. 热门推荐 -->
			<use-hot-goods :datas="goodsHotDatas" autoload="none" title="热门推荐"></use-hot-goods>
			<view style="height: 125px;width: 100%;"></view>

			<!-- 置顶 -->
			<use-totop ref="usetop" :style="{ marginBottom: navHeight + 'px' }"></use-totop>

			<!-- #ifdef MP-WEIXIN -->
			<official-account @bindload="wxOAccountLoad" @binderror="wxOAccountErr"></official-account>
			<!-- #endif -->
		</view>
		<!-- <tabbar :current-page="0"></tabbar> -->
	</view>
</template>

<script>
	import { mapState } from 'vuex';
	import {
		getLunbo,
		goodsgory,
		goodslistlimit
	} from '../../utils/api_home.js'
	import useHeader from '../../components/use-header/use-header.vue'
	import useListTitle from '../../components/use-list-title/use-list-title.vue'
	import useHotGoods from '../../components/use-hot-goods/use-hot-goods.vue'
	import useTotop from '../../components/use-totop/use-totop.vue'
	// import tabbar from '../tabbar.vue'
	export default {
		computed: {
			...mapState(['member'])
		},
		components:{
			useHeader,
			useListTitle,
			useHotGoods,
			useTotop,
			// tabbar
		},
		data() {
			return {
				// 头部参数
				searchAuto: !0,
				searchTip: '万千商品，等你来采购',

				// 轮播区
				swiperDatas: [],
				// 金刚区分类
				categoryDatas: [],
				// 限时精选
				goodsLimitDatas: [],
				// 热门推荐
				goodsHotDatas: [],

				scrollTop: 0,
				navHeight: 50,
			};
		},
		// 监听页面加载
		onLoad() {
		},
		onPageScroll(e) {
			// this.scrollTop = e.scrollTop
			this.$refs.usetop.change(e.scrollTop);
		},
		// 监听页面显示。页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面
		onShow() {
			this.get_lunbo()
			this.get_goodsgory()
			this.get_goodslist()
			this.get_good_hot()
		},
		// 监听用户下拉刷新
		onPullDownRefresh() {
			this.get_lunbo(() => {
				uni.stopPullDownRefresh();
			});
			this.get_goodsgory(() => {
				uni.stopPullDownRefresh();
			});
			this.get_goodslist(() => {
				uni.stopPullDownRefresh();
			});
			this.get_good_hot(() => {
				uni.stopPullDownRefresh();
			});
		},
		// 用户点击右上角分享
		// https://uniapp.dcloud.io/api/plugins/share?id=showsharemenu
		onShareAppMessage: function(ops) {
			let _this = this,
				mid = 0;

			if (_this.member && _this.member._id) {
				mid = _this.member._id;
			}

			return {
				title: '特产商城',
				path: `/pages/tabbar/home?mid=${mid}`,
				// imageUrl: 'https://mall-os-api.use-cloud.com/files/upload/image/20200408/200408115587860242.jpg',
				success: function(res) {
					// 转发成功
					console.log('转发成功', res);
				},
				fail: function(res) {
					// 转发失败
					console.log('转发失败', res);
				}
			};
		},


		methods: {
			//轮播图列表
			get_lunbo() {
				let _self = this
				_self.swiperDatas=[]
				getLunbo().then((res) => {
					if (res.success) {
						res.data.list.forEach(data => {
							_self.swiperDatas.push(data)
						})
					}
				})
			},
			// 商品金刚区分类
			get_goodsgory(){
				let _self = this;
				_self.categoryDatas=[]
				goodsgory().then((res) => {
					if (res.success) {
						res.data.forEach(data => {
							_self.categoryDatas.push(data)
						})
					}
				})
			},
			//商品限时精选
			get_goodslist(){
				let _self = this;
				_self.goodsLimitDatas=[]
				var data='?limited=1&state=1'
				goodslistlimit(data).then((res) => {
					if (res.success) {
						var total=res.data.totalCount
						data='?limited=1&pageSize='+total
						goodslistlimit(data).then((res) => {
							if (res.success) {
								res.data.list.forEach(data => {
									_self.goodsLimitDatas.push(data)
								})
							}else{
								_self.$message.warning('没有符合条件的数据！')
							}
						})
					}
				})
			},
			// 热门推荐
			get_good_hot(){
				let _self = this;
				_self.goodsHotDatas=[]
				var data='?hot=1&state=1'
				goodslistlimit(data).then((res) => {
					if (res.success) {
						var total=res.data.totalCount
						data='?hot=1&pageSize='+total
						goodslistlimit(data).then((res) => {
							if (res.success) {
								res.data.list.forEach(data => {
									_self.goodsHotDatas.push(data)
								})
							}else{
								_self.$message.warning('没有符合条件的数据！')
							}
						})
					}
				})
			},
			// 搜索回调函数
			search() {
				console.log('home search');
			},
			// 跳转页面
			topage(item) {
			},
			topage2(item){
				uni.navigateTo({
					url:'/packageShang/pages/tabbar/category?cid='+item.id
				})
				// this.$api.togoodslist({
				// 	cid: item.id,
				// 	level:item.level,
				// 	keyword:item.name
				// });
			},
			// 限时精选 -> 商品详情
			togoods(item) {
				// 跳转商品详情
				this.$api.togoods({
					id: item.id
				});
			},
			// 限时精选
			limit() {
				// 跳转商品列表 - 限时精选类目
				this.$api.togoodslist({
					limited: 1
				});
			},
		},
		mounted() {
			// #ifdef H5 || MP-360
			this.navHeight = 50;
			// #endif
		}
	};
</script>

<style lang="scss">
	@import url('/packageShang/components/iconfont/iconfont.css');
	@import url('/packageShang/common/common.scss');
	page {
		min-height: 100%;
		background: $page-color-base;
	}
	// 最上层背景
	.top-bg{
		width: 100%;
		display: flow;
		height: 500rpx;
		background: linear-gradient(180deg, rgba(36, 147, 241, 1) 0%, rgba(36, 147, 241, 1) 64.28%, rgba(255, 255, 255, 0) 100%);
		.top-title{
			padding: 106rpx 0 0 30rpx;
			font-size: 36rpx;
			font-weight: 400;
			line-height: 36rpx;
			color: rgba(255, 255, 255, 1);
		}
	}
	/* 轮播图区 */
	.swiper-area {
		padding-top: 20rpx;
		.swiper {
			height: 276rpx;
		}
	}

	/* 分类区 */
	.category-area {
		width: 690rpx;
		// height: 100%;
		border-radius: 14rpx;
		background: rgba(255, 255, 255, 1);
		margin: 15rpx 0 0 30rpx;
		padding: 15rpx 0 30rpx 0;

		.category-item {
			font-size: $font-sm + 2upx;
			color: $font-color-dark;
			width: 20%;
		}

		image {
			width: 90rpx;
			height: 90rpx;
		}
	}

	/* 限时精选区 */
	.xianshijing{
		margin: 15rpx 0 0 30rpx;
		width: 690rpx;
		height: 428rpx;
		border-radius: 14rpx;
		background: rgba(255, 255, 255, 1);
		.limit-area {
			min-height: 221rpx;
		
			.item {
				width: 221rpx;
		
				image {
					width: 221rpx;
					height: 221rpx;
				}
			}
		}
	}
	

</style>