428 lines
11 KiB
Vue
428 lines
11 KiB
Vue
|
<!-- 发起订单 -->
|
|||
|
|
<template>
|
|||
|
|
<view class="content">
|
|||
|
|
<view class="dil">
|
|||
|
|
<view class="top-icon" @click="getback()">
|
|||
|
|
<uni-icons type="left" size="18"></uni-icons>
|
|||
|
|
</view>
|
|||
|
|
<!-- 发起救援 头部-->
|
|||
|
|
<view class="top">
|
|||
|
|
<!-- 起 -->
|
|||
|
|
<view class="top-box" >
|
|||
|
|
<view class="tb-left">
|
|||
|
|
<view class="uicon" style="background:#2A96FE; ">
|
|||
|
|
<text>起</text>
|
|||
|
|
</view>
|
|||
|
|
<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" @click="getmap()">
|
|||
|
|
<image src="http://www.nuoyunr.com/lananRsc/dingwei.png" mode=""></image>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<!-- 终 -->
|
|||
|
|
<view class="top-box" v-if="id == 1" style="border-top:1px solid #EAEAEA;">
|
|||
|
|
<view class="tb-left">
|
|||
|
|
<view class="uicon" >
|
|||
|
|
<text>终</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="">
|
|||
|
|
<view class="text1" v-show="four1 == ''">请选择终点地址</view>
|
|||
|
|
<view class="text1" v-show="four1 != ''">{{province1}}{{city1}}{{area1}}</view>
|
|||
|
|
<view class="hong1" v-show="four1 == ''">*必填，请填写详细地址</view>
|
|||
|
|
<view class="hong2" v-show="four1 != ''">
|
|||
|
|
<input type="text" :placeholder="four1">
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="tb-right" @click="getmap1()">
|
|||
|
|
<image src="http://www.nuoyunr.com/lananRsc/dingwei.png" mode=""></image>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<!-- 填空 -->
|
|||
|
|
<view class="tinput">
|
|||
|
|
<view class="text1"> <text class="hong1">*</text> 联系人</view>
|
|||
|
|
<view class="you">
|
|||
|
|
<input type="text" placeholder="请输入联系人">
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="tinput">
|
|||
|
|
<view class="text1"> <text class="hong1">*</text> 手机号</view>
|
|||
|
|
<view class="you">
|
|||
|
|
<input type="text" placeholder="请输入手机号">
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="tinput">
|
|||
|
|
<view class="text1"> <text class="hong1">*</text> 车牌号</view>
|
|||
|
|
<view class="you">
|
|||
|
|
<input type="text" placeholder="请输入车牌号">
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="xinput">
|
|||
|
|
<view class="text1"> <text class="hong1">*</text> 车辆类型</view>
|
|||
|
|
<view class="xz">
|
|||
|
|
<view :class="{'xlan':carzhi == index}" class="kuang" v-for="(item,index) in car" :key="index" @click="getzhi(index)">
|
|||
|
|
<view class="">{{item.text}}</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="xinput">
|
|||
|
|
<view class="text1"> <text class="hong1">*</text> 收费类型</view>
|
|||
|
|
<view class="xz">
|
|||
|
|
<view :class="{'xlan':maneizhi == index}" class="kuang" v-for="(item,index) in manei" :key="index" @click="getzhi2(index)">
|
|||
|
|
<view class="">{{item.text}}</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="tinput">
|
|||
|
|
<view class="text1"> <text class="hong1">*</text> 备注</view>
|
|||
|
|
<view class="you">
|
|||
|
|
<input type="text" placeholder="请输入备注">
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="tinput">
|
|||
|
|
<view class="text1"> <text class="hong1">*</text> 现场图片</view>
|
|||
|
|
<view class="you">
|
|||
|
|
<input type="text" placeholder="请输入现场图片">
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<!-- 上传图片 -->
|
|||
|
|
<u-upload
|
|||
|
|
:fileList="fileList1"
|
|||
|
|
@afterRead="afterRead"
|
|||
|
|
@delete="deletePic"
|
|||
|
|
name="1"
|
|||
|
|
multiple
|
|||
|
|
:maxCount="10"
|
|||
|
|
></u-upload>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<view class="anniu">
|
|||
|
|
<text>发起</text>
|
|||
|
|
</view>
|
|||
|
|
<view style="width: 100%; height: 60px;"></view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<tabBar></tabBar>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import tabBar from'../../components/tabBar/tabBar.vue'
|
|||
|
|
import request from '../../utils/request'
|
|||
|
|
import config from '@/config'
|
|||
|
|
import upload from '@/utils/upload.js'
|
|||
|
|
export default{
|
|||
|
|
data(){
|
|||
|
|
return{
|
|||
|
|
fileList1: [],
|
|||
|
|
|
|||
|
|
id:1,
|
|||
|
|
carzhi:0,
|
|||
|
|
car:[
|
|||
|
|
{text:'大'},
|
|||
|
|
{text:'中'},
|
|||
|
|
{text:'小'}
|
|||
|
|
],
|
|||
|
|
maneizhi:0,
|
|||
|
|
manei:[
|
|||
|
|
{text:'现金'},
|
|||
|
|
{text:'签单'},
|
|||
|
|
|
|||
|
|
],
|
|||
|
|
province:'',
|
|||
|
|
city:'',
|
|||
|
|
area:'',
|
|||
|
|
four:'',
|
|||
|
|
province1:'',
|
|||
|
|
city1:'',
|
|||
|
|
area1:'',
|
|||
|
|
four1:'',
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
onLoad(option) {
|
|||
|
|
this.id = option.id
|
|||
|
|
},
|
|||
|
|
components:{
|
|||
|
|
tabBar,
|
|||
|
|
},
|
|||
|
|
methods:{
|
|||
|
|
// 删除图片
|
|||
|
|
deletePic(event) {
|
|||
|
|
this[`fileList${event.name}`].splice(event.index, 1)
|
|||
|
|
},
|
|||
|
|
// 新增图片
|
|||
|
|
async afterRead(event) {
|
|||
|
|
// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
|
|||
|
|
let lists = [].concat(event.file)
|
|||
|
|
let fileListLen = this[`fileList${event.name}`].length
|
|||
|
|
lists.map((item) => {
|
|||
|
|
this[`fileList${event.name}`].push({
|
|||
|
|
...item,
|
|||
|
|
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
for (let i = 0; i < lists.length; i++) {
|
|||
|
|
const result = await this.uploadFilePromise(lists[i].url)
|
|||
|
|
let item = this[`fileList${event.name}`][fileListLen]
|
|||
|
|
this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
|
|||
|
|
status: 'success',
|
|||
|
|
message: '',
|
|||
|
|
url: result
|
|||
|
|
}))
|
|||
|
|
fileListLen++
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
uploadFilePromise(url) {
|
|||
|
|
console.log(url);
|
|||
|
|
upload({
|
|||
|
|
url:'/common/upload',
|
|||
|
|
filePath: url,
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
}).then((res)=>{
|
|||
|
|
console.log(res);
|
|||
|
|
})
|
|||
|
|
// return new Promise((resolve, reject) => {
|
|||
|
|
// let a = uni.uploadFile({
|
|||
|
|
// url: 'http://192.168.1.2:8080/common/upload', // 仅为示例，非真实的接口地址
|
|||
|
|
// filePath: url,
|
|||
|
|
// name: 'file',
|
|||
|
|
// formData: {
|
|||
|
|
// user: 'test'
|
|||
|
|
// },
|
|||
|
|
// success: (res) => {
|
|||
|
|
// setTimeout(() => {
|
|||
|
|
// resolve(res.data.data)
|
|||
|
|
// }, 1000)
|
|||
|
|
// }
|
|||
|
|
// });
|
|||
|
|
// })
|
|||
|
|
},
|
|||
|
|
// 以下为重点
|
|||
|
|
|
|||
|
|
getmap(){
|
|||
|
|
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.four = res.address
|
|||
|
|
// 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(that.four);
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
getmap1(){
|
|||
|
|
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)
|
|||
|
|
|
|||
|
|
|
|||
|
|
var address = res.address;
|
|||
|
|
var reg = /.+?(省|市|自治区|自治州|县|区)/g;
|
|||
|
|
let addressList=address.match(reg).toString().split(",");
|
|||
|
|
if(addressList[0] == '重庆市' || addressList[0] == '北京市' || addressList[0] == '天津市' || addressList[0] == '上海市'){
|
|||
|
|
that.province1 = addressList[0];
|
|||
|
|
that.city1 = '市辖区';
|
|||
|
|
that.area1 = addressList[1];
|
|||
|
|
that.four1 = address.replace(that.province,'').replace(that.city,'').replace(that.area,'');
|
|||
|
|
}else{
|
|||
|
|
that.province1 = addressList[0];
|
|||
|
|
that.city1 = addressList[1];
|
|||
|
|
that.area1 = addressList[2];
|
|||
|
|
that.four1 = address.replace(that.province,'').replace(that.city,'').replace(that.area,'');
|
|||
|
|
};
|
|||
|
|
console.log(that.four1);
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
getback(){
|
|||
|
|
uni.navigateBack({
|
|||
|
|
delta:1,
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
getzhi(index){
|
|||
|
|
this.carzhi = index
|
|||
|
|
},
|
|||
|
|
getzhi2(index){
|
|||
|
|
this.maneizhi = index
|
|||
|
|
},
|
|||
|
|
// 获取上传状态
|
|||
|
|
|
|||
|
|
// 获取上传进度
|
|||
|
|
|
|||
|
|
// 上传成功
|
|||
|
|
|
|||
|
|
|
|||
|
|
// 上传失败
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped lang="scss">
|
|||
|
|
.content{
|
|||
|
|
width: 100%;
|
|||
|
|
height: calc(100vh);
|
|||
|
|
background-color: #F6F6F6;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
padding-top: 45px;
|
|||
|
|
}
|
|||
|
|
.top-icon{
|
|||
|
|
margin-bottom: 15px;
|
|||
|
|
}
|
|||
|
|
.dil{
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
background-color: #F6F6F6;
|
|||
|
|
padding: 0px 12px;
|
|||
|
|
}
|
|||
|
|
.top{
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
padding: 0px 15px;
|
|||
|
|
width: 100%;
|
|||
|
|
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;
|
|||
|
|
}
|
|||
|
|
.xinput{
|
|||
|
|
width: 100%;
|
|||
|
|
background: white;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
padding: 16px;
|
|||
|
|
margin-top: 14px;
|
|||
|
|
}
|
|||
|
|
.you{
|
|||
|
|
text-align: right;
|
|||
|
|
}
|
|||
|
|
.xz{
|
|||
|
|
margin-top: 10px;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
}
|
|||
|
|
.kuang{
|
|||
|
|
width: 38px;
|
|||
|
|
height: 23px;
|
|||
|
|
background: #ECECEC;
|
|||
|
|
border-radius: 5px;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
color: #666666;
|
|||
|
|
font-size: 14px;
|
|||
|
|
margin-right: 15px;
|
|||
|
|
}
|
|||
|
|
.xlan{
|
|||
|
|
background: #CDE7FF !important;
|
|||
|
|
color: #1D62FF !important;
|
|||
|
|
border: 1px solid #2A96FE;
|
|||
|
|
}
|
|||
|
|
.anniu{
|
|||
|
|
width: 100%;
|
|||
|
|
background: linear-gradient(105deg, #FFE3AC 0%, #F3BA60 98%);
|
|||
|
|
height: 40px;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
color: #542F0E;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
margin-top: 20px;
|
|||
|
|
}
|
|||
|
|
</style>
|