You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
264 lines
6.4 KiB
264 lines
6.4 KiB
<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>
|
|
|