{"remainingRequest":"D:\\front\\item\\zyAdmin\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!D:\\front\\item\\zyAdmin\\src\\pages\\kefu\\appChat\\mobile\\index.vue?vue&type=style&index=1&id=4e0982a6&lang=css","dependencies":[{"path":"D:\\front\\item\\zyAdmin\\src\\pages\\kefu\\appChat\\mobile\\index.vue","mtime":1761614939020},{"path":"D:\\front\\item\\zyAdmin\\node_modules\\css-loader\\index.js","mtime":1761614929364},{"path":"D:\\front\\item\\zyAdmin\\node_modules\\vue-loader\\lib\\loaders\\stylePostLoader.js","mtime":1761614937403},{"path":"D:\\front\\item\\zyAdmin\\node_modules\\postcss-loader\\src\\index.js","mtime":1761614935133},{"path":"D:\\front\\item\\zyAdmin\\node_modules\\cache-loader\\dist\\cjs.js","mtime":1761614927801},{"path":"D:\\front\\item\\zyAdmin\\node_modules\\vue-loader\\lib\\index.js","mtime":1761614937402}],"contextDependencies":[],"result":[{"type":"Buffer","data":"base64:DQpAa2V5ZnJhbWVzIHVwIHsNCiAgMCUgew0KICAgIHRyYW5zZm9ybTogdHJhbnNsYXRlWSgxMDAlKTsNCiAgfQ0KICAxMDAlIHsNCiAgICB0cmFuc2Zvcm06IHRyYW5zbGF0ZVkoMCk7DQogIH0NCn0NCi5lbW9qaS1vdXRlciB7DQogIHBvc2l0aW9uOiBhYnNvbHV0ZTsNCiAgcmlnaHQ6IDAuNXJlbTsNCiAgYm90dG9tOiAwLjNyZW07DQogIHdpZHRoOiAwLjVyZW07DQogIGhlaWdodDogMC41cmVtOw0KfQ0K"},{"version":3,"sources":["index.vue"],"names":[],"mappings":";AAmpCA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","file":"index.vue","sourceRoot":"src/pages/kefu/appChat/mobile","sourcesContent":["<template>\r\n  <div class=\"chat-box\">\r\n    <div class=\"head-box\">\r\n      <div class=\"back\" v-db-click @click=\"goBack\"><span class=\"iconfont iconfanhui\"></span></div>\r\n      <div class=\"title\">{{ nickname ? nickname + '-' : '' }}对话详情</div>\r\n    </div>\r\n    <!-- 商品信息 -->\r\n    <div class=\"broadcast-details_box\" v-if=\"productId && productInfo.id\">\r\n      <div class=\"broadcast_details_img\">\r\n        <img :src=\"productInfo.image\" />\r\n      </div>\r\n      <div class=\"broadcast_details_picBox\">\r\n        <div class=\"broadcast_details_tit\" v-text=\"productInfo.store_name\"></div>\r\n        <div class=\"acea-row row-between\">\r\n          <div class=\"broadcast_details_pic\">\r\n            ￥{{ productInfo.price }}<span class=\"broadcast_details_pic_num\">￥{{ productInfo.ot_price }}</span>\r\n          </div>\r\n          <div class=\"broadcast_details_btn\" v-db-click @click=\"sendProduct\">发送客服</div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <!-- 订单发送 -->\r\n    <div class=\"broadcast_box\" v-if=\"orderId && orderInfo.id\">\r\n      <div class=\"broadcast-details_num broadcast_num\">\r\n        <span>订单号：{{ orderInfo.order_id }}</span>\r\n        <span>{{ orderInfo.add_time_y }} {{ orderInfo.add_time_h }}</span>\r\n      </div>\r\n      <div class=\"broadcast-details_box\">\r\n        <div class=\"broadcast_details_img\">\r\n          <img :src=\"cartInfo.productInfo.image\" />\r\n          <div class=\"broadcast_details_model\">{{ orderInfo.cartInfo ? orderInfo.cartInfo.length : 0 }}件商品</div>\r\n        </div>\r\n        <div class=\"broadcast_details_picBox\">\r\n          <div class=\"broadcast_details_tit\">\r\n            {{ cartInfo.productInfo.store_name }}\r\n          </div>\r\n          <div class=\"acea-row row-between\">\r\n            <div class=\"broadcast_details_pic\">\r\n              ￥{{ cartInfo.productInfo.price\r\n              }}<text class=\"broadcast_details_pic_num\">￥{{ cartInfo.productInfo.ot_price }}</text>\r\n            </div>\r\n            <div class=\"broadcast_details_btn\" v-db-click @click=\"sendOrder\">发送客服</div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div class=\"chat-scroll-box\">\r\n      <vue-scroll\r\n        :ops=\"ops\"\r\n        ref=\"scrollBox\"\r\n        @refresh-activate=\"handleActivate\"\r\n        @refresh-start=\"handleStart\"\r\n        @refresh-before-deactivate=\"handleBeforeDeactivate\"\r\n        @refresh-deactivate=\"handleDeactivate\"\r\n      >\r\n        <div class=\"slot-refresh\" slot=\"refresh-deactive\"></div>\r\n        <div class=\"slot-refresh\" slot=\"refresh-beforeDeactive\"></div>\r\n        <div id=\"chatBox\" class=\"chat\" ref=\"chat\" style=\"padding: 0.3rem\">\r\n          <div v-for=\"(item, index) in records\" :key=\"index\" :id=\"`chat_${item.id}`\">\r\n            <div class=\"day-box\" v-if=\"item.show\">{{ item.time }}</div>\r\n            <div class=\"chat-item\" :class=\"{ 'right-box': item.to_uid == toUid }\">\r\n              <img class=\"avatar\" :src=\"item.avatar\" mode=\"\" />\r\n              <!-- 消息 -->\r\n              <div class=\"msg-box\" v-if=\"item.msn_type == 1\" v-html=\"item.msn\"></div>\r\n              <!-- 图片 -->\r\n              <div class=\"img-box\" v-if=\"item.msn_type == 3\" v-viewer><img v-lazy=\"item.msn\" mode=\"widthFix\" /></div>\r\n              <!-- 商品 -->\r\n              <div class=\"product-box\" v-if=\"item.msn_type == 5\" v-db-click @click=\"goProduct(item)\">\r\n                <img :src=\"item.productInfo.image\" />\r\n                <div class=\"info\">\r\n                  <div class=\"price\"><span>￥</span>{{ item.productInfo.price }}</div>\r\n                  <div class=\"name line2\">{{ item.productInfo.store_name }}</div>\r\n                </div>\r\n              </div>\r\n              <!-- 订单 -->\r\n              <div class=\"order-box\" v-if=\"item.msn_type == 6\" v-db-click @click=\"goOrderDetail(item)\">\r\n                <div class=\"title\">订单ID: {{ item.orderInfo.order_id }}</div>\r\n                <div class=\"info\">\r\n                  <img :src=\"item.orderInfo.cartInfo[0].productInfo.image\" />\r\n                  <div class=\"product-info\">\r\n                    <div class=\"name line2\">{{ item.orderInfo.cartInfo[0].productInfo.store_name }}</div>\r\n                    <div class=\"price\">¥{{ item.orderInfo.cartInfo[0].productInfo.price }}</div>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </vue-scroll>\r\n    </div>\r\n    <div class=\"footer-box\">\r\n      <div class=\"words\" v-if=\"userToken\" v-db-click @click=\"showWords\">\r\n        <el-upload\r\n          :show-file-list=\"false\"\r\n          :action=\"fileUrl\"\r\n          :before-upload=\"beforeUpload\"\r\n          :data=\"uploadData\"\r\n          :headers=\"header\"\r\n          :multiple=\"true\"\r\n          :on-success=\"handleSuccess\"\r\n          accept=\"image/*\"\r\n          :on-format-error=\"handleFormatError\"\r\n          style=\"margin-top: 1px; display: inline-block\"\r\n        >\r\n          <span class=\"iconfont icontupian3\"></span>\r\n        </el-upload>\r\n      </div>\r\n      <div class=\"input-box\">\r\n        <el-input v-model=\"con\" placeholder=\"请输入内容\" />\r\n        <span class=\"iconfont iconfasong\" v-db-click @click=\"sendText\" :class=\"{ isSend: isSend }\"></span>\r\n      </div>\r\n      <div class=\"emoji\" v-db-click @click=\"openBox(1)\"><span class=\"iconfont iconbiaoqing2\"></span></div>\r\n    </div>\r\n    <!-- 表情 -->\r\n    <div class=\"banner slider-banner\" v-show=\"isSwiper\">\r\n      <swiper class=\"swiper-wrapper\" ref=\"mySwiper\" :options=\"swiperOptions\">\r\n        <swiper-slide v-for=\"(emojiList, index) in emojiGroup\" :key=\"index\">\r\n          <i class=\"em\" :class=\"emoji\" v-for=\"emoji in emojiList\" :key=\"emoji\" v-db-click @click=\"addEmoji(emoji)\"></i>\r\n        </swiper-slide>\r\n      </swiper>\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<script>\r\nimport Setting from '@/setting';\r\nimport { Socket } from '@/libs/socket';\r\nimport util from '@/libs/util';\r\nimport emojiList from '@/utils/emoji';\r\nimport { serviceList, serviceListApi, getOrderApi, chatListApi, productApi } from '@/api/kefu';\r\nimport { getCookies, removeCookies, setCookies } from '@/libs/util';\r\nimport { isPicUpload } from '@/utils';\r\n\r\nconst chunk = function (arr, num) {\r\n  num = num * 1 || 1;\r\n  var ret = [];\r\n  arr.forEach(function (item, i) {\r\n    if (i % num === 0) {\r\n      ret.push([]);\r\n    }\r\n    ret[ret.length - 1].push(item);\r\n  });\r\n  return ret;\r\n};\r\n\r\nexport default {\r\n  name: 'chat_mobile',\r\n  data() {\r\n    return {\r\n      ops: {\r\n        vuescroll: {\r\n          mode: 'slide',\r\n          enable: false,\r\n          auto: false,\r\n          autoLoadDistance: 0,\r\n          pullRefresh: {\r\n            enable: true,\r\n            auto: false,\r\n            autoLoadDistance: 0,\r\n            tips: {\r\n              deactive: '',\r\n              active: '上拉加载更多',\r\n              start: 'Loading...',\r\n              beforeDeactive: ' ',\r\n            },\r\n          },\r\n          pushLoad: {\r\n            enable: false,\r\n          },\r\n        },\r\n        bar: {\r\n          background: '#393232',\r\n          opacity: '.5',\r\n          size: '2px',\r\n        },\r\n      },\r\n      swiperOptions: {},\r\n      status: false,\r\n      loading: false,\r\n      isTool: false,\r\n      isSwiper: false,\r\n      isWords: false,\r\n      autoplay: false,\r\n      circular: true,\r\n      interval: 3000,\r\n      duration: 500,\r\n      emojiGroup: chunk(emojiList, 21),\r\n      con: '',\r\n      toUid: '',\r\n      limit: 15,\r\n      upperId: 0,\r\n      chatList: [],\r\n      kefuInfo: {},\r\n      scrollTop: 0,\r\n      active: true,\r\n      isScroll: true,\r\n      oldHeight: 0,\r\n      selector: '',\r\n      transferList: [], //转接列表\r\n      isTransfer: false,\r\n      uploadData: {}, // 上传参数\r\n      header: {},\r\n      fileUrl: '',\r\n      userToken: '',\r\n      tourist_uid: '', //游客的uid\r\n      orderId: '',\r\n      orderInfo: '',\r\n      cartInfo: '',\r\n      productId: '',\r\n      productInfo: '',\r\n      tourist_avatar: '',\r\n    };\r\n  },\r\n  computed: {\r\n    isSend() {\r\n      if (this.con.length == 0) {\r\n        return false;\r\n      } else {\r\n        return true;\r\n      }\r\n    },\r\n    records() {\r\n      return this.chatList.map((item, index) => {\r\n        item.time = this.$moment(item.add_time * 1000).format('MMMDo h:mm');\r\n        if (index) {\r\n          if (item.add_time - this.chatList[index - 1].add_time >= 300) {\r\n            item.show = true;\r\n          } else {\r\n            item.show = false;\r\n          }\r\n        } else {\r\n          item.show = true;\r\n        }\r\n        return item;\r\n      });\r\n    },\r\n  },\r\n  created() {\r\n    let token = localStorage.getItem('LOGIN_STATUS_TOKEN') || '';\r\n    this.fileUrl = Setting.apiBaseURL.replace('adminapi', 'kefuapi') + '/tourist/upload';\r\n    this.userToken = token;\r\n    this.toUid = this.$route.query.toUid || '';\r\n    this.nickname = this.$route.query.nickname || '';\r\n    this.orderId = this.$route.query.orderId || '';\r\n    this.productId = this.$route.query.product_id || '';\r\n  },\r\n  mounted() {\r\n    if (!this.$wechat._isMobile()) this.$router.replace('/kefu/appChat');\r\n    let that = this;\r\n    this.getServiceList();\r\n    if (this.userToken) {\r\n      this.getOrderInfo();\r\n      this.getGoodsInfo();\r\n    }\r\n    // 上传头部token\r\n    this.header['Authori-zation'] = 'Bearer ' + getCookies('kefu_token');\r\n    Socket.then((ws) => {\r\n      if (this.userToken) {\r\n        ws.send({\r\n          type: 'login',\r\n          data: this.userToken,\r\n        });\r\n      }\r\n      // 消息接收\r\n      ws.$on(['reply', 'chat'], (data) => {\r\n        if (data.msn_type == 1 || data.msn_type == 2) {\r\n          data.msn = this.replace_em(data.msn);\r\n        }\r\n        this.chatList.push(data);\r\n        this.$nextTick(() => {\r\n          this.$refs['scrollBox'].refresh();\r\n          this.scrollBom();\r\n        });\r\n        setTimeout((res) => {\r\n          this.$refs['scrollBox'].refresh();\r\n        }, 300);\r\n      });\r\n      ws.$on('socket_error', () => {\r\n        this.$message.error('连接失败');\r\n      });\r\n      ws.$on('error', () => {\r\n        this.$message.error('连接失败');\r\n      });\r\n      ws.$on('to_transfer', (data) => {\r\n        ws.send({\r\n          data: {\r\n            id: data.toUid,\r\n          },\r\n          type: 'to_chat',\r\n        });\r\n      });\r\n      ws.$on('online', (data) => {\r\n        if (data.online == 0 && data.uid == that.toUid) {\r\n          that.$Modal.confirm({\r\n            title: '提示',\r\n            content: '客服已离线，是否需要反馈？',\r\n            okText: '确定',\r\n            cancelText: '取消',\r\n            onOk: () => {\r\n              that.$router.replace({\r\n                path: '/kefu/mobile_feedback',\r\n              });\r\n            },\r\n          });\r\n        }\r\n      });\r\n    });\r\n    this.$nextTick(() => {});\r\n  },\r\n  methods: {\r\n    goBack() {\r\n      this.$router.go(-1);\r\n    },\r\n    handleFormatError(file) {\r\n      this.$message.error('上传图片只能是 jpg、jpg、jpeg、gif 格式!');\r\n    },\r\n    // 获取商品信息\r\n    getGoodsInfo() {\r\n      if (!this.productId) return;\r\n      productApi(this.productId)\r\n        .then((res) => {\r\n          this.productInfo = res.data;\r\n        })\r\n        .catch((err) => {\r\n          this.$message.error(err.msg);\r\n        });\r\n    },\r\n    // 获取订单信息\r\n    getOrderInfo() {\r\n      if (!this.orderId) return;\r\n      getOrderApi(this.orderId, {\r\n        token: this.userToken,\r\n      }).then((res) => {\r\n        this.orderInfo = res.data;\r\n        if (this.orderInfo.add_time_h) {\r\n          this.orderInfo.add_time_h = this.orderInfo.add_time_h.substring(\r\n            0,\r\n            this.orderInfo.add_time_h.lastIndexOf(':'),\r\n          );\r\n        }\r\n        if (this.orderInfo.cartInfo.length) {\r\n          this.cartInfo = this.orderInfo.cartInfo[0];\r\n        }\r\n      });\r\n    },\r\n    // 获取随机客服\r\n    getServiceList() {\r\n      serviceListApi({\r\n        token: this.userToken,\r\n      })\r\n        .then((res) => {\r\n          this.toUid = res.data.uid;\r\n          this.tourist_uid = res.data.tourist_uid;\r\n          document.title = res.data.nickname;\r\n          this.tourist_avatar = res.data.tourist_avatar;\r\n          if (this.userToken) {\r\n            this.getChatList();\r\n          }\r\n          let obj = {\r\n            data: {\r\n              id: res.data.uid,\r\n              tourist_uid: this.tourist_uid,\r\n            },\r\n            type: 'to_chat',\r\n          };\r\n          Socket.then((ws) => {\r\n            ws.send(obj);\r\n          });\r\n        })\r\n        .catch((error) => {\r\n          this.$message.error(error.msg);\r\n          setTimeout((res) => {\r\n            this.$router.replace({\r\n              path: '/kefu/mobile_feedback',\r\n            });\r\n          }, 2000);\r\n        });\r\n    },\r\n    // 上传之前\r\n    beforeUpload(file) {\r\n      const isImage = file.type === 'image/jpeg' || file.type === 'image/png';\r\n      if (!isImage) {\r\n        this.$message.error('上传图片只能是 JPG、PNG 格式!');\r\n      }\r\n      this.uploadData = {\r\n        filename: file,\r\n        token: this.userToken,\r\n      };\r\n      let promise = new Promise((resolve) => {\r\n        this.$nextTick(function () {\r\n          resolve(true);\r\n        });\r\n      });\r\n      return promise;\r\n    },\r\n    // 上传成功\r\n    handleSuccess(res, file, fileList) {\r\n      if (res.status === 200) {\r\n        this.$message.success(res.msg);\r\n        this.sendMsg(res.data.url, 3);\r\n      } else {\r\n        this.$message.error(res.msg);\r\n      }\r\n    },\r\n    // 滚动到底部\r\n    scrollBom() {\r\n      setTimeout((res) => {\r\n        let num = parseFloat(document.getElementById('chatBox').offsetHeight);\r\n        if (this.$refs['scrollBox']) {\r\n          this.$refs['scrollBox'].scrollTo(\r\n            {\r\n              y: num,\r\n            },\r\n            300,\r\n          );\r\n        }\r\n      }, 300);\r\n    },\r\n    // 订单详情\r\n    goOrderDetail(item) {\r\n      this.$router.push({\r\n        path: `/kefu/orderDetail/${item.orderInfo.id}`,\r\n      });\r\n    },\r\n    // 底部功能区打开\r\n    openBox(key) {\r\n      if (key == 1) {\r\n        this.isTool = false;\r\n        this.isSwiper = !this.isSwiper;\r\n      } else {\r\n        this.isSwiper = false;\r\n        this.isTool = !this.isTool;\r\n      }\r\n      this.$refs['scrollBox'].refresh();\r\n      this.$nextTick(() => {\r\n        this.scrollBom();\r\n      });\r\n    },\r\n    showWords() {\r\n      this.isWords = true;\r\n    },\r\n\r\n    // 转接\r\n    goTransfer() {\r\n      this.isTransfer = true;\r\n    },\r\n    // 转接关闭\r\n    closeTransfer() {\r\n      this.transferList.forEach((el, index) => {\r\n        el.isCheck = false;\r\n      });\r\n      this.isTransfer = false;\r\n    },\r\n    // 商品信息\r\n    goodsInfo() {\r\n      this.$router.push({\r\n        path: '/kefu/goods/list?toUid=' + this.toUid,\r\n      });\r\n    },\r\n    // 表情点击\r\n    addEmoji(item) {\r\n      let val = `[${item}]`;\r\n      this.con += val;\r\n    },\r\n    // 聊天表情转换\r\n    replace_em(str) {\r\n      str = str.replace(/\\[em-([\\s\\S]*)\\]/g, \"<span class='em em-$1'/></span>\");\r\n      return str;\r\n    },\r\n    // 获取聊天列表\r\n    getChatList() {\r\n      let self = this;\r\n      chatListApi({\r\n        limit: this.limit,\r\n        uid: this.toUid,\r\n        upperId: this.upperId,\r\n        token: this.userToken,\r\n      }).then((res) => {\r\n        var sH = 0;\r\n        res.data.forEach((el) => {\r\n          if (el.msn_type == 1 || el.msn_type == 2) {\r\n            el.msn = this.replace_em(el.msn);\r\n          }\r\n        });\r\n        let selector = '';\r\n        if (this.upperId == 0) {\r\n          selector = `chat_${res.data[res.data.length - 1].id}`;\r\n        } else {\r\n          selector = `chat_${this.chatList[0].id}`;\r\n        }\r\n        this.selector = selector;\r\n        this.chatList = [...res.data, ...this.chatList];\r\n        this.loading = false;\r\n        this.isScroll = res.data.length >= this.limit;\r\n        this.$refs['scrollBox'].refresh();\r\n        this.$nextTick(() => {\r\n          this.$emit('change', true);\r\n          let num = parseFloat(document.getElementById(selector).offsetTop) - 60;\r\n          this.$refs['scrollBox'].scrollTo(\r\n            {\r\n              y: num,\r\n            },\r\n            0,\r\n          );\r\n        });\r\n      });\r\n    },\r\n    // 发送订单\r\n    sendOrder() {\r\n      this.sendMsg(this.orderId, 6);\r\n      this.orderId = 0;\r\n      this.orderInfo = {};\r\n    },\r\n    // 发送商品\r\n    sendProduct() {\r\n      this.sendMsg(this.productId, 5);\r\n      this.productId = 0;\r\n      this.productInfo = {};\r\n    },\r\n    // 发送消息\r\n    sendText() {\r\n      if (!this.isSend) {\r\n        this.$message.error('请输入内容');\r\n      }\r\n      this.sendMsg(this.con, 1);\r\n      this.con = '';\r\n    },\r\n    // ws发送\r\n    sendMsg(msn, type) {\r\n      let obj = {\r\n        type: 'chat',\r\n        data: {\r\n          msn,\r\n          type,\r\n          is_tourist: this.userToken ? 0 : 1,\r\n          to_uid: this.toUid,\r\n          tourist_uid: this.tourist_uid,\r\n          form_type: this.$wechat.isWeixin() ? 1 : 3,\r\n          tourist_avatar: this.userToken ? '' : this.tourist_avatar,\r\n        },\r\n      };\r\n      Socket.then((ws) => {\r\n        ws.send(obj);\r\n      });\r\n    },\r\n    // 图片上传\r\n    uploadImg() {\r\n      let self = this;\r\n      self.$util.uploadImageOne('upload/image', function (res) {\r\n        if (res.status == 200) {\r\n          self.sendMsg(res.data.url, 3);\r\n        }\r\n      });\r\n    },\r\n    //  商品详情页\r\n    goProduct(item) {\r\n      let url = window.location.protocol + '//' + window.location.host + '/pages/goods_details/index?id=' + item.msn;\r\n      window.open(url, '_blank');\r\n    },\r\n    // 用户订单\r\n    goAdminOrder() {\r\n      // this.$router.push({\r\n      //     path:'/kefu/orderList/0/'+this.toUid\r\n      // })\r\n      let url =\r\n        window.location.protocol +\r\n        '//' +\r\n        window.location.host +\r\n        '/pages/goods/order_details/index?order_id=' +\r\n        item.msn;\r\n      window.open(url, '_blank');\r\n    },\r\n    // 滚动到底部\r\n    height() {\r\n      let self = this;\r\n      var scrollTop = 0;\r\n      let info = uni.createSelectorQuery().select('.chat');\r\n      setTimeout((res) => {\r\n        info\r\n          .boundingClientRect(function (data) {\r\n            //data - 各种参数\r\n            scrollTop = data.height;\r\n            if (self.active) {\r\n              self.scrollTop = parseInt(scrollTop) + 500;\r\n            } else {\r\n              self.scrollTop = parseInt(scrollTop) + 100;\r\n            }\r\n          })\r\n          .exec();\r\n      }, 1000);\r\n    },\r\n    handleActivate(vm, refreshDom) {\r\n      this.upperId = this.chatList[0].id;\r\n    },\r\n    handleStart(vm, refreshDom, done) {\r\n      setTimeout(() => {\r\n        // load finished\r\n        done();\r\n      }, 2000);\r\n    },\r\n    handleBeforeDeactivate(vm, refreshDom, done) {\r\n      if (this.userToken) {\r\n        this.getChatList();\r\n        this.$on('change', (data) => {\r\n          if (data) done();\r\n        });\r\n      } else {\r\n        done();\r\n      }\r\n    },\r\n    handleDeactivate(vm, refreshDom) {\r\n      let num = parseFloat(document.getElementById(this.selector).offsetTop) - 60;\r\n      this.$refs['scrollBox'].scrollTo(\r\n        {\r\n          y: num,\r\n        },\r\n        0,\r\n      );\r\n    },\r\n  },\r\n};\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n.head-box {\r\n  position: relative;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  color: #fff;\r\n  height: 45px;\r\n  background: linear-gradient(85deg, #3875ea 0%, #1890fc 100%);\r\n  span {\r\n    position: absolute;\r\n    width: 45px;\r\n    height: 100%;\r\n    left: 0;\r\n    top: 0;\r\n    text-align: center;\r\n    line-height: 45px;\r\n  }\r\n}\r\n.chat-box {\r\n  display: flex;\r\n  flex-direction: column;\r\n  height: 100%;\r\n  height: 100vh;\r\n  background: #f0f1f2;\r\n  .head-box {\r\n    background: linear-gradient(85deg, #3875ea 0%, #1890fc 100%);\r\n    .title-hd {\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      position: relative;\r\n      height: 43px;\r\n      padding: 0 0.3rem;\r\n      color: #fff;\r\n      .icon-fanhui {\r\n        position: absolute;\r\n        left: 0.3rem;\r\n        top: 50%;\r\n        transform: translateY(-50%);\r\n      }\r\n      .icon-gengduo2 {\r\n        /* #ifdef MP */\r\n        position: absolute;\r\n        right: 2.1rem;\r\n        top: 50%;\r\n        transform: translateY(-50%);\r\n        /* #endif */\r\n      }\r\n    }\r\n  }\r\n  .scroll-box {\r\n    flex: 1;\r\n  }\r\n  .footer-box {\r\n    display: flex;\r\n    align-items: center;\r\n    height: 1rem;\r\n    padding: 0 0.3rem;\r\n    color: rgba(0, 0, 0, 0.8);\r\n    background: #f7f7f7;\r\n    .words {\r\n      margin-right: 0.18rem;\r\n    }\r\n    .words .iconfont {\r\n      font-size: 0.5rem;\r\n    }\r\n    .input-box {\r\n      display: flex;\r\n      align-items: center;\r\n      flex: 1;\r\n      height: 0.64rem;\r\n      padding-right: 0.05rem;\r\n      background-color: #fff;\r\n      border-radius: 0.32rem;\r\n      overflow: hidden;\r\n\r\n      input {\r\n        flex: 1;\r\n        padding-left: 0.2rem;\r\n        height: 100%;\r\n        border: transparent !important;\r\n      }\r\n      ::v-deep .el-input__inner {\r\n        font-size: 0.28rem !important;\r\n      }\r\n      ::v-deep .el-input__inner,\r\n      .el-input__inner:hover,\r\n      .el-input__inner:focus {\r\n        border: transparent;\r\n        box-shadow: none;\r\n      }\r\n      .iconfont {\r\n        font-size: 0.5rem;\r\n        color: #ccc;\r\n        font-weight: normal;\r\n      }\r\n      .isSend {\r\n        color: #3875ea;\r\n      }\r\n    }\r\n    .emoji .iconfont {\r\n      margin-left: 0.18rem;\r\n      font-size: 0.5rem;\r\n    }\r\n    .more .iconfont {\r\n      margin-left: 0.18rem;\r\n      font-size: 0.5rem;\r\n    }\r\n  }\r\n}\r\n.tool-wrapper {\r\n  display: flex;\r\n  justify-content: space-between;\r\n  padding: 0.45rem 0.6rem;\r\n  background: #fff;\r\n  font-size: 0.24rem;\r\n  .tool-item {\r\n    text-align: center;\r\n\r\n    img {\r\n      width: 1.04rem;\r\n      height: 1.04rem;\r\n    }\r\n  }\r\n}\r\n.slider-banner {\r\n  padding-bottom: 0.25rem;\r\n  background: #fff;\r\n  .em {\r\n    display: inline-block;\r\n    width: 0.5rem;\r\n    height: 0.5rem;\r\n    margin: 0.4rem 0 0 0.5rem;\r\n  }\r\n}\r\n.words-mask {\r\n  z-index: 50;\r\n  position: fixed;\r\n  left: 0;\r\n  top: 0;\r\n  right: 0;\r\n  bottom: 0;\r\n  background: rgba(0, 0, 0, 0.5);\r\n  .content {\r\n    position: absolute;\r\n    left: 0;\r\n    right: 0;\r\n    top: 1.14rem;\r\n    bottom: 0;\r\n    display: flex;\r\n    flex-direction: column;\r\n    background: #fff;\r\n    border-radius: 0.06rem 0.06rem 0px 0px;\r\n    .title-box {\r\n      padding: 0 0.3rem 0.3rem;\r\n      position: relative;\r\n      border-bottom: 1px solid #f5f6f9;\r\n      .tab-box {\r\n        position: relative;\r\n        display: flex;\r\n        justify-content: space-between;\r\n        padding: 0.4rem 2.2rem 0.3rem;\r\n        font-size: 0.32rem;\r\n        color: #9f9f9f;\r\n        .on {\r\n          color: #3875ea;\r\n          font-weight: bold;\r\n        }\r\n        .right-icon {\r\n          position: absolute;\r\n          right: 0;\r\n          top: 50%;\r\n          transform: translateY(-50%);\r\n          .iconfont {\r\n            margin-left: 0.2rem;\r\n            font-size: 0.48rem;\r\n            color: #c8cad0;\r\n          }\r\n        }\r\n      }\r\n      .input-box {\r\n        display: flex;\r\n        align-items: center;\r\n        width: 6.9rem;\r\n        height: 0.64rem;\r\n        padding-right: 0.05rem;\r\n        margin-left: 0.18rem;\r\n        border-radius: 0.32rem;\r\n        overflow: hidden;\r\n        ::v-deep .el-input__inner {\r\n          background: #f5f6f9;\r\n        }\r\n        ::v-deep .el-input__inner,\r\n        .el-input__inner:hover,\r\n        .el-input__inner:focus {\r\n          border: transparent;\r\n          box-shadow: none;\r\n        }\r\n      }\r\n      .icon-cha1 {\r\n        position: absolute;\r\n        right: 0;\r\n        top: 50%;\r\n        transform: translateY(-50%);\r\n      }\r\n    }\r\n    .scroll-box {\r\n      flex: 1;\r\n      display: flex;\r\n      overflow: hidden;\r\n      .scroll-left {\r\n        width: 1.76rem;\r\n        height: 100%;\r\n        overflow-y: scroll;\r\n        -webkit-overflow-scrolling: touch;\r\n        background: #f5f6f9;\r\n        .left-item {\r\n          position: relative;\r\n          display: flex;\r\n          align-items: center;\r\n          justify-content: center;\r\n          width: 100%;\r\n          height: 1.09rem;\r\n          color: #282828;\r\n          font-size: 0.26rem;\r\n          &.active {\r\n            color: #3875ea;\r\n            background: #fff;\r\n            &:after {\r\n              content: ' ';\r\n              position: absolute;\r\n              left: 0;\r\n              top: 50%;\r\n              transform: translateY(-50%);\r\n              width: 0.06rem;\r\n              height: 0.46rem;\r\n              background: #3875ea;\r\n            }\r\n          }\r\n          &.add_cate {\r\n            color: #9f9f9f;\r\n            font-size: 0.26rem;\r\n            .iconfont {\r\n              margin-right: 0.1rem;\r\n              font-size: 0.24rem;\r\n            }\r\n          }\r\n        }\r\n      }\r\n      .right-box {\r\n        flex: 1;\r\n        overflow: scroll;\r\n        -webkit-overflow-scrolling: touch;\r\n      }\r\n      .msg-item {\r\n        padding: 0.25rem 0.3rem;\r\n        color: #888888;\r\n        font-size: 0.28rem;\r\n        .title {\r\n          margin-right: 0.2rem;\r\n          color: #282828;\r\n        }\r\n        &.add-mg {\r\n          display: flex;\r\n          align-items: center;\r\n          justify-content: flex-end;\r\n          font-size: 0.28rem;\r\n          padding: 0.15rem 0.3rem;\r\n          .iconfont {\r\n            font-size: 0.36rem;\r\n            margin-right: 0.1rem;\r\n          }\r\n        }\r\n      }\r\n    }\r\n  }\r\n}\r\n.chat-scroll-box {\r\n  flex: 1;\r\n  overflow: hidden;\r\n  .day-box {\r\n    margin-bottom: 0.2rem;\r\n    font-size: 0.24rem;\r\n    color: #999;\r\n    text-align: center;\r\n  }\r\n  .chat-item {\r\n    display: flex;\r\n    margin-bottom: 0.36rem;\r\n    font-size: 0.28rem;\r\n    .avatar {\r\n      width: 0.8rem;\r\n      height: 0.8rem;\r\n      border-radius: 50%;\r\n    }\r\n    .msg-box {\r\n      display: flex;\r\n      align-items: center;\r\n      max-width: 4.52rem;\r\n      margin-left: 0.22rem;\r\n      padding: 0.1rem 0.24rem;\r\n      background: #fff;\r\n      border-radius: 0.14rem;\r\n      word-break: break-all;\r\n      font-size: 0.28rem;\r\n    }\r\n    .img-box {\r\n      width: 2.7rem;\r\n      margin-left: 0.22rem;\r\n\r\n      img {\r\n        width: 2.7rem;\r\n        border-radius: 6px;\r\n      }\r\n    }\r\n    .product-box {\r\n      width: 4.52rem;\r\n      background-color: #fff;\r\n      border-radius: 0.14rem;\r\n      overflow: hidden;\r\n      margin-left: 0.22rem;\r\n\r\n      img {\r\n        width: 4.52rem;\r\n      }\r\n      .info {\r\n        padding: 0.16rem 0.26rem;\r\n        .price {\r\n          font-size: 0.36rem;\r\n          color: #f74c31;\r\n\r\n          text {\r\n            font-size: 0.28rem;\r\n          }\r\n        }\r\n      }\r\n    }\r\n    .order-box {\r\n      width: 4.52rem;\r\n      margin-left: 0.22rem;\r\n      background-color: #fff;\r\n      border-radius: 0.14rem;\r\n      .title {\r\n        padding: 0.15rem 0.2rem;\r\n        font-size: 0.26rem;\r\n        color: #282828;\r\n        border-bottom: 1px solid #eceff8;\r\n      }\r\n      .info {\r\n        display: flex;\r\n        padding: 0.2rem;\r\n\r\n        img {\r\n          width: 1.24rem;\r\n          height: 1.24rem;\r\n          border-radius: 0.06rem;\r\n        }\r\n        .product-info {\r\n          flex: 1;\r\n          display: flex;\r\n          flex-direction: column;\r\n          justify-content: space-between;\r\n          margin-left: 0.16rem;\r\n          .name {\r\n            font-size: 0.26rem;\r\n          }\r\n          .price {\r\n            font-size: 0.3rem;\r\n            color: #f74c31;\r\n          }\r\n        }\r\n      }\r\n    }\r\n    &.right-box {\r\n      flex-direction: row-reverse;\r\n      .msg-box {\r\n        margin-left: 0;\r\n        margin-right: 0.22rem;\r\n        background-color: #9cec60;\r\n\r\n        color: #333;\r\n      }\r\n      .img-box {\r\n        margin-left: 0;\r\n        margin-right: 0.22rem;\r\n      }\r\n      .product-box {\r\n        margin-left: 0;\r\n        margin-right: 0.22rem;\r\n      }\r\n      .order-box {\r\n        margin-left: 0;\r\n        margin-right: 0.22rem;\r\n      }\r\n    }\r\n    .em {\r\n      margin: 0;\r\n    }\r\n  }\r\n}\r\n.transfer-mask {\r\n  z-index: 30;\r\n  position: fixed;\r\n  left: 0;\r\n  top: 0;\r\n  width: 100%;\r\n  height: 100%;\r\n  background: rgba(0, 0, 0, 0.5);\r\n  .content {\r\n    position: absolute;\r\n    left: 0;\r\n    bottom: 0;\r\n    transform: translateY(100%);\r\n    top: 2.5rem;\r\n    right: 0;\r\n    display: flex;\r\n    flex-direction: column;\r\n    background: #fff;\r\n    border-radius: 0.16rem 0.16rem 0px 0px;\r\n    &.on {\r\n      animation: up 0.2s linear;\r\n      animation-fill-mode: forwards;\r\n    }\r\n    .title {\r\n      position: relative;\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      height: 1.1rem;\r\n      font-size: 0.32rem;\r\n      font-weight: bold;\r\n      color: #282828;\r\n      .iconfont {\r\n        position: absolute;\r\n        right: 0.3rem;\r\n        top: 50%;\r\n        transform: translateY(-50%);\r\n        color: #c8cad0;\r\n        font-size: 0.44rem;\r\n      }\r\n    }\r\n    .list-wrapper {\r\n      flex: 1;\r\n      padding-left: 0.3rem;\r\n      overflow-y: scroll;\r\n      -webkit-overflow-scrolling: touch;\r\n      .list-item {\r\n        display: flex;\r\n        align-items: center;\r\n        padding: 0.16rem 0;\r\n        border-bottom: 1px solid #eceff8;\r\n        .check-box {\r\n          width: 0.72rem;\r\n        }\r\n        .avatar-box img {\r\n          width: 0.9rem;\r\n          height: 0.9rem;\r\n          border-radius: 0.06rem;\r\n        }\r\n        .nickName {\r\n          margin-left: 0.28rem;\r\n          color: #282828;\r\n          font-size: 0.3rem;\r\n          font-weight: bold;\r\n        }\r\n      }\r\n    }\r\n    .btn {\r\n      width: 6.9rem;\r\n      height: 0.86rem;\r\n      margin: 0.5rem auto;\r\n      color: #fff;\r\n      background: #3875ea;\r\n      font-size: 0.3rem;\r\n      border-radius: 0.43rem !important;\r\n    }\r\n  }\r\n}\r\n.broadcast-details_box {\r\n  display: flex;\r\n  background: #fff;\r\n  border-radius: 6px;\r\n  padding: 0.24rem;\r\n}\r\n.broadcast_details_img {\r\n  width: 1.4rem;\r\n  height: 1.4rem;\r\n  border-radius: 8px;\r\n  overflow: hidden;\r\n  position: relative;\r\n}\r\n.broadcast_details_img img {\r\n  width: 100%;\r\n  height: 100%;\r\n}\r\n.broadcast_details_picBox {\r\n  width: 75%;\r\n  margin-left: 0.24rem;\r\n}\r\n.broadcast_details_tit {\r\n  font-size: 0.28rem;\r\n  color: #333333;\r\n  height: 0.85rem;\r\n  font-weight: 800;\r\n  overflow: hidden;\r\n  text-overflow: ellipsis;\r\n  display: -webkit-box;\r\n  -webkit-line-clamp: 2;\r\n  -webkit-box-orient: vertical;\r\n  text-align: left !important;\r\n}\r\n.broadcast_details_pic {\r\n  font-size: 0.36rem;\r\n  color: #e93323;\r\n  text-align: left;\r\n}\r\n.broadcast_details_pic_num {\r\n  text-decoration: line-through;\r\n  font-size: 0.28rem;\r\n  color: rgba(0, 0, 0, 0.5);\r\n  margin-left: 0.1rem;\r\n}\r\n.broadcast_details_btn {\r\n  width: 1.3rem;\r\n  height: 0.5rem;\r\n  background: #e83323;\r\n  opacity: 1;\r\n  border-radius: 1.25rem;\r\n  color: #fff;\r\n  font-size: 0.24rem;\r\n  text-align: center;\r\n  line-height: 0.5rem;\r\n}\r\n.broadcast-details_num {\r\n  width: 100%;\r\n  height: 0.8rem;\r\n  line-height: 0.8rem;\r\n  color: #000000;\r\n  font-size: 0.26rem;\r\n  display: flex;\r\n  justify-content: space-between;\r\n  background: #fff;\r\n  border-bottom: 1px dashed rgba(0, 0, 0, 0.2);\r\n  padding: 0 0.24rem;\r\n}\r\n</style>\r\n<style>\r\n@keyframes up {\r\n  0% {\r\n    transform: translateY(100%);\r\n  }\r\n  100% {\r\n    transform: translateY(0);\r\n  }\r\n}\r\n.emoji-outer {\r\n  position: absolute;\r\n  right: 0.5rem;\r\n  bottom: 0.3rem;\r\n  width: 0.5rem;\r\n  height: 0.5rem;\r\n}\r\n</style>\r\n"]}]}