parent
b4dc092702
commit
fd319de460
@ -0,0 +1,97 @@ |
||||
<template> |
||||
<view> |
||||
<view class="button-box"> |
||||
<button size="mini" type="primary" @click="getLocations">开始记录</button> |
||||
<button size="mini" type="primary" @click="stopLocation">停止记录</button> |
||||
<button size="mini" type="primary" @click="uploadData">提交记录</button> |
||||
</view> |
||||
<map :scale="3" :longitude="lon" :latitude="lat" style="width: 100%; height:100vh" :polyline="locationss"></map> |
||||
|
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
data() { |
||||
return { |
||||
arrs:[], |
||||
lon: 114.57, |
||||
lat: 38.04, |
||||
locationss: [ |
||||
{ |
||||
points: [], |
||||
color: '#0000AA', |
||||
width: 10, |
||||
arrowLine: true |
||||
}, |
||||
{ |
||||
points: [ |
||||
{ latitude: 38.044231770833335, longitude: 115.56865288628472 }, |
||||
{ latitude: 39.044231770833335, longitude: 116.56865288628472 }, |
||||
{ latitude: 40.044231770833335, longitude: 117.56865288628472 }, |
||||
{ latitude: 41.044231770833335, longitude: 118.56865288628472 }, |
||||
{ latitude: 42.044231770833335, longitude: 119.56865288628472 }, |
||||
{ latitude: 43.044231770833335, longitude: 120.56865288628472 } |
||||
], |
||||
width: 10, |
||||
color: '#00aa29', |
||||
arrowLine: true |
||||
} |
||||
], |
||||
}; |
||||
}, |
||||
methods:{ |
||||
getLocations() { |
||||
let this_ = this; |
||||
uni.startLocationUpdate({ |
||||
success: function (res) { |
||||
console.log(res, '开启小程序接收位置消息成功'); |
||||
uni.onLocationChange(function (res) { |
||||
console.log(res); |
||||
console.log('纬度：' + res.latitude); |
||||
console.log('经度：' + res.longitude); |
||||
let lng = res.longitude.toFixed(2); |
||||
let lat = res.latitude.toFixed(2); |
||||
this_.arrs.push({ latitude: res.latitude, longitude: res.longitude }); |
||||
console.log(this_.arrs,'1' ) |
||||
this_.locationss[0].points = this_.arrs; |
||||
this_.locationss = [...this_.locationss]; |
||||
console.log(this_.locationss ,'2') |
||||
}); |
||||
|
||||
}, |
||||
fail: (err) => console.error('开启小程序接收位置消息失败：', err), |
||||
complete: (msg) => console.log('调用开启小程序接收位置消息 API 完成') |
||||
}); |
||||
}, |
||||
updateLocation() { |
||||
uni.onLocationChange(function (res) { |
||||
console.log('纬度：' + res.latitude); |
||||
console.log('经度：' + res.longitude); |
||||
}); |
||||
}, |
||||
stopLocation() { |
||||
let this_ = this; |
||||
uni.stopLocationUpdate({ |
||||
success: (res) => console.log('关闭成功', this_.locationss), |
||||
fail: (err) => console.error('关闭失败：', err), |
||||
complete: (msg) => console.log('调用开启小程序接收位置消息 API 完成') |
||||
}); |
||||
}, |
||||
uploadData(){ |
||||
console.log(this.locationss) |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss"> |
||||
.button-box{ |
||||
display: flex; |
||||
justify-content: space-around; |
||||
position: fixed; |
||||
z-index: 999; |
||||
width: 100%; |
||||
top: 100rpx; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,264 @@ |
||||
<template> |
||||
<view class="container"> |
||||
<view class="example"> |
||||
<!-- 基础表单校验 --> |
||||
<uni-forms ref="valiForm" :rules="rules" :modelValue="valiFormData"> |
||||
<uni-forms-item class="content" label="名称" required name="name"> |
||||
<input v-model="valiFormData.name" placeholder="请输入名称" /> |
||||
</uni-forms-item> |
||||
<uni-forms-item class="content" label="坐标" required name="location"> |
||||
<view class="uni-input-wrapper"> |
||||
<input v-model="valiFormData.location" placeholder="" /> |
||||
<button class="mini" size="mini" @click="getLocation">定位</button> |
||||
</view> |
||||
</uni-forms-item> |
||||
<uni-forms-item label="图片"> |
||||
<view class="example-body"> |
||||
<jade-image-upload |
||||
:list="media" |
||||
:control="control" |
||||
:columnType="columnType" |
||||
:maxCount="maxCount" |
||||
:compressSize="compressSize" |
||||
:compressQuality="compressQuality" |
||||
:compressWidth="compressWidth" |
||||
:imageSize="imageSize" |
||||
:sourceType="sourceType" |
||||
@chooseFile="chooseFile" |
||||
@imgDelete="mediaDelete" |
||||
></jade-image-upload> |
||||
<!-- 数据变化的JSON --> |
||||
<!-- <view style="padding: 20rpx; box-sizing: border-box; display: flex; flex-direction: column"> |
||||
图片上传： --> |
||||
<!-- #ifdef H5 --> |
||||
<!-- <view style="padding: 20rpx; word-break: break-all">{{ media.length ? media : '暂无数据' }}</view> --> |
||||
<!-- #endif --> |
||||
<!-- #ifndef H5 --> |
||||
<!-- <view style="padding: 20rpx; word-break: break-all">{{ media.length ? JSON.stringify(media) : '暂无数据' }}</view> --> |
||||
<!-- #endif --> |
||||
<!-- </view> --> |
||||
</view> |
||||
</uni-forms-item> |
||||
<uni-forms-item class="content" label="备注" name="remark"> |
||||
<input type="textarea" v-model="valiFormData.remark" placeholder="请输入备注" /> |
||||
</uni-forms-item> |
||||
</uni-forms> |
||||
<button type="primary" @click="submit('valiForm')">提交</button> |
||||
</view> |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
data() { |
||||
return { |
||||
arrs:[], |
||||
lon: 114.57, |
||||
lat: 38.04, |
||||
locations: [], |
||||
locationss: [ |
||||
{ |
||||
points: [], |
||||
color: '#0000AA', |
||||
width: 20, |
||||
arrowLine: true |
||||
}, |
||||
{ |
||||
points: [ |
||||
{ latitude: 38.044231770833335, longitude: 115.56865288628472 }, |
||||
{ latitude: 39.044231770833335, longitude: 116.56865288628472 }, |
||||
{ latitude: 40.044231770833335, longitude: 117.56865288628472 }, |
||||
{ latitude: 41.044231770833335, longitude: 118.56865288628472 }, |
||||
{ latitude: 42.044231770833335, longitude: 119.56865288628472 }, |
||||
{ latitude: 43.044231770833335, longitude: 120.56865288628472 } |
||||
], |
||||
width: 10, |
||||
color: '#00aa29', |
||||
arrowLine: true |
||||
} |
||||
], |
||||
control: true, |
||||
columnType: 'other', |
||||
maxCount: 6, |
||||
compressSize: 0.2, |
||||
imageSize: 2, |
||||
compressQuality: 0.8, |
||||
compressWidth: 375, |
||||
sourceType: ['album'], |
||||
|
||||
uploadTask: null, |
||||
media: [], //数据源 |
||||
// 校验表单数据 |
||||
valiFormData: { |
||||
name: '', |
||||
location: '', |
||||
longitude: '', |
||||
latitude: '', |
||||
remark: '', |
||||
imgpath: '' |
||||
}, |
||||
// 校验规则 |
||||
rules: { |
||||
name: { |
||||
rules: [ |
||||
{ |
||||
required: true, |
||||
errorMessage: '名称不能为空' |
||||
} |
||||
] |
||||
}, |
||||
location: { |
||||
rules: [ |
||||
{ |
||||
required: true, |
||||
errorMessage: '坐标不能为空' |
||||
} |
||||
] |
||||
} |
||||
} |
||||
}; |
||||
}, |
||||
computed: {}, |
||||
onLoad() {}, |
||||
onReady() {}, |
||||
methods: { |
||||
//上传 |
||||
chooseFile(e) { |
||||
this.uploadFileToServe(e); |
||||
}, |
||||
//中断上传并删除 |
||||
mediaDelete(e) { |
||||
this.uploadTask ? this.uploadTask.abort() : ''; |
||||
this.media.splice(e, 1); |
||||
}, |
||||
//上传逻辑处理 |
||||
uploadFileToServe(urlList) { |
||||
if (!urlList || urlList.length <= 0) { |
||||
return; |
||||
} |
||||
//以七牛云为例 |
||||
// uni.request({ |
||||
// url: 'qiniu', //后端接口，仅为示例，并非真实接口地址。 |
||||
// method: 'GET', |
||||
// success: (res) => { |
||||
// let token = res.data.data; //拿到必须的token |
||||
urlList.forEach((item) => { |
||||
this.uploadTask = uni.uploadFile({ |
||||
url: 'http://39.105.17.128:8199/api/tool/uploadImg', //上传接口，仅为示例 |
||||
filePath: item.src, |
||||
name: 'file', |
||||
// formData: { |
||||
// token: token |
||||
// }, |
||||
success: (res) => { |
||||
let data = JSON.parse(res.data); //返回的数据 |
||||
console.log(data); |
||||
if (!data.data.src) { |
||||
item.status = 'error'; |
||||
item.progress = '上传失败'; |
||||
} else { |
||||
item.status = 'success'; |
||||
item.progress = '上传成功'; |
||||
item.src = data.data.src; |
||||
} |
||||
} |
||||
}); |
||||
this.uploadTask.onProgressUpdate((res) => { |
||||
item.percent = res.progress; |
||||
this.media.splice(item.index, 1, item); |
||||
}); |
||||
}); |
||||
// } |
||||
// }); |
||||
}, |
||||
|
||||
submit(ref) { |
||||
let this_ = this; |
||||
this.$refs[ref] |
||||
.validate() |
||||
.then((res) => { |
||||
console.log(this_.media); |
||||
let arr = []; |
||||
if (this_.media && this_.media.length) { |
||||
this_.media.forEach((item) => { |
||||
arr.push(item.src); |
||||
}); |
||||
} |
||||
|
||||
this_.valiFormData.imgpath = arr.join(','); |
||||
uni.request({ |
||||
header: { 'Content-Type': 'application/x-www-form-urlencoded' }, |
||||
url: 'http://39.105.17.128:8199/api/tool/saveData', //仅为示例，并非真实接口地址。 |
||||
data: this_.valiFormData, |
||||
method: 'POST', |
||||
success: (res) => { |
||||
console.log(res.data); |
||||
} |
||||
}); |
||||
console.log('success', this_.valiFormData); |
||||
uni.showToast({ |
||||
title: `校验通过` |
||||
}); |
||||
}) |
||||
.catch((err) => { |
||||
console.log('err', err); |
||||
}); |
||||
}, |
||||
getLocation() { |
||||
let this_ = this; |
||||
uni.getLocation({ |
||||
type: 'wgs84', |
||||
success: function (res) { |
||||
console.log('当前位置的经度：' + res.longitude); |
||||
console.log('当前位置的纬度：' + res.latitude); |
||||
this_.valiFormData.longitude = res.longitude; |
||||
this_.valiFormData.latitude = res.latitude; |
||||
this_.valiFormData.location = '经度:' + res.longitude + ',纬度:' + res.latitude; |
||||
} |
||||
}); |
||||
}, |
||||
|
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss"> |
||||
.example { |
||||
padding: 15px; |
||||
background-color: #fff; |
||||
} |
||||
|
||||
.segmented-control { |
||||
margin-bottom: 15px; |
||||
} |
||||
|
||||
.button-group { |
||||
margin-top: 15px; |
||||
display: flex; |
||||
justify-content: space-around; |
||||
} |
||||
|
||||
.form-item { |
||||
display: flex; |
||||
align-items: center; |
||||
} |
||||
|
||||
.button { |
||||
display: flex; |
||||
align-items: center; |
||||
height: 35px; |
||||
margin-left: 10px; |
||||
} |
||||
.content { |
||||
display: flex; |
||||
align-items: center; |
||||
} |
||||
.uni-input-wrapper { |
||||
display: flex; |
||||
flex-direction: inherit; |
||||
|
||||
.mini { |
||||
font-size: 22rpx; |
||||
} |
||||
} |
||||
</style> |
||||
Loading…
Reference in new issue