431 lines
9.9 KiB
Vue
431 lines
9.9 KiB
Vue
<template>
|
||
<view class="page">
|
||
<u-navbar title="新建门店" :border-bottom="false" :background="bgc" back-icon-color="#262B37" title-color='#262B37'
|
||
title-size='36' height='40' id="navbar">
|
||
</u-navbar>
|
||
<view class="top">
|
||
<view class="one">
|
||
<view class="wz">门店名称</view> <view class=""><input type="text" v-model="name" placeholder="请输入门店名称"/> </view>
|
||
</view>
|
||
<view class="one">
|
||
<view class="wz">门店类型</view> <view class="" @click="showlx = true">{{lxname}} <u-icon style="margin-left: 10rpx;" name="arrow-down" color="#808080" size="28"></u-icon> </view>
|
||
</view>
|
||
<view class="one">
|
||
<view class="wz">营业时间</view>
|
||
<view class="but" style="display: flex;justify-content: space-between;">
|
||
<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="one">
|
||
<view class="wz">联系人</view> <view class=""><input type="text" v-model="lianxi" placeholder="请输入联系人名称"/> </view>
|
||
</view>
|
||
<view class="one">
|
||
<view class="wz">联系电话</view> <view class=""><input type="text" v-model="tel" placeholder="请输入联系电话"/> </view>
|
||
</view>
|
||
<view class="one" style="margin-bottom: 0;">
|
||
<view class="wz">选择位置</view> <view class="" @click="btnweizhi">{{xqdz}} <u-icon style="margin-left: 10rpx;" name="arrow-down" color="#808080" size="28"></u-icon> </view>
|
||
</view>
|
||
</view>
|
||
<u-picker mode="time" v-model="show" default-time="00:00" :params="params" @confirm="btnyy"></u-picker>
|
||
|
||
<view class="biaoqian">
|
||
<view class="name">
|
||
标签设置
|
||
</view>
|
||
<view class="bqliat">
|
||
<view
|
||
class="bqitem"
|
||
v-for="(item, index) in biaoqianlist"
|
||
:key="index"
|
||
@click="btnbq(item.dictValue,index)"
|
||
:class="{ 'active': isSelected(index) }">
|
||
{{ item.dictLabel }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="mdpic">
|
||
<view class="tops">
|
||
门店照片
|
||
</view>
|
||
<view class="tishi">
|
||
门店环境、设备场景等，请选择横屏照片或拍照上传
|
||
</view>
|
||
<view class="pic" @click="getImage">
|
||
<image src="https://api.ccttiot.com/smartmeter/img/static/udXUCs8GULJZE9EZBLf1" class="img" mode=""></image>
|
||
</view>
|
||
<view class="pic" @click="getImage" v-for="(item,index) in imglist" :key="index">
|
||
<image :src="item" mode="aspectFill"></image>
|
||
</view>
|
||
<ksp-cropper mode="free" :width="352" :height="190" :maxWidth="1024" :maxHeight="1024" :url="url"
|
||
@cancel="oncancel" @ok="onok"></ksp-cropper>
|
||
</view>
|
||
<u-select v-model="showlx" :list="lxlist" @confirm="btnlx"></u-select>
|
||
|
||
<view class="anniu">
|
||
<view class="xinjian" @click="btnquxiao">
|
||
取消
|
||
</view>
|
||
<view class="queren" @click="btnadd">
|
||
确定
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
bgc: {
|
||
backgroundColor: "#fff",
|
||
},
|
||
params: {
|
||
hour: true,
|
||
minute: true,
|
||
},
|
||
show: false,
|
||
ksyy: '开始营业时间',
|
||
jsyy: '结束营业时间',
|
||
imglist: [],
|
||
token: '',
|
||
userImgs: '',
|
||
url:'',
|
||
latitude:'',
|
||
longitude:'',
|
||
xqdz:'选择位置',
|
||
biaoqianlist:[],
|
||
bqindex:-1,
|
||
selectedIndices: [],
|
||
idlist:[],
|
||
name:'',
|
||
lianxi:'',
|
||
tel:'',
|
||
showlx:false,
|
||
lxlist:[
|
||
{
|
||
value: '2',
|
||
label: '棋牌'
|
||
},{
|
||
value: '1',
|
||
label: '茶室'
|
||
},{
|
||
value: '3',
|
||
label: '台球'
|
||
},
|
||
],
|
||
lxname:'请选择类型',
|
||
lxid:''
|
||
}
|
||
},
|
||
onLoad() {
|
||
|
||
},
|
||
onShow() {
|
||
this.getQiniuToken()
|
||
this.getbiaoqian()
|
||
},
|
||
methods: {
|
||
// 点击取消
|
||
btnquxiao(){
|
||
uni.navigateBack()
|
||
},
|
||
// 确认添加门店
|
||
btnadd(){
|
||
let picture = this.imglist.join(",") //转成字符串
|
||
let arr = this.selectedIndices.map(item => {
|
||
return item + 1
|
||
})
|
||
let ss_store_tags = arr.join(',')
|
||
let data = {
|
||
name:this.name,
|
||
contactName:this.lianxi,
|
||
contactMobile:this.tel,
|
||
address:this.xqdz,
|
||
lng:this.longitude,
|
||
lat:this.latitude,
|
||
businessTimeStart:this.ksyy,
|
||
businessTimeEnd:this.jsyy,
|
||
picture:picture,
|
||
type:this.lxid,
|
||
ss_store_tags:ss_store_tags
|
||
}
|
||
this.$u.post("/app/store",data).then((res) => {
|
||
if (res.code == 200) {
|
||
uni.showToast({
|
||
title: '新建成功',
|
||
icon: 'success',
|
||
duration:2000
|
||
})
|
||
setTimeout(()=>{
|
||
uni.navigateBack()
|
||
},1000)
|
||
}else{
|
||
uni.showToast({
|
||
title: res.msg,
|
||
icon: 'none',
|
||
duration:2000
|
||
})
|
||
}
|
||
})
|
||
},
|
||
// 点击确认类型
|
||
btnlx(e){
|
||
this.lxid = e[0].value
|
||
this.lxname= e[0].label
|
||
},
|
||
// 点击选择标签
|
||
btnbq(dictValue,index) {
|
||
const indexExists = this.selectedIndices.includes(index);
|
||
if (indexExists) {
|
||
this.selectedIndices = this.selectedIndices.filter(i => i !== index);
|
||
} else {
|
||
this.selectedIndices.push(index);
|
||
}
|
||
},
|
||
isSelected(index) {
|
||
return this.selectedIndices.includes(index);
|
||
},
|
||
// 点击上传图片
|
||
getImage() {
|
||
if(this.imglist.length >= 5){
|
||
uni.showToast({
|
||
title: '最多上传五张图片',
|
||
icon: 'none'
|
||
})
|
||
}else{
|
||
uni.chooseImage({
|
||
count: 1,
|
||
success: (rst) => {
|
||
this.url = rst.tempFilePaths[0]
|
||
console.log(this.url);
|
||
}
|
||
})
|
||
}
|
||
},
|
||
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://lxnapi.ccttiot.com/' + str.key
|
||
_this.imglist.push(_this.userImgs)
|
||
console.log(_this.imglist);
|
||
}
|
||
})
|
||
},
|
||
oncancel() {
|
||
// url设置为空，隐藏控件
|
||
this.url = "";
|
||
},
|
||
// 点击选择位置
|
||
btnweizhi(){
|
||
uni.chooseLocation({
|
||
success: (res) => {
|
||
console.log(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)
|
||
}
|
||
},
|
||
})
|
||
},
|
||
// 获取上传七牛云token
|
||
getQiniuToken() {
|
||
this.$u.get("/common/qiniu/uploadInfo").then((res) => {
|
||
if (res.code == 200) {
|
||
this.token = res.token
|
||
}
|
||
})
|
||
},
|
||
// 获取标签
|
||
getbiaoqian(){
|
||
this.$u.get(`/appVerify/getDictData?dictType=ss_store_tags`).then((res) => {
|
||
if (res.code == 200) {
|
||
this.biaoqianlist = res.data
|
||
}
|
||
})
|
||
},
|
||
// 选择营业时间
|
||
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
|
||
}
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.active{
|
||
background-color: #48893B !important;
|
||
color: #fff !important;
|
||
}
|
||
page {
|
||
background: #F6F6F6;
|
||
padding-bottom: 200rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
/deep/ .panel{
|
||
position: fixed;
|
||
width: 100%;
|
||
height: 100%;
|
||
top: 0;
|
||
bottom: 0;
|
||
left: 0;
|
||
z-index: 99 !important;
|
||
overflow: hidden;
|
||
}
|
||
.biaoqian{
|
||
width: 680rpx;
|
||
max-height: 624rpx;
|
||
background: #FFFFFF;
|
||
padding: 44rpx 34rpx;
|
||
box-sizing: border-box;
|
||
margin: auto;
|
||
margin-top: 22rpx;
|
||
border-radius: 20rpx;
|
||
.name{
|
||
font-weight: 600;
|
||
font-size: 36rpx;
|
||
color: #3D3D3D;
|
||
}
|
||
.bqliat{
|
||
margin-top: 30rpx;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
.bqitem{
|
||
margin-right: 10rpx;
|
||
border: 1px solid #48893B;
|
||
color: #48893B;
|
||
padding: 10rpx;
|
||
margin-top: 10rpx;
|
||
}
|
||
image{
|
||
width: 226rpx;
|
||
height: 58rpx;
|
||
}
|
||
}
|
||
}
|
||
.anniu{
|
||
width: 750rpx;
|
||
height: 152rpx;
|
||
background: #FFFFFF;
|
||
box-shadow: 0rpx 8rpx 20rpx 0rpx rgba(0,0,0,0.3);
|
||
border-radius: 0rpx 0rpx 0rpx 0rpx;
|
||
position: fixed;
|
||
left: 0;
|
||
bottom: 0;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding: 0 36rpx;
|
||
box-sizing: border-box;
|
||
padding-top: 24rpx;
|
||
.queren{
|
||
width: 330rpx;
|
||
height: 104rpx;
|
||
background: #48893B;
|
||
text-align: center;
|
||
line-height: 104rpx;
|
||
font-weight: 600;
|
||
font-size: 36rpx;
|
||
color: #FFFFFF;
|
||
border-radius: 20rpx;
|
||
}
|
||
.xinjian{
|
||
width: 330rpx;
|
||
height: 104rpx;
|
||
border: 2rpx solid #48893B;
|
||
border-radius: 20rpx;
|
||
text-align: center;
|
||
line-height: 104rpx;
|
||
font-weight: 600;
|
||
font-size: 36rpx;
|
||
color: #48893B;
|
||
}
|
||
}
|
||
.mdpic{
|
||
width: 680rpx;
|
||
max-height: 1500rpx;
|
||
background: #FFFFFF;
|
||
border-radius: 24rpx 24rpx 24rpx 24rpx;
|
||
margin: auto;
|
||
margin-top: 22rpx;
|
||
padding: 38rpx;
|
||
box-sizing: border-box;
|
||
.tops{
|
||
font-size: 32rpx;
|
||
color: #3D3D3D;
|
||
}
|
||
.tishi{
|
||
font-size: 24rpx;
|
||
color: #3D3D3D;
|
||
margin-top: 20rpx;
|
||
}
|
||
.pic{
|
||
margin-top: 36rpx;
|
||
.img{
|
||
width: 144rpx;
|
||
height: 144rpx;
|
||
}
|
||
image{
|
||
width: 610rpx;
|
||
height: 280rpx;
|
||
}
|
||
}
|
||
}
|
||
.top{
|
||
width: 680rpx;
|
||
max-height: 986rpx;
|
||
background: #FFFFFF;
|
||
border-radius: 24rpx 24rpx 24rpx 24rpx;
|
||
margin: auto;
|
||
margin-top: 22rpx;
|
||
padding: 50rpx 38rpx;
|
||
box-sizing: border-box;
|
||
.one{
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-bottom: 34rpx;
|
||
align-items: center;
|
||
font-size: 28rpx;
|
||
color: #808080;
|
||
.wz{
|
||
color: #3D3D3D;
|
||
}
|
||
input{
|
||
text-align: right;
|
||
}
|
||
}
|
||
}
|
||
|
||
</style> |