hemall.terabimsoft.com.cn/plugins/shop_server/components/deliverDialo/deliverDialo.vue

<template>
  <div id="deliverDialo">
    <div class="deliverDialogBox">
      <div class="top">
        <div class="address CityTapBox">
          <img
            src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/images%2FtaskPackage%2Ffontclass-dizhi%402x.png"
            alt=""
          />
          <div>
            {{ city_name }}
            <i class="el-icon-arrow-down"></i>
          </div>
          <el-cascader
            class="cascader"
            ref="refSubCat"
            v-model="district_select"
            :options="district"
            :props="props"
            @change="handleChange"
          ></el-cascader>
        </div>
        <div class="deleverAndAdress">
          <el-select v-model="optionsSelectValue" placeholder="请选择" @change="selectChange">
            <el-option
              v-for="item in optionsSelect"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <div class="inp">
          <el-input
            v-if="optionsSelectValue == 1"
            v-model="deliverDialogInput"
            placeholder="搜索自提点a名称"
          ></el-input>
          <el-input
            v-if="optionsSelectValue == 2"
            id="suggestId"
            v-model="deliverDialogInput"
            placeholder="请输入详细的地点"
            @focus="focusInp"
          ></el-input>
        </div>
        <div class="searchBtn" @click="search">搜索</div>
      </div>
      <div class="contenBox">
        <div class="list" v-for="(item, index) in info" :key="index" @click="tapChild(item.id)">
          <div class="top">
            <div class="name">{{ item.deliver_name }}</div>
            <div class="btn" @click.stop="checkMore(index)">
              {{ !item.close ? "查看" : "收起" }}
              <i class="el-icon-arrow-down"></i>
            </div>
          </div>
          <div class="adddress">{{ item.full_address }} 562号</div>
          <div class="distance" v-if="item.distance">{{ item.distance }}{{ item.unit }}</div>
          <div class="timeContact">
            <div class="time">
              营业时间：{{ item.business_hours_start }}-{{
                item.business_hours_end
              }}
            </div>
            <div class="phone" v-if="item.close">
              联系电话：{{ item.deliver_mobile }}
            </div>
          </div>
          <div class="thumbBox" v-if="item.close && item.thumb.length > 0">
            <div class="txt">图片</div>
            <div class="thumbLis">
              <template v-for="(items, index) in item.thumb">
                <el-image
                  :key="index"
                  style="width: 70px; height: 70px"
                  :src="items"
                  :preview-src-list="setSrcList(items)"
                >
                </el-image>
              </template>
            </div>
          </div>
        </div>
      </div>
      <pagination
        v-show="total"
        :total="total"
        :pageSize="per_page"
        @pagination="monitorPage"
        :page="page"
      />
    </div>
  </div>
</template>
<script>
import pagination from "~/components/default/pagination";
export default {
  props: ["deliverDialogVisible", "city", "pointInfo", "goods", "district"],
  data() {
    return {
      optionsSelect: [
        {
          value: "1",
          label: "自提点",
        },
        {
          value: "2",
          label: "地址",
        },
      ],
      optionsSelectValue: "1",
      deliverDialogInput: "",
      goodsInfo: "",
      deliverName: "",
      info: "",
      srcList: [],
      props: {
        value: "v",
        children: "c",
        label: "n",
      },
      district_select: [],
      city_name:'',
      point:'',

      per_page: 15,
      total: 0,
      page: 1,
    };
  },
  components: { pagination },
  watch: {
    deliverDialogVisible: function (nval, oval) {
      console.log(nval,oval, "dddddd");
      if (nval) {
        this.city_name = this.city;
        this.point = this.pointInfo;
        this.getList(
          this.city_name,
          this.point.lat,
          this.point.lng,
          this.deliverDialogInput
        );
      }else{
        this.city_name = this.city;
        this.point = this.pointInfo;
        this.optionsSelectValue = "1";
        this.deliverDialogInput = ''
      }
    },
  },
  mounted() {
    this.city_name = this.city;
    this.point = this.pointInfo;
    this.getList(
      this.city_name,
      this.point.lat,
      this.point.lng,
      this.deliverDialogInput
    );
  },
  methods: {
    tapChild(_id){
      // plugin.package-deliver.frontend.decorate-deliver.getNowPackageDeliver
      let _url = "plugin.package-deliver.frontend.decorate-deliver.getNowPackageDeliver";
      if (!_id) {
        console.log("自提点id不能为空！");
        return;
      }
      this.fun.$get(_url, {deliver_id: _id}, ".").then(
        (response) => {
          if (response.result === 1) {
            this.$emit('childDeliver',response.data)
          } else {
            this.$message.error(response.msg);
          }
        },
        function (response) {
          console.log(response);
        }
      );
    },
    selectChange(){
      this.deliverDialogInput = ''
    },
    handleChange() {
      if (this.$refs["refSubCat"].getCheckedNodes()[0].parent) {
        if (this.$refs["refSubCat"].getCheckedNodes()[0].parent.parent) {
          let district =
            this.$refs["refSubCat"].getCheckedNodes()[0].label;
          let city =
            this.$refs["refSubCat"].getCheckedNodes()[0].parent.label;
          let province =
            this.$refs["refSubCat"].getCheckedNodes()[0].parent.parent.label;
          console.log(district,city,province,this.$refs["refSubCat"].getCheckedNodes()[0].parent, "dddddddd");
          this.city_name = city;
          this.point.lat = '';
          this.point.lng = '';
        }
      }
    },
    setSrcList(items) {
      return (this.srcList = [items]);
    },
    checkMore(index) {
      console.log(this.info[index]);
      if (this.info[index].close) {
        this.$set(this.info[index], "close", false);
      } else {
        this.$set(this.info[index], "close", true);
      }
    },
    focusInp() {
      let that = this;
      AMap.plugin("AMap.Autocomplete", function () {
        // 实例化Autocomplete
        var autoOptions = {
          //city 限定城市，默认全国
          city: that.city_name,
          input: "suggestId",
        };
        var autoComplete = new AMap.Autocomplete(autoOptions);
        AMap.event.addListener(autoComplete, "select", select); //注册监听，当选中某条记录时会触发
      });
      function select(e) {
        AMap.plugin("AMap.Geocoder", function () {
          var geocoder = new AMap.Geocoder({
            // city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode
            city: that.city,
          });

          //var lnglat = [116.396574, 39.992706]
          geocoder.getAddress(e.poi.location, function (status, result) {
            if (status === "complete" && result.info === "OK") {
              // result为对应的地理位置详细信息
              var point = {
                lat: e.poi.location.lat,
                lng: e.poi.location.lng,
              };
              var pos;
              if (result.regeocode.addressComponent.city == "") {
                pos = {
                  address: e.poi.address,
                  city: result.regeocode.addressComponent.province,
                  province: result.regeocode.addressComponent.province,
                  title: e.poi.name,
                  point: point,
                };
              } else {
                pos = {
                  address: e.poi.address,
                  city: result.regeocode.addressComponent.city,
                  province: result.regeocode.addressComponent.province,
                  title: e.poi.name,
                  point: point,
                };
              }
              // that.$store.commit("updateLocation", pos);
              // that.$store.commit("setLocation", pos);
              // myLocation = pos || {};

              that.getList(pos.city, point.lat, point.lng, "");
            } else {
              this.$message.error("请输入更详细的地址");
            }
          });
        });
      }
    },
    search() {
      if (this.optionsSelectValue == 2) {
        if(!this.deliverDialogInput) this.$message.error("请输入详细的地址");
        this.focusInp();
      } else {
        this.getList(
          this.city_name,
          this.point.lat,
          this.point.lng,
          this.deliverDialogInput
        );
      }
    },
    monitorPage() {
      this.page = val.page;
      this.getList(
        this.city_name,
        this.point.lat,
        this.point.lng,
        this.deliverDialogInput
      );
    },
    //高德坐标转百度（传入经度、纬度）
    bd_encrypt(gg_lng, gg_lat) {
      var X_PI = (Math.PI * 3000.0) / 180.0;
      var x = gg_lng,
        y = gg_lat;
      var z = Math.sqrt(x * x + y * y) + 0.00002 * Math.sin(y * X_PI);
      var theta = Math.atan2(y, x) + 0.000003 * Math.cos(x * X_PI);
      var bd_lng = z * Math.cos(theta) + 0.0065;
      var bd_lat = z * Math.sin(theta) + 0.006;
      return {
        lat: bd_lat,
        lng: bd_lng,
      };
    },
    getList(city, lat, lng, kwd) {
      let that = this;
      let p = {};
      if (lng) {
        p = this.bd_encrypt(lng, lat);
      }

      let json = {
        city_name: city,
        lat: p.lat || "",
        lng: p.lng || "",
        goods: that.$route.params.goods || [],
        kwd: kwd,
      };
      let _url = "plugin.package-deliver.frontend.deliver.getList";
      // const { store_id, groupStoreID } = this.$route.params;
      // if (this.$route.params.dispatch_id == 12 && (store_id || groupStoreID)) {
      //   // 门店自提点，只返回该门店创建的自提点
      //   json.store_id = store_id || groupStoreID;
      //   _url = "plugin.package-deliver.frontend.store.deliver.getList";
      // }
      this.fun.$get(_url, json, ".").then(
        (response) => {
          if (response.result === 1) {
            // that.fun.setWXTitle(response.data.name);
            // that.isLoadMore = true;
            // that.total_page = response.data.list.last_page;
            // if (!that.total_page) {
            //   that.total_page = 0;
            // }
            this.total = response.data.list.total;
            this.per_page = response.data.list.per_page;
            this.deliverName = response.data.name;
            this.optionsSelect[0].label = this.deliverName;
            this.info = response.data.list.data;
          } else {
            this.$message.error(response.msg);
          }
        },
        function (response) {
          console.log(response);
        }
      );
    },
  },
};
</script>
<style lang="scss" scoped>
.deliverDialogBox {
  background: #fff;
  padding: 0 10px;
  .top {
    display: flex;
    align-items: center;
    .searchBtn {
      width: 102px;
      height: 42px;
      background: #29ba9c;
      border-radius: 4px;
      font-size: 16px;
      color: #ffffff;
      text-align: center;
      line-height: 42px;
      margin-left: 20px;
    }
    .inp {
      width: 340px;
    }
    .deleverAndAdress {
      margin-right: 32px;
    }
    .CityTapBox {
      position: relative;
      .cascader {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
      }
    }
    .address {
      display: flex;
      align-items: center;
      margin-right: 20px;
      position: relative;

      img {
        width: 16px;
        height: 18px;
        margin-right: 8px;
      }
    }
  }
  .contenBox {
    padding: 35px 0;
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    .redListColor{
      border: 1px solid red;
    }
    .list {
      width: 472px;
      overflow: hidden;
      padding: 15px 22px;
      border: 1px solid #f0f0f0;
      border-radius: 4px;
      box-sizing: border-box;
      margin-right: 15px;
      margin-bottom: 15px;
      .top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .name {
          font-size: 18px;
          color: #333333;
        }
        .btn {
          font-size: 16px;
          color: #29ba9c;
          .el-icon-arrow-down {
            color: #29ba9c;
          }
        }
      }
      .adddress {
        width: 100%;
        text-align: left;
        color: #333333;
        margin-top: 10px;
        margin-bottom: 10px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
      }
      .distance {
        font-size: 16px;
        color: #d7ab4b;
        text-align: right;
      }
      .timeContact {
        display: flex;
        justify-content: space-between;
        margin-top: 10px;
        .time,
        .phone {
          flex: 1;
          font-size: 14px;
          color: #666666;
          text-align: left;
        }
      }
      .thumbBox {
        margin-top: 10px;
        display: flex;
        .txt {
          font-size: 14px;
          color: #666666;
          margin-right: 11px;
        }
        .thumbLis {
          flex: 1;
          overflow-x: scroll;
          img {
            width: 70px;
            height: 70px;
            background: #e1e1e1;
            border-radius: 4px;
          }
        }
        .thumbLis::-webkit-scrollbar {
          width: 0 !important;
        }
      }
    }
  }
}
</style>