图片画廊

src/App.vue

@@ -15,6 +15,7 @@ export default {
     }
     console.log("1444444444", extConfig.mixid);
     this.$store.commit("setExtConfig", extConfig.mixid);
+    this.$store.commit('setExtConfigInfo',extConfig)
     // 调用API从本地缓存中获取数据
     /*
      * 平台 api 差异的处理方式:  api 方法统一挂载到 mpvue 名称空间, 平台判断通过 mpvuePlatform 特征字符串

src/pages/home/index.vue

@@ -66,6 +66,9 @@
           <div v-if="item.componentCode == 'official-account' && item.componentInfo.visible == 1">
 			      <official-account></official-account>
           </div>
+          <div v-if="item.componentCode == 'photo-gallery' && item.componentInfo.visible == 1">
+			      <photo-gallery :datas="item"></photo-gallery>
+          </div>
         </div>
 
       <bottomCont></bottomCont>
@@ -173,16 +176,19 @@ export default {
     this.changeLocation = options.changeLocation || ''
 
     if(this.changeLocation == 1){
-      let extConfig = wx.getExtConfigSync ? wx.getExtConfigSync() : {};
-      console.log(extConfig, "-----------extConfig");
-      if (
-        process.env.NODE_ENV == "development" ||
-        JSON.stringify(extConfig) == "{}"
-      ) {
-        extConfig = { mixid: "antgood", shopid: 67 };
-      }
-      app.getShopInfo(extConfig);
-      app.getThemePage(extConfig);
+      // let extConfig = wx.getExtConfigSync ? wx.getExtConfigSync() : {};
+      // console.log(extConfig, "-----------extConfig");
+      // if (
+      //   process.env.NODE_ENV == "development" ||
+      //   JSON.stringify(extConfig) == "{}"
+      // ) {
+      //   extConfig = { mixid: "antgood", shopid: 67 };
+      // }
+
+      console.log('this.$store.state.extConfig',this.$store.state.extConfig)
+      
+      app.getShopInfo(this.$store.state.extConfig);
+      app.getThemePage(this.$store.state.extConfig);
     }
     let that = this;
     // 来源
@@ -222,32 +228,6 @@ export default {
     this.$mp.page.onPageScroll= (el)=>{
       this.scrolls(el);
     };
-
-    let extConfig = wx.getExtConfigSync ? wx.getExtConfigSync() : {};
-    console.log(extConfig, "-----------extConfig");
-    if (
-      process.env.NODE_ENV == "development" ||
-      JSON.stringify(extConfig) == "{}"
-    ) {
-      extConfig = { mixid: "antgood", shopid: 67 };
-    }
-
-    // console.log(wx.getStorageSync('changeAdr'),'changeAdr')
-    // if(wx.getStorageSync('changeAdr') == 'changeAdr'){
-
-    //   Object.assign(this.$data, this.$options.data());
-    //   app.getShopInfo(extConfig);
-    //   // 页面配置信息
-    //   app.getThemePage(extConfig);
-
-    //   wx.removeStorageSync('changeAdr')
-    // }
-
-
-
-    
-
-
   },
   methods: {
     init(pageList) {
@@ -287,17 +267,9 @@ export default {
     }
   },
   onPullDownRefresh(){
-    let extConfig = wx.getExtConfigSync ? wx.getExtConfigSync() : {};
-    console.log(extConfig, "-----------extConfig");
-    if (
-      process.env.NODE_ENV == "development" ||
-      JSON.stringify(extConfig) == "{}"
-    ) {
-      extConfig = { mixid: "antgood", shopid: 67 };
-    }
-    console.log('onPullDownRefresh')
-    app.getShopInfo(extConfig);
-    app.getThemePage(extConfig);
+    console.log('onPullDownRefresh',this.$store.state.extConfig)
+    app.getShopInfo(this.$store.state.extConfig);
+    app.getThemePage(this.$store.state.extConfig);
 
     
   }

src/pages/home/main.json

@@ -13,7 +13,8 @@
     "pop-up":"/static/nativeComponents/PopUp/index",
     "share-popup":"/static/nativeComponents/SharePopup/index",
     "speedy-nav":"/static/nativeComponents/SpeedyNav/index",
-    "video-player":"/static/nativeComponents/VideoPlayer/index"
+    "video-player":"/static/nativeComponents/VideoPlayer/index",
+    "photo-gallery":"/static/nativeComponents/PhotoGallery/index"
   },
   "enablePullDownRefresh":true
 }
\ No newline at end of file

src/store/mutations.js

@@ -35,6 +35,9 @@ const mutations = {
   },
   setExtConfig(state,obj){
     state.mixid = obj
+  },
+  setExtConfigInfo(state,obj){
+    state.extConfig = obj
   }
 
 };

src/store/state.js

@@ -22,5 +22,6 @@ const state = {
   userInfo,
 
   mixid : '',
+  extConfig : {}
 };
 export default state
\ No newline at end of file

static/nativeComponents/PhotoGallery/index.js

+// static/nativeComponents/PhotoGallery/index.js
+let app = getApp()
+Component({
+  /**
+   * 组件的属性列表
+   */
+  properties: {
+    datas: {
+      type: Object
+    }
+  },
+
+  /**
+   * 组件的初始数据
+   */
+  data: {
+    getPaddingList: [{
+      'name': '上',
+      'value': 0
+    },
+    {
+      'name': '下',
+      'value': 0
+    },
+    {
+      'name': '左',
+      'value': 0
+    },
+    {
+      'name': '右',
+      'value': 0
+    }
+    ],
+  },
+  ready(){
+    console.log(this.data.datas.componentData.paddingList,'this.data.datas.componentData.paddingList')
+    if (this.data.datas.componentData.paddingList){
+      this.setData({
+        getPaddingList: this.data.datas.componentData.paddingList
+      })
+    }
+  },
+
+  /**
+   * 组件的方法列表
+   */
+  methods: {
+
+  }
+})

static/nativeComponents/PhotoGallery/index.json

+{
+  "component": true,
+  "usingComponents": {}
+}
\ No newline at end of file

static/nativeComponents/PhotoGallery/index.wxml

+<!--static/nativeComponents/PhotoGallery/index.wxml-->
+<view class="photo-gallery" style="padding-top:{{getPaddingList[0]['value'] * 2}}rpx;padding-bottom:{{getPaddingList[1]['value'] * 2}}rpx;padding-left:{{getPaddingList[2]['value'] * 2}}rpx;padding-right:{{getPaddingList[3]['value'] * 2}}rpx">
+  <view wx:if="{{datas.componentData.titles!=''}}" style="font-size:{{datas.componentData.titleSize}}em;padding-bottom:{{datas.componentData.titlePadding * 2}}rpx" class="textH">
+    {{datas.componentData.titles}}
+  </view>
+  <view wx:if="{{datas.componentData.style==='list'}}">
+    <view class="imgcontent" wx:for="{{datas.componentData.imgList}}"  wx:key="{{index}}" style="margin-bottom:{{datas.componentData.imgPadding * 2}}rpx">
+      <image src="{{item.imageUrl}}" lazy-load></image>
+    </view>
+  </view>
+  <view wx:elif="{{datas.componentData.style==='across' || datas.componentData.style==='tiled'}}" class="across">
+    <view class="prev-btn" wx:if="{{datas.componentData.style==='across'}}">
+      <i class="iconfont-common common-iconyoujiantou"></i>
+    </view>
+    <view class="next-btn" wx:if="datas.componentData.style==='across'">
+      <i class="iconfont-common common-iconyoujiantou"></i>
+    </view>
+    <view style="display:{{datas.componentData.style==='tiled' ? 'flex' : ''}}" class="ul">
+      <view wx:for="{{datas.componentData.imgList}}" wx:key="{{index}}" style="margin-right:{{index===(datas.componentData.imgList.length-1)? '' : datas.componentData.imgPadding * 2 + 'rpx'}};width:{{datas.componentData.style==='across' ? datas.componentData.acrossPer+'%' : ''}}" class="li">
+        <image src="{{item.imageUrl}}" lazy-load mode="widthFix"></image>
+      </view>
+    </view>
+  </view>
+</view>

static/nativeComponents/PhotoGallery/index.wxss

+/* static/nativeComponents/PhotoGallery/index.wxss */
+@import "/static/font/common_icon.wxss";
+.photo-gallery{
+  width: 100%;
+  font-size: 32rpx;
+  box-sizing: border-box;
+}
+.textH{
+  text-align: center;
+  font-weight: bold;
+}
+.imgcontent{
+  width: 100%;
+  text-align: center;
+}
+.imgcontent image{
+  width: 100%;
+  display: block;
+}
+
+.across {
+  position: relative;
+}
+.ul{
+  overflow-x: auto;
+  white-space: nowrap;
+  width: 100%;
+}
+.ul .li{
+  display: inline-block;
+  flex: 1
+}
+.ul .li image{
+  width: 100%;
+  vertical-align: middle;
+}
+.prev-btn,.next-btn{
+  width: 60rpx;
+    height: 60rpx;
+    position: absolute;
+    top: 50%;
+    margin-top: -30rpx;
+    z-index: 99;
+    opacity: .3;
+}
+.prev-btn i,.next-btn i {
+  font-size: 60rpx;
+}
+.next-btn{
+  right:10rpx;
+}
+.prev-btn{
+  left:10rpx;
+  -webkit-transform: rotate(180deg);
+  transform: rotate(180deg)
+}
\ No newline at end of file