QianNiaoUser/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" />
			<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;
	}
}
</style>