🐞 fix: 优化客服对话框样式和交互

src/views/components/quickSendGame/ServiceMessageDialog.vue

 <template>
   <div class="service-message-dialog">
-    <el-popover placement="top" trigger="hover" content="发送客服二维码">
-      <svg-icon slot="reference" icon-class="kfworks" class="service-message-dialog__icon" @click="show" />
-    </el-popover>
-    <el-dialog title="客服号添加二维码" :visible.sync="visible" width="500px" @close="handleClose">
       <div v-if="taskStatus.is_band">
         <div class="service-message-dialog__title">
           VIP客服：
@@ -12,20 +8,22 @@
           </span>
         </div>
         <div class="service-message-dialog__info">
+          <i class="el-icon-info"></i>
           当前有转VIP/SVIP任务，请推送指定客服的客服号
         </div>
       </div>
       <div v-else class="service-message-dialog__info">
+          <i class="el-icon-info"></i>
         当前无分配转VIP/SVIP任务
       </div>
-      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
-        <el-form-item label="客服类型" prop="service_type">
+      <el-form ref="form" :model="form" label-position="top" :rules="rules" label-width="100px" style="margin-top: 10px;">
+        <el-form-item label="客服类型:" prop="service_type">
           <el-select v-model="form.service_type" :clearable="false" placeholder="请选择客服类型" style="width:100%;"
             @change="handleServiceTypeChange">
             <el-option v-for="item in serviceTypeOptions" :key="item.value" :label="item.label" :value="item.value" />
           </el-select>
         </el-form-item>
-        <el-form-item label="客服号" prop="service_id">
+        <el-form-item label="客服号:" prop="service_id">
           <el-select v-model="form.service_id" style="width:100%;" :clearable="false" :loading="loading"
             placeholder="请选择客服号">
             <el-option v-for="item in serviceList" :key="item.id" :label="item.service_wechat_number_name"
@@ -33,23 +31,21 @@
           </el-select>
         </el-form-item>
       </el-form>
-      <div slot="footer">
-        <el-button @click="handleClose">取 消</el-button>
-        <el-button type="primary" :loading="submitting" @click="handleSubmit">确 定</el-button>
+      <div class="rowFlex rowEnd" style="margin-top: 20px;">
+        <el-button size="mini" @click="handleClose">取 消</el-button>
+        <el-button size="mini" type="primary" :loading="submitting" @click="handleSubmit">确 定</el-button>
       </div>
-    </el-dialog>
   </div>
 </template>
 
 <script>
 import { searchcondition, getTaskTracer, memberTaskStatus, getTaskTracerTouch, getTaskTracerTouchAdd } from '@/api/game'
-import { mapState, mapMutations } from 'vuex'
-
+import { mapState } from 'vuex'
+import { sendChatMessage } from '@/utils/index'
 export default {
   name: 'ServiceMessageDialog',
   data() {
     return {
-      visible: false,
       loading: false,
       submitting: false,
       form: {
@@ -73,7 +69,7 @@ export default {
   },
   computed: {
     ...mapState('game', ['accountSelect']),
-    ...mapState('user', ['userInfo'])
+    ...mapState('user', ['cser_name'])
   },
   watch: {
     accountSelect: {
@@ -81,26 +77,21 @@ export default {
       immediate: true
     }
   },
+  mounted() {
+    if (this.accountSelect) { 
+      this.initData()
+    }else {
+      this.$message.error('请关联W账号')
+    }
+  },
   methods: {
-    ...mapMutations('common', ['set_sendSkillMessage']),
-
     // 初始化数据
     async initData() {
-      if (!this.accountSelect) return
       await Promise.all([
         this.getTaskTracer(),
         this.memberTaskStatus()
       ])
     },
-
-    show() {
-      if (this.accountSelect && this.accountSelect !== '') {
-        this.visible = true
-        this.initData()
-      } else {
-        this.$message.error('请关联W账号')
-      }
-    },
     // 获取任务状态
     async memberTaskStatus() {
       try {
@@ -133,7 +124,6 @@ export default {
 
     handleClose() {
       this.$refs.form.resetFields()
-      this.visible = false
       this.loading = false
       this.submitting = false
     },
@@ -169,24 +159,20 @@ export default {
 
     // 发送消息
     async sendMessage(image_url) {
-      const list = [{
-        msgtype: 'image',
-        image: { picurl: image_url }
-      }]
       await this.getTaskTracerTouch()
       if (this.taskStatus.is_band) {
         await this.getTaskTracerTouchAdd()
       }
+      await sendChatMessage(image_url, 'image')
       // 生成二维码有延迟 立即发送会导致二维码加载失败 加个小延迟解决问题
       setTimeout(() => {
         this.submitting = false
-        this.set_sendSkillMessage(list)
         this.handleClose()
       }, 2000)
     },
     // 发送的时候如果当前W 账号如果有 转 vip/svip的任务 记录一条发送日志
     async getTaskTracerTouchAdd() {
-      const res = await getTaskTracerTouchAdd({ member_id: this.accountSelect, zw_user_name: this.userInfo.username })
+      const res = await getTaskTracerTouchAdd({ member_id: this.accountSelect, zw_user_name: this.cser_name })
     },
     // 获取任务追踪者接触信息记录日志
     async getTaskTracerTouch() {
@@ -230,6 +216,11 @@ export default {
 
 <style lang="scss" scoped>
 .service-message-dialog {
+  padding-top: 30px;
+  position: relative;
+  ::v-deep .el-form-item__label{
+    line-height: 35px;
+  }
   &__icon {
     font-size: 23px;
     margin-left: 20px;
@@ -258,6 +249,21 @@ export default {
     text-align: justify;
     font-style: normal;
     margin-bottom: 10px;
+    position: absolute;
+    left: 0;
+    top: 0px;
+    width: 100%;
+    height: 28px;
+    background: #F4F4F5;
+    border-radius: 0px 0px 0px 0px;
+    display: flex;
+    align-items: center;
+    padding: 0 20px;
+    border-radius: 5px;
+    i{
+      font-size: 18px;
+      margin-right: 5px;
+    }
   }
 }
 

src/views/components/quickSendGame/sendGame.vue

@@ -1121,13 +1121,9 @@ export default {
   width: 100%;
   height: 100%;
   overflow: auto;
-  margin-top: -10px;
-
   .createChannel {
     font-size: 14px;
-    margin-top: 16px;
     padding: 0 16px;
-
     .label {
       color: #878787;
       font-size: 12px;

src/views/components/quickSendGame/vipTools.vue

@@ -324,7 +324,7 @@ export default {
   width: 100%;
   height: 100%;
   overflow: auto;
-
+  padding-top: 15px;
   .sendLink {
     width: 150px;
     height: 25px;

src/views/quickSendGame.vue

@@ -29,7 +29,7 @@
 import vipTools from './components/quickSendGame/vipTools.vue'
 import sendGame from './components/quickSendGame/sendGame.vue'
 import { mapActions } from 'vuex'
-import sendQrCode from './components/quickSendGame//ServiceMessageDialog.vue'
+import sendQrCode from './components/quickSendGame/ServiceMessageDialog.vue'
 export default {
   name: 'quickSendGame',
   components: {
@@ -89,9 +89,6 @@ export default {
   .content {
     width: 100%;
     height: calc(100% - 10px);
-    ::v-deep .el-tabs__header {
-      margin: 0 0 20px;
-    }
   }
   ::v-deep .el-tabs--border-card .is-active {
     border: none !important;