<template>
<view class="box">
<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 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>
<!-- yuyue 老预约-->
</view>
</view>
</template>
<script>
import QQMapWX from '@/utils/qqmap-wx-jssdk.js'
export default {
components: {
},
data() {
return {
comment:'',
totalPrice:99,
userInfo:'',
timedata:'',
billDate:'',
yuyueData:'',
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()
}
console.log(opt)
},
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;
}
})
},
yuyue(){
var that=this;
if(!this.billDate){
uni.showToast({
title: '请选择预约时间',
icon: 'none',
duration: 3000
});
return false;
}
if(!this.isGoing){
return false;
}
this.isGoing=true;
this.$http('openreservation/saveOrderSheet', {
billDate: this.billDate,
comment: this.comment,
carID: this.carInfo.id,
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
this.isGoing=false;
if(res.code==0){
uni.showModal({
title: '提示',
content: '预约成功',
confirmText:'返回首页',
cancelText:'查看订单',
success: function (res) {
if (res.confirm) {
// console.log('用户点击确定');
uni.switchTab({
url:'index'
})
} else if (res.cancel) {
// console.log('用户点击取消');
// uni.reLaunch({
// url:'../user/bespeakDetail?id='+id
// })
uni.redirectTo({
url:'../subPack/rescueOrderOrderDetail?id='+that.orderId
})
}
}
});
}else{
uni.showToast({
title: res.msg,
icon: 'none',
duration: 3000
});
}
})
},
changeTime(data){
console.log(data)
this.billDate=data
},
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)
},
});
},
}
}
</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;
}
.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;
}
.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;
}
.kkline{
display: flex;
padding: 30rpx 0;
border-bottom: 1px solid #EEEEEE;
color: #666666;
font-size: 28rpx;
justify-content: space-between;
}
.kkline2{
display: flex;
justify-content: space-between;
padding: 30rpx 0;
border-bottom: 1px solid #EEEEEE;
color: #666666;
font-size: 28rpx;
}
.kklineRight{
color: #3c3c3c;
font-size: 28rpx;
width: 450rpx;
text-align: right;
}
.kklineLeft {
width: 200rpx;
}
.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%;
}
.bottom-container{
width: 750rpx;
height: 120rpx;
background: #FFFFFF;
box-shadow: 0px -2px 10px 0px rgba(153,153,153,0.1000);
position: fixed;
left: 0;
bottom: 0;
display: flex;
justify-content: space-between;
}
.newyyBotbutton{
width: 204rpx;
height: 74rpx;
background: #D53533;
border-radius: 37rpx;
font-weight: 500;
color: #FFFFFF;
line-height: 74rpx;
text-align: center;
margin-right: 30rpx;
margin-top: 23rpx;
}
.bottom-container-price{
color: #FF0000;
padding-top: 30rpx;
padding-left: 30rpx;
font-size: 32rpx;
}
.qianhaospan{
font-size: 22rpx;
}
.ckj{
color: #999999;font-size: 24rpx;
padding-left: 30rpx;
}
</style>