qjd-shell-uniapp/pagesMedia/videoForm.vue

<template>
	<view class="container">
		<u-cell-group class="form-info" :border="false">
			<u-field label="视频名称" placeholder="请输入视频名称" label-width="180" v-model="videoInfo.videoName"></u-field>
			<u-cell-item title="请上传视频" :arrow="false" v-if="type == 'add'">
				<view slot="label">
					<image class="video-img" :src="videoImg" v-show="videoImg" @tap="chooseVideoImage"></image>
					<view class="upload-video" @tap="chooseVideoImage" v-if="!videoImg">
						<u-icon name="plus" size="40" v-if="!videoInfo.mediaFilePath"></u-icon>
						<view class="u-add-tips" style="margin-top: 6px;text-align: center;">{{videoInfo.mediaFilePath ? '上传成功，单击替换视频' : '选择视频'}}</view>
					</view>
				</view>
			</u-cell-item>
			<u-cell-item title="请上传视频海报" :arrow="false" v-if="type == 'add'">
				<view slot="label">
					<u-upload :action="uploadUrl" :file-list="defaultList" :form-data="uploadData" @on-success="uploadSuccess"
					 @on-error="uploadError" @on-remove="uploadRemove" max-count="1"></u-upload>
				</view>
			</u-cell-item>
			<u-cell-item title="绑定商品（可多选）" @click="popupShow = true" class="good-arrow">
				<view slot="label">
					<view class="good-card" v-for="(item, index) in goodList.filter(site => site.check)" :key="index">
						<image class="goods-img" :src="item.imgPath"></image>
						<view class="good-info">
							<view class="good-name">{{item.productName}}</view>
							<view class="good-text">销量：{{item.sellCount}}</view>
							<view class="good-price">
								<text class="goods-spec">￥{{item.bizPrice}}/{{item.unit}}</text>
								<text class="goods-original">原价:{{item.originalPrice}}</text>
							</view>
						</view>
					</view>
				</view>
			</u-cell-item>
		</u-cell-group>
		<view class="form-handle">
			<u-button type="success" shape="circle" :ripple="true" @click="submitData" :disabled="getPermit()" class="handle-custom">提交</u-button>
		</view>
		<u-popup v-model="popupShow" mode="bottom" closeable border-radius="30">
			<scroll-view scroll-y="true" class="good-select-box">
				<view class="select-good-row" v-for="(item, index) in goodList" :key="index" @click.native.stop="setCheck(item)">
					<view class="good-check">
						<view class="iconfont" :class="item.check ? 'iconqueding' : 'iconfeigouxuan'"></view>
					</view>
					<view class="good-card" style="width: calc(100% - 60px);">
						<image class="goods-img" :src="item.imgPath"></image>
						<view class="good-info">
							<view class="good-name">{{item.productName}}</view>
							<view class="good-text">销量：{{item.sellCount}}</view>
							<view class="good-price">
								<text class="goods-spec">￥{{item.bizPrice}}/{{item.unit}}</text>
								<text class="goods-original">原价:{{item.originalPrice}}</text>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
			<view class="good-select-custom-box">
				<u-button type="success" shape="circle" :ripple="true" @click="popupShow = false" class="good-select-custom">确认</u-button>
			</view>
		</u-popup>
		<u-top-tips ref="uTips"></u-top-tips>
	</view>
</template>

<script>
	const NET = require('@/utils/request')
	const API = require('@/config/api')
	export default {
		data() {
			return {
				type: 'add',
				videoId: '',
				videoInfo: {
					videoName: '',
					mediaFilePath: '',
				},
				productIds: '',
				videoImg: '',
				uploadData: {
					folderId: 0,
				},
				uploadUrl: '',
				fileList: [],
				defaultList: [],
				goodList: [],
				popupShow: false,
			}
		},
		onLoad(options) {
			this.uploadUrl = API.uploadFile
			this.type = options.type
			if (this.type == 'edit') {
				this.videoInfo.videoId = options.videoId
				this.getDetail()
			}
			NET.request(API.getVideoGoods, {}, 'GET').then(res => {
				res.data.forEach(site => {
					site.check = this.productIds && this.productIds.indexOf(site.productId) != -1 ? true : false
				})
				this.goodList = res.data
			}).catch(res => {
				this.$refs.uTips.show({
					title: '获取可绑定商品失败',
					type: 'warning',
				})
			})
		},
		onReady() {},
		methods: {
			//  切换选择状态
			setCheck(item) {
				item.check = !item.check
			},
			//  上传视频
			chooseVideoImage() {
				uni.chooseVideo({
					count: 1,
					sourceType: ['camera', 'album'],
					success: (res) => {
						console.log(res)
						this.videoImg = res.thumbTempFilePath
						uni.uploadFile({
							url: API.uploadFile,
							filePath: res.tempFilePath,
							name: 'file',
							formData: this.uploadData,
							success: (uploadFileRes) => {
								let resData = JSON.parse(uploadFileRes.data)
								this.videoInfo.mediaFilePath = resData.data.url
								this.$refs.uTips.show({
									title: '文件上传成功',
									type: 'success',
								})
							}
						});
					}
				});
			},
			//  获取详情
			getDetail() {
				NET.request(API.getVideoDetail, {
					videoId: this.videoInfo.videoId
				}, 'GET').then(res => {
					this.videoInfo.videoName = res.data.videoName
					res.data.products = res.data.products.map(site => {
						return site.productId
					}).join(',')
					if (this.goodList.length && res.data.products) {
						this.goodList.forEach(site => {
							site.check = res.data.products.indexOf(site.productId) != -1
						})
					} else {
						this.productIds = res.data.products ? res.data.products : []
					}
				}).catch(res => {
					this.$refs.uTips.show({
						title: '获取详情失败',
						type: 'warning',
					})
				})
			},
			//  文件上传成功回调
			uploadSuccess(res, index, lists, name) {
				this.fileList.push(res.data.url)
				this.$refs.uTips.show({
					title: '文件上传成功',
					type: 'success',
				})
				return true
			},
			//  文件上传失败回调
			uploadError(res, index, lists, name) {
				this.$refs.uTips.show({
					title: '文件上传失败',
					type: 'warning',
				})
			},
			//  移除文件回调
			uploadRemove(index, lists, name) {
				this.fileList.splice(index, 1)
			},
			//  检查必填项
			getPermit() {
				if (!this.videoInfo.videoName || !this.goodList.filter(site => site.check).length) {
					return true
				}
				if (this.type == 'add' && (!this.videoInfo.mediaFilePath || !this.fileList.length)) {
					return true
				}
				return false
			},
			//  提交
			submitData() {
				if (this.type == 'add') {
					NET.request(API.addVideo, {
						...this.videoInfo,
						coverFilePath: this.fileList[0],
						coverFileId: 0,
						mediaFileId: 0,
						productIds: this.goodList.filter(site => site.check).map(site => {
							return site.productId
						})
					}, 'POST').then(res => {
						this.$refs.uTips.show({
							title: '新增短视频成功',
							type: 'success',
						})
						setTimeout(() => {
							uni.navigateBack()
						}, 1000)
					}).catch(res => {
						this.$refs.uTips.show({
							title: '新增短视频失败',
							type: 'warning',
						})
					})
				} else {
					NET.request(API.editVideo, {
						...this.videoInfo,
						productIds: this.goodList.filter(site => site.check).map(site => {
							return site.productId
						})
					}, 'POST').then(res => {
						this.$refs.uTips.show({
							title: '编辑短视频成功',
							type: 'success',
						})
						setTimeout(() => {
							uni.navigateBack()
						}, 1000)
					}).catch(res => {
						this.$refs.uTips.show({
							title: '编辑短视频失败',
							type: 'warning',
						})
					})
				}
			},
		},
	}
</script>

<style lang="less" scoped>
	page {
		width: 100%;
		height: 100%;
	}

	.container {
		width: 100%;
		height: 100%;
		float: left;
		box-sizing: border-box;
		padding-bottom: 60px;
		overflow-y: auto;

		.form-info {
			width: 100%;
			float: left;

			/deep/.u-label-text {
				color: #333333;
			}

			/deep/.u-cell_title {
				color: #333333;
			}

			.video-img {
				width: 100px;
				height: 100px;
				border-radius: 5px;
				object-fit: cover;
			}

			.upload-video {
				width: 100px;
				height: 100px;
				background: #f4f5f6;
				margin: 5px;
				color: #606266;
				display: flex;
				justify-content: center;
				align-items: center;
				flex-direction: column;
			}

			.good-arrow {
				/deep/.u-cell__right-icon-wrap {
					position: absolute;
					top: 18px;
					right: 10px;
				}

				/deep/.u-cell_title {
					width: calc(100% - 10px) !important;
				}
			}
		}

		.form-handle {
			width: 100%;
			height: 60px;
			position: fixed;
			z-index: 10;
			padding: 10px 15px 20px 15px;
			box-sizing: border-box;
			bottom: 0;
			background-color: #FFFFFF;
			border-top: 1px solid #EEEEEE;

			.handle-custom {
				background-color: #51A539;

				/deep/button {
					background-color: #56a83a;
				}

				/deep/.u-btn--success--disabled {
					background-color: #74bd60 !important;
				}
			}
		}

		.good-select-box {
			width: 100%;
			height: 400px;
			float: left;
			overflow-y: auto;
			padding: 40px 0 10px 0;
		}

		.good-select-custom-box {
			width: calc(100% - 30px);
			margin: 10px 15px;
			float: left;

			.good-select-custom {
				background-color: #51A539;

				/deep/button {
					background-color: #56a83a;
				}
			}
		}

		.select-good-row {
			width: 100%;
			height: 114px;
			float: left;
		}

		.good-check {
			width: 30px;
			height: 104px;
			float: left;
			line-height: 104px;
			margin-right: 10px;

			.iconfont {
				font-size: 40px;
				text-align: right;
				color: #51A539;
			}
		}

		.good-card {
			width: 100%;
			float: left;
			margin: 5px;
			background: #FFFFFF;
			border-radius: 15px;
			box-shadow: 0px 1px 5px 0px rgba(102, 102, 102, 0.43);
			padding: 12px;
			box-sizing: border-box;

			.goods-img {
				width: 80px;
				height: 80px;
				float: left;
				border-radius: 10px;
				object-fit: cover;
			}

			.good-info {
				width: calc(100% - 86px);
				height: 80px;
				float: right;

				.good-name {
					width: 100%;
					height: 40px;
					float: left;
					font-size: 15px;
					font-family: PingFang SC;
					color: #333333;
					line-height: 20px;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
					word-wrap: break-word;
				}

				.good-price {
					width: 100%;
					height: 20px;
					float: left;
					line-height: 20px;
					font-family: PingFang SC;
					white-space: nowrap;
					margin: 3px 0 3px 0;

					.goods-spec {
						font-size: 15px;
						color: #52A63A;
						margin-right: 6px;
					}

					.goods-original {
						font-size: 12px;
						text-decoration: line-through;
						color: #A67954;
					}
				}
			}
		}
	}
</style>