WenWuGuanJia/components/TouGao/TouGao.vue

<template>
	<view class="box">
		<view class="ban_box">
			<view class="tit_box">
				<view class="title">{{ titList.title }}:</view>
				<u--input customStyle="background-color:#ffffff" placeholder="请输入标题" border="surround" v-model.trim="titVal"></u--input>
			</view>
			<view v-if="titList.typeVal" class="tit_box" @click="show = true">
				<view class="title">文章类型:</view>
				<view class="lx">
					<view :style="{ color: typesofs ? '#000' : '#c0c4cc' }">{{ typesofs ? typesofs : '请选择类型' }}</view>
					<u-icon name="arrow-down" color="#c0c4cc" size="20"></u-icon>
				</view>
			</view>
			<view class="tit_box" v-if="titList">
				<view class="title" style="margin-top: -120rpx">{{ titList.content }}:</view>
				<u--textarea v-model.trim="textVal" placeholder="请输入内容"></u--textarea>
			</view>
			<!-- 内容 -->
			<view v-if="titList.typeVal" class="tit_box">
				<view class="title" style="margin-top: -120rpx">文物价值:</view>
				<u--textarea v-model.trim="textVal2" placeholder="请输入内容"></u--textarea>
			</view>
		</view>
		<!-- 图片 -->
		<view class="" style="margin-top: 40rpx">
			<view class="" style="margin-left: 32rpx; margin-bottom: 20rpx">上传图片:{{ uploadNumber + '/' + 9 }}</view>
			<view class="">
				<!-- 上传照片 -->
				<view style="margin-left: 56rpx">
					<u-upload
						width="200rpx"
						height="200rpx"
						:maxCount="9"
						:deletable="true"
						:fileList="fileList1"
						@afterRead="afterRead"
						@delete="deletePic"
						name="1"
						multiple
					></u-upload>
				</view>
			</view>
		</view>
		<!-- 视频 -->
		<view class="" style="margin-left: 50rpx">
			<view style="margin: 20rpx 0 20rpx -15rpx">请上传视频:</view>

			<u-upload width="200rpx" height="200rpx" :fileList="fileList2" @afterRead="afterRead" @delete="deletePic" name="2" multiple :maxCount="10" accept="video"></u-upload>
		</view>
		<u-picker :show="show" @cancel="show = false" :columns="columns" @close="close" :closeOnClickOverlay="true" @confirm="confirm"></u-picker>
		<view @click="isOk" class="tg_box">{{ titList.okTit }}</view>
	</view>
</template>

<script>
export default {
	name: 'TouGao',
	props: {
		titList: {
			type: Object,
			default: () => {
				return {
					okTit: '投稿',
					title: '文章标题',
					content: '文章内容',
					typeVal: true
				};
			}
		}
	},
	data() {
		return {
			typesofs: '',
			titVal: '',
			textVal: '',
			textVal2: '',
			show: false,
			columns: [['古建筑', '近现代史迹', '古遗址']],
			// 上传的图片
			fileList1: [
				{
					url: 'https://huli-app.wenlvti.net/app_static/minnanhun/image/shouyeTJ.png'
				}
			]
		};
	},
	computed: {
		uploadNumber() {
			return this.fileList1.length;
		}
	},
	methods: {
		confirm(e) {
			console.log('confirm', e);
			this.typesofs = e.value[0];
			this.show = false;
		},
		async afterRead(event) {
			// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
			let lists = [].concat(event.file);
			let fileListLen = this[`fileList${event.name}`].length;
			lists.map((item) => {
				this[`fileList${event.name}`].push({
					...item,
					status: 'uploading',
					message: '上传中'
				});
			});
			for (let i = 0; i < lists.length; i++) {
				const result = await this.uploadFilePromise(lists[i].url);
				let item = this[`fileList${event.name}`][fileListLen];
				this[`fileList${event.name}`].splice(
					fileListLen,
					1,
					Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					})
				);
				fileListLen++;
			}
		},
		// 删除图片
		deletePic(event) {
			console.log(event, 'event');
			this[`fileList${event.name}`].splice(event.index, 1);
		},
		uploadFilePromise(url) {
			return new Promise((resolve, reject) => {
				let a = uni.uploadFile({
					url: 'https://mnhcdn.wenlvti.net/api/minnansoul/content/contribute', // 仅为示例，非真实的接口地址
					filePath: url,
					name: 'file',
					formData: {
						user: 'test'
					},
					success: (res) => {
						setTimeout(() => {
							resolve(res.data.data);
						}, 1000);
					}
				});
			});
		},
		// 投稿
		// isOk() {
		// 	let titleIsEmpty = this.titleVal === '';
		// 	let textIsEmpty = this.textVal === '';

		// 	// 先检查标题和内容是否为空
		// 	if (titleIsEmpty) {
		// 		that.$common.errorToShow('请填写投稿标题');
		// 		return false; // 遇到错误时提前返回，避免后续条件的判断
		// 	}

		// 	if (textIsEmpty) {
		// 		that.$common.errorToShow('请输入投稿内容');
		// 		return false;
		// 	}

		// 	// 再检查模型ID、类型ID和栏目ID
		// 	if (this.model_id === '' || this.main_body_column_id === '') {
		// 		that.$common.errorToShow('请选择投稿类型');
		// 		return false;
		// 	}

		// 	// 如果typeId是必须选择的，这里也要进行验证
		// 	if (this.typeId === '') {
		// 		that.$common.errorToShow('请选择内容类型');
		// 		return false;
		// 	} else {
		// 		this.$api.contribute(
		// 			{
		// 				main_body_id: this.main_body_id,
		// 				model_id: this.model_id,
		// 				main_body_column_id: this.main_body_column_id,
		// 				title: this.titleVal,
		// 				type: this.typeId,
		// 				content: this.titleVal
		// 			},
		// 			function (res) {
		// 				if (res.code == 1) {
		// 					that.$common.successToShow('投稿成功');
		// 					// console.log(res, 6666);
		// 				} else {
		// 					that.$common.errorToShow('投稿失败请稍后再试');
		// 				}
		// 			}
		// 		);
		// 	}
		// },
		close() {
			this.show = false;
		}
	}
};
</script>

<style>
.img {
	width: 100%;
	height: 100%;
	border-radius: 50%;
}
.fk_box {
	width: 90%;
	display: flex;
	justify-content: space-between;
	margin: auto;
	margin-top: 20rpx;
	font-size: 30rpx;
	color: #313131;
	text-align: center;
}
.jianyi {
	width: 170rpx;
	height: 60rpx;
	line-height: 58rpx;
	border: 2rpx solid #fadcb3;
	background-color: #fdf7ee;
	border-radius: 10rpx;
}
/deep/.u-input--radius.data-v-113bc24f,
.u-input--square.data-v-113bc24f {
	background-color: #ffffff !important;
}
/deep/.u-input.data-v-113bc24f {
	background-color: #ffffff !important;
}

.ban_box {
	width: 90%;
	margin: auto;
	margin-top: 40rpx;
}
.tit_box {
	width: 680rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 40rpx;
}
.title {
	margin-right: 10rpx;
	font-size: 30rpx;
	color: #313131;
}
.lx {
	display: flex;
	justify-content: space-between;
	width: 540rpx;
	height: 70rpx;
	background-color: #ffffff;
	border-radius: 10rpx;
	line-height: 70rpx;
	color: #c0c4cc;
	padding-left: 20rpx;
	padding-right: 20rpx;
}
.tg_box {
	width: 390rpx;
	height: 74rpx;
	margin: auto;
	margin-top: 40rpx;
	font-size: 34rpx;
	background-color: #f5c382;
	text-align: center;
	font-weight: bold;
	color: #313131;
	border-radius: 10rpx;
	line-height: 74rpx;
}
</style>