hire-wx-houxuanren/pagesC/add-luntan.vue

<template>
	<view class="add-luntan">
		<u-navbar :fixed="false" title="发帖子" bgColor='rgba(0,0,0,0)' placeholder :safeAreaInsetTop="true"
			@leftClick='leftClick()'>
		</u-navbar>
		<textarea placeholder="分享你的想法..." v-model="textarea" class="textarea"></textarea>
		<view class="upload-file u-flex u-flex-wrap">
			<view class="upload-btn" v-for="(item,index) in images" :key="index" style="border: none;"
				@click="$openimage(images,index)">
				<view class="del-img" @click.stop>
					<u-icon name="close-circle" size="18" color="red" @click="del(index)"></u-icon>
				</view>
				<image :src="item" mode="aspectFill" class="image"></image>
			</view>
			<view class="upload-btn u-flex u-row-center" @click="upload" v-if="images.length < 6">
				<image src="static/upload.png" class="upload" mode=""></image>
			</view>
		</view>
		<view class="quanzi-box u-flex u-row-between">
			<view v-if="quanzi.id" class="u-flex quanzi-content">
				<view class="quanzi-img1 u-flex u-row-center">
					<image src="../static/images/quanzi.png" mode=""></image>
				</view>
				<view class="quanzi-name1">
					{{quanzi.title}}
				</view>
				<u-icon @click="quanzi = {}" name="close" color="#0C66C2" size="24"></u-icon>
			</view>
			<view v-else class="u-flex" @click="show = true">
				<view class="quanzi-img u-flex u-row-center">
					<image src="../static/images/quanzi.png" mode=""></image>
				</view>
				<view class="quanzi-name">
					选择圈子
				</view>
			</view>
			<u-icon name="arrow-right" @click="show = true"></u-icon>
		</view>
		<view class="fabu-btn" @click="toover">
			立即发布
		</view>
		<u-popup :show="show" mode="bottom" round="28">
			<view class="quanzi-popup">
				<view class="popup-header u-flex u-row-between">
					<u-icon name="close" size="0" @click="show = false" color="#222222"></u-icon>
					<text class="text">添加圈子</text>
					<u-icon name="close" size="22" @click="show = false" color="#222222"></u-icon>
				</view>
				<view class="header-search">
					<view class="search-box u-flex">
						<u-icon name="search" color="#979797" size="36"></u-icon>
						<input type="text" class="input" placeholder="搜索圈子" v-model="keywords1" confirm-type="search"
							@confirm="tosearch">
					</view>
				</view>
				<view class="scroll-box u-flex">
					<scroll-view scroll-y="true" class="quanzi-right" @scrolltolower="todown">
						<view v-for="(a,b) in list" :key="b" class="right-item u-flex" @click="quanzi = a;show = false">
							<image :src="a.image" class="item-img" mode=""></image>
							<view class="item-text u-flex-col">
								<text>{{a.title}}</text>
								<text>{{a.article_count}}条内容｜{{a.follow_count}}人关注</text>
							</view>
						</view>
					</scroll-view>
				</view>
				<view class="safe-area-inset-bottom"></view>
			</view>
		</u-popup>
		<u-modal @cancel="return1" @confirm="show1=false" :show="show1" :title="title" :content='content'
			confirmText='继续编辑' cancelText='退出' :showCancelButton='true' confirmColor="#0C66C2"></u-modal>
	</view>
</template>

<script>
	import {
		group_list,
		create_article
	} from "@/units/inquire.js"
	export default {
		data() {
			return {
				content: '现在退出内容将不会保留',
				title: '确定退出吗',
				show1: false,
				show: false,
				left: 0,
				page: 1,
				list: [],
				total: 0,
				textarea: '',
				quanzi: {},
				images: [],
				keywords1: '',
				keywords: ''
			}
		},
		onLoad(option) {
			if (option.quanzi) {
				this.quanzi = JSON.parse(option.quanzi)
			}
			this.getquanzi()
		},
		methods: {
			return1() {
				uni.navigateBack()
			},
			leftClick() {
				if (this.quanzi.id || this.textarea || this.images.join(",")) {
					this.show1 = true
				} else {
					uni.navigateBack()
				}
			},
			todown() {
				if (this.total != this.list.length) {
					this.page++
					this.getquanzi()
				}
			},
			tosearch() {
				this.keywords = this.keywords1
				this.page = 1
				this.list = []
				this.getquanzi()
			},
			del(index) {
				uni.showModal({
					title: "提示",
					content: "确定删除吗？",
					success: (e) => {
						if (e.confirm) {
							this.images.splice(index, 1)
						}
					}
				})
			},
			upload() {
				uni.chooseImage({
					count: 6 - this.images.length,
					success: (e) => {
						this.afterRead(e.tempFilePaths)
					},
					fail: (err) => {
						console.log(err);
					}
				})
			},
			async afterRead(lists) {
				uni.showLoading({
					mask: true,
					title: "上传中"
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i])
					if (result.code == 1) {
						this.images.push(result.data.fullurl)
					}
				}
				uni.hideLoading()
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					uni.uploadFile({
						url: 'https://hire.hdlkeji.com' + '/api/common/upload',
						filePath: url,
						name: 'file',
						success: (res) => {
							setTimeout(() => {
								resolve(JSON.parse(res.data))
							}, 1000)
						},
						fail: (e) => {
							console.log(e);
						}
					})
				})
			},
			getquanzi() {
				group_list({
					page: this.page,
					keywords: this.keywords
				}).then(res => {
					this.list = this.list.concat(res.data.data)
					this.total = res.data.total
				})
			},
			toover() {
				if (!this.textarea) {
					this.$u.toast("请输入内容")
					return
				}
				// if (!this.quanzi.id) {
				// 	this.$u.toast("请选择圈子")
				// 	return
				// }
				uni.showLoading({
					mask: true,
					title: "请稍后"
				})
				create_article({
					circle_id: this.quanzi.id,
					content: this.textarea,
					images: this.images.join(",")
				}).then(res => {
					this.$u.toast(res.msg)
					if (res.code == 1) {
						setTimeout(() => {
							uni.redirectTo({
								url: "/pagesC/add-luntan-over?id=" + res.data.id
							})
						}, 800)
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.add-luntan {
		padding: 28rpx 32rpx;

		.fabu-btn {
			position: fixed;
			bottom: 30rpx;
			left: 32rpx;
			width: 686rpx;
			line-height: 92rpx;
			background: #0C66C2;
			border-radius: 12rpx;
			text-align: center;
			font-size: 32rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
		}

		.quanzi-popup {
			width: 750rpx;
			background: #FFFFFF;

			.scroll-box {
				height: 60vh;

				.quanzi-right {
					flex: 1;
					height: 100%;
					min-width: 1rpx;

					.right-item {
						padding: 22rpx 28rpx;

						.item-text {
							flex: 1;
							min-width: 1rpx;

							text:first-child {
								font-size: 28rpx;
								font-family: PingFangSC-Medium, PingFang SC;
								font-weight: 500;
								color: #222222;
								margin-bottom: 4rpx;
							}

							text:last-child {
								font-size: 22rpx;
								font-family: PingFangSC-Regular, PingFang SC;
								font-weight: 400;
								color: #777777;
							}
						}

						.item-img {
							width: 76rpx;
							height: 76rpx;
							border-radius: 10rpx;
							margin-right: 16rpx;
							background-color: rgba(0, 0, 0, 0.1);
						}
					}
				}

				.quanzi-left {
					width: 208rpx;
					background: #F6F6F6;
					height: 100%;

					.left-item {
						line-height: 96rpx;
						font-size: 30rpx;
						font-family: PingFangSC-Medium, PingFang SC;
						font-weight: 500;
						color: #777777;
						text-align: center;
					}

					.leftactive {
						background-color: #fff;
						font-size: 30rpx;
						font-family: PingFangSC-Medium, PingFang SC;
						font-weight: 500;
						color: #0C66C2;
					}
				}
			}

			.header-search {
				padding: 0 32rpx 36rpx 32rpx;
				border-bottom: 2rpx solid #F4F4F4;

				.search-box {
					height: 80rpx;
					background: #F6F6F6;
					border-radius: 16rpx;
					padding: 0 20rpx;

					.input {
						flex: 1;
						margin-left: 12rpx;
						font-size: 28rpx;
					}
				}
			}

			.popup-header {
				height: 120rpx;
				padding: 0 32rpx;

				.text {
					font-size: 36rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #222222;
				}
			}
		}

		.quanzi-box {
			height: 100rpx;
			border-bottom: 2rpx solid #F4F4F4;

			.quanzi-content {
				padding: 0 14rpx;
				height: 50rpx;
				background: rgba(12, 102, 194, 0.06);
				border-radius: 28rpx;

				.quanzi-name1 {
					font-size: 24rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #0C66C2;
					margin-right: 14rpx;
				}

				.quanzi-img1 {
					margin-right: 8rpx;

					image {
						width: 28rpx;
						height: 28rpx;

					}

				}
			}

			.quanzi-name {
				flex: 1;
				margin: 0 20rpx;
				font-size: 28rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #444444;
			}

			.quanzi-img {
				width: 48rpx;
				height: 48rpx;
				background: #F6F6F6;
				border-radius: 28rpx;

				image {
					width: 28rpx;
					height: 28rpx;
				}
			}
		}

		.upload-file {
			.upload-btn {
				margin-right: 10rpx;
				margin-bottom: 10rpx;
				width: 210rpx;
				height: 210rpx;
				border-radius: 20rpx;
				border: 2rpx dashed #D1D1D1;
				position: relative;

				.del-img {
					position: absolute;
					top: 0;
					right: 0;
					z-index: 10;
				}

				.image {
					width: 210rpx;
					height: 210rpx;
				}

				.upload {
					width: 88rpx;
					height: 88rpx;
				}
			}
		}

		.textarea {
			width: 100%;
			height: 300rpx;
		}
	}

	::v-deep .u-navbar__content__left {
		padding: 0 !important;
	}
</style>