LocalLivingServicesUniapp/pages/store/headPhoto.vue

<template>
	<view>
		<cu-custom bgColor="bg-fff" :isBack="true">
			<block slot="content" style="font-size: 36rpx;"> 商户形象</block>
		</cu-custom>
		<status v-if="form && form.headPhotoStatus !== null" :status="form.headPhotoStatus" :updateTime="form.headPhotoUpdateTime"
			:remark="form.headPhotoRemark"></status>
		<view class="tab-top" :style="form && form.headPhotoStatus == null ? 'margin-top: 14upx;' : 'margin-top: 144upx;'">
			<view class="borderRadiu">
				<view class="customize">
					<view class=" cu-form-group justify-between">
						<view class="content ">
							<text class="text-bold">门头照片</text>
							<i class="text-bg "></i>
						</view>
					</view>
					<view class="grid col-4 grid-square flex-sub booder-top">
						<view class="bg-img" v-for="(item, index) in form.photo" :key="index" @tap="ViewImage"
							:data-url="form.headPhoto[index]">
							<image :src="item" mode="aspectFill"></image>
							<view class="cu-tag bg-red" @tap.stop="DelImg" :data-index="index">
								<text class='cuIcon-close'></text>
							</view>
						</view>
						<view class="grid col-4 grid-square flex-sub booder-top" >
							<view class="solids" @tap="ChooseImage" >
								<text class='cuIcon-cameraadd'></text>
							</view>
						</view>
						
					</view>
					
					
					<view class="business-prompt">
						门店照片需包含完整的门店入口和招牌名称，建议现场拍摄门头照;最多可上传10张，支持格式bmp、png、jpeg、jpg，单个图片不超过5MB，建议宽高比7:5
					</view>
				</view>
			</view>
		</view>
		<view class="padding flex sub-bottom" style="justify-content: space-around;">
			<button class="cu-btn round line-gray shadow" @click="$Router.push({ name: 'settings' })"
				style="width: 205rpx;">取消</button>
			<button style="width:443rpx;background: linear-gradient( 90deg, #77B6FF 0%, #449AFF 100%);border-radius:53rpx ;"
				class="cu-btn bg-blue round " @click="sumbit">提交审核</button>
		</view>
	</view>
</template>
<script>
	import configService from '../../common/service/config.service'
	import {
		USER_INFO
	} from "@/common/util/constants"
	import status from "./components/status.vue"

	export default {
		components: {
			status
		},
		data() {
			return {
				photoList: [],
				form: {},
				src: '',
				cameraList: [{
						value: 'back',
						name: '后置摄像头',
						checked: 'true'
					},
					{
						value: 'front',
						name: '前置摄像头'
					},
				],
				businessData: [],
			}
		},
		async onLoad(data) {
			if (data.params) {
				let obj = JSON.parse(decodeURIComponent(data.params));
				// this.video = obj.video ? obj.video : ''
				obj.photo = obj.photo ? obj.headPhoto.split(',').filter(id => id !== '') : []
				this.form = obj
				
			}

		},
		async onShow() {
			let res = await this.$http.get('/merchant/localMerchantTime/list?merchantId=' + uni.getStorageSync(USER_INFO)
				.merchantId, )
			if (res.data.success) {
				this.businessData = res.data.result
			} else {
				uni.showToast({
					icon:'none',
					title:res.data.message
				})
			}
		},
		methods: {
			hoursChange(index) {
				const queryString = encodeURIComponent(JSON.stringify({
					index,
					arr: this.businessData
				}))
				uni.navigateTo({
					url: `/pages/store/addHours?params=${queryString}`
				})

			},
			DelImg(e) {
				
				uni.showModal({
					title: '提示',
					content: '确定要删除？',
					cancelText: '取消',
					confirmText: '确定',
					success: res => {
						if (res.confirm) {
							console.log(this.form)
							// 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: ['camera','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) {
										let temp = this.form.headPhoto.split(',')
										if (this.form.headPhoto.split(',').length > 0) {
											// this.photoList = this.photoList.concat(res.tempFilePaths)
											this.form.photo.push(configService.apiUrl + '/' + data.message)
											this.form.headPhoto+(configService.apiUrl + '/' + data.message)
											temp.push(configService.apiUrl + '/' + data.message)
											 this.form.headPhoto = temp.join(',')
											console.log(this.form.headPhoto)
										} else {
												console.log('22222')
											// this.photoList =res.tempFilePaths
											this.form.headPhoto = [configService.apiUrl + '/' + data.message]
										}
									}
								}
							})
						}

					}
				});
			},
			ViewImage(e) {
				uni.previewImage({
					urls: this.form.headPhoto,
					current: e.currentTarget.dataset.url
				});
			},
			sumbit() {
				let data = {
					merchantId: uni.getStorageSync(USER_INFO).merchantId,
					headPhoto: this.form.headPhoto,
					id:this.form.headPhotoId
				}
				if (this.form.headPhotoStatus == null) {
					this.$http.post('merchant/localMerchantHeadPhoto/add', data).then(res => {
						if (res.data.success) {
							uni.showToast({
								icon:'none',
								title:'提交成功'
							})
							uni.navigateBack({
								delta: 1 // 返回的页面数，默认为1
							})
						} else {
							uni.showToast({
								icon:'none',
								title:res.data.message
							})
						}
					})
				} else {
					this.$http.post('merchant/localMerchantHeadPhoto/edit',data).then(res => {
						if (res.data.success) {
							uni.showToast({
								icon:'none',
								title:'提交成功'
							})
							uni.navigateBack({
								delta: 1 // 返回的页面数，默认为1
							})
						} else {
							uni.showToast({
								icon:'none',
								title:res.data.message
							})
						}
					})
				}

			},
			delClick(val) {
				this.$http.delete('/merchant/localMerchantTime/delete?id=' + val.id).then(res => {
					if (res.data.success) {
						uni.showToast({
							icon:'none',
							title: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 {
									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;
	}

	::v-deep .cu-custom {
		border: none !important;
	}

	.tab-top {
		padding: 0 26upx;
		padding-bottom: 130upx
	}

	.progress-status {
		position: fixed;
		width: 100%;
		z-index: 9999;
		background: #FFFFFF;
		border: none;

		.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: 20rpx;
			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;
		}
	}
	.col-4{
		width: auto;
	}
</style>