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