<template> <view class="page"> <u-navbar title="修改店铺" :border-bottom="false" :background="bgc" title-color='#000' title-size='36' height='58'></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="listvals" @click="btnlx"> <view class="tit"> 店铺类型</view> <view class="but"> <input disabled="false" type="text" :placeholder="selectortext" /> <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" style="display: flex;justify-content: space-between;padding: 15rpx 26rpx;box-sizing: border-box;"> <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="latitude" disabled="true" /> <input type="text" :placeholder="longitude" disabled="true" /> <u-icon name="map-fill" style="position: absolute;top: 44rpx;right: 22rpx;z-index: 99;" size="32" @click="btnjwd"></u-icon> </view> </view> <view class="listval"> <view class="tit"> 详细地址</view> <view class="but"> <input type="text" placeholder="请输入详细地址" v-model="xqdz" /> </view> </view> <view class="icon"> <view class="list_box"> <view class="lt"> <view class="tit"> 上传门头照 </view> <view class="wz"> 门头照片必须清晰、方正、易于辨识 </view> </view> <view class="imgbox" @click="btn"> <image :src="imglist" mode="" style="width: 142rpx;height: 142rpx;border-radius: 20rpx;"></image> </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" :params="params" @confirm="btnyy"></u-picker> </view> </view> </template> <script> export default { data() { return { 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:'', listobj:{}, storeId:'', bgc:{ background:'#25D088' } } }, onLoad(option) { let obj = JSON.parse(option.obj) this.listobj = obj // console.log(this.listobj); this.shopname = this.listobj.name this.ksyy = this.listobj.businessTimeStart this.jsyy = this.listobj.businessTimeEnd this.regiontext = this.listobj.province + this.listobj.city + this.listobj.county this.lxname = this.listobj.contactName this.lxphone = this.listobj.contactMobile this.latitude = this.listobj.lat this.longitude = this.listobj.lng this.xqdz = this.listobj.address this.selectorvalue = this.listobj.type this.imglist = this.listobj.picture this.province = this.listobj.province this.city = this.listobj.city this.area = this.listobj.county this.storeId = this.listobj.storeId if(this.selectorvalue == 1){ this.selectortext = '商场' }else if(this.selectorvalue == 2){ this.selectortext = '学校' }else if(this.selectorvalue == 3){ this.selectortext = '娱乐场所' }else if(this.selectorvalue == 4){ this.selectortext = '出租房' }else{ this.selectortext = '其他' } this.getQiniuToken() }, methods: { 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.selectortext == '请选择商铺类型') { 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.latitude == '请输入纬度') { 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 { 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.lxname, contactMobile:this.lxphone, type:this.selectorvalue, storeId:this.storeId } this.$u.put("/agent/store",data).then(res => { if (res.code == 500) { uni.showToast({ title: res.msg, icon: 'none', duration: 1000 }) }else{ uni.showToast({ title: '修改成功', icon: 'success', duration: 1000 }) setTimeout(()=>{ uni.navigateBack({ delta: 2 }) },1000) } }) } }, 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; }, fail: function(err) { console.log('选择位置失败', err); }, complete: (res) => { if (res.errMsg === 'chooseLocation:ok') { } else if (res.errMsg.indexOf('chooseLocation:cancel') === 0) { uni.showToast({ title: '您取消了位置选择', icon: 'none' }); } } }); }, 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/ .u-title, /deep/ .uicon-nav-back { padding-bottom: 40rpx; } page { background: #F4F5F7; } .page { width: 750rpx; position: fixed; top: 0; left: 0; .box { width: 750rpx; height: 1400rpx; background: #F4F5F7; border-radius: 0rpx 0rpx 0rpx 0rpx; padding-top: 40rpx; .list { width: 680rpx; height: 1204rpx; 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, #25CE88 0%, #25CE88 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; .lt { padding-top: 40rpx; .tit { font-size: 32rpx; color: #3D3D3D; } .wz { font-size: 24rpx; 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: 40rpx; font-size: 32rpx; color: #3D3D3D; } .but { width: 462rpx; height: 140rpx; background: #F0F0F0; border-radius: 12rpx 12rpx 12rpx 12rpx; position: relative; input { height: 70rpx; line-height: 70rpx; padding-left: 22rpx; } } } .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; color: #666; } } } } } } </style>