captain-ui/es/address/src/components/edit-detail-field.js

有赞vue wap业务组件库

import "vant/es/cell/style";
import _Cell from "vant/es/cell";
import "vant/es/cell-group/style";
import _CellGroup from "vant/es/cell-group";
import "vant/es/icon/style";
import _Icon from "vant/es/icon";
import "vant/es/field/style";
import _Field from "vant/es/field";
import UA from '@youzan/utils/browser/ua_browser';
export default {
  render: function render() {
    var _vm = this;

    var _h = _vm.$createElement;

    var _c = _vm._self._c || _h;

    return _c('div', [_c('van-field', {
      class: _vm.detailClass,
      attrs: {
        "label": "详细地址",
        "placeholder": "如街道、楼层、门牌号等",
        "maxlength": "200",
        "type": "textarea",
        "autosize": "",
        "value": _vm.value,
        "error": _vm.isError
      },
      on: {
        "click-right-icon": _vm.onIconClick,
        "input": _vm.handleInput,
        "focus": _vm.handleFocus,
        "blur": _vm.handleBlur
      }
    }, [_c('template', {
      slot: "icon"
    }, [_vm.value && _vm.isFocused ? [_vm.isAndroid ? _c('span', {
      staticClass: "cap-address-detail__finish-edit"
    }, [_vm._v("\n          完成\n        ")]) : _c('van-icon', {
      attrs: {
        "name": "clear"
      }
    })] : _vm._e()], 2)], 2), _vm.showSearchList ? _c('van-cell-group', {
      staticClass: "cap-address-detail__suggest-list"
    }, _vm._l(_vm.suggestList, function (express) {
      return _c('van-cell', {
        key: express.name + express.address,
        staticClass: "cap-address-detail__suggest-item",
        on: {
          "click": function click($event) {
            _vm.onSuggestSelect(express);
          }
        }
      }, [_c('van-icon', {
        staticClass: "cap-address-detail__location",
        attrs: {
          "name": "location"
        }
      }), _c('div', {
        staticClass: "cap-address-detail__item-info"
      }, [_c('p', {
        staticClass: "cap-address-detail__title"
      }, [_vm._v(_vm._s(express.name))]), _c('p', {
        staticClass: "cap-address-detail__subtitle"
      }, [_vm._v(_vm._s(express.address))])])], 1);
    }), 1) : _vm._e()], 1);
  },
  components: {
    'van-field': _Field,
    'van-icon': _Icon,
    'van-cell-group': _CellGroup,
    'van-cell': _Cell
  },
  props: {
    value: String,
    isError: Boolean,
    needSearch: Boolean,
    searchLocation: Function
  },
  data: function data() {
    return {
      suggestList: [],
      isAndroid: UA.isAndroid(),
      isSearching: false,
      isFocused: false
    };
  },
  computed: {
    showSearchList: function showSearchList() {
      return this.needSearch && this.isFocused && this.isSearching && this.suggestList.length > 0;
    },
    detailClass: function detailClass() {
      return this.showSearchList ? 'cap-address-detail--no-border' : '';
    }
  },
  methods: {
    handleFocus: function handleFocus(e) {
      this.isFocused = true;
      this.$emit('focus', e);
    },
    handleBlur: function handleBlur(e) {
      var _this = this;

      // 等待其他地方点击事件完了以后，再触发
      setTimeout(function () {
        _this.isSearching = false;
        _this.isFocused = false;

        _this.$emit('blur', e);
      }, 100);
    },
    handleInput: function handleInput(e) {
      this.$emit('input', e);

      if (!this.isFocused || !e) {
        return;
      }

      this.searchSuggestLocation();
    },
    onIconClick: function onIconClick() {
      // 安卓直接完成，不触发清除
      if (this.isAndroid) {
        return;
      }

      this.$emit('input', '');
    },
    onSuggestSelect: function onSuggestSelect(express) {
      this.$emit('input', express.address + " " + express.name);
    },
    searchSuggestLocation: function searchSuggestLocation() {
      var _this2 = this;

      var searchRes = this.searchLocation(this.value);
      this.isSearching = true;

      if (searchRes.then) {
        searchRes.then(function (res) {
          _this2.suggestList = res;
        });
      } else {
        this.suggestList = searchRes;
      }
    }
  }
};