jufubao-mall 2.0.35-beta1 → 2.0.35-beta10

package/src/components/JfbMallShopVip/JfbMallShopVip.vue

@@ -9,60 +9,65 @@
     <!-- #endif -->
     <view class="jfb-mall-shop-vip__body">
       <view class="outer-box" :style="[bodyStyleComp]">
-        <!--tab-->
+        <!--map-->
         <view
-          class="shop_tabs"
-          :style="[tabsStyleComp]"
-          v-if="titleList.length > 1"
+          class="shop_map"
+          v-if="initMapStatus"
         >
           <view
-            class="tab_item"
-            v-for="(item,index) in titleList"
-            :key="index"
-            :class="{short: tabLayout === 'v2'}"
-            @click="tab=item.value"
-            :style="[tab === item.value?tabActItemStyleComp:tabItemStyleComp]"
+            class="mpa_wrap"
+            :class="{close: !mapIsExtend}"
           >
-            <text>{{item.label}}</text>
-            <text v-if="titleList.length > 1 && tab === item.value && ['v1', 'v2'].includes(tabLayout)" class="lineX"></text>
-          </view>
-        </view>
-        <!--tab-->
-        <!--map-->
-        <view class="shop_map" v-if="initBaidu">
-          <view class="mpa_wrap" :class="{close: !mapIsExtend}">
+            <!--地图定位指示图标-->
+            <view class="map-center" v-if="localImage">
+              <image :src="localImage"></image>
+            </view>
+            <!--地图定位指示图标-->
             <!--#ifdef H5-->
             <xd-baidu-map
-              v-if="initBaidu"
-              :myPosition="myPosition"
+              v-if="initMapStatus && uiBaiduAk"
               :markets="marketList"
               :ak="uiBaiduAk"
               :center="mapCenter"
-              @onChose="handleChoseShop"
+              @on-show-marker="(item)=>{handleShowMarker(item,true)}"
+              @on-close-marker="(item)=>{handleShowMarker(item,false)}"
+              @regionchange="handleRegionChange"
+              @init="handleH5Init"
+              @on-detail="handleBaiduToEvent"
             ></xd-baidu-map>
             <!--#endif-->
             <!-- #ifdef MP-WEIXIN -->
             <map
+              v-if="mapCenter !== null"
+              id="WeiXinMap"
+              :show-location="showLocation"
               style="width:100%;height: 100%;"
-              show-location
               :longitude="mapCenter.longitude"
               :latitude="mapCenter.latitude"
               :markers="marketList"
               @markertap="handleMarketTap"
+              @callouttap="handleWxToEvent"
+              @regionchange="handleRegionChange"
             >
               <cover-view
                 class="cover_view"
                 slot="callout"
               >
                 <cover-view
-                  v-for="(item,index) in marketList"
-                  :key="index"
+                  v-for="(item) in marketList"
+                  :key="item.id"
                   :marker-id="item.id"
                   style="background: rgba(0,0,0,.8);border-radius: 6px;padding: 8px 12px;color: #fff;"
                   :style="{display: item.id === showMarkerId ? 'block' : 'none'}"
-                >{{ item.title }}</cover-view>
+                >
+                  <view class="callout-text">
+                    <text>{{ item.title }}</text>
+                    <xd-font-icon icon="iconxiangyou_xian" color="#fff" size="28"></xd-font-icon>
+                  </view>
+                </cover-view>
               </cover-view>
             </map>
+            <view class="weiXinLocation" v-if="mpLocationFn === 'getLocation'" @click="handleWXLocation">定位</view>
             <!-- #endif -->
           </view>
           <view
@@ -84,29 +89,65 @@
         </view>
         <!--map-->
         <!--shop-->
-        <view v-if="showShopList" class="shop_list" :style="[contStyleComp]">
-          <template v-if="showShopList.length">
+        <view class="shop_list" :style="[contStyleComp]">
+          <template v-if="nearbyShopList === null || (nearbyShopList && nearbyShopList.length > 0)">
             <scroll-view
               scroll-y
-              :scroll-top="scrollTop"
               class="scroll_y"
+              :scroll-into-view="intoViewResourceShopId"
+              scroll-with-animation
             >
-              <cus-shops
-                layout="v1"
-                :select-id="selectIds"
-                :is-show-btn="fastEntryStatus"
-                :content="cusContent"
-                :cus-style="cusStyle"
-                :list="showShopList"
-                :main-color="mainColor"
-                :sub-main-color="subMainColor"
-                :names="cusNames"
-                :entry="cusEntry"
-                @on-event="handleToEvent"
-              ></cus-shops>
+              <template v-if="nearbyShopList === null">
+                <view class="shop_list-ske" :id="i" v-for="i in 6" :key="i" :style="[cusStyle.item]">
+                  <view class="shop_list-ske-title">
+                    <view></view>
+                    <view></view>
+                  </view>
+                  <view class="shop_list-ske-address">
+                    <view></view>
+                    <view></view>
+                  </view>
+                  <view class="shop_list-ske-time"></view>
+                </view>
+              </template>
+              <template v-else-if="nearbyShopList.length >0">
+                <template v-for="(item,index) in nearbyShopList">
+                  <view
+                    :style="[
+                      cusStyle.item,
+                      (index === 0?{marginTop: itemTop + 'rpx'}:{}),
+                    ]"
+                    class="shop_list-item"
+                    :class='[{"shop_list-item-act":resource_shop_id === item.resource_shop_id}]'
+                    :key="item.key"
+                    :id="`scroll-${item.resource_shop_id}`"
+                    @click="handleToEvent(item, 'shop')"
+                  >
+                    <view class="shop_list-item-title">
+                      <view class="title">
+                        <view>{{item.resource_shop_name}}</view>
+                        <view class="active" v-if="resource_shop_id === item.resource_shop_id">正在预览</view>
+                      </view>
+                      <view @click.stop="handleToEvent(item, 'detail')">
+                        <text>详情</text>
+                        <xd-font-icon icon="iconxiangyou_xian" color="#999" size="30" width="26" height="26"></xd-font-icon>
+                      </view>
+                    </view>
+                    <view class="address" :style="{marginBottom:item['business_time_name']?'16rpx':0}">
+                      <view>{{item.address}}</view>
+                      <view
+                        v-if="item.distance_conversion || item.distance"
+                        :style="[cusStyle.distance]"
+                      >{{item.distance_conversion || item.distance}}</view>
+                    </view>
+                    <view class="openTime" v-if="item['business_time_name']">营业时间：{{item['business_time_name']}}</view>
+                  </view>
+                </template>
+                <xd-more>更多附近门店可搜索名称或地址查询</xd-more>
+              </template>
             </scroll-view>
           </template>
-          <xd-no-data icon-type="shop" :scale-size="2" v-if="showShopList.length === 0">暂无门店信息</xd-no-data>
+          <xd-no-data icon-type="shop" :scale-size="2" v-if="nearbyShopList && nearbyShopList.length === 0">暂无更多门店</xd-no-data>
         </view>
         <!--shop-->
       </view>
@@ -119,16 +160,16 @@
   import XdNoData from "@/components/XdNoData/XdNoData";
   import { jfbRootExec } from "@/utils/xd.event";
   import JfbMallShopVipMixin from "./JfbMallShopVipMixin";
-  import { getContainerPropsValue,gCPVal } from "@/utils/xd.base";
+  import { gCPVal } from "@/utils/xd.base";
   import componentsMixins from "@/mixins/componentsMixins";
   import getServiceUrl from "@/common/getServiceUrl";
-  import CusShops from "./CusShops.vue"
+  import XdMore from "@/components/XdMore/XdMore.vue";
+
   // #ifdef H5
   import XdBaiduMap from "./XdBaiduMap"
   // #endif
   import { mapState } from 'vuex';
   import extsMixins from "@/mixins/extsMixins";
-  import Color from "color"
 
 
   export default {
@@ -136,7 +177,7 @@
     components: {
       XdNoData,
       XdFontIcon,
-      CusShops,
+      XdMore,
       // #ifdef H5
       XdBaiduMap,
       // #endif
@@ -153,21 +194,24 @@
         next_page_token: "",
         brand_id: '',
         shop_id: '',
-        resource_shop_id: '',
+        resource_shop_id: -1,
+        intoViewResourceShopId:'',
 
         //地图
-        initBaidu: false,
+        initMapStatus: false,
         uiBaiduAk: '',
-        mapCenter: [],
+        mapCenter: null,
+        changStatus: true,
+        changeLocation:null,
         mapIsExtend: true,
         marketList: [],
         myPosition: null,
         showMarkerId: "",
+        localImage: '',
 
         //tab
         titleList: [],
         tab: "nearby", //nearby,often
-        oftenShopList: null,
         nearbyShopList: null,
         curShopId: '',
         toView: '',
@@ -187,6 +231,9 @@
         //style
         bodyPadding: {},
         cusStyle: {},
+        cardItemShadowWidth:0,
+        itemTop:0,
+        itemBottom:0,
         contentBgColor: 'rgba(0,0,0,0)',
 
         //选项卡
@@ -197,11 +244,18 @@
 
         //高级
         codePath: '', //门店跳转
-        cashierPath: '',//支持核销
-        buyTicketPath: '',//在线选择
-        codeAfterPath: '',//电子码
-        hdSelfPath: '',//小时达
-        travelfPath: '', //旅游购票
+        detailPath: '',//门店详情
+
+        // #ifdef MP-WEIXIN
+        WeiXinMap:null,
+        showLocation: false,
+        onLoadStatus: false, //小程序onload是否执行
+        onLocationStatus: false, //小程序首次定位成功状态
+        mpLocationFn:'getFuzzyLocation',
+        // #endif
+
+        isMoved: false, //是否已经移动过
+
       }
     },
     computed: {
@@ -209,90 +263,34 @@
         stateCity: state => state.cityLocation.city,
         stateLocation: state => state.cityLocation.location || {}
       }),
-      selectIds(){
-        let id = '';
-        if(!id && this.resource_shop_id) id = this.resource_shop_id;
-        if(!id&& this.brand_id) id = this.brand_id;
-        if(!id && this.shop_id) id = this.shop_id;
-        return id;
-      },
-      tabActItemStyleComp(){
-        if(this.titleList.length === 1) return  {
-          color: this.tabStyle.color,
-          fontSize: this.tabStyle.fontSize + 'rpx',
-          fontWeight: this.tabStyle.fontWeight,
-        };
-        let backgroundColor = '';
-        let color = this.mainColor;
-        let marginRight = 0;
-        if(this.tabLayout === 'v3') {
-          if( this.tabStyle.actBgColor) backgroundColor = this.tabStyle.actBgColor;
-          else backgroundColor = this.mainColor;
-          if( this.tabStyle.actColor) color =  this.tabStyle.actColor;
-          else color = '#fff';
-          marginRight = '20rpx';
-        }
-        return {
-          marginRight,
-          color: this.tabStyle.actColor,
-          fontSize: this.tabStyle.actFontSize + 'rpx',
-          fontWeight: this.tabStyle.actFontWeight,
-          backgroundColor: backgroundColor,
-        }
-      },
-      tabItemStyleComp(){
-        if(this.titleList.length === 1) return  {
-          color: this.tabStyle.color,
-          fontSize: this.tabStyle.fontSize + 'rpx',
-          fontWeight: this.tabStyle.fontWeight,
-        };
-        let backgroundColor = '';
-        let marginRight = 0;
-        if(this.tabLayout === 'v3') {
-          backgroundColor = this.tabStyle.bgColor;
-          marginRight = '20rpx';
-        }
-        return {
-          marginRight,
-          color: this.tabStyle.color,
-          fontSize: this.tabStyle.fontSize + 'rpx',
-          fontWeight: this.tabStyle.fontWeight,
-          backgroundColor: backgroundColor,
-        }
-      },
-      tabsStyleComp() {
-        let padding = '0 24rpx', height = '100rpx';
-        if(this.tabLayout === 'v3') {
-          padding = '20rpx 24rpx'
-          if(this.titleList.length === 1) padding = '16rpx 0'
-          height = '60rpx';
-        }
-        return {
-          padding,
-          height,
-          lineHeight: height,
-          backgroundColor: this.tabBgColor,
-        }
-      },
-      showShopList(){
-        return this.tab === 'nearby' ? this.nearbyShopList : this.oftenShopList
-      },
+
       bodyStyleComp(){
         return {
           height: this.layoutInfo.bodyMinHeightRpx + 'rpx',
           '--main-color': this.tabStyle.actColor,
-          '--main-alpha-color': this.$colorChange(this.mainColor).alpha(0.1).toString()
+          '--main-alpha-color': this.$colorChange(this.mainColor).alpha(0.01).toString(),
+          '--main-alpha5-color': this.$colorChange(this.mainColor).alpha(0.2).toString()
         }
       },
       contStyleComp(){
         let height = this.layoutInfo.bodyMinHeightRpx  - 72;
+        let padding = this.getMarginAndPadding(this.bodyPadding, 0);
         //大于一个标签显示标签
         if(this.titleList.length > 1) height = height - 100;
-        if(this.mapIsExtend) height = height - 400;
-        height = height - this.getPMValue(this.bodyPadding, 'TB', 0);
+        if(this.mapIsExtend) height = height - 500;
+
+        //有投影信息
+        if(this.cardItemShadowWidth > 0) {
+          padding = 0;
+        }
+        //无投影信息
+        else {
+          height = height - this.getPMValue(this.bodyPadding, 'TB', 0);
+        }
+
         return {
           height: height + 'rpx',
-          padding: this.getMarginAndPadding(this.bodyPadding, 0),
+          padding: padding,
           backgroundColor: this.contentBgColor
         }
       },
@@ -302,252 +300,42 @@
         if (JSON.stringify(value) === JSON.stringify(oldValue)) return;
         if (this.$configProject['isPreview']) this.init(value)
       },
-      tab(value) {
-        this.hasNext = true;
-        this.page_token = '1';
-        this.next_page_token = ''
-        this.marketList = []
-        if (value === 'nearby') {
-          this.getNearbyShop();
-        } else {
-          this.getOftenShop();
-        }
-      },
+
       stateCity(n, o) {
         if (n && JSON.stringify(n) !== JSON.stringify(o)) {
-          console.warn('stateCity');
-          if (this.tab === 'nearby') {
-            this.getNearbyShop();
-          } else {
-            this.getOftenShop();
-          }
+          this.clearList();
+          this.getNearbyShop();
         }
       },
+      onLoadStatus(){
+        if(this.onLoadStatus && this.onLocationStatus) this.getNearbyShop()
+      },
+      onLocationStatus(){
+        if(this.onLoadStatus && this.onLocationStatus) this.getNearbyShop()
+      }
     },
     created() {
       this.init(this.container);
+
+    },
+    mounted() {
+      this.$nextTick(()=>{
+        this.isEmptySetMapCenter();
+      })
     },
+
     methods: {
       onJfbLoad(options) {
         this.setNameSpace(options, false);
         this.uiBaiduAk = this.baiduAk || this.$settings.baiduAk;
-        this.myPosition = {
-          lng: this.stateLocation.longitude,
-          lat: this.stateLocation.latitude,
-        }
         if(options.shop_id) this.shop_id = options.shop_id;
         if(options.brand_id) this.brand_id = options.brand_id;
-        if(options.resource_shop_id) this.resource_shop_id = options.resource_shop_id;
-        if(options.callback) {
-          try{
-            let callback = Base64.decode(options.callback);
-            let page = this.$xdUniHelper.parseURL(callback);
-            if(page.params && page.params.resource_shop_id) delete page.params.resource_shop_id;
-
-            //相同应用
-            if(page.path.indexOf(`/${this.projectAttr['deploy_dir']}/`) === 0) {
-              callback = page.path.replace(`/${this.projectAttr['deploy_dir']}/`,'/');
-            }
-            //不同应用
-            else {
-              // #ifdef H5
-              callback = `//${this.projectAttr['host']}${page.path}`;
-              // #endif
-
-              //#ifdef MP-WEIXIN
-              //todo
-              // #endif
-            }
-            //设置参数
-            if(page.params) this.callbackParams = page.params
-            this.isCallback = callback;
-          }
-          catch (e){
-            console.error(e);
-          }
-        }
-
-        if (this.tab === 'nearby') {
-          this.getNearbyShop();
-        } else {
-          this.getOftenShop();
-        }
+        if(options.resource_shop_id) this.resource_shop_id = Number(options.resource_shop_id);
+        if(this.$configProject['isPreview'] && this.resource_shop_id === -1 ) this.resource_shop_id = 3513711;
+        this.onLoadStatus = true;
       },
-      getParams(){
-        let params = {
-          latitude: this.stateLocation.latitude + '',
-          longitude: this.stateLocation.longitude + '',
-          page_size: 20,
-          page_token: this.page_token + '',
-          keyword: this.keyword,
-          xnamespace: this.xnamespace,
-          consume_mode: this.serverType.join(','),
-        }
-        if(this.brand_id) params['brand_id'] = this.brand_id;
-        if(this.keyword) params['keyword'] = this.keyword
-        return params
-      },
-      isEmptySetMapCenter(){
-        if(this.stateLocation.latitude && this.stateLocation.longitude) {
-          // #ifdef H5
-          this.mapCenter = {
-            lng: this.stateLocation.longitude,
-            lat: this.stateLocation.latitude
-          }
-          // #endif
-          // #ifdef MP-WEIXIN
-          this.mapCenter = this.stateLocation;
-          // #endif
-        }
-      },
-      getOftenShop() {
-        jfbRootExec("getOftenVipShopList", {
-          vm: this,
-          data: this.getParams(),
-        }).then(res => {
-          let list = res.list.map(item => {
-            item.shop_icon = getServiceUrl(item['shop_pic'] || item['shop_icon'])
-            return item
-          });
-
-          //todo 目前返回第一屏数据（如果下拉数据需要改造）
-          if(res.list.length > 0) {
-            this.setMarketList(list);
-            this.mapCenter = this.marketList[0];
-          }
 
-          if (this.page_token === '1') this.oftenShopList = list
-          else this.oftenShopList = this.oftenShopList.concat(list);
-
-          //数据为空处理
-          if(this.oftenShopList.length === 0) {
-            this.isEmptySetMapCenter();
-          }
-
-          this.next_page_token = res.next_page_token
-          this.hasNext = res.next_page_token !== "";
-        }).catch(err=>{
-          console.error(err)
-          this.oftenShopList = []
-        })
-      },
-      getNearbyShop(centerPosition) {
-        let data = {
-          city_code: this.stateCity.city_code,
-          ...this.getParams()
-        }
-        if(centerPosition) data = Object.assign(data, centerPosition)
-        jfbRootExec("getNearbyVipShopList", {
-          vm: this,
-          data: data
-        }).then(res => {
 
-          let list = res.list.map(item => {
-            item.shop_icon = getServiceUrl(item.shop_icon)
-            return item
-          })
-
-          //todo 目前返回第一屏数据（如果下拉数据需要改造）
-          if(res.list.length > 0) {
-            //设置地图mark标签
-            this.setMarketList(list);
-
-            //设置原点
-            if(!centerPosition)this.mapCenter = this.marketList[0];
-          }
-
-          //设置数据
-          if (this.page_token === '1')  this.nearbyShopList = list
-          else this.nearbyShopList = this.nearbyShopList.concat(list);
-
-          //数据为空
-          if(this.nearbyShopList.length === 0) {
-            this.isEmptySetMapCenter()
-          }
-
-          this.hasNext = res.next_page_token !== "";
-          this.next_page_token = res.next_page_token;
-          this.initBaidu = true;
-        }).catch(err=>{
-          console.error(err)
-          this.nearbyShopList = []
-        })
-      },
-      setMarketList(list){
-        // #ifdef H5
-        this.marketList = list.map(item => {
-          return {
-            platform: "H5",
-            lng: item.longitude,
-            lat: item.latitude,
-            icon: {
-              url: item.shop_icon,
-              size: {width: 30, height: 30},
-              opts: {imageSize: {width: 30, height: 30}}
-            },
-            title: item.resource_shop_name,
-            id: item.resource_shop_id,
-          }
-        })
-        // #endif
-        // #ifdef MP-WEIXIN
-        this.marketList = list.map(item => {
-          let point = this.baiduTogcj(item.longitude, item.latitude);
-          return {
-            platform: "MP",
-            longitude: point[0],
-            latitude: point[1],
-            lng: item.longitude,
-            lat: item.latitude,
-            id: item.resource_shop_id,
-            title: item.resource_shop_name,
-            width: 30,
-            height: 30,
-            iconPath: item.shop_icon,
-            customCallout: {
-              anchorX: 0.5,
-              anchorY: 0.5,
-              display: 'ALWAYS',
-            }
-          }
-        })
-        // #endif
-      },
-      switchMapExtend(isExtend){
-        this.mapIsExtend = isExtend;
-      },
-      handleMarketTap(e){
-        this.showMarkerId = e.markerId;
-        let curShop = this.marketList.find(item => item.id === e.markerId);
-        this.handleChoseShop(curShop);
-      },
-      handleChoseShop(shop){
-        this.toView = 'shop_item_' + shop.id;
-        this.curShopId = shop.id;
-        if(shop.platform === 'H5'){
-          this.mapCenter = {
-            lng: shop.lng,
-            lat: shop.lat
-          };
-        }
-        else{
-          this.mapCenter = {
-            longitude: shop.longitude,
-            latitude: shop.latitude
-          }
-        }
-        this.page_token = '1';
-        let data = {
-          center_latitude: shop.lat || shop.latitude,
-          center_longitude: shop.lng || shop.longitude
-        }
-        if (this.tab === 'nearby') {
-          this.getNearbyShop(data)
-        } else {
-          this.getOftenShop(data)
-        }
-        this.scrollTop = 0;
-      },
       /**
        * @description 监听事件变化
        * @param container {object} 业务组件对象自己
@@ -555,19 +343,19 @@
       init(container) {
         this.xnamespace = gCPVal(container, 'xnamespace', this.projectAttr.business_code||this.xnamespace);
         this.serverType = gCPVal(container, 'serverType', [['SELL']]);
-        this.showOftenTab = gCPVal(container, 'showOftenTab', 'N');
+        this.showOftenTab = 'N' //todo gCPVal(container, 'showOftenTab', 'N');
         if(this.showOftenTab === 'N') this.titleList = [{label: '附近门店', value: 'nearby'}];
         if(this.showOftenTab === 'Y') this.titleList = [{label: '附近门店', value: 'nearby'},{label: '常用门店', value: 'often'}];
         this.shopListStyle =  gCPVal(container, 'shopListStyle', 'v1');
         this.fastEntryStatus = gCPVal(container, 'fastEntryStatus', 'N') === 'Y';
         let fastEntry = gCPVal(container, 'fastEntry', []).filter(item=>{
-          return item.check === true
+          return true;//item.check === true
         });
         let cusNames = {};
         let cusEntry = {};
         if(this.fastEntryStatus) {
           for(let i = 0; i< fastEntry.length ;i++) {
-            if(fastEntry[i].input)  cusNames[fastEntry[i].value] = fastEntry[i].input
+            if(fastEntry[i].input) cusNames[fastEntry[i].value] = fastEntry[i].input
             cusEntry[fastEntry[i].value] = fastEntry[i].check;
           }
         }
@@ -598,8 +386,8 @@
 
         //style
         let sValue = `{"cardItemSpace":16,"margin":{"bottom":16,"left":0,"right":0,"top":16},"backgroundColor":"rgba(245, 245, 245, 1)"}`
-        let shopStyle = this.getRelationStatus(container,'shopStyle', {  cardItemSpaceStatus:['cardItemSpace'],bodyPaddingStatus:['bodyPadding']}, sValue);
-        this.bodyPadding = gCPVal(container,'bodyPadding', [{ bottom:0,left:16, right:16,top:16}, 20], {sKey:'bodyPaddingStatus',fields:['bodyPadding'],cusFields: ['shopStyle','margin',shopStyle],isPMR: true, });
+        let shopStyle = `{"cardItemSpace":16,"margin":{"bottom":16,"left":16,"right":16,"top":16},"backgroundColor":"rgba(245, 245, 245, 1)"}`;
+        this.bodyPadding = gCPVal(container,'bodyPadding', [{ bottom:0,left:16, right:16,top:16}, 20], {sKey:'bodyPaddingStatus',fields:['bodyPadding'],cusFields: ['shopStyle','margin', shopStyle ],isPMR: true, });
         this.contentBgColor = gCPVal(container,'contentBgColor', '#f8f8f8', {sKey:'contentBgColorStatus',fields:['contentBgColor']});
         this.tabLayout = gCPVal(container,'tabLayout', 'v1')
 
@@ -626,13 +414,24 @@
         //门店列表
         let cardItemSpace = gCPVal(container,'cardItemSpace', [16,20], {sKey:'cardItemSpaceStatus',fields:['cardItemSpace'],cusFields: ['shopStyle','cardItemSpace',shopStyle]});
         let cardItemRadius = gCPVal(container,'cardItemRadius', [sValue===shopStyle?0:this.gStyleValue.radius, 0], {sKey:'cardItemRadiusStatus',fields:['listItemRadius']})|| 0;
-        let cardItemShadow = gCPVal(container, 'cardItemShadow', [this.gStyleValue.shadow, {color:'',width:'0',}],{isShadow: true});
+        let cardItemShadow = gCPVal(container, 'cardItemShadow', [this.gStyleValue.shadow, {color:'',width:'0'}],{isShadow: true});
         let cardItemBorder = gCPVal(container, 'cardItemBorder', [{color: '#f8f8f8',width: 0,style: 'solid'},{color: '#f8f8f8',width: 0,style: 'solid'}],{isBorder: true});
         let distanceColor = gCPVal(container,'distanceColor', '#999999', {sKey:'distanceColorStatus',fields:['distanceColor']});
-        let cardItemBgColor = gCPVal(container,'cardItemBgColor', '', {sKey:'cardItemBgColorStatus',fields:['cardItemBgColor']});
-        let itemPadding = gCPVal(container,'itemPadding', [{top:16,left:16, right:16, bottom:16},20], {sKey:'itemPaddingStatus',fields:['itemPadding'],isPMR: true});
+        let cardItemBgColor = gCPVal(container,'cardItemBgColor', '#fff', {sKey:'cardItemBgColorStatus',fields:['cardItemBgColor']});
+        let itemPadding = gCPVal(container,'itemPadding', [{top:32,left:32, right:32, bottom:32},20], {sKey:'itemPaddingStatus',fields:['itemPadding'],isPMR: true});
         let cardImageBorder = gCPVal(container, 'cardImageBorder', [{color: '#f8f8f8',width: 0,style: 'solid'},{color: '#f8f8f8',width: '2rpx',style: 'solid'}],{isBorder: true});
         let itemImageRadius = gCPVal(container,'itemImageRadius', [this.gStyleValue.radius/2, 0], {sKey:'itemImageRadiusStatus',fields:['itemImageRadius']})||0;
+        this.cardItemShadowWidth = gCPVal(container, 'cardItemShadow', [this.gStyleValue.shadow, {color:'',width:'0'}], {isShadow:true, isBsWidth: true});
+        let right = Math.max(this.cardItemShadowWidth,this.bodyPadding.right);
+        let left = Math.max(this.cardItemShadowWidth,this.bodyPadding.left);
+        this.itemTop = Math.max(this.cardItemShadowWidth,this.bodyPadding.top);
+        this.itemBottom = Math.max(this.cardItemShadowWidth,this.bodyPadding.bottom);
+        if(this.cardItemShadowWidth === 0) {
+          right = 0; left = 0;
+          this.itemTop = 0;
+          this.itemBottom = 0;
+        }
+
         this.cusStyle = {
           'item':{
             'margin-bottom': `${cardItemSpace}rpx`,
@@ -641,6 +440,8 @@
             'border': cardItemBorder,
             'backgroundColor': cardItemBgColor,
             'padding': this.getMarginAndPadding(itemPadding, 0),
+            'margin-right': `${right}rpx`,
+            'margin-left': `${left}rpx`
           },
           'image':{
             'border-radius': itemImageRadius + 'rpx',
@@ -654,69 +455,341 @@
 
         //高级
         this.codePath = gCPVal(container, 'codePath', { value: "" }).value;
-        this.cashierPath = gCPVal(container, 'cashierPath', { value: "" }).value;
-        this.buyTicketPath = gCPVal(container, 'buyTicketPath', { value: "" }).value;
-        this.codeAfterPath = gCPVal(container, 'codeAfterPath', { value: "" }).value;
-        this.hdSelfPath = gCPVal(container, 'hdSelfPath', { value: "" }).value;
-        this.travelfPath = gCPVal(container, 'travelfPath', { value: "" }).value;
+        this.detailPath = gCPVal(container, 'detailPath', { value: "" }).value;
 
         //关闭显示附近门店
         if(this.showOftenTab === 'N')  this.tab = 'nearby';
+        this.initMapStatus = true;
 
       },
-      //==点击事件===========
-      handleToEvent({item,type}) {
-        let parmas = [];
-        let url = ''
-        if(item.resource_shop_id) parmas.push(`resource_shop_id=${item.resource_shop_id}`);
-        if(item.brand_id) parmas.push(`brand_id=${item.brand_id}`);
-        if(item.consume_mode) parmas.push(`consume_mode=${item.consume_mode.join(',')}`);
-        if(item.shop_id) parmas.push(`shop_id=${item.shop_id}`);
-
-        //详情增加扩张参数
-        if(item.exts_params && type === 'DL'){
-          parmas.push(`exts_params=${item.exts_params}`);
-          parmas.push(`resource_shop=${Base64.encodeURI(JSON.stringify({shop_id: item.shop_id,resource_shop_id: item.resource_shop_id }))}`);
+
+
+      //==map===========
+      // #ifdef MP-WEIXIN
+      /**
+       * @description 火星转百度坐标
+       * @param lng
+       * @param lat
+       * @returns {{latitude: *, longitude: *}}
+       */
+      gcj02toBaidu({longitude, latitude}) {
+        let x_PI = 3.14159265358979324 * 3000.0 / 180.0;
+        let PI = 3.1415926535897932384626;
+        let a = 6378245.0;
+        let ee = 0.00669342162296594323;
+        latitude = +latitude;
+        longitude = +longitude;
+        let z = Math.sqrt(longitude * longitude + latitude * latitude) + 0.00002 * Math.sin(latitude * x_PI);
+        let theta = Math.atan2(latitude, longitude) + 0.000003 * Math.cos(longitude * x_PI);
+        let bd_lng = z * Math.cos(theta) + 0.0065;
+        let bd_lat = z * Math.sin(theta) + 0.006;
+        return {longitude: bd_lng, latitude:bd_lat}
+      },
+
+      handleWXLocation(){
+        this.localImage = '';
+        this.showMarkerId = '';
+        this.showLocation = true;
+        this.WeiXinMap.moveToLocation({
+          success:(res)=>{
+            this.showLocation = false;
+          },
+          fail:()=>{}
+        })
+      },
+
+      getMYWeiXinPoint(){
+        const myPoint = this.$xdUniHelper.cloneDeep(this.mapCenter);
+        return {
+          platform: "MP",
+          longitude:  myPoint.longitude,
+          latitude:  myPoint.latitude,
+          lng: myPoint.longitude,
+          lat: myPoint.latitude,
+          id: 1999999999,
+          width: 30,
+          height: 30,
+          iconPath:'https://img.jufubao.cn/common/local.png?x-oss-process=style/size3',
+          mpaKey: this.$xdUniHelper.randomChar(20)
         }
+      },
 
-        //在线选择,电子码传惨处理
-        if(['SEAT','CODE'].includes(type)) parmas = [`cinema_id=${item.resource_shop_id}`]
-        if(['TRAVEL'].includes(type)) parmas = [`shop_id=${item.resource_shop_id}`]
-
-        //点击详情地址
-        if(type === 'DL') {
-          //有回调地址处理
-          if(this.isCallback) {
-            parmas = []
-            if(item.resource_shop_id) parmas.push(`resource_shop_id=${item.resource_shop_id}`);
-            if(!this.$xdUniHelper.isEmpty(this.callbackParams)) {
-              Object.keys(this.callbackParams).map(it=>{
-                parmas.push(`${it}=${this.callbackParams[it]}`);
-              })
+      setWeiXinMarkerList(list){
+        let location = [this.getMYWeiXinPoint()];
+        if(this.isMoved) location = []
+        this.marketList = location.concat(list.map(item => {
+          let point = this.baiduTogcj(item.longitude, item.latitude);
+          return {
+            platform: "MP",
+            longitude: point[0],
+            latitude: point[1],
+            lng: item.longitude,
+            lat: item.latitude,
+            id: item.resource_shop_id,
+            title: item.resource_shop_name,
+            width: 30,
+            height: 30,
+            iconPath: item.shop_icon,
+            mpaKey: this.$xdUniHelper.randomChar(20),
+            customCallout: {
+              anchorX: 0.5,
+              anchorY: 0.5,
+              display: 'ALWAYS',
             }
-            this.$xdUniHelper.redirectTo({
-              url: this.isCallback + `?${parmas.join('&')}`
-            },false,true)
-            return
           }
+        }))
+      },
+
+      handleMarketTap(e){
+        this.showMarkerId = e.markerId;
+        this.resource_shop_id = e.markerId;
+        setTimeout(()=>{
+          this.intoViewResourceShopId = `scroll-${e.markerId}`;
+        },50)
+      },
+
+      // #endif
+
+      // #ifdef H5
+      handleH5Init(){
+        this.getNearbyShop();
+      },
+
+      handleShowMarker(item,status){
+        if(status) {
+          this.localImage = '';
+          this.resource_shop_id = item.id;
+          setTimeout(()=>{
+            this.intoViewResourceShopId = `scroll-${item.id}`;
+          },50)
+
+        }
+        else  this.localImage = getServiceUrl('/common/localdone.png');
+      },
+      // #endif
+
+
+      handleRegionChange(e){
+        //重新定位
+        if(['location','update'].includes(e.causedBy)){
+          this.localImage = '';
+          if(e.type === 'end') {
+            // #ifdef H5
+            this.changeLocation = this.$xdUniHelper.cloneDeep(e.detail.point);
+            // #endif
+            // #ifdef MP-WEIXIN
+            this.WeiXinMap.addMarkers({markers:[this.getMYWeiXinPoint()]});
+            if(!this.onLocationStatus) {
+              this.onLocationStatus = true;
+            }
+            this.changeLocation = this.gcj02toBaidu(e.detail.centerLocation ||e.detail.point);
+            // #endif
+
+            this.clearList();
+            this.getNearbyShop();
+          }
+          return
+        }
+
+        //拖拽与缩放操作开始
+        // #ifdef MP-WEIXIN
+        this.WeiXinMap.removeMarkers({markerIds:[1999999999]})
+        // #endif
+        if(e.type === 'begin') this.localImage = getServiceUrl('/common/localmove.png?v=1');
+
+        //拖拽与缩放操作结束
+        else if(e.type === 'end') {
+          this.isMoved = true;
+          this.localImage = getServiceUrl('/common/localdone.png');
+          // #ifdef H5
+          this.changeLocation = this.$xdUniHelper.cloneDeep(e.detail.point);
+          // #endif
+          // #ifdef MP-WEIXIN
+          this.changeLocation = this.gcj02toBaidu(e.detail.centerLocation ||e.detail.point);
+          // #endif
+
+          this.clearList();
+          this.getNearbyShop();
+        }
+      },
+
+      isEmptySetMapCenter(){
+        if(this.stateLocation.latitude && this.stateLocation.longitude) {
+          // #ifdef H5
+          this.mapCenter = {
+            lng: this.stateLocation.longitude,
+            lat: this.stateLocation.latitude
+          }
+          // #endif
+          // #ifdef MP-WEIXIN
+          let [longitude,latitude] = this.baiduTogcj(this.stateLocation.longitude,this.stateLocation.latitude);
+          this.mapCenter = {longitude,latitude};
+          this.$nextTick(()=>{
+            this.WeiXinMap = uni.createMapContext('WeiXinMap', this);
+          })
+          // #endif
+          this.onLocationStatus = true;
+        }
+        else {
+          this.mpLocationFn =  'getFuzzyLocation';
+          if(this.$configProject['privacy_interface_list']) {
+            this.$configProject['privacy_interface_list'].map(item=>{
+              if(item['api_name'] === 'wx.getLocation') {
+                this.mpLocationFn = 'getLocation';
+              }
+            })
+          }
+          // #ifdef MP-WEIXIN
+          wx[this.mpLocationFn]({
+            type:'wgs84',
+            success:({latitude,longitude})=>{
+              this.mapCenter = {latitude,longitude};
+              this.$nextTick(()=>{
+                this.WeiXinMap = uni.createMapContext('WeiXinMap', this);
+              })
+              this.onLocationStatus = true;
+            }
+          })
+          // #endif
+        }
+      },
 
-          //其他情况
-          url = this.codePath;
+      clearList(){
+        // #ifdef MP-WEIXIN
+        if(this.nearbyShopList && this.nearbyShopList.length > 0) {
+          this.WeiXinMap.removeMarkers({markerIds:[this.nearbyShopList.map(item => item.resource_shop_id)]});
+        }
+        // #endif
+        this.page_token = '1';
+        this.nearbyShopList = null;
+        this.intoViewResourceShopId = '';
+        this.marketList = [];
+      },
+      //==map===========
+
+      getParams(){
+        let latitude = '', longitude = '';
+        console.log('handleRegionChange',this.stateLocation, this.changeLocation);
+        if(this.stateLocation && !this.$xdUniHelper.isEmpty(this.stateLocation)) {
+          if(this.stateLocation.longitude) longitude = this.stateLocation.longitude + '';
+          if(this.stateLocation.latitude) latitude = this.stateLocation.latitude + '';
+        }
+        if(this.changeLocation && !this.$xdUniHelper.isEmpty(this.changeLocation)) {
+          if(this.changeLocation.longitude) longitude = this.changeLocation.longitude + '';
+          if(this.changeLocation.latitude) latitude = this.changeLocation.latitude + '';
+        }
+        let params = {
+          latitude,
+          longitude,
+          page_size: 20,
+          page_token: this.page_token + '',
+          keyword: this.keyword,
+          xnamespace: this.xnamespace,
+          consume_mode: this.serverType.join(','),
         }
+        if(this.brand_id) params['brand_ids'] = this.brand_id;
+        if(this.keyword) params['keyword'] = this.keyword
+        return params
+      },
+
+      getNearbyShop() {
+        let data = {
+          city_code: this.stateCity.city_code,
+          ...this.getParams()
+        }
+        this.$xdShowLoading({});
+
+        jfbRootExec("getNearbyVipShopList", {
+          vm: this,
+          data: data
+        }).then(res => {
+
+          let list = res.list.map(item => {
+            item.shop_icon = getServiceUrl(item.shop_icon);
+            item['key'] = this.$xdUniHelper.randomChar(20);
+            return item
+          });
+
+          let nearbyShopList = [];
+          if(this.page_token === '1') nearbyShopList = this.$xdUniHelper.cloneDeep(list);
+          else nearbyShopList = this.$xdUniHelper.cloneDeep(this.nearbyShopList).concat(list);
+
+          //设置标签
+          this.setMarketList(nearbyShopList);
+
+          this.nearbyShopList = this.$xdUniHelper.cloneDeep(nearbyShopList);
+
+          this.hasNext = res.next_page_token !== "";
+          this.next_page_token = res.next_page_token;
+
+          setTimeout(()=>{
+            console.log('setMarketList.setTimeout',nearbyShopList);
+            this.intoViewResourceShopId = `scroll-${this.resource_shop_id}`
+          },200);
 
-        //支持核销
-        if(type === 'SELL')  url = this.cashierPath;
-        //在线选择
-        if(type === 'SEAT')  url = this.buyTicketPath;
-        //电子码
-        if(type === 'CODE')  url = this.codeAfterPath;
-        //小时达
-        if(type === 'HDSELF')  url = this.hdSelfPath;
-        //旅游购票
-        if(type === 'TRAVEL')  url = this.travelfPath;
+          console.log('setMarketList.getNearbyVipShopList',nearbyShopList);
 
-        if(!url) throw new Error(`${type} => 未设置访问地址`);
+          this.$xdHideLoading();
+        }).catch(err=>{
+          this.$xdHideLoading();
+          console.log(err)
+          //this.nearbyShopList = this.$xdUniHelper.cloneDeep(this.nearbyShopList).concat([]);
+          //this.setMarketList(this.nearbyShopList);
+        })
+      },
+      setMarketList(list){
+        console.log('setMarketList',list);
+        // #ifdef H5
+        this.marketList = list.map(item => {
+          return {
+            platform: "H5",
+            lng: item.longitude,
+            lat: item.latitude,
+            address: item.address,
+            icon: {
+              url: item.shop_icon,
+              size: {width: 30, height: 30},
+              opts: {imageSize: {width: 30, height: 30}}
+            },
+            title: item.resource_shop_name,
+            id: item.resource_shop_id,
+          }
+        })
+        // #endif
+        // #ifdef MP-WEIXIN
+        this.setWeiXinMarkerList(list);
+        // #endif
+      },
+      switchMapExtend(isExtend){
+        this.mapIsExtend = isExtend;
+      },
+
+
+
+      //==点击事件===========
+      handleWxToEvent(e){
+        this.handleToEvent({resource_shop_id: e.detail.markerId},'shop');
+      },
+      handleBaiduToEvent({item}){
+        this.handleToEvent({resource_shop_id: item.id},'shop');
+      },
+      /**
+       * @description
+       * @param item
+       * @param type detail|shop
+       */
+      handleToEvent(item,type) {
+        let parmas = [];
+        let url = ''
+        if(item['resource_shop_id'])  parmas.push(`resource_shop_id=${item['resource_shop_id']}`)
+
+        //去门店
+        if(type === 'shop') url = this.codePath;
 
+        //去详情
+        if(type === 'detail')  url = this.detailPath;
+
+        if(!url) throw new Error(`${type} => 未设置访问地址，参数:${parmas.join('&')}`);
 
         //预览模式
         if(this.$configProject['isPreview']) {
@@ -729,31 +802,21 @@
           url: `${url}?${parmas.join('&')}`
         })
       },
-
       //==点击事件===========
 
+
       onJfbScroll(options) {
 
       },
-      onJfbReachBottom(options) {
-        // if (this.hasNext) {
-        //   this.page_token = this.next_page_token;
-        //   if (this.tab === 'nearby') {
-        //     this.getNearbyShop()
-        //   } else {
-        //     this.getOftenShop()
-        //   }
-        // }
-      },
+
       onJfbCustomEvent({ action, data }) {
         if (action === 'baseHeader@search') {
           this.keyword = data;
-          this.page_token = '1';
-          if (this.tab === 'nearby') {
-            this.getNearbyShop()
-          } else {
-            this.getOftenShop()
-          }
+          this.clearList();
+          this.getNearbyShop()
+        }
+        if(action === 'baseHeader@focus'){
+          this.switchMapExtend(false)
         }
       },
     }
@@ -771,11 +834,11 @@
       .shop_map {
         background: #fff;
         font-size: unit(28, rpx);
-
         .mpa_wrap {
-          height: 400rpx;
+          height: 500rpx;
           background: #fff;
           transition: all .3s ease-in-out;
+          position: relative;
 
           /deep/ .xd-baidu__content {
             position: relative;
@@ -784,6 +847,25 @@
           }
           &.close{
             height: 0;
+            position: relative;
+            z-index: 0;
+            padding: 0;
+            overflow: hidden;
+          }
+        }
+
+        .map-center {
+          position: absolute;
+          width: 90rpx;
+          height: 90rpx;
+          top: 49%;
+          left: 50%;
+          transform: translate(-50%,-50%);
+          z-index: 3500;
+
+          & image {
+            width: 100%;
+            height: 100%;
           }
         }
 
@@ -792,7 +874,10 @@
           line-height: unit(30, rpx);
           padding-bottom: unit(10, rpx);
         }
+
         .map_expend{
+          position: relative;
+          z-index: 1;
           display: flex;
           justify-content: center;
           align-items: center;
@@ -801,40 +886,154 @@
         }
       }
 
-      .shop_tabs {
-        display: flex;
-        background: #fff;
-        border-bottom: 1px solid #f8f8f8;
+      .shop_list {
+        flex: 1;
+        .scroll_y{
+          height: 100%;
+        }
 
+        &-ske {
+          &-title {
+            display: flex;
+            justify-content: space-between;
+            align-content: center;
+            margin-bottom: 16rpx;
 
-        .tab_item {
-          font-size: 32rpx;
-          color: #333;
-          font-weight: 400;
-          padding: 0 24rpx;
-          position: relative;
-          border-radius: 60rpx;
-
-          & .lineX {
-            position: absolute;
-            bottom: 14rpx;
-            height: 6rpx;
-            background-color: var(--main-color);
-            border-radius: 6rpx;
-            width: 64rpx;
-            left: 50%;
-            transform: translateX(-50%);
+            & > view:first-child {
+              .skeleton-item(100%, 46rpx);
+            }
+
+            & > view:last-child {
+              flex-shrink: 0;
+              .skeleton-item(120rpx, 30rpx);
+              margin-left: 32rpx;
+            }
+          }
+          &-address {
+            display: flex;
+            justify-content: space-between;
+            align-content: center;
+            margin-bottom: 16rpx;
+
+            & > view:first-child {
+              .skeleton-item(70%, 36rpx);
+            }
+
+            & > view:last-child {
+              flex-shrink: 0;
+              .skeleton-item(100rpx, 28rpx);
+            }
+          }
+          &-time {
+            .skeleton-item(30%, 28rpx);
           }
         }
-      }
 
-      .shop_list {
-        flex: 1;
-        .scroll_y{
-          height: 100%;
+        &-item {
+          box-sizing: border-box;
+          //&:last-child {
+          //  margin-bottom: 0!important;
+          //}
+          &-act {
+            background-color: var(--main-alpha-color)!important;
+            border:1px solid var(--main-alpha5-color)!important;
+          }
+
+          &-title {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 16rpx;
+            & > .title {
+              width: calc(100% - 140rpx);
+              flex-shrink: 0;
+              display: flex;
+              justify-content: flex-start;
+              align-items: center;
+              font-size: 32rpx;
+              line-height: 44rpx;
+              color: #333;
+              font-weight: 400;
+
+              & > view:first-child {
+                .uni-one-cut(44);
+
+              }
+
+              & > view:nth-child(2) {
+                flex-shrink: 0;
+                line-height: 44rpx;
+                font-size: 24rpx;
+                border-radius: 8rpx;
+                border:1px solid var(--main-alpha5-color)!important;
+                padding: 0 16rpx;
+                margin-left: 16rpx;
+                color: var(--main-color);
+              }
+            }
+
+            & > view:last-child {
+              flex-shrink: 0;
+              margin-left: 48rpx;
+              font-size: 24rpx;
+              color: #999;
+              display: flex;
+              align-items: center;
+              justify-content: flex-end;
+              & > text {
+                margin-right: 10rpx;
+              }
+            }
+          }
+
+          & > .address {
+            color: #999;
+            font-size: 24rpx;
+            line-height: 36rpx;
+            margin-bottom: 16rpx;
+            display: flex;
+            justify-content: flex-start;
+            align-content: center;
+
+            & > view:first-child {
+              .uni-one-cut(36);
+              flex: 1;
+
+            }
+            & > view:nth-child(2) {
+              flex-shrink: 0;
+              margin-left: 32rpx;
+            }
+          }
+
+          & > .openTime {
+            color: #999;
+            font-size: 24rpx;
+            line-height: 36rpx;
+          }
         }
       }
 
+      .callout-text {
+        display: flex;
+        justify-content: flex-start;
+        align-items: flex-start;
+        flex-flow: wrap;
+        line-height: 36rpx;
+      }
+
+    }
+
+    .weiXinLocation {
+      right: 20rpx;
+      bottom: 20rpx;
+      font-size: 20rpx;
+      position: absolute;
+      width: 60rpx;
+      height: 60rpx;
+      background-color: #fff;
+      border: 1px solid #ccc;
+      border-radius: 8rpx;
     }
   }
 </style>