382 lines
9.0 KiB
Vue
382 lines
9.0 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" 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>
|
||
<!-- <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/'
|
||
}
|
||
},
|
||
onLoad() {
|
||
|
||
},
|
||
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
|
||
},
|
||
btnadd(){
|
||
let data = {
|
||
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
|
||
}
|
||
console.log(data);
|
||
this.$u.post("farm/apiary",data).then((res) => {
|
||
if (res.code == 200) {
|
||
uni.showToast({
|
||
title: '添加蜂场成功',
|
||
icon: 'success',
|
||
duration:1000
|
||
})
|
||
setTimeout(()=>{
|
||
uni.navigateBack()
|
||
},1500)
|
||
}else if(res.code == 401){
|
||
uni.navigateTo({
|
||
url:'/pages/login/login'
|
||
})
|
||
} else{
|
||
uni.showToast({
|
||
title: res.msg,
|
||
icon: 'none',
|
||
duration: 2000
|
||
});
|
||
}
|
||
})
|
||
},
|
||
|
||
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
|
||
// console.log(this.form);
|
||
} 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: 100rpx;
|
||
left: 46rpx;
|
||
width: 658rpx;
|
||
height: 88rpx;
|
||
background: #FFCC25;
|
||
border-radius: 20rpx 20rpx 20rpx 20rpx;
|
||
|
||
font-weight: 500;
|
||
font-size: 32rpx;
|
||
color: #FFFFFF;
|
||
}
|
||
.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> |