LocalLivingServicesUniapp/pages/store/businessInfor.vue

<template>
	<view>
		<!-- <cu-custom bgColor="bg-fff" :isBack="true">
			<block slot="content"> 经营信息</block>
		</cu-custom> -->
		<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"></status>
		<view class="tab-top" :style="form && form.videoStatus == null ? 'margin-top: 14upx;' : 'margin-top: 144upx;'">
			<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">
						<!-- <map :key="mapKey" style="width: 100%; height: 218upx;z-index:99" :latitude="latitude" scale="14"
							zIndex="100" :longitude="longitude" :markers="marker" @tap="handleMarkerTap"></map> -->
						<tdmap style="" :initialPosition="savedLocation" :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: true,
				mapKey: 1,
				savedLocation: {}
			};
		},
		 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
				// this.savedLocation.lnglat = {
				// 	lng: obj.longitude || 0,
				// 	lat: obj.latitude || 0,
				// };
				// this.savedLocation.address = obj.address || '位置';
				// this.latitude = obj.lat;
				// this.longitude = obj.lng;
			}
		},
		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 {
						this.$tip.error(res.data.message);
					}
				});
			let da = uni.getStorageSync("address");
			console.log(da)
			// let addname = uni.getStorageSync("currentAddress");
			// const lat = parseFloat(da.lng) || 37.860372;
			// const lng = parseFloat(da.lat) || 112.588154;
			// const labelContent = da?.address || "未设置地址";
			
			
			this.savedLocation.lng = da.lng
			this.savedLocation.lat = da.lat
			this.savedLocation.address = da.address || '位置';
			this.latitude = da.lat;
			this.longitude = da.lng;
			this.mapKey += 1;
			// this.marker[0].longitude = da.longitude
			// this.marker[0].latitude = da.latitude
			// this.marker[0].label.content = addname.name
			// this.marker = [{
			// 	latitude: lat, // 默认值避免 undefined
			// 	longitude: lng, // 默认值避免 undefined
			// 	iconPath: "/static/boiaoji.png",
			// 	width: 30,
			// 	height: 30,
			// 	label: {
			// 		content: labelContent, // 避免 addname 为 undefined
			// 		color: "#000000",
			// 		fontSize: 14,
			// 		bgColor: "#FFFFFF",
			// 		borderColor: "#CCCCCC",
			// 	},
			// }, ];
		
			// this.getCurrentLocation();
		},
		methods: {
			back() {
				uni.navigateTo({
					url: '/pages/store/settings'
				})
			},
			selectAddress() {
				uni.navigateTo({
					url: '/pages/store/selectTdMap?url=' + '/pages/store/businessInfor'
				})
			},
			// getCurrentLocation() {
			// 	uni.getStorage({
			// 		key: "currentAddress",
			// 		success: (res) => {
			// 			if (res.data && res.data.location) {
			// 				let temp = res.data.location.split(",");
			// 				this.latitude = temp[1];
			// 				this.longitude = temp[0];


			// 				// this.marker = [{
			// 				// 	id: 0,
			// 				// 	latitude: temp[1],
			// 				// 	longitude: temp[0],
			// 				// 	title: res.data.name || '当前位置',
			// 				// 	iconPath: '../../static/boiaoji.png',
			// 				// 	width: 30,
			// 				// 	height: 30,
			// 				// 	callout: { // 添加标注说明
			// 				// 		content: res.data.name || '当前位置',
			// 				// 		color: '#000',
			// 				// 		fontSize: 12,
			// 				// 		borderRadius: 10,
			// 				// 		bgColor: '#fff',
			// 				// 		padding: 5,
			// 				// 		display: 'ALWAYS'
			// 				// 	}
			// 				// }];
			// 				this.$forceUpdate();
			// 			}
			// 		},
			// 		fail: () => {
			// 			// 如果没有存储的位置，可以设置默认位置
			// 			// this.setDefaultLocation();
			// 		},
			// 	});
			// },

			handleMarkerTap() {
				const queryString = uni.getStorageSync("address") ?
					encodeURIComponent(JSON.stringify(uni.getStorageSync("address"))) :
					"";
				uni.navigateTo({
					url: `/pages/login/map?position=${queryString}`,
					// url:'/pages/login/map'
				});
			},
			selectTime(e) {
				console.log(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.photoList.splice(e.currentTarget.dataset.index, 1)
							this.form.photo.splice(e.currentTarget.dataset.index, 1);
						}
					},
				});
			},
			ChooseImage() {
				uni.chooseImage({
					// count: 4, //默认9
					sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ["album"], //从相册选择
					success: (res) => {
						if (res) {
							// this[type + 'Img'] = chooseImageRes.tempFilePaths[0];
							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) {
										if (this.form.photo.length != 0) {
											// this.photoList = this.photoList.concat(res.tempFilePaths)
											this.form.photo.push(
												configService.apiUrl + "/" + data.message
											);
										} else {
											// this.photoList =res.tempFilePaths
											this.form.photo = [
												configService.apiUrl + "/" + data.message,
											];
										}
									}
								},
							});
						}
					},
				});
			},
			ViewImage(e) {
				uni.previewImage({
					urls: this.form.photo,
					current: e.currentTarget.dataset.url,
				});
			},
			chooseVideo() {
				// 上传视频
				console.log("上传视频");
				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,
				};
				console.log(this.savedLocation.lng)
				// if (this.form.videoStatus == null) {
				// 	this.$http.post('/merchant/LocalMerchantOperate/add', data).then(res => {
				// 		if (res.data.success) {
				// 			this.$tip.success(res.data.result || '成功')
				// 			uni.navigateBack({
				// 				delta: 1 // 返回的页面数，默认为1
				// 			})
				// 		} else {
				// 			this.$tip.error(res.data.message);
				// 		}
				// 	})
				// }else {

				this.$http
					.post("/merchant/localMerchantInfo/shopEdit", {
						...data,
					})
					.then((res) => {
						if (res.data.success) {
							this.$tip.success(res.data.result || "成功");
							uni.navigateTo({
								url: '/pages/store/settings'
							})
						} else {
							this.$tip.error(res.data.message);
						}
					});
				// }
			},
			delClick(val) {
				this.$http
					.delete("/merchant/localMerchantTime/delete?id=" + val.id)
					.then((res) => {
						if (res.data.success) {
							this.$tip.success(res.data.result || "成功");
							this.$http
								.get(
									"/merchant/localMerchantTime/list?merchantId=" +
									uni.getStorageSync(USER_INFO).merchantId
								)
								.then((res) => {
									if (res.data.success) {
										this.businessData = res.data.result;
									} else {
										this.$tip.error(res.data.message);
									}
								});
						} else {
							this.$tip.error(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;
				// padding: 10px;
			}
		}

		.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%;

			::v-deep.uni-video-bar {
				height: 62upx;
				padding: 0;
			}
		}

		// ::v-deep video{
		//     position: relative;
		//     z-index: 1;
		//     width: 310upx ;
		//     height: 210upx;
		//     .uni-video-bar .uni-video-bar-full{

		//     }
		// }
	}

	.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 {
		// padding: 0 30upx;
		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;
		// -radius: 4px 4px 4px 4px;
	}

	.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>