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 class="fb fz32">立即登录</view>
				<u-icon name="arrow-right"></u-icon>
			</view>
			<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>
		</view>
		<!-- 主按钮 -->
		<view class="flex mse" style="height: 222rpx;margin-top: 30rpx;">
			<navigator url="/pages/shop/list">
				<mainBut bg="#D43030" imgSrc="/static/icons/ordernow.svg" butBt="开始点餐" butSt="Order Now" />
			</navigator>
			<navigator url="/pages/shop/demo">
				<mainBut bg="#FF8D1A" imgSrc="/static/icons/buggoods.svg" butBt="购买商品" butSt="Buy Goods" />
			</navigator>
			<mainBut bg="#FFC300" imgSrc="/static/icons/franchise.svg" butBt="项目介绍" butSt="Introduction" />
		</view>
		<!-- 站长推荐 -->

		<!-- tabbar -->
		<view>
			<u-tabbar :value="current" @change="handleTabChange" :fixed="true" :placeholder="true"
				:safeAreaInsetBottom="true" activeColor="#D43030">
				<u-tabbar-item class="fz24" text="首页" icon="home"></u-tabbar-item>
				<u-tabbar-item class="fz24" text="点餐" icon="grid"></u-tabbar-item>
				<u-tabbar-item class="fz24" text="我的" icon="account"></u-tabbar-item>
			</u-tabbar>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				avatarSrc: "", //头像地址
				current: 0, //tabbar 激活默认值
				bannerList: [{ //banner
					url: '/static/banner1.png'
				}],
			}
		},
		onLoad() {

		},
		onShow() {
			// 当页面显示时，设置 current 为首页索引
			this.current = 0;
		},
		methods: {
			handleTabChange(name) {
				// 更新当前选中的 tab 索引
				if (this.current === name) {
					return
				}
				this.current = name
				if (name === 0) {
					uni.redirectTo({
						url: '/pages/index/index'
					});
				} else if (name === 1) {
					uni.navigateTo({
						url: '/pages/shop/list'
					});
				} else if (name === 2) {
					uni.redirectTo({
						url: '/pages/main/index'
					});
				}
			}
		}
	}
</script>

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