food_wechat/pages/index/index.vue

<template>
	<view class="vh100 flex column">
		<!-- banner -->
		<u-swiper :list="bannerList" keyName="url" :autoplay="true" height="616rpx"></u-swiper>
		<!-- 登录框 -->
		<view class="flex rad32 boxshadow loginBox mac">
			<view class="m-l-24 w-80rpx h-80rpx">
				<u-avatar size="80rpx" :src="avatarSrc"></u-avatar>
			</view>
			<view class="flex1 m-l-24 flex mac h100">
				<!-- 已登录：只显示手机号 -->
				<view v-if="userInfo.tel" class="fb fz32">{{ userInfo.tel }}</view>
				<!-- 未登录：显示“请登录”并跳转 -->
				<navigator v-else open-type="redirect" url="/pages/main/login">
					<view class="fb fz32">请登录</view>
				</navigator>
				<u-icon name="arrow-right"></u-icon>
			</view>
			<navigator url="/pages/order/index">
				<view class="flex column mc mac m-r-24 w-80rpx h-80rpx">
					<u-icon size="48rpx" name="order"></u-icon>
					<view class="fz24">订单</view>
				</view>
			</navigator>
		</view>
		<!-- 新订单 提示框 -->
		<!-- 新订单提示框 -->
		<!-- <view v-for="(item, index) in orderList" :key="index">
			订单：{{ item.order_sn }}
			<text>状态：{{ item.shipment_status }}</text>
		</view> -->
		<!-- 主按钮 -->
		<view class="flex mse" style="margin-top: 30rpx;">
			<mainBut url="/pages/shop/list" bg="#D43030" imgSrc="/static/icons/ordernow.svg" butBt="开始点餐"
				butSt="Order Now" />
			<mainBut url="/pages/shop/list?tag=shop" bg="#FF8D1A" imgSrc="/static/icons/buggoods.svg" butBt="购买商品"
				butSt="Buy Goods" />
			<!-- <mainBut bg="#FFC300" imgSrc="/static/icons/franchise.svg" butBt="项目介绍" butSt="Introduction" /> -->
		</view>
		<!-- 站长推荐 -->
		<view class="flex mc">
			<view class="flex recommendBox column mc">
				<!-- 站长推荐标题 -->
				<view class="flex recommendTit column">
					<view class="flex recommendTitBut rad16 column mac">
						<view class="flex w80 mse">
							<view class="recommendTitButTiao" v-for="i in 11" :key="i"></view>
						</view>
						<view class="flex mc mac h100">
							<view class="fz32 fb" style="color: #fff">站长推荐</view>
						</view>
					</view>
					<view class="flex mse" style="height: 18rpx;width: 252rpx; ">
						<view style="width:6rpx;background-color: #383838;" v-for="i in 2" :key="i"></view>
					</view>
				</view>
				<!-- 站长推荐内容 -->
				<swiper class="recommendSwiper" circular autoplay interval="6000">
					<swiper-item v-for="(item, index) in recommendList" :key="index">
						<!-- <view class="recommendSwiper-item rad8 h100 boxshadow m-l-12 m-r-12" ></view> -->
						<listItem :spu="item">
						</listItem>
					</swiper-item>
				</swiper>
			</view>
		</view>
		<!-- tabbar -->
		<view>
			<tabbar></tabbar>
		</view>
	</view>
</template>

<script>
	import {
		checkUserInfo
	} from '@/utils/index.js'

	export default {
		data() {
			return {
				avatarSrc: "", //头像地址
			}
		},
		computed: {
			userInfo() {
				return this.$store.state.userInfo
			},
			//订单列表 过滤出 已付款的状态订单
			orderList() {
				return this.$store.state.orderList.filter(item => item.main_status === '已付款')
			},
			//推荐的商品spu列表
			recommendList() {
				return this.$store.state.spuList.filter(item => item.recommend === '1')
			},
			//获取首页banner列表
			bannerList() {
			  return this.$store.state.bannerList
			    .filter(item => item.type === 'index')
			    .map(item => ({
			      url: item.photo
			    }))
			}
		},
		watch: {},
		created() {
			//检查token 没有则进行无感登录
			this.checkUserInfo()
			// 当页面显示时，设置tabber的激活项
			this.$store.commit('setTabbarCurrent', 0)
		},
		methods: {
			// 检查用户信息
			checkUserInfo,
		}
	}
</script>

<style lang="scss">
	.loginBox {
		width: 702rpx;
		height: 128rpx;
		background-color: #faf7f3;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		top: 494rpx;
	}

	.recommendBox {
		width: 702rpx;
		margin-top: 48rpx;
	}

	.recommendTit {
		height: 90rpx;
	}

	.recommendTitBut {
		width: 252rpx;
		height: 72rpx;
		background-color: $uni-color-error;
	}

	.recommendTitButTiao {
		width: 8rpx;
		height: 4rpx;
		background-color: $uni-text-color-inverse;
	}

	.recommendSwiper {
		width: 702rpx;
		height: 224rpx;
	}

	.recommendSwiper-item {
		background-color: $uni-bg-color;
		width: 680rpx;
		height: 184rpx;
	}
</style>