LocalLivingServicesUniapp/pages/store/businessInfor.vue

<template>
	<view>
		<view class="top"></view>
		<view class="head">
			<view class="handle">
				<view class="head_left">
					<span class="cuIcon-back" @click="back"></span>
				</view>
				<span class="center">经营信息</span>
				<view class="head_right"></view>
			</view>
		</view>
		<!-- <status v-if="form && form.videoStatus !== null" :status="form.videoStatus" :updateTime="form.videoUpdateTime"
			:remark="form.videoRemark" style="z-index: 0;"></status> -->
		<view class="tab-top" :style="form && form.videoStatus == null ? 'margin-top: 14upx;' : ''">
			<view class="borderRadiu">
				<view class=" cu-form-group margin-top1 justify-between">
					<view class="content ">
						<text class="text-bold">营业时间</text>
						<i class="text-bg "></i>
					</view>
				</view>
				<view class="customize">
					<view class="business-hours" v-for="(val,index) in businessData" :key="val.id" @click="hoursChange(index)">
						<view class="flex justify-between">
							<text>{{ val.period }}</text>
							<view @click.stop="delClick(val)" class="del-style">删除</view>
						</view>
						<view class="business-date" v-if="val.timeType==1">
							<text>24小时营业</text>
						</view>
						<view class="business-date" v-else>
							<text>{{ val.middleTime }}</text>
							<text>{{ val.beginTime }}</text>
							<text>{{ val.endTime }}</text>
						</view>
					</view>
					<image v-if="businessData.length!==2" style="width: 100%;height:137upx" src="/static/store/yingyeshijian.png"
						mode="" @click="hoursChange()"> </image>
				</view>
			</view>
			<view class="borderRadiu">
				<view class=" cu-form-group margin-top1 justify-between">
					<view class="content ">
						<text class="text-bold">经营信息</text>
						<i class="text-bg "></i>
					</view>
				</view>
				<!-- <view class="data-item">
					<span>店铺面积</span>
					<input v-model="form.storeExtent" type="Number"
						style="width: 100px;height: 49rpx;background-color: #f7f8fc;margin: 0px 8rpx 0px 20rpx;"></input>㎡
				</view> -->
				<view class="data-item">
					<span>开业时间</span>
					<view class="" style="flex: 1;display: flex;justify-content: space-between;padding-left: 20rpx;"
						@click="show = true">
						<span v-if="date">{{date}}</span>
						<span v-else style="color: #999999;">去设置</span>
						<u-icon name="arrow-right"></u-icon>
					</view>
				</view>
				<!-- <view class="customize">
					<view class="title">地理位置</view>
					<view class=" booder-top" style="padding-bottom: 16upx" :style="{ display: mapIsHidden }"
						@click="selectAddress">
						<tdmap 
							:allowSelection="false" 
							:showCoordinates="false" 
							:key="mapKey"
						></tdmap>
					</view>
					<view class="business-prompt">
						若位置有误直接影响客户到店，请在地图中仔细核对，可拖拽地图确保位置正确
					</view>
				</view> -->
			</view>
		</view>
		<view class="padding flex sub-bottom">
			<button class="cu-btn round line-gray  shadow" @click="$Router.push({ name: 'settings' })">取消</button>
			<button style="margin-left: 12upx;width:77%" class="cu-btn bg-blue round " @click.native="sumbit">提交</button>
		</view>
		<u-picker v-model="show" mode="time" @confirm="selectTime" style="z-index: 999 !important;"></u-picker>
	</view>
</template>

<script>
	import configService from "../../common/service/config.service";
	import { USER_INFO } from "@/common/util/constants";
	import status from "./components/status.vue";
	import tdmap from "./tdtuMap.vue"

	export default {
		components: { status, tdmap },
		data() {
			return {
				video: "",
				photoList: [],
				form: {},
				src: "",
				businessData: [],
				show: false,
				date: "",
				latitude: 37.860372,
				longitude: 112.588154,
				marker: [{
					latitude: "",
					longitude: "",
					iconPath: "/static/boiaoji.png",
					width: 30,
					height: 30,
					label: {
						content: "",
						color: "#000000",
						fontSize: 14,
						bgColor: "#FFFFFF",
						borderColor: "#CCCCCC",
					},
				}],
				mapIsHidden: 'block', // 修复：初始为block，确保地图容器显示
				mapKey: 1,
				// 修复：初始化savedLocation为合法对象，避免undefined
				savedLocation: { lng: 112.55, lat: 37.87 } 
			};
		},
		onLoad(data) {
			if (data.params) {
				let obj = JSON.parse(decodeURIComponent(data.params));
				this.video = obj.video ? obj.video : '';
				obj.photo = obj.photo ? obj.photo.split(',').filter(id => id !== '') : [];
				this.form = obj;
				this.date = this.form.openingTime;
				
				// 修复：从obj中赋值坐标，确保数字类型
				if (obj.longitude && obj.latitude) {
					this.savedLocation = {
						lng: Number(obj.longitude) || 112.55,
						lat: Number(obj.latitude) || 37.87,
						address: obj.address || '位置'
					};
					uni.setStorage('mapMarkData',this.savedLocation)
					this.latitude = obj.latitude;
					this.longitude = obj.longitude;
				}
			}
		},
		onShow() {
			this.$http
				.get("/merchant/localMerchantTime/list?merchantId=" + uni.getStorageSync(USER_INFO).merchantId)
				.then((res) => {
					if (res.data.success) {
						this.businessData = res.data.result;
					} else {
						uni.showToast({ icon:'none', title:res.data.message });
					}
				});
			
			// 修复：安全获取存储的地址，避免da为undefined
			let da = uni.getStorageSync("address") || {};
			// console.log(da)
			// 核心：确保lng/lat是合法数字，兜底默认值
			const lng = Number(da.lng) || 112.55;
			const lat = Number(da.lat) || 37.87;
			
			// 更新savedLocation（触发子组件props更新）
			this.savedLocation = {
				lng: lng,
				lat: lat,
				address: da.address || '位置'
			};
			uni.setStorageSync('mapMarkData',this.savedLocation)
			this.latitude = lat;
			this.longitude = lng;
			
			// 优化：仅当坐标变化时更新mapKey，避免频繁刷新
			if (lng !== 112.55 || lat !== 37.87) {
				this.mapKey += 1;
			}
		},
		methods: {
			back() {
				uni.navigateBack();
			},
			selectAddress() {
				uni.navigateTo({ url: '/pages/store/selectTdMap?url=' + '/pages/store/businessInfor' });
			},
			handleMarkerTap() {
				const queryString = uni.getStorageSync("address") ?
					encodeURIComponent(JSON.stringify(uni.getStorageSync("address"))) : "";
				uni.navigateTo({ url: `/pages/login/map?position=${queryString}` });
			},
			selectTime(e) {
				this.date = e.year + "-" + e.month + "-" + e.day;
			},
			hoursChange(index) {
				const queryString = encodeURIComponent(JSON.stringify({ index, arr: this.businessData }));
				uni.navigateTo({ url: `/pages/store/addHours?params=${queryString}` });
			},
			delectVideo() {
				uni.showModal({
					title: "提示",
					content: "是否要删除此视频",
					success: (res) => {
						if (res.confirm) this.video = "";
					},
				});
			},
			DelImg(e) {
				uni.showModal({
					title: "提示",
					content: "确定要删除？",
					cancelText: "取消",
					confirmText: "确定",
					success: (res) => {
						if (res.confirm) this.form.photo.splice(e.currentTarget.dataset.index, 1);
					},
				});
			},
			ChooseImage() {
				uni.chooseImage({
					sizeType: ["original", "compressed"],
					sourceType: ["album"],
					success: (res) => {
						uni.uploadFile({
							url: configService.apiUrl + "/sys/common/upload",
							filePath: res.tempFilePaths[0],
							name: "file",
							formData: { biz: "temp" },
							success: (files) => {
								let data = JSON.parse(files.data);
								if (data.success) {
									const imgUrl = configService.apiUrl + "/" + data.message;
									this.form.photo = this.form.photo.length ? [...this.form.photo, imgUrl] : [imgUrl];
								}
							},
						});
					},
				});
			},
			ViewImage(e) {
				uni.previewImage({ urls: this.form.photo, current: e.currentTarget.dataset.url });
			},
			chooseVideo() {
				uni.chooseVideo({
					sourceType: ["camera", "album"],
					success: (res) => { this.video = res.tempFilePath; },
				});
			},
			sumbit() {
				if (!this.savedLocation.lng || !this.savedLocation.lat) {
				    uni.showToast({ title: "请先获取位置信息", icon: "none" });
				    return;
				}
				let data = {
					id: uni.getStorageSync(USER_INFO).merchantId,
					storeExtent: this.form.storeExtent,
					longitude: this.savedLocation.lng,
					latitude: this.savedLocation.lat,
					openingTime: this.date,
				};
				this.$http
					.post("/merchant/localMerchantInfo/shopEdit", { ...data })
					.then((res) => {
						if (res.data.success) {
							uni.showToast({ title: '提交成功', icon: 'none' });
							uni.navigateTo({ url: '/pages/store/settings' });
						} else {
							uni.showToast({ title: res.data.message, icon: 'none' });
						}
					});
			},
			delClick(val) {
				this.$http
					.delete("/merchant/localMerchantTime/delete?id=" + val.id)
					.then((res) => {
						if (res.data.success) {
							uni.showToast({ title: '提交成功', icon: 'none' });
							this.$http
								.get("/merchant/localMerchantTime/list?merchantId=" + uni.getStorageSync(USER_INFO).merchantId)
								.then((res) => {
									if (res.data.success) this.businessData = res.data.result;
									else uni.showToast({ icon:'none', title:res.data.message });
								});
						} else {
							uni.showToast({ icon:'none', title:res.data.message });
						}
					});
			},
		},
	};
</script>

<style scoped lang="scss">
	page { background: #f8f8fa; }
	.top {
		width: 100%;
		height: var(--status-bar-height);
		background: linear-gradient(87deg, #FFFFFF 0%, #A3CDFF 100%), linear-gradient(360deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%);
	}
	.head {
		width: 100%;
		background: #ffffff;
		.handle {
			height: 112rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0px 24rpx;
			position: relative;
			.head_left { font-size: 40rpx; }
			.center {
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
				font-size: 30rpx;
				font-weight: 600;
			}
			.head_right {
				display: flex;
				justify-content: space-between;
				align-items: center;
				span {
					width: 40rpx;
					height: 40rpx;
					display: flex;
					font-size: 28rpx;
					justify-content: center;
					align-items: center;
				}
			}
		}
	}
	.tab-top { padding: 0 26upx; padding-bottom: 130upx; }
	.progress-status {
		position: fixed;
		width: 100%;
		z-index: 9999;
		background: #ffffff;
		.status {
			font-size: 38upx;
			color: #f6863e;
			font-weight: 500;
			margin-bottom: 10upx;
			text { margin-left: 5upx; }
			image { vertical-align: text-top; width: 42upx; height: 42upx; }
		}
	}
	.borderRadiu {
		border-radius: 8px;
		background-color: #ffffff;
		.customize {
			padding: 0 18upx 18upx;
			.title { padding: 18upx 0; font-size: 28upx; }
		}
		.business-img {
			height: 210upx;
			width: 310upx;
			background-size: cover;
			image { width: 100%; height: 100%; }
		}
		.business-prompt {
			padding-top: 16upx;
			font-size: 20upx;
			color: #999999;
		}
	}
	.booder-top {
		border-bottom: 1px solid rgb(238, 238, 238);
		padding-bottom: 7px;
		.uploader_video { width: 310upx; height: 210upx; }
		.video-container { max-width: 100%; max-height: 100%; }
	}
	.sub-bottom {
		position: fixed;
		width: 100%;
		bottom: 0;
		background: #ffffff;
		border-top: 1px solid #eeeeee;
	}
	.uni-uploader__img { width: 200upx; height: 200upx; }
	.uni-uploader__file, .uploader_video {
		position: relative;
		z-index: 1;
		width: 200upx;
		height: 200upx;
	}
	.icon-cuo {
		position: absolute;
		right: 0;
		top: 5upx;
		color: #ffffff;
		z-index: 999;
		border-top-right-radius: 20upx;
		border-bottom-left-radius: 20upx;
	}
	.business-hours {
		padding: 27upx 22upx;
		background: #f7f8fc;
		font-size: 28upx;
		border-radius: 8px 8px 8px 8px;
		margin-bottom: 18upx;
	}
	.del-style {
		width: 116upx;
		background: #ffffff;
		border-radius: 4px 4px 4px 4px;
		border: 1px solid #eeeeee;
		color: #333333;
		font-size: 26upx;
		line-height: 50upx;
		text-align: center;
	}
	.business-date { text { margin-right: 22upx; } }
	.data-item {
		display: flex;
		align-items: center;
		border-bottom: 1px solid #eeeeee;
		padding-left: 16rpx;
		height: 80rpx;
		align-items: center;
		.custom-input { width: 160rpx; }
	}
</style>