junzitang/pagesT/store/StoreHome.vue

<template>
	<view :class="['qn-page-' + theme]" class="view-wrap" :style="pageStyle">
		<block v-for="(item, index) in temData" :key="index">
			<u-navbar
				v-if="item.comName === 'NavigationBar'"
				:border-bottom="false"
				:back-icon-color="item.modelData.textColor"
				:title="item.modelData.name"
				:background="navBackground"
				:title-color="item.modelData.textColor"
			></u-navbar>
			<shopInfo v-if="item.comName === 'ShopInfo'" :modelData="item.modelData" :storeData="storeData" />
			<ImgSwiper v-if="item.comName === 'ImgSwiper'" :modelData="item.modelData" />
			<SearchC v-if="item.comName === 'SearchC'" :modelData="item.modelData" />
			<MagicImg v-if="item.comName === 'MagicImg'" :modelData="item.modelData" />
			<Notice v-if="item.comName === 'Notice'" :modelData="item.modelData" :noticeData="item.data" />
			<NavBar v-if="item.comName === 'NavBar'" :modelData="item.modelData" />
			<GoodsGroup v-if="item.comName === 'GoodsGroup'" :modelData="item.modelData" :goodsList="item.data" :showGoodsPrice="showGoodsPrice" :selAddress="selAddressD" />
			<LimitedSeckill
				v-if="item.comName === 'LimitedSeckill'"
				:modelData="item.modelData"
				:goodsList="item.data"
				:showGoodsPrice="showGoodsPrice"
				:selAddress="selAddressD"
			/>
			<CouponGroup v-if="item.comName === 'CouponGroup'" :modelData="item.modelData" :couponList="item.data" />
			<LineF v-if="item.comName === 'LineF'" :modelData="item.modelData" />
			<Blank v-if="item.comName === 'Blank'" :modelData="item.modelData" />
		</block>
	</view>
</template>

<script>
import SearchC from '@/components/PageDesign/components/Search.vue';
import ImgSwiper from '@/components/PageDesign/components/Banner.vue';
import MagicImg from '@/components/PageDesign/components/MagicImg.vue';
import Notice from '@/components/PageDesign/components/Notice.vue';
import NavBar from '@/components/PageDesign/components/NavBar.vue';
import GoodsGroup from '@/components/PageDesign/components/GoodsGroup.vue';
import LimitedSeckill from '@/components/PageDesign/components/LimitedSeckill.vue';
import CouponGroup from '@/components/PageDesign/components/CouponGroup.vue';
import LineF from '@/components/PageDesign/components/Line.vue';
import Blank from '@/components/PageDesign/components/Blank.vue';
import shopInfo from '@/components/PageDesign/components/shopInfo.vue';
export default {
	name: 'StoreHome',
	components: {
		SearchC,
		ImgSwiper,
		MagicImg,
		Notice,
		NavBar,
		GoodsGroup,
		LimitedSeckill,
		CouponGroup,
		LineF,
		Blank,
		shopInfo
	},
	computed: {
		pageStyle() {
			if (this.temData.length) {
				const obj = this.temData[0].modelData;
				return `background-color:${obj.pageBgColor};background-image:url(${obj.bgImage});backgroundPosition: ${
					obj.topBgColor ? '0 ' + (this.barHeight + 44) + 'px' : '0 0'
				}`;
			} else {
				return '';
			}
		},
		navBackground() {
			if (this.temData.length) {
				const obj = this.temData[0].modelData;
				if (!obj.topBgColor) {
					return { background: 'url(' + obj.bgImage + ') no-repeat', backgroundSize: 'cover' };
				} else {
					return { backgroundColor: obj.topBgColor };
				}
			} else {
				return {};
			}
		}
	},
	data() {
		return {
			temData: [],
			storeData: '',
			shopId: ''
		};
	},
	onLoad(options) {
		this.storeData = JSON.parse(options.storeData);
		this.shopId = this.storeData.id;
		this.shopHome();
	},
	methods: {
		shopHome() {
			this.$u.api
				.shopHome({
					pageType: 1,
					merchantId: this.shopId
				})
				.then(res => {
					uni.stopPullDownRefresh();
					if(!res.data.length){
						this.$u.toast('该商户未设置商户首页')
						setTimeout(()=>{
							uni.navigateBack()
						},2000)
						return
					}
					this.temData = res.data;
				});
		}
	},
	// 下拉刷新
	onPullDownRefresh() {
		this.shopHome();
	}
};
</script>

<style scoped lang="scss">
.view-wrap {
	background-repeat: no-repeat;
	background-color: #f7f8fa;
	background-size: 750rpx;
	height: 100vh;
	overflow-y: auto;
	// background-position: 0 calc(var(--status-bar-height) + 44px);
}
</style>