moxuan_takeaway_shanghu/my/store/index.vue

<template>
	<view class="padding">
		<view class="text-white padding bg radius">
			<u-form :model="shop" label-position="top">
				<u-form-item label="店铺名称 ">
					<text class="text-sm" @click="gokefu()" style="color: red; position: absolute; top: 20rpx; left: 135rpx">*请联系客服修改</text>
					<u-input v-model="shop.shopName" placeholder="请输入店铺名称" :disabled="true" />
				</u-form-item>
				<u-form-item label="开店时间">
					<!-- #ifdef MP-WEIXIN -->
					<u-input v-model="shop.businessHours" placeholder="请填写" :disabled="true" @click="startShow = true" />
					<!-- #endif -->
					<!-- #ifndef MP-WEIXIN -->
					<view style="width: 100%">
						<picker mode="time" :value="shop.businessHours" placeholder="请填写" start="00:00" end="23:59" @change="bindTimeChange">
							<view class="uni-input">{{ shop.businessHours ? shop.businessHours : '请填写' }}</view>
						</picker>
					</view>
					<!-- #endif -->
				</u-form-item>
				<u-form-item label="闭店时间">
					<!-- #ifdef MP-WEIXIN -->
					<u-input v-model="shop.lockHours" :disabled="true" placeholder="请填写" @click="endShow = true" />
					<!-- #endif -->
					<!-- #ifndef MP-WEIXIN -->
					<view style="width: 100%">
						<picker mode="time" :value="shop.lockHours" placeholder="请填写" start="00:00" end="23:59" @change="bindTimeChanges">
							<view class="uni-input">{{ shop.lockHours ? shop.lockHours : '请填写' }}</view>
						</picker>
					</view>
					<!-- #endif -->
				</u-form-item>
				<u-form-item label="店铺地址">
					<text class="text-sm" @click="gokefu()" style="color: red; position: absolute; top: 20rpx; left: 135rpx">*请联系客服修改</text>
					<!-- @click="bindOpen()" -->
					<u-input v-model="shop.detailedAddress" :disabled="true" placeholder="请填写" />
				</u-form-item>
				<u-form-item label="店铺公告">
					<textarea v-model="shop.shopNotice" rows="3" placeholder="请填写" maxlength="50" />
				</u-form-item>
				<u-form-item label="配送费(元)">
					<text class="text-sm" @click="gokefu()" style="color: red; position: absolute; top: 20rpx; left: 155rpx">*请联系客服修改</text>
					<u-input v-model="shop.errandMoney" placeholder="请输入配送费" :disabled="true" />
				</u-form-item>
				<u-form-item label="最低起送金额(元)">
					<u-input v-model="shop.minimumDelivery" placeholder="请输入最低起送金额" />
				</u-form-item>
				<u-form-item label="减免配送费最小订单金额(元)">
					<u-input v-model="shop.exemptMinMoney" placeholder="请输入减免配送费最小订单金额" />
				</u-form-item>
				<u-form-item label="最大配送距离(千米)">
					<text class="text-sm" @click="gokefu()" style="color: red; position: absolute; top: 20rpx; left: 285rpx">*请联系客服修改</text>
					<u-input v-model="distributionDistance" placeholder="请输入最大配送距离(单位:km)" :disabled="true" />
				</u-form-item>
				<u-form-item label="是否上线">
					<u-radio-group v-model="shop.putawayFlag">
						<u-radio name="0">上班啦</u-radio>
						<u-radio name="1">打烊啦</u-radio>
					</u-radio-group>
				</u-form-item>
				<!-- <u-form-item label="是否开启平台配送">
					<u-radio-group v-model="shop.autoSendOrder">
						<u-radio name=0>开启</u-radio>
						<u-radio name=1>关闭</u-radio>
					</u-radio-group>
				</u-form-item> -->
				<u-form-item label="配送方式:">
					<text v-if="shop.autoSendOrder == 0" style="font-weight: 500; font-size: 20px">平台配送</text>
					<text v-if="shop.autoSendOrder == 1" style="fontsize: 20px">商家自配</text>
				</u-form-item>
				<u-form-item label="是否开启自动接单">
					<u-radio-group v-model="shop.autoAcceptOrder">
						<u-radio name="0">开启</u-radio>
						<u-radio name="1">关闭</u-radio>
					</u-radio-group>
				</u-form-item>
				<u-form-item label="是否开启预约单功能">
					<u-radio-group v-model="shop.reservationOpenFlag">
						<u-radio name="1">开启</u-radio>
						<u-radio name="0">关闭</u-radio>
					</u-radio-group>
				</u-form-item>
			</u-form>
		</view>

		<view class="text-white padding bg radius margin-tb">
			<u-form :model="shop" label-position="top">
				<u-form-item label="打印机">
					<text class="text-sm" style="color: red; position: absolute; top: 25rpx; left: 105rpx">*一个打印机只能绑定一个商家</text>
					<u-radio-group v-model="shop.facility">
						<!-- <u-radio name=0>上线</u-radio> -->
						<u-radio name="1">飞鹅</u-radio>
					</u-radio-group>
				</u-form-item>
				<u-form-item label="设备sn编码">
					<u-input v-model="shop.snCode" placeholder="请输入设备sn编码" />
				</u-form-item>
				<u-form-item label="设备key秘钥">
					<u-input v-model="shop.value" placeholder="请输入设备key秘钥" />
				</u-form-item>
			</u-form>
		</view>
		<view class="text-white padding bg radius margin-tb">
			<view>
				<view class="text-lg margin-top-sm text-black">店铺logo</view>
				<view class="flex" style="overflow: hidden; flex-wrap: wrap">
					<view v-if="shop.shopCover.length">
						<view class="margin-top flex margin-right-sm flex-wrap">
							<view class="flex" style="width: 200rpx; height: 200rpx; margin-right: 2rpx; position: relative">
								<image :src="shop.shopCover" style="width: 100%; height: 100%"></image>
								<view style="z-index: 9; position: absolute; top: -15rpx; right: -15rpx" @click="removeImgs()">
									<u-icon name="close-circle-fill" color="#2979ff" size="50rpx"></u-icon>
								</view>
							</view>
						</view>
					</view>
					<view class="margin-top" @click="addImage()" v-if="shop.shopCover.length <= 0">
						<view style="width: 200rpx; height: 200rpx; background: #f4f5f6" class="flex justify-center align-center">
							<view>
								<view class="text-center">
									<image src="../static/addimg.png" style="width: 65rpx; height: 55rpx"></image>
								</view>
								<view class="text-center text-black">添加图片</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view>
				<view class="text-lg margin-top-sm text-black">店铺活动广告图（可多张）</view>
				<view class="flex" style="overflow: hidden; flex-wrap: wrap">
					<view v-if="shopBanner.length">
						<view class="margin-top flex margin-right-sm flex-wrap">
							<view class="flex" style="width: 200rpx; height: 200rpx; margin-right: 2rpx; position: relative" v-for="(image, index) in shopBanner" :key="index">
								<image :src="image" style="width: 100%; height: 100%"></image>
								<view style="z-index: 9; position: absolute; top: -15rpx; right: -15rpx" @click="removeImg(index)">
									<u-icon name="close-circle-fill" color="#2979ff" size="50rpx"></u-icon>
								</view>
							</view>
						</view>
					</view>
					<view class="margin-top" @click="addImages(2)" v-if="shopBanner.length < 6">
						<view style="width: 200rpx; height: 200rpx; background: #f4f5f6" class="flex justify-center align-center">
							<view>
								<view class="text-center">
									<image src="../static/addimg.png" style="width: 65rpx; height: 55rpx"></image>
								</view>
								<view class="text-center text-black">添加图片</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 时间筛选 -->
		<u-picker v-model="startShow" mode="time" :params="params" @confirm="getStarttime()"></u-picker>

		<u-picker v-model="endShow" mode="time" :params="paramss" @confirm="getEndtime()"></u-picker>

		<u-button @click="submit" class="margin-top" :custom-style="customStyle" shape="square" :hair-line="false">提交</u-button>

		<!-- 用于图片压缩的canvas画布 -->
		<canvas
			:style="{
				width: cw + 'px',
				height: cw + 'px',
				position: 'absolute',
				zIndex: -1,
				left: '-10000rpx',
				top: '-10000rpx'
			}"
			canvas-id="zipCanvas"
		></canvas>
		<!--画布结束-->
	</view>
</template>

<script>
import configdata from '@/common/config.js'
import getLessLimitSizeImage from '@/utils/imageCompress.js'
export default {
	data() {
		return {
			shop: {
				shopName: '',
				businessHours: '',
				lockHours: '',
				detailedAddress: '',
				shopNotice: '',
				putawayFlag: 1,
				latitude: '',
				longitude: '',
				shopCover: '',
				//详情图
				shopBanner: [],
				shopId: uni.getStorageSync('shopId'),
				errandMoney: '',
				minimumDelivery: '',
				exemptMinMoney: '',
				distributionDistance: '',
				autoSendOrder: 1,
				autoAcceptOrder: 1,
				reservationOpenFlag: 0,
				facility: 1,
				snCode: '',
				value: ''
			},
			// facility:1,
			startShow: false,
			endShow: false,
			customStyle: {
				backgroundColor: '#FFCC00',
				color: '#000000',
				border: 0
			},
			status: 1,
			customStyle1: {
				color: '#000000',
				position: 'fixed',
				bottom: '15rpx',
				left: '0rpx',
				right: '0rpx',
				margin: '0rpx 50rpx',
				backgroundColor: '#FFCC00'
			},
			selarr: [],
			show: false,
			//详情图
			shopBanner: [],
			params: {
				year: false,
				month: false,
				day: false,
				hour: true,
				minute: true,
				second: false
			},
			paramss: {
				year: false,
				month: false,
				day: false,
				hour: true,
				minute: true,
				second: false
			},
			shopId: '',

			page: 1,
			limit: 100,
			list: [
				{
					name: '上线',
					disabled: false
				},
				{
					name: '下线',
					disabled: false
				}
			],
			distributionDistance: '',
			//画板边长默认是屏幕宽度，正方形画布
			cw: uni.getSystemInfoSync().windowWidth
		}
	},
	onLoad(option) {
		uni.showLoading({
			title: '加载中......',
			mask: true, // 是否显示透明蒙层，防止触摸穿透
			icon: 'loading'
		})
		// console.log(option, '店铺id')
		this.shopId = option.shopId

		this.getShopList()
	},
	onShow() {},
	methods: {
		gokefu() {
			uni.navigateTo({
				url: '/pages/my/chat'
			})
		},
		bindTimeChange: function (e) {
			console.log(e)
			this.shop.businessHours = e.target.value
		},
		bindTimeChanges: function (e) {
			console.log(e)
			this.shop.lockHours = e.target.value
		},
		//上线  下线
		radioChange(e) {
			// console.log(e)
		},
		// 店铺信息
		getShopList() {
			let data = {
				shopId: this.$queue.getData('shopId')
			}
			this.$Request.getA('/app/shop/selectShopMessage', data).then((res) => {
				if (res.code == 0) {
					uni.hideLoading()
					this.shop.shopName = res.data.shopName
					this.shop.detailedAddress = res.data.detailedAddress
					this.shop.businessHours = res.data.businessHours
					this.shop.lockHours = res.data.lockHours
					this.shop.shopCover = res.data.shopCover
					this.shop.shopNotice = res.data.shopNotice
					this.shop.putawayFlag = res.data.putawayFlag ? res.data.putawayFlag : 0
					this.shop.errandMoney = res.data.errandMoney
					this.shop.minimumDelivery = res.data.minimumDelivery
					this.shop.exemptMinMoney = res.data.exemptMinMoney
					if (res.data.shopBanner) {
						this.shop.shopBanner = res.data.shopBanner.split(',')
						this.shopBanner = res.data.shopBanner.split(',')
					}
					this.shop.distributionDistance = res.data.distributionDistance
					this.distributionDistance = res.data.distributionDistance / 1000
					this.shop.autoSendOrder = res.data.autoSendOrder ? res.data.autoSendOrder : 0
					this.shop.autoAcceptOrder = res.data.autoAcceptOrder ? res.data.autoAcceptOrder : 0
					this.shop.reservationOpenFlag = res.data.reservationOpenFlag ? res.data.reservationOpenFlag : 0
					this.shop.snCode = res.data.snCode //设备sn编码
					this.shop.value = res.data.value //设备key秘钥
					// this.shop.facility = res.data.facility // 设备类型
				}
			})
		},
		getStarttime(e) {
			console.log(e, '1111111111')

			this.shop.businessHours = e.hour + ':' + e.minute
		},
		getEndtime(e) {
			console.log(e)
			this.shop.lockHours = e.hour + ':' + e.minute
		},
		// 详情图删除
		removeImg(index) {
			this.shopBanner.splice(index, 1)
		},
		// 店铺logo删除
		removeImgs() {
			this.shop.shopCover = ''
		},
		bindOpen(e) {
			console.log(e)
			let that = this
			uni.chooseLocation({
				success: function (res) {
					console.log('位置名称：' + res.name)
					console.log('详细地址：' + res.address)
					console.log('纬度：' + res.latitude)
					console.log('经度：' + res.longitude)
					that.shop.detailedAddress = res.address
					that.shop.shopLat = res.latitude
					that.shop.shopLng = res.longitude
				}
			})
		},

		// 图片上传
		addImages(e) {
			let that = this
			uni.chooseImage({
				count: 6,
				sourceType: ['album', 'camera'],
				success: (res) => {
					for (let i = 0; i < res.tempFiles.length; i++) {
						//这里的id和页面中写的html代码的canvas的id要一致
						let canvasId = 'zipCanvas'
						//原图的路径
						let imagePath = res.tempFiles[i].path
						//大小限制
						let limitSize = 1024 * 2
						//初始绘画区域是画布自身的宽度也就是屏幕宽度
						let drawWidth = uni.getSystemInfoSync().windowWidth
						let that = this
						getLessLimitSizeImage(canvasId, imagePath, limitSize, drawWidth, that, (resPath) => {
							uni.showLoading({
								title: '上传中'
							})
							uni.uploadFile({
								url: that.config('APIHOST1') + '/alioss/upload',
								filePath: resPath,
								name: 'file',
								success: (uploadFileRes) => {
									if (that.shopBanner.length < 6) {
										that.shopBanner.push(JSON.parse(uploadFileRes.data).data)
									}

									console.log(that.shopBanner)
									uni.hideLoading()
								},
								fail: () => {
									uni.showToast({
										title: '上传失败',
										icon: 'error'
									})
								}
							})
						})
					}
				}
			})
		},
		// 图片上传
		addImage() {
			let that = this
			uni.chooseImage({
				count: 1,
				sourceType: ['album', 'camera'],
				success: (res) => {
					for (let i = 0; i < res.tempFiles.length; i++) {
						//这里的id和页面中写的html代码的canvas的id要一致
						let canvasId = 'zipCanvas'
						//原图的路径
						let imagePath = res.tempFiles[i].path
						//大小限制
						let limitSize = 1024 * 2
						//初始绘画区域是画布自身的宽度也就是屏幕宽度
						let drawWidth = uni.getSystemInfoSync().windowWidth
						let that = this
						getLessLimitSizeImage(canvasId, imagePath, limitSize, drawWidth, that, (resPath) => {
							uni.showLoading({
								title: '上传中'
							})
							uni.uploadFile({
								url: that.config('APIHOST1') + '/alioss/upload',
								filePath: resPath,
								name: 'file',
								success: (uploadFileRes) => {
									that.shop.shopCover = JSON.parse(uploadFileRes.data).data
									uni.hideLoading()
								},
								fail: () => {
									uni.showToast({
										title: '上传失败',
										icon: 'error'
									})
								}
							})
						})
					}
				}
			})
		},
		config: function (name) {
			var info = null
			if (name) {
				var name2 = name.split('.') //字符分割
				if (name2.length > 1) {
					info = configdata[name2[0]][name2[1]] || null
				} else {
					info = configdata[name] || null
				}
				if (info == null) {
					let web_config = cache.get('web_config')
					if (web_config) {
						if (name2.length > 1) {
							info = web_config[name2[0]][name2[1]] || null
						} else {
							info = web_config[name] || null
						}
					}
				}
			}
			return info
		},
		// 发布
		submit() {
			console.log(this.distributionDistance)
			this.shop.shopBanner = this.shopBanner
			this.shop.shopBanner = this.shop.shopBanner.toString()
			this.shop.distributionDistance = this.distributionDistance * 1000
			// this.shop.distributionDistance = this.shop.distributionDistance * 1000

			// if (!this.shop.shopName) {
			// 	uni.showToast({
			// 		title: '请填写店铺名称',
			// 		icon: 'none',
			// 		duration: 1000
			// 	})
			// 	return
			// }
			if (!this.shop.businessHours) {
				uni.showToast({
					title: '请填写开店时间',
					icon: 'none',
					duration: 1000
				})
				return
			}
			if (!this.shop.lockHours) {
				uni.showToast({
					title: '请填写闭店时间',
					icon: 'none',
					duration: 1000
				})
				return
			}
			if (this.shop.businessHours >= this.shop.lockHours) {
				uni.showToast({
					title: '开店时间不能大于闭店时间',
					icon: 'none',
					duration: 1000
				})
				return
			}
			// if (!this.shop.detailedAddress) {
			// 	uni.showToast({
			// 		title: '请填写店铺地址',
			// 		icon: 'none',
			// 		duration: 1000
			// 	})
			// 	return
			// }
			if (!this.shop.shopNotice) {
				uni.showToast({
					title: '请填写店铺公告',
					icon: 'none',
					duration: 1000
				})
				return
			}
			// if (!this.shop.snCode) {
			// 	uni.showToast({
			// 		title: '请填写设备sn编码',
			// 		icon: 'none',
			// 		duration: 1000
			// 	})
			// 	return
			// }
			// if (!this.shop.value) {
			// 	uni.showToast({
			// 		title: '请填写设备key秘钥',
			// 		icon: 'none',
			// 		duration: 1000
			// 	})
			// 	return
			// }

			if (!this.shop.shopCover) {
				uni.showToast({
					title: '请上传店铺logo',
					icon: 'none',
					duration: 1000
				})
				return
			}
			if (!this.shop.shopBanner) {
				uni.showToast({
					title: '请上传店铺轮播图',
					icon: 'none',
					duration: 1000
				})
				return
			}
			// console.log('this.shop.putawayFlag',this.shop.putawayFlag)
			// return
			if (this.shop.putawayFlag == 0) {
				// if (!this.shop.errandMoney) {
				// 	uni.showToast({
				// 		title: '请填写配送费',
				// 		icon: 'none',
				// 		duration: 1000
				// 	})
				// 	return
				// }
				if (!this.shop.minimumDelivery) {
					this.shop.minimumDelivery = 0
					// uni.showToast({
					// 	title: '请填写最低起送金额',
					// 	icon: 'none',
					// 	duration: 1000
					// })
					// return
				}
				if (!this.shop.exemptMinMoney) {
					this.shop.exemptMinMoney = 0
					// uni.showToast({
					// 	title: '请填写减免配送费最小订单金额',
					// 	icon: 'none',
					// 	duration: 1000
					// })
					// return
				}
				console.log(this.shop.distributionDistance)
				// if (!this.shop.distributionDistance) {
				// 	uni.showToast({
				// 		title: '请填写最大配送距离',
				// 		icon: 'none',
				// 		duration: 1000
				// 	})
				// 	return
				// }
			}
			console.log(this.shop)
			// uni.setStorageSync('shopId', this.shop.shopId)
			this.$Request.postJsonA('/app/shop/updateShopMessage', this.shop).then((res) => {
				if (res.code == 0) {
					uni.showToast({
						title: '修改成功',
						icon: 'none'
					})

					setTimeout(function () {
						uni.navigateBack()
						// uni.navigateTo({
						// 	url: '/my/publish/index'
						// })
					}, 1000)
				} else {
					uni.showModal({
						title: '提示',
						content: res.msg,
						success: function (res) {
							if (res.confirm) {
							} else if (res.cancel) {
							}
						}
					})
				}
			})
		}
	}
}
</script>

<style>
page {
	background-color: #f5f5f5;
}

.bg {
	background-color: #ffffff;
}

.tabBox {
	border: 1rpx solid #999999;
	padding: 15rpx 20rpx;
	border-radius: 15rpx;
	font-size: 28rpx;
}

.btnnum {
	color: #005dff;
	border: 1rpx solid #005dff;
}
</style>