腾讯地图web端签名校验方法

1. <template>
2.     <el-dialog v-model="dialogVisible" title="" width="900" :before-close="handleClose">
3.         <div class="leftForm">
4.             <div class="leftCard">
5.                 <div class="leftTitle">代客下单</div>
6.                 <el-form ref="formRef" id="formRef" :model="form" :rules="rules" label-width="0px">
7.                     <el-form-item label="" prop="passengerPhone">
8.                         <el-input :prefix-icon="Memo" class="completeDiv" v-model="form.passengerPhone"
9.                             placeholder="请输入乘车人手机号" />
10.                     </el-form-item>
11.                     <el-form-item label="" prop="start">
12.                         <el-input disabled :prefix-icon="Edit" class="partDiv" v-model="form.start"
13.                             placeholder="请选择乘客起点" />
14.                         <el-button @click="handleChooseAdd('start')" type="primary" class="choosePoint" round>
15.                             地图选点
16.                         </el-button>
17.                     </el-form-item>
18.                     <el-form-item label="" prop="end">
19.                         <el-input disabled :prefix-icon="Edit" class="partDiv" v-model="form.end"
20.                             placeholder="请选择乘客终点" />
21.                         <el-button @click="handleChooseAdd('end')" type="primary" class="choosePoint" round>
22.                             地图选点
23.                         </el-button>
24.                     </el-form-item>
25.                     <el-form-item label="" prop="datetime">
26.                         <el-date-picker @change="dateChange" v-model="form.datetime" type="datetimerange"
27.                             range-separator="-" start-placeholder="最早时间" end-placeholder="最迟时间" />
28.                     </el-form-item>
29.                     <el-form-item label="" prop="passengerCount">
30.                         <el-select v-model="form.passengerCount" class="completeDiv" placeholder="请选择乘客人数">
31.                             <el-option v-for="item in options" :key="item.value" :label="item.label"
32.                                 :value="item.value" />
33.                         </el-select>
34.                     </el-form-item>
35.                     <el-form-item label="" prop="passengerRemark">
36.                         <el-input :prefix-icon="Edit" maxlength="50" type="textarea" class="completeDiv"
37.                             v-model="form.passengerRemark" placeholder="请输入乘客备注" />
38.                     </el-form-item>
39.                 </el-form>
40.                 <div class="tips">
41.                     温馨提示：
42.                     <div>1.下单成功后，系统将向乘客发送支付提醒短信，请乘客尽快完成支付</div>
43.                     <div>2.如果乘客未及时支付订单，请主动联系乘客完成支付</div>
44.                 </div>
45.             </div>
46.             <div class="mt-2 text-gray-600 text-sm">
47.                 <div class="rightTop">
48.                     <span class="rightTitle">接单司机</span>
49.                     <span class="rightText">未指定司机，订单进入抢单池，其他司机可接单</span>
50.                 </div>
51.                 <div><el-input class="partDiv" v-model="form.phone" placeholder="请输入乘车人手机号" />
52.                     <el-button type="primary" @click="chooseDriver" class="choosePoint" round>
53.                         选择司机
54.                     </el-button>
55.                 </div>
56.                 <div class="rightTitle mt-2 mb-2">出行方式</div>
57.                 <div v-if="isAccord == 0">
58.                     <div v-for="item, index in priceDtoList" :key="index" @click="selectPay(index, item)"
59.                         :class="selectPayIndex === index ? 'priceBox activeBox' : 'priceBox'">
60.                         <div class="priceTitle">{{ item.productCode == 'fit' ? '舒适' : '拼车' }}</div>
61.                         <div>
62.                             <div class="priceContent">
63.                                 <div class="priceLabel">订单价格</div>
64.                                 <div class="priceValue">
65.                                     <el-input v-if="item.productCode == 'fit'" v-model="item.totalPrice"
66.                                         @change="fitChange" style="width: 200px;" placeholder="请输入"
67.                                         class="input-with-select">
68.                                         <template #prepend>
69.                                             ¥
70.                                         </template>
71.                                     </el-input>
73.                                     <el-input v-else v-model="item.totalPrice" @change="rentChange"
74.                                         style="width: 200px;" placeholder="请输入" class="input-with-select">
75.                                         <template #prepend>
76.                                             ¥
77.                                         </template>
78.                                     </el-input>
79.                                 </div>
80.                             </div>
81.                             <div class="priceDesc">您可以在<span class="redText">{{ setMoney('min', item.totalPrice)
82.                                     }}</span>元至<span class="redText">{{ setMoney('max',
83.         item.totalPrice) }}</span>元之间调整订单金额</div>
84.                         </div>
85.                     </div>
86.                     <!-- <div @click="selectPay(2)" :class="selectPayIndex === 2 ? 'priceBox activeBox' : 'priceBox'">
87.                         <div class="priceTitle">独享</div>
88.                         <div>
89.                             <div class="priceContent">
90.                                 <div class="priceLabel">订单价格</div>
91.                                 <div class="priceValue">
92.                                     <el-input v-model="input3" style="width: 200px;" placeholder="Please input"
93.                                         class="input-with-select">
94.                                         <template #prepend>
95.                                             ¥
96.                                         </template>
97.                                     </el-input>
98.                                 </div>
99.                             </div>
100.                             <div class="priceDesc">您可以在<span class="redText">899.99</span>元至<span
101.                                     class="redText">1111.99</span>元之间调整订单金额
102.                             </div>
103.                         </div>
104.                     </div> -->
105.                 </div>
106.                 <div v-else-if="isAccord == 1" class="noAccord">
107.                     当前线路不在您的运营范围，暂无法提供服务
108.                 </div>
110.                 <div v-else-if="isAccord == 3">
111.                     <div v-for=" i in 2 " class=" blankBorder">
112.                         <div class="blankLeft">
113.                             <div class="leftBlank"></div>
114.                         </div>
115.                         <div style="padding: 20px;">
116.                             <div class="leftTop"></div>
117.                             <div class="leftBottom"></div>
118.                         </div>
119.                     </div>
120.                 </div>
121.                 <div class="dialog-footer">
122.                     <el-button @click="cancel">取消</el-button>
123.                     <el-button type="primary" @click="submit">立即下单</el-button>
124.                 </div>
125.             </div>
126.         </div>
127.         <map-modal ref="mapRef" @change="handelChangeAddress" />
128.         <el-dialog v-model="driverDialogVisible" title="选择司机" width="800">
129.             <div class="driver-list">
130.                 <!-- 这里可以添加搜索框 -->
131.                 <el-input v-model="searchKeyword" style="width: 200px;" placeholder="请输入司机姓名/手机号" class="mr-4 ">
132.                     <template #prefix>
133.                         <el-icon>
134.                             <Search />
135.                         </el-icon>
136.                     </template>
137.                 </el-input>
138.                 <el-button type="primary" @click="searchDriver">搜索</el-button>
139.                 <!-- 司机列表表格 -->
140.                 <el-table :data="driverList" style="width: 100%;margin-top: 10px;">
141.                     <el-table-column prop="name" label="司机姓名" />
142.                     <el-table-column prop="phone" label="手机号" />
143.                     <el-table-column prop="carNumber" label="车牌号" />
144.                     <el-table-column label="操作">
145.                         <template #default="scope">
146.                             <el-button type="text" @click="selectDriver(scope.row)">
147.                                 选择
148.                             </el-button>
149.                         </template>
150.                     </el-table-column>
151.                 </el-table>
152.                 <div class="pagination-container" style="margin-top: 20px; text-align: right;">
153.                     <el-pagination v-model:current-page="pagination.currentPage" v-model:page-size="pagination.pageSize"
154.                         :page-sizes="[10, 20, 30, 50]" :total="pagination.total" @size-change="handleSizeChange"
155.                         @current-change="handleCurrentChange" layout="total, sizes, prev, pager, next" />
156.                 </div>
157.             </div>
158.         </el-dialog>
159.     </el-dialog>
160.     <TXMap ref="txMap" :dialogVisible="mapVisible" @update="mapUpdate" />
162. </template>
164. <script setup name="Dialog" lang="ts">
165. import { ref, reactive, watch } from 'vue'
166. import { listDriver } from '@/api/power/driver'
167. import { getPriceTemplate, setPrice, orderSubmission } from '@/api/order/operate'
168. import { ArrowDown, Search, Memo, Edit } from '@element-plus/icons-vue'
169. import { getConfigKey } from '@/api/system/config'
170. import mapModal from '@/components/Map/map.vue'
171. import md5 from './md5'
172. import TXMap from './TXMap.vue'
173. import { func } from 'vue-types'
174. let latitude = ref(39.913818)
175. let longitude = ref(116.363625)
176. const addressInfo = (e) => {
177.     console.log(e)
178. }
179. let startTime = ref(0)
180. let endTime = ref(0)
181. function dateChange(value: any) {
182.     console.log(value);
183.     startTime.value = new Date(value[0]).getTime() / 1000;
184.     endTime.value = new Date(value[1]).getTime() / 1000;
186. }
187. const txMap = ref('')
188. function selectAddress(address, lat, lng) {
189.     console.log(address, lat, lng);
191.     // this.formData.address = address
192.     // this.formData.latitude = lat
193.     // this.formData.longitude = lng
194. }
195. // 定义组件的props
196. const props = defineProps({
197.     dialogVisible: {
198.         type: Boolean,
199.         default: false,
200.     },
201. })
202. const value = ref('')
203. let selectPayIndex = ref(0)
204. let outWayType = ref('')
205. function selectPay(index: number, item: any) {
206.     selectPayIndex.value = index;
207.     outWayType.value = item.productCode;
208.     console.log(outWayType, 'outWayType');
209. }
210. let mapVisible = ref(false)
211. function mapUpdate(e) {
212.     console.log(11);
214.     mapVisible.value = e
215. }
216. const mapRef = ref()
217. async function fitChange(val) {
218.     if (val.toString().split('.')[1].length > 2) {
219.         ElMessage.error('最多两位小数')
220.         return
221.     } else {
222.         let param = {
223.             'price': parseFloat((val * 100).toFixed(2)),
224.             'productCode': 'fit',
225.             'estimateKey': estimateKey.value
226.         }
227.         const res = await setPrice(param)
228.         console.log(res, 'rent');
229.     }
230. }
231. const driverDialogVisible = ref(false)
233. // 添加分页相关的响应式数据
234. const pagination = reactive({
235.     total: 0,
236.     currentPage: 1,
237.     pageSize: 10
238. })
239. const selectDriver = (driver) => {
240.     form.phone = driver.phone
241.     driverDialogVisible.value = false
242.     console.log(driver.phone, 'driver');
243. }
244. // 修改 chooseDriver 方法
245. async function chooseDriver() {
246.     driverDialogVisible.value = true
247.     await getDriverList()
248. }
249. let driverList = ref([])
250. function searchDriver() {
251.     pagination.currentPage = 1
252.     getDriverList()
253. }
254. // 添加搜索关键字的响应式数据
255. const searchKeyword = ref('')
256. // 添加获取司机列表的方法
257. async function getDriverList() {
258.     try {
259.         const res = await listDriver({
260.             name: searchKeyword.value,
261.             pageNum: pagination.currentPage,
262.             pageSize: pagination.pageSize
263.         })
264.         if (res.code === 0) {
265.             driverList.value = res.rows
266.             pagination.total = res.total
267.         }
268.     } catch (error) {
269.         console.error('获取司机列表失败:', error)
270.         ElMessage.error('获取司机列表失败')
271.     }
272. }
273. // 添加分页变化处理方法
274. function handleCurrentChange(val: number) {
275.     pagination.currentPage = val
276.     getDriverList()
277. }
278. let startData = ref({})
279. let endData = ref({})
280. //地址逆解析
281. async function getAddress(e) {
282.     if (e.lat && e.lon) {
283.         let res = await getGeoCoder({
284.             location: e.lat + ',' + e.lon,
285.             key: '自己的key',
286.             SK: '自己的SK'
287.         })
288.         console.log(res, 'res腾讯地图返回');
289.         // from = 39.915285, 116.403857 & to=39.915285, 116.803857
291.         if (mode.value === 'start') {
292.             form.start = res.result.formatted_addresses.recommend
293.             startData.value = {
294.                 lat: res.result.location.lat,
295.                 lng: res.result.location.lng, // 经度
296.                 address: res.result.address, // 地址
297.                 shortAddress: res.result.formatted_addresses.recommend,
298.                 cityCode: res.result.ad_info.phone_area_code,
299.                 adCode: res.result.ad_info.adcode, // 城市编码
300.             }
301.         } else if (mode.value === 'end') {
302.             form.end = res.result.formatted_addresses.standard_address + res.result.formatted_addresses.recommend;
303.             endData.value = {
304.                 lat: res.result.location.lat,
305.                 lng: res.result.location.lng, // 经度
306.                 address: res.result.address, // 地址
307.                 shortAddress: res.result.formatted_addresses.recommend,
308.                 cityCode: res.result.ad_info.phone_area_code,
309.                 adCode: res.result.ad_info.adcode, // 城市编码
310.             }
311.         }
312.         // if (res.status === 0) {
313.         //     let locationName = res.result.address
314.         // } else {
315.         //     showToast(res.message, 'warning')
316.         // }
317.     }
318. }
319. function getInstance(param) {
320.     // https://apis.map.qq.com/ws/direction/v1/driving/?
321.     // // from=39.915285,116.403857&to=39.915285,116.803857&output=json&callback=cb&key=[你的key]
322.     let sig = md5(
323.         `/ws/direction/v1/driving?callback=jsonpCallback&from=${param.slat},${param.slng}&key=${param.key}&output=jsonp&to=${param.elat},${param.elng}${param.SK}`
324.     )
325.     console.log(`/ws/direction/v1/driving?callback=jsonpCallback&from=${param.slat},${param.slng}&key=${param.key}&output=jsonp&to=${param.elat},${param.elat}${param.SK}`, sig);
327.     let getData = {
328.         callbackQuery: 'callback', // 设置callback参数的key  不设置的话callback参数会自动被赋予一个随机值  md5校验无法通过
329.         callbackName: 'jsonpCallback', // 设置callback 参数的值
330.         from: param.slat + ',' + param.slng,
331.         key: param.key,
332.         output: 'jsonp',
333.         to: param.elat + ',' + param.elng,
334.         sig
335.     }
336.     return jsonp('https://apis.map.qq.com/ws/direction/v1/driving', getData)
337. }
338. function getGeoCoder(param: any) {
339.     let sig = md5(
340.         `/ws/geocoder/v1?callback=jsonpCallback&key=${param.key}&location=${param.location}&output=jsonp${param.SK}`
341.     )
342.     // sig = encodeURI(sig) //url化一下
343.     let getData = {
344.         callbackQuery: 'callback', // 设置callback参数的key  不设置的话callback参数会自动被赋予一个随机值  md5校验无法通过
345.         callbackName: 'jsonpCallback', // 设置callback 参数的值
346.         key: param.key,
347.         location: param.location,
348.         output: 'jsonp',
349.         sig
350.     }
351.     //签名失败的解决办法 https://lbs.qq.com/faq/serverFaq/webServiceKey
352.     return jsonp('https://apis.map.qq.com/ws/geocoder/v1', getData)
353. }
357. function handleSizeChange(val: number) {
358.     pagination.pageSize = val
359.     pagination.currentPage = 1
360.     getDriverList()
361. }
362. async function rentChange(val) {
363.     //判断小数是否最多两位
364.     if (val.toString().split('.')[1].length > 2) {
365.         ElMessage.error('最多两位小数')
366.         return
367.     } else {
368.         let param = {
369.             'price': parseFloat((val * 100).toFixed(2)),
370.             'productCode': 'rent',
371.             'estimateKey': estimateKey.value
372.         }
373.         const res = await setPrice(param)
374.         console.log(res, 'rent');
375.     }
377. }
378. import { jsonp } from "vue-jsonp";
379. import { el, sl } from 'element-plus/es/locale'
380. async function handelChangeAddress(e) {
381.     const {
382.         adcode,
383.         province,
384.         city,
385.         district,
386.         address,
387.         lon,
388.         lat
389.     } = e
390.     console.log(e)
391.     getAddress(e);
394.     // jsonp(url, {
395.     //     output: "jsonp",
396.     //     cache: true,
397.     // }).then((res) => {
398.     //     console.log(res);
399.     // }).catch((err) => {
400.     //     console.error(err, 'err');
401.     // });
402.     // form.value = {
403.     //     ...form.value,
404.     //     [mode.value + 'AdCode']: adcode,
405.     //     [mode.value + 'Province']: province,
406.     //     [mode.value + 'City']: city,
407.     //     [mode.value + 'District']: district,
408.     //     [mode.value + 'Latitude']: lat,
409.     //     [mode.value + 'Longitude']: lon,
410.     //     [mode.value + 'Address']: address,
411.     // }
412. };
413. let mode = ref('')
414. // function handleChooseAdd(_mode = 'start') {
415. //     mapVisible.value = true
416. // }
417. const initFormData: RobForm = {
418.     id: undefined,
419.     robNo: undefined,
420.     agentId: undefined,
421.     lineId: undefined,
422.     startProvinceId: undefined,
423.     startProvince: undefined,
424.     startCityId: undefined,
425.     startCityCode: undefined,
426.     startCity: undefined,
427.     startDistrictId: undefined,
428.     startAdCode: undefined,
429.     startDistrict: undefined,
430.     startAddress: undefined,
431.     startLongitude: undefined,
432.     startLatitude: undefined,
433.     startRadius: undefined,
434.     endProvinceId: undefined,
435.     endProvince: undefined,
436.     endCityId: undefined,
437.     endCityCode: undefined,
438.     endCity: undefined,
439.     endDistrictId: undefined,
440.     endAdCode: undefined,
441.     endDistrict: undefined,
442.     endAddress: undefined,
443.     endLongitude: undefined,
444.     endLatitude: undefined,
445.     endRadius: undefined,
446.     startTime: undefined,
447.     endTime: undefined,
448.     sortTime: undefined,
449.     seat: undefined,
450.     surplusSeat: undefined,
451.     robProduct: undefined,
452.     userType: 'agent_user',
453.     userId: undefined,
454.     status: '0',
455.     plan: 'PART',
456.     driverJson: undefined,
457.     renewal: 0,
458.     remark: undefined,
459. }
460. function handleChooseAdd(_mode = 'start') {
461.     mode.value = _mode;
462.     mapRef.value.open({
463.         adcode: form[_mode + 'AdCode'],
464.         lat: form[_mode + 'Latitude'],
465.         lon: form[_mode + 'Longitude'],
466.         province: form[_mode + 'Province'],
467.         city: form[_mode + 'City'],
468.         district: form[_mode + 'District'],
469.         address: form[_mode + 'Address'],
470.     });
471. }
472. //判断是否符合打车条件
473. let isAccord = ref(0)
474. const options = [
475.     {
476.         value: 1,
477.         label: '1人',
478.     },
479.     {
480.         value: 2,
481.         label: '2人',
482.     },
483.     {
484.         value: 3,
485.         label: '3人',
486.     },
487.     {
488.         value: 4,
489.         label: '4人',
490.     },
491.     {
492.         value: 5,
493.         label: '5人',
494.     }, {
495.         value: 6,
496.         label: '6人',
497.     },
498. ]
499. // 定义组件的emits
500. const emits = defineEmits(['update'])
502. // 解构props
503. let { dialogVisible } = toRefs(props)
505. // 表单ref
506. const formRef = ref()
508. // 表单数据
509. const form = reactive({
510.     phone: '',
511.     passengerPhone: '', // 乘车人手机号
512.     start: '', // 起点
513.     end: '', // 终点
514.     datetime: '', // 用车时间
515.     passengerCount: '', // 乘客人数
516.     passengerRemark: '', // 备注
517. })
519. // 表单校验规则
520. const rules = {
521.     passengerPhone: [
522.         { required: true, message: '请输入乘车人手机号', trigger: 'blur' },
523.         { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号格式', trigger: 'blur' }
524.     ],
525.     start: [
526.         { required: true, message: '请选择乘客起点', trigger: 'change' }
527.     ],
528.     end: [
529.         { required: true, message: '请选择乘客终点', trigger: 'change' }
530.     ],
531.     datetime: [
532.         { required: true, message: '请选择用车时间', trigger: 'change' }
533.     ],
534.     passengerCount: [
535.         { required: true, message: '请选择乘客人数', trigger: 'change' }
536.     ],
537.     // passengerRemark: [
538.     //     { required: true, message: '请输入乘客备注', trigger: 'blur' }
539.     // ]
540. }
542. //   "startTime": 1743560580,
543. //   "endTime": 1743560580,
544. //   "passengerCount": 1,
545. //   "startCityCode":"0571",
546. //   "endCityCode":"0571",
547. //   "mileage": 60000,
548. //   "platformCode":"SELF",
549. //   "startAdCode": "330109",
550. //   "startLongitude": 116.353531,
551. //   "startLatitude": 116.353531,
552. //   "endAdCode": "330106",
553. //   "endLongitude": 120.087667,
554. //   "startAddress": "智力大厦",
555. //   "startShortAddress": "智力大厦",
556. //   "endAddress":"三墩",
557. //   "endShortAddress": "三墩",
558. //   "endLatitude": 30.322948
560. watch(
561.     [
562.         () => form.start,
563.         () => form.end,
564.         () => form.datetime,
565.         () => form.passengerCount
566.     ],
567.     ([start, end, datetime, count]) => {
568.         if (start && end && datetime && count) {
569.             // 所有值都不为空时触发事件
570.             getDict();
571.         }
572.     },
573.     { deep: true }
574. )
575. let estimateKey = ref('')
576. let priceDtoList = ref([])
577. const setMoney = (type, price) => {
578.     if (type == 'min') {
579.         return Number(((price * ((100 - rateOver.value) / 100))).toFixed(2))
580.     } else if (type == 'max') {
581.         return Number(((price * ((100 + rateOver.value) / 100))).toFixed(2))
582.     }
583. }
585. let overallMileage = ref(0)
586. async function checkRoute() {
587.     // 发起请求，检查行程是否符合条件
588.     let params = {
589.         "startTime": startTime.value,
590.         "endTime": endTime.value,
591.         "passengerCount": form.passengerCount,
592.         "startCityCode": startData.value.cityCode,
593.         "endCityCode": endData.value.cityCode,
594.         "mileage": overallMileage.value,
595.         "platformCode": "SELF",
596.         "startAdCode": startData.value.adCode,
597.         "startLongitude": startData.value.lng,
598.         "startLatitude": startData.value.lat,
599.         "endAdCode": endData.value.adCode,
600.         "endLongitude": endData.value.lng,
601.         "startAddress": startData.value.address,
602.         "startShortAddress": startData.value.shortAddress,
603.         "endAddress": endData.value.address,
604.         "endShortAddress": endData.value.shortAddress,
605.         "endLatitude": endData.value.lat,
606.     }
607.     const res = await getPriceTemplate(params);
608.     if (res.code == 500) {
609.         isAccord.value = 1;
610.         return;
611.     } else if (res.code == 200) {
612.         isAccord.value = 0;
613.         estimateKey.value = res.data.estimateKey;
614.         priceDtoList.value = res.data.priceDtoList;
615.         // totalPrice
616.         priceDtoList.value.forEach((item) => {
617.             item.totalPrice = Number(item.totalPrice) / 100
618.         })
619.     }
620. }
621. //获取金额波动范围
622. let rateOver = ref(0)
623. async function getDict() {
624.     const res = await getConfigKey('proxy_order_price_fluctuation_rate')
625.     console.log(res, 'proxy_order_price_fluctuation_rate');
626.     if (res.code == 200) {
627.         rateOver.value = Number(res.data);
628.         console.log(rateOver.value);
629.         let ser = await getInstance({
630.             slat: startData.value.lat,
631.             slng: startData.value.lng,
632.             elat: endData.value.lat,
633.             elng: endData.value.lng,
634.             key: 'NSBBZ-SPQLZ-63RXY-7BIAG-DKBGH-B2FUE',
635.             SK: 'PrvmRwHoIFtYslLE3u2kSdF49GxcW1ZT'
636.         })
637.         overallMileage.value = ser.result.routes[0].distance
638.         console.log(ser.result.routes[0].distance, 'res距离腾讯地图返回');
639.         checkRoute()
640.     }
641. }
642. function submit() {
643.     formRef.value?.validate(async (valid: boolean) => {
644.         if (valid) {
645.             let params = {
646.                 estimateKey: estimateKey.value,
647.                 //备注
648.                 passengerRemark: form.passengerRemark,
649.                 highwayType: '2',
650.                 productCode: outWayType.value,
651.                 createModel: '4',
652.                 //乘客手机号
653.                 passengerPhone: form.passengerPhone,
654.                 //司机手机号
655.                 driverPhone: form.phone,
656.             }
657.             const res = await orderSubmission(params)
658.             console.log(res, '代下单提交返回res');
659.             if (res.code == 200) {
660.                 ElMessage.success('下单成功')
661.                 emits('update', false)
662.             }
663.         }
664.     })
665. }
667. function cancel() {
668.     emits('update', false)
669. }
671. function handleClose() {
672.     emits('update', false)
673. }
674. </script>
676. <style scoped>
677. .el-dialog {
678.     border-radius: 8px;
679. }
681. .leftForm {
682.     display: grid;
683.     grid-template-columns: 1fr 1fr;
684.     gap: 20px;
685.     position: relative;
686. }
688. .leftCard {
689.     padding: 10px;
690.     border: 1px solid #e6e6e6;
691.     border-radius: 10px;
692. }
694. #formRef {
695.     margin-left: 10px;
696. }
698. .leftTitle {
699.     font-weight: 600;
700.     font-size: 16px;
701.     margin-bottom: 10px;
702. }
704. .tips {
705.     font-size: 12px;
706.     margin-left: 10px;
707.     color: #999;
708.     margin-top: 10px;
709. }
711. .completeDiv {
712.     width: 350px;
713. }
715. .partDiv {
716.     width: 249px;
717. }
719. .choosePoint {
720.     width: 80px;
721.     margin-left: 10px;
722. }
724. .rightTitle {
725.     font-weight: 600;
726.     font-size: 16px;
727.     margin-right: 10px;
728. }
730. .rightTop {
731.     margin-bottom: 10px;
732. }
734. .rightText {
735.     font-size: 12px;
736.     color: #999;
737. }
739. .priceBox {
740.     border: 1px solid #e6e6e6;
741.     border-radius: 8px;
742.     padding: 10px;
743.     margin-bottom: 15px;
744.     display: grid;
745.     grid-template-columns: 1fr 4fr;
746.     cursor: pointer;
747. }
749. .activeBox {
750.     border: 1px solid black;
751. }
753. .noAccord {
754.     width: 100%;
755.     height: 100px;
756.     display: flex;
757.     align-items: center;
758.     justify-content: center;
759. }
761. .priceTitle {
762.     font-size: 18px;
763.     font-weight: 600;
764.     /* margin-bottom: 10px; */
765.     display: flex;
766.     align-items: center;
767.     justify-content: center;
768. }
770. .priceContent {
771.     display: flex;
772.     align-items: center;
773.     margin-bottom: 10px;
774.     background-color: #f5f5f5;
775.     border-radius: 5px;
776. }
778. .priceLabel {
779.     color: #666;
780.     margin-right: 10px;
781.     padding: 10px;
782. }
784. .priceValue {
785.     font-size: 20px;
786.     font-weight: 600;
787. }
789. .priceDesc {
790.     font-size: 12px;
791.     color: #999;
792. }
794. .redText {
795.     color: red;
796. }
798. .dialog-footer {
799.     position: absolute;
800.     bottom: 0;
801.     right: 0;
802.     padding: 10px;
803.     /* text-align: center;
804.     width: 350px; */
806. }
808. .blankBorder {
809.     border: 1px solid #efefef;
810.     width: 100%;
811.     height: 100px;
812.     border-radius: 15px;
813.     display: grid;
814.     grid-template-columns: 1fr 4fr;
815.     margin-bottom: 10px;
816. }
818. .blankLeft {
819.     display: flex;
820.     align-items: center;
821.     justify-content: center
822. }
824. .leftBlank {
825.     width: 50px;
826.     height: 50px;
827.     border-right: 1px solid #e6e6e6;
828.     background-color: #efefef;
829.     border-radius: 10px;
831. }
833. .leftTop {
834.     width: 100%;
835.     height: 40px;
836.     background-color: #efefef;
837.     border-radius: 10px;
838.     margin-bottom: 5px;
839. }
841. .leftBottom {
842.     width: 100%;
843.     height: 20px;
844.     background-color: #efefef;
845.     border-radius: 5px;
846. }
847. </style>

复制代码

常见问题 | 腾讯位置服务  看文档一步一步来

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。