hlm_pl_mall_h5/pages/home/storespecial/Index.vue

<template>
	<page-meta :root-font-size="fontSize+'px'"></page-meta>
	<home-base :show="false">
		<view>
			<common-store-header v-if="editablePage && editablePage.editable_page_theme_config && editablePage.editable_page_theme_config.if_show_header==1" :store="storeInfo"></common-store-header>
			<view class="div container" :style="pageStyle" v-if="storeInfo">
				<view class="div" v-for='(editablePageConfig,key) in editablePageConfigList' :key="key">
					<model1 v-if='editablePageConfig.editable_page_model_id==1'
						v-bind:editablePageConfig="editablePageConfig"></model1>
					<model2 v-if='editablePageConfig.editable_page_model_id==2'
						v-bind:editablePageConfig="editablePageConfig"></model2>
					<model6 v-if='editablePageConfig.editable_page_model_id==6'
						v-bind:editablePageConfig="editablePageConfig"></model6>
					<model12 v-if='editablePageConfig.editable_page_model_id==12'
						v-bind:editablePageConfig="editablePageConfig"></model12>
					<model13 v-if='editablePageConfig.editable_page_model_id==13'
						v-bind:editablePageConfig="editablePageConfig"></model13>
					<model14 v-if='editablePageConfig.editable_page_model_id==14'
						v-bind:editablePageConfig="editablePageConfig"></model14>
					<model15 v-if='editablePageConfig.editable_page_model_id==15'
						v-bind:editablePageConfig="editablePageConfig"></model15>
                    <model16 v-if='editablePageConfig.editable_page_model_id==16'
                        v-bind:editablePageConfig="editablePageConfig"></model16>
                    <model17 v-if='editablePageConfig.editable_page_model_id==17'
                        v-bind:editablePageConfig="editablePageConfig"></model17>
                    <model18 v-if='editablePageConfig.editable_page_model_id==18'
                    	v-bind:editablePageConfig="editablePageConfig"></model18>
                    <model19 v-if='editablePageConfig.editable_page_model_id==19'
                    	v-bind:editablePageConfig="editablePageConfig"></model19>
                    <model20 v-if='editablePageConfig.editable_page_model_id==20'
                    	v-bind:editablePageConfig="editablePageConfig"></model20>
                    <model21 v-if='editablePageConfig.editable_page_model_id==21'
                    	v-bind:editablePageConfig="editablePageConfig"></model21>
                    <model22 v-if='editablePageConfig.editable_page_model_id==22'
                        v-bind:editablePageConfig="editablePageConfig"></model22>
				</view>
				<uni-popup ref="isshow" :mask-click="false">
					<view class="jump-adv">
						<image mode="aspectFit" class="jump-adv-image" :src="showimage">
							<view class="jump-adv-button iconfont" @click="closeAdv()">&#xe65a;</view>
					</view>
				</uni-popup>
				<view
					v-if="editablePage && editablePage.editable_page_theme_config && editablePage.editable_page_theme_config.if_show_button==1"
					class="float-button" :style="floatButtonStyle">
					<image class="img" mode="aspectFit" :src="editablePage.editable_page_theme_config.button_image" />
				</view>

			</view>
			<common-store-footer :store_id="store.store_id"
				v-if="editablePage && editablePage.editable_page_theme_config && editablePage.editable_page_theme_config.if_show_footer==1"></common-store-footer>
		</view>
	</home-base>
</template>

<script>
	import {
		getFontSize
	} from '@/util/common'
	import HomeBase from '../HomeBase'
	import {
		mapState,
		mapMutations
	} from 'vuex'
	import {
		getEditablePageConfigList
	} from '../../../api/homeindex'
	import {
		getStoreInfo
	} from '../../../api/homestoredetail'
	import CommonStoreHeader from '../common/CommonStoreHeader'
	import CommonStoreFooter from '../common/CommonStoreFooter'
	import Model1 from '../special/editable_page_model/Model1'
	import Model2 from '../special/editable_page_model/Model2'
	import Model6 from '../special/editable_page_model/Model6'
	import Model12 from '../special/editable_page_model/Model12'
	import Model13 from '../special/editable_page_model/Model13'
	import Model14 from '../special/editable_page_model/Model14'
	import Model15 from '../special/editable_page_model/Model15'
    import Model16 from '../special/editable_page_model/Model16'
    import Model17 from '../special/editable_page_model/Model17'
    import Model18 from '../special/editable_page_model/Model18'
    import Model19 from '../special/editable_page_model/Model19'
    import Model20 from '../special/editable_page_model/Model20'
    import Model21 from '../special/editable_page_model/Model21'
    import Model22 from '../special/editable_page_model/Model22'
	export default {
		name: 'StoreSpecialIndex',
		data() {
			return {
				special_id:0,
				storeInfo: false,
				floatButtonStyle: {},
				showimage: '',
				pageStyle: {},
				editablePage: {},
				editablePageConfigList: [],
			}
		},
		props: ['store', 'pagePath', 'itemId'],
		components: {
			HomeBase,
			Model1,
			Model2,
			Model6,
			Model12,
			Model13,
			Model14,
			Model15,
            Model16,
            Model17,
            Model18,
            Model19,
            Model20,
            Model21,
            Model22,
			CommonStoreHeader,
			CommonStoreFooter
		},
		computed: {
			fontSize() {
				return getFontSize()
			},
			...mapState({
				token: state => state.member.token,
				special: state => state.home.special,
				closeStorePopupAdv: state => state.home.closeStorePopupAdv,
			}),

		},
		mounted() {
			if (!this.store) {
				getStoreInfo(
					this.store.store_id, this.token
				).then((res) => {
					this.storeInfo = res.result.store_info
					this.initData()
				}).catch(function(error) {
					uni.showToast({
						icon: 'none',
						title: error.message
					})
				})
			} else {
				this.storeInfo = this.store
				this.initData()
			}
		},
		onLoad: function(option) {
			this.store.store_id = option.id ? option.id : ''
			this.special_id = option.special_id
			if (!this.special_id && !this.pagePath) {
				uni.showToast({
					icon: 'none',
					title: '缺少参数'
				})
			}

		},

		methods: {
			...mapMutations({
				saveHomeSpecial: 'saveHomeSpecial',
				saveCloseStorePopupAdv: 'saveCloseStorePopupAdv'
			}),
			showPopup(id) {
				this.$refs[id].open()
			},
			hidePopup(id) {
				this.$refs[id].close()
			},
			closeAdv() {
				this.hidePopup('isshow')
				this.saveCloseStorePopupAdv({
					closeStorePopupAdv: true
				})
			},
			initData() {
				getEditablePageConfigList(this.special_id, this.pagePath, this.itemId, this.store.store_id).then(res => {

					this.editablePage = res.result.editable_page
					this.editablePageConfigList = res.result.editable_page_config_list
					if (this.pagePath) {
						this.saveHomeSpecial({
							pagePath: this.pagePath,
							storeId: this.store.store_id,
							itemId: this.itemId,
							editablePage: this.editablePage,
							editablePageConfigList: this.editablePageConfigList
						})
					}

					if (this.editablePage) {
						this.pageStyle = {
							backgroundColor: this.editablePage.editable_page_theme_config.back_color,
							paddingLeft: this.editablePage.editable_page_theme_config.page_margin + 'px',
							paddingRight: this.editablePage.editable_page_theme_config.page_margin + 'px',
							paddingBottom: (this.editablePage['editable_page_theme_config'][
								'if_show_footer'] == 1 ? 60 : 0) + 'px',
							backgroundImage: 'url(' + this.editablePage.editable_page_theme_config.back_image +
								')'
						}
						uni.setNavigationBarTitle({
							title: this.editablePage.editable_page_name
						})
						if (this.editablePage.editable_page_theme_config.if_show_jump == 1 && this.editablePage
							.editable_page_theme_config.jump_image) {
							this.showimage = this.editablePage.editable_page_theme_config.jump_image
							if (!this.closeStorePopupAdv) {
								this.showPopup('isshow')
							}
						}
						var inset
						switch (this.editablePage.editable_page_theme_config.button_position) {
							case '1':
								inset = this.editablePage.editable_page_theme_config.button_margin +
									'px auto auto 0px'
								break
							case '2':
								inset = this.editablePage.editable_page_theme_config.button_margin +
									'px 0px auto auto'
								break
							case '3':
								inset = 'auto auto ' + this.editablePage.editable_page_theme_config.button_margin +
									'px 0px'
								break
							case '4':
								inset = 'auto 0px ' + this.editablePage.editable_page_theme_config.button_margin +
									'px auto'
								break
						}
						this.floatButtonStyle = {
							inset: inset,
							paddingLeft: this.editablePage.editable_page_theme_config.page_margin + 'px',
							paddingRight: this.editablePage.editable_page_theme_config.page_margin + 'px'
						}
					}
				}).catch(function(error) {
					uni.showToast({
						icon: 'none',
						title: error.message
					})
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	container {
		background-repeat: no-repeat;
		background-size: 100%;
	}

	.jump-adv {
		position: relative;
	}

	.jump-adv-image {
		max-width: 100%;
	}

	.jump-adv-button {
		position: absolute;
		top: 0;
		right: 0;
		width: 20px;
		height: 20px;
		line-height: 20px;
		border-radius: 20px;
		text-align: center;
		background-color: rgba(255, 255, 255, .5);
		cursor: pointer;
	}

	.float-button {
		position: fixed;
		z-index: 2;
	}

	.float-button .img {
		width: 40px;
		height: 40px;
	}
</style>