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