qianniaoMp/components/PageDesign/PageDesign.vue

<template>
	<view class="pageDesin-box" v-if="temData.length">
		<!-- <view class="address-view" @click="openLocation" :style="{ backgroundColor: temData[0].modelData.topBgColor, color:temData[0].modelData.textColor }">
			<text class="ibonfont ibondingweiweizhi"></text>
			<text class="address-text">{{ location.address || '请手动定位' }}</text>
			<text class="ibonfont ibonjinru"></text>
		</view> -->
		<!-- <view style="position: relative;z-index: 2;"> -->
		<block v-for="(item, index) in temData" :key="index">
			<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" />
			<view class="" v-if="temData[index].comName === 'NavBar' && temData[index+1].comName !== 'NavBar'">
				<image src="http://up.liuniukj.com/167307900573324/931544405107da76ca2ec31cd63fae49/yyzq.png" mode=""
					class="banner-ad"
					@click="goPage('/pagesT/unit/item')"></image>
			</view>
			<AdvGroup v-if="item.comName === 'AdvGroup'" :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" />
			<div v-if="item.comName === 'FloatBth'" class="float-bth" @click="btnEvent(item)" :style="{
					backgroundColor: item.modelData.btnStyle === 2 ? item.modelData.bgColor : 'transparent',
					borderColor: item.modelData.btnStyle === 2 ? item.modelData.bgColor : '#999999'
				}">
				<image :src="item.modelData.image" class="float-img" />
			</div>
			<!-- #ifdef MP-WEIXIN -->
			<button v-if="item.comName === 'wxService'" class="float-bth wxService" :style="{
					color: item.modelData.color
				}" open-type="contact">
				<text class="ibonfont ibonkefu"></text>
			</button>
			<!-- #endif -->
		</block>
		<!-- <view class="logo-view" v-if="$common.getEnToken() !== '8fa553d53f44e33123e4d0d51a0de634'">
			<image src="https://onlineimg.qianniao.vip/QNlogo-i-1.png" mode="aspectFit"></image>
			<view class="logo-tip">- 千鸟云商提供技术支持 -</view>
		</view> -->
		<!-- </view> -->
	</view>
</template>

<script>
	import SearchC from './components/Search.vue';
	import ImgSwiper from './components/Banner.vue';
	import MagicImg from './components/MagicImg.vue';
	import Notice from './components/Notice.vue';
	import NavBar from './components/NavBar.vue';
	import GoodsGroup from './components/GoodsGroup.vue';
	import LimitedSeckill from './components/LimitedSeckill.vue';
	import CouponGroup from './components/CouponGroup.vue';
	import LineF from './components/Line.vue';
	import Blank from './components/Blank.vue';
	import AdvGroup from './components/AdvGroup.vue';
	// import NavigationBar from './components/NavigationBar.vue';

	export default {
		name: 'PageDesign',
		components: {
			SearchC,
			ImgSwiper,
			MagicImg,
			Notice,
			NavBar,
			GoodsGroup,
			LimitedSeckill,
			CouponGroup,
			LineF,
			Blank,
			AdvGroup
			// NavigationBar
		},
		props: {
			showGoodsPrice: {
				type: [Number, String],
				default: ''
			},
			temData: {
				type: Array,
				default: () => {
					return [];
				}
			},
			pageBack: {
				type: Boolean,
				default: false
			},
			isBackIndex: {
				type: Boolean,
				default: false
			},
			amapPlugin: {
				type: [Object, Function],
				default: () => {
					return {};
				}
			},
			selAddress: {
				type: Object,
				default: () => {
					return {};
				}
			}
		},
		computed: {
			style() {
				const systemInfo = uni.getSystemInfoSync();
				return `padding-top:${systemInfo.statusBarHeight + 50}px`;
			},
			location() {
				return this.$store.state.locationObj;
			}
		},
		data() {
			return {
				selAddressD: {}
			};
		},
		watch: {
			selAddress(val) {
				this.selAddressD = val;
			}
		},
		created() {
			// console.log(this.$common.getEnToken())
			// this.getHome();
		},
		methods: {
			backEvent() {
				if (this.isBackIndex) {
					this.goPage('/pages/index/index', 'switchTab');
				} else {
					uni.navigateBack();
				}
			},
			openLocation() {
				this.$emit('openLocation');
			},
			getHome() {
				this.$u.api.getHome().then(res => {
					uni.stopPullDownRefresh();
					this.temData = res.data;
				});
			},
			btnEvent(item) {
				if (item.modelData.btnType === 2) {
					uni.makePhoneCall({
						phoneNumber: item.modelData.phone
					});
				} else if (item.modelData.btnType === 1) {
					this.goPage(item.modelData.url, item.modelData.switchTab);
				} else {
					uni.pageScrollTo({
						scrollTop: 0,
						duration: 300
					});
				}
			}
		}
	};
</script>

<style lang="scss">
	.pageDesin-box {
		// background-color: #f5f9fc;
		// padding-top: calc(44px + var(--status-bar-height));
	}

	.float-bth {
		position: fixed;
		bottom: 150upx;
		right: 20upx;
		width: 80upx;
		height: 80upx;
		text-align: center;
		cursor: pointer;
		border-radius: 100%;
		border: 1upx solid #999;
		box-shadow: 0 6upx 20upx #dcdcdc;
		z-index: 99;

		.float-img {
			width: 40upx;
			height: 40upx;
			display: inline-block;
			margin-top: 20upx;
		}
	}

	.wxService {
		padding: 0;
		background-color: #ffffff;
		border: 0 none;
		bottom: 250upx;
		line-height: 80upx;

		.ibonkefu {
			font-size: 46upx;
		}

		&::after {
			border: 0 none;
		}
	}

	.logo-view {
		text-align: center;
		padding: 10upx 0;

		image {
			width: 120upx;
			height: 20upx;
			opacity: 0.7;
		}

		.logo-tip {
			// padding-top: 4upx;
			font-size: 18upx;
			color: #999;
		}
	}

	.address-view {
		padding: 20upx;
		font-size: 26upx;

		// background-color: #ffffff;
		.address-text {
			display: inline-block;
			vertical-align: middle;
			font-weight: bold;
		}

		.ibonfont {
			margin-right: 10upx;
			// color: #999;
			vertical-align: middle;
		}

		.ibonjinru {
			// color: #333;
			font-weight: 300;
			font-size: 28upx;
		}
	}

	.banner-ad {
		width: 690rpx;
		height: 190rpx;
		display: block;
		margin: 20rpx auto;
	}
</style>