apply-assistant-v3/root/NEUIKit/components/quickReply.vue

<template>
	<div class="">
		<div class="">
			<div class="g_p_10 g_pt_8 g_bg_ed sticky">
				<div class="g_text_c g_h_24 g_pt_6 g_pb_12">快捷回复</div>
				<u-search height="80" v-model="keys" @change="searchReply('change')" @clear="searchReply('search')" @search="searchReply('search')" class="" placeholder="搜索常用回复" bg-color="#fff" :show-action="false" placeholder-class="g_c_c" search-icon-color="#999999" :maxlength="20"></u-search>
				<div class="g_pt_8">
					<u-tabs bg-color="transparent" from="index" gutter="20" :showBar="true" bar-width="60" bar-height="6" :list="tabInfo.list" :is-scroll="true" v-model="tabInfo.active" active-color="#00b666" @change="handleUpdateTab" font-size="34" duration="0.05" height="72"></u-tabs>
				</div>
			</div>
		</div>
		<div class="g_pl_16 g_pr_10">
			<div class="" v-if="tabInfo.list[tabInfo.active].classify == 1">
				<div class="g_mt_6" v-for="item in chosenList">
					<div class="g_c_main leftLine g_fw_600">
						{{ item.classifyName }}
					</div>
					<template v-for="innerItem in item.recordList" :key="innerItem.recordSort">
						<div class="g_flex_row_start g_pl_10 g_pt_6" @click="sendQuickReply(innerItem)">
							<div class="g_c_main">
								{{ innerItem.ask + "：" }}
							</div>
							<div class="g_text_u">
								{{ innerItem.answer }}
							</div>
						</div>
					</template>
				</div>
			</div>
			<div class="" v-if="tabInfo.list[tabInfo.active].classify == 2">
				<template v-for="item in chosenList" :key="item.id">
					<div class="g_flex_row_start g_pt_6" @click="sendQuickReply(item)">
						<div class="g_c_main">
							{{ item.ask + "：" }}
						</div>
						<div class="g_text_u">
							{{ item.answer }}
						</div>
					</div>
				</template>
			</div>
			<div class="" style="margin-top: 120px" v-if="chosenList.length == 0">
				<g-empty text="暂无回复" />
			</div>
		</div>
	</div>
</template>

<script>
import api from "../utils/api.js";
export default {
	// 组件名称
	name: "",
	// 局部注册的组件
	components: {},
	// 组件参数 接收来自父组件的数据
	props: {},
	// 组件状态值
	data() {
		return {
			keys: "",
			chosenList: [],
			tabInfo: {
				list: [
					{
						name: "常用回复",
						classify: 1,
					},
					{
						name: "自定义回复",
						classify: 2,
					},
				],
				active: 0,
			},
		};
	},
	// 计算属性
	computed: {},
	// 侦听器
	watch: {},
	created() {
		this.getChosenList();
	},
	mounted() {},
	// 组件方法
	methods: {
		sendQuickReply(_item) {
			let that = this;
			that.$emit("sendQuickReply", _item);
		},
		handleUpdateTab(e) {
			let that = this;
			that.chosenList = [];
			that.tabInfo.active = e;
			that.getChosenList();
		},
		searchReply(e) {
			let that = this;
			if ((e == "change" && that.keys == "") || e == "search") {
				that.getChosenList();
			}
		},
		getChosenList() {
			let that = this;
			let url = "get_getChosenList";
			if (that.tabInfo.list[that.tabInfo.active].classify == 2) {
				url = "get_getSelfList";
			}
			that.G.Get(api[url], { keys: that.keys }, (res) => {
				console.log("resresresres", res);
				that.chosenList = res;
			});
		},
	},
};
</script>

<style scoped lang="less">
.leftLine {
	position: relative;
	&::before {
		content: "";
		position: absolute;
		left: -6px;
		top: 50%;
		width: 3px;
		height: 80%;
		background-color: #00b666;
		transform: translateY(-50%);
	}
}
</style>