小牛集卡web 客户端
chenwei
2021-06-08 e41faf1640e2e71febf4ba347a301e0c043b6ce9
commit | author | age
423585 1 <template>
C 2   <div>
3     <div class="left-main">
4       <div class="content">
5         <div class="nav">
6           <div
7             v-for="(item, index) in nav"
8             :key="index"
9             @click="changeType(item)"
10             :class="{ meactive: item == isType }"
11           >
12             {{ item }}
13           </div>
14         </div>
15         <div class="form">
e41faf 16           <el-form ref="form" :model="submitForm" label-width="160px">
423585 17             <el-form-item>
C 18               <template slot="label">
19                 <div class="form-label">
20                   <i class="iconfont icon-listmatou"></i>
e41faf 21
423585 22                   <span>提箱地 : </span>
C 23                 </div>
24               </template>
25               <div class="form-input">
e41faf 26
C 27                     <box-adress
28                 :boxaddress="retrunPlaceList"
29                 @acceptreturn="acceptReturnAdress"
30               ></box-adress>
423585 31               </div>
C 32             </el-form-item>
33             <el-form-item>
34               <template slot="label">
35                 <div class="form-label">
36                   <i
37                     class="iconfont icon-diaoyun_lift_jizhuangxiang_container"
38                   ></i>
39                   <span>装卸地 : </span>
40                 </div>
41               </template>
42               <div class="form-input enter-text">
e41faf 43                   <ai-adress @platfrom="platFormData"></ai-adress>
C 44
423585 45                 <div class="suffix-txt">
e41faf 46                   <div @click="usualAdrDialog = true">常用地址</div>
423585 47                 </div>
C 48               </div>
49             </el-form-item>
50             <el-form-item>
51               <template slot="label">
52                 <div class="form-label">
53                   <i class="iconfont icon-components-full"></i>
54                   <span>还箱地 : </span>
55                 </div>
56               </template>
e41faf 57               <box-adress
C 58                 :boxaddress="retrunPlaceList"
59                 @acceptreturn="acceptReturnAdress"
60               ></box-adress>
423585 61             </el-form-item>
C 62             <el-form-item>
63               <template slot="label">
64                 <div class="form-label">
65                   <i class="iconfont icon-express-package-full"></i>
e41faf 66                   <span>配拖箱型 : </span>
423585 67                 </div>
C 68               </template>
69               <div class="form-input">
e41faf 70                 <div class="box-type">
C 71                   <div >
72                     <el-select v-model="value" placeholder="请选择">
73                       <el-option
74                         v-for="item in options"
75                         :key="item.value"
76                         :label="item.label"
77                         :value="item.value"
78                       >
79                       </el-option>
80                     </el-select>
81                   </div>
82                 </div>
423585 83               </div>
C 84             </el-form-item>
e41faf 85              <el-form-item>
423585 86               <template slot="label">
C 87                 <div class="form-label">
88                   <i class="iconfont icon-express-package-full"></i>
89                   <span>重量 : </span>
90                 </div>
91               </template>
e41faf 92               <div class="form-input">
C 93                 <div class="box-type">
94                   <div class="tibox-adres" style="display:flex;">
95                        <el-input
96                     @focus="tiFocus"
97                    type="number"
98                     v-model="playBox"
99                   ></el-input>
100                   <span style="margin-left:6px;">吨</span>
101                   </div>
102                 </div>
423585 103               </div>
C 104             </el-form-item>
105             <el-form-item>
106               <template slot="label">
107                 <div class="form-label">
108                   <i class="iconfont icon-shijian"></i>
e41faf 109                   <span>配拖时间: </span>
423585 110                 </div>
C 111               </template>
112               <div class="form-input">
113                 <el-date-picker
e41faf 114                   range-separator="至"
C 115                   start-placeholder="开始日期"
116                   end-placeholder="结束日期"
117                   v-model="submitForm.ArriveTime"
118                   type="daterange"
119                   placeholder="选择日期时间"
120                   :picker-options="urgentTime"
121                   value-format="yyyy-MM-dd HH:mm"
423585 122                 >
C 123                 </el-date-picker>
124               </div>
125             </el-form-item>
126             <el-form-item>
127               <template slot="label">
128                 <div class="form-label">
129                   <i class="iconfont icon-express-package-full"></i>
130                   <span>物品 : </span>
131                 </div>
132               </template>
133               <div class="form-input">
e41faf 134                 <div
C 135                   class="product"
136                   v-for="(item, indexp) in productData"
137                   :key="indexp"
138                   :class="{ activebox: activeProduct == item }"
139                   @click="selProeuct(item)"
140                 >
141                   {{ item.GoodsTypeName }}
423585 142                 </div>
C 143                 <div class="pro-input">
e41faf 144                   <el-input
C 145                     placeholder="输入物品"
146                     v-model="productVal"
147                     @focus="proInput"
148                   ></el-input>
423585 149                 </div>
C 150               </div>
151             </el-form-item>
152           </el-form>
153           <div class="undeter">
154             <img src="../../../../public/img/index/tuidan.svg" alt="" />
155             <span>箱子具体信息[智能输入]</span>
156           </div>
157         </div>
158       </div>
159       <div class="btns" v-if="!cardialog">
160         <div class="mill" v-for="(fitem, findex) in factory" :key="findex">
161           {{ fitem }}
162         </div>
163         <div class="change-mill">
164           <i class="el-icon-refresh"></i>
165           <span>换一换</span>
166         </div>
167         <div class="place-order">
168           <button @click="inquiryOrder">
169             <i class="el-icon-search"></i>询价下单
170           </button>
171         </div>
172       </div>
173
174       <div class="share-pill" v-if="cardialog">
175         <button @click="sharePill">拼 单</button>
176       </div>
177     </div>
e41faf 178     <el-dialog
C 179       title="顺风达拼车"
180       :visible.sync="carDialog"
181       width="900px"
182       class="ride"
183     >
7f5659 184       <!-- <car-pool></car-pool> -->
e41faf 185       <car-sharing></car-sharing>
423585 186     </el-dialog>
C 187   </div>
188 </template>
189 <script>
190 import Wind from "./Wind.vue";
191 import ShareCar from "../comment/ShareCar.vue";
7f5659 192 // import CarPool from "./CarPool.vue";
e41faf 193 import CarSharing from "../comment/CarSharing.vue";
7f5659 194 import AiAdress from "../map/AiAdress.vue";
e41faf 195 import BoxAdress from "../comment/BoxAdress";
423585 196 export default {
C 197   data() {
198     return {
199       nav: ["我要装", "我要卸"],
e41faf 200       
423585 201       lunboImg: [
C 202         require("../../../../public/img/index/lunbo.png"),
203         require("../../../../public/img/index/niu.png"),
204         require("../../../../public/img/index/erweima.jpg"),
205         require("../../../../public/img/index/driver.png"),
206       ],
207       isType: "我要装",
208       form: {
209         name: "",
210         region: "",
211         date1: "",
212         date2: "",
213         delivery: false,
214         type: [],
215         resource: "",
216         desc: "",
217       },
7f5659 218       submitForm: {
C 219         CityId: "5dc90c98-475e-4529-bb3a-c3010a82b0e1",
220         OrderType: 3,
221       },
423585 222       radio1: "",
e41faf 223       productData: [],
423585 224       value1: "",
C 225       factory: ["重庆长安新厂区", "重庆福特厂区", "重庆福特配件厂区"],
226       activeVal: "",
7f5659 227       carDialog: false,
e41faf 228       retrunPlaceList:[],
C 229       urgentTime:{
230           disabledDate(time) {
231             //只能选择的当天及当天之后的日期
232             return time.getTime() < Date.now() - 8.64e7;
233           }
234       }
423585 235     };
C 236   },
7f5659 237   components: {
C 238     Wind,
423585 239     ShareCar,
7f5659 240     // CarPool,
e41faf 241     AiAdress,
C 242     BoxAdress,
243     CarSharing,
423585 244   },
C 245   props: ["cardialog"],
246   methods: {
e41faf 247     //接收装卸地传来的数据
C 248     platFormData(e){
249       console.log(e);
250     },
423585 251     proActive(content) {
7f5659 252       this.activeVal = content;
423585 253     },
7f5659 254     proInput() {
C 255       this.activeVal = "";
423585 256     },
C 257     changeType(item) {
258       this.isType = item;
259     },
260     inquiryOrder() {
261       this.carDialog = true;
262       // this.$router.push("/inquiry");
263     },
264     sharePill() {
265       this.$emit("share", this.form);
266     },
267   },
268 };
269 </script>
270 <style lang="less" scoped>
7f5659 271 // 修改弹窗的样式
e41faf 272 .ride {
C 273   /deep/.el-dialog__body {
7f5659 274     padding: 0 10px;
C 275     padding-bottom: 10px;
276   }
277 }
423585 278 .activepro {
C 279   background-color: #e6a23c;
280   color: #fff;
281 }
282 .wind-weight {
283   /deep/.el-input {
284     width: 200px;
285   }
286 }
287 .wind-weight span {
288   color: #aaaaaa;
289   margin-left: 6px;
290 }
291 .share-pill {
292   text-align: center;
293 }
294 .share-pill button {
295   background-color: #f59a23;
296   padding: 6px 25px;
297   outline: none;
298   border: none;
299   border-radius: 3px;
300   cursor: pointer;
301   color: #fff;
302   font-weight: bold;
303   font-size: 16px;
304 }
305 .share-pill button:hover {
306   background-color: #f7b053;
307 }
308 .fronthome-top {
309   margin-top: 20px;
310 }
311 .left-main .content {
312   display: flex;
313 }
314 .nav {
315   display: flex;
316   flex-direction: column;
317   justify-content: space-between;
318 }
319 .nav div {
320   display: flex;
321   flex-direction: column;
322   justify-content: center;
323   height: 100%;
324   width: 16px;
325   padding: 0 10px;
326   background-color: #000;
327   color: #fff;
328   border: 1px solid #efefef;
329 }
330 .meactive {
331   background-color: #fff !important;
332   color: #000 !important;
333 }
334 .meactive::before {
335   content: url("../../../../public/img/index/gouxuan2.svg");
336 }
337 .left-main .content {
338   margin: 10px;
339 }
340 .content .form {
341   width: 100%;
342   border: 1px solid #aaaaaa;
343   padding: 10px;
344   box-sizing: border-box;
345 }
346 .form-label {
347   display: flex;
348   justify-content: flex-end;
349   align-items: center;
350 }
351 .form-label i {
352   font-size: 30px;
353   margin-right: 10px;
354 }
355 .form-label span {
356   font-weight: 900;
357   font-size: 18px;
358   color: #000;
359   width: 90px;
360 }
361 .form-input {
362   display: flex;
363   flex-wrap: wrap;
364 }
365 .enter-text {
366   /deep/.el-input {
367     width: 300px;
368   }
369 }
370 .suffix-txt {
371   display: flex;
372   margin-left: 50px;
373   color: #aaaaaa;
374 }
375 .suffix-txt div {
376   margin-right: 20px;
377 }
378 .product {
379   padding: 0px 40px;
380   border: 1px solid #e4e4e4;
381   margin-right: 30px;
382   margin-bottom: 10px;
383   cursor: pointer;
384   border-radius: 3px;
385 }
386 .pro-input {
387   /deep/.el-input {
388     width: 117px;
389   }
390 }
391 .undeter {
392   display: flex;
393   align-items: center;
394 }
395 .undeter span {
396   text-decoration: underline;
397   color: #aaaaaa;
398   margin-left: 15px;
399   cursor: pointer;
400 }
401 .btns {
402   display: flex;
403   justify-content: space-between;
404   padding: 0 10px;
405   box-sizing: border-box;
406   padding-left: 48px;
407   padding-bottom: 10px;
408   color: #8b8b8b;
409 }
410 .btns .mill {
411   border: 1px solid #e4e4e4;
412   padding: 5px 20px;
413   cursor: pointer;
414 }
415 .btns .change-mill,
416 .btns .place-order {
417   display: flex;
418   align-items: center;
419 }
420 .btns .change-mill span {
421   cursor: pointer;
422   margin-left: 3px;
423 }
424 .place-order button {
425   padding: 5px 20px;
426   color: #fff;
427   font-weight: bold;
428   background-color: #f59a23;
429   cursor: pointer;
430   outline: none;
431   border: none;
432   border-radius: 3px;
433 }
434 .place-order button i {
435   margin-right: 5px;
436 }
437 .place-order button:hover {
438   background-color: #f3a53f;
439 }
440 .right img {
441   width: 400px;
442   height: 100%;
443 }
444 </style>