0810-1531-h01

src/api/model/merSet.js

@@ -0,0 +1,33 @@
+import config from "@/config";
+import http from "@/utils/request";
+
+export default {
+    data: {
+        url: `${config.API_URL}/merchant/setting/data`,
+        name: "-",
+        get: async function (data = {}) {
+            return await http.get(this.url, data);
+        },
+    },
+    save: {
+        url: `${config.API_URL}/merchant/setting/save`,
+        name: "-",
+        post: async function (data = {}) {
+            return await http.post(this.url, data);
+        },
+    },
+    quick: {
+        url: `${config.API_URL}/merchant/setting/quick`,
+        name: "-",
+        post: async function (data = {}) {
+            return await http.post(this.url, data);
+        },
+    },
+    del: {
+        url: `${config.API_URL}/merchant/setting/del`,
+        name: "-",
+        post: async function (data = {}) {
+            return await http.post(this.url, data);
+        },
+    },
+}

src/views/merchant/service/setting/components/form.vue

@@ -0,0 +1,73 @@
+<template>
+    <el-dialog :title="titleMap[mode]" v-model="visible" :width="500" destroy-on-close :close-on-click-modal="false" @closed="$emit('closed')">
+        <el-form ref="dialogForm" :model="formData" :rules="rules" label-width="100px" label-position="top">
+            <el-form-item prop="content">
+                <el-input v-model="formData.content" type="textarea" rows="5" clearable placeholder="请输入"></el-input>
+                <div class="el-form-item-msg" v-if="mode=='star_msg'">请勿填写联系方式，会导致开场白无法生效</div>
+            </el-form-item>
+        </el-form>
+		<template #footer>
+            <el-button @click="visible=false" size="large">取 消</el-button>
+            <el-button v-if="mode!='show'" size="large" type="primary" :loading="isSaveing" @click="submit()">保 存</el-button>
+		</template>
+    </el-dialog>
+    
+</template>
+
+<script>
+export default {
+    data(){
+        return {
+            loading: false,
+            isSaveing: false,
+            mode:"star",
+            titleMap:{
+                star_msg:"编辑开场白",
+                unline_msg:"编辑客服离线回复"
+            },
+            visible:false,
+            formData:{
+                content:""
+            },
+            rules:{
+                content: [
+                    {required: true, message: '请输入'}
+                ]
+            }
+        }
+    },
+    methods:{
+        open(mode = 'add'){
+            this.mode = mode;
+            this.visible = true;
+            return this
+        },
+        //表单注入数据
+        setData(data){
+            if (data) {
+                this.formData = data;
+            }
+        },
+        async submit(){
+            var validate = await this.$refs.dialogForm.validate().catch(()=>{});
+            if(!validate){ return false }
+            this.isSaveing = true;
+            let submitData = JSON.parse(JSON.stringify(this.formData));
+            submitData.type = this.mode;
+            var resp = await this.$API.merSet.save.post(submitData);
+            this.isSaveing = false;
+            if (resp.code == 0) {
+                return this.$message.error(resp.msg);
+            }
+            this.$message.success(resp.msg);
+            this.visible = false;
+            this.formData = {content:""};
+            this.$emit("success");
+        }
+    }
+}
+</script>
+
+<style>
+.text-center{text-align: center;}
+</style>

src/views/merchant/service/setting/components/quick.vue

@@ -0,0 +1,90 @@
+<template>
+    <el-drawer v-model="visible" size="800px" destroy-on-close :close-on-click-modal="false" :with-header="false">
+        <el-container class="flex-column">
+            <div class="drawer-detail-main">
+                <div class="drawer-detail-header">
+                    <div class="drawer-detail-header-body">
+                        <div class="drawer-detail-header-left">{{titleMap[mode]}}</div>
+                        <div class="drawer-detail-header-left">
+                            <el-button type="default" icon="el-icon-close" @click="visible=false"></el-button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <el-main>
+                <el-form ref="dialogForm" :model="formData" :rules="rules" label-width="100px" label-position="top">
+                    <el-form-item label="问题" prop="question">
+                        <el-input v-model="formData.question" clearable placeholder="请输入"></el-input>
+                        <div class="el-form-item-msg"></div>
+                    </el-form-item>
+                    <el-form-item label="回复" prop="answer">
+                        <el-input v-model="formData.answer" type="textarea" rows="5" clearable placeholder="请输入"></el-input>
+                        <div class="el-form-item-msg"></div>
+                    </el-form-item>
+                    
+                </el-form>
+            </el-main>
+            <el-footer>
+                <el-button @click="visible=false" size="large">取 消</el-button>
+                <el-button size="large" type="primary" :loading="isSaveing" @click="submitEdit()">保 存</el-button>
+            </el-footer>
+        </el-container>
+    </el-drawer>
+</template>
+
+<script>
+export default {
+    data(){
+        return {
+            loading: false,
+            isSaveing: false,
+            mode:"add",
+            titleMap:{
+                add:"添加常见问题",
+                edit:"编辑常见问题"
+            },
+            visible:false,
+            formData:{},
+            rules:{
+                question: [
+                    {required: true, message: '请输入'}
+                ],
+                answer: [
+                    {required: true, message: '请输入'}
+                ]
+            }
+        }
+    },
+    methods:{
+        open(mode = 'add'){
+            this.mode = mode;
+            this.visible = true;
+            return this
+        },
+        //表单注入数据
+        setData(data){
+            this.formData = JSON.parse(JSON.stringify(data));
+        },
+        async submitEdit(){
+            var validate = await this.$refs.dialogForm.validate().catch(()=>{});
+            if(!validate){ return false }
+            this.isSaveing = true;
+            let submitData = JSON.parse(JSON.stringify(this.formData));
+            var resp = await this.$API.merSet.quick.post(submitData);
+            this.isSaveing = false;
+            if (resp.code == 0) {
+                return this.$message.error(resp.msg);
+            }
+            this.$message.success(resp.msg);
+            this.visible = false;
+            this.formData = {};
+            this.$emit("success");
+        }
+    }
+}
+</script>
+
+<style>
+.goods-live{width: 100%;margin-top: 10px;}
+.flex-loading{display: flex;flex-direction: column;flex: 1;}
+</style>

src/views/merchant/service/setting/index.vue

@@ -1,3 +1,159 @@
 <template>
+    <el-container class="flex-column">
+        <div class="table-search">
+            <div class="first-title">常见问题设置</div>
+            <div class="sub-title">用户咨询时，将在开场白后展示本页设置的常见问题，降低用户转人工率</div>
+        </div>
+        <el-main v-loading="loadQuick">
+            <el-row :gutter="15">
+                <el-col :span="12">
+                    <el-card shadow="never">
+                        <template #header>
+                            <div class="flex-title">
+                                <div class="name">开场白</div>
+                                <div class="edit"><el-button icon="el-icon-edit" type="primary" @click="table_add('star_msg')" text>编辑</el-button></div>
+                            </div>
+                        </template>
+                        <div class="show-msg">{{starMsg?starMsg:'-'}}</div>
+                    </el-card>
+                </el-col>
+                <el-col :span="12">
+                    <el-card shadow="never">
+                        <template #header>
+                            <div class="flex-title">
+                                <div class="name">无客服在线回复</div>
+                                <div class="edit"><el-button icon="el-icon-edit" type="primary" @click="table_add('unline_msg')" text>编辑</el-button></div>
+                            </div>
+                        </template>
+                        <div class="show-msg">{{unlineMsg?unlineMsg:'-'}}</div>
+                    </el-card>
+                </el-col>
+            </el-row>
+            <div class="mt10">
+                <el-card shadow="never">
+                    <template #header>
+                        <div class="flex-title">
+                            <div class="name">常见问题</div>
+                        </div>
+                    </template>
+                    <div class="quick-table">
+                        <div class="quick-tools">
+                            <el-button icon="el-icon-plus" type="primary" @click="quickQs()">添加问题</el-button>
+                            <span>共{{ quickTable.length }}/7个问题</span>
+                        </div>
+                        <el-table :data="quickTable">
+                            <el-table-column label="问题" width="220" prop="question"></el-table-column>
+                            <el-table-column label="回复" prop="answer"></el-table-column>
+                            <el-table-column label="操作" width="160" align="right" fixed="right">
+                                <template #default="scope">
+                                    <el-button-group>
+                                        <el-popconfirm title="确定删除吗？" @confirm="table_del(scope.row, scope.$index)">
+                                            <template #reference>
+                                                <el-button text type="danger" size="small">删除</el-button>
+                                            </template>
+                                        </el-popconfirm>                    
+                                    </el-button-group>
+                                </template>
+                            </el-table-column>
+                        </el-table>
+                    </div>
+                </el-card>
+            </div>
+        </el-main>
+    </el-container>
+    <formMain ref="formMain" @success="handleSuccess"></formMain>
+    <quickMain ref="quickMain" @success="handleSuccess"></quickMain>
+</template>
 
-</template>
+<script>
+import formMain from './components/form';
+import quickMain from './components/quick';
+export default {
+    components: {
+        formMain,quickMain
+    },
+    data(){
+        return {
+            quickTable:[],
+            starMsg:"",
+            unlineMsg:"",
+            loadQuick:false
+        }
+    },
+    created(){
+        this.getQuickData()
+    },
+    methods: {
+        async table_del(data){
+            this.loadQuick = true;
+            var resp = await this.$API.merSet.del.post({"id":data.id});
+            this.loadQuick = false;
+            if (resp.code == 0) {
+                return this.$message.error(resp.msg)
+            }
+            this.$message.success(resp.msg)
+            this.getQuickData()
+        },
+        quickQs(){
+            if (this.quickTable.length >= 7) return this.$message.info("最多只能添加7个问题");
+            this.$nextTick(() => {
+                this.$refs.quickMain.open()
+            })
+        },
+        table_add(type){
+            this.$nextTick(() => {
+                if (type == 'star_msg') {
+                    var formData =  {"content":this.starMsg}
+                }
+                if (type == 'unline_msg') {
+                    var formData =  {"content":this.unlineMsg}
+                }
+                this.$refs.formMain.open(type).setData(formData)
+            })
+        },
+        handleSuccess(){
+            this.getQuickData();
+        },
+        async getQuickData(){
+            this.loadQuick = true;
+            var resp = await this.$API.merSet.data.get();
+            this.loadQuick = false;
+            if (resp.code == 0) {
+                return this.$message.error(resp.msg)
+            }
+            this.starMsg = resp.data.star_msg;
+            this.unlineMsg = resp.data.unline_msg;
+            this.quickTable = resp.data.quick;
+        }
+    }
+}
+</script>
+
+<style>
+.table-search{border-bottom: 0;padding-bottom: 20px;}
+.quick-tools{margin-bottom: 10px;display: flex;align-items: center;gap: 10px;}
+.first-title{
+    align-items: center;
+    color: #1d2129;
+    display: flex;
+    font-size: 20px;
+    font-weight: 600;
+    justify-content: space-between;
+    line-height: 28px;
+    margin-bottom: 10px;
+}
+.flex-title{display: flex;align-items: center;justify-content: space-between;}
+.flex-title .name{font-size: 18px;font-weight: bold;}
+.show-msg{
+    align-items: flex-start;
+    background: #f5f6f9;
+    border-radius: 12px;
+    font-family: PingFang SC;
+    font-size: 14px;
+    font-weight: 400;
+    height: 90px;
+    line-height: 22px;
+    padding: 12px;
+    width: 100%;
+}
+</style>