<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="scaleToFill" v-if=""></image>
</view>
<view class="imgbox" v-else>
<image :src="userImgs" mode="aspectFill" 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;
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>