<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 class="xz">
<view v-for="(item,index) in tablist" @click="btnlxxz(item,index)" :class="{ 'active': isSelecteds(index) }">{{item}}</view>
</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: '台球'
},{
value: '4',
label: '其他'
},
],
lxname:'请选择类型',
lxid:'',
tablist:['茶室','棋牌','台球','其他'],
tabseled:[]
}
},
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 arrs = this.tabseled.map(item =>{
return item + 1
})
// console.log(arr);
let ss_store_tags = arr
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,
typeTags:arrs,
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)
},
// 点击选择类型
btnlxxz(dictValue,index) {
const indexExists = this.tabseled.includes(index)
if (indexExists) {
this.tabseled = this.tabseled.filter(i => i !== index)
} else {
this.tabseled.push(index)
}
},
isSelecteds(index) {
return this.tabseled.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;
}
.xz{
display: flex;
justify-content: space-between;
view{
padding: 6rpx;
width: 80rpx;
text-align: center;
border: 1px solid #48893B;
color: #48893B;
margin-left: 10rpx;
}
}
input{
text-align: right;
}
}
}
</style>