<template> <view class="page"> <u-navbar title="创建场所" :border-bottom="false" :background="bgc" title-color='#fff' back-icon-color="#fff" title-size='36' height='50'></u-navbar> <view class="box"> <view class="list"> <view class="listval"> <view class="tit"> 场所名称</view> <view class="but"> <input type="text" placeholder="请输入场所名称" v-model="shopname" /> </view> </view> <view class="listval"> <view class="tit"> 营业时间</view> <view class="but" style="display: flex;justify-content: space-between;padding: 15rpx 20rpx;box-sizing: border-box;"> <!-- <input type="text" placeholder="请输入营业时间" v-model="yetime" /> --> <view class="" style="font-size: 28rpx;color: #666;" @click="btnyinye(1)">{{ksyy}}</view> -- <view class="" style="font-size: 28rpx;color: #666;" @click="btnyinye(2)">{{jsyy}}</view> </view> </view> <view class="listvals" @click="btnregion"> <view class="tit"> 省市区</view> <view class="but"> <input disabled="false" type="text" :placeholder="regiontext" /> <u-icon name="arrow-down" style="position: absolute;top: 30%;right: 14rpx;"></u-icon> </view> </view> <view class="listval"> <view class="tit"> 联系人</view> <view class="but"> <input type="text" placeholder="请输入联系人" v-model="lxname" /> </view> </view> <view class="listval"> <view class="tit"> 联系电话</view> <view class="but"> <input type="text" placeholder="请输入联系电话" v-model="lxphone" /> </view> </view> <view class="jinwei"> <view class="tit"> 详细地址</view> <view class="but"> <input type="text" placeholder="请输入详细地址" v-model="xqdz" /> <u-icon name="map-fill" style="position: absolute;top: 20rpx;right: 22rpx;z-index: 99;" size="32" @click="btnjwd"></u-icon> </view> </view> <view class="listval"> <view class="tit"> 是否展示场所</view> <u-switch v-model="checked" active-color="#8883F0"></u-switch> </view> <view class="icon"> <view class="list_box"> <view class="lt"> <view class="tit"> 上传门头照 </view> <view class="wz"> 门头照片必须清晰、方正、易于辨识 </view> </view> <view class="imgbox"> <button style="border: 0;outline: none;width: 143rpx;padding-left: 0rpx;height: 143rpx;border-radius: 16rpx;" @click="getImage"> <image v-if="imgflag" src="https://api.ccttiot.com/smartmeter/img/static/uY8CPw9YE6JxPzcHUaqf" mode=""> </image> <image v-else :src="imglist" mode="" style="width: 142rpx;height: 142rpx;border-radius: 20rpx;"></image> </button> <ksp-cropper mode="free" :width="142" :height="142" :maxWidth="1024" :maxHeight="1024" :url="url" @cancel="oncancel" @ok="onok"></ksp-cropper> </view> </view> </view> <view class="baocun" @click="btncreat"> 提交创建 </view> </view> <!-- 场所类型 --> <u-select v-model="selectorshow" :list="selector" @confirm="btnselector"></u-select> <!-- 选择省市区 --> <u-picker v-model="regionshow" mode="region" @confirm="btnregions"></u-picker> <!-- 营业时间 --> <u-picker mode="time" v-model="show" default-time="00:00" :params="params" @confirm="btnyy"></u-picker> <view v-if="btnmsk" style="width: 100%;height: 100vh;position: fixed;top: 0;left: 0;background-color: #000;opacity: .1;z-index: 999;"></view> </view> </view> </template> <script> export default { data() { return { btnmsk:false, checked:true, params: { hour: true, minute: true, }, show: false, imglist: '', token: '', userImgs: '', imgflag: true, selectorshow: false, selectortext: '请选择商铺类型', selectorvalue: '', regionshow: false, regiontext: '请选择省市区', regionvalue: '', selector: [{ value: 1, label: '商场' }, { value: 2, label: '学校' }, { value: 3, label: '娱乐场所' }, { value: 4, label: '出租房' }, { value: 5, label: '其他' }, ], latitude: '请输入纬度', longitude: '请输入经度', shopname: '', yetime: '', lxname: '', lxphone: '', xqdz: '', ksyy: '开始营业时间', jsyy: '结束营业时间', yynum: 0, province: '', city: '', area: '', url:'', id:'' } }, onLoad(option) { if(option.id){ this.id = option.id // console.log(option,'ididididdidi'); } }, onShow() { this.getQiniuToken() }, methods: { getImage() { uni.chooseImage({ count: 1, success: (rst) => { this.url = rst.tempFilePaths[0] } }) }, onok(ev) { this.url = "" this.path = ev.path let _this = this let math = 'static/' + _this.$u.guid(20) wx.uploadFile({ url: 'https://up-z2.qiniup.com', name: 'file', filePath: _this.path, formData: { token: _this.token, //后端返回的token key: 'smartmeter/img/' + math }, success: function(res) { let str = JSON.parse(res.data) _this.userImgs = 'https://api.ccttiot.com/' + str.key _this.imglist = _this.userImgs _this.imgflag = false } }) }, oncancel() { // url设置为空,隐藏控件 this.url = "" }, btnyinye(num) { this.show = true this.yynum = num }, btnyy(e) { if (this.yynum == 1) { this.ksyy = e.hour + ':' + e.minute } else { this.jsyy = e.hour + ':' + e.minute } }, btncreat() { let phoneRegex = /^1[3-9]\d{9}$/ //判断手机号码格式 if (this.shopname == '') { uni.showToast({ title: '请输入场所名称', icon: 'none', duration: 1000 }) }else if(this.shopname.length > 5) { uni.showToast({ title: '场所名称过长,不能超过五个字', icon: 'none', duration: 1000 }); }else if (this.ksyy == '开始营业时间') { uni.showToast({ title: '请选择开始营业时间', icon: 'none', duration: 2000 }) } else if (this.jsyy == '结束营业时间') { uni.showToast({ title: '请选择结束营业时间', icon: 'none', duration: 2000 }) } else if (this.regiontext == '请选择省市区') { uni.showToast({ title: '请选择省市区', icon: 'none', duration: 1000 }) } else if (this.lxname == '') { uni.showToast({ title: '请输入联系人', icon: 'none', duration: 1000 }) } else if (this.lxphone == '') { uni.showToast({ title: '请输入联系电话', icon: 'none', duration: 1000 }) } else if (this.longitude == '请输入经度') { uni.showToast({ title: '请点击地图图标选择位置', icon: 'none', duration: 1000 }) } else if (this.xqdz == '') { uni.showToast({ title: '请输入详细地址', icon: 'none', duration: 1000 }) } else if (this.imglist == '') { uni.showToast({ title: '请上传一张商铺门面照', icon: 'none', duration: 1000 }) } else { this.btnmsk = true let data = { name: this.shopname, picture: this.imglist, address: this.xqdz, lng: this.longitude, lat: this.latitude, businessTimeStart: this.ksyy, businessTimeEnd: this.jsyy, province: this.province, city: this.city, county: this.area, specificAddress: this.xqdz, contactName: this.shopname, contactMobile: this.lxphone, type: this.selectorvalue, show:this.checked } this.$u.post("/app/store", data).then(res => { if (res.code == 200) { if(this.id){ let list = [] this.$u.get("/app/store/listCount").then((res) => { if (res.data != 0) { list = res.data let data = { deviceId: this.id, storeId:list[1].storeId } this.$u.put('/app/device', data).then((res) => { if (res.code == 200) { uni.showToast({ title: '创建成功', icon: 'success', duration: 1000 }) setTimeout(()=>{ uni.navigateBack() this.btnmsk = false },1000) } }) } }) }else{ uni.showToast({ title: '创建成功', icon: 'success', duration: 1000 }) setTimeout(()=>{ uni.navigateBack() this.btnmsk = false },1000) } }else{ uni.showToast({ title: res.msg, icon: 'none', duration: 1000 }) this.btnmsk = false } }) } }, btnlx() { this.selectorshow = true }, btnselector(e) { this.selectorvalue = e[0].value this.selectortext = e[0].label }, btnregion() { this.regionshow = true }, btnregions(e) { this.regiontext = e.province.label + e.city.label + e.area.label this.province = e.province.label this.city = e.city.label this.area = e.area.label }, btnjwd() { uni.chooseLocation({ success: (res) => { this.latitude = res.latitude this.longitude = res.longitude this.xqdz = res.name }, fail: function(err) { // 检查错误消息,看是否是用户取消了位置选择 if (err.errMsg && err.errMsg.indexOf('chooseLocation:cancel') === 0) { uni.showToast({ title: '您取消了位置选择', icon: 'none' }); } else { console.log('选择位置失败', err) // 处理其他失败情况 } }, }) }, getQiniuToken() { this.$u.get("/common/qiniu/uploadInfo").then((res) => { if (res.code == 200) { this.token = res.token } }) }, // btn() { // let _this = this // let math = 'static/' + _this.$u.guid(20) // uni.chooseImage({ // count: 1, // type: 'all', // success(res) { // const tempFilePaths = res.tempFiles // 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) { // let str = JSON.parse(res.data) // console.log(str.key) // _this.userImgs = 'https://api.ccttiot.com/' + str.key // _this.imglist = _this.userImgs // _this.imgflag = false // } // }); // } // }) // }, } } </script> <style lang="scss"> /deep/ .panel{ position: fixed; width: 100%; height: 100%; top: 0; bottom: 0; left: 0; z-index: 99 !important; overflow: hidden; } /deep/ .u-title { padding-bottom: 22rpx; } /deep/ .u-icon__icon { padding-bottom: 22rpx; } page { background: linear-gradient(180deg, #8883F0 0%, rgba(255, 255, 255, 0) 100%); } .page { width: 750rpx; position: fixed; top: 0; left: 0; .box { width: 750rpx; height: 1440rpx; background: #F4F5F7; border-radius: 0rpx 0rpx 0rpx 0rpx; padding-top: 40rpx; .list { width: 680rpx; height: 980rpx; background: #FFFFFF; border-radius: 24rpx 24rpx 24rpx 24rpx; margin: auto; padding-top: 44rpx; padding-left: 38rpx; padding-right: 38rpx; box-sizing: border-box; .baocun { width: 584rpx; height: 90rpx; background: linear-gradient(90deg, #8883F0 0%, #A29EFF 100%); border-radius: 54rpx 54rpx 54rpx 54rpx; margin: auto; text-align: center; line-height: 90rpx; position: fixed; left: 50%; transform: translateX(-50%); bottom: 60rpx; font-weight: 500; font-size: 40rpx; color: #FFFFFF; } .icon { display: flex; flex-wrap: wrap; align-items: center; margin-top: 40rpx; width: 680rpx; .list_box { width: 100%; display: flex; justify-content: space-between; padding-right: 45rpx; .lt { padding-top: 40rpx; .tit { font-size: 32rpx; color: #3D3D3D; } .wz { font-size: 26rpx; color: #3D3D3D; margin-top: 20rpx; } } .imgbox { width: 33%; image { width: 142rpx; height: 142rpx; } } } } .jinwei { display: flex; justify-content: space-between; margin-top: 34rpx; .tit { margin-top: 10rpx; font-size: 32rpx; color: #3D3D3D; } .but { width: 462rpx; height: 70rpx; background: #F0F0F0; border-radius: 12rpx 12rpx 12rpx 12rpx; position: relative; input { height: 70rpx; line-height: 70rpx; padding-left: 22rpx; padding-right: 72rpx; } } } .listvals { display: flex; justify-content: space-between; margin-top: 34rpx; .tit { margin-top: 12rpx; font-size: 32rpx; color: #3D3D3D; } .but { width: 462rpx; height: 70rpx; background: #F0F0F0; border-radius: 12rpx 12rpx 12rpx 12rpx; position: relative; input { height: 70rpx; line-height: 70rpx; padding-left: 22rpx; } } } .listval { display: flex; justify-content: space-between; margin-top: 34rpx; .tit { margin-top: 12rpx; font-size: 32rpx; color: #3D3D3D; } .but { width: 462rpx; height: 70rpx; background: #F0F0F0; border-radius: 12rpx 12rpx 12rpx 12rpx; input { height: 70rpx; line-height: 70rpx; padding-left: 22rpx; } } } } } } </style>