|
|
@@ -1,104 +1,104 @@
|
|
|
<template>
|
|
|
<view class="box">
|
|
|
- <view class="top-box" :style="{background:'#'+themeColor}">
|
|
|
- <view class="topTis"><!-- 需提前2小时取消订单，不足2小时需联系门 --></view>
|
|
|
+ <view class="top-box" :style="{background:'#'+themeColor}">
|
|
|
+ <view class="topTis"><!-- 需提前2小时取消订单，不足2小时需联系门 --></view>
|
|
|
+ </view>
|
|
|
+ <view class="topTime">
|
|
|
+ <img src="../../static/timg/icon_shijian.png" alt="" class="topTimeImg">
|
|
|
+ <view class="topTimeNum">{{opt.time}}</view>
|
|
|
+ </view>
|
|
|
+ <!-- 救援拖车框 -->
|
|
|
+ <view class="tcBox" v-if="opt.type==2">
|
|
|
+ <view class="tcLeft">
|
|
|
+ <view class="tcStart">
|
|
|
+ <view class="tcStartYq"></view>
|
|
|
+ <view class="tcStartTitle">起点</view>
|
|
|
+ <view class="tcStartTxt">{{opt.currentAddress}}</view>
|
|
|
+ </view>
|
|
|
+ <view class="tcEnd">
|
|
|
+ <view class="tcEndYq"></view>
|
|
|
+ <view class="tcStartTitle">终点</view>
|
|
|
+ <view class="tcStartTxt">{{opt.endAddress}}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="tcRight">约{{distance}}km</view>
|
|
|
+ </view>
|
|
|
+ <view class="tcBox" v-else>
|
|
|
+ <view class="tcLeft2">
|
|
|
+ <view class="tcStart">
|
|
|
+ <view class="tcStartYq"></view>
|
|
|
+ <view class="tcStartTitle">位置</view>
|
|
|
+ <view class="tcStartTxt2">{{opt.currentAddress}}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 救援拖车框 -->
|
|
|
+ <view class="contBox">
|
|
|
+ <view class="kkline">
|
|
|
+ <view class="kklineLeft">
|
|
|
+ <span>服务门店</span>
|
|
|
+ </view>
|
|
|
+ <view class="kklineRight">{{shopName}}</view>
|
|
|
+ </view>
|
|
|
+ <view class="kkline">
|
|
|
+ <view class="kklineLeft">
|
|
|
+ <span>救援项目</span>
|
|
|
+ </view>
|
|
|
+ <view class="kklineRight" v-if="opt.type==1">搭电</view>
|
|
|
+ <view class="kklineRight" v-if="opt.type==2">拖车</view>
|
|
|
+ <view class="kklineRight" v-if="opt.type==3">换胎</view>
|
|
|
+ <view class="kklineRight" v-if="opt.type==4">未知原因</view>
|
|
|
+ </view>
|
|
|
+ <view class="kkline">
|
|
|
+ <view class="kklineLeft2">
|
|
|
+ <span class="stars">*</span> <span>救援场景</span>
|
|
|
+ </view>
|
|
|
+ <view class="kklineRight2">
|
|
|
+ <view class="jyKK " :class="{jyKKActive:jykkNum==1}" @click="jykk(1)">地面</view>
|
|
|
+ <view class="jyKK" :class="{jyKKActive:jykkNum==2}" @click="jykk(2)">车库</view>
|
|
|
+ <view class="jyKK" :class="{jyKKActive:jykkNum==3}" @click="jykk(3)">其他</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="kkline">
|
|
|
+ <view class="kklineLeft">
|
|
|
+ <span class="stars">*</span> <span>车牌号</span>
|
|
|
+ </view>
|
|
|
+ <view class="kklineRight3" @click="goCarlist">
|
|
|
+ <span>{{carInfo.plateNumber?carInfo.plateNumber:'请选择'}}</span>
|
|
|
+ <img src="../../static/img/big_rightArrow.png" alt="" class="rightJt">
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="kkline">
|
|
|
+ <view class="kklineLeft">
|
|
|
+ <span class="stars">*</span> <span>车型</span>
|
|
|
+ </view>
|
|
|
+ <view class="kklineRight3" @click="goCarlist">
|
|
|
+ <span>{{carInfo.carModel?carInfo.carModel:'请选择'}}</span>
|
|
|
+ <img src="../../static/img/big_rightArrow.png" alt="" class="rightJt">
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="kkline">
|
|
|
+ <view class="kklineLeft">
|
|
|
+ <span class="stars">*</span><span>救援联系人</span>
|
|
|
+ </view>
|
|
|
+ <view class="kklineRight">
|
|
|
+ <input type="text" placeholder="请输入" v-model="customerName">
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="kkline">
|
|
|
+ <view class="kklineLeft">
|
|
|
+ <span class="stars">*</span><span>手机号</span>
|
|
|
+ </view>
|
|
|
+ <view class="kklineRight"><input type="text" placeholder="请输入" v-model="mobilePhone"></view>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
- <view class="topTime">
|
|
|
- <img src="../../static/timg/icon_shijian.png" alt="" class="topTimeImg">
|
|
|
- <view class="topTimeNum">{{opt.time}}</view>
|
|
|
- </view>
|
|
|
- <!-- 救援拖车框 -->
|
|
|
- <view class="tcBox" v-if="opt.type==2">
|
|
|
- <view class="tcLeft">
|
|
|
- <view class="tcStart">
|
|
|
- <view class="tcStartYq"></view>
|
|
|
- <view class="tcStartTitle">起点</view>
|
|
|
- <view class="tcStartTxt">{{opt.currentAddress}}</view>
|
|
|
- </view>
|
|
|
- <view class="tcEnd">
|
|
|
- <view class="tcEndYq"></view>
|
|
|
- <view class="tcStartTitle">终点</view>
|
|
|
- <view class="tcStartTxt">{{opt.endAddress}}</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="tcRight">约{{distance}}km</view>
|
|
|
- </view>
|
|
|
- <view class="tcBox" v-else>
|
|
|
- <view class="tcLeft2">
|
|
|
- <view class="tcStart">
|
|
|
- <view class="tcStartYq"></view>
|
|
|
- <view class="tcStartTitle">位置</view>
|
|
|
- <view class="tcStartTxt2">{{opt.currentAddress}}</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <!-- 救援拖车框 -->
|
|
|
- <view class="contBox">
|
|
|
- <view class="kkline">
|
|
|
- <view class="kklineLeft">
|
|
|
- <span>服务门店</span>
|
|
|
- </view>
|
|
|
- <view class="kklineRight">{{shopName}}</view>
|
|
|
- </view>
|
|
|
- <view class="kkline">
|
|
|
- <view class="kklineLeft">
|
|
|
- <span>救援项目</span>
|
|
|
- </view>
|
|
|
- <view class="kklineRight" v-if="opt.type==1">搭电</view>
|
|
|
- <view class="kklineRight" v-if="opt.type==2">拖车</view>
|
|
|
- <view class="kklineRight" v-if="opt.type==3">换胎</view>
|
|
|
- <view class="kklineRight" v-if="opt.type==4">未知原因</view>
|
|
|
- </view>
|
|
|
- <view class="kkline">
|
|
|
- <view class="kklineLeft2">
|
|
|
- <span class="stars">*</span> <span>救援场景</span>
|
|
|
- </view>
|
|
|
- <view class="kklineRight2">
|
|
|
- <view class="jyKK " :class="{jyKKActive:jykkNum==1}" @click="jykk(1)">地面</view>
|
|
|
- <view class="jyKK" :class="{jyKKActive:jykkNum==2}" @click="jykk(2)">车库</view>
|
|
|
- <view class="jyKK" :class="{jyKKActive:jykkNum==3}" @click="jykk(3)">其他</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="kkline">
|
|
|
- <view class="kklineLeft">
|
|
|
- <span class="stars">*</span> <span>车牌号</span>
|
|
|
- </view>
|
|
|
- <view class="kklineRight3" @click="goCarlist">
|
|
|
- <span>{{carInfo.plateNumber?carInfo.plateNumber:'请选择'}}</span>
|
|
|
- <img src="../../static/img/big_rightArrow.png" alt="" class="rightJt">
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="kkline">
|
|
|
- <view class="kklineLeft">
|
|
|
- <span class="stars">*</span> <span>车型</span>
|
|
|
- </view>
|
|
|
- <view class="kklineRight3" @click="goCarlist">
|
|
|
- <span>{{carInfo.carModel?carInfo.carModel:'请选择'}}</span>
|
|
|
- <img src="../../static/img/big_rightArrow.png" alt="" class="rightJt">
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="kkline">
|
|
|
- <view class="kklineLeft">
|
|
|
- <span class="stars">*</span><span>救援联系人</span>
|
|
|
- </view>
|
|
|
- <view class="kklineRight">
|
|
|
- <input type="text" placeholder="请输入" v-model="customerName">
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="kkline">
|
|
|
- <view class="kklineLeft">
|
|
|
- <span class="stars">*</span><span>手机号</span>
|
|
|
- </view>
|
|
|
- <view class="kklineRight"><input type="text" placeholder="请输入" v-model="mobilePhone"></view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
|
|
|
<view style="height: 120rpx;"></view>
|
|
|
<view class="bottom-container">
|
|
|
<view class="heji">
|
|
|
<!-- <span>合计</span> <span style="font-size: 22rpx;color: #FF0000;">￥</span> <span style="font-size: 32rpx;color: #FF0000;" >759</span> -->
|
|
|
</view>
|
|
|
- <view class="newyyBotbutton" :style="{background:'#'+themeColor}" @click="submitOrder">提交订单</view>
|
|
|
+ <view class="newyyBotbutton" :style="{background:'#'+themeColor}" @click="submitOrder">提交订单</view>
|
|
|
<!-- yuyue 老预约-->
|
|
|
</view>
|
|
|
|
|
|
@@ -120,125 +120,125 @@
|
|
|
timedata:'',
|
|
|
billDate:'',
|
|
|
yuyueData:'',
|
|
|
- carInfo:'',
|
|
|
- yyshopInfo:'',
|
|
|
- themeColor:'',
|
|
|
- shopName:'',
|
|
|
- opt:'',
|
|
|
- distance:'',
|
|
|
- jykkNum:1,
|
|
|
- customerName:'',
|
|
|
- mobilePhone:'',
|
|
|
- isGoing:false,
|
|
|
+ carInfo:'',
|
|
|
+ yyshopInfo:'',
|
|
|
+ themeColor:'',
|
|
|
+ shopName:'',
|
|
|
+ opt:'',
|
|
|
+ distance:'',
|
|
|
+ jykkNum:1,
|
|
|
+ customerName:'',
|
|
|
+ mobilePhone:'',
|
|
|
+ isGoing:false,
|
|
|
orderId:'',
|
|
|
}
|
|
|
},
|
|
|
- onLoad(opt) {
|
|
|
- this.themeColor = uni.getStorageSync("themeColor");
|
|
|
- //this.userInfo = uni.getStorageSync("userInfo");
|
|
|
- var customerInfo=uni.getStorageSync("wxOpenData").loginInfo.customerInfo;
|
|
|
- this.customerName=customerInfo.customerName;
|
|
|
- this.mobilePhone=customerInfo.mobilePhone;
|
|
|
- this.userInfo = this.$store.state.userInfo;
|
|
|
- this.shopName=opt.shopName;
|
|
|
- this.opt=opt;
|
|
|
- if(this.opt.type==2){
|
|
|
- this.calculateDistance()
|
|
|
- }
|
|
|
+ onLoad(opt) {
|
|
|
+ this.themeColor = uni.getStorageSync("themeColor");
|
|
|
+ //this.userInfo = uni.getStorageSync("userInfo");
|
|
|
+ var customerInfo=uni.getStorageSync("wxOpenData").loginInfo.customerInfo;
|
|
|
+ this.customerName=customerInfo.customerName;
|
|
|
+ this.mobilePhone=customerInfo.mobilePhone;
|
|
|
+ this.userInfo = this.$store.state.userInfo;
|
|
|
+ this.shopName=opt.shopName;
|
|
|
+ this.opt=opt;
|
|
|
+ if(this.opt.type==2){
|
|
|
+ this.calculateDistance()
|
|
|
+ }
|
|
|
console.log(opt)
|
|
|
},
|
|
|
- onShow() {
|
|
|
- this.carInfo=this.$store.state.carInfo;
|
|
|
- console.log(this.carInfo)
|
|
|
+ onShow() {
|
|
|
+ this.carInfo=this.$store.state.carInfo;
|
|
|
+ console.log(this.carInfo)
|
|
|
},
|
|
|
- methods: {
|
|
|
- jykk(num){
|
|
|
- this.jykkNum=num;
|
|
|
- },
|
|
|
- goCarlist(){
|
|
|
- uni.navigateTo({
|
|
|
- url:'../user/addCar/cailist'
|
|
|
- })
|
|
|
- },
|
|
|
- submitOrder(){
|
|
|
- if(this.isGoing){
|
|
|
- return false;
|
|
|
- }
|
|
|
- if(!this.carInfo.carModel){
|
|
|
- uni.showToast({
|
|
|
- title: '请输选择车型',
|
|
|
- icon: 'none',
|
|
|
- duration: 3000
|
|
|
- });
|
|
|
- return false;
|
|
|
- }
|
|
|
- if(!this.customerName){
|
|
|
- uni.showToast({
|
|
|
- title: '请输入救援联系人',
|
|
|
- icon: 'none',
|
|
|
- duration: 3000
|
|
|
- });
|
|
|
- return false;
|
|
|
- }
|
|
|
- if(!this.mobilePhone){
|
|
|
- uni.showToast({
|
|
|
- title: '请输入手机号',
|
|
|
- icon: 'none',
|
|
|
- duration: 3000
|
|
|
- });
|
|
|
- return false;
|
|
|
- }
|
|
|
- this.isGoing=true;
|
|
|
- this.$http('openShopHelpSheetOrder/submitOrder', {
|
|
|
- helpType:this.opt.type,
|
|
|
- customerName: this.customerName,
|
|
|
- mobilePhone: this.mobilePhone,
|
|
|
- //orderItem: this.yuyueData.map(item => item.ID).join(),
|
|
|
- shopID: this.opt.shopId,
|
|
|
- plateNumber: this.carInfo.plateNumber,
|
|
|
- carModel:this.carInfo.carModel,
|
|
|
- hEndAddress:this.opt.endAddress,
|
|
|
- hStartAddress:this.opt.currentAddress,
|
|
|
- orderType:this.opt.orderType,
|
|
|
- hTime:this.opt.time,
|
|
|
- hscene:this.jykkNum,
|
|
|
- startLng:this.opt.lng,
|
|
|
- startLat:this.opt.lat,
|
|
|
- endLng:this.opt.endLng,
|
|
|
- endLat:this.opt.endLat,
|
|
|
- },'POST').then(res => {
|
|
|
- console.log(res)
|
|
|
- var id=res.data
|
|
|
- console.log(id)
|
|
|
- if(res.code==0){
|
|
|
- uni.showModal({
|
|
|
- title: '提示',
|
|
|
- content: '救援信息提交成功',
|
|
|
- confirmText:'返回首页',
|
|
|
- cancelText:'查看订单',
|
|
|
- success: function (res) {
|
|
|
- this.isGoing=false;
|
|
|
-
|
|
|
- if (res.confirm) {
|
|
|
- // console.log('用户点击确定');
|
|
|
- uni.switchTab({
|
|
|
- url:'index'
|
|
|
- })
|
|
|
- } else if (res.cancel) {
|
|
|
- // uni.hideLoading();
|
|
|
- uni.redirectTo({
|
|
|
- url:'../subPack/rescueOrderOrderDetail?id='+id
|
|
|
- })
|
|
|
-
|
|
|
- }
|
|
|
- }
|
|
|
- });
|
|
|
- }else{
|
|
|
- this.isGoing=false;
|
|
|
- }
|
|
|
- })
|
|
|
+ methods: {
|
|
|
+ jykk(num){
|
|
|
+ this.jykkNum=num;
|
|
|
+ },
|
|
|
+ goCarlist(){
|
|
|
+ uni.navigateTo({
|
|
|
+ url:'../user/addCar/cailist'
|
|
|
+ })
|
|
|
},
|
|
|
- yuyue(){
|
|
|
+ submitOrder(){
|
|
|
+ if(this.isGoing){
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ if(!this.carInfo.carModel){
|
|
|
+ uni.showToast({
|
|
|
+ title: '请输选择车型',
|
|
|
+ icon: 'none',
|
|
|
+ duration: 3000
|
|
|
+ });
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ if(!this.customerName){
|
|
|
+ uni.showToast({
|
|
|
+ title: '请输入救援联系人',
|
|
|
+ icon: 'none',
|
|
|
+ duration: 3000
|
|
|
+ });
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ if(!this.mobilePhone){
|
|
|
+ uni.showToast({
|
|
|
+ title: '请输入手机号',
|
|
|
+ icon: 'none',
|
|
|
+ duration: 3000
|
|
|
+ });
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ this.isGoing=true;
|
|
|
+ this.$http('openShopHelpSheetOrder/submitOrder', {
|
|
|
+ helpType:this.opt.type,
|
|
|
+ customerName: this.customerName,
|
|
|
+ mobilePhone: this.mobilePhone,
|
|
|
+ //orderItem: this.yuyueData.map(item => item.ID).join(),
|
|
|
+ shopID: this.opt.shopId,
|
|
|
+ plateNumber: this.carInfo.plateNumber,
|
|
|
+ carModel:this.carInfo.carModel,
|
|
|
+ hEndAddress:this.opt.endAddress,
|
|
|
+ hStartAddress:this.opt.currentAddress,
|
|
|
+ orderType:this.opt.orderType,
|
|
|
+ hTime:this.opt.time,
|
|
|
+ hscene:this.jykkNum,
|
|
|
+ startLng:this.opt.lng,
|
|
|
+ startLat:this.opt.lat,
|
|
|
+ endLng:this.opt.endLng,
|
|
|
+ endLat:this.opt.endLat,
|
|
|
+ },'POST').then(res => {
|
|
|
+ console.log(res)
|
|
|
+ var id=res.data
|
|
|
+ console.log(id)
|
|
|
+ if(res.code==0){
|
|
|
+ uni.showModal({
|
|
|
+ title: '提示',
|
|
|
+ content: '救援信息提交成功',
|
|
|
+ confirmText:'返回首页',
|
|
|
+ cancelText:'查看订单',
|
|
|
+ success: function (res) {
|
|
|
+ this.isGoing=false;
|
|
|
+
|
|
|
+ if (res.confirm) {
|
|
|
+ // console.log('用户点击确定');
|
|
|
+ uni.switchTab({
|
|
|
+ url:'index'
|
|
|
+ })
|
|
|
+ } else if (res.cancel) {
|
|
|
+ // uni.hideLoading();
|
|
|
+ uni.redirectTo({
|
|
|
+ url:'../subPack/rescueOrderOrderDetail?id='+id
|
|
|
+ })
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }else{
|
|
|
+ this.isGoing=false;
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ yuyue(){
|
|
|
var that=this;
|
|
|
if(!this.billDate){
|
|
|
uni.showToast({
|
|
|
@@ -247,10 +247,10 @@
|
|
|
duration: 3000
|
|
|
});
|
|
|
return false;
|
|
|
- }
|
|
|
- if(!this.isGoing){
|
|
|
- return false;
|
|
|
- }
|
|
|
+ }
|
|
|
+ if(!this.isGoing){
|
|
|
+ return false;
|
|
|
+ }
|
|
|
this.isGoing=true;
|
|
|
this.$http('openreservation/saveOrderSheet', {
|
|
|
billDate: this.billDate,
|
|
|
@@ -259,10 +259,10 @@
|
|
|
orderItem: this.yuyueData.map(item => item.ID).join(),
|
|
|
shopId: this.yyshopInfo.id,
|
|
|
unionId: this.userInfo.unionId
|
|
|
- },'POST').then(res => {
|
|
|
- console.log(res)
|
|
|
- console.log(res.data)
|
|
|
- that.orderId=res.data
|
|
|
+ },'POST').then(res => {
|
|
|
+ console.log(res)
|
|
|
+ console.log(res.data)
|
|
|
+ that.orderId=res.data
|
|
|
this.isGoing=false;
|
|
|
if(res.code==0){
|
|
|
uni.showModal({
|
|
|
@@ -277,13 +277,13 @@
|
|
|
url:'index'
|
|
|
})
|
|
|
} else if (res.cancel) {
|
|
|
- // console.log('用户点击取消');
|
|
|
- // uni.reLaunch({
|
|
|
- // url:'../user/bespeakDetail?id='+id
|
|
|
- // })
|
|
|
- uni.redirectTo({
|
|
|
- url:'../subPack/rescueOrderOrderDetail?id='+that.orderId
|
|
|
- })
|
|
|
+ // console.log('用户点击取消');
|
|
|
+ // uni.reLaunch({
|
|
|
+ // url:'../user/bespeakDetail?id='+id
|
|
|
+ // })
|
|
|
+ uni.redirectTo({
|
|
|
+ url:'../subPack/rescueOrderOrderDetail?id='+that.orderId
|
|
|
+ })
|
|
|
|
|
|
}
|
|
|
}
|
|
|
@@ -304,170 +304,173 @@
|
|
|
},
|
|
|
cktime(){
|
|
|
this.$refs.timeSelect.open();
|
|
|
- },
|
|
|
- //计算距离
|
|
|
- calculateDistance(){
|
|
|
- //调用距离计算接口
|
|
|
- var that=this;
|
|
|
- const tMap = new QQMapWX({
|
|
|
- key: 'L2GBZ-CIS6J-HRFFV-K5LO6-QROT7-BQFXZ' //开发者密钥 //这里要换成自己的key
|
|
|
- });
|
|
|
-
|
|
|
- tMap.calculateDistance({
|
|
|
- mode: 'driving',//可选值：'driving'（驾车）、'walking'（步行），不填默认：'walking',可不填
|
|
|
- //from参数不填默认当前地址
|
|
|
- //获取表单提交的经纬度并设置from和to参数（示例为string格式）
|
|
|
- from: {
|
|
|
- latitude: that.opt.lat,
|
|
|
- longitude: that.opt.lng,
|
|
|
- }, //若起点有数据则采用起点坐标，若为空默认当前地址
|
|
|
- to:[
|
|
|
- {
|
|
|
- latitude: that.opt.endLat,
|
|
|
- longitude: that.opt.endLng
|
|
|
- }
|
|
|
- ] , //终点坐标
|
|
|
- success: function(res) {//成功后的回调
|
|
|
- console.log(res);
|
|
|
- that.distance=res.result.elements[0].distance/1000;
//that.distance=that.distance.tofixed(2)
|
|
|
- },
|
|
|
- });
|
|
|
+ },
|
|
|
+ //计算距离
|
|
|
+ calculateDistance(){
|
|
|
+ //调用距离计算接口
|
|
|
+ var that=this;
|
|
|
+ const tMap = new QQMapWX({
|
|
|
+ key: 'L2GBZ-CIS6J-HRFFV-K5LO6-QROT7-BQFXZ' //开发者密钥 //这里要换成自己的key
|
|
|
+ });
|
|
|
+
|
|
|
+ tMap.calculateDistance({
|
|
|
+ mode: 'driving',//可选值：'driving'（驾车）、'walking'（步行），不填默认：'walking',可不填
|
|
|
+ //from参数不填默认当前地址
|
|
|
+ //获取表单提交的经纬度并设置from和to参数（示例为string格式）
|
|
|
+ from: {
|
|
|
+ latitude: that.opt.lat,
|
|
|
+ longitude: that.opt.lng,
|
|
|
+ }, //若起点有数据则采用起点坐标，若为空默认当前地址
|
|
|
+ to:[
|
|
|
+ {
|
|
|
+ latitude: that.opt.endLat,
|
|
|
+ longitude: that.opt.endLng
|
|
|
+ }
|
|
|
+ ] , //终点坐标
|
|
|
+ success: function(res) {//成功后的回调
|
|
|
+ console.log(res);
|
|
|
+ that.distance=res.result.elements[0].distance/1000;
|
|
|
+ //that.distance=that.distance.tofixed(2)
|
|
|
+ },
|
|
|
+
|
|
|
+ });
|
|
|
+
|
|
|
},
|
|
|
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
-<style scoped lang="less">
|
|
|
- .topTis{
|
|
|
- font-weight: 400;
|
|
|
- color: #FFFFFF;
|
|
|
- font-size: 26rpx;
|
|
|
- text-align: center;
|
|
|
- padding-top: 24rpx;
|
|
|
- }
|
|
|
-.tcBox{
|
|
|
- width: 702rpx;
|
|
|
- margin-top: 20rpx;
|
|
|
- margin-left: 24rpx;
|
|
|
- background: #FFFFFF;
|
|
|
- border-radius: 10rpx;
|
|
|
- display: flex;
|
|
|
-
|
|
|
-}
|
|
|
-.heji{
|
|
|
- font-weight: 500;
|
|
|
- color: #666666;
|
|
|
- padding-left: 30rpx;
|
|
|
- line-height: 120rpx;
|
|
|
-}
|
|
|
+<style scoped lang="less">
|
|
|
+ .topTis{
|
|
|
+ font-weight: 400;
|
|
|
+ color: #FFFFFF;
|
|
|
+ font-size: 26rpx;
|
|
|
+ text-align: center;
|
|
|
+ padding-top: 24rpx;
|
|
|
+ }
|
|
|
+.tcBox{
|
|
|
+ width: 702rpx;
|
|
|
+ margin-top: 20rpx;
|
|
|
+ margin-left: 24rpx;
|
|
|
+ background: #FFFFFF;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+}
|
|
|
+.heji{
|
|
|
+ font-weight: 500;
|
|
|
+ color: #666666;
|
|
|
+ padding-left: 30rpx;
|
|
|
+ line-height: 120rpx;
|
|
|
+}
|
|
|
.rightJt{
|
|
|
width: 30rpx;
|
|
|
height: 30rpx;
|
|
|
margin-top: 4rpx;
|
|
|
-}
|
|
|
-.kklineRight3{
|
|
|
- display: flex;
|
|
|
- color: #3c3c3c;
|
|
|
- font-size: 28rpx;
|
|
|
-
|
|
|
-}
|
|
|
-.kklineRight2{
|
|
|
- display: flex;
|
|
|
-}
|
|
|
-.jyKK{
|
|
|
- width: 108rpx;
|
|
|
- height: 56rpx;
|
|
|
- border-radius: 6rpx;
|
|
|
- border: 2rpx solid #CCCCCC;
|
|
|
- color: #666666;
|
|
|
- font-size: 24rpx;
|
|
|
- text-align: center;
|
|
|
- line-height: 56rpx;
|
|
|
- margin-left: 20rpx;
|
|
|
-}
|
|
|
-.jyKKActive{
|
|
|
- background: #FF0000;
|
|
|
- border: none;
|
|
|
- height: 60rpx;
|
|
|
- color: #FFFFFF;
|
|
|
-}
|
|
|
-.kklineLeft2{
|
|
|
- line-height: 60rpx;
|
|
|
-}
|
|
|
-.contBox{
|
|
|
- width: 662rpx;
|
|
|
- margin-top: 20rpx;
|
|
|
- margin-left: 24rpx;
|
|
|
- background: #FFFFFF;
|
|
|
- border-radius: 10rpx;
|
|
|
- padding: 0 20rpx;
|
|
|
-}
|
|
|
+}
|
|
|
+.kklineRight3{
|
|
|
+ display: flex;
|
|
|
+ color: #3c3c3c;
|
|
|
+ font-size: 28rpx;
|
|
|
+
|
|
|
+}
|
|
|
+.kklineRight2{
|
|
|
+ display: flex;
|
|
|
+}
|
|
|
+.jyKK{
|
|
|
+ width: 108rpx;
|
|
|
+ height: 56rpx;
|
|
|
+ border-radius: 6rpx;
|
|
|
+ border: 2rpx solid #CCCCCC;
|
|
|
+ color: #666666;
|
|
|
+ font-size: 24rpx;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 56rpx;
|
|
|
+ margin-left: 20rpx;
|
|
|
+}
|
|
|
+.jyKKActive{
|
|
|
+ background: #FF0000;
|
|
|
+ border: none;
|
|
|
+ height: 60rpx;
|
|
|
+ color: #FFFFFF;
|
|
|
+}
|
|
|
+.kklineLeft2{
|
|
|
+ line-height: 60rpx;
|
|
|
+}
|
|
|
+.contBox{
|
|
|
+ width: 662rpx;
|
|
|
+ margin-top: 20rpx;
|
|
|
+ margin-left: 24rpx;
|
|
|
+ background: #FFFFFF;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ padding: 0 20rpx;
|
|
|
+}
|
|
|
.stars{
|
|
|
color: #FF2400;
|
|
|
-}
|
|
|
-.tcLeft{
|
|
|
- width: 524rpx;padding-left: 20rpx;
|
|
|
-}
|
|
|
-.tcStartTxt2{
|
|
|
- width: 550rpx;
|
|
|
-}
|
|
|
-.tcLeft2{
|
|
|
- padding-left: 13rpx;
|
|
|
-}
|
|
|
-.tcStart{
|
|
|
- border-bottom: 1px solid #EEEEEE;
|
|
|
- display: flex;
|
|
|
- padding: 29rpx 0;
|
|
|
- font-size: 28rpx;
|
|
|
- color: #333333;
|
|
|
- line-height: 40rpx;
|
|
|
-}
|
|
|
-.tcEnd{
|
|
|
- display: flex;
|
|
|
- padding: 29rpx 0;
|
|
|
- font-size: 28rpx;
|
|
|
- color: #333333;
|
|
|
- line-height: 40rpx;
|
|
|
-}
|
|
|
-.tcStartYq{
|
|
|
- width: 14rpx;
|
|
|
- height: 14rpx;
|
|
|
- background: #3F90F7;
|
|
|
- margin-top: 13rpx;
|
|
|
- border-radius: 50%;
|
|
|
-}
|
|
|
-.tcStartTxt{
|
|
|
- width: 396rpx;
|
|
|
-}
|
|
|
-.tcEndYq{
|
|
|
- width: 14rpx;
|
|
|
- height: 14rpx;
|
|
|
- background: #FF0000;
|
|
|
- margin-top: 13rpx;
|
|
|
- border-radius: 50%;
|
|
|
-}
|
|
|
-.tcStartTitle{
|
|
|
- color: #666666;
|
|
|
- padding: 0 30rpx 0 20rpx;
|
|
|
-}
|
|
|
-.tcRight{
|
|
|
- color: #FF0000;
|
|
|
- line-height: 33rpx;
|
|
|
- font-size: 24rpx;
|
|
|
- padding-top: 30rpx;
|
|
|
- padding-left: 10rpx;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
-}
|
|
|
+}
|
|
|
+.tcLeft{
|
|
|
+ width: 524rpx;padding-left: 20rpx;
|
|
|
+}
|
|
|
+.tcStartTxt2{
|
|
|
+ width: 550rpx;
|
|
|
+}
|
|
|
+.tcLeft2{
|
|
|
+ padding-left: 13rpx;
|
|
|
+}
|
|
|
+.tcStart{
|
|
|
+ border-bottom: 1px solid #EEEEEE;
|
|
|
+ display: flex;
|
|
|
+ padding: 29rpx 0;
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #333333;
|
|
|
+ line-height: 40rpx;
|
|
|
+}
|
|
|
+.tcEnd{
|
|
|
+ display: flex;
|
|
|
+ padding: 29rpx 0;
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #333333;
|
|
|
+ line-height: 40rpx;
|
|
|
+}
|
|
|
+.tcStartYq{
|
|
|
+ width: 14rpx;
|
|
|
+ height: 14rpx;
|
|
|
+ background: #3F90F7;
|
|
|
+ margin-top: 13rpx;
|
|
|
+ border-radius: 50%;
|
|
|
+}
|
|
|
+.tcStartTxt{
|
|
|
+ width: 396rpx;
|
|
|
+}
|
|
|
+.tcEndYq{
|
|
|
+ width: 14rpx;
|
|
|
+ height: 14rpx;
|
|
|
+ background: #FF0000;
|
|
|
+ margin-top: 13rpx;
|
|
|
+ border-radius: 50%;
|
|
|
+}
|
|
|
+.tcStartTitle{
|
|
|
+ color: #666666;
|
|
|
+ padding: 0 30rpx 0 20rpx;
|
|
|
+}
|
|
|
+.tcRight{
|
|
|
+ color: #FF0000;
|
|
|
+ line-height: 33rpx;
|
|
|
+ font-size: 24rpx;
|
|
|
+ padding-top: 30rpx;
|
|
|
+ padding-left: 10rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
.kkline{
|
|
|
display: flex;
|
|
|
padding: 30rpx 0;
|
|
|
border-bottom: 1px solid #EEEEEE;
|
|
|
color: #666666;
|
|
|
- font-size: 28rpx;
|
|
|
+ font-size: 28rpx;
|
|
|
justify-content: space-between;
|
|
|
-}
|
|
|
+}
|
|
|
.kkline2{
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
@@ -475,12 +478,12 @@
|
|
|
border-bottom: 1px solid #EEEEEE;
|
|
|
color: #666666;
|
|
|
font-size: 28rpx;
|
|
|
-}
|
|
|
+}
|
|
|
.kklineRight{
|
|
|
color: #3c3c3c;
|
|
|
font-size: 28rpx;
|
|
|
|
|
|
- width: 450rpx;
|
|
|
+ width: 450rpx;
|
|
|
text-align: right;
|
|
|
}
|
|
|
.kklineLeft {
|
|
|
@@ -489,34 +492,34 @@
|
|
|
.box{
|
|
|
background: #F4F5F7;
|
|
|
min-height: 100vh;
|
|
|
-}
|
|
|
-.topTime{
|
|
|
- width: 702rpx;
|
|
|
- margin-left: 24rpx;
|
|
|
- background: #FFFFFF;
|
|
|
- border-radius: 10rpx;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- padding: 37rpx 0;
|
|
|
- margin-top: -70rpx;
|
|
|
-
|
|
|
-}
|
|
|
-.topTimeImg{
|
|
|
- width: 36rpx;
|
|
|
- height: 36rpx;
|
|
|
-}
|
|
|
-.topTimeNum{
|
|
|
- font-weight: 500;
|
|
|
- font-size: 32rpx;
|
|
|
- line-height: 36rpx;
|
|
|
- color: #333333;
|
|
|
- padding-left: 18rpx;
|
|
|
-}
|
|
|
-.top-box{
|
|
|
- width: 750rpx;
|
|
|
- height: 164rpx;
|
|
|
- background: #FF0000;
|
|
|
- border-radius: 0 0 10% 10%;
|
|
|
+}
|
|
|
+.topTime{
|
|
|
+ width: 702rpx;
|
|
|
+ margin-left: 24rpx;
|
|
|
+ background: #FFFFFF;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ padding: 37rpx 0;
|
|
|
+ margin-top: -70rpx;
|
|
|
+
|
|
|
+}
|
|
|
+.topTimeImg{
|
|
|
+ width: 36rpx;
|
|
|
+ height: 36rpx;
|
|
|
+}
|
|
|
+.topTimeNum{
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 32rpx;
|
|
|
+ line-height: 36rpx;
|
|
|
+ color: #333333;
|
|
|
+ padding-left: 18rpx;
|
|
|
+}
|
|
|
+.top-box{
|
|
|
+ width: 750rpx;
|
|
|
+ height: 164rpx;
|
|
|
+ background: #FF0000;
|
|
|
+ border-radius: 0 0 10% 10%;
|
|
|
}
|
|
|
.bottom-container{
|
|
|
width: 750rpx;
|
