gxd-uni-library-editx 1.0.0

package/src/components/XdCityShow/XdCityShow.vue

@@ -0,0 +1,354 @@
+<template>
+  <view class="xd-city">
+    <view class="xd-city__name" v-if="cityInfo && show">
+      <slot :item="cityInfo">
+        <view class="xd-city__name-default" @click="handelChange" :style="{color: color}">
+          <view class="xd-city__name-icon">
+            <xd-font-icon icon="iconshouhuodizhi" size="28"></xd-font-icon>
+          </view>
+          <view class="xd-city__name-title">{{getCityName}}</view>
+        </view>
+      </slot>
+    </view>
+    <view>
+      <!-- #ifdef H5 -->
+      <xd-city-location
+        v-if="cityLocationType=== 'baidu'"
+        @done="handleDone"
+        baidu
+      ></xd-city-location>
+      <xd-city-location
+        v-if="cityLocationType=== 'weixinSDK'"
+        @done="handleDone"
+        weixin
+        @getWeixinAppInfo="handleGetWeixinAppInfo"
+      ></xd-city-location>
+      <!-- #endif -->
+      <!-- #ifdef MP-WEIXIN -->
+      <xd-city-location @done="handleDone"></xd-city-location>
+      <!-- #endif -->
+    </view>
+  </view>
+
+</template>
+
+<script>
+  import testData from "@/components/XdCity/testData";
+  import storage from "@/common/storage";
+  import XdCityLocation from "@/components/XdCityLocation/XdCityLocation";
+  import XdFontIcon from "@/components/XdFontIcon/XdFontIcon";
+
+  /**
+   * XdCityShow
+   * @description 用于页面定位显示
+   * @property {Boolean} cityLocationType          使用定位类型 H5（baidu, weixinSDK），微信小程序不需要此参数
+   * @property {Boolean} color                     默认定位名称与icon显示颜色  默认：#fff
+   * @property {String}  appCity                   定位失败使用后台返回默认城市 默认：null
+   * @property {String}  code                      自定义默认用户选中城市code
+   * @property {Boolean} show                      是否显示定位城市   默认：true
+
+   * @event {Function} getWeixinAppInfo  使用微信定位使用需要获取
+   * @event {Function} done  定位成功事件
+   *
+   * @solt 支持默认插槽 传值为：item 当前定位城市
+   */
+
+
+  export default {
+    name: "XdCityShow",
+    components: {
+      XdFontIcon,
+      XdCityLocation
+    },
+
+    props:{
+      cityLocationType: {
+        type: String,
+        default: 'baidu', //baidu, weixinSDK
+      },
+      color: {
+        type: String,
+        default: '#fff',
+      },
+
+      appCity: {
+        type: Object|null,
+        default: null,
+      },
+
+      code: {
+        type: String| null,
+        default: null,
+      },
+
+      show: {
+        type: Boolean,
+        default: true,
+      }
+    },
+
+    data(){
+      return {
+        cityInfo: null,
+
+        threeLocation: null,
+        allLlist: null,
+
+        saveKey: 'xd_user_current_access_city', //用户选中城市存储key
+      }
+    },
+
+    computed:{
+      getCityName(){
+        if(this.cityInfo === null) return  '';
+        else return this.$xdUniHelper.cutStringLen(this.cityInfo.city_name, 6)
+      }
+    },
+
+
+    created(){
+      this.$xdRoot.$on('selectCity', (city)=>{
+        console.log('$xdRoot.selectCity', city);
+        this.init();
+      });
+    },
+
+    methods:{
+      init(){
+        //缓存中获取用户定位信息
+        if (storage.get(this.saveKey)) {
+          this.cityInfo = storage.get(this.saveKey);
+          this.getCity();
+        } else {
+          this.getCity();
+        }
+      },
+
+      /**
+       * @description 检查当前定位城市信息是否在数据列表中
+       * @param cityName
+       * @param provinceName
+       * @returns {*}
+       */
+      checkCity(provinceName, cityName) {
+        let temp = null;
+
+        let checkfullcity = (full)=>{
+          if(full && (full.indexOf(cityName) ===0 || cityName.indexOf(full) === 0)) {
+            return true
+          }
+          return false;
+        };
+
+        this.allLlist.map((item) => {
+          if (provinceName === item['province_name']
+            || provinceName.indexOf(item['province_name']) === 0
+            || item['province_name'].indexOf(provinceName) === 0
+          ) {
+
+            if (item['city_name'].indexOf(cityName) === 0
+              || cityName.indexOf(item['city_name']) === 0
+              || checkfullcity(item['city_full_name'])
+            ){
+              temp = item;
+            }
+          }
+        });
+        return temp;
+      },
+
+      handleDone(location) {
+        console.log('location', location);
+        this.threeLocation = location;
+        if (typeof getApp().saveLogs === 'function' && this.$settings.isDebug) {
+          getApp().saveLogs({
+            location: this.threeLocation,
+            status: 'Done.ok',
+            pos: 'XdCityShow'
+          }, 'info');
+        }
+
+        this.init();
+      },
+
+      /**
+       * @获取城市信息
+       */
+      getCity(){
+        this.$emit('getCityList', {location: this.threeLocation},
+          /**
+           * @description 城市列表
+           * @param cityList
+           */
+          (cityList) => {
+            if (cityList === null) {
+              this.listInfo = this.$xdUniHelper.cloneDeep(testData.data)
+            } else {
+              this.listInfo = this.$xdUniHelper.cloneDeep(cityList)
+            }
+            this.toList();
+          }
+        )
+      },
+
+      toList() {
+        let allLlist = [];
+        this.listInfo.city_nav.map((item) => {
+          item.cities.map((itm) => {
+            allLlist.push(itm);
+          })
+        });
+        this.allLlist  = allLlist;
+        this.handleSetFn();
+      },
+
+      /**
+       * @description 设置城市相关操作方法
+       */
+      handleSetFn() {
+        getApp().globalData.$XdCity = {
+
+          /**
+           * @description 通过
+           */
+          getCityForCode : (code)=>{
+            let city = null;
+            this.allLlist.map((item) => {
+              if (item.city_id == code) {
+                city = item;
+              }
+            })
+            return city;
+          },
+
+          /**
+           * @description 获取第三方定位城市信息
+           */
+          getLocation:()=>{
+            return this.threeLocation;
+          },
+
+          /***
+           * @description 获取用户选中的城市
+           */
+          getSelectedCity:()=>{
+            return storage.get(this.saveKey);
+          },
+
+          /**
+           * @description 获取当前用户定位城市
+           * @param appCity 后台返回默认城市
+           */
+          getCurrentCity:(appCity = null)=>{
+
+            //用户自己选择城市
+            let locationData = storage.get(this.saveKey);
+            if (locationData){
+              console.log('getCurrentCity.用户自己选择城市')
+              return locationData;
+            }
+
+            //定位城市
+            if (this.threeLocation && this.threeLocation['address']) {
+              let cityName = this.threeLocation['address']['city'];
+              let provinceName = this.threeLocation['address']['province'];
+              let city = this.checkCity(provinceName, cityName);
+
+              //无法匹配处理
+              if(city === null) {
+                if (typeof getApp().saveLogs === 'function') {
+                  getApp().saveLogs({
+                    threeLocation: this.threeLocation,
+                    cityInfo: city,
+                    status: 'match.cityList.fail',
+                    pos: 'XdCityShow'
+                  }, 'info');
+                }
+                return getApp().globalData.$xd.brandInfo.defaultCity || this.$settings.defaultCity
+              }
+
+              return city;
+            }
+
+            //定位失败，App有城市信息，使用app所在城市信息
+            if (this.appCity !== null) {
+              console.log('getCurrentCity.app所在城市信息');
+              return this.appCity;
+            }
+
+            //定位失败并且APP无城市信息(默认使用北京)
+            console.log('getCurrentCity.默认使用北京', getApp().globalData.$xd);
+            let city = this.$settings.defaultCity;
+            if(getApp().globalData.$xd
+              && getApp().globalData.$xd.brandInfo
+              && getApp().globalData.$xd.brandInfo.defaultCity
+            ) {
+              city = getApp().globalData.$xd.brandInfo.defaultCity
+            }
+            return city;
+          }
+        };
+
+
+        //接收到城市Code，自动使用匹配code
+        if(this.code && getApp().globalData.$XdCity.getCityForCode(this.code)) {
+          this.cityInfo = getApp().globalData.$XdCity.getCityForCode(this.code);
+          this.$storage.set(this.saveKey, this.cityInfo, 24);
+
+          if (typeof getApp().saveLogs === 'function' && this.$settings.isDebug) {
+            getApp().saveLogs({
+              cityInfo: this.cityInfo,
+              status: 'init.ok.for.code',
+              pos: 'XdCityShow'
+            }, 'info');
+          }
+
+          this.$emit('done', this.cityInfo);
+          return;
+        }
+
+        this.cityInfo = getApp().globalData.$XdCity.getCurrentCity();
+        if (typeof getApp().saveLogs === 'function' && this.$settings.isDebug) {
+          getApp().saveLogs({
+            cityInfo: this.cityInfo,
+            status: 'init.ok.for.current',
+            pos: 'XdCityShow'
+          }, 'info');
+        }
+        this.$emit('done', this.cityInfo);
+      },
+
+      handelChange(){
+        this.$emit('onChange')
+      },
+
+      /**
+       * @description 获取AppInfo信息
+       */
+      handleGetWeixinAppInfo(resolve) {
+        this.$emit('getWeixinAppInfo',
+          (appInfo, jsApiList) => {
+            resolve(appInfo, jsApiList)
+          });
+      },
+    }
+
+  }
+</script>
+
+<style scoped lang="less">
+  .xd-city {
+    &__name {
+      &-default {
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+        font-size: @xd-font-size-base + 2;
+      }
+
+      &-icon {
+        margin-right: unit(6,rpx);
+      }
+    }
+  }
+</style>