music-score/src/page-colexiu/custom-plugins/helper-model/recommendation/index.tsx

import { defineComponent, reactive, ref } from "vue";
import styles from "./index.module.less";
import iconClose from "../icons/close2.svg";
import { Button, Cell, Field, Tab, Tabs, showToast } from "vant";
import { sysSuggestionAdd } from "/src/page-colexiu/api";

export default defineComponent({
	name: "recommendation",
	emits: ["close"],
	setup(props, { emit }) {
		const tags = ["识别不准", "无法评测", "不出评测结果", "曲谱不一致", "指法错误", "其他"];
		const recommenData = reactive({
			loading: false,
			active: "识别不准",
			message: "",
		});

		/** 提交意见反馈 */
		const handleSubmit = async () => {
			if (!recommenData.message) {
				showToast({
					message: "请先填写意见反馈",
					position: "top",
				});
				return;
			}
			recommenData.loading = true;
			try {
				await sysSuggestionAdd({
					content: recommenData.message + "#" + recommenData.active,
					type: "SMART_PRACTICE",
				});
				showToast({
					message: "意见反馈已提交",
					position: "top",
				});
                emit('close')
			} catch (error) {}
			recommenData.loading = false;
		};

		return () => (
			<>
				<div class={styles.closeBtn} onClick={() => emit("close")}>
					<img src={iconClose} />
				</div>
				<div class={styles.content}>
					<Tabs lineHeight={0} color="#1A1A1A">
						<Tab title="意见反馈">
							<Cell border={false} title="请选择问题类型" />
							<div class={styles.tags}>
								{tags.map((text) => (
									<span class={[styles.tag, recommenData.active === text && styles.active]} onClick={() => (recommenData.active = text)}>
										{text}
									</span>
								))}
							</div>
							<Field
								v-model={recommenData.message}
								rows="3"
								autosize={{ maxHeight: 128 }}
								border={false}
								type="textarea"
								maxlength={200}
								placeholder="请详细描述您遇到的问题，以便我们尽快为您解决！"
								show-word-limit
							/>
							<Cell>
								<Button loading={recommenData.loading} class={styles.btn} block round type="primary" onClick={handleSubmit}>
									提交反馈
								</Button>
							</Cell>
						</Tab>
					</Tabs>
				</div>
			</>
		);
	},
});