hlm_pl_mall_h5/pages/home/special/Index.vue

<template>
	<page-meta :root-font-size="fontSize+'px'"></page-meta>
	<home-base :show="editablePage && editablePage.editable_page_theme_config && editablePage.editable_page_theme_config.if_show_footer==1">
		<view class="div container" :style="pageStyle">
			<view class="div" v-for='(editablePageConfig,key) in editablePageConfigList' :key="key">
				<model1 v-if='editablePageConfig.editable_page_model_id==1'
					v-bind:editablePageConfig="editablePageConfig" v-bind:editablePage="editablePage"></model1>
				<model2 v-if='editablePageConfig.editable_page_model_id==2'
					v-bind:editablePageConfig="editablePageConfig" v-bind:editablePage="editablePage"></model2>
				<model6 v-if='editablePageConfig.editable_page_model_id==6'
					v-bind:editablePageConfig="editablePageConfig" v-bind:editablePage="editablePage"></model6>
				<model12 v-if='editablePageConfig.editable_page_model_id==12'
					v-bind:editablePageConfig="editablePageConfig" v-bind:editablePage="editablePage"></model12>
				<model13 v-if='editablePageConfig.editable_page_model_id==13'
					v-bind:editablePageConfig="editablePageConfig" v-bind:editablePage="editablePage"></model13>
				<model14 v-if='editablePageConfig.editable_page_model_id==14'
					v-bind:editablePageConfig="editablePageConfig" v-bind:editablePage="editablePage"></model14>
				<model15 v-if='editablePageConfig.editable_page_model_id==15'
					v-bind:editablePageConfig="editablePageConfig" v-bind:editablePage="editablePage"></model15>
				<model16 v-if='editablePageConfig.editable_page_model_id==16'
					v-bind:editablePageConfig="editablePageConfig" v-bind:editablePage="editablePage"></model16>
				<model17 v-if='editablePageConfig.editable_page_model_id==17'
					v-bind:editablePageConfig="editablePageConfig" v-bind:editablePage="editablePage"></model17>
				<model18 v-if='editablePageConfig.editable_page_model_id==18'
					v-bind:editablePageConfig="editablePageConfig" v-bind:editablePage="editablePage"></model18>
				<model19 v-if='editablePageConfig.editable_page_model_id==19'
					v-bind:editablePageConfig="editablePageConfig" v-bind:editablePage="editablePage"></model19>
				<model20 v-if='editablePageConfig.editable_page_model_id==20'
					v-bind:editablePageConfig="editablePageConfig" v-bind:editablePage="editablePage"></model20>
				<model21 v-if='editablePageConfig.editable_page_model_id==21'
					v-bind:editablePageConfig="editablePageConfig" v-bind:editablePage="editablePage"></model21>
				<model22 v-if='editablePageConfig.editable_page_model_id==22'
					v-bind:editablePageConfig="editablePageConfig" v-bind:editablePage="editablePage"></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>
	</home-base>
</template>

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

		},
		mounted() {
			getEditablePageConfigList(this.special_id, this.pagePath, this.itemId).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: '',
						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.closePopupAdv) {
							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
				})
			})
		},
		onLoad: function(option) {
			this.special_id = option.special_id
			if (!this.special_id && !this.pagePath) {
				uni.showToast({
					icon: 'none',
					title: '缺少参数'
				})
			}
		},

		methods: {
			...mapMutations({
				saveHomeSpecial: 'saveHomeSpecial',
				saveClosePopupAdv: 'saveClosePopupAdv'
			}),
			showPopup(id) {
				this.$refs[id].open()
			},
			hidePopup(id) {
				this.$refs[id].close()
			},
			closeAdv() {
				this.hidePopup('isshow')
				this.saveClosePopupAdv({
					closePopupAdv: true
				})
			},

		}
	}
</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>