|
|
@@ -0,0 +1,338 @@
|
|
|
+<template>
|
|
|
+ <div class="shop">
|
|
|
+ <el-dialog :visible.sync="datas.show" width="414px" top="8vh">
|
|
|
+ <img src="../../assets/images/phoneTop.png" style="width: 375px" />
|
|
|
+ <section v-if="datas.show" class="phoneAll" ref="imageTofile" id="imageTofile">
|
|
|
+ <!-- 导航 -->
|
|
|
+ <headerTop class="containwe-padding" :name="pageSetup" />
|
|
|
+ <!-- 收藏组件 -->
|
|
|
+ <div class="collect" v-if="orgid">
|
|
|
+ <collect></collect>
|
|
|
+ </div>
|
|
|
+ <!-- 动态组件 -->
|
|
|
+ <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
|
|
|
+ <section
|
|
|
+ class="phone-container"
|
|
|
+ :style="{
|
|
|
+ 'background-color': pageSetup.bgColor,
|
|
|
+ backgroundImage: 'url(' + pageSetup.bgImg + ')'
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ <div v-for="(item, index) in pageComponents" :key="index">
|
|
|
+ <!-- <keep-alive :include="item.component">
|
|
|
+ <component
|
|
|
+ :key="index"
|
|
|
+ :is="item.component"
|
|
|
+ :datas="item.setStyle"
|
|
|
+ class="componentsClass"
|
|
|
+ :data-type="item.type"
|
|
|
+ @clickBanner="clickBanner"
|
|
|
+ />
|
|
|
+ </keep-alive> -->
|
|
|
+ <!-- #ifdef H5-->
|
|
|
+ <keep-alive :include="item.component">
|
|
|
+ <component
|
|
|
+ :key="index"
|
|
|
+ :is="item.component"
|
|
|
+ :datas="item.setStyle"
|
|
|
+ class="componentsClass"
|
|
|
+ :data-type="item.type"
|
|
|
+ @clickBanner="clickBanner"
|
|
|
+ />
|
|
|
+ </keep-alive>
|
|
|
+ <!-- #endif -->
|
|
|
+ <!-- #ifdef MP-WEIXIN -->
|
|
|
+ <placementarea
|
|
|
+ v-if="item.component == 'placementarea'"
|
|
|
+ :datas="item.setStyle"
|
|
|
+ class="componentsClass"
|
|
|
+ :data-type="item.type"
|
|
|
+ @clickBanner="clickBanner"
|
|
|
+ />
|
|
|
+ <!-- #endif -->
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
+ </van-pull-refresh>
|
|
|
+ </section>
|
|
|
+ <van-loading v-if="loading" size="24px" vertical>加载中</van-loading>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <script>
|
|
|
+ import headerTop from '../headerTop/index.vue'
|
|
|
+ import collect from '../collect/index.vue'
|
|
|
+// import { getmobilePageData } from '../request/API.js'
|
|
|
+
|
|
|
+ import {
|
|
|
+ captiontext,
|
|
|
+ placementarea,
|
|
|
+ pictureads,
|
|
|
+ graphicnavigation,
|
|
|
+ richtext,
|
|
|
+ magiccube,
|
|
|
+ auxiliarysegmentation,
|
|
|
+ commoditysearch,
|
|
|
+ storeinformation,
|
|
|
+ entertheshop,
|
|
|
+ notice,
|
|
|
+ videoss,
|
|
|
+ custommodule,
|
|
|
+ communitypowder,
|
|
|
+ storenotecard,
|
|
|
+ crowdoperation,
|
|
|
+ personalizedrecommendation,
|
|
|
+ onlineservice,
|
|
|
+ listswitching,
|
|
|
+ investigate,
|
|
|
+ tabBar,
|
|
|
+ follow,
|
|
|
+ suspension
|
|
|
+ } from '../componentscom/index.js'
|
|
|
+// import captiontext from '../../../components/captiontext/index.vue'
|
|
|
+// import placementarea from '../../../components/placementarea/index.vue'
|
|
|
+// import pictureads from '../../../components/pictureads/index.vue'
|
|
|
+// import graphicnavigation from '../../../components/graphicnavigation/index.vue'
|
|
|
+// import richtext from '../../../components/richtext/index.vue'
|
|
|
+// import magiccube from '../../../components/magiccube/index.vue'
|
|
|
+// import auxiliarysegmentation from '../../../components/auxiliarysegmentation/index.vue'
|
|
|
+// import commoditysearch from '../../../components/commoditysearch/index.vue'
|
|
|
+// import storeinformation from '../../../components/storeinformation/index.vue'
|
|
|
+// import entertheshop from '../../../components/entertheshop/index.vue'
|
|
|
+// import notice from '../../../components/notice/index.vue'
|
|
|
+// import videoss from '../../../components/videoss/index.vue'
|
|
|
+// import custommodule from '../../../components/custommodule/index.vue'
|
|
|
+// import communitypowder from '../../../components/communitypowder/index.vue'
|
|
|
+// import storenotecard from '../../../components/storenotecard/index.vue'
|
|
|
+// import crowdoperation from '../../../components/crowdoperation/index.vue'
|
|
|
+// import personalizedrecommendation from '../../../components/personalizedrecommendation/index.vue'
|
|
|
+// import onlineservice from '../../../components/onlineservice/index.vue'
|
|
|
+// import listswitching from '../../../components/listswitching/index.vue'
|
|
|
+// import investigate from '../../../components/investigate/index.vue'
|
|
|
+// import tabBar from '../../../components/tabBar/index.vue'
|
|
|
+// import follow from '../../../components/follow/index.vue'
|
|
|
+// import suspension from '../../../components/suspension/index.vue'
|
|
|
+import { Loading } from 'vant';
|
|
|
+ export default {
|
|
|
+ name: 'shop',
|
|
|
+ prop:{
|
|
|
+ datas: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ val:Object
|
|
|
+ },
|
|
|
+ // inject: ['reload'],
|
|
|
+ components: {
|
|
|
+ [Loading.name]: Loading
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ isLoading: false,
|
|
|
+ orgid: false,
|
|
|
+ pageComponents: [],
|
|
|
+ pageSetup: {
|
|
|
+ // 页面设置属性
|
|
|
+ name: '页面标题', //页面名称
|
|
|
+ details: '', //页面描述
|
|
|
+ isPerson: false, // 是否显示个人中心
|
|
|
+ isBack: true, // 是否返回按钮
|
|
|
+ titleHeight: 35, // 高度
|
|
|
+ bgColor: 'rgba(249, 249, 249, 10)', //背景颜色
|
|
|
+ bgImg: '' // 背景图片
|
|
|
+ },
|
|
|
+ tota: null
|
|
|
+ }
|
|
|
+ },
|
|
|
+ activated() {
|
|
|
+ //不能使用其他方式设置滚动条高度，否则回导致下拉刷新失效
|
|
|
+ // setTimeout(() => {
|
|
|
+ // window.scroll(0, this.$store.state.scroll)
|
|
|
+ // }, 500)
|
|
|
+ },
|
|
|
+ async created() {
|
|
|
+ console.log('creat');
|
|
|
+ // 是否是iframe使用
|
|
|
+ /* if (this.$route.query.type === 'iframe') {
|
|
|
+ window.addEventListener('message', e => {
|
|
|
+ console.log(e.data, '-------------message')
|
|
|
+ let datas = e.data
|
|
|
+ this.pageComponents = JSON.parse(datas.component)
|
|
|
+ this.pageSetup = JSON.parse(datas.templateJson)
|
|
|
+ })
|
|
|
+ return
|
|
|
+ }
|
|
|
+
|
|
|
+ await this.loadShopData() */
|
|
|
+ // let miniprogram = window.localStorage.getItem('miniprogram')
|
|
|
+ // console.log(miniprogram, '-------------------miniprogram')
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ // this.initData()
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ datas: {
|
|
|
+ handler(val) {
|
|
|
+ if(val.show=true){
|
|
|
+ // 取val中的数据渲染页面
|
|
|
+ };
|
|
|
+ },
|
|
|
+ deep: true,
|
|
|
+ immediate: true
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ async initData() {
|
|
|
+ try {
|
|
|
+ console.log(this.val);
|
|
|
+ console.log(111);
|
|
|
+ let res = {};
|
|
|
+ console.log(res)
|
|
|
+ if (res.code == 200) {
|
|
|
+ console.log(res.data)
|
|
|
+ this.getJSONList = res.data
|
|
|
+ console.log(this.getJSONList);
|
|
|
+ let pageJson=JSON.parse(this.getJSONList.pageJson)
|
|
|
+ this.pageComponents = pageJson.pageComponents
|
|
|
+ this.pageSetup = pageJson.pageSetup
|
|
|
+ console.log(this.pageSetup);
|
|
|
+ } else {
|
|
|
+ // 弹窗提示异常
|
|
|
+ const msg = res.msg
|
|
|
+ // uni.showToast({
|
|
|
+ // title: msg,
|
|
|
+ // icon: 'none'
|
|
|
+ // })
|
|
|
+ }
|
|
|
+ } catch (e) {
|
|
|
+ console.log(e);
|
|
|
+ // 弹窗提示异常
|
|
|
+ // uni.showToast({
|
|
|
+ // title: '获取数据失败',
|
|
|
+ // icon: 'none',
|
|
|
+ // duration: 2000 // 可选，显示时长，默认2s
|
|
|
+ // })
|
|
|
+ }
|
|
|
+ /* getData(8).then((response) => {
|
|
|
+ if(response.code==200){
|
|
|
+ console.log(response.data);
|
|
|
+ this.getJSONList = response.data;
|
|
|
+ console.log(this.getJSONList);
|
|
|
+ console.log(this.getJSONList.component);
|
|
|
+ this.pageComponents=JSON.parse(this.getJSONList.component)
|
|
|
+ this.pageSetup=JSON.parse(this.getJSONList.templateJson)
|
|
|
+ }else{
|
|
|
+ this.$message.error("获取数据失败")
|
|
|
+ }
|
|
|
+ }) */
|
|
|
+ },
|
|
|
+
|
|
|
+ onRefresh() {
|
|
|
+ setTimeout(() => {
|
|
|
+ this.isLoading = false
|
|
|
+ }, 1000)
|
|
|
+ },
|
|
|
+
|
|
|
+ async loadShopData() {
|
|
|
+ try {
|
|
|
+ if (this.$route.query.orgId) {
|
|
|
+ localStorage.setItem('shopTemplateId', this.$route.query.orgId)
|
|
|
+ }
|
|
|
+
|
|
|
+ this.tota = this.$toast.loading({
|
|
|
+ message: '加载中...',
|
|
|
+ forbidClick: true,
|
|
|
+ duration: 0,
|
|
|
+ loadingType: 'spinner',
|
|
|
+ overlay: true
|
|
|
+ })
|
|
|
+ this.orgid = false
|
|
|
+ // 模板数据替换 shopTemplateData.data.shopTemplate 此处可替换成接口
|
|
|
+ /* let shopTemplateData = {
|
|
|
+ code: 0,
|
|
|
+ success: true,
|
|
|
+ error: false ,
|
|
|
+ data: {
|
|
|
+ shopTemplate: {
|
|
|
+ "id": null,
|
|
|
+ "name": "页面标题",
|
|
|
+ "templateJson": '{"name":"页面标题","details":"","isPerson":false,"isBack":true,"titleHeight":35,"bgColor":"rgba(249, 249, 249, 10)","bgImg":""}',
|
|
|
+ "component": '[{"component":"notice","text":"公告","type":"1-7","active":true,"style":"noticestyle","setStyle":{"text":"公告","noticeText":"111111111111111111111","backColor":"rgb(255, 248, 233)","textColor":"rgba(100, 101, 102)"}},{"component":"captiontext","text":"标题文字","type":"1-3","active":false,"style":"captiontextsstyle","setStyle":{"text":"标题文字","name":"哈哈哈哈哈哈","description":"2222222222","wordSize":16,"descriptionSize":12,"wordWeight":400,"positions":"left","descriptionWeight":200,"wordColor":"rgba(50, 50, 51, 10)","descriptionColor":"rgba(150, 151, 153, 10)","backColor":"rgba(255, 255, 255, 10)","borderBott":false,"wordHeight":24,"more":{"show":false,"type":1,"text":"查看更多","httpType":10,"http":""}}}]',
|
|
|
+ }
|
|
|
+ },
|
|
|
+ msg: '成功'
|
|
|
+ }
|
|
|
+ console.log(shopTemplateData, '----------shopTemplateData')
|
|
|
+ if (shopTemplateData.code !== 0) {
|
|
|
+ return this.$toast(shopTemplateData.msg)
|
|
|
+ } */
|
|
|
+ let datas = shopTemplateData.data.shopTemplate
|
|
|
+ if (!datas) return this.tota.clear()
|
|
|
+ this.pageComponents = JSON.parse(datas.component)
|
|
|
+ this.pageSetup = JSON.parse(datas.templateJson)
|
|
|
+ } catch (error) {
|
|
|
+ console.error(error, '--------------loadShopData error')
|
|
|
+ } finally {
|
|
|
+ this.tota.clear()
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ clickBanner() {
|
|
|
+ console.log('clickBanner')
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ components: {
|
|
|
+ collect,
|
|
|
+ headerTop,
|
|
|
+ captiontext,
|
|
|
+ placementarea,
|
|
|
+ pictureads,
|
|
|
+ graphicnavigation,
|
|
|
+ richtext,
|
|
|
+ magiccube,
|
|
|
+ auxiliarysegmentation,
|
|
|
+ commoditysearch,
|
|
|
+ storeinformation,
|
|
|
+ entertheshop,
|
|
|
+ notice,
|
|
|
+ videoss,
|
|
|
+ custommodule,
|
|
|
+ communitypowder,
|
|
|
+ storenotecard,
|
|
|
+ crowdoperation,
|
|
|
+ personalizedrecommendation,
|
|
|
+ onlineservice,
|
|
|
+ listswitching,
|
|
|
+ investigate,
|
|
|
+ tabBar,
|
|
|
+ follow,
|
|
|
+ suspension
|
|
|
+ }
|
|
|
+ }
|
|
|
+ </script>
|
|
|
+
|
|
|
+ <style lang="scss">
|
|
|
+ @import '../../assets/css/minx.scss';
|
|
|
+ .shop {
|
|
|
+ .phoneAll {
|
|
|
+ position: relative;
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ }
|
|
|
+ .collect {
|
|
|
+ position: absolute;
|
|
|
+ top: 28px;
|
|
|
+ right: 8px;
|
|
|
+ z-index: 1000;
|
|
|
+ }
|
|
|
+ .phone-container {
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
+ ::v-deep.van-pull-refresh {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+
|
ZYZ