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