536 lines
11 KiB
Vue
536 lines
11 KiB
Vue
<template>
|
|
<view class="content">
|
|
<view class="c-top">
|
|
<view class="" @click="getback()">
|
|
<uni-icons type="left" size="18"></uni-icons>
|
|
</view>
|
|
<view class="c-title">上门取车</view>
|
|
<view class=""></view>
|
|
</view>
|
|
<view class="ail">
|
|
<view class="ail-box">
|
|
<view class="h-title">上门时间</view>
|
|
<scroll-view scroll-x="true" class="box-bottom">
|
|
<view class="santu" :class="{'lanbox' : tapindex == index}" v-for="(items,index) in itmelist"
|
|
:key="index" @click="gettap(index,items)">
|
|
<view class="" style="font-size: 18px;">{{items.dateStr.substring(5,10).replace('-','月')}}
|
|
</view>
|
|
<view class="">{{items.weekStr}}</view>
|
|
<!-- <view class="">预约人数：{{items.morningCount + items.afterCount}}</view> -->
|
|
</view>
|
|
</scroll-view>
|
|
|
|
<view class="on-input" @click="show = true">
|
|
<view class="baoti">选择时间:</view>
|
|
<text>{{times}}</text>
|
|
</view>
|
|
<!-- <view class="dis">
|
|
<view class="wushi" :class="{'lanbox' : sx == 0}" @click="sx = 0">
|
|
<view class="">上午</view>
|
|
<view class="">当前预约：{{renshu.morningCount}}人</view>
|
|
</view>
|
|
<view class="wushi" :class="{'lanbox' : sx == 1}" @click="sx = 1">
|
|
<view class="">下午</view>
|
|
<view class="">当前预约：{{renshu.afterCount}}人</view>
|
|
</view>
|
|
|
|
</view> -->
|
|
</view>
|
|
<view class="ail-box">
|
|
<view class="on-input">
|
|
<view class="baoti">商品名称:</view>
|
|
<text>{{goodsname}}</text>
|
|
</view>
|
|
<view class="on-input">
|
|
<view class="baoti">预约时间:</view>
|
|
<text>{{appointmentday}}</text>
|
|
|
|
</view>
|
|
<view class="on-input">
|
|
<view class="baoti">手机号:</view>
|
|
|
|
<input type="text" v-model="tel">
|
|
|
|
</view>
|
|
|
|
</view>
|
|
</view>
|
|
<view class="top">
|
|
<view class="top-box" @click="getmap()">
|
|
<view class="tb-left">
|
|
<view class="">
|
|
<view class="text1" v-show="four == ''">请选择地址</view>
|
|
<view class="text1" v-show="four != ''">{{province}}{{city}}{{area}}</view>
|
|
<view class="hong1" v-show="four == ''">*必填，请填写详细地址</view>
|
|
<view class="hong2" v-show="four != ''">
|
|
<input type="text" :placeholder="four">
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="tb-right">
|
|
<uni-icons type="location-filled" color=" #0D2E8D" size="26"></uni-icons>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- <view class="top">
|
|
<view class="on-input">
|
|
<view class="baoti">距离:</view>
|
|
<text>{{jlFunction(distance)}}</text>
|
|
</view>
|
|
<view class="on-input">
|
|
<view class="baoti">金额:</view>
|
|
<text>{{pickPrice || 0}}元</text>
|
|
</view>
|
|
</view> -->
|
|
<view class="sbboss">
|
|
<view class="zz">{{(distance/1000).toFixed(2)}} <text style="font-size: 16px;">Km</text></view>
|
|
<view class="yy">{{pickPrice/100 || 0}} <text style="font-size: 16px;">元</text> </view>
|
|
</view>
|
|
|
|
<view class="bottom-d">
|
|
<view class="annniu" @click="gettijiao()">
|
|
<text>提交</text>
|
|
</view>
|
|
</view>
|
|
<u-datetime-picker :show="show" v-model="value1" mode="time" @confirm="confirms"
|
|
@cancel="cancels"></u-datetime-picker>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import config from '@/config'
|
|
import request from '../../utils/request';
|
|
export default {
|
|
data() {
|
|
return {
|
|
value1: '',
|
|
times: '请选择当天上门时间',
|
|
tapindex: 0,
|
|
show: false,
|
|
sx: 0,
|
|
pickPrice: 0,
|
|
distance: 0,
|
|
type: '',
|
|
goodsname: '',
|
|
goodsId: '',
|
|
itmelist: [],
|
|
partnerId: '',
|
|
appointmentday: '请选择上方时间',
|
|
partnerName: '汽车',
|
|
address: '',
|
|
province: '',
|
|
city: '',
|
|
tel: '',
|
|
area: '',
|
|
latitude: '36.65214755816529',
|
|
longitude: '116.97271519898783',
|
|
position: '',
|
|
four: '',
|
|
renshu: {
|
|
morningCount: 0,
|
|
afterCount: 0
|
|
}
|
|
|
|
}
|
|
},
|
|
onLoad(option) {
|
|
this.goodsname = option.goodsName
|
|
this.goodsId = option.goodsId
|
|
this.type = option.type
|
|
console.log(this.goodsId, this.goodsname);
|
|
this.gettiemlist()
|
|
// this.pickCarInfo( )
|
|
|
|
|
|
},
|
|
methods: {
|
|
jlFunction(num) {
|
|
|
|
let snum = num / 1000
|
|
if (snum >= 1) {
|
|
return snum.toFixed(2) + 'Km'
|
|
} else {
|
|
return snum.toFixed(2) + 'm'
|
|
}
|
|
},
|
|
confirms(e) {
|
|
this.times = e.value
|
|
console.log(e);
|
|
this.show = false
|
|
},
|
|
cancels(e) {
|
|
console.log(e);
|
|
this.show = false
|
|
},
|
|
async gettiemlist() {
|
|
|
|
let res = await request({
|
|
url: '/appInspection/goods/pickCarInfo',
|
|
method: 'get'
|
|
})
|
|
console.log('获取时间', res);
|
|
this.itmelist = res.data.dataList
|
|
this.tel = res.data.userPhone
|
|
|
|
},
|
|
async pickCarInfo() {
|
|
let data = {
|
|
goodsId: this.goodsId,
|
|
type: this.type,
|
|
latitude: this.latitude,
|
|
longitude: this.longitude
|
|
}
|
|
let rest = await request({
|
|
url: '/appInspection/goods/computeDistanceAndPrice',
|
|
method: 'get',
|
|
params: data
|
|
})
|
|
|
|
console.log(rest);
|
|
this.pickPrice = rest.data.pickPrice
|
|
this.distance = rest.data.distance
|
|
|
|
},
|
|
getmap() {
|
|
console.log("点击位置");
|
|
let that = this
|
|
uni.chooseLocation({
|
|
success: function(res) {
|
|
console.log('位置名称：' + res.name);
|
|
console.log('详细地址：' + res.address);
|
|
console.log('纬度：' + res.latitude);
|
|
console.log('经度：' + res.longitude);
|
|
console.log(res)
|
|
that.latitude = res.latitude
|
|
that.longitude = res.longitude
|
|
that.position = res.address
|
|
that.pickCarInfo()
|
|
// that.adds = res.address;
|
|
// let point = new plus.maps.Point(res.longitude,res.latitude);
|
|
var address = res.address;
|
|
var reg = /.+?(省|市|自治区|自治州|县|区)/g;
|
|
let addressList = address.match(reg).toString().split(",");
|
|
if (addressList[0] == '重庆市' || addressList[0] == '北京市' || addressList[0] == '天津市' ||
|
|
addressList[0] == '上海市') {
|
|
that.province = addressList[0];
|
|
that.city = '市辖区';
|
|
that.area = addressList[1];
|
|
that.four = address.replace(that.province, '').replace(that.city, '').replace(that
|
|
.area, '');
|
|
} else {
|
|
that.province = addressList[0];
|
|
that.city = addressList[1];
|
|
that.area = addressList[2];
|
|
that.four = address.replace(that.province, '').replace(that.city, '').replace(that
|
|
.area, '');
|
|
};
|
|
console.log('zdz', that.four);
|
|
|
|
},
|
|
fail: function(errr) {
|
|
console.log(errr);
|
|
}
|
|
});
|
|
|
|
|
|
},
|
|
async getindex() {
|
|
let data = {
|
|
goodsId: this.goodsId,
|
|
type: this.type
|
|
}
|
|
let res = await request({
|
|
url: '/appInspection/goods/appointmentDateList',
|
|
method: 'get',
|
|
params: data
|
|
})
|
|
this.partnerName = res.data.partnerName
|
|
this.address = res.data.address
|
|
this.partnerId = res.data.partnerId
|
|
this.itmelist = res.data.dataList
|
|
this.appointmentday = res.data.dataList[0].dateStr
|
|
console.log(this.appointmentday.substring(5, 10).replace('-', '月'));
|
|
console.log(res.data);
|
|
},
|
|
gettap(index, items) {
|
|
|
|
this.tapindex = index
|
|
this.renshu = items
|
|
this.appointmentday = items.dateStr
|
|
console.log(this.renshu);
|
|
|
|
},
|
|
async gettijiao() {
|
|
|
|
let data = {
|
|
userPhone: this.tel,
|
|
longitude: this.longitude,
|
|
latitude: this.latitude,
|
|
adressDetail: this.position,
|
|
appointmentDay: this.appointmentday,
|
|
appointmentTime: this.times,
|
|
goodsId: this.goodsId,
|
|
type: this.type,
|
|
|
|
}
|
|
let res = await request({
|
|
url: '/appInspection/goods/pickCarInspection',
|
|
method: 'post',
|
|
data: data
|
|
})
|
|
console.log(res);
|
|
if (res.code == 200) {
|
|
console.log("283");
|
|
uni.$emit("pickCar", res.data)
|
|
console.log("284");
|
|
uni.navigateBack({
|
|
delta: 1
|
|
})
|
|
}
|
|
|
|
|
|
},
|
|
getback() {
|
|
|
|
uni.navigateBack({
|
|
delta: 1
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.content {
|
|
width: 100%;
|
|
height: calc(100vh);
|
|
background-color: #F6F6F6;
|
|
box-sizing: border-box;
|
|
// padding-top: 45px;
|
|
}
|
|
|
|
.ail {
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
padding: 10px 15px;
|
|
background-color: #F6F6F6;
|
|
}
|
|
|
|
.ail-box {
|
|
width: 100%;
|
|
border-radius: 8px;
|
|
box-sizing: border-box;
|
|
padding: 15px;
|
|
background: #FFFFFF;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.c-top {
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
padding: 15px;
|
|
padding-top: 16%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
background-color: white;
|
|
}
|
|
|
|
.on-input {
|
|
width: 100%;
|
|
border-bottom: 1px solid #EEEEEE;
|
|
box-sizing: border-box;
|
|
|
|
padding: 10px 0px;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.baoti {
|
|
width: 25%;
|
|
font-size: 15px;
|
|
font-weight: 400;
|
|
color: #666666;
|
|
line-height: 15px;
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.box-bottom {
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.santu {
|
|
width: 32%;
|
|
display: inline-block;
|
|
box-sizing: border-box;
|
|
padding: 10px;
|
|
background: #F8FAFB;
|
|
border-radius: 8px;
|
|
font-size: 15px;
|
|
font-weight: 400;
|
|
color: #999999;
|
|
margin-top: 15px;
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.lanbox {
|
|
background: #E3EAFF !important;
|
|
color: #0D2E8D !important;
|
|
}
|
|
|
|
.dis {
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.wushi {
|
|
width: 49%;
|
|
|
|
box-sizing: border-box;
|
|
padding: 10px;
|
|
background: #F8FAFB;
|
|
border-radius: 8px;
|
|
font-size: 15px;
|
|
font-weight: 400;
|
|
color: #999999;
|
|
}
|
|
|
|
.h-title {
|
|
font-size: 16px;
|
|
font-weight: 400;
|
|
color: #333333;
|
|
margin: 10px auto;
|
|
}
|
|
|
|
.bottom-d {
|
|
width: 100%;
|
|
height: 80px;
|
|
background-color: white;
|
|
position: fixed;
|
|
bottom: 0px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
}
|
|
|
|
.annniu {
|
|
height: 40px;
|
|
background: #0D2E8D;
|
|
width: 90%;
|
|
border-radius: 50px;
|
|
display: flex;
|
|
align-items: center;
|
|
color: white;
|
|
justify-content: center;
|
|
}
|
|
|
|
.top {
|
|
box-sizing: border-box;
|
|
padding: 0px 15px;
|
|
width: 90%;
|
|
border-radius: 10px;
|
|
margin: 10px auto;
|
|
background-color: white;
|
|
}
|
|
|
|
.top-box {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
box-sizing: border-box;
|
|
padding: 20px 0px;
|
|
}
|
|
|
|
.tb-left {
|
|
height: 100%;
|
|
width: 80%;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.uicon {
|
|
width: 18px;
|
|
height: 18px;
|
|
border-radius: 4px;
|
|
color: white;
|
|
background: orangered;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-size: 12px;
|
|
font-weight: bold;
|
|
margin-right: 6px;
|
|
}
|
|
|
|
.tb-right {
|
|
width: 20px;
|
|
height: 26px;
|
|
|
|
image {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.text1 {
|
|
font-size: 16px;
|
|
font-weight: bold;
|
|
color: #363636;
|
|
}
|
|
|
|
.hong1 {
|
|
margin-top: 5px;
|
|
font-size: 12px;
|
|
font-weight: 400;
|
|
color: #FF5453;
|
|
}
|
|
|
|
.hong2 {
|
|
margin-top: 5px;
|
|
font-size: 12px;
|
|
font-weight: 400;
|
|
|
|
}
|
|
|
|
.tinput {
|
|
width: 100%;
|
|
display: flex;
|
|
background: white;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
box-sizing: border-box;
|
|
padding: 16px;
|
|
margin-top: 14px;
|
|
}
|
|
|
|
.sbboss {
|
|
width: 90%;
|
|
margin: 10px auto;
|
|
border-radius: 8px;
|
|
box-sizing: border-box;
|
|
padding: 10px;
|
|
display: flex;
|
|
align-items: center;
|
|
margin-top: 30px;
|
|
// background-color: white;
|
|
}
|
|
|
|
.zz {
|
|
width: 50%;
|
|
text-align: center;
|
|
font-size: 60px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.yy {
|
|
width: 50%;
|
|
text-align: center;
|
|
font-size: 60px;
|
|
font-weight: bold;
|
|
}
|
|
</style> |