gxd-uni-library-editx 1.0.0

package/src/components/XdCity/XdCity.vue

@@ -0,0 +1,620 @@
+<template>
+	<view class="xd-city-box">
+    <view class="xd-city" v-if="allCityList.length > 0">
+      <view class="xd-city__header"
+        :style="{
+          height: customBar + 'rpx',
+          top: top + 'px',
+        }"
+      >
+        <view>
+          <input
+            class="xd-city__header-input"
+            @confirm="doneInput"
+            type="text"
+            confirm-type="search"
+            :adjust-position="false"
+            @input="onInput"
+            placeholder="搜索城市"
+            v-model="searchValue"
+          />
+        </view>
+        <view class="" @tap="backPrevPage()">返回</view>
+      </view>
+      <view class="xd-city__header-box" :style="{height: customBar + 'rpx'}"></view>
+      <view class="xd-city__content" v-if="scrollHeight !== null">
+        <!--滚动区域-->
+        <scroll-view
+          scroll-y="true"
+          :scroll-into-view="scrollIntoId"
+          :style="scrollHeight"
+          @touchmove.stop.prevent
+        >
+          <!--top-->
+          <view v-if="!searchValue" id="hot">
+            <view class="app-position">
+              <view class="app-position-title grey flexa fsmall">当前定位</view>
+              <view class="app-position_city">
+                <view
+                  v-if="position"
+                  class="app-position_city_one"
+                  @tap="handleSelected(position)"
+                >{{position.city_name}}
+                </view>
+              </view>
+            </view>
+            <view class="app-position" v-if="cityCacheLocation.length > 0">
+              <view class="app-position-title grey flexa fsmall">最近访问</view>
+              <view class="app-position_city app-position_city_left">
+                <view
+                  class="app-position_city_one"
+                  v-for="(item,index) in cityCacheLocation"
+                  :key="index"
+                  @tap="handleSelected(item)">{{item.city_name}}
+                </view>
+              </view>
+            </view>
+            <view class="app-position" v-if="hotCityList.length > 0">
+              <view class="app-position-title grey flexa fsmall">热门城市</view>
+              <view class="app-position_city app-position_city_left">
+                <view
+                  class="app-position_city_one"
+                  v-for="(item,index) in hotCityList"
+                  :key="index"
+                  @tap="handleSelected(item)"
+                >{{item.city_name}}
+                </view>
+              </view>
+            </view>
+          </view>
+          <!--top-->
+          <!-- 城市列表 -->
+          <view
+            class="app-city"
+            v-if="searchValue === ''"
+            v-for="(item) in cityList"
+            :id="item.idx" :key="item.idx"
+          >
+            <view class="app-city-header bold">{{ item.idx }}</view>
+            <view class="app-city-item" v-for="(city, i) in item['cities']" :key="i" @tap="handleSelected(city)">
+              <text class="city">{{ city.city_name }}</text>
+            </view>
+          </view>
+          <!-- 搜索结果 -->
+          <view class="app-city-item" v-for="(item, index) in citySearchList" :key="index" @tap="handleSelected(item)">
+            <text class="city">{{ item.city_name }}</text>
+          </view>
+          <!-- 搜索结果 结束-->
+          <view class="placeholder footer"></view>
+        </scroll-view>
+        <!--滚动区域 结束-->
+        <!-- 右侧字母 -->
+        <view
+          class="letters"
+          id="app-letters-list"
+          v-if="searchValue == ''"
+          @touchstart="touchStart"
+          @touchmove.stop.prevent="touchMove"
+          @touchend="touchEnd"
+        >
+          <view class="fmin" v-for="item in cityLetter" :key="item.idx">{{ item.idx }}</view>
+        </view>
+        <!-- 右侧字母 结束 -->
+        <!-- 选中之后字母 -->
+        <view class="mask" v-if="touchmove">
+          <view class="mask-r bold">{{scrollIntoId}}</view>
+        </view>
+        <!-- 选中之后字母 结束-->
+      </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>
+</template>
+
+<script>
+  import testData from "@/components/XdCity/testData";
+  import storage from "@/common/storage";
+  import helper from "@/utils/helper";
+  import XdCityLocation from "@/components/XdCityLocation/XdCityLocation";
+
+  /**
+   * XdCity
+   * @description 用户选中城市页面插件
+   * @property {Boolean} cityLocationType          使用定位类型 H5（baidu, weixinSDK），微信小程序不需要此参数
+
+   * @event {Function} getWeixinAppInfo  使用微信定位使用需要获取
+   * @event {Function} done  定位成功事件
+   */
+
+	export default {
+    name: 'XdCity',
+    components:{
+      XdCityLocation,
+    },
+    props:{
+      cityLocationType: {
+        type: String,
+        default: 'baidu', //baidu, weixinSDK
+      },
+
+      callbackUrlKey: {
+        type: String,
+        default: 'xdCityRedirect',
+      },
+
+      top: {
+        type: Number,
+        default: 0 //px
+      }
+
+    },
+		data() {
+			return {
+			  listInfo: null, //城市列表信息
+        allCityList: [], //城市一维数组列表
+        threeLocation: null, //第三方定位信息
+
+        hotCityList: [], //热门城市列表
+        cityList: null, //城市列表
+        cityLetter: [],//城市字母排序
+
+        customBar: 90, //搜索区域高度
+        scrollHeight: null, //内容区域高度
+        callbackUrl: null, //访问回调地址
+
+
+
+        //定位信息
+        position: {
+          city_name: '定位中..', city_id: -1
+        }, //定位获取的位置
+
+        //测试定位城市
+        testLocationItem: {
+          "city_id": "110100",
+          "city_name": "北京市",
+          "province_name": "北京市",
+          "city_pinyin": "",
+          "py": "",
+          "letter": "B"
+        },
+
+        tId: null,
+        showMask: false,
+        winHeight: 0,
+        itemHeight: 0,
+        winOffsetY: 0,
+        touchmove: false,
+
+        //搜索
+        searchValue: '', //搜索关键词
+        citySearchList: [], //搜索接口列表显示
+        scrollIntoId: '', //字母滚动当前关键字母
+
+        //城市信息
+        cityLastMaxLen: 5, //保存最近访问记录最大数据
+        cityLastSaveKey: 'xd_user_last_access_cities',
+        cityCacheLocation: [], //最近访问列表记录
+        saveKey: 'xd_user_current_access_city', //用户选中城市存储key
+
+			}
+		},
+
+    mounted(){
+      this.$nextTick(()=>{
+        this.scrollHeight = `height:calc(100vh - ${this.customBar * this.$rpxNum}px);`
+        console.log('scrollHeight', this.scrollHeight)
+        if (helper.getParmater(this.callbackUrlKey)) {
+          this.callbackUrl = decodeURIComponent(helper.getParmater(this.callbackUrlKey));
+        }
+
+        //获取历史记录
+        if (storage.get(this.cityLastSaveKey)) {
+          this.cityCacheLocation = storage.get(this.cityLastSaveKey);
+        }
+      });
+    },
+		methods: {
+      handleDone(location){
+        console.log('location', location);
+        this.threeLocation = location;
+        this.init();
+      },
+
+      init(){
+        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.hotCityList = this.listInfo.hot_city;
+        this.allCityList  = allLlist;
+        this.cityList = this.listInfo.city_nav;
+        this.cityLetter = this.listInfo.classify_nav;
+
+        console.log('toList', this.allCityList, this.hotCityList);
+        this.getLocationCityName();
+        this.setAppLettersList();
+      },
+
+
+      /**
+       * @description 检查当前定位城市信息是否在数据列表中
+       * @param cityName
+       * @param provinceName
+       * @returns {*}
+       */
+      checkCity(provinceName , cityName) {
+        let temp = null;
+        this.allCityList.map((item)=>{
+          if (provinceName === item['province_name'] || provinceName.indexOf(item['province_name']) === 0) {
+            if (item['city_name'].indexOf(cityName) === 0
+              || cityName.indexOf(item['city_name']) === 0
+            ) {
+              temp = item;
+            }
+          }
+        });
+        return temp;
+      },
+
+      /**
+       * @description 获取AppInfo信息
+       */
+      handleGetWeixinAppInfo(resolve) {
+        this.$emit('getWeixinAppInfo',
+          (appInfo, jsApiList) => {
+            resolve(appInfo, jsApiList)
+          });
+      },
+
+      /***
+       * @description  获取第三方定位信息
+       */
+      getLocationCityName(){
+        // #ifdef MP-WEIXIN
+        this.$emit('getCityName', {location: this.threeLocation}, (city) => {
+
+        });
+        // #endif
+        // #ifdef H5
+        let city = {city_name: '定位失败', city_id: -2};
+        if (this.threeLocation && this.threeLocation.address) {
+          if(this.threeLocation.address['province'] && this.threeLocation.address['city']) {
+            city = this.checkCity(this.threeLocation.address['province'], this.threeLocation.address['city']);
+            if (!city) city = {city_name: '定位失败', city_id: -2}
+          }
+        }
+        this.position = city;
+        // #endif
+      },
+
+      /**
+       *  @description 返回上一页面操作
+       */
+      backPrevPage(item){
+        this.doneInput();
+        setTimeout(()=>{
+          let routes = this.$xdUniHelper.getCurrentPages();
+          if (item) {
+            storage.set(this.saveKey, item, 24);
+            console.log('$xdRoot.selectCity', item);
+            this.$xdRoot.$emit('selectCity', item);
+          }
+
+          if (this.callbackUrl && routes['path'] !== this.callbackUrl) {
+            this.$xdUniHelper.redirectTo({
+              url: `${this.callbackUrl}`
+            })
+          } else {
+            this.$xdUniHelper.navigateBack();
+          }
+        }, 400)
+
+			},
+
+      /**
+       * @description 初始化字母样式显示
+       */
+      setAppLettersList() {
+        this.$xdUniHelper.getEleInfo('#app-letters-list',this, (res)=>{
+          console.log('app-letters-list', res);
+        });
+
+        let handle = ()=>{
+          uni.createSelectorQuery()
+            .in(this)
+            .select('#app-letters-list')
+            .boundingClientRect()
+            .exec(ret => {
+              if(ret[0] === null) setTimeout(handle, 30);
+              else {
+                this.winOffsetY = ret[0].top;
+                this.winHeight = ret[0].height;
+                this.itemHeight = this.winHeight / this.cityList.length
+              }
+            })
+        };
+        handle();
+			},
+
+			touchStart(e) {
+				this.touchmove = true
+				let pageY = e.touches[0].pageY
+				let index = Math.floor((pageY - this.winOffsetY) / this.itemHeight)
+				if (this.cityList[index]) {
+					this.scrollIntoId = this.cityList[index].idx
+				}
+			},
+			touchMove(e) {
+				let pageY = e.touches[0].pageY
+				let index = Math.floor((pageY - this.winOffsetY) / this.itemHeight)
+				if (this.cityList[index] && this.cityList[index].idx === this.scrollIntoId) {
+					return false
+				}
+				if (this.cityList[index]) {
+					this.scrollIntoId = this.cityList[index].idx
+				}
+			},
+			touchEnd() {
+				this.touchmove = false
+				this.touchmoveIndex = -1
+			},
+
+			doneInput(){
+				uni.hideKeyboard()
+			},
+
+      /***
+       * @description 搜索城市
+       * @param keyword
+       * @returns {[]}
+       */
+      searchQuery(keyword) {
+				let res = [];
+        keyword = keyword.toUpperCase();
+
+				this.allCityList.map((item)=>{
+				  //匹配首字母
+				  if(item.city_pinyin && item.city_pinyin.toUpperCase().indexOf(keyword) !== -1){
+            res.push(item);
+          }
+
+          //匹配首字母
+          else if (item.py && item.py.toUpperCase().indexOf(keyword) !== -1) {
+            res.push(item);
+          }
+
+          //匹配单字母
+          else if(item.letter.toUpperCase() === keyword) {
+            res.push(item);
+
+          //匹配城市
+          }else if(item['city_name'].indexOf(keyword) !== -1) {
+            res.push(item);
+          }
+
+
+        });
+				return res
+			},
+
+      /**
+       * @description 输入事件
+       */
+			onInput(e) {
+        this.searchValue = e.target.value.trim();
+				if (this.searchValue !== '' && !this.$xdUniHelper.isEmpty(this.allCityList)) {
+					this.citySearchList = this.searchQuery(String(this.searchValue));
+				} else {
+					this.citySearchList = [];
+				}
+			},
+
+      /***
+       * @description 选择城市操作
+       * @param item
+       */
+      handleSelected(item) {
+        if(item.city_id === -1) {
+          return;
+        }
+
+        //在最近访问记录中无数据
+        if(!this.$xdUniHelper.isKeyInLists(this.cityCacheLocation, item['city_id'], 'city_id')){
+          this.cityCacheLocation.unshift(item)
+          this.searchValue = "";
+          this.cityCacheLocation = this.cityCacheLocation.slice(0, this.cityLastMaxLen);
+          storage.set(this.cityLastSaveKey, this.cityCacheLocation);
+        }
+        this.backPrevPage(item);
+			},
+		}
+	};
+</script>
+
+<style scoped lang="less">
+  .xd-city {
+    &__header {
+      position: fixed;
+      background: #eee;
+      left: 0;
+      top: 0;
+      right: 0;
+      z-index: 50;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 0 unit(20,rpx);
+
+      & > view:last-child {
+        font-size: @xd-font-size-base;
+        flex-shrink: 0;
+        margin-left: unit(20,rpx);
+      }
+
+      & > view:first-child {
+        flex: 1;
+        width: 0;
+      }
+
+      &-input {
+        width: 100%;
+        font-size: @xd-font-size-base;
+        height: unit(70, rpx);
+        max-height: unit(60, rpx);
+        border-radius: unit(30, rpx);
+        background-color: @xd-bg-color;
+        padding-left: unit(20, rpx);
+        padding-right: unit(20, rpx);
+        box-sizing: border-box;
+      }
+
+      &-box {
+        width: 100%;
+      }
+    }
+  }
+  .fsmall {font-size: @xd-font-size-base;}
+  .fmiddle {font-size: @xd-font-size-base + 2rpx;}
+	.blue {color: #007AFF;}
+	.bold{font-weight: 600;}
+	.flex{display: flex;justify-content: center;align-items: center;}
+	.mask {position: fixed;z-index: 3;top: 40%;left: 40%;}
+	.mask-r {height: unit(120,rpx);width: unit(120, rpx);border-radius: unit(60, rpx);display: flex;background: rgba(0, 0, 0, 0.5);backdrop-filter: blur(5px);justify-content: center;align-items: center;font-size: unit(40, rpx);color: #FFFFFF}
+	.content {height: 100%;width: 100%;background-color: @xd-bg-white;}
+  .title {font-size: unit(30,rpx);color: white;}
+  .grey {margin-bottom: unit(25, rpx);}
+
+  .app-header {
+    width: 100%;
+    position: relative;
+    z-index: 8;
+    background-color: @xd-bg-white;
+  }
+
+  .app-cannel {
+    width: unit(100, rpx);
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+	.app-input {
+		font-size: unit(26,rpx);
+		width: unit(610, rpx);
+		height: unit(60, rpx);
+		max-height: unit(60, rpx);
+		border-radius: unit(30, rpx);
+		background-color: @xd-bg-color;
+		padding-left: unit(20, rpx);
+		padding-right: unit(20, rpx);
+		box-sizing: border-box;
+	}
+
+  /**top**/
+  .app-position {
+    padding: unit(20, rpx) unit(20, rpx) 0;
+    box-sizing: border-box;
+
+    &-title {
+      border-bottom: 1px solid #e0e0e0;
+      padding-bottom: unit(20, rpx);
+      font-weight: bold;
+    }
+
+    &_city {
+      width: 100%;
+      box-sizing: border-box;
+      display: flex;
+      justify-content: space-between;
+
+      &_one {
+        height: unit(60,rpx);
+        color: #333;
+        background-color: #eee;
+        border-radius: unit(30, rpx);
+        font-size: unit(30, rpx);
+        padding: 0 unit(25, rpx);
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        margin: 0 unit(20, rpx) unit(20, rpx) 0;
+      }
+
+      &_left {
+        display: flex;
+        justify-content: flex-start;
+        flex-wrap: wrap;
+      }
+    }
+  }
+
+  /**城市列表**/
+  .app-city {
+
+    &-header {
+      font-size: @xd-font-size-lg;
+      padding-left: unit(30, rpx);
+      padding-top: unit(20, rpx);
+      box-sizing: border-box;
+      display: flex;
+      align-items: center;
+    }
+
+    &-item {
+      width: unit(670, rpx);
+      margin:0 auto 0 unit(20, rpx);
+      padding: unit(20, rpx) 0;
+      border-bottom-width: unit(1, rpx);
+      border-bottom-color: #e0e0e0;
+      border-bottom-style: solid;
+      display: flex;
+      align-items: center;
+
+      .city {
+        font-size: unit(30,rpx);
+        color:#333;
+        padding-left: unit(10, rpx);
+      }
+    }
+  }
+
+	.letters {
+		position: absolute;
+		right: 0;
+		width: unit(80, rpx);
+		color: @xd-text-color;
+		top: 15%;
+		text-align: center;
+		font-size: @xd-font-size-base;
+		font-weight: bold;
+
+	}
+
+</style>

package/src/components/XdCity/city.js

@@ -0,0 +1,93 @@
+'use strict';
+
+import storage from "@/common/storage";
+import helper from "@/utils/helper";
+const settings = require('./../../../settings');
+
+/**
+ * @description 检查当前定位城市信息是否在后台返回列表中
+ * @param cityList
+ * @param cityName
+ * @param provinceName
+ * @returns {*}
+ */
+export function checkCity(cityList, cityName, provinceName) {
+  console.log('checkCity',cityName, provinceName, cityList)
+  let temp = null;
+  Object.keys(cityList).map((key)=>{
+    let item = cityList[key];
+    //省份相同或者第一个字开始匹配
+    if(provinceName === item['province_name'] || provinceName.indexOf(item['province_name']) === 0) {
+      console.log(item['province_name'])
+      if(item['city_name'].indexOf(cityName) === 0
+        || cityName.indexOf(item['city_name']) === 0
+      ){
+        temp = item;
+      }
+    }
+  });
+  return temp;
+}
+
+/**
+ * @description 获取用户定位信息
+ * @param cityList {Object}  数据格式:{"142":{"city_id":"142","city_name":"石家庄市","province_name":"河北","city_pinyin":"","py":"","letter":"S"}}
+ * @param locationInfo
+ * @param appCity
+ * @returns {string|*|string}
+ */
+export function getCurrentCity(cityList, locationInfo, appCity = null) {
+  //用户自己选择城市
+  let locationData = storage.get(settings.userCityCurrentSaveKey);
+  if (locationData) return locationData;
+
+  //定位城市
+  if (locationInfo && locationInfo['address']) {
+    let cityName = locationInfo['address']['city'];
+    let provinceName = locationInfo['address']['province'];
+    locationData = checkCity(cityList, cityName, provinceName);
+    return locationData;
+  }
+
+  //定位失败，App有城市信息，使用app所在城市信息
+  if (appCity !== null) {
+    return appCity;
+  }
+
+  //定位失败并且APP无城市信息(默认使用北京)
+  return settings.defaultCity;
+}
+
+
+/**
+ * @description 获取城市信息，无定位城市信息跳指定页面或者首页
+ * @param $vm
+ * @param path 需要跳转的路径
+ * @returns {Promise<unknown>}
+ */
+export function getLocationCityInfo($vm, path = null) {
+  return new Promise((resolve)=>{
+    let cityData = storage.get(settings.userCityCurrentSaveKey);
+    let location = storage.get('App_Geolocation_Current_City');
+
+    //无当前用户选择信息或者无城市定位信息，直接跳指定页面或者首页
+    if(!cityData || !location) {
+      helper.navigateTo({
+        url: `${path ===null?$vm.$xdUniOptions['home']: path}?locationBack=true`,
+      })
+    }
+    else {
+      resolve({cityData, location});
+    }
+  });
+}
+
+/**
+ * @description 获取用户选中的城市
+ * @returns {string}
+ */
+export function getCacheCurrentCity() {
+  return storage.get(settings.userCityCurrentSaveKey);
+}
+
+