|
|
<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>
|