409 lines
11 KiB
Vue
409 lines
11 KiB
Vue
|
<template>
|
|||
|
|
<view class="page">
|
|||
|
|
<u-navbar :title="title" @rightClick="rightClick" :autoBack="true">
|
|||
|
|
</u-navbar>
|
|||
|
|
<view class="page-box">
|
|||
|
|
<!-- 蜂场名称 -->
|
|||
|
|
<view>
|
|||
|
|
<view class="text-box">蜂场名称</view>
|
|||
|
|
<view>
|
|||
|
|
<u--input class="input-b" shape="circle" placeholder="请输入蜂场名称(5个字以内)" border="surround"
|
|||
|
|
v-model="form.name"></u--input>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<!-- 蜂场地区 -->
|
|||
|
|
<view>
|
|||
|
|
<view class="text-box">蜂场地区</view>
|
|||
|
|
<view>
|
|||
|
|
<u-button @click="show = true" class="input-b" shape="circle"
|
|||
|
|
placeholder="请选择蜂场地区">{{form.address}}</u-button>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<!-- 具体位置 -->
|
|||
|
|
<view>
|
|||
|
|
<view class="text-box">具体位置</view>
|
|||
|
|
<view @click="gotomap">
|
|||
|
|
<u--input class="input-b" shape="circle" placeholder="请选择具体位置" border="surround"
|
|||
|
|
v-model="form.lng"></u--input>
|
|||
|
|
<!-- <view class="input-b">{{form.lng}},{{form.lat}}</view> -->
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<!-- 蜂种 -->
|
|||
|
|
<view>
|
|||
|
|
<view class="text-box">蜂种</view>
|
|||
|
|
<view @click="showfengzhong = true">
|
|||
|
|
<u--input disabled class="input-b" shape="circle" placeholder="请选择蜂种" border="surround"
|
|||
|
|
v-model="form.bee_type_text"></u--input>
|
|||
|
|
<!-- <picker v-model="form.bee_type" :range="bee_type" @change="change">{{form.bee_type_text}}</picker> -->
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<!-- 蜜源 -->
|
|||
|
|
<view>
|
|||
|
|
<view class="text-box">蜜源</view>
|
|||
|
|
<view @click="showmiyuan = true">
|
|||
|
|
<u--input disabled class="input-b" shape="circle" placeholder="请选择蜜源" border="surround"
|
|||
|
|
v-model="form.honey_source_text"></u--input>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<!-- 蜂场介绍 -->
|
|||
|
|
<view>
|
|||
|
|
<view class="text-box">蜂场介绍</view>
|
|||
|
|
<view>
|
|||
|
|
<u--input class="input-b" shape="circle" placeholder="请输入蜂场的介绍内容(150个字以内)" border="surround"
|
|||
|
|
v-model="form.remark" @change="change"></u--input>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<!-- 照片 -->
|
|||
|
|
<view>
|
|||
|
|
<view class="text-box">照片</view>
|
|||
|
|
<view>
|
|||
|
|
<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple :maxCount="10"></u-upload>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="mag-box">
|
|||
|
|
<u-button @click="submit" size="large" shape="circle" text="保 存" color="#23693f"></u-button>
|
|||
|
|
</view>
|
|||
|
|
<u-picker @cancel="showfengzhong=false" @confirm="confirmfengzhong" :show="showfengzhong"
|
|||
|
|
:columns="fengzhongcolumns"></u-picker>
|
|||
|
|
<u-picker @cancel="showmiyuan=false" @confirm="confirmmiyuan" :show="showmiyuan"
|
|||
|
|
:columns="miyuancolumns"></u-picker>
|
|||
|
|
<address-picker @cancel="show=false" :address-data="addressData" :show="show" :columns="columns"
|
|||
|
|
@confirm="confirm"></address-picker>
|
|||
|
|
|
|||
|
|
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import request from '@/utils/request'
|
|||
|
|
export default {
|
|||
|
|
name: 'FxIndex',
|
|||
|
|
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
baseurl:'',
|
|||
|
|
form: {
|
|||
|
|
bee_type_text: '',
|
|||
|
|
area_id: '',
|
|||
|
|
area: '',
|
|||
|
|
honey_source_text: '',
|
|||
|
|
lng: '',
|
|||
|
|
lat: '',
|
|||
|
|
address: '',
|
|||
|
|
bee_type: '',
|
|||
|
|
honey_source: '',
|
|||
|
|
remark: '',
|
|||
|
|
images: '',
|
|||
|
|
},
|
|||
|
|
value: '',
|
|||
|
|
show: false,
|
|||
|
|
showfengzhong: false,
|
|||
|
|
fengzhongcolumns: [
|
|||
|
|
[]
|
|||
|
|
],
|
|||
|
|
showmiyuan: false,
|
|||
|
|
// 蜜源:1=百花蜜,2=油菜蜜,3=荆条蜜,4=荔枝蜜,5=枣花蜜,6=椴树蜜,7=槐花蜜,8=龙眼蜜,9=枇杷蜜,10=柑橘蜜,11=益母草蜜,12=葵花蜜,13=五味子蜜,14=夏枯草蜜,15=中草药蜜,16=狼牙蜜,17=王倍子蜜,18=其它蜜
|
|||
|
|
miyuancolumns: [
|
|||
|
|
[{
|
|||
|
|
text: '百花蜜',
|
|||
|
|
id: 1
|
|||
|
|
}, {
|
|||
|
|
text: '油菜蜜',
|
|||
|
|
id: 2
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
text: '荆条蜜',
|
|||
|
|
id: 3
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
text: '荔枝蜜',
|
|||
|
|
id: 4
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
text: '枣花蜜',
|
|||
|
|
id: 5
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
text: '椴树蜜',
|
|||
|
|
id: 6
|
|||
|
|
},
|
|||
|
|
]
|
|||
|
|
|
|||
|
|
],
|
|||
|
|
columns: [],
|
|||
|
|
columnData: [],
|
|||
|
|
addressData: ['北京市', '北京市', '东城区'],
|
|||
|
|
fileList1: [],
|
|||
|
|
uploadfileList: [],
|
|||
|
|
title: '添加蜂场'
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
mounted() {
|
|||
|
|
this.sourcelist()
|
|||
|
|
this.getdataList()
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
|
|||
|
|
methods: {
|
|||
|
|
sourcelist() {
|
|||
|
|
request.put("/api/apiary/info", {}).then(res => {
|
|||
|
|
this.fengzhongcolumns[0] = this.setfor(res.data.data.bee_type)
|
|||
|
|
this.miyuancolumns[0] = this.setfor(res.data.data.honey_source)
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
setfor(item) {
|
|||
|
|
const res = []
|
|||
|
|
Object.entries(item).forEach(([key, value]) => {
|
|||
|
|
res.push({
|
|||
|
|
text: value,
|
|||
|
|
id: key
|
|||
|
|
})
|
|||
|
|
});
|
|||
|
|
return res
|
|||
|
|
},
|
|||
|
|
gotomap() {
|
|||
|
|
console.log("跳转到地图")
|
|||
|
|
uni.navigateTo({
|
|||
|
|
url: '/pagesFengChang/components/map',
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
submit() {
|
|||
|
|
console.log(this.form)
|
|||
|
|
this.form.images = this.uploadfileList.map(item => item).join(',')
|
|||
|
|
if (this.form.id) {
|
|||
|
|
request.put("/api/apiary/update/" + this.form.id, this.form).then(res => {
|
|||
|
|
console.log(res);
|
|||
|
|
if (res.data.code == 0) {
|
|||
|
|
uni.navigateBack()
|
|||
|
|
} else {
|
|||
|
|
uni.showModal({
|
|||
|
|
title: "提示",
|
|||
|
|
content: res.data.msg
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
} else {
|
|||
|
|
request.post("/api/apiary/add", this.form).then(res => {
|
|||
|
|
console.log(res);
|
|||
|
|
if (res.data.code == 0) {
|
|||
|
|
uni.navigateBack()
|
|||
|
|
} else {
|
|||
|
|
uni.showModal({
|
|||
|
|
title: "提示",
|
|||
|
|
content: res.data.msg
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 删除图片
|
|||
|
|
deletePic(event) {
|
|||
|
|
this[`fileList${event.name}`].splice(event.index, 1)
|
|||
|
|
this[`uploadfileList${event.name}`].splice(event.index, 1)
|
|||
|
|
},
|
|||
|
|
// 新增图片
|
|||
|
|
async afterRead(event) {
|
|||
|
|
// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
|
|||
|
|
// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
|
|||
|
|
console.log(event);
|
|||
|
|
let lists = [].concat(event.file)
|
|||
|
|
console.log(lists);
|
|||
|
|
let fileListLen = this[`fileList${event.name}`].length
|
|||
|
|
console.log(this[`fileList${event.name}`]);
|
|||
|
|
lists.map((item) => {
|
|||
|
|
this[`fileList${event.name}`].push({
|
|||
|
|
...item,
|
|||
|
|
status: 'uploading',
|
|||
|
|
message: '上传中'
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
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);
|
|||
|
|
// var that = this
|
|||
|
|
// return new Promise((resolve, reject) => {
|
|||
|
|
// let a = uni.uploadFile({
|
|||
|
|
// url: 'https://wx.beishaoyuan.com/', // 仅为示例，非真实的接口地址
|
|||
|
|
// filePath: url,
|
|||
|
|
// name: 'file',
|
|||
|
|
// success: (res) => {
|
|||
|
|
// console.log(res)
|
|||
|
|
// const res2 = JSON.parse(res.data)
|
|||
|
|
// that.uploadfileList = that.uploadfileList.concat(res2.data.path)
|
|||
|
|
// resolve(res2.data)
|
|||
|
|
// }
|
|||
|
|
// });
|
|||
|
|
// })
|
|||
|
|
// },
|
|||
|
|
uploadFilePromise(url) {
|
|||
|
|
console.log('尝试上传的文件路径:', url);
|
|||
|
|
// 使用箭头函数确保this的上下文
|
|||
|
|
return new Promise((resolve, reject) => {
|
|||
|
|
uni.uploadFile({
|
|||
|
|
url: 'https://wx.beishaoyuan.com/api/index/upload', // 确保这是正确的上传接口路径
|
|||
|
|
filePath: url,
|
|||
|
|
name: 'file',
|
|||
|
|
success: (res) => {
|
|||
|
|
console.log(res,'0000');
|
|||
|
|
try {
|
|||
|
|
// 确保服务器返回的是JSON字符串
|
|||
|
|
const res2 = JSON.parse(res.data);
|
|||
|
|
console.log('上传成功:', res2);
|
|||
|
|
// 确保res2的结构符合你的预期
|
|||
|
|
if (res2 && res2.data && res2.data.path) {
|
|||
|
|
this.uploadfileList = this.uploadfileList.concat(res2.data.url);
|
|||
|
|
}
|
|||
|
|
resolve(res2.data);
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('解析服务器响应失败:', error);
|
|||
|
|
reject(error);
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
fail: (error) => {
|
|||
|
|
// 使用errMsg而不是msg，这取决于实际的error对象结构
|
|||
|
|
console.error('上传失败:', error.errMsg || error);
|
|||
|
|
reject(error.errMsg || error);
|
|||
|
|
},
|
|||
|
|
});
|
|||
|
|
// 注意这里不需要返回a，因为uni.uploadFile是一个异步操作
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// const axios = require('axios');
|
|||
|
|
// const FormData = require('form-data');
|
|||
|
|
// const fs = require('fs');
|
|||
|
|
// let data = new FormData();
|
|||
|
|
// data.append('file', fs.createReadStream('/C:/Users/12607/Downloads/oi4OG5FQXQpRERqBguILQQ9OtNQE (1).jpg'));
|
|||
|
|
|
|||
|
|
// let config = {
|
|||
|
|
// method: 'post',
|
|||
|
|
// maxBodyLength: Infinity,
|
|||
|
|
// url: 'https://wx.beishaoyuan.com/api/index/upload',
|
|||
|
|
// headers: {
|
|||
|
|
// 'Cookie': 'think_lang=zh-cn',
|
|||
|
|
// ...data.getHeaders()
|
|||
|
|
// },
|
|||
|
|
// data : data
|
|||
|
|
// };
|
|||
|
|
|
|||
|
|
// axios.request(config)
|
|||
|
|
// .then((response) => {
|
|||
|
|
// console.log(JSON.stringify(response.data));
|
|||
|
|
// })
|
|||
|
|
// .catch((error) => {
|
|||
|
|
// console.log(error);
|
|||
|
|
// });
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
confirmfengzhong(e) {
|
|||
|
|
console.log(e);
|
|||
|
|
this.form.bee_type = e.value[0].id
|
|||
|
|
this.form.bee_type_text = e.value[0].text
|
|||
|
|
|
|||
|
|
this.showfengzhong = false
|
|||
|
|
},
|
|||
|
|
confirmmiyuan(e) {
|
|||
|
|
this.form.honey_source = e.value[0].id
|
|||
|
|
this.form.honey_source_text = e.value[0].text
|
|||
|
|
this.showmiyuan = false
|
|||
|
|
},
|
|||
|
|
change() { // 输入框的值
|
|||
|
|
console.log('值')
|
|||
|
|
},
|
|||
|
|
getdataList() {
|
|||
|
|
//获取地区
|
|||
|
|
request.get("/api/index/getArea", {}).then(res => {
|
|||
|
|
console.log(res);
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
|
|||
|
|
// 回调参数为包含columnIndex、value、values
|
|||
|
|
confirm(e) {
|
|||
|
|
console.log('confirm', e)
|
|||
|
|
this.form.area_id = e.areaId[2]
|
|||
|
|
this.form.address = e.value.toString()
|
|||
|
|
this.form.area = e.value.toString()
|
|||
|
|
console.log(this.form.area_id, this.form.address)
|
|||
|
|
this.show = false
|
|||
|
|
},
|
|||
|
|
updateValue(newValue) {
|
|||
|
|
let marker = JSON.parse(newValue)
|
|||
|
|
console.log(marker, "options")
|
|||
|
|
this.form.lng = marker[0].longitude
|
|||
|
|
this.form.lat = marker[0].latitude
|
|||
|
|
console.log(this.form, "form")
|
|||
|
|
this.$forceUpdate()
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
onLoad(option) {
|
|||
|
|
if (option.info) {
|
|||
|
|
this.form = JSON.parse(option.info)
|
|||
|
|
if(this.form.images){
|
|||
|
|
let imagesArray = this.form.images.split(',');
|
|||
|
|
let prefixedImagesArray = imagesArray.map(imagePath => ({url: `${imagePath.trim()}`}));
|
|||
|
|
this.fileList1 = prefixedImagesArray
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
console.log(this.fileList1);
|
|||
|
|
this.title = '编辑蜂场'
|
|||
|
|
} else {
|
|||
|
|
this.title = '添加蜂场'
|
|||
|
|
}
|
|||
|
|
uni.$on('newPages', (e) => {
|
|||
|
|
this.form.lng = e.value.longitude
|
|||
|
|
this.form.lat = e.value.latitude
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
onUnload() {
|
|||
|
|
uni.$off('newPages')
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
.input-b {
|
|||
|
|
background-color: #f7f7f7;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.text-box {
|
|||
|
|
margin: 30rpx 0 20rpx 15rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.page-box {
|
|||
|
|
padding: 180rpx 50rpx 280rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.mag-box {
|
|||
|
|
z-index: 999;
|
|||
|
|
position: fixed;
|
|||
|
|
bottom: 0;
|
|||
|
|
width: 89%;
|
|||
|
|
padding: 0 40rpx;
|
|||
|
|
margin-bottom: 50rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.page {
|
|||
|
|
height: 100%;
|
|||
|
|
width: 100%;
|
|||
|
|
position: absolute;
|
|||
|
|
background-color: #ffff;
|
|||
|
|
color: #8888;
|
|||
|
|
}
|
|||
|
|
</style>
|