zhishifufei_php/public/kefu-assets/components/mobile/words/index.html

<div>
    <!-- 常用语 -->
    <div class="words-mask" v-if="isWords">
        <div class="content">
            <div class="title-box">
                <div class="tab-box">
                    <div class="tan-item" :class="{on:item.key == wordsTabCur}" v-for="(item,index) in wordsTab"
                        @click.stop="bindTab(item)">{{item.title}}</div>
                    <div class="right-icon">
                        <span class="iconfont iconbianji2" @click.stop="isWordShow = true"></span>
                        <span class="iconfont iconcha" @click.stop="closeBox"></span>
                    </div>
                </div>
                <div class="input-box">
                    <Input v-model="wordsData.searchTxt" placeholder="搜索快捷回复" :search="true" @on-search="bindSearch" />
                </div>
            </div>
            <div class="scroll-box">
                <div class="scroll-left">
                    <div class="left-item add_cate" @click.stop="openCate(0)" v-if="wordsTabCur"> <span
                            class="iconfont iconjiahao"></span> 分组</div>
                    <div class="left-item" :class="{active:wordsData.cateId == item.id}" v-for="item in wordsData.cate"
                        @click.stop="changeCate(item)">{{item.name}}</div>
                </div>
                <div class="right-box">
                    <vue-scroll :ops="wordsData.ops" @load-before-deactivate="handleWordsScroll">

                        <div class="slot-load" slot="load-deactive"></div>
                        <div class="slot-load" slot="load-beforeDeactive"></div>
                        <div class="slot-load" slot="load-active">下滑加载更多</div>
                        <div class="msg-item add-mg" v-show="wordsTabCur" @click.stop="addMsg"><span
                                class="iconfont icontianjia11"></span>添加话术</div>
                        <div class="msg-item" v-for="(item,index) in wordsList" :key="index"
                            @click.stop="selectWords(item)">
                            <span class="title">{{item.title}}</span>{{item.message}}
                        </div>
                    </vue-scroll>
                </div>
            </div>
        </div>
    </div>
    <!-- 添加分组  -->
    <Modal v-model="cateData.isCate" width="300" :footer-hide="true" :closable="false"
        class-name="vertical-center-modal" class="words-box">
        <div class="mask-title">
            {{cateData.status?'编辑分组':'新增分组'}}
            <span class="iconfont iconcha" @click.stop="closeCate"></span>
        </div>
        <div class="input-box">
            <Input class="noinput" v-model="cateData.name" placeholder="请输入分组名称" />
        </div>
        <div class="input-box">
            <Input class="noinput" v-model="cateData.sort" placeholder="请输入分组排序" />
        </div>
        <Button @click.stop="cateConfirm" class="subBtn" type="primary" :disabled="cateStatus">确定</Button>
    </Modal>
    <!-- 添加话术  -->
    <Modal v-model="msgData.isCateMeg" width="300" :footer-hide="true" :closable="false"
        class-name="vertical-center-modal" class="words-box">
        <div class="mask-title">
            {{msgData.status?'修改话术':'添加话术'}}
            <span class="iconfont iconcha" @click.stop="closeMsgBox"></span>
        </div>
        <div class="input-box">
            <Input class="noinput" v-model="msgData.title" placeholder="请输入标题名称 (选填)" />
        </div>
        <div class="input-box text-area">
            <Input class="noinput" :rows="4" type="textarea" v-model="msgData.message" placeholder="请输入您的话术" />
        </div>
        <div class="input-box">
            <Select v-model="msgData.msgCateId">
                <Option v-for="item in selectData" :value="item.id" :key="item.value">{{ item.name }}</Option>
            </Select>
        </div>
        <Button @click.stop="msgConfirm" class="subBtn" type="primary" :disabled="msgStatus">确定</Button>
    </Modal>
    <!-- 编辑弹窗  -->
    <div class="edit-box" v-if="isWordShow">
        <div class="head">
            <div class="tit-bar">{{wordsTabCur?'个人库':'公共库'}}<span @click.stop="isWordShow = false">完成</span></div>
            <div class="input-box noinput">
                <Input v-model="wordsData.searchTxt" placeholder="搜索快捷回复" :search="true" @on-search="bindSearch" />
            </div>
        </div>
        <div class="scroll-box">
            <div class="scroll-left">
                <div class="top">
                    <div class="left-item add_cate" @click.stop="openCate(0)" v-if="wordsTabCur"> <span
                            class="iconfont iconjiahao"></span> 分组</div>
                    <div class="left-item" :class="{active:wordsData.cateId == item.id}" v-for="item in wordsData.cate"
                        @click.stop="changeCate(item)">{{item.name}}</div>
                </div>
                <div class="bom" v-if="wordsTabCur">
                    <div class="left-item edits-box" @click.stop="editList.status = true">编辑分组</div>
                </div>
            </div>
            <div class="right-box">
                <vue-scroll :ops="wordsData.ops" @load-before-deactivate="handleWordsScroll">

                    <div class="slot-load" slot="load-deactive"></div>
                    <div class="slot-load" slot="load-beforeDeactive"></div>
                    <div class="slot-load" slot="load-active">下滑加载更多</div>
                    <div class="msg-item" v-for="(item,index) in wordsList" :key="index">
                        <span class="title">{{item.title}}</span>{{item.message}}
                        <div class="edit-bar" v-if="wordsTabCur">
                            <span class="iconfont iconbianji1" @click.stop="bindEdit(item)"></span>
                            <span class="iconfont iconshanchu1" @click.stop="delMsg(item,'删除话术',index)"></span>
                        </div>
                    </div>
                </vue-scroll>
            </div>
        </div>

    </div>
    <!-- 编辑分组列表 -->
    <Modal v-model="editList.status" width="300" :footer-hide="true" :closable="false"
        class-name="vertical-center-modal" class="words-box cate-list">
        <div class="mask-title">
            编辑分组
            <span class="iconfont iconcha" @click.stop="editList.status = false"></span>
        </div>
        <div class="list-box">
            <div class="item" v-for="(item,index) in wordsData.cate" :index="index">
                <span>{{item.name}}</span>
                <div class="right-box">
                    <span class="iconfont iconbianji1" v-if="index>0" @click.stop="openCate(1,item)"></span>
                    <span class="iconfont iconshanchu1" v-if="index>0" @click.stop="delCate(item,'删除分组',index)"></span>
                </div>
            </div>
        </div>
    </Modal>
</div>