朱兆平 / vue_cli · 提交

转到一个项目

作者 小范
提交 3fdf020dd263b2134f65b243361e2e4555eb42ad 1 个父辈 5621a28c

订舱系统界面更新

内嵌 并排对比
正在显示 4 个修改的文件 包含 397 行增加 和 303 行删除
@@ -24,7 +24,7 @@ module.exports = { @@ -24,7 +24,7 @@ module.exports = {
24 }, 24 },
25 dev: { 25 dev: {
26 env: require('./dev.env'), 26 env: require('./dev.env'),
27 - port: 12024, 27 + port: 12021,
28 autoOpenBrowser: true, 28 autoOpenBrowser: true,
29 assetsSubDirectory: 'static', 29 assetsSubDirectory: 'static',
30 assetsPublicPath: '/', 30 assetsPublicPath: '/',
@@ -235,7 +235,7 @@ @@ -235,7 +235,7 @@
235 </table> 235 </table>
236 </div> 236 </div>
237 <div style="text-align: center;margin-top: 30px"> 237 <div style="text-align: center;margin-top: 30px">
238 - <el-button type="danger" style="width: 180px;height: 50px">确认下单</el-button> 238 + <el-button type="danger" style="width: 180px;height: 50px" @click="open">确认下单</el-button>
239 </div> 239 </div>
240 <div style="margin-top: 50px;height: 80px"> </div> 240 <div style="margin-top: 50px;height: 80px"> </div>
241 </div> 241 </div>
@@ -244,6 +244,20 @@ @@ -244,6 +244,20 @@
244 244
245 <script> 245 <script>
246 export default { 246 export default {
  247 + methods:{
  248 +
  249 + open() {
  250 + this.$alert('确认下单？', '', {
  251 + confirmButtonText: '确定',
  252 + callback: action => {
  253 + this.$message({
  254 + type: 'info',
  255 + message: `action: ${ action }`
  256 + });
  257 + }
  258 + });
  259 + }
  260 + }
247 } 261 }
248 </script> 262 </script>
249 263
@@ -260,7 +274,9 @@ @@ -260,7 +274,9 @@
260 .px{ 274 .px{
261 background-color: #FFFFFF; 275 background-color: #FFFFFF;
262 width: 100%; 276 width: 100%;
263 - height: 500px; 277 + height: 850px;
  278 + overflow: auto;
  279 +
264 } 280 }
265 .title{ 281 .title{
266 color: #127ef2; 282 color: #127ef2;
@@ -25,14 +25,14 @@ @@ -25,14 +25,14 @@
25 </el-form-item> 25 </el-form-item>
26 <el-form-item label="起运地"> 26 <el-form-item label="起运地">
27 <el-select style="width: 320px" v-model="form.originStation" placeholder="起运地"> 27 <el-select style="width: 320px" v-model="form.originStation" placeholder="起运地">
28 - <el-option label="上海" value="shanghai"></el-option>  
29 - <el-option label="北京" value="beijing"></el-option> 28 + <el-option label="CGO" value="shanghai"></el-option>
  29 + <el-option label="LUX" value="beijing"></el-option>
30 </el-select> 30 </el-select>
31 </el-form-item> 31 </el-form-item>
32 <el-form-item label="目的地"> 32 <el-form-item label="目的地">
33 <el-select style="width: 320px" v-model="form.deliveryAddress" placeholder="目的地"> 33 <el-select style="width: 320px" v-model="form.deliveryAddress" placeholder="目的地">
34 - <el-option label="上海" value="shanghai"></el-option>  
35 - <el-option label="北京" value="beijing"></el-option> 34 + <el-option label="CGO" value="shanghai"></el-option>
  35 + <el-option label="LUX" value="beijing"></el-option>
36 </el-select> 36 </el-select>
37 </el-form-item> 37 </el-form-item>
38 <el-form-item label="货物重量"> 38 <el-form-item label="货物重量">
@@ -56,7 +56,8 @@ @@ -56,7 +56,8 @@
56 </el-col> 56 </el-col>
57 <!-- 广告位--> 57 <!-- 广告位-->
58 <el-col :span="13" style="margin-right: 0px;background-color: rgba(41,161,247,0.1);float: right;"> 58 <el-col :span="13" style="margin-right: 0px;background-color: rgba(41,161,247,0.1);float: right;">
59 - <div style="height: 600px;"> 59 + <div style="height: 600px;width: 500px">
  60 + <img src="./air.jpg" width="700px" height="600px"/>
60 </div> 61 </div>
61 </el-col> 62 </el-col>
62 </el-row> 63 </el-row>
@@ -97,7 +98,7 @@ @@ -97,7 +98,7 @@
97 <el-button 98 <el-button
98 size="small" plain 99 size="small" plain
99 type="warning" 100 type="warning"
100 - @click="">订舱</el-button> 101 + @click="open">订舱</el-button>
101 </template> 102 </template>
102 </el-table-column> 103 </el-table-column>
103 </el-table> 104 </el-table>
@@ -115,7 +116,7 @@ @@ -115,7 +116,7 @@
115 <el-row style="height: 300px;margin-top: 0px"> 116 <el-row style="height: 300px;margin-top: 0px">
116 <el-col :span="8" 117 <el-col :span="8"
117 style="border-right:solid 1px #F5F5F5;border-bottom:solid 1px #F5F5F5;height: 300px;width: 32%;margin-right: 15px"> 118 style="border-right:solid 1px #F5F5F5;border-bottom:solid 1px #F5F5F5;height: 300px;width: 32%;margin-right: 15px">
118 - <h2>CZ</h2> 119 + <h2>CV</h2>
119 <el-table 120 <el-table
120 :data="tableData1" 121 :data="tableData1"
121 :header-cell-style="headClass" 122 :header-cell-style="headClass"
@@ -145,7 +146,7 @@ @@ -145,7 +146,7 @@
145 </el-col> 146 </el-col>
146 <el-col :span="8" 147 <el-col :span="8"
147 style="border-right:solid 1px #F5F5F5;border-bottom:solid 1px #F5F5F5;height: 300px;width: 32%;margin-right: 15px"> 148 style="border-right:solid 1px #F5F5F5;border-bottom:solid 1px #F5F5F5;height: 300px;width: 32%;margin-right: 15px">
148 - <h2>CZ</h2> 149 + <h2>CV</h2>
149 <el-table 150 <el-table
150 :data="tableData2" 151 :data="tableData2"
151 :header-cell-style="headClass" 152 :header-cell-style="headClass"
@@ -175,7 +176,7 @@ @@ -175,7 +176,7 @@
175 </el-col> 176 </el-col>
176 <el-col :span="8" 177 <el-col :span="8"
177 style="border-bottom:solid 1px #F5F5F5;height: 300px;width: 32%"> 178 style="border-bottom:solid 1px #F5F5F5;height: 300px;width: 32%">
178 - <h2>CZ</h2> 179 + <h2>CV</h2>
179 <el-table 180 <el-table
180 :data="tableData3" 181 :data="tableData3"
181 :header-cell-style="headClass" 182 :header-cell-style="headClass"
@@ -200,7 +201,7 @@ @@ -200,7 +201,7 @@
200 </el-table> 201 </el-table>
201 <div style="text-align: center;margin-top: 6px">交货地:GUANGZHOU AIRPORT 广州</div> 202 <div style="text-align: center;margin-top: 6px">交货地:GUANGZHOU AIRPORT 广州</div>
202 <div style="text-align: center;margin-top: 6px"> 203 <div style="text-align: center;margin-top: 6px">
203 - <el-button type="warning" plain style="width: 120px" >订舱</el-button> 204 + <el-button type="warning" plain style="width: 120px">订舱</el-button>
204 </div> 205 </div>
205 </el-col> 206 </el-col>
206 </el-row> 207 </el-row>
@@ -521,6 +522,7 @@ @@ -521,6 +522,7 @@
521 522
522 <script> 523 <script>
523 export default { 524 export default {
  525 +
524 data() { 526 data() {
525 return { 527 return {
526 // 空运查询 528 // 空运查询
@@ -531,11 +533,44 @@ @@ -531,11 +533,44 @@
531 weight:undefined, 533 weight:undefined,
532 }, 534 },
533 // 优价航线表格 535 // 优价航线表格
534 - tableData:[], 536 + tableData:[
  537 + {
  538 + airLine:'CGO-LUX',
  539 + transportLimitation:'2021-01-17-01-00',
  540 + deliveryAddress:'LUX',
  541 + flightCycle:'2',
  542 + transportPrice:'180',
  543 + }
  544 + ],
  545 +
535 // 热门航线表格 546 // 热门航线表格
536 - tableData1:[],  
537 - tableData2:[],  
538 - tableData3:[], 547 + tableData1:[
  548 + {
  549 + airLine:'CGO-LUX',
  550 + transportLimitation:'2021-01-17-01-00',
  551 + deliveryAddress:'LUX',
  552 + flightCycle:'2',
  553 + transportPrice:'180',
  554 + }
  555 + ],
  556 + tableData2:[
  557 + {
  558 + airLine:'LUX-CGO',
  559 + transportLimitation:'2021-01-18-12-00 ',
  560 + deliveryAddress:'CGO ',
  561 + flightCycle:'2',
  562 + transportPrice:'180',
  563 + }
  564 + ],
  565 + tableData3:[
  566 + {
  567 + airLine:'CGO-LUX',
  568 + transportLimitation:'2021-01-17-01-00',
  569 + deliveryAddress:'LUX',
  570 + flightCycle:'2',
  571 + transportPrice:'180',
  572 + }
  573 + ],
539 tableData4:[], 574 tableData4:[],
540 tableData5:[], 575 tableData5:[],
541 tableData6:[], 576 tableData6:[],
@@ -556,6 +591,17 @@ @@ -556,6 +591,17 @@
556 }, 591 },
557 rowClass () { 592 rowClass () {
558 return 'text-align: center;background:#F5F5F5;' 593 return 'text-align: center;background:#F5F5F5;'
  594 + },
  595 + open() {
  596 + this.$alert('确认订舱？', '', {
  597 + confirmButtonText: '确定',
  598 + callback: action => {
  599 + this.$message({
  600 + type: 'info',
  601 + message: `action: ${ action }`
  602 + });
  603 + }
  604 + });
559 } 605 }
560 }, 606 },
561 } 607 }
@@ -564,6 +610,10 @@ @@ -564,6 +610,10 @@
564 <style scoped> 610 <style scoped>
565 .bg{ 611 .bg{
566 background-color: #F2F2F2; 612 background-color: #F2F2F2;
  613 + width: 100%;
  614 + height: 850px;
  615 + overflow: auto;
  616 +
567 } 617 }
568 .header{ 618 .header{
569 font-size: 20px; 619 font-size: 20px;
1 -<!--<template>-->  
2 -<!-- <div class="bg order">-->  
3 -<!-- <span class="air">空运服务-订舱确认</span>-->  
4 -<!-- <div class="px">-->  
5 -<!--&lt;!&ndash; 下单信息&ndash;&gt;-->  
6 -<!-- <h4 class="title">下单信息</h4>-->  
7 -<!-- <div class="r-table">-->  
8 -<!-- <table class="tb">-->  
9 -<!-- <tbody>-->  
10 -<!-- <tr>-->  
11 -<!-- <th width="10%">航空公司</th>-->  
12 -<!-- <td width="10%">1</td>-->  
13 -<!-- <th width="10%">起运机场</th>-->  
14 -<!-- <td width="10%">1</td>-->  
15 -<!-- <th width="10%">目的机场</th>-->  
16 -<!-- <td width="10%">1</td>-->  
17 -<!-- <th width="10%">下单重量(KG)</th>-->  
18 -<!-- <td width="10%"><el-input v-model="weight" placeholder="" size="mini"></el-input></td>-->  
19 -<!-- <th width="10%">运价单价</th>-->  
20 -<!-- <td width="10%">1</td>-->  
21 -<!-- </tr>-->  
22 -<!-- <tr>-->  
23 -<!-- <th>报关方式</th>-->  
24 -<!-- <td colspan="4">-->  
25 -<!-- <el-radio v-model="customsType" label="1">自理报关</el-radio>-->  
26 -<!-- <el-radio v-model="customsCharges" label="2">委托报关</el-radio>-->  
27 -<!-- </td>-->  
28 -<!-- <th rowspan="4">附加费</th>-->  
29 -<!-- <td colspan="3">操作费： CNY 0.00/票</td>-->  
30 -<!-- <td><el-input-number v-model="" @change="handleChange" :min="1" :max="10" label="">-->  
31 -<!-- </el-input-number></td>-->  
32 -<!-- </tr>-->  
33 -<!-- <tr>-->  
34 -<!-- <th rowspan="3">门到门服务</th>-->  
35 -<!-- <td colspan="4"><el-checkbox v-model="homeDelivery">上门提货</el-checkbox></td>-->  
36 -<!-- <td colspan="3">制单费： CNY 50.00/票</td>-->  
37 -<!-- <td><el-input-number v-model="" @change="handleChange" :min="1" :max="10" label="">-->  
38 -<!-- </el-input-number></td>-->  
39 -<!-- </tr>-->  
40 -<!-- <tr>-->  
41 -<!-- <td colspan="4" rowspan="2"><el-checkbox v-model="sendToHome">清关派送</el-checkbox></td>-->  
42 -<!-- <td colspan="3">订舱预录费： CNY 30.00 /票</td>-->  
43 -<!-- <td><el-input-number v-model="" @change="handleChange" :min="1" :max="10" label="">-->  
44 -<!-- </el-input-number></td>-->  
45 -<!-- </tr>-->  
46 -<!-- <tr>-->  
47 -<!-- <td colspan="4">地面操作费： CNY 0/KG</td>-->  
48 -<!-- </tr>-->  
49 -<!-- <tr>-->  
50 -<!-- <th>预估费用</th>-->  
51 -<!-- <td colspan="3">运费：CNY 23500.00 (最低100.00KG 起运)</td>-->  
52 -<!-- <td colspan="3">附加费：CNY 230.00</td>-->  
53 -<!-- <td colspan="3">总费用：</td>-->  
54 -<!-- </tr>-->  
55 -<!-- </tbody>-->  
56 -<!-- </table>-->  
57 -<!-- </div>-->  
58 -<!--&lt;!&ndash; 货物信息&ndash;&gt;-->  
59 -<!-- <h4 class="title">货物信息</h4>-->  
60 -<!-- <div class="r-table">-->  
61 -<!-- <table class="tb" width="100%">-->  
62 -<!-- <tbody>-->  
63 -<!-- <tr>-->  
64 -<!-- <th width="35%">*是否有电池、液体、粉末、磁性及其它违禁物品</th>-->  
65 -<!-- <td width="15%">-->  
66 -<!-- <el-radio v-model="radio1" label="1">是</el-radio>-->  
67 -<!-- <el-radio v-model="radio1" label="2">否</el-radio></td>-->  
68 -<!-- <th width="35%">*是否购买保险</th>-->  
69 -<!-- <td width="15%">-->  
70 -<!-- <el-radio v-model="radio4" label="1">是</el-radio>-->  
71 -<!-- <el-radio v-model="radio4" label="2">否</el-radio></td>-->  
72 -<!-- </tr>-->  
73 -<!-- <tr>-->  
74 -<!-- <th width="35%">*是否超长托盘</th>-->  
75 -<!-- <td width="15%">-->  
76 -<!-- <el-radio v-model="radio1" label="1">是</el-radio>-->  
77 -<!-- <el-radio v-model="radio1" label="2">否</el-radio></td>-->  
78 -<!-- <th width="35%">*是否名牌</th>-->  
79 -<!-- <td width="15%">-->  
80 -<!-- <el-radio v-model="radio4" label="1">是</el-radio>-->  
81 -<!-- <el-radio v-model="radio4" label="2">否</el-radio></td>-->  
82 -<!-- </tr>-->  
83 -<!-- </tbody>-->  
84 -<!-- </table>-->  
85 -<!-- <table class="tb" style="margin-top: 10px;width: 100%">-->  
86 -<!-- <tbody>-->  
87 -<!-- <tr>-->  
88 -<!-- <th width="20%">中文品名</th>-->  
89 -<!-- <th width="20%">英文品名</th>-->  
90 -<!-- <th width="10%">*数量(件)</th>-->  
91 -<!-- <th width="10%">*实重（KG）</th>-->  
92 -<!-- <th width="10%">*总体积（CBM）</th>-->  
93 -<!-- <th width="20%">最大尺寸(长x宽x高)</th>-->  
94 -<!-- <th width="10%">操作</th>-->  
95 -<!-- </tr>-->  
96 -<!-- <tr>-->  
97 -<!-- <td><el-input v-model="nameCn" placeholder="" size="mini"></el-input></td>-->  
98 -<!-- <td><el-input v-model="name" placeholder="" size="mini"></el-input></td>-->  
99 -<!-- <td><el-input v-model="billCount" placeholder="" size="mini"></el-input></td>-->  
100 -<!-- <td><el-input v-model="weight" placeholder="" size="mini"></el-input></td>-->  
101 -<!-- <td><el-input v-model="input" placeholder="" size="mini"></el-input></td>-->  
102 -<!-- <td><el-input v-model="input" placeholder="" size="mini"></el-input></td>-->  
103 -<!-- <td><el-button icon="el-icon-plus" size="mini" circle></el-button>-->  
104 -<!-- <el-button icon="el-icon-minus" size="mini" circle></el-button></td>-->  
105 -<!-- </tr>-->  
106 -<!-- </tbody>-->  
107 -<!-- </table>-->  
108 -<!-- </div>-->  
109 -<!--&lt;!&ndash; 收发件通知人信息&ndash;&gt;-->  
110 -<!-- <div class="r-table" style="margin-top: 35px">-->  
111 -<!-- <el-collapse v-model="activeNames" @change="handleChange" class="col">-->  
112 -<!-- <el-collapse-item title="发件人信息" name="1">-->  
113 -<!-- <table class="tb" width="100%">-->  
114 -<!-- <tbody>-->  
115 -<!-- <tr>-->  
116 -<!-- <th width="15%">姓名</th>-->  
117 -<!-- <td width="35%"><el-input v-model="name" placeholder="" ></el-input></td>-->  
118 -<!-- <th width="15%">联系电话</th>-->  
119 -<!-- <td width="35%"><el-input v-model="tel" placeholder="" ></el-input></td>-->  
120 -<!-- </tr>-->  
121 -<!-- <tr>-->  
122 -<!-- <th colspan="1">公司</th>-->  
123 -<!-- <td colspan="3"><el-input v-model="company" placeholder="" ></el-input></td>-->  
124 -<!-- </tr>-->  
125 -<!-- <tr>-->  
126 -<!-- <th colspan="1">详细地址 </th>-->  
127 -<!-- <td colspan="3"><el-input v-model="address" placeholder="" ></el-input></td>-->  
128 -<!-- </tr>-->  
129 -<!-- </tbody>-->  
130 -<!-- </table>-->  
131 -<!-- </el-collapse-item>-->  
132 -<!-- <el-collapse-item title="收件人信息" name="2" class="father">-->  
133 -<!-- <div class="relative">-->  
134 -<!-- <el-button type="text" @click="dialogTableVisible = true">收件地址库</el-button>-->  
135 -<!-- <el-checkbox v-model="checked1" style="margin-left: 20px">加入地址库</el-checkbox>-->  
136 -<!-- </div>-->  
137 -<!-- <table class="tb" width="100%">-->  
138 -<!-- <tbody>-->  
139 -<!-- <tr>-->  
140 -<!-- <th width="15%">姓名</th>-->  
141 -<!-- <td width="35"><el-input v-model="name" placeholder="" ></el-input></td>-->  
142 -<!-- <th width="15%">联系电话</th>-->  
143 -<!-- <td width="35%"><el-input v-model="tel" placeholder="" ></el-input></td>-->  
144 -<!-- </tr>-->  
145 -<!-- <tr>-->  
146 -<!-- <th colspan="1">公司</th>-->  
147 -<!-- <td colspan="3"><el-input v-model="company" placeholder="" ></el-input></td>-->  
148 -<!-- </tr>-->  
149 -<!-- <tr>-->  
150 -<!-- <th colspan="1">详细地址</th>-->  
151 -<!-- <td colspan="3"><el-input v-model="address" placeholder="" ></el-input></td>-->  
152 -<!-- </tr>-->  
153 -<!-- <tr>-->  
154 -<!-- <th colspan="1">特殊信息</th>-->  
155 -<!-- <td colspan="3"><el-input v-model="input" placeholder="" ></el-input></td>-->  
156 -<!-- </tr>-->  
157 -<!-- </tbody>-->  
158 -<!-- </table>-->  
159 -<!-- </el-collapse-item>-->  
160 -<!-- <el-collapse-item title="通知人信息" name="3" class="father">-->  
161 -<!-- <div class="relative"><el-checkbox v-model="checked">同收件人</el-checkbox></div>-->  
162 -<!-- <table class="tb" width="100%">-->  
163 -<!-- <tbody>-->  
164 -<!-- <tr>-->  
165 -<!-- <th width="15%">姓名</th>-->  
166 -<!-- <td width="35%"><el-input v-model="name" placeholder="" ></el-input></td>-->  
167 -<!-- <th width="15%">联系电话</th>-->  
168 -<!-- <td width="35%"><el-input v-model="tel" placeholder="" ></el-input></td>-->  
169 -<!-- </tr>-->  
170 -<!-- <tr>-->  
171 -<!-- <th colspan="1">公司</th>-->  
172 -<!-- <td colspan="3"><el-input v-model="company" placeholder="" ></el-input></td>-->  
173 -<!-- </tr>-->  
174 -<!-- <tr>-->  
175 -<!-- <th colspan="1">详细地址</th>-->  
176 -<!-- <td colspan="3"><el-input v-model="address" placeholder="" ></el-input></td>-->  
177 -<!-- </tr>-->  
178 -<!-- <tr>-->  
179 -<!-- <th colspan="1">特殊信息</th>-->  
180 -<!-- <td colspan="3"><el-input v-model="input" placeholder="" ></el-input></td>-->  
181 -<!-- </tr>-->  
182 -<!-- </tbody>-->  
183 -<!-- </table>-->  
184 -<!-- </el-collapse-item>-->  
185 -<!-- </el-collapse>-->  
186 -<!-- </div>-->  
187 -<!-- <div style="text-align: center;margin-top: 30px">-->  
188 -<!-- <el-button type="danger" style="width: 180px;height: 50px">确认下单</el-button>-->  
189 -<!-- </div>-->  
190 -<!-- <div style="margin-top: 50px;height: 80px"> </div>-->  
191 -<!-- </div>-->  
192 -<!--&lt;!&ndash; 收件地址库弹框&ndash;&gt;-->  
193 -<!-- <div>-->  
194 -<!-- <el-dialog title="请选择收件人" :visible.sync="dialogTableVisible">-->  
195 -<!-- <el-table :data="gridData">-->  
196 -<!-- <el-table-column property="name" label="姓名" width="150"></el-table-column>-->  
197 -<!-- <el-table-column property="tel" label="电话" width="200"></el-table-column>-->  
198 -<!-- <el-table-column property="address" label="地址"></el-table-column>-->  
199 -<!-- </el-table>-->  
200 -<!-- <div style="margin-top: 10px;text-align: right">-->  
201 -<!-- <el-button>取消</el-button>-->  
202 -<!-- <el-button type="primary">请选择收件人</el-button>-->  
203 -<!-- </div>-->  
204 -<!-- </el-dialog>-->  
205 -<!-- </div>-->  
206 -<!-- </div>-->  
207 -<!--</template>--> 1 +<template>
  2 + <div class="bg order">
  3 + <span class="air">空运服务-订舱确认</span>
  4 + <div class="px">
  5 +<!-- 下单信息-->
  6 + <h4 class="title">下单信息</h4>
  7 + <div class="r-table">
  8 + <table class="tb">
  9 + <tbody>
  10 + <tr>
  11 + <th width="10%">航空公司</th>
  12 + <td width="10%"></td>
  13 + <th width="10%">起运机场</th>
  14 + <td width="10%"></td>
  15 + <th width="10%">目的机场</th>
  16 + <td width="10%"></td>
  17 + <th width="10%">下单重量(KG)</th>
  18 + <td width="10%"><el-input v-model="A" placeholder="" size="mini"></el-input></td>
  19 + <th width="10%">运价单价</th>
  20 + <td width="10%"></td>
  21 + </tr>
  22 + <tr>
  23 + <th>报关方式</th>
  24 + <td colspan="4">
  25 + <el-radio v-model="B" label="1">自理报关</el-radio>
  26 + <el-radio v-model="C" label="2">委托报关</el-radio>
  27 + </td>
  28 + <th rowspan="4">附加费</th>
  29 + <td colspan="3">操作费： CNY 0.00/票</td>
  30 + <td><el-input-number v-model="D" @change="handleChange" :min="1" :max="10" label="">
  31 + </el-input-number></td>
  32 + </tr>
  33 + <tr>
  34 + <th rowspan="3">门到门服务</th>
  35 + <td colspan="4"><el-checkbox v-model="E">上门提货</el-checkbox></td>
  36 + <td colspan="3">制单费： CNY 50.00/票</td>
  37 + <td><el-input-number v-model="F" @change="handleChange" :min="1" :max="10" label="">
  38 + </el-input-number></td>
  39 + </tr>
  40 + <tr>
  41 + <td colspan="4" rowspan="2"><el-checkbox v-model="G">清关派送</el-checkbox></td>
  42 + <td colspan="3">订舱预录费： CNY 30.00 /票</td>
  43 + <td><el-input-number v-model="H" @change="handleChange" :min="1" :max="10" label="">
  44 + </el-input-number></td>
  45 + </tr>
  46 + <tr>
  47 + <td colspan="4">地面操作费： CNY 0/KG</td>
  48 + </tr>
  49 + <tr>
  50 + <th>预估费用</th>
  51 + <td colspan="3">运费：CNY 23500.00 (最低100.00KG 起运)</td>
  52 + <td colspan="3">附加费：CNY 230.00</td>
  53 + <td colspan="3">总费用：</td>
  54 + </tr>
  55 + </tbody>
  56 + </table>
  57 + </div>
  58 +<!-- 货物信息-->
  59 + <h4 class="title">货物信息</h4>
  60 + <div class="r-table">
  61 + <table class="tb" width="100%">
  62 + <tbody>
  63 + <tr>
  64 + <th width="35%">*是否有电池、液体、粉末、磁性及其它违禁物品</th>
  65 + <td width="15%">
  66 + <el-radio v-model="radio1" label="1">是</el-radio>
  67 + <el-radio v-model="radio1" label="2">否</el-radio></td>
  68 + <th width="35%">*是否购买保险</th>
  69 + <td width="15%">
  70 + <el-radio v-model="radio1" label="1">是</el-radio>
  71 + <el-radio v-model="radio1" label="2">否</el-radio></td>
  72 + </tr>
  73 + <tr>
  74 + <th width="35%">*是否超长托盘</th>
  75 + <td width="15%">
  76 + <el-radio v-model="radio1" label="1">是</el-radio>
  77 + <el-radio v-model="radio1" label="2">否</el-radio></td>
  78 + <th width="35%">*是否名牌</th>
  79 + <td width="15%">
  80 + <el-radio v-model="radio1" label="1">是</el-radio>
  81 + <el-radio v-model="radio1" label="2">否</el-radio></td>
  82 + </tr>
  83 + </tbody>
  84 + </table>
  85 + <table class="tb" style="margin-top: 10px;width: 100%">
  86 + <tbody>
  87 + <tr>
  88 + <th width="20%">中文品名</th>
  89 + <th width="20%">英文品名</th>
  90 + <th width="10%">*数量(件)</th>
  91 + <th width="10%">*实重（KG）</th>
  92 + <th width="10%">*总体积（CBM）</th>
  93 + <th width="20%">最大尺寸(长x宽x高)</th>
  94 + <th width="10%">操作</th>
  95 + </tr>
  96 + <tr>
  97 + <td><el-input v-model="radio1" placeholder="" size="mini"></el-input></td>
  98 + <td><el-input v-model="radio1" placeholder="" size="mini"></el-input></td>
  99 + <td><el-input v-model="radio1" placeholder="" size="mini"></el-input></td>
  100 + <td><el-input v-model="radio1" placeholder="" size="mini"></el-input></td>
  101 + <td><el-input v-model="radio1" placeholder="" size="mini"></el-input></td>
  102 + <td><el-input v-model="radio1" placeholder="" size="mini"></el-input></td>
  103 + <td><el-button icon="el-icon-plus" size="mini" circle></el-button>
  104 + <el-button icon="el-icon-minus" size="mini" circle></el-button></td>
  105 + </tr>
  106 + </tbody>
  107 + </table>
  108 + </div>
  109 +<!-- 收发件通知人信息-->
  110 + <div class="r-table" style="margin-top: 35px">
  111 + <el-collapse v-model="activeNames" @change="handleChange" class="col">
  112 + <el-collapse-item title="发件人信息" name="1">
  113 + <table class="tb" width="100%">
  114 + <tbody>
  115 + <tr>
  116 + <th width="15%">姓名</th>
  117 + <td width="35%"><el-input v-model="radio1" placeholder="" ></el-input></td>
  118 + <th width="15%">联系电话</th>
  119 + <td width="35%"><el-input v-model="radio1" placeholder="" ></el-input></td>
  120 + </tr>
  121 + <tr>
  122 + <th colspan="1">公司</th>
  123 + <td colspan="3"><el-input v-model="radio1" placeholder="" ></el-input></td>
  124 + </tr>
  125 + <tr>
  126 + <th colspan="1">详细地址 </th>
  127 + <td colspan="3"><el-input v-model="radio1" placeholder="" ></el-input></td>
  128 + </tr>
  129 + </tbody>
  130 + </table>
  131 + </el-collapse-item>
  132 + <el-collapse-item title="收件人信息" name="2" class="father">
  133 + <div class="relative">
  134 + <el-button type="text" @click="dialogTableVisible = true">收件地址库</el-button>
  135 + <el-checkbox v-model="radio1" style="margin-left: 20px">加入地址库</el-checkbox>
  136 + </div>
  137 + <table class="tb" width="100%">
  138 + <tbody>
  139 + <tr>
  140 + <th width="15%">姓名</th>
  141 + <td width="35"><el-input v-model="radio1" placeholder="" ></el-input></td>
  142 + <th width="15%">联系电话</th>
  143 + <td width="35%"><el-input v-model="radio1" placeholder="" ></el-input></td>
  144 + </tr>
  145 + <tr>
  146 + <th colspan="1">公司</th>
  147 + <td colspan="3"><el-input v-model="radio1" placeholder="" ></el-input></td>
  148 + </tr>
  149 + <tr>
  150 + <th colspan="1">详细地址</th>
  151 + <td colspan="3"><el-input v-model="radio1" placeholder="" ></el-input></td>
  152 + </tr>
  153 + <tr>
  154 + <th colspan="1">特殊信息</th>
  155 + <td colspan="3"><el-input v-model="radio1" placeholder="" ></el-input></td>
  156 + </tr>
  157 + </tbody>
  158 + </table>
  159 + </el-collapse-item>
  160 + <el-collapse-item title="通知人信息" name="3" class="father">
  161 + <div class="relative"><el-checkbox v-model="radio1">同收件人</el-checkbox></div>
  162 + <table class="tb" width="100%">
  163 + <tbody>
  164 + <tr>
  165 + <th width="15%">姓名</th>
  166 + <td width="35%"><el-input v-model="radio1" placeholder="" ></el-input></td>
  167 + <th width="15%">联系电话</th>
  168 + <td width="35%"><el-input v-model="radio1" placeholder="" ></el-input></td>
  169 + </tr>
  170 + <tr>
  171 + <th colspan="1">公司</th>
  172 + <td colspan="3"><el-input v-model="radio1" placeholder="" ></el-input></td>
  173 + </tr>
  174 + <tr>
  175 + <th colspan="1">详细地址</th>
  176 + <td colspan="3"><el-input v-model="radio1" placeholder="" ></el-input></td>
  177 + </tr>
  178 + <tr>
  179 + <th colspan="1">特殊信息</th>
  180 + <td colspan="3"><el-input v-model="radio1" placeholder="" ></el-input></td>
  181 + </tr>
  182 + </tbody>
  183 + </table>
  184 + </el-collapse-item>
  185 + </el-collapse>
  186 + </div>
  187 + <div style="text-align: center;margin-top: 30px">
  188 + <el-button type="danger" style="width: 180px;height: 50px" @click="open">确认下单</el-button>
  189 + </div>
  190 + <div style="margin-top: 50px;height: 80px"> </div>
  191 + </div>
  192 +<!-- 收件地址库弹框-->
  193 + <div>
  194 + <el-dialog title="请选择收件人" :visible.sync="dialogTableVisible">
  195 + <el-table :data="gridData">
  196 + <el-table-column property="name" label="姓名" width="150"></el-table-column>
  197 + <el-table-column property="tel" label="电话" width="200"></el-table-column>
  198 + <el-table-column property="address" label="地址"></el-table-column>
  199 + </el-table>
  200 + <div style="margin-top: 10px;text-align: right">
  201 + <el-button>取消</el-button>
  202 + <el-button type="primary">请选择收件人</el-button>
  203 + </div>
  204 + </el-dialog>
  205 + </div>
  206 + </div>
  207 +</template>
208 208
209 -<!--<script>-->  
210 -<!-- export default {-->  
211 -<!-- data() {-->  
212 -<!-- return{-->  
213 -<!-- gridData:[],-->  
214 -<!-- num: 1,-->  
215 -<!-- dialogTableVisible:false,--> 209 +<script>
  210 + export default {
  211 + data() {
  212 + return{
  213 + gridData:[],
  214 + num:'' ,
  215 + dialogTableVisible:false,
  216 + A:'',
  217 + B:'',
  218 + C:'',
  219 + D:'',
  220 + E:'',
  221 + F:'',
  222 + G:'',
  223 + H:'',
  224 + radio1:'',
  225 + name:'',
  226 + tel:'',
  227 + address:'',
216 228
217 -<!-- }-->  
218 -<!-- }-->  
219 -<!-- }-->  
220 -<!--</script>-->  
221 229
222 -<!--<style scoped>-->  
223 -<!-- .bg{-->  
224 -<!-- background-color: #F2F2F2;-->  
225 -<!-- }-->  
226 -<!-- .air{-->  
227 -<!-- font-size: 20px;-->  
228 -<!-- color: #308aee;-->  
229 -<!-- margin-top: 20px;-->  
230 -<!-- display: block;-->  
231 -<!-- }-->  
232 -<!-- .r-table{-->  
233 -<!-- text-align: center;-->  
234 -<!-- }--> 230 + }
  231 + },
  232 + methods:{
  233 + handleChange(){},
  234 + open() {
  235 + this.$alert('确认下单？', '', {
  236 + confirmButtonText: '确定',
  237 + callback: action => {
  238 + this.$message({
  239 + type: 'info',
  240 + message: `action: ${ action }`
  241 + });
  242 + }
  243 + });
  244 + }
  245 + }
  246 + }
  247 +</script>
235 248
236 -<!-- /*line-height: 100px;*/-->  
237 -<!-- .tb{-->  
238 -<!-- font-size: 14px;-->  
239 -<!-- box-sizing: border-box;-->  
240 -<!-- display: table;-->  
241 -<!-- border-spacing: 0;-->  
242 -<!-- border-collapse: collapse;-->  
243 -<!-- }-->  
244 -<!-- .px{-->  
245 -<!-- background-color: #FFFFFF;-->  
246 -<!-- width: 100%;-->  
247 -<!-- height: 500px;-->  
248 -<!-- }-->  
249 -<!-- .title{-->  
250 -<!-- color: #127ef2;-->  
251 -<!-- font-size: 16px;-->  
252 -<!-- font-weight: bold;-->  
253 -<!-- margin: 20px 30px;-->  
254 -<!-- text-align: left;-->  
255 -<!-- }-->  
256 -<!-- .r-table .tb > tbody > tr > th {-->  
257 -<!-- background-color: #d8ecff;-->  
258 -<!-- padding: 10px 5px;-->  
259 -<!-- text-align: center;-->  
260 -<!-- border: 1px solid #ddd;-->  
261 -<!-- }-->  
262 -<!-- .r-table .tb > tbody > tr > td {-->  
263 -<!-- padding: 8px;-->  
264 -<!-- border: 1px solid #ddd;-->  
265 -<!-- display: table-cell;-->  
266 -<!-- }-->  
267 -<!-- .col .tb > tbody > tr > th {-->  
268 -<!-- border: 0px;-->  
269 -<!-- }-->  
270 -<!-- .col .tb > tbody > tr > td {-->  
271 -<!-- border: 0px;-->  
272 -<!-- }-->  
273 -<!-- .father{-->  
274 -<!-- position: relative;-->  
275 -<!-- }-->  
276 -<!-- .relative{-->  
277 -<!-- position: absolute;-->  
278 -<!-- top:11px;-->  
279 -<!-- right: 100px;-->  
280 -<!-- }-->  
281 -<!--</style>-->  
282 -<!--<style>-->  
283 -<!-- .order .el-collapse-item__header{-->  
284 -<!-- color: #127ef2;-->  
285 -<!-- font-size: 16px;-->  
286 -<!-- font-weight: bold;-->  
287 -<!-- margin: 20px 30px;-->  
288 -<!-- text-align: left;-->  
289 -<!-- }-->  
290 -<!--</style>--> 249 +<style scoped>
  250 + .bg{
  251 + background-color: #F2F2F2;
  252 + }
  253 + .air{
  254 + font-size: 20px;
  255 + color: #308aee;
  256 + margin-top: 20px;
  257 + display: block;
  258 + }
  259 + .r-table{
  260 + text-align: center;
  261 + }
  262 +
  263 + /*line-height: 100px;*/
  264 + .tb{
  265 + font-size: 14px;
  266 + box-sizing: border-box;
  267 + display: table;
  268 + border-spacing: 0;
  269 + border-collapse: collapse;
  270 + }
  271 + .px{
  272 + background-color: #FFFFFF;
  273 + width: 100%;
  274 + height: 850px;
  275 + overflow: auto;
  276 + }
  277 + .title{
  278 + color: #127ef2;
  279 + font-size: 16px;
  280 + font-weight: bold;
  281 + margin: 20px 30px;
  282 + text-align: left;
  283 + }
  284 + .r-table .tb > tbody > tr > th {
  285 + background-color: #d8ecff;
  286 + padding: 10px 5px;
  287 + text-align: center;
  288 + border: 1px solid #ddd;
  289 + }
  290 + .r-table .tb > tbody > tr > td {
  291 + padding: 8px;
  292 + border: 1px solid #ddd;
  293 + display: table-cell;
  294 + }
  295 + .col .tb > tbody > tr > th {
  296 + border: 0px;
  297 + }
  298 + .col .tb > tbody > tr > td {
  299 + border: 0px;
  300 + }
  301 + .father{
  302 + position: relative;
  303 + }
  304 + .relative{
  305 + position: absolute;
  306 + top:11px;
  307 + right: 100px;
  308 + }
  309 +</style>
  310 +<style>
  311 + .order .el-collapse-item__header{
  312 + color: #127ef2;
  313 + font-size: 16px;
  314 + font-weight: bold;
  315 + margin: 20px 30px;
  316 + text-align: left;
  317 + }
  318 +</style>