talent_map/pc/components/feedback-add.vue

<template>
	<div class="content" v-show="showDialog">
		<el-dialog title="意见反馈" top="30vh" :visible.sync="showDialog" width="700px" @closed="onClosed">
			<el-form inline ref="form" :model="feedback" label-width="100px" :rules="rules">
				<el-form-item label="标签：">
					<!-- 标签 -->
					<div class="flex flex-wrap">
						<div class="tag-item" :class="{ 'tat-active': item.selected }" @click="changeTag(index)"
							v-for="(item,index) in tagList" :key="index">{{ item.title }}</div>
					</div>
				</el-form-item>
				<el-form-item label="内容：" prop="content">
					<el-input type="textarea" :placeholder="feedback.placeholder" v-model="feedback.content" :rows="3"
						resize="none">
					</el-input>
				</el-form-item>
			</el-form>

			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="submitForm">提交</el-button>
				<el-button @click="showDialog = false">取消</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		components: {},
		props: {
			value: {
				type: Boolean,
				default: false,
			},
		},
		data() {
			return {
				showDialog: false,
				feedback: {
					placeholder: '',
					content: '',
				},
				tagList: [],
				activeTag: 0,

				rules: {
					content: [{
						required: true,
						message: "请输入反馈内容",
						trigger: "change",
					}, ],
				},
			};
		},
		created() {
			this.getTagFun()
		},
		methods: {
			onClosed() {
				this.$refs.form.resetFields();
			},
			changeTag(index) {
				this.tagList[index].selected = !this.tagList[index].selected
				let placehoder = '#';
				this.tagList.forEach((item, index) => {
					if (item.selected) {
						placehoder += item.title + '#';
					}
				})
				this.feedback.placeholder = placehoder;
				this.$forceUpdate();
			},
			async submitForm() {
				if (!this.feedback.content) return this.$message.error('请输入反馈内容')

				const {
					status,
					data,
					msg
				} = await this.$post('/suggest', {
					title: this.feedback.placeholder, //标签
					content: this.feedback.content
				});
				if (status == 1) {
					this.$message.success(msg);
					this.showDialog = false;
				}
			},
			async getTagFun() {
				const {
					status,
					data
				} = await this.$get('/tag', {});
				if (status == 1) {
					this.tagList = data
				}
			},
		},
		watch: {
			value(val) {
				this.showDialog = val;
			},
			showDialog(val) {
				this.$emit('input', val)
			},

		},
	};
</script>

<style lang="scss" scoped>
	.content {
		.el-cascader {
			width: 468px;
		}

		.el-textarea {
			width: 468px;
		}

		.dialog-footer {
			text-align: center;

			.el-button {
				width: 160px;
			}
		}

		margin: 24px;
		padding: 24px;
		box-shadow: 0px 8px 16px 2px rgba(0, 0, 0, 0.03);
		border-radius: 18px 18px 18px 18px;
	}

	.tag-item {
		margin: 8px;
		padding: 0px 24px;
		border-radius: 28px;
		border: 1px solid #B8B8B8;
		cursor: pointer;
		line-height: 35px;
	}

	.tat-active {
		border: 1px solid #F37171;
		font-weight: 400;
		color: #F37171;
	}

	.uni-textarea {
		padding: 20px;
		height: 300px;
		background: #F7F7F7;
		border-radius: 5px;
		margin-bottom: 20px;

		textarea {
			width: 100%;
			height: 260px !important;
			min-height: 260px;
			max-height: 260px;
			overflow-y: hidden;
			font-size: 28px;
		}
	}

	.footer {

		margin-top: 40px;
		box-sizing: content-box;
		padding: 0 30px;

		.footer-text {
			height: 88px;
			line-height: 88px;
			background-color: $--color-primary;
			box-shadow: 0px 6px 12px 2px rgba(221, 66, 80, 0.23);
			border-radius: 18px 18px 18px 18px;
			font-size: 32px;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
		}
	}

	.grade-form {
		//padding-bottom: calc(120px + env(safe-area-inset-bottom));
	}

	.user-content {
		padding: 30px;
		background-size: 100% auto;
		background-repeat: no-repeat;

		.user-img {
			width: 88px;
			height: 88px;
			overflow: hidden;
			border-radius: 50%;

			image {
				width: 100%;
			}
		}

		.user-text {}
	}
</style>