webapp / GreenwayWeb

<template>
	<view class="page">
		<view class="item"  v-if="edit==false">
			<view class="contents">
				<view class="add-list">
					<view class="list">
						<view class="title">
							<text style="font-weight: bold;">关联店铺</text>
							<!-- <text class="star">*</text> -->
						</view>
						<view class="content">
							<u-input style="text-align: right;" v-model="ruleForm.activityType" type="select" @click="typeShow = true" placeholder="请选择"/>
							<u-select v-model="typeShow" :list="typeList" label-name="shopName" value-name="id"  @confirm="typeChange"  @cancel="cancelSelect"
      :mask-closable="false"></u-select>
						</view>
					</view>
		
		
				</view>
			</view>
		</view>
		<view class="item">
			<view class="contents" style="background-color:#fff;padding:10px 20px;">
				<view class="feedback-data">
					<view>
						<view class="title">
							<text style="font-weight: bold;">*店内照片</text>
							<!-- <text class="star">*</text> -->
						</view>
					</view>
					<view class="voucher-img" v-if="showUp">
						<view class="voucher-list" style="width: 100%;">
							<u-upload style="display: flex;flex-wrap:wrap" :action="$upload" :auto-upload="false"
								ref="coverImage" :max-count="5" :file-list="fist"
								@on-remove="(response, file, fileList) => removeList(response, file, fileList)"
								@on-choose-complete="(response, file, fileList) => onsuccess1(response, file, fileList, 'coverImage')"></u-upload>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="item">
			<view class="contents">
				<view class="add-list">
					<view class="list">
						<view class="title">
							<text style="font-weight: bold;">*店铺名称</text>
							<!-- <text class="star">*</text> -->
						</view>
						<view class="content">
							<input type="text" placeholder="请输入" v-model="ruleForm.shopName">
						</view>
					</view>
					<view class="item">
						<view class="contents" style="background-color:#fff;">
							<view class="feedback-data">
								<view>
									<view class="title">
										<text style="font-weight: bold;">*店铺介绍</text>
										<!-- <text class="star">*</text> -->
									</view>
								</view>
								<view class="voucher-img">
									<view class="voucher-list" style="width: 100%;">
										<view class="" style="background-color: #F0F0F0;border-radius: 20rpx;">
											<textarea name="" id="" cols="30" rows="10" placeholder="请输入"
												style="font-size: 24rpx;background-color: #F0F0F0;border-radius: 20rpx;width: 96%;margin: 0 auto;padding:10px;"
												v-model="ruleForm.shopDescription"></textarea>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="item">
						<view class="contents" style="background-color:#fff;">
							<view class="feedback-data">
								<view>
									<view class="title">
										<text style="font-weight: bold;">*营业时间</text>
										<!-- <text class="star">*</text> -->
									</view>
								</view>
								<view class="voucher-img">
									<view class="voucher-list" style="width: 100%;">
										<view class="" style="background-color: #F0F0F0;border-radius: 20rpx;">
											<textarea name="" id="" cols="30" rows="5" placeholder="请输入"
												style="font-size: 24rpx;background-color: #F0F0F0;border-radius: 20rpx;width: 96%;margin: 0 auto;padding:10px;"
												v-model="ruleForm.businessHours"></textarea>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="list">
						<view class="title">
							<text style="font-weight: bold;">*联系电话</text>
							<!-- <text class="star">*</text> -->
						</view>
						<view class="content">
							<input type="text" placeholder="请输入" v-model="ruleForm.contactNumber" disabled>
						</view>
					</view>


				</view>
			</view>
		</view>



		<view class="item" style="margin-bottom: 60px;">
			<view class="contents" style="background-color:#fff;padding:10px 20px;">
				<view class="feedback-data">
					<view>
						<view class="title">
							<text style="font-weight: bold;">*位置描述</text>
							<!-- <text class="star">*</text> -->
						</view>
					</view>
					<view class="voucher-img">
						<view class="voucher-list" style="width: 100%;">
							<view class="" style="background-color: #F0F0F0;border-radius: 20rpx;">
								<textarea name="" id="" cols="30" rows="10" placeholder="请输入"
									style="font-size: 24rpx;background-color: #F0F0F0;border-radius: 20rpx;width: 96%;margin: 0 auto;padding:10px;"
									v-model="ruleForm.locationDescription"></textarea>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		


		<!-- 保存按钮 -->
		<view class="page-footer">
			<u-button type="success" style="width: 100%;border-radius: 10px;" @click="submit">提交</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				fist: [],
				ruleForm: {
					shopName: '',
					shopDescription: '',
					businessHours: '',
					contactNumber: '',
					locationDescription: '',
					shopPhotos: [],
					contractId: '',
					storePrimaryKey:'',
				},
				edit: false,
				typeShow:false,
				typeList:[],
				pageindex: {
					pageNumber: 0,
					pageSize: 100,
					contactNumber:'',
					dataStatus:"1"
				},
				ids:'',
				showUp:true
			}
		},
		onLoad(options) {
		if(options.phone){
			this.ruleForm.contactNumber = options.phone
			this.pageindex.contactNumber = options.phone
		}
			if (options.msg != '' && options.msg) {
				this.ruleForm = JSON.parse(options.msg)
				// this.ruleForm.shopPhotos = shopPhotos
				this.ruleForm.shopPhotos.map((item, index) => {
					let obj = {
						url: this.$img + item
					}

					this.fist.push(obj)
				})

				// this.fileList = this.ruleForm.shopPhotos
				this.edit = true
			}

			if (options.ids) {
				this.ruleForm.contractId = options.ids
			}
			
	this.$http.sendRequest('/cereAssetShopInformation/queryByPage', 'POST', this.pageindex, 1)
							.then(res => {
								if (res.data.data.content.length != 0) {
									this.typeList = res.data.data.content
								
								}
							})

		},
		methods: {
			chooseLocation(val, item) {
				this.popup1 = true
			},
			choose(val, item) {
				this.popup2 = true
			},
			typeChange(val){
				const selectedObject = this.typeList.find(item => item.id == val[0].value)
				this.ids = val[0].value
				this.ruleForm.shopName = selectedObject.shopName
				this.ruleForm.shopDescription = selectedObject.shopDescription
				this.ruleForm.businessHours = selectedObject.businessHours
				this.ruleForm.contactNumber = selectedObject.contactNumber
				this.ruleForm.locationDescription = selectedObject.locationDescription
				this.ruleForm.storePrimaryKey = selectedObject.storePrimaryKey
				let shopPhotos = selectedObject.shopPhotos.split(',')
				let photosList = []
				this.showUp = false
				this.fist = []	
				this.showUp = false
				this.$nextTick(() => {
					this.showUp = true 
				})
				shopPhotos.map(res=>{
					let obj = {
						url: this.$img + res
					}
					this.fist.push(obj)
					photosList.push(this.$img + res)
				})
				this.ruleForm.shopPhotos = photosList
				this.ruleForm.activityType = val[0].label
				
			},
			cancelSelect(){
						this.ruleForm.activityType = ''
						this.ids = ''
						this.ruleForm.shopName=''
						this.ruleForm.shopDescription=''
						this.ruleForm.businessHours=''
						this.ruleForm.locationDescription=''
						this.ruleForm.shopPhotos = []
						this.fist = []
						this.showUp = false 
						this.$nextTick(() => {
							this.showUp = true 
						})
			},
			pops(val) {
				this.ruleForm.warrantyIssue = val[0].label
			},
			pops1(val) {
				this.ruleForm.deviceType = val[0].label
			},
			check() {
				if (this.ruleForm.shopPhotos.length == 0) {
					uni.showToast({
						icon: 'none',
						title: '请上传现场图片'
					});
					return false;
				}
				if (!this.ruleForm.shopName) {
					uni.showToast({
						icon: 'none',
						title: '请输入店铺名称'
					});
					return false;
				}
				if (!this.ruleForm.shopDescription) {
					uni.showToast({
						icon: 'none',
						title: '请输入店铺介绍'
					});
					return false;
				}
				if (!this.ruleForm.businessHours) {
					uni.showToast({
						icon: 'none',
						title: '请输入营业时间'
					});
					return false;
				}
				if (!this.ruleForm.contactNumber) {
					uni.showToast({
						icon: 'none',
						title: '请输入联系电话'
					});
					return false;
				}
				if (!this.ruleForm.locationDescription) {
					uni.showToast({
						icon: 'none',
						title: '请输入位置描述'
					});
					return false;
				}

				return true;
			},
			getTimestampWithRandom() {
			    // 获取当前时间戳（以毫秒为单位）
			    const timestamp = Date.now();
			    // 生成一个 0 到 9999 之间的随机整数
			    const randomNum = Math.floor(Math.random() * 10000);
			    // 将随机数转换为 4 位字符串，不足 4 位时在前面补 0
			    const paddedRandomNum = String(randomNum).padStart(4, '0');
			    // 拼接时间戳和 4 位随机数
			    return `${timestamp}${paddedRandomNum}`;
			},
			submit() {
				let show = this.check()
				if (show == false) {
					return
				}
				this.ruleForm.shopPhotos = this.ruleForm.shopPhotos.map(item => {
					return item.replace(this.$img, '');
				})


				this.ruleForm.applicationTime = this.currentTime()
				let info = {
					...this.ruleForm,
					shopPhotos: this.ruleForm.shopPhotos.join(','),
				}

				if (this.edit) {
					this.$http.sendRequest('/cereAssetShopInformation/edit', 'POST', info, 1).then(res => {
						uni.showToast({
							title: '修改成功',
							icon: 'none',
						});
						// uni.switchTab({
						// 	url: '/pages/my/my'
						// });
						uni.navigateBack({
							delta: 1
						});
					}).catch(err => {
						console.log(err)
						//请求失败
					})
				} else {
					if(this.ids == ''){
						info.storePrimaryKey = this.getTimestampWithRandom()
					}
					// console.log(this.ids,info.storePrimaryKey,'ids')
					// return
					this.$http.sendRequest('/cereAssetShopInformation/add', 'POST', info, 1).then(res => {
						uni.showToast({
							title: '提交成功',
							icon: 'none',
						});
						// uni.switchTab({
						// 	url: '/pages/my/my'
						// });
						uni.navigateBack({
							delta: 1
						});
					}).catch(err => {
						console.log(err)
						//请求失败
					})
				}


			},
			// 获取时间
			currentTime() {
				let date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1; // 月份从0~11，所以加一
				let day = date.getDate();
				let hours = date.getHours();
				let minutes = date.getMinutes();
				let seconds = date.getSeconds();

				// 为月、日、时、分、秒添加前导零（如果需要）
				month = month < 10 ? '0' + month : month;
				day = day < 10 ? '0' + day : day;
				hours = hours < 10 ? '0' + hours : hours;
				minutes = minutes < 10 ? '0' + minutes : minutes;
				seconds = seconds < 10 ? '0' + seconds : seconds;

				// 拼接日期和时间字符串
				let strDate = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
				return strDate;
			},
			onsuccess1(e, file, fileList, ziduan) {

				let index = 0
				if (this.ruleForm.shopPhotos.length != 0) {
					index = this.ruleForm.shopPhotos.length
				}

				uni.uploadFile({
					url: this.$upload, // 仅为示例，请替换为您的服务器上传接口
					filePath: e[index].url,
					name: 'file', // 后端接收的文件参数名
					formData: {
						filePath: 'xcx', // 其他表单数据
					},
					success: (uploadFileRes) => {


						this.ruleForm.shopPhotos.push(this.$img + JSON.parse(uploadFileRes.data).data)

						uni.showToast({
							title: '上传成功',
							icon: 'success',
						});
					},
					fail: (err) => {
						console.log('上传失败', this.fist)

						uni.showToast({
							title: '上传失败',
							icon: 'none',
						});
					},
				});
			},
			removeList(e, file, fileList) {
				this.ruleForm.shopPhotos.splice(e, 1)
				this.fist.splice(e, 1)
			}
		}
	}
</script>

<style scoped lang="scss">
	.page {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		background-color: #f6f6f6;
	}

	.add-list {
		padding: 0 4%;
		background-color: #FFFFFF;
		border-radius: 20rpx;
		margin-top: 20rpx;
		width: 100%;

		.list {
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 100%;
			height: 100rpx;
			border-bottom: 2rpx solid #f6f6f6;

			.title {
				display: flex;
				align-items: center;
				height: 100%;

				text {
					font-size: 26rpx;
					color: #222222;
				}

				.star {
					color: red;
				}
			}

			.content {
				display: flex;
				align-items: center;
				text-align: right;

				input {
					width: 100%;
					color: #222222;
					font-size: 26rpx;
					padding-top: 6rpx;
					/* #ifdef MP */
					padding-top: 5rpx;
					/* #endif */
				}

				image {
					width: 20rpx;
					height: 20rpx;
					margin-left: 10rpx;
					/* #ifdef MP */
					margin-top: 5rpx;
					/* #endif */
				}
			}
		}
	}

	/* 保存按钮 */
	.page-footer {
		position: fixed;
		left: 0;
		bottom: 0;
		display: flex;
		z-index: 999;
		width: 100%;
		height: 100rpx;
		background-color: #FFFFFF;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		padding: 0 20px;
	}

	.feedback-data {
		width: 100%;
		padding-bottom: 20rpx;
		border-bottom: 2rpx solid #f6f6f6;

		.title {
			display: flex;
			align-items: center;
			height: 100rpx;

			text {
				font-size: 26rpx;
				color: #222222;
			}

			.star {
				color: red;
			}
		}

		.voucher-img {
			display: flex;
			align-items: center;

			.voucher-list {
				width: 33%;
				height: 100%;

				image {
					width: 160rpx;
					height: 160rpx;
					border-radius: 10rpx;
				}
			}
		}
	}
</style>