微信小程序门店一览页面样式模板制作设计下载

制作好以后效果图如下：

一、wxml页面代码如下：

<view class="app">
<template name="zcFreeVessel1">
  <view class="element free-vessel" style="{{data.style}}" data-event-params="{{data.eventParams}}" catchtap="{{data.eventHandler}}">
    <template name="zcPicture">
  <block wx:if="{{real_value}}">
    <block wx:if="{{real_value.join !== undefined}}">
      <view class="element picture" style="{{data.style}}" data-event-params="{{data.eventParams}}" catchtap="{{data.eventHandler}}">
        <view class="wxParse">
          <template is="wxParse" data="{{wxParseData: real_value}}"/>
        </view>
      </view>
    </block>
    <block wx:else>
      <view class="element picture" style="{{data.style}}" data-event-params="{{data.eventParams}}" catchtap="{{data.eventHandler}}">
        <image src="{{real_value}}"></image>
      </view>
    </block>
  </block>
  <block wx:else>
    <view class="element picture" style="{{data.style}}" data-event-params="{{data.eventParams}}" catchtap="{{data.eventHandler}}">
      <image src="{{data.content}}"></image>
    </view>
  </block>
</template>
<view class="ele-container">
  <block wx:if="{{real_value}}">
    <template is="zcPicture" data="{{data:data.content[0], detail_data: detail_data}}"></template>
  </block>
  <block wx:elif="{{detail_data && !vessel_page_data.form_data}}">
    <template is="zcPicture" data="{{data:data.content[0], detail_data: detail_data}}"></template>
  </block>
  <block wx:elif="{{vessel_page_data.form_data}}">
    <template is="zcPicture" data="{{data:data.content[0], detail_data: detail_data}}"></template>
  </block>
  <block wx:else>
    <template is="zcPicture" data="{{data:data.content[0], detail_data: detail_data}}"></template>
  </block>
</view>
  </view>
</template>
<view class="ele-container">
<block wx:if="{{real_value}}">
  <template is="zcFreeVessel1" data="{{data:free_vessel1, real_value:real_value, detail_data: detail_data}}"></template>
</block>
<block wx:else>
  <template is="zcFreeVessel1" data="{{data:free_vessel1, real_value:item, detail_data: detail_data}}"></template>
</block>
</view>
<template name="zcFreeVessel2">
  <view class="element free-vessel" style="{{data.style}}" data-event-params="{{data.eventParams}}" catchtap="{{data.eventHandler}}">
    <template name="zcPicture">
  <block wx:if="{{real_value}}">
    <block wx:if="{{real_value.join !== undefined}}">
      <view class="element picture" style="{{data.style}}" data-event-params="{{data.eventParams}}" catchtap="{{data.eventHandler}}">
        <view class="wxParse">
          <template is="wxParse" data="{{wxParseData: real_value}}"/>
        </view>
      </view>
    </block>
    <block wx:else>
      <view class="element picture" style="{{data.style}}" data-event-params="{{data.eventParams}}" catchtap="{{data.eventHandler}}">
        <image src="{{real_value}}"></image>
      </view>
    </block>
  </block>
  <block wx:else>
    <view class="element picture" style="{{data.style}}" data-event-params="{{data.eventParams}}" catchtap="{{data.eventHandler}}">
      <image src="{{data.content}}"></image>
    </view>
  </block>
</template>
<view class="ele-container">
  <block wx:if="{{real_value}}">
    <template is="zcPicture" data="{{data:data.content[0], detail_data: detail_data}}"></template>
  </block>
  <block wx:elif="{{detail_data && !vessel_page_data.form_data}}">
    <template is="zcPicture" data="{{data:data.content[0], detail_data: detail_data}}"></template>
  </block>
  <block wx:elif="{{vessel_page_data.form_data}}">
    <template is="zcPicture" data="{{data:data.content[0], detail_data: detail_data}}"></template>
  </block>
  <block wx:else>
    <template is="zcPicture" data="{{data:data.content[0], detail_data: detail_data}}"></template>
  </block>
</view><import src="../../components/wxParse/wxParse.wxml"/>
<template name="zcText">
  <block wx:if="{{real_value}}">
    <block wx:if="{{real_value.join !== undefined}}">
      <view class="element text" style="{{data.style}}" data-event-params="{{data.eventParams}}" catchtap="{{data.eventHandler}}">
        <view class="wxParse">
          <template is="wxParse" data="{{wxParseData: real_value}}"/>
        </view>
      </view>
    </block>
    <block wx:else>
      <text class="element text" style="{{data.style}}" data-event-params="{{data.eventParams}}" catchtap="{{data.eventHandler}}">{{real_value}}</text>
    </block>
  </block>
  <block wx:else>
    <text class="element text" style="{{data.style}}" data-event-params="{{data.eventParams}}" catchtap="{{data.eventHandler}}">{{data.content}}</text>
  </block>
</template>
<view class="ele-container">
  <block wx:if="{{real_value}}">
    <template is="zcText" data="{{data:data.content[1], detail_data: detail_data}}"></template>
  </block>
  <block wx:elif="{{detail_data && !vessel_page_data.form_data}}">
    <template is="zcText" data="{{data:data.content[1], detail_data: detail_data}}"></template>
  </block>
  <block wx:elif="{{vessel_page_data.form_data}}">
    <template is="zcText" data="{{data:data.content[1], detail_data: detail_data}}"></template>
  </block>
  <block wx:else>
    <template is="zcText" data="{{data:data.content[1], detail_data: detail_data}}"></template>
  </block>
</view>


  </view>
</template>
<view class="ele-container">
<block wx:if="{{real_value}}">
  <template is="zcFreeVessel2" data="{{data:free_vessel2, real_value:real_value, detail_data: detail_data}}"></template>
</block>
<block wx:else>
  <template is="zcFreeVessel2" data="{{data:free_vessel2, real_value:item, detail_data: detail_data}}"></template>
</block>
</view>
<template name="zcFreeVessel3">
  <view class="element free-vessel" style="{{data.style}}" data-event-params="{{data.eventParams}}" catchtap="{{data.eventHandler}}">
    <template name="zcPicture">
  <block wx:if="{{real_value}}">
    <block wx:if="{{real_value.join !== undefined}}">
      <view class="element picture" style="{{data.style}}" data-event-params="{{data.eventParams}}" catchtap="{{data.eventHandler}}">
        <view class="wxParse">
          <template is="wxParse" data="{{wxParseData: real_value}}"/>
        </view>
      </view>
    </block>
    <block wx:else>
      <view class="element picture" style="{{data.style}}" data-event-params="{{data.eventParams}}" catchtap="{{data.eventHandler}}">
        <image src="{{real_value}}"></image>
      </view>
    </block>
  </block>
  <block wx:else>
    <view class="element picture" style="{{data.style}}" data-event-params="{{data.eventParams}}" catchtap="{{data.eventHandler}}">
      <image src="{{data.content}}"></image>
    </view>
  </block>
</template>
<view class="ele-container">
  <block wx:if="{{real_value}}">
    <template is="zcPicture" data="{{data:data.content[0], detail_data: detail_data}}"></template>
  </block>
  <block wx:elif="{{detail_data && !vessel_page_data.form_data}}">
    <template is="zcPicture" data="{{data:data.content[0], detail_data: detail_data}}"></template>
  </block>
  <block wx:elif="{{vessel_page_data.form_data}}">
    <template is="zcPicture" data="{{data:data.content[0], detail_data: detail_data}}"></template>
  </block>
  <block wx:else>
    <template is="zcPicture" data="{{data:data.content[0], detail_data: detail_data}}"></template>
  </block>
</view><template name="zcPicture">
  <block wx:if="{{real_value}}">
    <block wx:if="{{real_value.join !== undefined}}">
      <view class="element picture" style="{{data.style}}" data-event-params="{{data.eventParams}}" catchtap="{{data.eventHandler}}">
        <view class="wxParse">
          <template is="wxParse" data="{{wxParseData: real_value}}"/>
        </view>
      </view>
    </block>
    <block wx:else>
      <view class="element picture" style="{{data.style}}" data-event-params="{{data.eventParams}}" catchtap="{{data.eventHandler}}">
        <image src="{{real_value}}"></image>
      </view>
    </block>
  </block>
  <block wx:else>
    <view class="element picture" style="{{data.style}}" data-event-params="{{data.eventParams}}" catchtap="{{data.eventHandler}}">
      <image src="{{data.content}}"></image>
    </view>
  </block>
</template>
<view class="ele-container">
  <block wx:if="{{real_value}}">
    <template is="zcPicture" data="{{data:data.content[1], detail_data: detail_data}}"></template>
  </block>
  <block wx:elif="{{detail_data && !vessel_page_data.form_data}}">
    <template is="zcPicture" data="{{data:data.content[1], detail_data: detail_data}}"></template>
  </block>
  <block wx:elif="{{vessel_page_data.form_data}}">
    <template is="zcPicture" data="{{data:data.content[1], detail_data: detail_data}}"></template>
  </block>
  <block wx:else>
    <template is="zcPicture" data="{{data:data.content[1], detail_data: detail_data}}"></template>
  </block>
</view><template name="zcPicture">
  <block wx:if="{{real_value}}">
    <block wx:if="{{real_value.join !== undefined}}">
      <view class="element picture" style="{{data.style}}" data-event-params="{{data.eventParams}}" catchtap="{{data.eventHandler}}">
        <view class="wxParse">
          <template is="wxParse" data="{{wxParseData: real_value}}"/>
        </view>
      </view>
    </block>
    <block wx:else>
      <view class="element picture" style="{{data.style}}" data-event-params="{{data.eventParams}}" catchtap="{{data.eventHandler}}">
        <image src="{{real_value}}"></image>
      </view>
    </block>
  </block>
  <block wx:else>
    <view class="element picture" style="{{data.style}}" data-event-params="{{data.eventParams}}" catchtap="{{data.eventHandler}}">
      <image src="{{data.content}}"></image>
    </view>
  </block>
</template>
<view class="ele-container">
  <block wx:if="{{real_value}}">
    <template is="zcPicture" data="{{data:data.content[2], detail_data: detail_data}}"></template>
  </block>
  <block wx:elif="{{detail_data && !vessel_page_data.form_data}}">
    <template is="zcPicture" data="{{data:data.content[2], detail_data: detail_data}}"></template>
  </block>
  <block wx:elif="{{vessel_page_data.form_data}}">
    <template is="zcPicture" data="{{data:data.content[2], detail_data: detail_data}}"></template>
  </block>
  <block wx:else>
    <template is="zcPicture" data="{{data:data.content[2], detail_data: detail_data}}"></template>
  </block>
</view><import src="../../components/wxParse/wxParse.wxml"/>
<template name="zcText">
  <block wx:if="{{real_value}}">
    <block wx:if="{{real_value.join !== undefined}}">
      <view class="element text" style="{{data.style}}" data-event-params="{{data.eventParams}}" catchtap="{{data.eventHandler}}">
        <view class="wxParse">
          <template is="wxParse" data="{{wxParseData: real_value}}"/>
        </view>
      </view>
    </block>
    <block wx:else>
      <text class="element text" style="{{data.style}}" data-event-params="{{data.eventParams}}" catchtap="{{data.eventHandler}}">{{real_value}}</text>
    </block>
  </block>
  <block wx:else>
    <text class="element text" style="{{data.style}}" data-event-params="{{data.eventParams}}" catchtap="{{data.eventHandler}}">{{data.content}}</text>
  </block>
</template>
<view class="ele-container">
  <block wx:if="{{real_value}}">
    <template is="zcText" data="{{data:data.content[3], detail_data: detail_data}}"></template>
  </block>
  <block wx:elif="{{detail_data && !vessel_page_data.form_data}}">
    <template is="zcText" data="{{data:data.content[3], detail_data: detail_data}}"></template>
  </block>
  <block wx:elif="{{vessel_page_data.form_data}}">
    <template is="zcText" data="{{data:data.content[3], detail_data: detail_data}}"></template>
  </block>
  <block wx:else>
    <template is="zcText" data="{{data:data.content[3], detail_data: detail_data}}"></template>
  </block>
</view>

<import src="../../components/wxParse/wxParse.wxml"/>
<template name="zcText">
  <block wx:if="{{real_value}}">
    <block wx:if="{{real_value.join !== undefined}}">
      <view class="element text" style="{{data.style}}" data-event-params="{{data.eventParams}}" catchtap="{{data.eventHandler}}">
        <view class="wxParse">
          <template is="wxParse" data="{{wxParseData: real_value}}"/>
        </view>
      </view>
    </block>
    <block wx:else>
      <text class="element text" style="{{data.style}}" data-event-params="{{data.eventParams}}" catchtap="{{data.eventHandler}}">{{real_value}}</text>
    </block>
  </block>
  <block wx:else>
    <text class="element text" style="{{data.style}}" data-event-params="{{data.eventParams}}" catchtap="{{data.eventHandler}}">{{data.content}}</text>
  </block>
</template>
<view class="ele-container">
  <block wx:if="{{real_value}}">
    <template is="zcText" data="{{data:data.content[4], detail_data: detail_data}}"></template>
  </block>
  <block wx:elif="{{detail_data && !vessel_page_data.form_data}}">
    <template is="zcText" data="{{data:data.content[4], detail_data: detail_data}}"></template>
  </block>
  <block wx:elif="{{vessel_page_data.form_data}}">
    <template is="zcText" data="{{data:data.content[4], detail_data: detail_data}}"></template>
  </block>
  <block wx:else>
    <template is="zcText" data="{{data:data.content[4], detail_data: detail_data}}"></template>
  </block>
</view>

<import src="../../components/wxParse/wxParse.wxml"/>
<template name="zcText">
  <block wx:if="{{real_value}}">
    <block wx:if="{{real_value.join !== undefined}}">
      <view class="element text" style="{{data.style}}" data-event-params="{{data.eventParams}}" catchtap="{{data.eventHandler}}">
        <view class="wxParse">
          <template is="wxParse" data="{{wxParseData: real_value}}"/>
        </view>
      </view>
    </block>
    <block wx:else>
      <text class="element text" style="{{data.style}}" data-event-params="{{data.eventParams}}" catchtap="{{data.eventHandler}}">{{real_value}}</text>
    </block>
  </block>
  <block wx:else>
    <text class="element text" style="{{data.style}}" data-event-params="{{data.eventParams}}" catchtap="{{data.eventHandler}}">{{data.content}}</text>
  </block>
</template>
<view class="ele-container">
  <block wx:if="{{real_value}}">
    <template is="zcText" data="{{data:data.content[5], detail_data: detail_data}}"></template>
  </block>
  <block wx:elif="{{detail_data && !vessel_page_data.form_data}}">
    <template is="zcText" data="{{data:data.content[5], detail_data: detail_data}}"></template>
  </block>
  <block wx:elif="{{vessel_page_data.form_data}}">
    <template is="zcText" data="{{data:data.content[5], detail_data: detail_data}}"></template>
  </block>
  <block wx:else>
    <template is="zcText" data="{{data:data.content[5], detail_data: detail_data}}"></template>
  </block>
</view>

<template name="zcPicture">
  <block wx:if="{{real_value}}">
    <block wx:if="{{real_value.join !== undefined}}">
      <view class="element picture" style="{{data.style}}" data-event-params="{{data.eventParams}}" catchtap="{{data.eventHandler}}">
        <view class="wxParse">
          <template is="wxParse" data="{{wxParseData: real_value}}"/>
        </view>
      </view>
    </block>
    <block wx:else>
      <view class="element picture" style="{{data.style}}" data-event-params="{{data.eventParams}}" catchtap="{{data.eventHandler}}">
        <image src="{{real_value}}"></image>
      </view>
    </block>
  </block>
  <block wx:else>
    <view class="element picture" style="{{data.style}}" data-event-params="{{data.eventParams}}" catchtap="{{data.eventHandler}}">
      <image src="{{data.content}}"></image>
    </view>
  </block>
</template>
<view class="ele-container">
  <block wx:if="{{real_value}}">
    <template is="zcPicture" data="{{data:data.content[6], detail_data: detail_data}}"></template>
  </block>
  <block wx:elif="{{detail_data && !vessel_page_data.form_data}}">
    <template is="zcPicture" data="{{data:data.content[6], detail_data: detail_data}}"></template>
  </block>
  <block wx:elif="{{vessel_page_data.form_data}}">
    <template is="zcPicture" data="{{data:data.content[6], detail_data: detail_data}}"></template>
  </block>
  <block wx:else>
    <template is="zcPicture" data="{{data:data.content[6], detail_data: detail_data}}"></template>
  </block>
</view><template name="zcPicture">
  <block wx:if="{{real_value}}">
    <block wx:if="{{real_value.join !== undefined}}">
      <view class="element picture" style="{{data.style}}" data-event-params="{{data.eventParams}}" catchtap="{{data.eventHandler}}">
        <view class="wxParse">
          <template is="wxParse" data="{{wxParseData: real_value}}"/>
        </view>
      </view>
    </block>
    <block wx:else>
      <view class="element picture" style="{{data.style}}" data-event-params="{{data.eventParams}}" catchtap="{{data.eventHandler}}">
        <image src="{{real_value}}"></image>
      </view>
    </block>
  </block>
  <block wx:else>
    <view class="element picture" style="{{data.style}}" data-event-params="{{data.eventParams}}" catchtap="{{data.eventHandler}}">
      <image src="{{data.content}}"></image>
    </view>
  </block>
</template>
<view class="ele-container">
  <block wx:if="{{real_value}}">
    <template is="zcPicture" data="{{data:data.content[7], detail_data: detail_data}}"></template>
  </block>
  <block wx:elif="{{detail_data && !vessel_page_data.form_data}}">
    <template is="zcPicture" data="{{data:data.content[7], detail_data: detail_data}}"></template>
  </block>
  <block wx:elif="{{vessel_page_data.form_data}}">
    <template is="zcPicture" data="{{data:data.content[7], detail_data: detail_data}}"></template>
  </block>
  <block wx:else>
    <template is="zcPicture" data="{{data:data.content[7], detail_data: detail_data}}"></template>
  </block>
</view>
  </view>
</template>
<view class="ele-container">
<block wx:if="{{real_value}}">
  <template is="zcFreeVessel3" data="{{data:free_vessel3, real_value:real_value, detail_data: detail_data}}"></template>
</block>
<block wx:else>
  <template is="zcFreeVessel3" data="{{data:free_vessel3, real_value:item, detail_data: detail_data}}"></template>
</block>
</view>
<template name="zcFreeVessel4">
  <view class="element free-vessel" style="{{data.style}}" data-event-params="{{data.eventParams}}" catchtap="{{data.eventHandler}}">
    <template name="zcPicture">
  <block wx:if="{{real_value}}">
    <block wx:if="{{real_value.join !== undefined}}">
      <view class="element picture" style="{{data.style}}" data-event-params="{{data.eventParams}}" catchtap="{{data.eventHandler}}">
        <view class="wxParse">
          <template is="wxParse" data="{{wxParseData: real_value}}"/>
        </view>
      </view>
    </block>
    <block wx:else>
      <view class="element picture" style="{{data.style}}" data-event-params="{{data.eventParams}}" catchtap="{{data.eventHandler}}">
        <image src="{{real_value}}"></image>
      </view>
    </block>
  </block>
  <block wx:else>
    <view class="element picture" style="{{data.style}}" data-event-params="{{data.eventParams}}" catchtap="{{data.eventHandler}}">
      <image src="{{data.content}}"></image>
    </view>
  </block>
</template>
<view class="ele-container">
  <block wx:if="{{real_value}}">
    <template is="zcPicture" data="{{data:data.content[0], detail_data: detail_data}}"></template>
  </block>
  <block wx:elif="{{detail_data && !vessel_page_data.form_data}}">
    <template is="zcPicture" data="{{data:data.content[0], detail_data: detail_data}}"></template>
  </block>
  <block wx:elif="{{vessel_page_data.form_data}}">
    <template is="zcPicture" data="{{data:data.content[0], detail_data: detail_data}}"></template>
  </block>
  <block wx:else>
    <template is="zcPicture" data="{{data:data.content[0], detail_data: detail_data}}"></template>
  </block>
</view>
  </view>
</template>
<view class="ele-container">
<block wx:if="{{real_value}}">
  <template is="zcFreeVessel4" data="{{data:free_vessel4, real_value:real_value, detail_data: detail_data}}"></template>
</block>
<block wx:else>
  <template is="zcFreeVessel4" data="{{data:free_vessel4, real_value:item, detail_data: detail_data}}"></template>
</block>
</view>

</view>

二、wxss样式文件代码如下：

page{background-color:rgb(243, 243, 243);margin-left:auto;}

三、js页面代码如下：

var appInstance = getApp();
var WxParse     = require('../../components/wxParse/wxParse.js');
var util        = require('../../utils/util.js');

var pageData    = {
  data: {"free_vessel1":{"type":"free-vessel","style":"width:750rpx;height:189.84375rpx;margin-bottom:auto;margin-right:auto;opacity:1;margin-left:auto;","content":[{"type":"picture","style":"opacity:1;background-color:transparent;border-color:rgb(34, 34, 34);border-style:none;height:194.49870586395rpx;width:750rpx;margin-left:auto;margin-right:0;margin-top:0;position:absolute;","content":"http://img.weiye.me/zcimgdir/album/file_5912b7cf1014f.png","customFeature":{"boxShadow":"5","boxColor":"#000","boxX":"0","boxY":"0","boxR":"5"},"animations":[],"compId":"data.content[0]","parentCompid":"free_vessel1"}],"customFeature":{"boxColor":"rgb(0, 0, 0)","boxR":5,"boxStyle":false,"boxX":0,"boxY":0},"animations":[],"page_form":"","compId":"free_vessel1"},"free_vessel2":{"type":"free-vessel","style":"width:750rpx;height:51.554381847382rpx;margin-bottom:auto;margin-right:auto;margin-top:9.375rpx;opacity:1;margin-left:auto;","content":[{"type":"picture","style":"opacity:1;background-color:transparent;border-color:rgb(34, 34, 34);border-style:none;height:51.554363965988rpx;width:750rpx;margin-left:auto;margin-right:0;margin-top:0;position:absolute;","content":"http://img.weiye.me/zcimgdir/album/file_5912b80b1c1b1.png","customFeature":{"boxShadow":"5","boxColor":"#000","boxX":"0","boxY":"0","boxR":"5"},"animations":[],"compId":"data.content[0]","parentCompid":"free_vessel2"},{"type":"text","style":"background-color:rgba(0, 0, 0, 0);border-color:rgb(34, 34, 34);border-style:none;border-width:4.6875rpx;color:rgb(37, 26, 23);font-size:30.46875rpx;height:44.53125rpx;line-height:44.53125rpx;margin-left:auto;margin-top:0;opacity:1;text-align:left;position:absolute;left:77.34375rpx;top:4.6875rpx;margin-right:0;","content":"门店一览","customFeature":{"boxColor":"rgb(0, 0, 0)","boxR":"5","boxStyle":false,"boxX":"0","boxY":"0"},"animations":[],"compId":"data.content[1]","parentCompid":"free_vessel2","markColor":"","mode":0}],"customFeature":{"boxColor":"rgb(0, 0, 0)","boxR":5,"boxStyle":false,"boxX":0,"boxY":0},"animations":[],"page_form":"","compId":"free_vessel2"},"free_vessel3":{"type":"free-vessel","style":"width:750rpx;height:2053.019285202rpx;background-color:rgb(255, 255, 255);margin-bottom:auto;margin-right:auto;opacity:1;margin-left:auto;","content":[{"type":"picture","style":"opacity:1;background-color:transparent;border-color:rgb(34, 34, 34);border-style:none;height:398.4375rpx;width:703.125rpx;margin-left:auto;margin-right:0;margin-top:0;position:absolute;left:23.4375rpx;top:21.09375rpx;","content":"http://img.weiye.me/zcimgdir/album/file_5912b8df328c2.png","customFeature":{"boxShadow":"5","boxColor":"#000","boxX":"0","boxY":"0","boxR":"5"},"animations":[],"compId":"data.content[0]","parentCompid":"free_vessel3"},{"type":"picture","style":"opacity:1;background-color:transparent;border-color:rgb(34, 34, 34);border-style:none;height:398.4375rpx;width:703.125rpx;margin-left:auto;margin-right:0;margin-top:0;position:absolute;left:23.4375rpx;top:440.64120054245rpx;","content":"http://img.weiye.me/zcimgdir/album/file_5912b8df61239.png","customFeature":{"boxShadow":"5","boxColor":"#000","boxX":"0","boxY":"0","boxR":"5"},"animations":[],"compId":"data.content[1]","parentCompid":"free_vessel3"},{"type":"picture","style":"opacity:1;background-color:transparent;border-color:rgb(34, 34, 34);border-style:none;height:398.4375rpx;width:703.125rpx;margin-left:auto;margin-right:0;margin-top:0;position:absolute;left:23.4375rpx;top:864.84375rpx;","content":"http://img.weiye.me/zcimgdir/album/file_5912b8dfc0f6f.png","customFeature":{"boxShadow":"5","boxColor":"#000","boxX":"0","boxY":"0","boxR":"5"},"animations":[],"compId":"data.content[2]","parentCompid":"free_vessel3"},{"type":"text","style":"background-color:rgba(0, 0, 0, 0);border-color:rgb(34, 34, 34);border-style:none;border-width:4.6875rpx;color:rgb(48, 31, 21);font-size:37.5rpx;height:44.53125rpx;line-height:44.53125rpx;margin-left:auto;margin-top:0;opacity:1;text-align:left;position:absolute;left:292.96875rpx;top:1300.78125rpx;margin-right:0;","content":"气温14度","customFeature":{"boxColor":"rgb(0, 0, 0)","boxR":"5","boxStyle":false,"boxX":"0","boxY":"0"},"animations":[],"compId":"data.content[3]","parentCompid":"free_vessel3","markColor":"","mode":0},{"type":"text","style":"background-color:rgba(0, 0, 0, 0);border-color:rgb(34, 34, 34);border-style:none;border-width:4.6875rpx;color:rgb(48, 31, 21);font-size:28.125rpx;height:44.270834326744rpx;width:386.24675273895rpx;line-height:44.53125rpx;margin-left:auto;margin-top:0;opacity:1;text-align:center;position:absolute;left:171.09375rpx;top:1357.03125rpx;margin-right:0;","content":"街边喜乐铺n天凉茶暖一杯接一杯n那天我买的单n请记得n你不欠我一杯茶n","customFeature":{"boxColor":"rgb(0, 0, 0)","boxR":"5","boxStyle":false,"boxX":"0","boxY":"0"},"animations":[],"compId":"data.content[4]","parentCompid":"free_vessel3","markColor":"","mode":0},{"type":"text","style":"background-color:rgba(0, 0, 0, 0);border-color:rgb(34, 34, 34);border-style:none;border-width:4.6875rpx;color:rgb(48, 31, 21);font-size:37.5rpx;height:44.53125rpx;line-height:44.53125rpx;margin-left:auto;margin-top:0;opacity:1;text-align:left;position:absolute;left:260.15625rpx;top:1598.4375rpx;margin-right:0;","content":"你欠我一个吻","customFeature":{"boxColor":"rgb(0, 0, 0)","boxR":"5","boxStyle":false,"boxX":"0","boxY":"0"},"animations":[],"compId":"data.content[5]","parentCompid":"free_vessel3","markColor":"","mode":0},{"type":"picture","style":"opacity:1;background-color:transparent;border-color:rgb(34, 34, 34);border-style:none;height:269.53125rpx;width:264.84375rpx;margin-left:auto;margin-right:0;margin-top:0;position:absolute;left:241.40625rpx;top:1666.40625rpx;","content":"http://img.weiye.me/zcimgdir/album/file_5912b9bda9c49.png","customFeature":{"boxShadow":"5","boxColor":"#000","boxX":"0","boxY":"0","boxR":"5"},"animations":[],"compId":"data.content[6]","parentCompid":"free_vessel3"},{"type":"picture","style":"opacity:1;background-color:transparent;border-color:rgb(34, 34, 34);border-style:none;height:46.875rpx;width:133.59375rpx;margin-left:auto;margin-right:0;margin-top:0;position:absolute;left:307.03125rpx;top:1980.46875rpx;","content":"http://img.weiye.me/zcimgdir/album/file_5912bb562578d.png","customFeature":{"boxShadow":"5","boxColor":"#000","boxX":"0","boxY":"0","boxR":"5","action":"inner-link","inner-page-link":"page10000"},"animations":[],"compId":"data.content[7]","parentCompid":"free_vessel3","itemType":"picture","itemParentType":"free-vessel","itemIndex":7,"eventParams":"{"inner_page_link":"\/pages\/page10000\/page10000","is_redirect":0}","eventHandler":"tapInnerLinkHandler"}],"customFeature":{"boxColor":"rgb(0, 0, 0)","boxR":5,"boxStyle":false,"boxX":0,"boxY":0},"animations":[],"page_form":"","compId":"free_vessel3"},"free_vessel4":{"type":"free-vessel","style":"width:750rpx;height:96.093754470348rpx;margin-bottom:auto;margin-right:auto;opacity:1;margin-left:auto;","content":[{"type":"picture","style":"opacity:1;background-color:transparent;border-color:rgb(34, 34, 34);border-style:none;height:58.593754470348rpx;width:750rpx;margin-left:auto;margin-right:0;margin-top:0;position:absolute;top:18.75rpx;","content":"http://img.weiye.me/zcimgdir/album/file_5912bcc332fee.png","customFeature":{"boxShadow":"5","boxColor":"#000","boxX":"0","boxY":"0","boxR":"5"},"animations":[],"compId":"data.content[0]","parentCompid":"free_vessel4"}],"customFeature":{"boxColor":"rgb(0, 0, 0)","boxR":5,"boxStyle":false,"boxX":0,"boxY":0},"animations":[],"page_form":"","compId":"free_vessel4"},"has_tabbar":1},
  page_router: 'page10001',
    page_form: 'none',
      list_compids_params: [],
      goods_compids_params: [],
  prevPage:0,
      relobj_auto: [],
      bbsCompIds: [],
      dynamicVesselComps: [],
      communityComps: [],
      franchiseeComps: [],
      cityLocationComps: [],
      onLoad: function (e) {
    this.setData({
      addShoppingCartShow: false
    });
    appInstance.setPageUserInfo();
    if(e.detail){
      this.dataId = e.detail;
    }
    appInstance.checkLogin();

    this.suspensionBottom();
    appInstance.globalData.urlLocationId = e.location_id;

  },
  dataInitial: function(){
    appInstance.dataInitial();
  },
  onShareAppMessage: function(){
    var pageRouter = this.page_router,
        pagePath = '/pages/'+pageRouter+'/'+pageRouter;

    // 统计用户分享APP
    appInstance.countUserShareApp();

    pagePath += this.dataId ? '?detail='+this.dataId : '';
    return {
      title: appInstance.getAppTitle() || '即速应用',
      desc: appInstance.getAppDescription() || '即速应用，拖拽生成app，无需编辑代码，一键打包微信小程序',
      path: pagePath
    }
  },
  onShow: function(){
    var that = this;
    setTimeout(function(){
      appInstance.setPageUserInfo();
    });
  },

  suspensionBottom: function(){
    for (let i in this.data) {
      if(/suspension/.test(i)){
        let suspension = this.data[i],
            newdata = {};

        if(this.data.has_tabbar == 1){
          newdata[i + '.suspension_bottom'] = (+suspension.suspension_bottom - 56)*2.34;
        }else{
          newdata[i + '.suspension_bottom'] = (+suspension.suspension_bottom)*2.34;
        }
        this.setData(newdata);
      }
    }
  },
  pageScrollFunc: function (e) {
    let compid  = e.target.dataset.compid;
    let curpage = parseInt(e.target.dataset.curpage) + 1;
      if (this.prevPage !== curpage) {
          this.prevPage = curpage;
          appInstance.pageScrollFunc(compid, curpage);
      }
  },
  goodsScrollFunc: function (e) {
    let compid  = e.target.dataset.compid;
    let curpage = parseInt(e.target.dataset.curpage) + 1;
    if (this.prevPage !== curpage) {
        this.prevPage = curpage;
        appInstance.goodsScrollFunc(compid, curpage);
    }
  },
  franchiseeScrollFunc: function (e) {
    let compid  = e.target.dataset.compid;
    let curpage = parseInt(e.target.dataset.curpage) + 1;
    appInstance.franchiseeScrollFunc(compid, curpage);
  },
  changeCount: function (e) {
    let dataset = e.currentTarget.dataset;
    appInstance.changeCount(dataset);
  },
  inputChange: function (e) {
    let dataset = e.currentTarget.dataset;
    let value = e.detail.value;
    appInstance.inputChange(dataset, value);
  },
  bindDateChange: function(e) {
    let dataset = e.currentTarget.dataset;
    let value   = e.detail.value;
    appInstance.bindDateChange(dataset, value);
  },
  bindTimeChange: function(e) {
    let dataset = e.currentTarget.dataset;
    let value   = e.detail.value;
    appInstance.bindTimeChange(dataset, value);
  },
  bindSelectChange: function(e) {
    let dataset = e.currentTarget.dataset;
    let value = e.detail.value;
    appInstance.bindSelectChange(dataset, value);
  },
  bindScoreChange: function(e){
    let dataset = e.currentTarget.dataset;
    appInstance.bindScoreChange(dataset);
  },
  submitForm: function (e) {
    let dataset = e.currentTarget.dataset;
    appInstance.submitForm(dataset);
  },
  udpateVideoSrc: function (e) {
    let dataset = e.currentTarget.dataset;
    appInstance.udpateVideoSrc(dataset);
  },
  tapMapDetail: function (e) {
    let dataset = e.currentTarget.dataset;
    appInstance.tapMapDetail(dataset);
  },
  uploadFormImg: function (e) {
    let dataset = e.currentTarget.dataset;
    appInstance.uploadFormImg(dataset);
  },
  listVesselTurnToPage: function (e) {
    let dataset = e.currentTarget.dataset;
    appInstance.listVesselTurnToPage(dataset);
  },
  UserCenterTurnToPage: function (e) {
    let router = e.currentTarget.dataset.router;
    let openVerifyPhone = e.currentTarget.dataset.openVerifyPhone; // 是否开启短信验证
    if(openVerifyPhone){
      if(!appInstance.getUserInfo().phone) {
        appInstance.turnToPage('/pages/bindCellphone/bindCellphone', true);
      } else {
        appInstance.turnToPage('/pages/' + router + '/' + router +'?from=userCenterEle');
      }
    } else {
      appInstance.turnToPage('/pages/' + router + '/' + router +'?from=userCenterEle');
    }
  },
  turnToGoodsDetail: function (e) {
    let id = e.currentTarget.dataset.id;
    let contact = e.currentTarget.dataset.contact;
    let goodsType = e.currentTarget.dataset.goodsType;
    switch(+goodsType){
      case 0:
      case 1: appInstance.turnToPage('/pages/goodsDetail/goodsDetail?detail=' + id +'&contact=' + contact);
        break;
      case 3: appInstance.turnToPage('/pages/toStoreDetail/toStoreDetail?detail=' + id);
        break;
    }
  },
  turnToFranchiseeDetail: function(e){
    let dataset = e.currentTarget.dataset,
        id = dataset.id;
    appInstance.turnToPage('/pages/franchiseeDetail/franchiseeDetail?detail=' + id);
  },
  sortListFunc: function (e) {
    let dataset = e.currentTarget.dataset;
    appInstance.sortListFunc(dataset);
  },
  bbsInputComment: function(e){
    var dataset = e.target.dataset,
        comment = e.detail.value;
    appInstance.bbsInputComment(dataset, comment);
  },
  bbsInputReply: function(e){
    var dataset = e.target.dataset,
        comment = e.detail.value;
    appInstance.bbsInputReply(dataset, comment);
  },
  uploadBbsCommentImage: function(e){
    var dataset = e.currentTarget.dataset;
    appInstance.uploadBbsCommentImage(dataset);
  },
  uploadBbsReplyImage: function(e){
    var dataset = e.currentTarget.dataset;
    appInstance.uploadBbsReplyImage(dataset);
  },
  deleteCommentImage: function(e){
    var dataset = e.currentTarget.dataset;
    appInstance.deleteCommentImage(dataset);
  },
  deleteReplyImage: function(e){
    var dataset = e.currentTarget.dataset;
    appInstance.deleteReplyImage(dataset);
  },
  bbsPublishComment: function(e){
    var dataset = e.currentTarget.dataset;
    appInstance.bbsPublishComment(dataset);
  },
  clickBbsReplyBtn: function(e){
    var dataset = e.currentTarget.dataset;
    appInstance.clickBbsReplyBtn(dataset);
  },
  bbsPublishReply: function(e){
    var dataset = e.currentTarget.dataset;
    appInstance.bbsPublishReply(dataset);
  },
  keywordList:{},
  bindSearchTextChange : function(e){
    this.keywordList[e.currentTarget.dataset.compid] = e.detail.value;
  },
  searchList:function(e){
    let dataset = e.currentTarget.dataset;
    appInstance.searchList(dataset);
  },
  selectLocal:function(e){
    var that = this;
    let id = e.currentTarget.dataset.id,
        newdata = this.data;
    newdata[id].hidden = typeof(this.data[id].hidden) == undefined ? false : !this.data[id].hidden;
    newdata[id].provinces = ['请选择'];  newdata[id].citys =['请选择']; newdata[id].districts = ['请选择']
    newdata[id].provinces_ids =[null]; newdata[id].city_ids =[null]; newdata[id].district_ids = [null];
    for(var i in newdata[id].areaList){
      newdata[id].provinces.push(newdata[id].areaList[i].name);
      newdata[id].provinces_ids.push(newdata[id].areaList[i].region_id);
    }
    newdata[id].newlocal = '';
    this.setData(newdata);
  },
  cancelCity:function(e){
    var that = this;
    let id = e.currentTarget.dataset.id,
        newdata = this.data;
    newdata[id].hidden = !this.data[id].hidden;
    newdata[id].province = '';
    newdata[id].city = '';
    newdata[id].district = '';
    this.setData(newdata);
  },
  bindCityChange:function(e){
    const val = e.detail.value;
    let id = e.currentTarget.dataset.id,
        newdata = this.data,
        cityList = newdata[id].areaList;
        if(!newdata[id].newlocal){
    newdata[id].province = this.data[id].province[val[0]] == '请选择' ? ''  : this.data[id].provinces[val[0]];
    newdata[id].citys = newdata[id].province == '请选择' ? ['请选择'] :  this.getCityList(cityList[val[0]].cities);
    newdata[id].city_ids = newdata[id].province == '请选择' ? [null] : this.getCityList(cityList[val[0]].cities,1);
    newdata[id].city = newdata[id].citys[val[1]];
    newdata[id].districts = newdata[id].city == '请选择' ? ['请选择'] :  this.getCityList(cityList[val[0]].cities[val[1]].towns);
    newdata[id].district_ids = newdata[id].city == '请选择' ? [null] : this.getCityList(cityList[val[0]].cities[val[1]].towns, 1);
    newdata[id].region_id = newdata[id].district_ids[val[2]];
    newdata[id].district = newdata[id].districts[val[2]];
    newdata[id].value = val;
    newdata[id].district = newdata[id].district == '请选择'? '' :newdata[id].district
    this.setData(newdata)
    }
  },
  submitCity:function(e){
    let id = e.currentTarget.dataset.id,
        newdata = this.data;
    if(!newdata[id].districts){
      appInstance.showModal({content: '您未选择城市!'});
      newdata[id].province = '';
      newdata[id].city = '';
      newdata[id].district = '';
    }else{
      newdata[id].hidden = !this.data[id].hidden;
      newdata[id].newlocal = newdata[id].province + ' ' + newdata[id].city + ' ' +      newdata[id].district;
      newdata[id].value = [0,0,0];
      appInstance.citylocationList(e.currentTarget.dataset, newdata[id].region_id);
    }
    this.setData(newdata);
  },
  getCityList:function (province, id){
    let cityList = [], cityList_id = [];
    for(let i in province){
      if(typeof(province[i]) == 'object'){
        cityList.push(province[i].name)
        cityList_id.push(province[i].region_id);
      }else{
        cityList[1] = province.name;
        cityList_id[1]=province.region_id;
      }
    }
    if(id){
      return cityList_id;
    }else{
      return cityList;
    }

  },
  

  
  
  tapGoodsTradeHandler: function(event) {
    appInstance.tapGoodsTradeHandler(event);
  },
  tapInnerLinkHandler: function(event) {
    appInstance.tapInnerLinkHandler(event);
  },
  tapPhoneCallHandler: function(event) {
    appInstance.tapPhoneCallHandler(event);
  },
  tapRefreshListHandler: function(event) {
    var _this = this;
    appInstance.tapRefreshListHandler(event, _this);
  },
  tapGetCouponHandler: function(event) {
    appInstance.tapGetCouponHandler(event);
  },
  tapCommunityHandler: function(event) {
    appInstance.tapCommunityHandler(event);
  },
  turnToCommunityPage: function(event){
    let id = event.currentTarget.dataset.id;
    appInstance.turnToPage('/pages/communityPage/communityPage?detail=' + id);
  },
  tapToFranchiseeHandler: function(event){
    appInstance.tapToFranchiseeHandler(event);
  },
  tapFranchiseeLocation: function(event){
    appInstance.tapFranchiseeLocation(event);
  },
  showAddShoppingcart: function(event) {
    var that = this,
        goods_id = event.currentTarget.dataset.id;
    appInstance.sendRequest({
      url: '/index.php?r=AppShop/getGoods',
      data: {
        data_id: goods_id
      },
      method: 'post',
      success: function (res) {
        if (res.status == 0) {
          var goods = res.data[0].form_data,
              defaultSelect = goods.model_items[0],
              goodsModel = [],
              selectModels = [],
              goodprice = 0,
              goodstock = 0,
              goodid ;
          if(goods.model_items.length){
            goodprice = defaultSelect.price;
            goodstock = defaultSelect.stock;
            goodid = defaultSelect.id;
          }else{
            goodprice = goods.price;
            goodstock = goods.stock;
          }
          for(let key in goods.model){
            if(key){
              let model = goods.model[key];
              goodsModel.push(model);
              selectModels.push(model.subModelId[0]);
            }
          }
          goods.model = goodsModel;
          that.setData({
            goodsInfo: goods ,
            addShoppingCartShow: true,
            'selectGoodsModelInfo.price': goodprice,
            'selectGoodsModelInfo.stock': goodstock,
            'selectGoodsModelInfo.buyCount': 1,
            'selectGoodsModelInfo.models': selectModels,
            'selectGoodsModelInfo.modelId': goodid
          });
        }
      }
    });
  },
  hiddeAddShoppingcart: function(){
    this.setData({
      addShoppingCartShow: false
    });
  },
  selectGoodsSubModel: function(e){
    let dataset = e.target.dataset,
        modelIndex = dataset.modelIndex,
        submodelIndex = dataset.submodelIndex,
        data = {};

    data['selectGoodsModelInfo.models['+modelIndex+']'] = this.data.goodsInfo.model[modelIndex].subModelId[submodelIndex];
    this.setData(data);
    this.resetSelectCountPrice();
  },
  resetSelectCountPrice: function(){
    let selectModelIds = this.data.selectGoodsModelInfo.models.join(','),
        modelItems = this.data.goodsInfo.model_items,
        data = {};

    for (let i = modelItems.length - 1; i >= 0; i--) {
      if(modelItems[i].model == selectModelIds){
        data['selectGoodsModelInfo.stock'] = modelItems[i].stock;
        data['selectGoodsModelInfo.price'] = modelItems[i].price;
        data['selectGoodsModelInfo.modelId'] = modelItems[i].id;
        break;
      }
    }
    this.setData(data);
  },
  clickGoodsMinusButton: function(e){
    let count = this.data.selectGoodsModelInfo.buyCount;

    if(count <= 1){
      return;
    }
    this.setData({
      'selectGoodsModelInfo.buyCount': count - 1
    });
  },
  clickGoodsPlusButton: function(e){
    let selectGoodsModelInfo = this.data.selectGoodsModelInfo,
        count = selectGoodsModelInfo.buyCount,
        stock = selectGoodsModelInfo.stock;

    if(count >= stock) {
      return;
    }
    this.setData({
      'selectGoodsModelInfo.buyCount': count + 1
    });
  },
  sureAddToShoppingCart: function(){
    var that = this,
        param = {
          goods_id: this.data.goodsInfo.id,
          model_id: this.data.selectGoodsModelInfo.modelId || '',
          num: this.data.selectGoodsModelInfo.buyCount,
          sub_shop_app_id : ''
        };

    appInstance.sendRequest({
      url: '/index.php?r=AppShop/addCart',
      data: param,
      success: function(res){
        appInstance.showToast({
          title: '添加成功',
          icon: 'success',
          duration: 1500
        });

        setTimeout(function(){
          appInstance.hideToast();
          setTimeout(function(){
            that.hiddeAddShoppingcart();
          }, 500);
        }, 1500);
      }
    })
  }
};
Page(pageData);

模板简介：该模板名称为【微信小程序门店一览页面样式模板制作设计下载】，大小是，文档格式为.，推荐使用打开，作品中的图片，文字等数据均可修改，图片请在作品中选中图片替换即可，文字修改直接点击文字修改即可，您也可以新增或修改作品中的内容，该模板来自用户分享，如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。