cunShiGuan/index_fenbao/faBuWenZhang/faBuWenZhang.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">
				<view class="left_icon"></view>
				<text>发文章</text>
			</view>
			<view class="nav_right">
				<view class="right_icon"></view>
				<text>发文章</text>
			</view>
		</view>
		<!-- 上传发布组件 -->
		<view class="" style="margin-bottom: 20rpx">
			<u--input v-model="titleVal" customStyle="background-color: #ffffff;height: 105rpx;" placeholder="请填写标题" border="surround" clearable></u--input>
		</view>

		<view class="box">
			<view class="sc_box">
				<text class="sc_tp">请上传图片</text>
				<text class="sc_tp">{{ uploadNumber + '/' + 9 }}</text>
			</view>
			<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 class="" style="background-color: #efefef; height: 20rpx; width: 100%"><!-- 分割背景 --></view>
			<view class="banxin" style="background-color: #ffffff; margin-top: 20rpx">
				<u--textarea v-model="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 class="box_ok">确认</text>
					</view>
					<view class="box_fenqu" @click="show = true">
						<text>分区</text>
						<view class="">
							<text style="color: #999999; font-size: 28rpx">生活 - 日常</text>
							<uni-icons color="#999999" type="forward" size="20"></uni-icons>
						</view>
					</view>
					<!-- 添加标签 -->
					<view class="box_tj">
						<text style="color: #999999; font-size: 28rpx">还可以添加 2 个标签</text>
						<view class="" style="display: flex">
							<u-tag
								v-for="item in tags"
								:key="item"
								@close.stop="closeBtn(item)"
								:show="closeTag"
								closable
								shape="circle"
								:text="item.label"
								:type="item.type"
							></u-tag>
							<!-- <u-tag @close="close1 = false" closable shape="circle" text="标签" type="error"></u-tag> -->
						</view>
						<!-- 推荐标签 -->
						<view class="" style="margin-top: 20rpx">
							<view style="color: #000000; font-size: 30rpx">推荐标签</view>
							<view class="" style="display: flex; margin-top: 20rpx">
								<u-tag size="mini" shape="circle" text="标签" type="warning"></u-tag>
								<u-tag size="mini" shape="circle" text="标签" type="success"></u-tag>
							</view>
						</view>
					</view>

					<u-picker
						title="选择分区"
						:show="show"
						@close="show = false"
						ref="uPicker"
						@cancel="show = false"
						:closeOnClickOverlay="true"
						:columns="columns"
						@confirm="confirm"
						@change="changeHandler"
					></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="pl_box">
				<text>开启评论</text>
				<u-switch activeColor="#5ac725" v-model="switchval" @change="change"></u-switch>
			</view>
			<view class="queren">确认发布</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			closeTag: true,
			tags: [
				{ label: '标签1', type: 'primary', closable: true },
				{ label: '标签2', type: 'warning ', closable: true },
				{ label: '标签3', type: 'success', closable: true }
			],
			showTanCeng: false,
			show: false,
			columns: [
				['中国', '美国'],
				['深圳', '厦门', '上海', '拉萨']
			],
			columnData: [
				['深圳', '厦门', '上海', '拉萨'],
				['得州', '华盛顿', '纽约', '阿拉斯加']
			],
			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'
				},
				{
					url: 'https://huli-app.wenlvti.net/app_static/minnanhun/image/shouyeBJ.png'
				},
				{
					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'
				},
				{
					url: 'https://huli-app.wenlvti.net/app_static/minnanhun/image/shouyeBJ.png'
				},
				{
					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'
				},
				{
					url: 'https://huli-app.wenlvti.net/app_static/minnanhun/image/shouyeBJ.png'
				}
			]
		};
	},
	onLoad() {},
	computed: {
		uploadNumber() {
			return this.fileList1.length;
		}
	},
	methods: {
		fenquBtn() {
			// this.show = true;
			this.showTanCeng = true;
		},
		// 关闭标签
		closeBtn(item) {
			console.log(item);
			this.tags.splice(this.tags.indexOf(item), 1);
		},
		// 分区组件方法
		changeHandler(e) {
			const {
				columnIndex,
				value,
				values, // values为当前变化列的数组内容
				index,
				// 微信小程序无法将picker实例传出来，只能通过ref操作
				picker = this.$refs.uPicker
			} = e;
			// 当第一列值发生变化时，变化第二列(后一列)对应的选项
			if (columnIndex === 0) {
				// picker为选择器this实例，变化第二列对应的选项
				picker.setColumnValues(1, this.columnData[index]);
			}
		},
		//// 分区组件方法 回调参数为包含columnIndex、value、values
		confirm(e) {
			console.log('confirm', e);
			this.show = false;
		},
		change(e) {
			console.log('change', e);
		},
		// 删除图片
		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: 'http://192.168.2.21:7001/upload', // 仅为示例，非真实的接口地址
					filePath: url,
					name: 'file',
					formData: {
						user: 'test'
					},
					success: (res) => {
						setTimeout(() => {
							resolve(res.data.data);
						}, 1000);
					}
				});
			});
		},
		close() {
			this.showTanCeng = false;
			// console.log('close');
		}
	}
};
</script>

<style>
.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;
}
/* .u-icon__icon.data-v-2ee87dc9 {
	font-size: 25rpx !important;
	line-height: 26rpx !important;
} */
.nav_fabu {
	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;
	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 55rpx;
	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>