tearoom/page_shanghu/mendianadd.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>