小牛集卡web 客户端
chenwei
2021-06-08 e41faf1640e2e71febf4ba347a301e0c043b6ce9
commit | author | age
423585 1 <template>
C 2   <div class="left-main">
3     <div class="content">
4       <div class="nav">
5         <div
6           v-for="(item, index) in nav"
7f5659 7           :key="index + 1"
C 8           @click="changeType(index + 1)"
9           :class="{ meactive: index + 1 == isType }"
423585 10         >
C 11           {{ item }}
12         </div>
13       </div>
7f5659 14       <div class="form">
423585 15         <el-form ref="form" :model="submitForm" label-width="160px">
C 16           <el-form-item>
17             <template slot="label">
18               <div class="form-label">
19                 <i class="iconfont icon-listmatou"></i>
7f5659 20
423585 21                 <span>提箱地 : </span>
C 22               </div>
23             </template>
24             <div class="form-input">
25               <div class="tibox-adres">
26                 <el-input
27                   @focus="tiFocus"
28                   readonly
29                   v-model="playBox"
30                 ></el-input>
31                 <div class="select-tibox" v-if="isTShow">
7f5659 32                   <div v-if="pickPlaceList.length == 0">暂 无 数 据</div>
423585 33                   <el-tabs v-model="submitForm.CityId" @tab-click="handleClick">
C 34                     <el-tab-pane
35                       v-for="item in pickPlaceList"
36                       :key="item.CityId"
37                       :label="item.CityName"
38                       :name="item.CityId"
39                     >
40                       <el-radio-group v-model="radio" @change="selectPort">
41                         <el-radio
42                           @change="boxRadio"
43                           v-for="ritem in item.PortList"
44                           :key="ritem.PortId"
45                           :label="ritem"
46                           >{{ ritem.PortName }}</el-radio
47                         >
48                       </el-radio-group>
49                     </el-tab-pane>
50                   </el-tabs>
51                 </div>
52               </div>
53
54               <div class="suffix-txt">
7f5659 55                 <div v-for="(item, pindex) in pickPlaceList" :key="pindex">
423585 56                   <div
C 57                     class="shortcut"
58                     v-for="(shortcut, sindex) in item.PortList"
59                     :key="sindex"
60                     @click="shortCut(item, shortcut)"
61                   >
7a1e09 62                     <span v-if="sindex < 3">{{ shortcut.PortName }}</span>
423585 63                   </div>
C 64                 </div>
65               </div>
66             </div>
67           </el-form-item>
68           <el-form-item>
69             <template slot="label">
70               <div class="form-label">
71                 <i
72                   class="iconfont icon-diaoyun_lift_jizhuangxiang_container"
73                 ></i>
74                 <span>装卸地 : </span>
75               </div>
76             </template>
77             <div class="form-input enter-text">
78               <el-input
79                 v-model="mapVal"
80                 @focus="mapAdre"
81                 id="tipinput"
82                 clearable
83               ></el-input>
7f5659 84
423585 85               <div class="suffix-txt">
C 86                 <div @click="usualAdrDialog = true">常用地址</div>
87               </div>
88             </div>
89           </el-form-item>
90           <el-form-item>
91             <template slot="label">
92               <div class="form-label">
93                 <i class="iconfont icon-components-full"></i>
94                 <span>还箱地 : </span>
95               </div>
96             </template>
7f5659 97             <box-adress
C 98               :boxaddress="retrunPlaceList"
99               @acceptreturn="acceptReturnAdress"
100             ></box-adress>
423585 101           </el-form-item>
C 102           <el-form-item>
103             <template slot="label">
104               <div class="form-label">
105                 <i class="iconfont icon-express-package-full"></i>
106                 <span>箱型 : </span>
107               </div>
108             </template>
109             <div class="form-input">
110               <div class="box-type">
7f5659 111                 <div v-for="(box, bindex) in boxType" :key="bindex + 3">
423585 112                   <label :for="box.CntrId">
C 113                     <input
114                       type="checkbox"
115                       v-model="box.select"
116                       :id="box.CntrId"
117                       hidden
118                     />
119                     <div
120                       class="default"
121                       @click="selectBoxType($event, box.CntrId)"
122                     >
123                       <i class="iconfont icon-jizhuangxiang_container"></i>
124                       <span>{{ box.CntrName }}</span>
125                       <span> {{ box.CntrSubtitle }}</span>
126                     </div>
127                   </label>
128
7f5659 129                   <!-- <div v-if="box.CntrType == 1">
423585 130                     <label :for="box.CntrId + 1">
C 131                       <div class="carpool-moneny">
132                         <input
133                           type="checkbox"
134                           v-model="box.pinche"
135                           :id="box.CntrId + 1"
136                         />
137                         <span>同意拼车更省钱</span>
138                       </div>
139                     </label>
7f5659 140                   </div> -->
423585 141                 </div>
C 142
143                 <div>
7f5659 144                   <div class="default special-container" @click="chooseSpecial">
423585 145                     <i class="iconfont icon-jizhuangxiang_container"></i>
C 146                     <span>特种箱</span>
147                   </div>
148                   <div class="special-box" v-if="isSpecial">
149                     <div>
150                       <el-input
151                         v-model="specialVal"
7f5659 152                         
423585 153                       ></el-input>
C 154                     </div>
155                     <div
156                       class="show-spe"
157                       v-for="item in SpecialContainerList"
158                       :key="item.CntrId"
159                     >
160                       <label
161                         :for="item.CntrId"
162                         style="display: flex; align-items: center"
163                       >
164                         <input
165                           type="checkbox"
166                           v-model="item.select"
167                           :id="item.CntrId"
168                         />
169                         <div class="spe-type">
170                           <i class="iconfont icon-jizhuangxiang_container"></i>
171                           <span>{{ item.CntrName }}</span>
172                         </div>
173                       </label>
174
7f5659 175                       <!-- <el-switch
423585 176                         v-if="item.CntrType == 1"
C 177                         v-model="item.pinche"
178                         active-text="拼车"
179                       >
7f5659 180                       </el-switch> -->
423585 181                     </div>
C 182                     <div class="public-btn spe-btn">
183                       <button @click="specialSure">确 定</button>
184                     </div>
185                   </div>
186                 </div>
187               </div>
188             </div>
189           </el-form-item>
190           <el-form-item>
191             <template slot="label">
192               <div class="form-label">
193                 <i class="iconfont icon-shijian"></i>
194                 <span>到达时间 : </span>
195               </div>
196             </template>
197             <div class="form-input">
198               <el-date-picker
7f5659 199                 
C 200                 v-if="!timeUrgent"
201                 v-model="submitForm.ArriveTime"
423585 202                 type="datetime"
7f5659 203                 placeholder="选择日期时间"
C 204                :picker-options="urgentTime"
205                 value-format="yyyy-MM-dd HH:mm"
206               >
207               </el-date-picker>
208               <!-- <div v-if="timeUrgent">
209                    <el-date-picker
210                 @change=urgentTimeChange
211               
212                 v-model="submitForm.ArriveTime"
213                 type="date"
423585 214                 placeholder="选择日期时间"
C 215                 :picker-options="urgentTime"
216                 value-format="yyyy-MM-dd HH:mm"
217               >
218               </el-date-picker>
7f5659 219               </div> -->
C 220               <!-- <el-checkbox v-model="timeUrgent" @change="urgentChange"
221                 >加急</el-checkbox
222               > -->
423585 223             </div>
C 224           </el-form-item>
225           <el-form-item>
226             <template slot="label">
227               <div class="form-label">
228                 <i class="iconfont icon-express-package-full"></i>
229                 <span>物品 : </span>
230               </div>
231             </template>
232             <div class="form-input">
233               <div
234                 class="product"
235                 v-for="(item, indexp) in productData"
236                 :key="indexp"
237                 :class="{ activebox: activeProduct == item }"
238                 @click="selProeuct(item)"
239               >
e41faf 240                 {{ item.GoodsTypeName }}
423585 241               </div>
C 242               <div class="pro-input">
243                 <el-input
244                   placeholder="输入物品"
245                   v-model="productVal"
246                   @focus="proInput"
247                 ></el-input>
248               </div>
249             </div>
250           </el-form-item>
251         </el-form>
252         <div class="undeter">
253           <img src="../../../../public/img/index/tuidan.svg" alt="" />
254           <span>箱子具体信息[智能输入]</span>
255         </div>
256       </div>
257     </div>
258     <div class="btns">
259       <div v-if="1 == 2">
260         <div class="mill" v-for="(fitem, findex) in factory" :key="findex">
261           {{ fitem }}
262         </div>
263         <div class="change-mill">
264           <i class="el-icon-refresh"></i>
265           <span>换一换</span>
266         </div>
267       </div>
268       <div class="place-order">
269         <button @click="inquiryOrder">
270           <i class="el-icon-search"></i>询价下单
271         </button>
272       </div>
273     </div>
274
275     <!-- 常用地址弹窗 -->
276     <el-dialog
277       title="常用地址"
278       :visible.sync="usualAdrDialog"
279       width="30%"
280       :before-close="handleClose"
281     >
7f5659 282       <div
C 283         class="common-adress"
284         v-for="(item, index) in CommonAdressList"
285         :key="index"
286         @click="selAdress(item)"
287       >
423585 288         <i class="iconfont icon-zb"></i>
C 289         <span>{{ item.ComAdress }}</span>
290       </div>
291     </el-dialog>
292   </div>
293 </template>
294 <script>
7f5659 295 import BoxAdress from "../comment/BoxAdress";
423585 296 export default {
C 297   data() {
298     return {
299       nav: ["我要装", "我要卸"],
300       CommonAdressList: [
301         { ComAdress: "重庆果园港", ComLongitude: "109", ComLatitude: "22" },
302       ],
7f5659 303       isType: "1",
423585 304       submitForm: {
C 305         CityId: "5dc90c98-475e-4529-bb3a-c3010a82b0e1",
306         OrderType: 1,
307         PickPlace: "",
308         ReturnPlace: "",
309         OrderAddress: "",
310         OrderAddressLongitude: "",
311         OrderAddressLatitude: "",
312         TempOrderContainerList: [],
313         ArriveTime: "",
314         TransportGoods: "",
315         // OnlyInput:""
316       },
317       timeUrgent: false,
318       value1: "",
319       radio1: "",
320       value4: "",
e41faf 321       productData: [],
423585 322       factory: [],
C 323
324       boxType: [], //普通箱子列表
325       SpecialContainerList: [],
326       isTShow: false,
327       playBox: "",
328       radio: "",
329       activeName: "5dc90c98-475e-4529-bb3a-c3010a82b0e1",
330       isMap: false,
331       mapVal: "",
332       usualAdrDialog: false,
333       specialVal: "",
7f5659 334       former:[],
423585 335       isSpecial: false,
C 336       pickPlaceList: [],
7f5659 337       retrunPlaceList: [],
423585 338       activeProduct: "",
C 339       productVal: "",
7f5659 340       isSelect: "",
C 341       urgentBeginTime:"",
342       urgentEndTime:"",
343       urgentTime: {
344         disabledDate(time,urgentFinshTime) {
345           // let test = "2021-06-03";
346           // // test  = urgentFinshTime;
7a1e09 347
7f5659 348           //  let Y = (new Date()).getFullYear();
C 349           //   let M = (new Date()).getMonth();
350           //   let D = (new Date()).getDate();
351           //   let curDate = (new Date()).getTime();
352           //   let defDate = (new Date(Y,M,D)).getTime() - new Date(test).getTime(); // 14 * 24 * 3600 * 1000;因为月份取出来的值小1,所以直接用了new Date(2019,3,11).getTime()
353             // let chooseDate = curDate - defDate;
354             // let chooseDate =curDate-defDate; ||chooseDate<time.getTime()
355            
356             return time.getTime() < Date.now() - 8.64e7;
357         }
358       },
423585 359     };
C 360   },
7f5659 361   components: { BoxAdress },
423585 362   props: ["alldata"],
C 363   watch: {
364     alldata(val) {
365       this.productData = val.GoodList;
366       for (var i = 0; i < val.ContainerList.length; i++) {
367         val.ContainerList[i].select = false;
368         val.ContainerList[i].pinche = false;
369       }
370       this.boxType = val.ContainerList;
371       val.SpecialContainerList.forEach((item) => {
372         item.select = false;
373         item.pinche = false;
374       });
375       this.SpecialContainerList = val.SpecialContainerList;
7f5659 376       this.former = val.SpecialContainerList;
423585 377       this.pickPlaceList = val.PickPlaceList;
C 378       this.CommonAdressList = val.CommonAdressList;
379       this.retrunPlaceList = val.RetrunPlaceList;
7f5659 380       this.urgentBeginTime = val.GetUrgentBeginTime;
C 381       this.urgentEndTime = val.GetUrgentEndTime;
382       console.log(val);
383     },
384     specialVal(val){
385        console.log(val)
386         this.searchSpecial(val);
423585 387     },
C 388   },
7f5659 389   mounted() {
C 390    
391   },
423585 392   methods: {
7f5659 393   
C 394     acceptReturnAdress(e) {
395       this.submitForm.ReturnPlace = e;
7a1e09 396     },
423585 397     selectBoxType(e, id) {
C 398       console.log(id);
399       if (e.target.localName == "div") {
400         if (e.target.className.indexOf("activebox") == -1) {
401           e.target.className = "default  activebox";
402         } else {
403           e.target.className = "default";
404         }
405       } else {
406         if (e.target.parentNode.className.indexOf("activebox") == -1) {
407           e.target.parentNode.className = "default  activebox";
408         } else {
409           e.target.parentNode.className = "default";
410         }
411       }
412     },
413     chooseSpecial() {
414       this.isSpecial = !this.isSpecial;
415     },
416     specialSure() {
417       this.isSpecial = false;
418     },
419     boxRadio(val) {
420       this.submitForm.PickPlace = val.PortId;
421       this.submitForm.ReturnPlace = val.PortId;
422       this.playBox = val.PortName;
423       console.log(val);
424     },
425     handleClick(tab, event) {
426       this.submitForm.CityId = tab.name;
427       console.log(tab.name);
428     },
429     //选择快捷方式的提箱地
430     shortCut(content, short) {
431       this.submitForm.CityId = content.CityId;
432       this.submitForm.PickPlace = short.PortId;
7f5659 433       this.submitForm.ReturnPlace = short.PortId;
423585 434       this.playBox = short.PortName;
C 435     },
436     //搜索触发的事件
7f5659 437     searchSpecial(val) {
C 438       var arr = [];
439       if (val != "") {
440         for (var i = 0; i < this.former.length; i++) {
441           if (this.former[i].CntrName.indexOf(val) != -1) {
442             arr.push(this.former[i]);
443           } else if (this.former[i].CntrName == val) {
444             arr = [];
445             arr.push(this.former[i]);
446           }
447         }
448          this.SpecialContainerList = arr;
449       }else{
450         this.SpecialContainerList = this.former;
451       }
423585 452     },
C 453     changeType(item) {
7f5659 454       this.submitForm.OrderType = item;
423585 455       this.isType = item;
C 456     },
457     //循环取到已经选择的箱子
458     getForBox(arr) {
459       for (var i = 0; i < arr.length; i++) {
460         if (arr[i].select) {
461           if (arr[i].pinche) {
462             this.submitForm.TempOrderContainerList.push({
463               CntrId: arr[i].CntrId,
464               CntrName: arr[i].CntrName,
465               IsCarpooling: 1,
466             });
467           } else {
468             this.submitForm.TempOrderContainerList.push({
469               CntrId: arr[i].CntrId,
470               CntrName: arr[i].CntrName,
471               IsCarpooling: 0,
472             });
473           }
474         }
475       }
476     },
477     inquiryOrder() {
478       if (this.activeProduct == "") {
479         this.submitForm.TransportGoods = this.productVal;
480       }
7f5659 481       // this.submitForm.ArriveTime = this.value1;
423585 482       this.getForBox(this.boxType);
C 483       this.getForBox(this.SpecialContainerList);
484       console.log(this.submitForm);
485       this.$axios
486         .post("/api/Order/SaveTempOrder", this.$qs.stringify(this.submitForm))
487         .then((res) => {
488           console.log(res);
489           console.log(this.value4);
490           this.$router.push("/inquiry");
491         })
492         .catch((err) => {
493           console.log(err);
494         });
495     },
496     //选中物品
497     selProeuct(content) {
498       this.productVal = "";
499       this.activeProduct = content;
500       this.submitForm.TransportGoods = content;
501     },
502     //输入物品
503     proInput() {
504       this.activeProduct = "";
505     },
7f5659 506     // urgentChange(val) {
C 507     //   if (val) {
508     //      let year = this.urgentEndTime.slice(0,10)
509     //      console.log(year)
510     //             this.urgentTime.disabledDate(new Date() ,"2021-06-03");
511     //   }
512     // },
423585 513     //选取常用地址
7f5659 514     selAdress(content) {
C 515       this.submitForm.OrderAddressLongitude = content.ComLongitude;
516       this.submitForm.OrderAddressLatitude = content.ComLatitude;
517       this.mapVal = content.ComAdress;
518       this.usualAdrDialog = false;
423585 519     },
C 520     tiFocus() {
521       this.isTShow = true;
522     },
7f5659 523     tBlur() {
C 524       this.isTShow = false;
423585 525     },
C 526     TiLose() {
527       this.isTShow = false;
528     },
529     selectPort() {
530       this.isTShow = false;
531     },
532     mapAdre() {
7f5659 533       // var map = new AMap.Map("container", {
C 534       
535       //   resizeEnable: true,
536       // });
423585 537       //输入提示
C 538       var auto = new AMap.Autocomplete({
7f5659 539        
423585 540         input: "tipinput",
7f5659 541          city:"重庆"
423585 542       });
7f5659 543       // var placeSearch = new AMap.PlaceSearch({
C 544       //   map: map,
545       // }); //构造地点查询类
423585 546       AMap.event.addListener(auto, "select", select);
C 547
548       //注册监听,当选中某条记录时会触发
549       var $this = this;
550       function select(e) {
551         $this.submitForm.OrderAddressLongitude = e.poi.location.lng;
552         $this.submitForm.OrderAddressLatitude = e.poi.location.lat;
553         $this.submitForm.OrderAddress = e.poi.name;
554         console.log(e.poi);
555       }
556     },
557     handleClose(done) {
558       this.$confirm("确认关闭?")
559         .then((_) => {
560           done();
561         })
562         .catch((_) => {});
563     },
564   },
565 };
566 </script>
567 <style lang="less" scoped>
7f5659 568 .common-adress {
C 569   padding: 3px 0px;
570   cursor: pointer;
571 }
572 .common-adress:hover {
573   color: #409eff;
574 }
423585 575 .special-box {
C 576   padding: 6px;
577   position: absolute;
578   z-index: 3;
579   width: 245px;
580   background-color: #fff;
581   border: 1px solid #aaaaaa;
582   border-radius: 3px;
583 }
584 .spe-type {
585   border: 1px solid #aaaaaa;
586   border-radius: 3px;
587   padding: 0px 10px;
588   height: 30px;
589   line-height: 30px;
590   margin: 0 6px;
591   color: #aaaaaa;
592 }
593 .spe-type i {
594   font-size: 25px;
595   margin-right: 3px;
596 }
597 .spe-type span {
598   font-weight: bold;
599   font-size: 16px;
600 }
601 .show-spe {
602   display: flex;
603   align-items: center;
604   margin-top: 6px;
605 }
606 .spe-btn {
607   text-align: center;
608 }
609 .carpool-moneny {
610   display: flex;
611   align-items: center;
612   color: #a30014;
613 }
614 .carpool-moneny span {
615   margin-left: 3px;
616 }
617 .box-type {
618   display: flex;
619   flex-wrap: wrap;
620 }
621 .default i {
622   font-size: 25px;
623 }
624 .default span:nth-child(2) {
625   font-weight: bold;
626   font-size: 16px;
627   margin: 0 5px;
628 }
629 .default {
630   display: flex;
631   border-radius: 3px;
632   padding: 3px;
633   border: 1px solid #c3c3c3;
634   background-color: #fff;
635   color: #aaaaaa;
636   margin-right: 6px;
7f5659 637   margin-bottom: 10px;
C 638 }
639 .special-container{
640   margin-bottom: 0px;
423585 641 }
C 642 .activebox {
643   border: 1px solid #e6a23c;
644   background-color: #e6a23c;
645   color: #fff;
646 }
647
648 .fronthome-top {
649   margin-top: 20px;
650 }
651 .left-main .content {
652   display: flex;
653 }
654 .nav {
655   display: flex;
656   flex-direction: column;
657   justify-content: space-between;
658 }
659 .nav div {
660   display: flex;
661   flex-direction: column;
662   justify-content: center;
663   height: 100%;
664   width: 16px;
665   padding: 0 10px;
666   background-color: #000;
667   color: #fff;
668   border: 1px solid #efefef;
669 }
670 .meactive {
671   background-color: #fff !important;
672   color: #000 !important;
673 }
674 .meactive::before {
675   content: url("../../../../public/img/index/gouxuan2.svg");
676 }
677 .left-main .content {
678   margin: 10px;
679 }
680 .content .form {
681   width: 100%;
682   border: 1px solid #aaaaaa;
683   padding: 10px;
684   box-sizing: border-box;
685 }
686 .form-label {
687   display: flex;
688   justify-content: flex-end;
689   align-items: center;
690 }
691 .form-label i {
692   font-size: 30px;
693   margin-right: 10px;
694 }
695 .form-label span {
696   font-weight: 900;
697   font-size: 18px;
698   color: #000;
699   width: 90px;
700 }
701 .form-input {
702   display: flex;
703   flex-wrap: wrap;
704 }
705 .enter-text {
706   /deep/.el-input {
707     width: 300px;
708   }
709 }
710 .suffix-txt {
711   display: flex;
712   margin-left: 50px;
713   color: #aaaaaa;
714 }
715 .suffix-txt div {
716   margin-right: 20px;
717   display: flex;
718   cursor: pointer;
719 }
720 .suffix-txt .shortcut:hover {
721   color: #409eff;
722 }
723 .product {
724   padding: 0px 40px;
725   border: 1px solid #e4e4e4;
726   margin-right: 30px;
727   margin-bottom: 10px;
728   cursor: pointer;
729   border-radius: 3px;
730 }
731 .pro-input {
732   /deep/.el-input {
733     width: 117px;
734   }
735 }
736 .undeter {
737   display: flex;
738   align-items: center;
739 }
740 .undeter span {
741   text-decoration: underline;
742   color: #aaaaaa;
743   margin-left: 15px;
744   cursor: pointer;
745 }
746 .btns {
747   display: flex;
748   // justify-content: space-between;
749   justify-content: flex-end;
750   padding: 0 10px;
751   box-sizing: border-box;
752   padding-left: 48px;
753   padding-bottom: 10px;
754   color: #8b8b8b;
755 }
756 .btns .mill {
757   border: 1px solid #e4e4e4;
758   padding: 5px 20px;
759   cursor: pointer;
760 }
761 .btns .change-mill,
762 .btns .place-order {
763   display: flex;
764   align-items: center;
765 }
766 .btns .change-mill span {
767   cursor: pointer;
768   margin-left: 3px;
769 }
770 .place-order button {
771   padding: 5px 20px;
772   color: #fff;
773   font-weight: bold;
774   background-color: #f59a23;
775   cursor: pointer;
776   outline: none;
777   border: none;
778   border-radius: 3px;
779 }
780 .place-order button i {
781   margin-right: 5px;
782 }
783 .place-order button:hover {
784   background-color: #f3a53f;
785 }
786 .select-tibox {
787   border: 1px solid #c3c3c3;
788   position: absolute;
789   z-index: 10;
790   background-color: #fff;
791   padding: 10px;
792   border-radius: 6px;
793   width: 300px;
794 }
795 .select-tibox {
796   /deep/.el-radio__input {
797     display: none;
798   }
799 }
800 </style>