435 lines
12 KiB
Vue
435 lines
12 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.area}}</u-button>
|
||
</view>
|
||
</view>
|
||
<!-- 具体位置 -->
|
||
<view style="position: relative;">
|
||
<view class="text-box">具体位置</view>
|
||
<view>
|
||
<u--input class="input-b" shape="circle" placeholder="请选择具体位置" border="surround"
|
||
v-model="form.address">{{form.address}}</u--input>
|
||
<!-- <view class="input-b">{{form.lng}},{{form.lat}}</view> -->
|
||
</view>
|
||
<image @click="gotomap"
|
||
style="width: 32rpx;height: 32rpx;position: absolute;bottom: 20rpx;right: 20rpx;z-index: 99;"
|
||
src="https://api.ccttiot.com/smartmeter/img/static/uf92QyUtzafEwjjjcwOl" mode=""></image>
|
||
</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() {
|
||
uni.chooseLocation({
|
||
initialLocation: {
|
||
latitude: '39.91389',
|
||
longitude: '116.40783', // 北京的经纬度作为示例
|
||
},
|
||
success: (res) => {
|
||
console.log(res);
|
||
this.form.lng = res.longitude
|
||
this.form.lat = res.latitude
|
||
this.form.address = res.name
|
||
},
|
||
fail: function(err) {
|
||
if (err.errMsg && err.errMsg.indexOf('chooseLocation:cancel') === 0) {
|
||
uni.showToast({
|
||
title: '您取消了位置选择',
|
||
icon: 'none'
|
||
});
|
||
} else {
|
||
console.log('选择位置失败', err);
|
||
}
|
||
},
|
||
})
|
||
},
|
||
// console.log("跳转到地图")
|
||
// uni.navigateTo({
|
||
// url: '/pagesFengChang/components/map',
|
||
// })
|
||
submit() {
|
||
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> |