小牛集卡web 客户端
chenwei
2021-06-04 7f5659967e4b5864d1c56a6072ebfe3abe4702dc
src/components/agopage/home/Harbour.vue
@@ -4,20 +4,20 @@
      <div class="nav">
        <div
          v-for="(item, index) in nav"
          :key="index+1"
          @click="changeType(item)"
          :class="{ meactive: item == isType }"
          :key="index + 1"
          @click="changeType(index + 1)"
          :class="{ meactive: index + 1 == isType }"
        >
          {{ item }}
        </div>
      </div>
       <div class="form">
      <div class="form">
        <el-form ref="form" :model="submitForm" label-width="160px">
          <el-form-item>
            <template slot="label">
              <div class="form-label">
                <i class="iconfont icon-listmatou"></i>
                <span>提箱地 : </span>
              </div>
            </template>
@@ -25,12 +25,11 @@
              <div class="tibox-adres">
                <el-input
                  @focus="tiFocus"
                  readonly
                  v-model="playBox"
                ></el-input>
                <div class="select-tibox" v-if="isTShow">
                  <div v-if="pickPlaceList.length==0">暂 无 数 据</div>
                  <div v-if="pickPlaceList.length == 0">暂 无 数 据</div>
                  <el-tabs v-model="submitForm.CityId" @tab-click="handleClick">
                    <el-tab-pane
                      v-for="item in pickPlaceList"
@@ -53,7 +52,7 @@
              </div>
              <div class="suffix-txt">
                <div v-for="(item,pindex) in pickPlaceList" :key="pindex">
                <div v-for="(item, pindex) in pickPlaceList" :key="pindex">
                  <div
                    class="shortcut"
                    v-for="(shortcut, sindex) in item.PortList"
@@ -82,7 +81,7 @@
                id="tipinput"
                clearable
              ></el-input>
              <div class="suffix-txt">
                <div @click="usualAdrDialog = true">常用地址</div>
              </div>
@@ -91,24 +90,25 @@
          <el-form-item>
            <template slot="label">
              <div class="form-label">
                <i class="iconfont icon-components-full"></i>
                <span>还箱地 : </span>
              </div>
            </template>
            <box-adress :boxaddress="retrunPlaceList" @acceptreturn="acceptReturnAdress"></box-adress>
            <box-adress
              :boxaddress="retrunPlaceList"
              @acceptreturn="acceptReturnAdress"
            ></box-adress>
          </el-form-item>
          <el-form-item>
            <template slot="label">
              <div class="form-label">
                <i class="iconfont icon-express-package-full"></i>
                <span>箱型 : </span>
              </div>
            </template>
            <div class="form-input">
              <div class="box-type">
                <div v-for="(box,bindex) in boxType" :key="bindex+3">
                <div v-for="(box, bindex) in boxType" :key="bindex + 3">
                  <label :for="box.CntrId">
                    <input
                      type="checkbox"
@@ -126,7 +126,7 @@
                    </div>
                  </label>
                  <div v-if="box.CntrType == 1">
                  <!-- <div v-if="box.CntrType == 1">
                    <label :for="box.CntrId + 1">
                      <div class="carpool-moneny">
                        <input
@@ -137,11 +137,11 @@
                        <span>同意拼车更省钱</span>
                      </div>
                    </label>
                  </div>
                  </div> -->
                </div>
                <div>
                  <div class="default" @click="chooseSpecial">
                  <div class="default special-container" @click="chooseSpecial">
                    <i class="iconfont icon-jizhuangxiang_container"></i>
                    <span>特种箱</span>
                  </div>
@@ -149,7 +149,7 @@
                    <div>
                      <el-input
                        v-model="specialVal"
                        @input="searchSpecial"
                      ></el-input>
                    </div>
                    <div
@@ -172,12 +172,12 @@
                        </div>
                      </label>
                      <el-switch
                      <!-- <el-switch
                        v-if="item.CntrType == 1"
                        v-model="item.pinche"
                        active-text="拼车"
                      >
                      </el-switch>
                      </el-switch> -->
                    </div>
                    <div class="public-btn spe-btn">
                      <button @click="specialSure">确 定</button>
@@ -190,32 +190,41 @@
          <el-form-item>
            <template slot="label">
              <div class="form-label">
                <i class="iconfont icon-shijian"></i>
                <span>到达时间 : </span>
              </div>
            </template>
            <div class="form-input">
              <el-date-picker
              v-if="!timeUrgent"
                v-model="value1"
                v-if="!timeUrgent"
                v-model="submitForm.ArriveTime"
                type="datetime"
                placeholder="选择日期时间"
               :picker-options="urgentTime"
                value-format="yyyy-MM-dd HH:mm"
              >
              </el-date-picker>
              <!-- <div v-if="timeUrgent">
                   <el-date-picker
                @change=urgentTimeChange
                v-model="submitForm.ArriveTime"
                type="date"
                placeholder="选择日期时间"
                :picker-options="urgentTime"
                value-format="yyyy-MM-dd HH:mm"
              >
              </el-date-picker>
              <div v-if="timeUrgent">
              </div>
              <el-checkbox v-model="timeUrgent" @change="urgentChange">加急</el-checkbox>
              </div> -->
              <!-- <el-checkbox v-model="timeUrgent" @change="urgentChange"
                >加急</el-checkbox
              > -->
            </div>
          </el-form-item>
          <el-form-item>
            <template slot="label">
              <div class="form-label">
                <i class="iconfont icon-express-package-full"></i>
                <span>物品 : </span>
              </div>
@@ -245,7 +254,6 @@
          <span>箱子具体信息[智能输入]</span>
        </div>
      </div>
    </div>
    <div class="btns">
      <div v-if="1 == 2">
@@ -271,21 +279,20 @@
      width="30%"
      :before-close="handleClose"
    >
      <div class="" v-for="(item, index) in CommonAdressList" :key="index" @click="selAdress(item)">
      <div
        class="common-adress"
        v-for="(item, index) in CommonAdressList"
        :key="index"
        @click="selAdress(item)"
      >
        <i class="iconfont icon-zb"></i>
        <span>{{ item.ComAdress }}</span>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="usualAdrDialog = false">取 消</el-button>
        <el-button type="primary" @click="usualAdrDialog = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
import BoxAdress from "../comment/BoxAdress"
import BoxAdress from "../comment/BoxAdress";
export default {
  data() {
    return {
@@ -293,7 +300,7 @@
      CommonAdressList: [
        { ComAdress: "重庆果园港", ComLongitude: "109", ComLatitude: "22" },
      ],
      isType: "我要装",
      isType: "1",
      submitForm: {
        CityId: "5dc90c98-475e-4529-bb3a-c3010a82b0e1",
        OrderType: 1,
@@ -324,28 +331,34 @@
      mapVal: "",
      usualAdrDialog: false,
      specialVal: "",
      former:[],
      isSpecial: false,
      pickPlaceList: [],
      retrunPlaceList:[],
      retrunPlaceList: [],
      activeProduct: "",
      productVal: "",
      urgentTime:{
         disabledDate(time) {
           let Y = (new Date()).getFullYear();
            let M = (new Date()).getMonth();
            let D = (new Date()).getDate();
            let curDate = (new Date()).getTime();
            let defDate = (new Date(Y,M,D)).getTime() - new Date(2021,5,30).getTime(); // 14 * 24 * 3600 * 1000;因为月份取出来的值小1,所以直接用了new Date(2019,3,11).getTime()
            // let chooseDate = curDate - defDate;
      isSelect: "",
      urgentBeginTime:"",
      urgentEndTime:"",
      urgentTime: {
        disabledDate(time,urgentFinshTime) {
          // let test = "2021-06-03";
          // // test  = urgentFinshTime;
            let chooseDate =curDate-defDate;
            return time.getTime()<Date.now() || time.getTime() <chooseDate;
          }
      }
          //  let Y = (new Date()).getFullYear();
          //   let M = (new Date()).getMonth();
          //   let D = (new Date()).getDate();
          //   let curDate = (new Date()).getTime();
          //   let defDate = (new Date(Y,M,D)).getTime() - new Date(test).getTime(); // 14 * 24 * 3600 * 1000;因为月份取出来的值小1,所以直接用了new Date(2019,3,11).getTime()
            // let chooseDate = curDate - defDate;
            // let chooseDate =curDate-defDate; ||chooseDate<time.getTime()
            return time.getTime() < Date.now() - 8.64e7;
        }
      },
    };
  },
  components:{BoxAdress},
  components: { BoxAdress },
  props: ["alldata"],
  watch: {
    alldata(val) {
@@ -360,15 +373,26 @@
        item.pinche = false;
      });
      this.SpecialContainerList = val.SpecialContainerList;
      this.former = val.SpecialContainerList;
      this.pickPlaceList = val.PickPlaceList;
      this.CommonAdressList = val.CommonAdressList;
      this.retrunPlaceList = val.RetrunPlaceList;
      this.urgentBeginTime = val.GetUrgentBeginTime;
      this.urgentEndTime = val.GetUrgentEndTime;
      console.log(val);
    },
    specialVal(val){
       console.log(val)
        this.searchSpecial(val);
    },
  },
  mounted() {},
  mounted() {
  },
  methods: {
    acceptReturnAdress(e){
        this.submitForm.ReturnPlace=e;
    acceptReturnAdress(e) {
      this.submitForm.ReturnPlace = e;
    },
    selectBoxType(e, id) {
      console.log(id);
@@ -406,24 +430,28 @@
    shortCut(content, short) {
      this.submitForm.CityId = content.CityId;
      this.submitForm.PickPlace = short.PortId;
       this.submitForm.ReturnPlace = short.PortId;
      this.submitForm.ReturnPlace = short.PortId;
      this.playBox = short.PortName;
    },
    //搜索触发的事件
    searchSpecial() {
      this.SpecialContainerList = [
        { CntrId: 1, select: false, CntrName: "20RT", pinche: false },
      ];
      // var searchVal = this.specialVal;
      // this.SpecialContainerList.forEach((item,index,arr)=>{
      //     if(item.CntrName==searchVal){
      //         arr=[];
      //         arr.push(item);
      //     }
      // })
      console.log(this.specialVal);
    searchSpecial(val) {
      var arr = [];
      if (val != "") {
        for (var i = 0; i < this.former.length; i++) {
          if (this.former[i].CntrName.indexOf(val) != -1) {
            arr.push(this.former[i]);
          } else if (this.former[i].CntrName == val) {
            arr = [];
            arr.push(this.former[i]);
          }
        }
         this.SpecialContainerList = arr;
      }else{
        this.SpecialContainerList = this.former;
      }
    },
    changeType(item) {
      this.submitForm.OrderType = item;
      this.isType = item;
    },
    //循环取到已经选择的箱子
@@ -450,7 +478,7 @@
      if (this.activeProduct == "") {
        this.submitForm.TransportGoods = this.productVal;
      }
      this.submitForm.ArriveTime = this.value1;
      // this.submitForm.ArriveTime = this.value1;
      this.getForBox(this.boxType);
      this.getForBox(this.SpecialContainerList);
      console.log(this.submitForm);
@@ -474,24 +502,26 @@
    //输入物品
    proInput() {
      this.activeProduct = "";
    },
    urgentChange(val){
        if(val){
          this.urgentTime.disabledDate()
        }
    },
    // urgentChange(val) {
    //   if (val) {
    //      let year = this.urgentEndTime.slice(0,10)
    //      console.log(year)
    //             this.urgentTime.disabledDate(new Date() ,"2021-06-03");
    //   }
    // },
    //选取常用地址
    selAdress(content){
          this.submitForm.OrderAddressLongitude = content.lng;
        this.submitForm.OrderAddressLatitude = e.poi.location.lat;
        this.submitForm.OrderAddress = e.poi.name;
    selAdress(content) {
      this.submitForm.OrderAddressLongitude = content.ComLongitude;
      this.submitForm.OrderAddressLatitude = content.ComLatitude;
      this.mapVal = content.ComAdress;
      this.usualAdrDialog = false;
    },
    tiFocus() {
      this.isTShow = true;
    },
    tBlur(){
      this.isTShow=false;
    tBlur() {
      this.isTShow = false;
    },
    TiLose() {
      this.isTShow = false;
@@ -500,16 +530,19 @@
      this.isTShow = false;
    },
    mapAdre() {
      var map = new AMap.Map("container", {
        resizeEnable: true,
      });
      // var map = new AMap.Map("container", {
      //   resizeEnable: true,
      // });
      //输入提示
      var auto = new AMap.Autocomplete({
        input: "tipinput",
         city:"重庆"
      });
      var placeSearch = new AMap.PlaceSearch({
        map: map,
      }); //构造地点查询类
      // var placeSearch = new AMap.PlaceSearch({
      //   map: map,
      // }); //构造地点查询类
      AMap.event.addListener(auto, "select", select);
      //注册监听,当选中某条记录时会触发
@@ -532,6 +565,13 @@
};
</script>
<style lang="less" scoped>
.common-adress {
  padding: 3px 0px;
  cursor: pointer;
}
.common-adress:hover {
  color: #409eff;
}
.special-box {
  padding: 6px;
  position: absolute;
@@ -594,6 +634,10 @@
  background-color: #fff;
  color: #aaaaaa;
  margin-right: 6px;
  margin-bottom: 10px;
}
.special-container{
  margin-bottom: 0px;
}
.activebox {
  border: 1px solid #e6a23c;