468 lines
11 KiB
Vue
468 lines
11 KiB
Vue
<template>
|
||
<view class="page">
|
||
<u-navbar title="修改蜂场" :border-bottom="false" :background="bgc" title-color='#3D3D3D ' :title-bold='true'
|
||
title-size='36' height='45' id="navbar">
|
||
</u-navbar>
|
||
<view class="tit">
|
||
蜂场名称
|
||
</view>
|
||
<view class="iptbox">
|
||
<input type="text" class="ips" v-model="code" placeholder="请输入蜂场名称（5个字以内）"
|
||
placeholder-class="my-placeholder" />
|
||
|
||
</view>
|
||
|
||
<view class="tit">
|
||
具体位置
|
||
</view>
|
||
<view class="iptbox" @click="chooseAddress()">
|
||
<input type="text" class="ips" v-model="form.address" placeholder="请选择蜂场具体位置"
|
||
placeholder-class="my-placeholder" disabled />
|
||
<image src="https://api.ccttiot.com/smartmeter/img/static/ugAdKZm5ZHZ4to1cDsNI" mode=""></image>
|
||
</view>
|
||
<view class="tit">
|
||
养殖蜂种
|
||
</view>
|
||
<view class="iptbox" @click="showfengzhong = true">
|
||
<input type="text" class="ips" v-model="fengzhong" placeholder="请选择养殖蜂种" placeholder-class="my-placeholder"
|
||
disabled />
|
||
<image src="https://api.ccttiot.com/smartmeter/img/static/ugAdKZm5ZHZ4to1cDsNI" mode=""></image>
|
||
</view>
|
||
<view class="tit">
|
||
采集蜜源
|
||
</view>
|
||
<view class="iptbox" @click="showmiyuan = true">
|
||
<input type="text" class="ips" v-model="miyuan" placeholder="请选择采集蜜源" placeholder-class="my-placeholder"
|
||
disabled />
|
||
<image src="https://api.ccttiot.com/smartmeter/img/static/ugAdKZm5ZHZ4to1cDsNI" mode=""></image>
|
||
</view>
|
||
<view class="tit">
|
||
照片
|
||
</view>
|
||
<view class="imgbox" @click="btn" v-if="userImgs==''">
|
||
<view class="">
|
||
|
||
</view>
|
||
<image src="https://api.ccttiot.com/smartmeter/img/static/uLpiGDDDvBwk7hOhOtVp" mode="" v-if=""></image>
|
||
|
||
</view>
|
||
<view class="imgbox" @click="btn" v-else>
|
||
<image :src="userImgs" mode="" v-if=""></image>
|
||
|
||
</view>
|
||
<u-select v-model="showfengzhong" :list="fengzhongcolumns" title='选择蜂种' @confirm="confirmfz"></u-select>
|
||
<u-select v-model="showmiyuan" :list="miyuancolumns" title='选择蜜源' @confirm="confirmmy"></u-select>
|
||
<view class="btn" @click="btnadd">
|
||
确认修改
|
||
</view>
|
||
<view class="btns" @click="btndel">
|
||
删除蜂场
|
||
</view>
|
||
<!-- <u-picker @cancel="showmiyuan=false" @confirm="confirmmiyuan" :show="showmiyuan"
|
||
:columns="miyuancolumns"></u-picker> -->
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
bgc: {
|
||
backgroundColor: " #FAFDFD",
|
||
},
|
||
code: '',
|
||
fengzhong: '',
|
||
miyuan: '',
|
||
fengzhongcolumns: [
|
||
|
||
],
|
||
miyuancolumns: [
|
||
|
||
|
||
],
|
||
showfengzhong: false,
|
||
showmiyuan: false,
|
||
form: {
|
||
lat: 0,
|
||
lng: 0,
|
||
address: '',
|
||
province: '',
|
||
city: '',
|
||
county: '',
|
||
beeType: '',
|
||
honeyType: ''
|
||
},
|
||
|
||
userImgs: '',
|
||
token: '',
|
||
sn: '',
|
||
upurl: 'https://api.ccttiot.com/',
|
||
apiaryId: ''
|
||
}
|
||
},
|
||
onLoad(option) {
|
||
this.apiaryId = option.apiaryId
|
||
this.getfc()
|
||
},
|
||
onShow() {
|
||
this.getQiniuToken()
|
||
this.getfengzhongcolumns()
|
||
this.getmiyuancolumns()
|
||
},
|
||
methods: {
|
||
confirmfz(e) {
|
||
this.form.beeType = e[0].value
|
||
this.fengzhong = e[0].label
|
||
},
|
||
confirmmy(e) {
|
||
this.form.honeyType = e[0].value
|
||
this.miyuan = e[0].label
|
||
},
|
||
btndel() {
|
||
let that = this;
|
||
uni.showModal({
|
||
title: "提示",
|
||
content: '确定要删除此蜂场?请谨慎操作',
|
||
success: function(res) {
|
||
if (res.confirm) {
|
||
that.$u.delete(`/farm/apiary/${that.apiaryId}`).then(res => {
|
||
if (res.code == 200) {
|
||
uni.showToast({
|
||
title: '删除蜂场成功',
|
||
icon: 'success',
|
||
duration: 1000
|
||
});
|
||
setTimeout(() => {
|
||
uni.navigateBack({
|
||
delta:2
|
||
});
|
||
}, 1500);
|
||
} else {
|
||
uni.showToast({
|
||
title: res.msg,
|
||
icon: 'none',
|
||
duration: 2000
|
||
});
|
||
}
|
||
})
|
||
.catch(error => {
|
||
console.error('删除蜂场失败:', error);
|
||
uni.showToast({
|
||
title: '删除蜂场失败，请稍后再试',
|
||
icon: 'none',
|
||
duration: 2000
|
||
});
|
||
});
|
||
}
|
||
}
|
||
});
|
||
},
|
||
btnadd() {
|
||
let data = {
|
||
apiaryId: this.apiaryId,
|
||
name: this.code,
|
||
picture: this.userImgs,
|
||
address: this.form.address,
|
||
province: this.form.province,
|
||
city: this.form.city,
|
||
county: this.form.county,
|
||
lng: this.form.lng,
|
||
lat: this.form.lat,
|
||
beeType: this.form.beeType,
|
||
honeyType: this.form.honeyType
|
||
}
|
||
this.$u.put("/farm/apiary", data).then((res) => {
|
||
if (res.code == 200) {
|
||
uni.showToast({
|
||
title: '修改蜂场成功',
|
||
icon: 'success',
|
||
duration: 1000
|
||
})
|
||
setTimeout(() => {
|
||
uni.navigateBack()
|
||
}, 1500)
|
||
} else {
|
||
uni.showToast({
|
||
title: res.msg,
|
||
icon: 'none',
|
||
duration: 2000
|
||
});
|
||
}
|
||
})
|
||
},
|
||
getfc() {
|
||
this.$u.get(`/farm/apiary/${this.apiaryId}`).then((res) => {
|
||
if (res.code == 200) {
|
||
this.code = res.data.name
|
||
this.userImgs = res.data.picture
|
||
this.form.address = res.data.address
|
||
this.form.province = res.data.province
|
||
this.form.city = res.data.city
|
||
this.form.county = res.data.county
|
||
this.form.lng = res.data.lng
|
||
this.form.lat = res.data.lat
|
||
this.form.beeType = res.data.beeType
|
||
this.form.honeyType = res.data.honeyType
|
||
this.miyuancolumns.forEach(item => {
|
||
if (res.data.honeyType.includes(item.value)) {
|
||
this.miyuan = item.label
|
||
}
|
||
})
|
||
this.fengzhongcolumns.forEach(item => {
|
||
if (res.data.beeType.includes(item.value)) {
|
||
this.fengzhong = item.label
|
||
}
|
||
})
|
||
}
|
||
})
|
||
},
|
||
|
||
getQiniuToken() {
|
||
this.$u.get("/common/qiniu/uploadInfo").then((res) => {
|
||
if (res.code == 200) {
|
||
this.token = res.token
|
||
|
||
}
|
||
});
|
||
// this.$u.get('https://v2.ielts.langsi.online/file/getToken').then(res => {
|
||
// console.log(res.data);
|
||
// this.token = res.data.token
|
||
// }).catch(err => {
|
||
// console.log(err)
|
||
// })
|
||
|
||
},
|
||
getfengzhongcolumns() {
|
||
let data = {
|
||
dictType: 'apiary_bee_type'
|
||
}
|
||
this.$u.get("/common/getDictByType?", data).then((res) => {
|
||
if (res.code == 200) {
|
||
this.fengzhongcolumns = res.data.map(item => ({
|
||
value: item.dictValue,
|
||
label: item.dictLabel
|
||
}));
|
||
|
||
}
|
||
});
|
||
|
||
},
|
||
getmiyuancolumns() {
|
||
let data = {
|
||
dictType: 'apiary_honey_type'
|
||
}
|
||
this.$u.get("/common/getDictByType?", data).then((res) => {
|
||
if (res.code == 200) {
|
||
this.miyuancolumns = res.data.map(item => ({
|
||
value: item.dictValue,
|
||
label: item.dictLabel
|
||
}));
|
||
|
||
}
|
||
});
|
||
},
|
||
addApiary() {
|
||
let data = {
|
||
|
||
}
|
||
this.$u.get('/farm/apiary', data).then((res) => {
|
||
|
||
if (res.code === 200) {
|
||
uni.navigateBack({
|
||
delta: 1 // delta值为1时表示返回的页面层数
|
||
});
|
||
} else {
|
||
uni.showToast({
|
||
title: res.msg,
|
||
icon: 'none',
|
||
duration: 2000
|
||
});
|
||
|
||
}
|
||
})
|
||
},
|
||
btn() {
|
||
let _this = this
|
||
let math = 'static/' + _this.$u.guid(20)
|
||
uni.chooseImage({
|
||
count: 1,
|
||
type: 'all',
|
||
success(res) {
|
||
// tempFilePath可以作为img标签的src属性显示图片
|
||
const tempFilePaths = res.tempFiles
|
||
// let tempFilePaths = chooseImageRes.tempFilePaths;
|
||
// console.log(tempFilePaths)
|
||
// tempFilePaths.forEach(item=>{
|
||
// // 上传图片到七牛云
|
||
|
||
// })
|
||
wx.uploadFile({
|
||
url: 'https://up-z2.qiniup.com',
|
||
name: 'file',
|
||
filePath: tempFilePaths[0].path,
|
||
formData: {
|
||
token: _this.token, //后端返回的token
|
||
key: 'smartmeter/img/' + math
|
||
},
|
||
success: function(res) {
|
||
console.log(res, 'resres');
|
||
let str = JSON.parse(res.data)
|
||
console.log(str.key)
|
||
_this.userImgs = _this.upurl + '/' + str.key
|
||
|
||
}
|
||
});
|
||
}
|
||
})
|
||
|
||
},
|
||
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
|
||
},
|
||
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)
|
||
})
|
||
},
|
||
chooseAddress() {
|
||
uni.chooseLocation({
|
||
success: (res) => {
|
||
console.log(res);
|
||
let address = res.address;
|
||
let regex =
|
||
/^([\u4e00-\u9fa5]+省)([\u4e00-\u9fa5]+市)([\u4e00-\u9fa5]+市|[\u4e00-\u9fa5]+区)(.*)/;
|
||
let match = address.match(regex);
|
||
if (match && match.length > 3) {
|
||
let province = match[1];
|
||
let city = match[2];
|
||
let district = match[3];
|
||
this.form.province = province
|
||
this.form.city = city
|
||
this.form.county = district
|
||
} else {
|
||
console.log('地址格式不匹配或无法提取省市区信息');
|
||
}
|
||
this.form.lng = res.longitude
|
||
this.form.lat = res.latitude
|
||
this.form.address = res.address
|
||
},
|
||
fail: function(err) {
|
||
// 检查错误消息，看是否是用户取消了位置选择
|
||
if (err.errMsg && err.errMsg.indexOf('chooseLocation:cancel') === 0) {
|
||
uni.showToast({
|
||
title: '您取消了位置选择',
|
||
icon: 'none'
|
||
});
|
||
} else {
|
||
console.log('选择位置失败', err);
|
||
// 处理其他失败情况
|
||
}
|
||
},
|
||
});
|
||
|
||
}
|
||
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
page {
|
||
background-color: #FAFDFD;
|
||
}
|
||
|
||
.page {
|
||
padding-bottom: 200rpx;
|
||
// position: relative;
|
||
width: 750rpx;
|
||
|
||
.btn {
|
||
position: fixed;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
bottom: 150rpx;
|
||
left: 46rpx;
|
||
width: 658rpx;
|
||
height: 88rpx;
|
||
background: #FFCC25;
|
||
border-radius: 20rpx 20rpx 20rpx 20rpx;
|
||
font-weight: 500;
|
||
font-size: 32rpx;
|
||
color: #FFFFFF;
|
||
}
|
||
|
||
.btns {
|
||
position: fixed;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
bottom: 50rpx;
|
||
left: 46rpx;
|
||
width: 658rpx;
|
||
height: 88rpx;
|
||
background: #D8D8D8;
|
||
border-radius: 20rpx 20rpx 20rpx 20rpx;
|
||
font-weight: 500;
|
||
font-size: 32rpx;
|
||
color: #808080;
|
||
}
|
||
|
||
.tit {
|
||
margin-top: 40rpx;
|
||
margin-left: 50rpx;
|
||
font-weight: 600;
|
||
font-size: 32rpx;
|
||
color: #3D3D3D;
|
||
}
|
||
|
||
.imgbox {
|
||
margin-top: 28rpx;
|
||
margin-left: 46rpx;
|
||
|
||
image {
|
||
width: 412rpx;
|
||
height: 222rpx;
|
||
}
|
||
}
|
||
|
||
.iptbox {
|
||
display: flex;
|
||
align-items: center;
|
||
flex-wrap: nowrap;
|
||
padding: 22rpx;
|
||
margin: 28rpx auto 0;
|
||
width: 658rpx;
|
||
height: 88rpx;
|
||
background: #FFFFFF;
|
||
box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0, 0, 0, 0.15);
|
||
border-radius: 20rpx 20rpx 20rpx 20rpx;
|
||
|
||
.ips {
|
||
width: 630rpx;
|
||
|
||
}
|
||
|
||
image {
|
||
width: 18rpx;
|
||
height: 32rpx;
|
||
}
|
||
|
||
.my-placeholder {
|
||
font-weight: 400;
|
||
font-size: 32rpx;
|
||
color: #808080;
|
||
}
|
||
}
|
||
}
|
||
</style> |