LocalLivingServicesUniapp/pages/store/editStore.vue

<template>
	<view class="creat">
		<!-- <cu-custom bgColor="bg-fff" :isBack="true" style="position: relative;
  z-index: 999999999999999999"> -->
		<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>
		<block slot="content">编辑门店</block>
		</cu-custom>
		<view class="borderRadiu">
			<view class="cu-form-group">
				<view class="title">门店名称</view>
				<input placeholder="请输入门店名称" v-model="form.storeName" name="input"></input>
			</view>
			<view class="cu-form-group">
				<view class="title">所在地区</view>
				<view style="display: flex;width: 77%;justify-content: space-between;" @click="$refs.picker.show()">
					<!-- <u-input readonly placeholder="去设置" v-model="form.locality" @click="$refs.picker.show()"    /> -->
					<view style="font-size: 30rpx;">
						<text v-if="form.locality"> {{ form.locality }}</text>
						<text v-else style="color: grey">请选择所在地区</text>
					</view>
					<u-icon name="arrow-right" style="margin-left: 17rpx;"></u-icon>
				</view>
				<!-- <view>
                    <input disabled="true" @mousedown="$refs.picker.show()" placeholder="请选择所在地区" ref="inputRef"
                        name="input" v-model="form.locality"></input> 
                <text class='cuIcon-right' style="color: #C7C6CA ;" @click="$refs.picker.show()"></text> 
                <w-picker :visible.sync="visible" ref="picker" mode="region" :value="form.locality"
                    @confirm="onConfirm($event, 'region')"></w-picker>
                </view> -->

			</view>
			<view class="cu-form-group">
				<view class="title">门店地址</view>
				<input placeholder="请输入门店详细地址" v-model="form.address" name="input"></input>
			</view>
			<view class="customize">
				<view class="title">地理位置</view>
				<view class=" booder-top" style="padding-bottom: 16upx;" :style="{ 'display': mapIsHidden }"
					@click="selectAddress">
					<!-- <map style="width: 100%; height: 218upx; position: relative;
  z-index: 1;" :latitude="savedLocation.lat" scale="14" :longitude="savedLocation.lng" :markers="markers"
						@tap="handleMarkerTap"></map> -->
					<tdmap style="" :initialPosition="savedLocation" :allowSelection="false" :showCoordinates="false" :key="mapKey"></tdmap>
				</view>

				<!-- <aMap class=" booder-top" style="padding-bottom: 7px;"></aMap> -->
				<view class="business-prompt">
					若位置有误直接影响客户到店，请在地图中仔细核对，可拖拽地图确保位置正确
				</view>
			</view>
			<view class="cu-form-group">
				<view class="title">店铺面积</view>
				<input placeholder="请输入店铺面积" v-model="form.storeExtent" name="input"></input>
			</view>
			<view class="customize">
				<view class="title">门头照片</view>
				<view class="grid col-3 grid-square flex-sub booder-top">
					<view class="bg-img" v-for="(item, index) in headPhotoImg" :key="index" @tap="ViewImage"
						:data-url="headPhotoImg[index]">
						<image :src="headPhotoImg[index]" mode="aspectFill"></image>
						<view class="cu-tag bg-red" @tap.stop="DelImg" :data-index="index">
							<text class='cuIcon-close'></text>
						</view>
					</view>
					<view class="solids" @tap="ChooseImage" v-if="headPhotoImg.length <= 4">
						<text class='cuIcon-cameraadd'></text>
					</view>
				</view>
				<view class="business-prompt">
					门店照片需包含完整的门店入口和招牌名称，建议现场拍摄门头照;最多可上传5张，支持格式bmp、png、jpeg、jpg，单个图片不超过5MB，建议尺寸在2000*1500px以上
				</view>
			</view>
		</view>
		<view class="padding flex flex-direction sub-bottom">
			<button class="cu-btn bg-blue round " @click="submit">提交审核</button>
		</view>
		<w-picker :visible.sync="visible" ref="picker" mode="region" :value="form.locality"
			@confirm="onConfirm($event, 'region')"></w-picker>
	</view>
</template>
<script>
	import regionPicker from "../../components/w-picker/region-picker.vue"
	import {
		USER_INFO
	} from "@/common/util/constants"
	import configService from '../../common/service/config.service'
	import tdmap from "./tdtuMap.vue"

	export default {
		components: {
			regionPicker,
			tdmap
			// aMap
		},
		data() {
			return {
				imgList: [],
				form: {},
				visible: false,
				markers: [],
				headPhotoImg: [],
				imageList: [],
				mapIsHidden: false,
				savedLocation: {},
				isDataLoaded: false,
				mapKey:0
			}
		},
		watch: {
			visible(val) {
				if (!val) {
					this.mapIsHidden = 'block'
				}
			}
		},
		async onload() {
			console.log('-----------')
			

		},
		async 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");
			
			this.savedLocation.lnglat = {
				lng: da.lng || 0,
				lat: da.lat || 0,
			};
			this.savedLocation.address = da.address || '位置';
			this.latitude = da.lat;
			this.longitude = da.lng;
			this.mapKey += 1;
			
			this.merchantId = uni.getStorageSync(USER_INFO).merchantId;
			let res = await this.$http.get("/merchant/localMerchantInfo/queryAppInfoById?id=" + this.merchantId)
			if (res.data.success) {
				// this.savedLocation = res.data.result.longitude && res.data.result.latitude ? [{
				// 		lng: res.data.result.longitude,
				// 		lat: res.data.result.latitude,
				// 	}] :
				// 	uni.getStorageSync('address') ? [Object.assign(uni.getStorageSync('address'), {
				// 	})] : []
				if(res.data.result.longitude && res.data.result.latitude){
					this.savedLocation.lnglat = {
						lng:res.data.result.longitude || 0,
						lat: res.data.result.latitude || 0,
					};
					this.savedLocation.address = res.data.result.address || '位置';
				}
				res.data.result.headPhoto = res.data.result.headPhoto ? res.data.result.headPhoto.split(',').filter(id =>
					id !== '') : []
				this.headPhotoImg = res.data.result.headPhoto ? res.data.result.headPhoto : []
				res.data.result.locality = res.data.result.locality ? res.data.result.locality : ''
				this.form = res.data.result
			} else {
				this.$tip.toast(res.data.message);
			}
			// this.getCurrentLocation();
		},
		// async onLoad(option) {


		// 	this.merchantId = uni.getStorageSync(USER_INFO).merchantId;
		// 	let res = await this.$http.get("/merchant/localMerchantInfo/queryAppInfoById?id=" + this.merchantId)
		// 	if (res.data.success) {
		// 		// this.savedLocation = res.data.result.longitude && res.data.result.latitude ? [{
		// 		// 		lng: res.data.result.longitude,
		// 		// 		lat: res.data.result.latitude,
		// 		// 		address:res.data.result.address
		// 		// 	}] :
		// 		// 	uni.getStorageSync('address') ? [Object.assign(uni.getStorageSync('address'), {
		// 		// 		iconPath: '../../static/boiaoji.png'
		// 		// 	})] : []
		// 		if (option.lng) {
		// 			this.$nextTick(
		// 				this.savedLocation.lng = option.lng,
		// 				this.savedLocation.lat = option.lat,
		// 				this.savedLocation.address = option.address,
		// 				this.form.longitude = option.lng,
		// 				this.form.latitude = option.lat,
		// 				this.form.address = option.address,
		// 				console.log(this.form)
		// 			)
		// 		} else {
		// 			if (res.data.result.longitude && res.data.result.latitude) {
		// 				this.savedLocation.lng = res.data.result.longitude,
		// 					this.savedLocation.lat = res.data.result.latitude,
		// 					this.savedLocation.address = res.data.result.address
		// 			}
		// 			res.data.result.headPhoto = res.data.result.headPhoto ? res.data.result.headPhoto.split(',').filter(id =>
		// 				id !== '') : []
		// 			this.headPhotoImg = res.data.result.headPhoto ? res.data.result.headPhoto.slice() : []
		// 			res.data.result.locality = res.data.result.locality ? res.data.result.locality : ''
		// 			this.form = res.data.result
		// 		}

		// 	} else {
		// 		this.$tip.toast(res.data.message);
		// 	}

		// },
		methods: {

			selectAddress() {
				uni.navigateTo({
					url: '/pages/store/selectTdMap?url=' + '/pages/store/editStore'
				})
			},
			back() {
				uni.navigateTo({
					url: '/pages/index/shop'
				})
			},
			submit() {
				// this.$http.post('/merchant/localMerchantInfo/edit', { ...this.form, headPhoto: this.form.headPhoto.join(',') }).then(res => {
				this.$http.post('/merchant/localMerchantInfo/editMerchantInfo ', {
					...this.form,
					headPhoto: this.form.headPhoto.join(',')
				}).then(res => {
					if (res.data.success) {
						// this.$tip.success(res.data.result || '成功')
						uni.showToast({
							title: '提交成功',
							icon: 'none'
						});
						uni.navigateTo({
							url: '/pages/index/shop'
						})
					} else {
						this.$tip.error(res.data.message);
					}
				})
			},
			uploadAll() {
				if (this.imageList.length === 0) {
					uni.showToast({
						title: '请先选择图片',
						icon: 'none'
					});
					return;
				}

				uni.showLoading({
					title: '上传中...',
					mask: true
				});

				const uploadPromises = this.imageList.map((path, index) => {
					return new Promise((resolve, reject) => {
						uni.uploadFile({
							url: configService.apiUrl + '/sys/common/upload', // 替换为实际接口
							filePath: path,
							formData: {
								'biz': 'temp',
							},
							name: 'file',
							success: (files) => {
								resolve(configService.apiUrl + '/' + JSON.parse(files.data).message)
							},
							fail: reject
						});
					});

				});

				Promise.all(uploadPromises)
					.then(results => {
						uni.hideLoading();
						this.imageList = []; // 清空已上传列表
						this.headPhotoImg = this.headPhotoImg.concat(results)
						this.form.headPhoto = this.form.headPhoto.concat(results)
					})
					.catch(error => {
						uni.hideLoading();
					});
			},
			ChooseImage() {
				uni.chooseImage({
					count: 5 - Number(this.headPhotoImg.length),
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (res) => {
						if (res) {
							this.imageList = [...this.imageList, ...res.tempFilePaths];
							this.uploadAll()
						}
					}
				});
			},
			onConfirm(e) {
				console.log(e)

				this.mapIsHidden = false
				this.form.locality = e.result
				this.form.country = e.value[e.value.length - 1]
				this.form.thirdPartyAreaList = e.value
			},
			DelImg(e) {
				uni.showModal({
					title: '提示',
					content: '确定要删除？',
					cancelText: '取消',
					confirmText: '确定',
					success: res => {
						if (res.confirm) {
							this.headPhotoImg.splice(e.currentTarget.dataset.index, 1)
							this.form.headPhoto.splice(e.currentTarget.dataset.index, 1)
						}
					}
				})
			},
			ViewImage(e) {
				uni.previewImage({
					urls: this.headPhotoImg,
					current: e.currentTarget.dataset.url
				});
			},
			handleMarkerTap() {
				const queryString = this.form.longitude && this.form.latitude ? {
						longitude: this.form.longitude,
						latitude: this.form.latitude,
					} :
					uni.getStorageSync('address') ?
					encodeURIComponent(JSON.stringify(uni.getStorageSync('address'))) : {}

				// const queryString = uni.getStorageSync('address') ? encodeURIComponent(JSON.stringify(uni.getStorageSync('address'))) : ''
				uni.navigateTo({
					url: `/pages/login/map?position=${queryString}`
				})

			},
		}
	}
</script>
<style scoped lang="scss">
	.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;
				}
			}
		}

	}

	.creat {
		background: #F7F8FC;
		// flex-direction: column;
		// position: fixed;
	}

	.borderRadiu {
		margin: 22upx 26upx;
		padding-bottom: 120upx;
		background-color: #ffffff;
	}

	.sub-bottom {
		position: fixed;
		width: 100%;
		bottom: 0;
		background: #FFFFFF;
		border-top: 1px solid #EEEEEE;
	}

	.customize {
		background-color: #fff;
		// border-top: 0.5px solid #eee;
		margin: 16upx 18upx;

		.title {
			font-size: 30upx;
			// padding: 10px;
		}

		.business-img {
			height: 218upx;
			width: 360upx;
			padding: 16upx;
			// padding-bottom: 16upx;
			background: url('/static/login/yingye2.png');
			margin: 16upx auto;
			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-top: 7px;
	}

	.picker-style {
		.w-picker-cnt .visible {
			position: absolute;
			z-index: 100000;
		}
	}
</style>