MinNan/chuanCheng_fenbao/touGao.vue

<template>
	<view class="body" style="background-color: #efefef">
		<u-navbar :autoBack="true" title="发布" bgColor="rgba(255,255,255,0)" :placeholder="true" titleStyle="font-weight:bold;color:#121212"></u-navbar>
		<view class="nav_fabu">
			<view class="nav_left" @click="releaseBtn(0)">
				<view class="left_icon"><uni-icons type="compose" size="20" color=" #ffffff"></uni-icons></view>
				<text>发文章</text>
			</view>
			<view class="nav_right" @click="releaseBtn(1)">
				<view class="left_icon" style="background-color: #4e7198"><uni-icons type="videocam" size="20" color=" #ffffff"></uni-icons></view>
				<text>发视频</text>
			</view>
			<view class="uptriangle" :class="{ uptriangle_active: releaseTab == 1, uptriangle: releaseTab == 0 }"></view>
		</view>
		<!-- 上传发布组件 -->
		<view style="margin: 20rpx 0 20rpx 0">
			<u--input v-model.trim="titleVal" customStyle="background-color: #ffffff;height: 105rpx;" placeholder="请填写标题" border="surround" clearable></u--input>
		</view>

		<view class="box">
			<!-- 上传照片 -->
			<view style="margin-left: 56rpx" v-if="releaseTab == 0">
				<view class="sc_box">
					<text class="sc_tp">请上传图片</text>
					<text class="sc_tp">{{ uploadNumber + '/' + 9 }}</text>
				</view>
				<u-upload
					width="200rpx"
					height="200rpx"
					:maxCount="9"
					:deletable="true"
					:fileList="fileList1"
					@afterRead="afterRead"
					@delete="deletePic"
					name="1"
					multiple
				></u-upload>
			</view>
			<!-- 上传视频 -->
			<view style="margin-left: 56rpx" v-if="releaseTab == 1">
				<view class="sc_box">
					<text class="sc_tp">请上传视频</text>
				</view>
				<u-upload
					width="200rpx"
					height="200rpx"
					:fileList="fileList2"
					@afterRead="afterRead"
					@delete="deletePic"
					name="2"
					multiple
					:maxCount="10"
					accept="video"
				></u-upload>
			</view>
			<view class="" style="background-color: #efefef; height: 20rpx; width: 100%"><!-- 分割背景 --></view>
			<view class="banxin" style="background-color: #ffffff; margin-top: 20rpx">
				<u--textarea v-model.trim="textVal" placeholder="请输入内容"></u--textarea>
			</view>
			<!-- 分区 -->
			<u-popup :show="showTanCeng" mode="bottom" @close="close" bgColor="#efefef">
				<view class="show_box">
					<view class="" style="display: flex; justify-content: space-between">
						<text @click="showTanCeng = false">取消</text>
						<text @click="showTanCeng = false" class="box_ok">确认</text>
					</view>
					<view class="box_fenqu" @click="show = true">
						<text>选择投稿类型</text>
						<view style="display: flex">
							<text style="color: #999999; font-size: 28rpx">{{ typeName }}</text>
							<uni-icons color="#999999" type="forward" size="20"></uni-icons>
						</view>
					</view>
					<!-- 添加标签 -->
					<view class="box_tj">
						<text style="color: #999999; font-size: 28rpx">选择内容类型</text>
						<view class="tag_box">
							<view class="" v-for="(item, index) in radios" :key="index">
								<u-tag size="mini" :text="item.name" :plain="!item.checked" shape="circle" type="warning" :name="index" @click="radioClick"></u-tag>
							</view>
						</view>
					</view>

					<u-picker
						title="选择投稿类型"
						:show="show"
						@close="show = false"
						ref="uPicker"
						@cancel="show = false"
						keyName="name"
						:closeOnClickOverlay="true"
						:columns="columns"
						@confirm="confirm"
					></u-picker>
				</view>
			</u-popup>
			<view class="" style="background-color: #efefef; height: 20rpx; width: 100%"><!-- 分割背景 --></view>
			<view class="fq_box" @click="fenquBtn">
				<text>选择投稿类型</text>
				<view class="bq_box">
					<u-tag size="mini" shape="circle" text="文物" type="warning"></u-tag>
					<u-tag size="mini" shape="circle" text="非遗" type="success"></u-tag>
					<u-tag size="mini" shape="circle" text="民俗" type="error"></u-tag>
					<u-icon name="arrow-right" color="#666666" size="16"></u-icon>
				</view>
			</view>

			<!-- 评论 -->
			<view class="" style="background-color: #efefef; height: 20rpx; width: 100%"></view>

			<view class="queren" @click="isOk">确认发布</view>
		</view>
	</view>
</template>

<script>
let that;
export default {
	data() {
		return {
			releaseTab: 0,
			radios: [
				{
					name: '文章',
					id: 1,
					checked: true
				},
				{
					name: '视频',
					id: 2,
					checked: false
				},
				{
					name: '音频',
					id: 3,
					checked: false
				},
				{
					name: '相册',
					id: 4,
					checked: false
				}
			],
			model_id: '' /* 投稿模型id */,
			typeId: 1 /* 投稿内容类型id */,
			main_body_column_id: '' /* 投稿栏目id */,
			typeName: '' /* 选中的类型 */,
			closeTag: true,
			showTanCeng: false,
			show: false,
			columns: [],
			titleVal: '',
			textVal: '',
			// switchval: '',
			// 上传的图片
			fileList1: [
				// {
				// 	url: 'https://huli-app.wenlvti.net/app_static/minnanhun/image/shouyeTJ.png'
				// },
				// {
				// 	url: 'https://huli-app.wenlvti.net/app_static/minnanhun/image/cs_shouye_tp.png'
				// }
			],
			// 上传的视频
			fileList2: []
		};
	},
	onLoad() {
		that = this;
		this.main_body_id = this.$db.get('main_body_id');
		this.getColumnList();
	},
	computed: {
		uploadNumber() {
			return this.fileList1.length;
		}
	},
	methods: {
		getColumnList() {
			this.$api.getColumnList(
				{
					main_body_id: this.main_body_id,
					// 暂时传2
					model_id: '2'
				},
				function (res) {
					// console.log(res, 565656);
					let aa = [];
					aa.push(res.data);
					// console.log(aa, 13131313);
					that.columns = aa;
				}
			);
		},
		releaseBtn(i) {
			this.releaseTab = i;
		},
		fenquBtn() {
			// this.show = true;
			this.showTanCeng = true;
		},

		confirm(e) {
			console.log('confirm', e.value);
			this.model_id = e.value[0].model_id;
			this.main_body_column_id = e.value[0].id;
			this.typeName = e.value[0].name;
			this.show = false;
		},

		// 删除图片
		deletePic(event) {
			console.log(event, 'event');
			this[`fileList${event.name}`].splice(event.index, 1);
		},
		// 新增图片
		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++;
			}
		},
		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);
					}
				});
			});
		},
		radioClick(name) {
			this.radios.map((item, index) => {
				item.checked = index === name ? true : false;
			});
			this.typeId = this.radios[name].id;
		},
		// 投稿
		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('投稿成功');
						} else {
							that.$common.errorToShow('投稿失败请稍后在试');
							console.log(that.fileList1, 6666);
						}
					}
				);
			}
		},
		close() {
			this.showTanCeng = false;
			// console.log('close');
		}
	}
};
</script>

<style>
.uptriangle {
	position: absolute;
	top: 120rpx;
	left: 170rpx;
	width: 0px;
	height: 0px;
	border: 30rpx solid transparent;
	border-top-color: #ca5642;
}
.uptriangle_active {
	position: absolute;
	top: 120rpx;
	left: 510rpx;
	width: 0px;
	height: 0px;
	border: 30rpx solid transparent;
	border-top-color: #ca5642;
}
.banxin {
	margin: 0 32rpx 0 32rpx;
}
.u-upload__button.data-v-69e2a36e {
	background-color: #efefef !important;
}
.u-upload__deletable.data-v-69e2a36e {
	width: 35rpx !important;
	height: 35rpx !important;
}
.u-transition {
	margin-right: 12rpx;
}
.tag_box {
	display: flex;
	margin-top: 20rpx;
}

.nav_fabu {
	position: relative;
	display: flex;
	justify-content: space-evenly;
	background-color: #ca5642;
}
.nav_left {
	display: flex;
	justify-content: start;
	align-items: center;
	width: 282rpx;
	height: 123rpx;
	font-size: 32rpx;
	background: #f4f4f9;
	border: 6px solid #ca5642;
	border-radius: 20rpx;
}
.left_icon {
	width: 50rpx;
	height: 50rpx;
	text-align: center;
	line-height: 50rpx;
	border-radius: 50%;
	margin-left: 50rpx;
	background-color: #ca5642;
}
.nav_right {
	display: flex;
	justify-content: start;
	align-items: center;
	width: 282rpx;
	height: 123rpx;
	font-size: 32rpx;
	background: #f4f4f9;
	border: 6px solid #ca5642;
	border-radius: 20rpx;
}
.right_icon {
	width: 50rpx;
	height: 50rpx;
	margin-left: 50rpx;
	border-radius: 50%;
	background-color: #4e7198;
}

.sc_box {
	display: flex;
	justify-content: space-between;
	margin: 0 55rpx 40rpx 10rpx;
	border-bottom: 1px #dedede solid;
	height: 60rpx;
}
.sc_tp {
	font-size: 30rpx;
	color: #000000;
}
.fq_box {
	display: flex;
	justify-content: space-between;
	margin: 0 32rpx 0 32rpx;
	height: 105rpx;
	align-items: center;
}
.box {
	background-color: #ffffff;
	padding-top: 20rpx;
	padding-bottom: 30rpx;
}
.bq_box {
	display: flex;
	align-items: center;
}
.pl_box {
	display: flex;
	justify-content: space-between;
	margin: 0 32rpx 0 32rpx;
	height: 105rpx;
	align-items: center;
}
.show_box {
	width: 100%;
	height: 500rpx;
	padding: 20rpx;
}
.queren {
	height: 70rpx;
	background-color: #ca5642;
	border-radius: 35rpx;
	font-size: 30rpx;
	color: #ffffff;
	text-align: center;
	line-height: 68rpx;
	margin: 0 32rpx 0 32rpx;
}
.box_ok {
	line-height: 50rpx;
	text-align: center;
	color: #ffffff;
	width: 93rpx;
	height: 52rpx;
	background: #ca5642;
	border-radius: 26rpx;
}
.box_fenqu {
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-radius: 20rpx;
	margin-top: 20rpx;
	height: 105rpx;
	background-color: #ffffff;
	font-size: 30rpx;
	padding: 20rpx;
}
.box_tj {
	height: 300rpx;
	border-radius: 20rpx;
	background-color: #ffffff;
	margin-top: 20rpx;
	padding: 20rpx;
}
</style>