rtim/pages/expert/collectionEdit.vue

<template>
	<view class="es-pt-24 es-pl-24 es-pr-24 es-pb-24">
		<u--form ref="uForm" :rules="rules" :model="form" labelPosition="top" labelWidth="auto" errorType="toast">
			<view class="box">
				<u-form-item required label="合集图片" prop="name">
					<view class="upload" @tap="chooseImage">
						<u-icon class="upload-icon" name="plus" size="40" v-if="!form.coverUrl"></u-icon>
						<image :src="form.coverUrl" v-else mode=""></image>
					</view>
				</u-form-item>
			</view>
			<view class="box">
				<u-form-item required label="合集名称" prop="name">
					<u--textarea style="padding: 9px 0;" v-model="form.title" border="none"
						placeholder="一个好的合集名称，更能吸引人哦~" autoHeight count maxlength="20"></u--textarea>
				</u-form-item>
			</view>
			<view class="box">
				<u-form-item label="合集简介" prop="desc">
					<u--textarea style="padding: 9px 0;" v-model="form.description" placeholder="简单介绍下你的合集" count
						maxlength="50" border="none"></u--textarea>
				</u-form-item>
			</view>
			<view class="box">
				<u-form-item label="合集标签" prop="desc">
					<u--textarea style="padding: 9px 0;" v-model="form.tags" placeholder="请填写标签，多个用英文逗号隔开" count
						maxlength="50" border="none"></u--textarea>
				</u-form-item>
			</view>
		</u--form>
		<button class="del-btn" @tap="collectionDel" v-if="form.collectionId">删除合集</button>
	</view>
</template>

<script>
	import {
		videoCollectionAdd,
		videoCollectionUpd,
		deleteCollection
	} from "@/api/expert.js"
	export default {
		data() {
			return {
				form: {
					collectionId: '',
					title: '',
					description: '',
					coverUrl: '',
					talentId: uni.getStorageSync('expertInfo').talentId || '',
					status: 1,
					tags: ''
				},
				rules: {},
			}
		},
		onLoad(option) {
			uni.setNavigationBarTitle({
				title: '创建合集'
			});
			const collectionData = uni.getStorageSync('collectionData')
			if (collectionData) {
				uni.setNavigationBarTitle({
					title: '编辑合集'
				});
				this.form.collectionId = collectionData.collectionId
				this.form.title = collectionData.title
				this.form.description = collectionData.description || ''
				this.form.coverUrl = collectionData.coverUrl || ''
				this.form.talentId = collectionData.talentId
				this.form.tags = collectionData.tags || ''
			}
		},
		async onNavigationBarButtonTap(e) {
			await this.collectionAdd()
		},
		methods: {
			async collectionDel() {
				uni.showModal({
					title: "删除合集",
					content: "合集删除后，合集将不存在，确定要删除吗？",
					confirmText: "确定",
					confirmColor: "#ff5c03",
					success: async (result) => {
						console.log(222,this.form.collectionId);
						const res = await deleteCollection(this.form.collectionId)
						if (res.code == 200) {
							uni.showToast({
								title: '删除成功！',
							})
							setTimeout(() => {
								uni.navigateBack()
							}, 1000)
						}
					},
				})
			},
			async collectionAdd() {
				if (!this.form.coverUrl) {
					return uni.showToast({
						title: '请上传合集图片！',
						icon: 'none'
					})
				}
				if (!this.form.title) {
					return uni.showToast({
						title: '请填写合集名称！',
						icon: 'none'
					})
				}
				let res = ''
				if (this.form.collectionId) {
					res = await videoCollectionUpd(this.form)
				} else {
					res = await videoCollectionAdd(this.form)
				}
				if (res.code == 200) {
					uni.showToast({
						title: '添加成功！',
					})
					setTimeout(() => {
						uni.navigateBack()
					}, 1000)
				}else{
					uni.showToast({
						icon:'none',
						title: res.msg,
					})
				}
			},
			async chooseImage() {
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: ['album', 'camera'],
					success: (res) => {
						uni.uploadFile({
							url: uni.getStorageSync('requestPath') + '/app/common/uploadOSS',
							filePath: res.tempFilePaths[0],
							name: 'file',
							formData: {
								'user': 'test'
							},
							success: (uploadFileRes) => {
								let data = JSON.parse(uploadFileRes.data)
								this.form.coverUrl = data.url;
							}
						});
					}
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	.box {
		background-color: #fff;
		border-radius: 16rpx;
		overflow: hidden;
		padding: 0 24rpx 24rpx 42rpx;
		margin-bottom: 24rpx;
	}

	.del-btn {
		margin-top: 50rpx;
		height: 92rpx;
		color: #FF5C03 !important;
		border-radius: 12rpx;
		font-weight: 400;
		font-size: 34rpx;
		border: 1px solid #FF5C03;
		line-height: 92rpx;
		text-align: center;
		background-color: transparent !important;

		&::after {
			border: none;
		}
	}

	.upload {
		width: 160rpx;
		height: 160rpx;

		image {
			width: 100%;
			height: 100%;
			border-radius: 16rpx;
		}
	}

	.upload-icon {
		width: 160rpx;
		height: 160rpx;
		border: 1rpx dashed #999999;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>