zh_order_food_xcx/pages-school/add-circle.vue

<template>
	<view class="add-circle-box iPhone-bottom flex-common-css box-border-box">
		<page-meta :page-style="'overflow:'+(show?'hidden':'visible')"></page-meta>
		<Nav title='发圈子' bgckgroundBox='#fff'></Nav>
		<view class="scroll-view-css box-border-box ptp-24">
			<view class="bgc-f box-border-box p-32">
				<view class="fs-34 fw-600 mb-20">内容描述 <span class='fs-34 fc-9 fw-400'>(必填）</span></view>
				<textarea v-model="fromData.content" class="textarea-class fs-24" :maxlength='500' placeholder='这一刻说些什么'
					@input='input'></textarea>
				<view class="text-align-right fs-28 fc-9">
					{{inputNum>=500?'500':inputNum}}/500
				</view>
			</view>
			<view class="bgc-f mb-20">
				<EnUpload v-model="fromData.image" number='9'></EnUpload>
				<view class='fc-ED301D pl-24 p-b-20 box-border-box'>
					提示:如您上传图片，帖子将会进入内容安全审核
				</view>
			</view>
			<view class="bgc-f box-border-box p-32 flex-justify-space align-items-center" @click="openPop()">
				<view class="fs-34 fw-600">{{typeName}}</view>
				<image class="right-icon" src="@/static/img/toRight.png" mode=""></image>
			</view>
		</view>
		<view class="box-border-box p-32" @click="save()">
			<view class="b-bottom text-align-center fs-32 fw-600 fc-f">发布</view>
		</view>
		<uni-popup ref="popup" type="bottom" background-color="#fff" @change="change">
			<view class="pop-box box-border-box p-24">
				<view class="head-pop flex-justify-space align-items-center mb-24">
					<uni-icons @click.stop="closePop(1)" type="closeempty" size="24"></uni-icons>
					<view class="fs-36 fc-0 fw-600">选发布类型</view>
					<view class="fs-28 fw-600 fc-41ABF5" @click.stop="closePop(2)">确定</view>
				</view>
				<view class="scroll-view-css">
					<view class="item-box fs-32 "
						:class="fromData.topic_id==item.id?'fc-41ABF5 bgc-D5EDFB':'bgc-F3F4F6'"
						v-for="(item,i) in classList" :key="i" @click="selectPopAddEditType(item)">{{item.name}}</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		getTopic
	} from '@/api/category.js';
	import {
		alumniSave
	} from '@/api/alumni.js';
	import tools from '@/service/tools';
	import EnUpload from '@/components/en-from/en-upload/en-upload.vue';
	export default {
		components: {
			EnUpload
		},
		data() {
			return {
				fromData: {
					news_id: '',
					content: '',
					image: [],
					school_id: '',
					topic_id: '',
				},
				isAJAX: false,
				classList: [],
				typeName: '请选择发布类型',
				show: 'false',
				inputNum: 0
			}
		},
		onLoad(e) {
			if (e.news_id) {
				this.fromData.news_id = e.news_id;
			} else {
				this.fromData.news_id = '';
			}
		},
		methods: {
			input(e) {
				console.log(e.detail);
				this.inputNum = e.detail.cursor
			},
			change(e) {
				this.show = e.show
			},
			selectPopAddEditType(item) {
				if (this.fromData.topic_id != item.id) {
					this.fromData.topic_id = item.id;
					this.typeName = item.name;
				}
			},
			openPop() {
				getTopic().then((res) => {
					if (res.code === 1) {
						this.classList = res.data;
						this.$refs.popup.open();
					}
				})
			},
			closePop(type) {
				if (type === 1) {
					this.fromData.topic_id = '';
					this.typeName = '请选择发布类型';
				}
				this.$refs.popup.close();
			},

			save() {
				if (this.isAJAX) {
					return
				}
				this.isAJAX = true;
				let circleSchoolId = uni.getStorageSync('circleSchoolId');
				let school_id = uni.getStorageSync('school_id');
				this.fromData.alumni_school_id = circleSchoolId ? circleSchoolId : school_id;
				alumniSave(this.fromData).then((res) => {
					if (res.code === 1) {
						tools.success(res.msg, 1000)
						setTimeout(() => {
							this.isAJAX = false;
							uni.$emit('operateType', true);
							uni.navigateBack({
								delta: 1,
							});
						}, 1000)
					} else {
						tools.error(res.msg)
						this.isAJAX = false;
					}
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.textarea-class {
		width: 100%;
	}

	.add-circle-box {
		.b-bottom {
			width: 686rpx;
			height: 88rpx;
			line-height: 88rpx;
			background: linear-gradient(105deg, #57CAFF 0%, #41ABF5 100%);
			border-radius: 200rpx;
		}

		.right-icon {
			width: 32rpx;
			height: 32rpx;
		}

		.head-pop {
			padding-bottom: 34rpx !important;
			border-bottom: 1rpx solid #F2F2F2;
		}

		.pop-box {
			width: 100%;
			height: 50vh;
			// background-color: #fff;
			border-radius: 24rpx 24rpx 0rpx 0rpx;
			display: flex;
			flex-direction: column;

			.item-box {
				width: 100%;
				height: 92rpx;

				border-radius: 200rpx;
				line-height: 92rpx;
				text-align: center;
				margin-bottom: 24rpx;
			}
		}
	}
</style>