refactor: 侧边浮窗从基础配置移到导航配置 tab
All checks were successful
continuous-integration/drone/push Build is passing
All checks were successful
continuous-integration/drone/push Build is passing
This commit is contained in:
yiqiu
@@ -93,86 +93,6 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="section-card" data-title="侧边浮窗">
|
|
||||||
<p class="theme-tip">
|
|
||||||
配置前台右下角悬浮工具条。支持 4 种模块类型：QQ客服、在线客服、群聊、公众号。
|
|
||||||
</p>
|
|
||||||
<div v-if="!fullConfig.side.length" class="empty-tip">
|
|
||||||
还没有浮窗模块，点击下方按钮添加。
|
|
||||||
</div>
|
|
||||||
<div class="config-item" v-for="(item, index) in fullConfig.side" :key="'side-' + index">
|
|
||||||
<div class="config-item__header">
|
|
||||||
<h4>{{ {qq:'QQ客服', service:'在线客服', group:'群聊', wechat:'公众号'}[item.type] || '浮窗' }} {{ index + 1 }}</h4>
|
|
||||||
<t-button size="small" theme="danger" variant="outline" @click="removeSide(index)">
|
|
||||||
删除
|
|
||||||
</t-button>
|
|
||||||
</div>
|
|
||||||
<div class="form-grid">
|
|
||||||
<div class="form-item">
|
|
||||||
<label>模块类型</label>
|
|
||||||
<t-select v-model="item.type">
|
|
||||||
<t-option value="qq" label="QQ客服"></t-option>
|
|
||||||
<t-option value="service" label="在线客服"></t-option>
|
|
||||||
<t-option value="group" label="群聊"></t-option>
|
|
||||||
<t-option value="wechat" label="公众号"></t-option>
|
|
||||||
</t-select>
|
|
||||||
</div>
|
|
||||||
<div class="form-item">
|
|
||||||
<label>显示名称</label>
|
|
||||||
<t-input v-model="item.label" placeholder="如：QQ客服"></t-input>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- QQ 客服 -->
|
|
||||||
<template v-if="item.type === 'qq'">
|
|
||||||
<div class="form-item form-item--full" v-for="(qq, qIndex) in item.items" :key="'qq-' + qIndex">
|
|
||||||
<label>
|
|
||||||
客服 {{ qIndex + 1 }}
|
|
||||||
<t-button size="small" theme="danger" variant="text" @click="item.items.splice(qIndex, 1)">删除</t-button>
|
|
||||||
</label>
|
|
||||||
<div class="form-grid">
|
|
||||||
<div class="form-item">
|
|
||||||
<label>QQ号</label>
|
|
||||||
<t-input v-model="qq.qq" placeholder="10001"></t-input>
|
|
||||||
</div>
|
|
||||||
<div class="form-item">
|
|
||||||
<label>在线时间</label>
|
|
||||||
<t-input v-model="qq.time" placeholder="09:00 - 22:00"></t-input>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="form-item form-item--full">
|
|
||||||
<t-button size="small" theme="primary" variant="outline" @click="addSideQQ(item)">新增QQ客服</t-button>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<!-- 在线客服 -->
|
|
||||||
<template v-if="item.type === 'service'">
|
|
||||||
<div class="form-item form-item--full">
|
|
||||||
<label>客服链接地址</label>
|
|
||||||
<t-input v-model="item.url" placeholder="https://客服链接"></t-input>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<!-- 群聊 / 公众号 -->
|
|
||||||
<template v-if="item.type === 'group' || item.type === 'wechat'">
|
|
||||||
<div class="form-item form-item--full">
|
|
||||||
<label>二维码图片</label>
|
|
||||||
<div class="upload-row">
|
|
||||||
<t-input v-model="item.qrcode" placeholder="/upload/qrcode.png"></t-input>
|
|
||||||
<t-upload theme="custom" :action="uploadUrl" :headers="uploadHeaders"
|
|
||||||
:format-response="uploadFormatResponse" :show-upload-progress="false" :max="1"
|
|
||||||
@success="(ctx) => handleUpload(['side', index, 'qrcode'], ctx)">
|
|
||||||
<t-button size="small" class="ml-10">
|
|
||||||
<t-icon name="upload" size="small" /> 上传
|
|
||||||
</t-button>
|
|
||||||
</t-upload>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<t-button theme="primary" variant="outline" @click="addSide">新增浮窗模块</t-button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="section-card" data-title="反馈类型">
|
<div class="section-card" data-title="反馈类型">
|
||||||
<p class="theme-tip">
|
<p class="theme-tip">
|
||||||
@@ -418,6 +338,87 @@
|
|||||||
新增一级导航
|
新增一级导航
|
||||||
</t-button>
|
</t-button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="section-card" data-title="侧边浮窗">
|
||||||
|
<p class="theme-tip">
|
||||||
|
配置前台右下角悬浮工具条。支持 4 种模块类型：QQ客服、在线客服、群聊、公众号。
|
||||||
|
</p>
|
||||||
|
<div v-if="!fullConfig.side.length" class="empty-tip">
|
||||||
|
还没有浮窗模块，点击下方按钮添加。
|
||||||
|
</div>
|
||||||
|
<div class="config-item" v-for="(item, index) in fullConfig.side" :key="'side-' + index">
|
||||||
|
<div class="config-item__header">
|
||||||
|
<h4>{{ {qq:'QQ客服', service:'在线客服', group:'群聊', wechat:'公众号'}[item.type] || '浮窗' }} {{ index + 1 }}</h4>
|
||||||
|
<t-button size="small" theme="danger" variant="outline" @click="removeSide(index)">
|
||||||
|
删除
|
||||||
|
</t-button>
|
||||||
|
</div>
|
||||||
|
<div class="form-grid">
|
||||||
|
<div class="form-item">
|
||||||
|
<label>模块类型</label>
|
||||||
|
<t-select v-model="item.type">
|
||||||
|
<t-option value="qq" label="QQ客服"></t-option>
|
||||||
|
<t-option value="service" label="在线客服"></t-option>
|
||||||
|
<t-option value="group" label="群聊"></t-option>
|
||||||
|
<t-option value="wechat" label="公众号"></t-option>
|
||||||
|
</t-select>
|
||||||
|
</div>
|
||||||
|
<div class="form-item">
|
||||||
|
<label>显示名称</label>
|
||||||
|
<t-input v-model="item.label" placeholder="如：QQ客服"></t-input>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- QQ 客服 -->
|
||||||
|
<template v-if="item.type === 'qq'">
|
||||||
|
<div class="form-item form-item--full" v-for="(qq, qIndex) in item.items" :key="'qq-' + qIndex">
|
||||||
|
<label>
|
||||||
|
客服 {{ qIndex + 1 }}
|
||||||
|
<t-button size="small" theme="danger" variant="text" @click="item.items.splice(qIndex, 1)">删除</t-button>
|
||||||
|
</label>
|
||||||
|
<div class="form-grid">
|
||||||
|
<div class="form-item">
|
||||||
|
<label>QQ号</label>
|
||||||
|
<t-input v-model="qq.qq" placeholder="10001"></t-input>
|
||||||
|
</div>
|
||||||
|
<div class="form-item">
|
||||||
|
<label>在线时间</label>
|
||||||
|
<t-input v-model="qq.time" placeholder="09:00 - 22:00"></t-input>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form-item form-item--full">
|
||||||
|
<t-button size="small" theme="primary" variant="outline" @click="addSideQQ(item)">新增QQ客服</t-button>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<!-- 在线客服 -->
|
||||||
|
<template v-if="item.type === 'service'">
|
||||||
|
<div class="form-item form-item--full">
|
||||||
|
<label>客服链接地址</label>
|
||||||
|
<t-input v-model="item.url" placeholder="https://客服链接"></t-input>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<!-- 群聊 / 公众号 -->
|
||||||
|
<template v-if="item.type === 'group' || item.type === 'wechat'">
|
||||||
|
<div class="form-item form-item--full">
|
||||||
|
<label>二维码图片</label>
|
||||||
|
<div class="upload-row">
|
||||||
|
<t-input v-model="item.qrcode" placeholder="/upload/qrcode.png"></t-input>
|
||||||
|
<t-upload theme="custom" :action="uploadUrl" :headers="uploadHeaders"
|
||||||
|
:format-response="uploadFormatResponse" :show-upload-progress="false" :max="1"
|
||||||
|
@success="(ctx) => handleUpload(['side', index, 'qrcode'], ctx)">
|
||||||
|
<t-button size="small" class="ml-10">
|
||||||
|
<t-icon name="upload" size="small" /> 上传
|
||||||
|
</t-button>
|
||||||
|
</t-upload>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<t-button theme="primary" variant="outline" @click="addSide">新增浮窗模块</t-button>
|
||||||
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section id="footer" class="config-section" :class="{active: activeSection === 'footer'}">
|
<section id="footer" class="config-section" :class="{active: activeSection === 'footer'}">
|
||||||
|
|||||||
Reference in New Issue
Block a user