LocalLivingServicesUniapp/pages/store/advertising.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.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="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="booder-top">
						<view class="business-img ">
							<view class="uni-uploader__file" v-if="video">
								<view class="uploader_video">
									<video :src="video" class="video-container"></video>
									<cover-view class="delete-video-icon" @tap="delectVideo">
												<!-- <uni-icons class="icon iconfont icon-cuo" type="trash-filled" size="20"  color="#ffffff"></uni-icons> -->
										<cover-image class="delete-icon-img" src="/static/ad/close.png"></cover-image>
									</cover-view>
								</view>
							</view>
							<image v-else src="/static/store/upload2.png" mode="" @tap="chooseVideo()"></image>

						</view>
					</view>
					<view class="business-prompt">
						最多上传1个视频，大小不超过50M，建议宽高比9:16
					</view>
				</view>
				<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.photo[index]">
							<image :src="form.photo[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="form.photo.length < 20">
							<text class='cuIcon-cameraadd'></text>
						</view>
						
					</view> -->
					<shmily-drag-image v-model="form.photo" :number="20" :addImage="ChooseImage" :delImage="delImage"></shmily-drag-image>
					<view class="business-prompt">
						最多上传20张，每张大小不超过5M，建议宽高比9:16
					</view>
				</view>
			</view>
		</view>
		<view class="padding flex sub-bottom" style="justify-content: space-around;">
			<button class="cu-btn round line-gray shadow" @click="back()"
				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 {
				video: '',
				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.photo.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: {
			back() {
				uni.navigateBack()
			},
			 addImage() {
			      // 将图片地址添加到图片数组
			      this.list.push('http://web.shmily.ren/shmily-drag-image/static/4.jpg')
			    },
			    delImage(done) {
			      uni.showModal({
			        content: '是否删除?',
			        success: (res) => {
			          if(res.confirm) {
			            // 执行 done() 删除
			            done()
			          }
			        }
			      })
			    },
			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() {
				const remain = 20 - this.form.photo.length
				if (remain <= 0) {
					uni.showToast({ title: '最多20张图', icon: 'none' })
					return
				}
				uni.chooseImage({
					count: remain,
					sizeType: ['compressed'],
					sourceType: ['album'], //从相册选择
					success: (res) => {
						if (res) {
							console.log('上传图片', res)
							// this[type + 'Img'] = chooseImageRes.tempFilePaths[0];
							if(res.tempFilePaths && res.tempFilePaths.length > 0) {
								res.tempFilePaths.forEach(item => {
									uni.uploadFile({
										url: configService.apiUrl + '/sys/common/upload',
										filePath: item,
										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) => {
      			uni.showLoading({
      				title: '上传中...'
      			})
      			uni.uploadFile({
      				url: configService.apiUrl + '/sys/common/upload',
      				filePath: res.tempFilePath,
      				name: "file",
      				formData: {
      					'biz': 'temp',
      				},
      				success: (files) => {
      					uni.hideLoading()
      					let data = JSON.parse(files.data);
      					if (data.success) {
      						this.video = configService.apiUrl + '/' + data.message
      						uni.showToast({
      							title: '上传成功',
      							icon: 'success'
      						})
      					} else {
      						uni.showToast({
      							title: data.message || '上传失败',
      							icon: 'none'
      						})
      					}
      				},
      				fail: (err) => {
      					uni.hideLoading()
      					uni.showToast({
      						title: '上传失败',
      						icon: 'none'
      					})
      					console.error('视频上传失败', err)
      				}
      			})
      		}
      	})
      },
			sumbit() {
				let data = {
					merchantId: uni.getStorageSync(USER_INFO).merchantId,
					video: this.video,
					photo: this.form.photo.join(",")
				}
				console.log(this.form.photo)
				if (this.form.videoStatus == null) {
					this.$http.post('/merchant/LocalMerchantOperate/add', data).then(res => {
						if (res.data.code == 200) {
							uni.showToast({
								icon:'none',
								title:res.data.message || '成功'
							})
							setTimeout(()=>{
								uni.navigateBack({
									delta: 1 // 返回的页面数，默认为1
								})
							},1000)
						} else {
							uni.showToast({
								icon:'none',
								title:res.data.message
							})
							
						}
					})
				} else {
					this.$http.post('/merchant/LocalMerchantOperate/edit', {
						...data,
						id: this.form.videoId
					}).then(res => {
						if (res.data.code == 200) {
							uni.showToast({
								icon:'none',
								title:res.data.message || '成功'
							})
							setTimeout(()=>{
								uni.navigateBack({
									delta: 1 // 返回的页面数，默认为1
								})
							},1000)
						} 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;
		.customize {
			padding: 0 18upx 18upx;
			margin-bottom: 16rpx;
			background-color: #ffffff;
			border-radius: 16rpx;
			.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 {
			position: relative;
			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;
		z-index: 99;
	}

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

	.icon-delete-red {
		color: red;
	}

	.delete-video-icon {
		position: absolute;
		right: 0upx;
		top: 0upx;
		width: 40upx;
		height: 40upx;
		background-color: rgba(0, 0, 0, 0.4);
		border-radius: 0 0 0 10rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		z-index:9999;
	}

	.delete-icon-img {
		width: 24upx;
		height: 24upx;
	}

	.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;
		}
	}
</style>