小牛集卡web 客户端
chenwei
2021-06-04 7f5659967e4b5864d1c56a6072ebfe3abe4702dc
commit | author | age
423585 1 <template>
C 2   <div class="fronthome-top">
3     <div class="fronthome-main">
4       <div class="enquiry-title">
5         <div class="letter">询价下单</div>
6         <div class="top-middle">
7           <i class="iconfont icon-express-package-full"></i>
8           <h4>物品 :</h4>
9           <span>{{ allOrder.TransportGoods }}</span>
10         </div>
11         <div class="top-right">
12           <div>
13             <img src="../../../public/img/index/gouxuan.svg" alt="" />
14             <span>港口达</span>
15           </div>
16           <div>
17             <img src="../../../public/img/index/gouxuan2.svg" alt="" />
7f5659 18             <span>{{allOrder.OrderType==1?'我要装':'我要卸'}}</span>
423585 19           </div>
C 20         </div>
21       </div>
22       <div>
23         <div class="title-one">
24           <div>
25             <i class="iconfont icon-listmatou"></i>
26             <span class="bar">提箱地:</span>
27             <span>{{ allOrder.PickPlaceName }}</span>
28           </div>
29           <div>
30             <i class="iconfont icon-huoyunzhandizhiguanli"></i>
31             <span>{{ allOrder.OrderAddress }}</span>
32           </div>
33           <div>
34             <i class="iconfont icon-components-full"></i>
35             <span class="bar">还箱地:</span>
36             <span>{{ allOrder.ReturnPlaceName }}</span>
37           </div>
38         </div>
39         <div class="show-main">
40           <div class="table-title">
41             <span class="box">箱型</span>
42             <span class="time">到达时间</span>
43             <span class="type">类型</span>
44             <span class="info">箱子信息</span>
7f5659 45             <span class="number">数量(车)</span>
C 46               <span  style="width:33px;">箱量</span>
47             <!-- <span class="number">箱量</span> -->
48             <span style="width:50px;">价格</span>
49             <span style="width:195px;"></span>
423585 50           </div>
C 51
52           <box-type :orderall="allOrder" @pinche="acceptPin"></box-type>
53         </div>
54
55         <div class="inquiry-foot">
56           <div>
57             <img src="../../../public/img/index/tuidan.svg" alt="" />
58             <span>箱子具体信息[智能输入]</span>
59           </div>
60           <div>
61             <el-button
62               icon="el-icon-plus"
63               plain
64               size="small"
65               @click="addBoxDialog = true"
66               >新增箱子</el-button
67             >
68           </div>
69           <div>
70             <span>合计:¥{{ allOrder.TotalAmount }}</span>
71             <button @click="placeOrder">
72               <i class="iconfont icon-gouxuan"></i> 下 单
73             </button>
74           </div>
75         </div>
76       </div>
77     </div>
78
79     <el-dialog title="新增箱子" :visible.sync="addBoxDialog" width="30%">
80       <add-box></add-box>
81     </el-dialog>
82     <!-- 下单的弹窗 -->
83     <el-dialog
84       title="下单"
85       :visible.sync="orderDialog"
86       width="40%"
87       :before-close="handleClose"
88       class="place-order"
89     >
90       <div class="order">
91         <div class="title">
92           <span>支付订单</span>
93           <span>合计¥{{allOrder.TotalAmount}}</span>
94         </div>
95         <div class="my">
96           <i class="el-icon-s-custom"></i>
97           <span>我的小牛币:{{ CusSurplusAmount }}</span>
98         </div>
99         <div class="sale">
100           <div><span>优惠:</span> <span>200.00</span></div>
101           <div>实付:<span>97800.00</span></div>
102         </div>
103         <div class="money-type">
104           <el-radio-group v-model="radio">
105             <el-radio :label="3">
106               <div class="xiaoniu">小牛币</div>
107             </el-radio>
108             <el-radio :label="6">
109               <div class="wx">
110                 <i class="iconfont icon-weixin"></i>
111                 <span> 微信支付</span>
112               </div>
113             </el-radio>
114           </el-radio-group>
115         </div>
116
117         <div class="linkman">
118           <div class="linkman-title">
119             <i class="el-icon-phone-outline"></i>
120             <span>联系方式</span>
121           </div>
122           <div class="link-man">
123             <div class="link-number">
124               <div class="man">
125                 <span>联系人:</span
126                 ><el-input
127                   v-model="portOrderSave.OrderContacts"
128                   clearable
129                 ></el-input>
130               </div>
131               <div class="phone">
132                 <span>联系电话:</span>
133                 <el-input
134                   v-model="portOrderSave.OrderContactsPhone"
135                   clearable
136                 ></el-input>
137               </div>
138             </div>
139             <div class="link-ramark">
140               <span>备注:</span
141               ><el-input
142                 type="textarea"
143                 v-model="portOrderSave.OrderRemark"
144               ></el-input>
145             </div>
146           </div>
147
7f5659 148           <!-- <div class="linkman-title shunfeng" v-if="isShowShun">
423585 149             <div>
C 150               <i class="iconfont icon-wuliuxinxi"></i>
151               <span>顺风达</span>
152               <span class="remind">注:顺风达评车总额将不进入支付总额内。</span>
153             </div>
154             <div class="money">
155               <span>拼车价:{{routerPrice}}</span>
156             </div>
157           </div>
158           <div class="link-man"  v-if="isShowShun">
159             <div class="link-number">
160               <div class="man shunfeng-time">
161                 <span>拼单截止时间:</span>
162                 <el-date-picker
163                   v-model="endtime"
164                   type="datetime"
165                   placeholder="选择日期时间"
166                 >
167                 </el-date-picker>
168               </div>
169             </div>
170             <div class="link-ramark shun-remark">
171               <span>备注:</span><el-input type="textarea" v-model="orderRemark"></el-input>
172             </div>
7f5659 173           </div> -->
423585 174         </div>
C 175         <div class="quan">我的优惠券</div>
176         <div class="reduce">
177           <div class="ticket" v-for="(item, index) in 8" :key="index">
178             <div class="money">{{ item }}<span>元</span></div>
179             <div class="text">优惠抵用券</div>
180           </div>
181         </div>
182       </div>
183       <span slot="footer" class="dialog-footer">
184         <el-button @click="orderDialog = false">取 消</el-button>
185         <el-button type="primary" @click="orderSure">确 定</el-button>
186       </span>
187     </el-dialog>
188   </div>
189 </template>
190 <script>
191 import BoxType from "@/components/agopage/comment/BoxType.vue";
192 import AddBox from "@/components/agopage/comment/AddBox.vue";
193 export default {
194   data() {
195     return {
196       value3: "",
197       checked: false,
198       num: 1,
199       orderDialog: false,
200       radio: 3,
201       addBoxDialog: false,
202       allOrder: {},
203       portOrderSave: {
204         CityId: "",
205         OrderType: 1,
206         PickPlace: "",
207         ReturnPlace: "",
208         CaPositionLongitude: "",
209         CaPositionLatitude: "",
210         OrderContacts: "",
211         OrderContactsPhone: "",
212         OrderPayType: 0,
213         OrderUseCoupon: 0,
214         CouponIdentifier: "",
215         Goods: "",
216         OrderRemark: "",
217         OrderDetailed: [],
218       },
219       CusSurplusAmount: 0,
220       myCoupon: [],
221       orderRemark:"",
222       endtime:"",
223       isShowShun:false,
224       routerPrice:0,
225       pid:"",
226     };
227   },
228   components: {
229     BoxType,
230     AddBox,
231   },
232   created() {
233     this.getTempOrder();
234   },
235   methods: {
236     orderSure() {
237       console.log(this.allOrder);
238       this.portOrderSave.CityId = "5dc90c98-475e-4529-bb3a-c3010a82b0e1";
239       this.portOrderSave.OrderType = 1;
240       this.portOrderSave.PickPlace = this.allOrder.tempOrderForms[0].tempOrder.PickPlace;
241       this.portOrderSave.ReturnPlace = this.allOrder.tempOrderForms[0].tempOrder.ReturnPlace;
242       this.portOrderSave.CaPositionLongitude = this.allOrder.OrderAddressLongitude;
243       this.portOrderSave.CaPositionLatitude = this.allOrder.OrderAddressLatitude;
244       this.portOrderSave.CaAdress = this.allOrder.OrderAddress;
245      
246       this.portOrderSave.OrderPayType = 0;
247       this.portOrderSave.OrderUseCoupon = 0;
248       this.portOrderSave.Goods = this.allOrder.TransportGoods;
249       for (var i = 0; i < this.allOrder.tempOrderForms.length; i++) {
250         if(this.allOrder.tempOrderForms[i].tempOrder.TempOrderContainer.length>0){
251           for(var j = 0;j<this.allOrder.tempOrderForms[i].tempOrder.TempOrderContainer.length;j++){
252                 this.portOrderSave.OrderDetailed.push({
253           CtnerId: this.allOrder.tempOrderForms[i].tempOrder.TempOrderID,
254           CtnerNub: this.allOrder.tempOrderForms[i].tempOrder.ContainerNub,
255           SelfBox: this.allOrder.tempOrderForms[i].tempOrder.SelfBox?1:0,
256
257           OdtaskIsUrgent: this.allOrder.tempOrderForms[i].tempOrder.IsUrgent?1:0,
258
259           Defaultset: 0,
260
261           BolCode: this.allOrder.tempOrderForms[i].tempOrder.TempOrderContainer[j].BolCode,
262           TradeCode: this.allOrder.tempOrderForms[i].tempOrder.TempOrderContainer[j].TradeCode,
263           ArriveTime: this.allOrder.tempOrderForms[i].tempOrder.ArriveTime,
264           ShipAgent:this.allOrder.tempOrderForms[i].tempOrder.TempOrderContainer[j].ShipAgent,
265           ContainerOwner: this.allOrder.tempOrderForms[i].tempOrder.TempOrderContainer[j].ContainerOwner,
266           ContainerNo: this.allOrder.tempOrderForms[i].tempOrder.TempOrderContainer[j].ContainerNo,
267          
268           BoxSeal:this.allOrder.tempOrderForms[i].tempOrder.TempOrderContainer[j].BoxSeal,
269            IsCarPooling: this.allOrder.tempOrderForms[i].tempOrder.IsCarPooling?1:0,
270
271             Weight: this.allOrder.tempOrderForms[i].tempOrder.Weight,
272              EndTime: this.endtime,
273                OrderRemark: this.orderRemark
274         });
7f5659 275         }
C 276           
423585 277         }else{
7f5659 278             this.portOrderSave.OrderDetailed.push({
C 279                 CtnerId: this.allOrder.tempOrderForms[i].tempOrder.TempOrderID,
280           CtnerNub: this.allOrder.tempOrderForms[i].tempOrder.ContainerNub,
281           SelfBox: this.allOrder.tempOrderForms[i].tempOrder.SelfBox?1:0,
282          
283           OdtaskIsUrgent: this.allOrder.tempOrderForms[i].tempOrder.IsUrgent?1:0,
284
285           Defaultset: 0,
286            IsCarPooling: this.allOrder.tempOrderForms[i].tempOrder.IsCarPooling?1:0,
287
288             Weight: this.allOrder.tempOrderForms[i].tempOrder.Weight,
289              EndTime: this.endtime,
290                OrderRemark: this.orderRemark
291             })
423585 292           //  this.portOrderSave.OrderDetailed=[];
C 293         }
294       
295       }
296       this.getPortOrderSave(this.portOrderSave);
297       this.orderDialog = false;
298     },
299     //提交订单
300       async getPortOrderSave(model) {
301       await this.$axios
302         .post("/api/Order/PortOrderSave",this.$qs.stringify(model))
303         .then((res) => {
304           console.log(this.portOrderSave);
305          console.log(res);
306         })
307         .catch((err) => {
308           console.log(err);
309         });
310     },
311     //获取临时订单
312     async getTempOrder() {
313       await this.$axios
314         .post("/api/Order/GetTempOrderAll")
315         .then((res) => {
316           // console.log(res);
317           let model = {};
318           model = res.data;
319           var orderinQiry = {
320             TempOrderID: "",
321             OdiqWeight: "",
322             OdiqTemperature: "",
323             OdiqLong: "",
324             OdiqWidth: "",
325             OdiqHeight: "",
326             OdiqRemarks: "",
327             OdiqGoods: "",
328           };
329           for (var i = 0; i < model.tempOrderForms.length; i++) {
330             model.tempOrderForms[i].orderData = Object.assign({}, orderinQiry);
331             if(  model.tempOrderForms[i].tempOrder.IsCarPooling==1){
332               this.isShowShun = true;
333             }
334           }
335           this.allOrder = model;
336           console.log(this.allOrder);
337         })
338         .catch((err) => {
339           console.log(err);
340         });
341     },
342     handleChange(value) {
343       console.log(value);
344     },
345     //接收拼车的信息
346     acceptPin(e){
347       
348       if(e==""){
349         this.pid="";
350         this.isShowShun = false;
351       }else{
352         this.pid = e;
353          this.isShowShun = true;
354       }
355          
356     },
357     placeOrder() {
7f5659 358       console.log(this.allOrder);
423585 359       this.getPayCaptal();
C 360       this.getMyCoupon();
361       if(this.pid!=""){
362             this.getRoutePrice({
363         PickPlace:this.allOrder.tempOrderForms[0].tempOrder.PickPlace,
364         AddressLongitude:this.allOrder.OrderAddressLongitude,
365         AddressLatitude:this.allOrder.OrderAddressLatitude,
366         ReturnPlace:this.allOrder.tempOrderForms[0].tempOrder.ReturnPlace,
367         CtnerId:this.pid,
368         TransType:1,
369       })
370       }
371     
372       // this.getTempOrder();
373       this.orderDialog = true;
374       
375     },
376     //获取运输价格
377     async getRoutePrice(model) {
378       await this.$axios
379         .post("/api/Order/GetTransPortationRoutePrice",this.$qs.stringify(model))
380         .then((res) => {
381             this.routerPrice = res.data;
382         })
383         .catch((err) => {
384           console.log(err);
385         });
386     },
387     //获取余额和联系人
388     async getPayCaptal() {
389       await this.$axios
390         .post("/api/Order/GetMyPayCaptal")
391         .then((res) => {
392           this.CusSurplusAmount = res.data.CusSurplusAmount;
393           this.portOrderSave.OrderContacts = res.data.Contacts;
394           this.portOrderSave.OrderContactsPhone = res.data.ContactPhone;
395         })
396         .catch((err) => {
397           console.log(err);
398         });
399     },
400     //获取优惠券
401     async getMyCoupon() {
402       await this.$axios
403         .post("/api/Order/GetMyCoupon")
404         .then((res) => {
405           this.myCoupon = res.data;
406         })
407         .catch((err) => {
408           console.log(err);
409         });
410     },
411     handleClose(done) {
412       this.$confirm("确认关闭?")
413         .then((_) => {
414           done();
415         })
416         .catch((_) => {});
417     },
418   },
419 };
420 </script>
421 <style lang="less" scoped>
422 .fronthome-main {
423   display: block;
424   border: 1px solid #c3c3c3;
425   padding: 10px 20px;
426   border-radius: 3px;
427   box-shadow: 2px 2px 8px #c3c3c3;
428   box-sizing: border-box;
429 }
430 .fronthome-top {
431   margin-top: 20px;
432 }
433 .enquiry-title,
434 .title-one,
435 .table-title,
436 .show-data,
437 .inquiry-foot {
438   display: flex;
439   justify-content: space-between;
440 }
441 .enquiry-title {
442   padding-bottom: 10px;
443   font-size: 14px;
444 }
445 .letter {
446   color: #f6a438;
447 }
448 .title-one {
449   padding-top: 10px;
450   padding-bottom: 20px;
451   border-top: 1px solid #ecebeb;
452   font-size: 14px;
453   color: #888686;
454 }
455 .show-main {
456   padding-bottom: 10px;
457   border-bottom: 1px solid #e7e7e7;
458 }
459 .inquiry-foot {
460   padding: 10px 20px;
461 }
462 .top-middle,
463 .top-right {
464   display: flex;
465   align-items: center;
466 }
467 .top-middle i {
468   font-size: 20px;
469   color: #c3c3c3;
470   margin-right: 5px;
471 }
472 .top-middle span {
473   font-size: 12px;
474   color: #c3c3c3;
475 }
476 .top-right div {
477   display: flex;
478   align-items: center;
479   margin-right: 6px;
480 }
481 .top-right div span {
482   margin-left: 6px;
483 }
484 .title-one i {
485   font-size: 25px;
486   margin-right: 6px;
487 }
488 .title-one div {
489   display: flex;
490   align-items: center;
491 }
492 .title-one .bar {
493   font-size: 16px;
494   font-weight: bold;
495   color: #000;
496   margin-right: 10px;
497 }
498 .table-title {
499   padding-bottom: 10px;
500   color: #868686;
501 }
502 .table-title span {
503   text-align: center;
504 }
505 .table-title .box {
7f5659 506   width: 157px;
423585 507 }
C 508 .table-title .time {
509   width: 220px;
510 }
511 .table-title .weight {
512   width: 65px;
513 }
514 .table-title .info {
7f5659 515   width: 157px;
423585 516 }
C 517 .table-title .number {
518   width: 100px;
519 }
520 .table-title .type {
521   width: 82px;
522 }
523 .table-title .money {
524   width: 200px;
525   text-align: left;
526 }
527 .show-data .one,
528 .show-data .box {
529   border: 1px solid #f3f3f3;
530   height: 40px;
531   line-height: 40px;
532   padding: 0 5px;
533   border-radius: 3px;
534   color: #b2b2b2;
535   font-size: 14px;
536 }
537 .show-data .one .gp {
538   font-weight: bold;
539   font-size: 16px;
540   margin: 0 3px;
541 }
542 .show-data .money {
543   display: flex;
544   align-items: center;
545   width: 200px;
546   justify-content: space-between;
547 }
548 .show-data .weight {
549   /deep/.el-input {
550     width: 65px;
551   }
552 }
553 .show-data .type {
554   display: flex;
555   flex-direction: column;
556 }
557 .show-data .number {
558   /deep/.el-input-number {
559     width: 100px;
560   }
561   /deep/.el-input-number .el-input__inner {
562     padding: 0 25px;
563   }
564   /deep/.el-input-number__increase {
565     width: 25px;
566   }
567   /deep/.el-input-number__decrease {
568     width: 25px;
569   }
570 }
571 .show-data .money div:first-child {
572   color: #d9001b;
573   font-size: 14px;
574 }
575 .show-data .money div:last-child button {
576   padding: 7px 12px;
577   color: #fff;
578   background-color: #f59a23;
579   font-weight: bold;
580   border: none;
581   outline: none;
582   cursor: pointer;
583   border-radius: 6px;
584 }
585 .inquiry-foot div:first-child {
586   display: flex;
587   align-items: center;
588   color: #868686;
589 }
590 .inquiry-foot div:last-child {
591   display: flex;
592   align-items: center;
593   color: #d9001b;
594   font-weight: 550;
595 }
596 .inquiry-foot div:last-child button {
597   border: none;
598   outline: none;
599   padding: 8px 15px;
600   border-radius: 6px;
601   cursor: pointer;
602   background-color: #f59a23;
603   color: #fff;
604   font-weight: bold;
605   margin-left: 20px;
606 }
607 .inquiry-foot div:first-child span {
608   margin-left: 6px;
609   text-decoration: underline;
610 }
611
612 //弹窗样式
613 .order .title {
614   display: flex;
615   justify-content: space-between;
616 }
617 .order .title span:first-child {
618   color: #f59a23;
619 }
620 .order .title span:last-child {
621   color: #d9001b;
622   font-weight: bold;
623 }
624 .place-order {
625   font-size: 16px;
626 }
627 .place-order {
628   /deep/.el-dialog__body {
629     padding: 0 30px;
630   }
631 }
632 .order .my {
633   padding: 15px 0px;
634   display: flex;
635   justify-content: center;
636   color: #000;
637 }
638 .order .my i {
639   font-size: 20px;
640   margin-right: 10px;
641 }
642 .order .sale div {
643   text-align: center;
644   line-height: 30px;
645 }
646 .order .sale div:last-child {
647   color: #d9001b;
648   font-weight: bold;
649 }
650 .order .money-type {
651   padding: 10px 0;
652   /deep/.el-radio {
653     display: flex;
654     align-items: center;
655   }
656   /deep/.el-radio-group {
657     display: flex;
658     justify-content: center;
659   }
660 }
661 .money-type .xiaoniu,
662 .wx {
663   border: 1px solid #c3c3c3;
664   padding: 6px 20px;
665   border-radius: 6px;
666 }
667 .wx i {
668   color: #07c160;
669 }
670 .reduce {
671   display: flex;
672   padding: 10px 0;
673   border-top: 1px solid #e7e7e7;
674   justify-content: space-between;
675   flex-wrap: wrap;
676 }
677 .quan {
678   padding: 10px 0;
679   font-weight: bold;
680   color: #000;
681 }
682 .reduce .ticket {
683   border: 1px solid #d6d4d4;
684   border-radius: 6px;
685   display: flex;
686   margin-bottom: 10px;
687   // padding: 15px 30px;
688   box-shadow: 3px 3px 3px #d6d4d4;
689 }
690 .reduce .ticket .money {
691   font-weight: bold;
692   font-size: 18px;
693   border-right: 1px solid #c3c3c3;
694   padding: 10px 10px;
695 }
696 .reduce .ticket .text {
697   background-color: #f59a23;
698   color: #fff;
699   font-weight: bold;
700   padding: 10px 25px;
701   border-top-right-radius: 6px;
702   border-bottom-right-radius: 6px;
703 }
704 .link-number,
705 .link-ramark,
706 .man,
707 .phone {
708   display: flex;
709   align-items: center;
710 }
711 .link-number .man span {
712   width: 58px;
713 }
714 .link-number {
715   padding: 10px 0px;
716 }
717 .link-number .phone span {
718   margin-left: 10px;
719   width: 80px;
720 }
721 .link-number {
722   /deep/.el-input {
723     width: auto;
724   }
725 }
726 .link-ramark span {
727   width: 60px;
728 }
729 .linkman-title {
730   padding-bottom: 10px;
731   border-bottom: 1px solid #c3c3c3;
732 }
733 .linkman-title i {
734   margin-right: 10px;
735   font-size: 20px;
736 }
737 .linkman-title span {
738   font-size: 16px;
739 }
740 .linkman .shunfeng {
741   margin-top: 10px;
742   display: flex;
743   justify-content: space-between;
744 }
745 .linkman .shunfeng .remind {
746   font-size: 12px;
747   color: #f6a438;
748   margin-left: 20px;
749 }
750 .linkman .shunfeng .money {
751   color: #d9001b;
752 }
753 .link-number .shunfeng-time span {
754   width: 100px;
755 }
756 .shun-remark span {
757   width: 103px;
758   padding-right: 10px;
759   text-align: right;
760 }
761 </style>