apply-clients 7.1.35 → 7.1.36-yuchuan-1

package/src/components/product/ApplyGuanXian/TabButton.vue

@@ -0,0 +1,157 @@
+<template>
+  <div class='flex foot_tabset1'>
+    <!-- Nav tabs -->
+    <ul class="nav nav-{{navStyle}}" role="tablist" style="margin-left: 1%;overflow: hidden">
+      <li style="margin: 5px"
+          :id="'vc-tabset-li-'+attach +'-'+$index"
+          v-for="r in renderData"
+          @click.prevent="handleTabListClick($index, r)"
+          :disabled="r.disabled"
+      >
+        <button class="button_new" style="width: max-content" v-bind:class="{
+            'btn-succ': ($index === active),
+            'disabled': r.disabled
+          }">
+          <slot name="header">
+            {{r.header}}
+          </slot>
+          <!-- 关闭按钮 -->
+          <span class="glyphicon glyphicon-remove" style="margin-left: 15px;" @click="deletetTab(r)" v-if="close" :id="'vc-tabset-close-'+attach +'-'+$index"></span>
+        </button>
+
+      </li>
+    </ul>
+
+    <!-- Tab panes -->
+    <div class="tab-content span" v-el:tab-content>
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+  import {remove} from 'vue-client/src/stores/Remove.js'
+
+  export default {
+    props: {
+      navStyle: {
+        type: String,
+        default: 'tabs'
+      },
+      effect: {
+        type: String,
+        default: 'fadein'
+      },
+      active: {
+        type: Number,
+        default: 0
+      },
+      close: {
+        type: Boolean,
+        default: false
+      },
+      attach: {
+        type: String,
+        default: 'vuestrap'
+      },
+      content: {}
+    },
+    ready () {
+      remove.$on('remove', (name) => {
+        //tag
+        this.$removeTab(name)
+      })
+    },
+    data () {
+      return {
+        // 数据格式：{comp, header，disabled}
+        // - comp: 当前页签对应的tab组件
+        renderData: []
+      }
+    },
+    methods: {
+      handleTabListClick (index, el) {
+        // 没有打开过, 则添加显示
+        //tag
+        //tag
+        if (!this.$parent.show.includes(el.header)) {
+          this.$parent.show.push(el.header)
+        }
+        if (el.comp._scope && el.comp._scope.tab) {
+          this.$dispatch('tab-changed', el.comp._scope.tab.comp.name)
+        }
+        if (!el.disabled) this.active = index
+      },
+      // deletetab函数为自己添加
+      deletetTab (el) {
+        this.$removeTab(el.comp._scope.tab.comp.name)
+        remove.$emit('delete', el.comp._scope.tab.comp.name)
+      },
+      // 根据删除也下标，修改所有页签的下标
+      modifyAllIndex (index) {
+        let cur = this.active
+        this.$nextTick(() => {
+          // 关闭页签以后的多有页签的的下标向前挪动一位,之前的页签不动
+          for (var i = index; i < this.renderData.length; i++) {
+            this.renderData[i].comp.index -= 1
+          }
+          // 修改激活页
+          // 获取当前激活页签下标，关闭在当前激活页之后（包含当前激活页），当前激活页下标不变
+          // 当关闭当前激活页之前（激活页向前移动一位）
+          if (this.active > index || this.active === this.renderData.length) {
+            this.active = cur - 1
+          } else if (cur === 0) {
+            this.active = 0
+          } else {
+            this.active = cur
+          }
+          if (this.active === -1) {
+            this.$dispatch('tab-changed', null)
+          }else {
+            this.$dispatch('tab-changed', this.renderData[this.active].comp._scope.tab.comp.name)
+          }
+        })
+      }
+    },
+    events: {
+      'delete' (index) {
+        this.modifyAllIndex(index)
+      }
+    }
+  }
+</script>
+
+<style scoped>
+  ul > li > a {
+    position: relative;
+  }
+  ul > li > a > span {
+    display: none;
+  }
+  /*ul > li > a:hover > span {*/
+  /*display: initial;*/
+  /*position: absolute;*/
+  /*right: 0;*/
+  /*top: 35%;*/
+  /*border: 1px solid #EAEAEA;*/
+  /*}*/
+  /*ul > li > a:hover > span:hover {*/
+  /*border: 1px solid #EAEAEA;*/
+  /*color: #5cb95c;*/
+  /*}*/
+  ul > li > button {
+    background-color: #FFFFFF;
+    border-radius: 4px;
+    color: #999;
+    border: 1px solid #5cb95c;
+  }
+  .btn-succ{
+    background-color: #6aa6e2;
+    border-radius: 4px;
+    color: #fff;
+  }
+  .foot_tabset1 > .nav {
+    overflow-x: scroll;
+    white-space: nowrap;
+  }
+</style>

package/src/components/product/ApplyGuanXian/Tabs.vue

@@ -0,0 +1,67 @@
+<template>
+  <div role="tabpanel" class="tab-pane"
+       v-bind:class="{hide:!show}"
+       v-show="show"
+       :transition="transition"
+  >
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+  import coerceBoolean from 'vue-client/src/vue-strap/src/utils/coerceBoolean.js'
+
+  export default {
+    props: {
+      header: {
+        type: String
+      },
+      disabled: {
+        type: Boolean,
+        coerce: coerceBoolean,
+        default: false
+      }
+    },
+    data () {
+      return {
+        index: 0,
+        show: false
+      }
+    },
+    watch: {
+      'header' (val) {
+        // header变化时，通知tabset
+        let data = this.$parent.renderData.find((v) => v.comp === this)
+        data.header = val
+      }
+    },
+    computed: {
+      show () {
+        return (this.$parent.active === this.index)
+      },
+      transition () {
+        return this.$parent.effect
+      }
+    },
+    created () {
+      this.$parent.renderData.push({
+        comp: this,
+        header: this.header,
+        disabled: this.disabled
+      })
+    },
+    ready () {
+      // 找到当前tab的索引
+      this.index = this.$parent.$children.findIndex((v) => v.$el === this.$el)
+    },
+    beforeDestroy () {
+      this.$parent.renderData.splice(this.index, 1)
+    }
+  }
+</script>
+
+<style scoped>
+  .tab-content > .tab-pane {
+    display: block;
+  }
+</style>

package/src/components/product/ApplyMap/ApplyDragaboutList.vue

@@ -0,0 +1,223 @@
+<template>
+  <div class="listsMap" @scroll="scrollBottom">
+    <div v-for="poi in poiList" class="auto item" @click="poiClick(poi)">
+      <div class="svg">
+        <svg v-if="$index === 0" style="width: 20px;height: 20px;" t="1629107663398" class="icon"
+             viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3053"
+             id="mx_n_1629107663399" data-spm-anchor-id="a313x.7781069.0.i7" width="200" height="200">
+          <path
+            d="M808.6 403.2c0-178.8-129.8-308.5-308.5-308.5-170.1 0-308.5 138.4-308.5 308.5 0 125.6 170.6 338.3 262.3 452.6l6.8 8.4c9.6 12 24 18.9 39.5 18.9 15.4 0 29.8-6.9 39.5-18.9l6.8-8.4c91.5-114.3 262.1-327 262.1-452.6z m-310.1 89.4c-62.9 0-114-51.1-114-114s51.1-114 114-114 114 51.1 114 114-51.1 114-114 114z"
+            fill="#FFFFFF" p-id="3054"></path>
+          <path
+            d="M500.1 67.8c-184.9 0-335.4 150.4-335.4 335.4 0 135 174.5 352.5 268.2 469.4l6.7 8.4c14.8 18.4 36.8 29 60.4 29s45.6-10.6 60.4-29l6.8-8.4C661 755.7 835.4 538.2 835.4 403.2c0-194.3-141-335.4-335.3-335.4z m0 815.3c-15.4 0-29.8-6.9-39.5-18.9l-6.8-8.4c-91.7-114.3-262.3-327-262.3-452.6 0-170.1 138.4-308.5 308.5-308.5 178.8 0 308.5 129.8 308.5 308.5 0 125.6-170.6 338.3-262.3 452.6l-6.8 8.4c-9.5 12-23.9 18.9-39.3 18.9z"
+            fill="#df2424" p-id="3055" data-spm-anchor-id="a313x.7781069.0.i5" class="selected"></path>
+          <path d="M498.5 378.6m-87.2 0a87.2 87.2 0 1 0 174.4 0 87.2 87.2 0 1 0-174.4 0Z" fill="#FFFFFF"
+                p-id="3056"></path>
+          <path
+            d="M612.5 378.6c0-62.9-51.1-114-114-114s-114 51.1-114 114 51.1 114 114 114 114-51.1 114-114z m-201.2 0c0-48.1 39.1-87.2 87.2-87.2s87.2 39.1 87.2 87.2-39.1 87.2-87.2 87.2-87.2-39.1-87.2-87.2z"
+            fill="#df2424" p-id="3057" data-spm-anchor-id="a313x.7781069.0.i6" class="selected"></path>
+        </svg>
+        <svg v-else style="width: 20px;height: 12px;" t="1629107800066" class="icon" viewBox="0 0 1024 1024"
+             version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5529" width="200" height="200">
+          <path
+            d="M491.880777 970.394105c-237.529835 0-430.759721-193.240119-430.759721-430.759721 0-237.529835 193.229886-430.769954 430.759721-430.769954s430.759721 193.240119 430.759721 430.769954C922.640498 777.153986 729.410612 970.394105 491.880777 970.394105zM491.880777 169.213913c-204.250894 0-370.410238 166.168554-370.410238 370.419448 0 204.240661 166.159344 370.410238 370.410238 370.410238S862.289991 743.875045 862.289991 539.634384C862.289991 335.38349 696.131671 169.213913 491.880777 169.213913z"
+            p-id="5530" fill="#000000"></path>
+          <path
+            d="M491.880777 724.720799c-102.056374 0-185.096648-83.030042-185.096648-185.087439s83.040275-185.087439 185.096648-185.087439 185.077206 83.030042 185.077206 185.087439S593.937151 724.720799 491.880777 724.720799zM491.880777 414.897452c-68.777433 0-124.747165 55.959499-124.747165 124.736932s55.968709 124.736932 124.747165 124.736932S616.607476 608.411817 616.607476 539.634384 560.65821 414.897452 491.880777 414.897452z"
+            p-id="5531" fill="#000000"></path>
+        </svg>
+      </div>
+      <div>
+        <div class="name" :class="$index === 0 ? 'one': ''">
+          {{ poi.name }}
+        </div>
+        <div class="address">
+          {{ poi.address }}
+        </div>
+      </div>
+
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  title: '附近POI搜索',
+  props: {
+    // 是否返回详细地址信息
+    extensions: {
+      type: Boolean,
+      default: true
+    },
+    locationAddress: {
+      type: Object,
+      default: null
+    },
+    //  搜索的位置  经纬度 格式 [经度,纬度]
+    rimlocation: {
+      type: Array,
+      default: () => []
+    },
+    // 范围 0-50000
+    radius: {
+      type: Number,
+      default: 500
+    },
+    // 关键字
+    keyword: {
+      type: String,
+      default: ''
+    },
+    // 城市范围 支持cityname（中文或中文全拼）、citycode、adcode
+    thiscity: {
+      type: String,
+      default: ''
+    },
+    // 是否强制限制在设置的城市内搜索
+    citylimit: {
+      type: Boolean,
+      default: false
+    },
+    // 每页显示的个数
+    pagesize: {
+      type: Number,
+      default: 10
+    }
+  },
+  data () {
+    return {
+      count: 0,
+      poiList: [],
+      pagenumber: 1,
+      isbool: true,
+      isfullSearch: '', // 返回基本信息还是详细信息 base 或者 all 与extensions关联
+      placeSearch: null
+    }
+  },
+  methods: {
+    // 某行数据被点击
+    poiClick (poi) {
+      this.$emit('roundlistpoiclick', poi)
+    },
+    // 初始化范围搜索组件
+    initSearchMain () {
+      let e = this.locationAddress.positionResult
+      this.roundlistpoisuccess(e)
+      this.$emit('roundlistpoisuccess', e) // 搜索成功事件
+      // this.isfullSearch = this.extensions===false?'base':'all' //是否查询详情
+      // AMap.plugin(["AMap.PlaceSearch"],()=> {
+      //   //构造地点查询类
+      //   this.placeSearch = new AMap.PlaceSearch({
+      //     pageSize: this.pagesize, // 单页显示结果条数
+      //     pageIndex: this.pagenumber, // 页码
+      //     // panel: this.listId, // 结果列表将在此容器中进行展示。
+      //     extensions:this.isfullSearch
+      //   });
+      //   //搜索成功
+      //   AMap.event.addListener(this.placeSearch, 'complete', (e)=>{
+      //     this.roundlistpoisuccess(e)
+      //     this.$emit('roundlistpoisuccess',e); // 搜索成功事件
+      //   })
+      //   //搜索失败
+      //   AMap.event.addListener(this.placeSearch, 'error', (e)=>{
+      //     this.$emit('roundlistpoierror',e); // 搜索失败事件
+      //   })
+      // });
+    },
+    // 范围搜索
+    searchLocationFj () {
+      // if (this.thiscity){
+      //   this.placeSearch.setCity(this.thiscity); //设置城市
+      // }
+      // if (this.citylimit) {
+      //   this.placeSearch.setCityLimit(this.citylimit); //设置强制在设定城市查找
+      // }
+      // this.placeSearch.setPageIndex(this.pagenumber); //页码
+      // this.placeSearch.searchNearBy(this.keyword, this.rimlocation, this.radius);
+    },
+    // 搜索成功回调
+    roundlistpoisuccess (e) {
+      if (!e) {
+        return
+      }
+      this.poiList = []
+      this.isbool = true
+      // this.count = e.poiList.count
+      this.poiList = this.poiList.concat(e.regeocode.pois)
+      // console.log('当前搜索结果列表', this.poiList)
+      for (let i = 0; i < this.poiList.length; i++) {
+        this.poiList[i].country = e.regeocode.addressComponent.country
+        this.poiList[i].province = e.regeocode.addressComponent.province
+        this.poiList[i].city = e.regeocode.addressComponent.city
+        this.poiList[i].district = e.regeocode.addressComponent.district
+        this.poiList[i].towncode = e.regeocode.addressComponent.towncode
+        this.poiList[i].township = e.regeocode.addressComponent.township
+      }
+      // console.log('当前搜索结果列表', e)
+    },
+    // 滑动
+    scrollBottom (e) {
+      let fromTheBottom = e.target.scrollHeight - (e.target.scrollTop + e.target.clientHeight)
+      // console.log(fromTheBottom)
+
+      if (fromTheBottom <= 100 && this.isbool) {
+        this.isbool = false
+        let length = this.poiList.length
+        let num = this.count / length
+        this.pagenumber = this.pagenumber + 1
+        if (num > 1) {
+          this.searchLocationFj()
+        }
+      }
+    }
+  },
+  ready () {
+    this.$nextTick(() => {
+      this.initSearchMain()
+      this.searchLocationFj()
+    })
+  },
+  watch: {
+    'rimlocation': function (newValue, oldValue) {
+      if (this.rimlocation && this.placeSearch) {
+        this.poiList = []
+        this.pagenumber = 1
+        this.searchLocationFj()
+        console.log('当前传入地址', this.locationAddress)
+      } else {
+        if (!this.placeSearch) {
+          this.initSearchMain()
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+.listsMap {
+  overflow-y: auto;
+
+  .item {
+    display: flex;
+    align-items: center;
+    padding: 5px 5px;
+    border-bottom: 1px solid #eee;
+    width: 100%;
+
+    .svg {
+      padding-right: 5px;
+    }
+
+    .address {
+      font-size: 14px;
+      color: #999999;
+    }
+  }
+}
+
+.one {
+  color: #df2424;
+}
+
+</style>

package/src/components/product/ApplyMap/ApplyInputSearch.vue

@@ -0,0 +1,212 @@
+<template>
+  <div style="overflow: hidden">
+    <div style="height: 5%">
+      <!--输入框    搜索成功返回事件                搜索框被点击                    搜索框内容被改变    到最后一页         -->
+      <amap-input-search v-ref:mapinput
+                         :thiscitycode="mobiCity.citycode"
+                         :thiscity="mobiCity.city"
+                         :model.sync="mainList"
+                         @retres="syncinput"
+                         @searchinputclick="isMaskLevelShow"
+                         @closearchlist="closearchlist"
+                         @searchchange="showLevelShow"
+                         @endcount="endInputCount" ></amap-input-search>
+    </div>
+    <!--遮罩框  是否显示遮罩层       列表数据             滑动到底部加载     某一条数据被点击              背景色             -->
+    <amap-search-list v-ref:maplist
+                      v-show="isMaskShow"
+                      :model.sync="mainList"
+                      @httpload="httpLoad"
+                      @selected="listSelected"
+                      :background_color="amaplist_bgcolor">
+      <template partial='head'></template>
+      <template partial='body'>
+        <tr>
+          <th>
+            <h5>{{row.name}} <small>{{row.type}}</small></h5>
+            <small>{{row.pname}}{{row.cityname}}{{row.adname}}{{row.address}}</small>
+          </th>
+        </tr>
+      </template>
+    </amap-search-list>
+    <div style="height: 50%" v-show="!isMaskShow">
+      <!--地图-->
+      <div>
+        <apply-map-location
+          @locationsuccess="locationsuccess"
+          v-ref:amapmain mapmodel="dragMap" :usenative="true"
+          :isshowsearch="false" :mylocationinfo="false"
+          :islocation="islocation" :locationzoomcenter="locationzoomcenter"
+          :islocationclearmark="false" :isshowmapmodel="false"
+          :zoomcenter="zoomcenter" mapmodel="dragMap"
+          @getmylocation="getmylocation"
+          @dragsuccess="dragsuccess"
+          @initamapsuc="initamapsuc"
+          :labelmarksarray="labelmarksarray">
+        </apply-map-location>
+      </div>
+    </div>
+    <div style="height: 45%" v-show="!isMaskShow">
+      <!--拖拽到地方后附近的poi搜索结果-->
+      <apply-drag-list
+        :rimlocation="rimlocation"
+        :location-address="locationAddress"
+        @roundlistpoiclick="roundlistpoiclick"
+      ></apply-drag-list>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  /**
+   * 请勿修改源码，此代码是模板代码，如需其他实现方法，复制到项目中修改
+   */
+  title: '高德选址主组件',
+  props: ['markmapdata'],
+  data () {
+    return {
+      islocation: true,
+      locationzoomcenter: true,
+      // 是否显示 搜索列表遮罩层
+      isMaskShow: false,
+      // 遮罩层背景色
+      amaplist_bgcolor: 'rgb(250 250 250)',
+      // 搜索列表主数据
+      mainList: {
+        rows: []
+      },
+      // 选中的城市信息
+      mobiCity: {
+        citycode: 610800,
+        city: '榆林市'
+      },
+      // 带label的简单点集
+      labelmarksarray: [],
+      // 地图当前显示的居中位置
+      zoomcenter: {
+        grade: 12,
+        lng: 109.741193,
+        lat: 38.290162
+      },
+      // 下方搜索附近的位置 [经度，纬度]
+      rimlocation: [],
+      // 拖拽选址当前地址
+      locationAddress: {}
+    }
+  },
+  methods: {
+    initamapsuc () {
+      if (this.markmapdata) {
+        this.toMapMarker(this.markmapdata)
+      }
+    },
+    // 定位回调
+    locationsuccess (myLocation) {
+      this.mobiCity.citycode = myLocation.city.citycode
+      this.mobiCity.city = myLocation.city.city
+    },
+    // 下方搜索附近poi组件列表的点击事件
+    roundlistpoiclick (roeOne) {
+      console.log('下方搜索附近Poi' + JSON.stringify(roeOne))
+      this.$emit('locationclick', roeOne)  // 外部去处理 关闭此选址组件
+      this.toMapMarker(roeOne)
+    },
+    // 上方搜索列表中某项被点击
+    listSelected (roeOne) {
+      console.log('上方搜索附近Poi' + JSON.stringify(roeOne))
+      this.$emit('locationclick', roeOne)  // 外部去处理 关闭此选址组件
+      this.isMaskShow = false // 关闭搜索遮罩层
+      this.toMapMarker(roeOne)
+    },
+    // 切换显示搜索列表（遮罩层）
+    isMaskLevelShow (res) {
+      if (res === '') {
+        return this.$showMessage('请选择城市')
+      }
+      this.isMaskShow = true
+    },
+    // 输入框内点击关闭遮罩层
+    closearchlist () {
+      this.isMaskShow = false
+    },
+    // 当搜索框内值变化 (值变化必为新的搜索，就清空之前的数据打开或关闭遮罩)
+    showLevelShow (inputText) {
+      this.mainList.rows = []
+      if (inputText.trim()) {
+        // 当搜索框是关闭状态，就打开搜索框
+        if (this.isMaskShow === false) {
+          this.isMaskShow = true
+        }
+      } else {
+        this.isMaskShow = false
+      }
+    },
+    // 搜索框返回值组装到搜索列表
+    syncinput (res) {
+      let status = res.status
+      let result = res.result
+      console.log('父组件触发-搜索事件')
+      if (status === 'complete') {
+        if (result.poiList.count === 0) {
+          console.log('poi搜索为空')
+          // return this.mainList.rows=[]
+        }
+        this.$refs.maplist.listsuccess()        // 搜索成功调用列表的成功（隐藏加载动画）
+        for (let i = 0, leat = result.poiList.pois.length; i < leat; i++) {
+          this.mainList.rows.push(result.poiList.pois[i])
+        }
+      } else if (status === 'error') {
+        console.log('检索POI失败====')
+        this.$refs.maplist.listcatch() // 搜索失败调用列表失败
+      } else if (status === 'no_data') {
+        console.log('检索返回0结果')
+        this.mainList.rows = []
+      }
+    },
+    // 列表到底部搜索方法
+    httpLoad () {
+      this.$refs.mapinput.whetherToPageSearch()
+    },
+    // 到最后一页
+    endInputCount () {
+      this.$refs.maplist.listend()
+      console.log('到最后一页了')
+    },
+    // 选中的当前位置改变
+    getmylocation (res) {
+
+    },
+    // 拖拽选址到哪
+    dragsuccess (res) {
+      this.rimlocation = [res.position.lng, res.position.lat]
+      this.locationAddress = res
+      console.log('当前地址', this.locationAddress)
+    },
+    // 在地图上渲染点 并将视图缩放到该点处
+    toMapMarker (data) {
+      this.labelmarksarray = [{
+        data: {data: '', label: '<span>' + data.name + '</span>', content: data.address},
+        position: data.location,
+        ismoseOpen: true, // 是否通过鼠标滑过打开信息框 true ,false
+        isclearmarker: true, // 是否重新渲染新点时就清除页面所有点 true false  也可以手动去调用 this.map.clearMap(); 该方法属于map地图对象
+        ismobiletouchendclear: false, // 手机端长按点后是否松开后关闭弹出的信息框 （_ismoseOpen为true并且_ismobiletouchendclear为true移动端才会在松开后关闭信息框，当你不想在松开后关闭信息框时请将_ismobiletouchendclear设置为false）
+        islabel: true // 是否渲染label 标注(标注与信息框不同，信息框全局只有唯一一个)
+      }]
+      this.zoomcenter = {grade: 15, lng: data.location.lng, lat: data.location.lat}
+    }
+  },
+  ready () {
+  },
+  created () {
+  },
+  watch: {
+  },
+  computed: {
+  }
+}
+</script>
+
+<style scoped>
+
+</style>