提交
This commit is contained in:
wuzhimiao
158
components/ImageUpload.vue
Normal file
158
components/ImageUpload.vue
Normal file
@@ -0,0 +1,158 @@
|
||||
<template>
|
||||
<view class="upload-container">
|
||||
<u-upload :disabled="disabled" :width="width" :height="height" :fileList="internalFileList" :name="name" :multiple="multiple"
|
||||
:maxCount="maxCount" @afterRead="handleAfterRead" @delete="handleRemove">
|
||||
</u-upload>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import {
|
||||
// uploadImg
|
||||
// } from '@/api/company'
|
||||
import config from '@/config'
|
||||
//import {
|
||||
// getToken
|
||||
//} from '@/utils/auth'
|
||||
export default {
|
||||
props: {
|
||||
maxSize: {
|
||||
type: Number,
|
||||
default: 5, // 最大文件大小（MB）
|
||||
},
|
||||
allowedFormats: {
|
||||
type: Array,
|
||||
default: () => [], // 允许的文件格式
|
||||
},
|
||||
maxImageSize: {
|
||||
type: Object,
|
||||
default: () => ({
|
||||
width: 2048,
|
||||
height: 2048
|
||||
}), // 图片最大宽度和高度
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '100rpx', // 默认宽度
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '100rpx', // 默认高度
|
||||
},
|
||||
name: {
|
||||
type: String,
|
||||
default: 'file', // 默认name字段
|
||||
},
|
||||
multiple: {
|
||||
type: Boolean,
|
||||
default: false, // 是否允许多选，默认不允许
|
||||
},
|
||||
maxCount: {
|
||||
type: Number,
|
||||
default: 1, // 默认最大上传数量为1
|
||||
},
|
||||
fileList: {
|
||||
type: Array,
|
||||
default: () => [], // 默认的文件列表为空
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
internalFileList: [...this.fileList], // 内部的文件列表，确保与父组件的同步
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
// 监听 fileList 的变化，确保内外部数据同步
|
||||
fileList(newVal) {
|
||||
this.internalFileList = [...newVal];
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
// 新增图片
|
||||
async handleAfterRead(event) {
|
||||
let lists = [].concat(event.file);
|
||||
let fileListLen = this.internalFileList.length;
|
||||
lists.map((item) => {
|
||||
this.internalFileList.push({
|
||||
...item,
|
||||
status: "uploading",
|
||||
message: "上传中",
|
||||
});
|
||||
});
|
||||
for (let i = 0; i < lists.length; i++) {
|
||||
if (this.allowedFormats.length > 0) {
|
||||
let fileType = lists[i].name.split('.').pop().toLowerCase();
|
||||
if (!this.allowedFormats.includes(fileType)) {
|
||||
// this.$emit('error', '不支持的文件格式');
|
||||
uni.showToast({
|
||||
title: '不支持的文件格式',
|
||||
icon: 'none',
|
||||
});
|
||||
this.internalFileList.splice(fileListLen, 1);
|
||||
this.$emit('update', this.internalFileList); // 通知父组件文件列表更新
|
||||
return;
|
||||
}
|
||||
}
|
||||
const result = await this.uploadFilePromise(lists[i].url);
|
||||
let item = this.internalFileList[fileListLen];
|
||||
this.internalFileList.splice(
|
||||
fileListLen,
|
||||
1,
|
||||
Object.assign(item, {
|
||||
status: "success",
|
||||
message: "",
|
||||
data: result,
|
||||
})
|
||||
);
|
||||
fileListLen++;
|
||||
this.$emit('update', this.internalFileList); // 通知父组件文件列表更新
|
||||
}
|
||||
},
|
||||
uploadFilePromise(url) {
|
||||
return new Promise((resolve, reject) => {
|
||||
uni.uploadFile({
|
||||
url: config.baseUrl + '/system/oss/upload',
|
||||
filePath: url,
|
||||
name: "file",
|
||||
header: {
|
||||
Authorization: "Bearer " + getToken(),
|
||||
},
|
||||
success: (uploadFileRes) => {
|
||||
let res = JSON.parse(uploadFileRes.data);
|
||||
resolve(res.data);
|
||||
},
|
||||
fail: (err) => {
|
||||
console.log(err);
|
||||
},
|
||||
});
|
||||
});
|
||||
},
|
||||
handleRemove({file, index}) {
|
||||
this.internalFileList.splice(index, 1); // 从文件列表中移除指定文件
|
||||
this.$emit('update', this.internalFileList); // 通知父组件文件列表更新
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.upload-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.upload-slot {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 1px dashed #ccc;
|
||||
border-radius: 4px;
|
||||
padding: 20px;
|
||||
}
|
||||
</style>
|
||||
203
components/placePicker.vue
Normal file
203
components/placePicker.vue
Normal file
@@ -0,0 +1,203 @@
|
||||
<template>
|
||||
<view>
|
||||
<u-popup :show="visible">
|
||||
<view style="position: relative;height: 100vh;width: 100%;">
|
||||
<view class="button-area" style="padding: 8vh 32rpx 24rpx 32rpx; margin: 0;border: 0;position: relative;z-index: 2;display: block; top: 10rpx; border-radius: 0;">
|
||||
<u-input style="margin-bottom: 16px;" v-model="placeInput" @change="getLocations" placeholder="请输入并选择相应地点"></u-input>
|
||||
<view v-if="checkedMarker&&checkedMarker.name" class="selected">您已选择：{{ checkedMarker.name }}<text v-if="checkedMarker.address">（{{ checkedMarker.address }}）</text></view>
|
||||
<view v-for="(item, index) in placeList" :key="index" :label="item.name" :value="item.name" @click="addIcon(item.name)" class="place-list">
|
||||
<view style="display: flex;justify-content: space-between;">{{ item.name }}
|
||||
<view style="color: #8492a6; font-size: 13px;width: 50%">{{ item.address }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="map" id="map"></view>
|
||||
<view class="button-area">
|
||||
<view class="btn" @click="cancel">取 消</view>
|
||||
<view class="btn save" @click="submitForm">确 定</view>
|
||||
</view>
|
||||
</view>
|
||||
</u-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
//import { jsonp } from "vue-jsonp";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
map: '',
|
||||
placeList: [],
|
||||
placeInput: '',
|
||||
markerList: [],
|
||||
checkedMarker: '',
|
||||
visible: false,
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
// this.openDialog();
|
||||
},
|
||||
methods: {
|
||||
submitForm() {
|
||||
if(this.checkedMarker&&this.checkedMarker.name){
|
||||
this.$emit('selected', this.checkedMarker)
|
||||
this.visible = false;
|
||||
}else{
|
||||
this.$message.warning('您尚未选择地点！')
|
||||
}
|
||||
},
|
||||
cancel() {
|
||||
this.visible = false;
|
||||
if (this.map) {
|
||||
this.map.removeEventListener('click', this.handleMapClick);
|
||||
}
|
||||
},
|
||||
openDialog() {
|
||||
this.visible = true;
|
||||
this.$nextTick(() => {
|
||||
this.map = new BMapGL.Map("map");
|
||||
var point = new BMapGL.Point(117.123237,36.657017);
|
||||
this.map.centerAndZoom(point, 15);
|
||||
this.map.enableScrollWheelZoom();
|
||||
var locationCtrl = new BMapGL.LocationControl();
|
||||
this.map.addControl(locationCtrl)
|
||||
this.map.addEventListener('click', this.handleMapClick);
|
||||
})
|
||||
},
|
||||
handleMapClick(e) {
|
||||
const lng = e.latlng.lng;
|
||||
const lat = e.latlng.lat;
|
||||
// 逆地理编码
|
||||
jsonp("https://api.map.baidu.com/reverse_geocoding/v3/", {
|
||||
ak: "qr93Dm5Ph6Vb4n1aTfvHG9KZkvG8S4YU",
|
||||
output: "json",
|
||||
location: `${lat},${lng}`,
|
||||
}).then(res => {
|
||||
if (res.status === 0) {
|
||||
// 清除原有标记
|
||||
this.removeOverlay();
|
||||
// 新建标记
|
||||
const point = new BMapGL.Point(lng, lat);
|
||||
const marker = new BMapGL.Marker(point);
|
||||
this.map.addOverlay(marker);
|
||||
this.markerList = [marker];
|
||||
// 保存选中信息
|
||||
this.checkedMarker = {
|
||||
name: res.result.formatted_address,
|
||||
address: res.result.sematic_description,
|
||||
location: { lng, lat }
|
||||
};
|
||||
this.$forceUpdate();
|
||||
}
|
||||
});
|
||||
},
|
||||
getLocations(place) {
|
||||
jsonp("https://api.map.baidu.com/place/v2/suggestion", {
|
||||
q: place,
|
||||
ak: "qr93Dm5Ph6Vb4n1aTfvHG9KZkvG8S4YU",
|
||||
region: '济南市',
|
||||
output: "json",
|
||||
})
|
||||
.then((json) => {
|
||||
console.log(json,23423434)
|
||||
this.placeList = json.result
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err);
|
||||
});
|
||||
},
|
||||
addIcon(e) {
|
||||
let arr = this.placeList.filter(ele => ele.name == e)
|
||||
if(arr.length){
|
||||
this.addMaker(arr)
|
||||
this.clickMaker(arr[0]);
|
||||
}else{
|
||||
this.addMaker(JSON.parse(JSON.stringify(this.placeList)))
|
||||
}
|
||||
this.placeList = []
|
||||
},
|
||||
removeOverlay() {
|
||||
this.markerList.forEach(ele => {
|
||||
this.map.removeOverlay(ele)
|
||||
})
|
||||
},
|
||||
addMaker(list) {
|
||||
this.removeOverlay()
|
||||
list.forEach((ele, index) => {
|
||||
let point = new BMapGL.Point(ele.location.lng, ele.location.lat);
|
||||
if(index == 0){
|
||||
this.map.centerAndZoom(point, 15)
|
||||
}
|
||||
let marker = new BMapGL.Marker(point); // 创建标注
|
||||
this.map.addOverlay(marker);
|
||||
let that = this;
|
||||
this.markerList.push(marker)
|
||||
marker.addEventListener("click", function(){
|
||||
that.clickMaker(ele)
|
||||
});
|
||||
})
|
||||
},
|
||||
clickMaker(e){
|
||||
this.checkedMarker = e;
|
||||
this.$forceUpdate();
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
.selected {
|
||||
margin-bottom: 16px;
|
||||
position: relative;z-index: 2;
|
||||
background: #DCE2E9;
|
||||
border-radius: 8rpx;
|
||||
padding: 12rpx 24rpx;
|
||||
}
|
||||
.map{
|
||||
width: 100%;
|
||||
margin-top: 16px;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.button-area{
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
bottom: 0;
|
||||
padding: 24rpx 32rpx 68rpx;
|
||||
width: 100%;
|
||||
background: #fff;
|
||||
display: flex;
|
||||
box-sizing: border-box;
|
||||
margin-top: 40rpx;
|
||||
border-radius: 16px 16px 0px 0px;
|
||||
.btn{
|
||||
line-height: 72rpx;
|
||||
width: 176rpx;
|
||||
margin-right: 16rpx;
|
||||
font-size: 28rpx;
|
||||
border: 1px solid #B8C5D4;
|
||||
color: #282828;
|
||||
text-align: center;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
.reset{
|
||||
background: #DCE2E9;
|
||||
}
|
||||
.save{
|
||||
background: linear-gradient(103deg, #1D64CF 0%, #1590D4 99%);
|
||||
color: #fff;
|
||||
border: 0;
|
||||
flex-grow: 1;
|
||||
}
|
||||
}
|
||||
.place-list{
|
||||
line-height: 32rpx;
|
||||
padding: 16rpx 0;
|
||||
border-bottom: 1px solid #DCE2E9;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user