yurong/pages/tabbar/index.vue

<template>
	<view class="tabbar-page tabbar-page-padding">
		<taoke-home v-if="!promotionUnlocked"></taoke-home>
		<block v-else>
			<view class="w100 h-186" style="background-image: linear-gradient(to bottom,#F2BCBF,#F7F6FA);">
				<uni-nav-bar title="首页" :border="false" backgroundColor="transparent" class="fw-b"></uni-nav-bar>
			</view>
			<view class="w100 rowsc rows">
				<view class="w-710 h-80 bgff br-100 rows rowsm pl-20 pr-6 rowsb" @click="$tools.goNext('/pageOne/indexs/search')">
					<view class="rows rowsm">
						<image class="w-30 h-32 mr-12" src="/static/images/01_ss.png" mode=""></image>
						<input type="text" placeholder="请输入您要搜索的信息" class="fs-28 w-510" :disabled="true"/>
					</view>
					<view class="w-120 h-68 br-100 bg rows rowsm rowsc colfff fs-28">搜索</view>
				</view>
			</view>
			<view class="rows rowsc">
				<swiper :interval="3000" :duration="1000" circular autoplay class="w100 h-310 mt-20">
					<swiper-item class="w100 h100 rows rowsc" v-for="(item,index) in images" :key="index">
						<image class="w-710 h-310 br-20" :src="$tools.oss(item.image)" mode="aspectFill"></image>
					</swiper-item>
				</swiper>
			</view>
			<view class="w100 rows rowsc">
				<view class="w-710 h-80 rows rowsm br-20 pl-20 pr-20 bgff mt-20" @click="$tools.goNext('/pageOne/indexs/notList')">
					<text class="fs-30 fw-b">公告<text class="col">通知</text></text>
					<text class="mr-10 ml-10" style="color: #ccc;">|</text>
					<swiper autoplay circular vertical :interval="3000" :duration="1000" class="w-520 h-80">
						<swiper-item class="w100 h100 rows rowsm" v-for="(item,index) in nots" :key="index">
							<view class="fs-26 one_overflow fw-b">{{item.name}}</view>
						</swiper-item>
					</swiper>
				</view>
			</view>
			<view class="w100 rows rowsc mt-20">
				<view class="w-710 rows rowsw br-20 bgff pt-30">
					<view class="rows rowsm rowsl rowsc mb-30" style="width: 20%;" v-for="(item,index) in types" :key="index"
					@click="$tools.goReLaunch(`/pages/tabbar/sort?id=${item.id}`)">
						<image class="w-80 h-80 br-100" :src="$tools.oss(item.image)" mode="aspectFill"></image>
						<text class="fs-26 mt-12">{{item.name}}</text>
					</view>
				</view>
			</view>
			<view class="w100 rows rowsl rowsm mt-30">
				<view class="rows rowsm pl-20">
					<view class="fs-32 fw-b w-690">产品展示</view>
				</view>
				<view class="w-690 h-332 rows rowsw rowsb mt-20" v-if="list.length>0">
					<view class="rows rowsl w-332 rowsm mb-20 bgff br-20 pb-10" v-for="(item,index) in list" :key="index"
					@click="$tools.goNext(`/pageOne/indexs/detail?id=${item.id}`)">
						<image class="w-332 h-322 br-20" :src="$tools.oss(item.image)" mode="aspectFill"></image>
						<view class="w100 pl-10 pr-10 one_overflow fs-28 mt-10 fw-b">
							{{item.name}}
						</view>
						<view class="w100 rows rowsm pl-10 pr-10 mt-10 rowsb">
							<text class="fs-30 fw-b" style="color: #E43B3B;">￥{{item.price}}</text>
						</view>
					</view>
				</view>
				<view class="w100 rows rowsc h-600 rowsm" v-else>
					<image class="w-436 h-366" src="/static/other/5.png" mode=""></image>
				</view>
			</view>
		</block>
	</view>
</template>

<script>
	import TaokeHome from '@/components/taoke/tab-home.vue'
	export default {
		components: {
			TaokeHome
		},
		data() {
			return {
				images: [],
				nots: [],
				types: [],
				list: [],
				promotionUnlocked: false
			}
		},
		onLoad() {
			this.syncPromotionStatus()
			if (!this.promotionUnlocked) {
				return
			}
			this.loadPageData()
		},
		onShow() {
			this.syncPromotionStatus()
			this.syncCustomTabBar()
			if (!this.promotionUnlocked) {
				return
			}
			if (this.list.length === 0) {
				this.loadPageData()
			}
		},
		methods: {
			syncPromotionStatus() {
				this.promotionUnlocked = this.$tools.getPromotionUnlocked()
			},
			syncCustomTabBar() {
				this.$tools.setTabbarSelectedPath('/pages/tabbar/index')
				if (typeof this.getTabBar === 'function') {
					const tabBar = this.getTabBar()
					if (tabBar && typeof tabBar.syncPromotionStatus === 'function') {
						setTimeout(() => {
							tabBar.syncPromotionStatus('/pages/tabbar/index')
						}, 0)
					}
				}
			},
			loadPageData() {
				this.banner()
				this.notice()
				this.category()
				this.shop()
			},
			banner() {
				this.$tools.axios('POST', 'index/banner').then(res => {
					this.images = res.data
				})
			},
			notice() {
				this.$tools.axios('POST', 'index/notice').then(res => {
					this.nots = res.data
				})
			},
			category() {
				this.$tools.axios('POST', 'shop/category').then(res => {
					this.types = res.data
				})
			},
			shop() {
				this.$tools.axios('POST', 'shop/shop', {
					type: 1
				}).then(res => {
					this.list = res.data
				})
			}
		}
	}
</script>

<style>
	page{
		background-color: #FFFFFF;
	}
</style>