{"remainingRequest":"D:\\front\\item\\zyAdmin\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!D:\\front\\item\\zyAdmin\\src\\pages\\kefu\\mobile\\index.vue?vue&type=style&index=2&id=461aab12&lang=css","dependencies":[{"path":"D:\\front\\item\\zyAdmin\\src\\pages\\kefu\\mobile\\index.vue","mtime":1761614939022},{"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":";AAiiCA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","file":"index.vue","sourceRoot":"src/pages/kefu/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 }} - 对话详情</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 0.3rem 0\">\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.uid == kefuInfo.uid }\">\r\n              <img\r\n                class=\"avatar\"\r\n                v-lazy=\"item.avatar\"\r\n                mode=\"\"\r\n                v-db-click\r\n                @click=\"goUserInfo(item, item.uid == kefuInfo.uid)\"\r\n              />\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 v-lazy=\"item.productInfo.image\" mode=\"widthFix\" />\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 v-lazy=\"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-db-click @click=\"showWords\"><span class=\"iconfont iconhuashu1\"></span></div>\r\n      <div class=\"input-box\">\r\n        <el-input v-model=\"con\" placeholder=\"请输入内容\" style=\"font-size: 0.28rem\" />\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 class=\"more\" v-db-click @click=\"openBox(2)\"><span class=\"iconfont icongengduozhankai1\"></span></div>\r\n    </div>\r\n    <!-- 工具 -->\r\n    <div class=\"tool-wrapper\" v-if=\"isTool\">\r\n      <div class=\"tool-item\">\r\n        <el-upload\r\n          :show-file-list=\"false\"\r\n          :action=\"fileUrl\"\r\n          class=\"mr10 mb10\"\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          <img src=\"../static/tool-01.png\" mode=\"\" />\r\n          <div>图片</div>\r\n        </el-upload>\r\n      </div>\r\n      <div class=\"tool-item\" v-db-click @click=\"goTransfer\">\r\n        <img src=\"../static/tool-02.png\" mode=\"\" />\r\n        <div>转接</div>\r\n      </div>\r\n      <div class=\"tool-item\" v-db-click @click=\"goAdminOrder\">\r\n        <img src=\"../static/tool-03.png\" mode=\"\" />\r\n        <div>交易订单</div>\r\n      </div>\r\n      <div class=\"tool-item\" v-db-click @click=\"goodsInfo\">\r\n        <img src=\"../static/tool-04.png\" mode=\"\" />\r\n        <div>商品信息</div>\r\n      </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    <!-- 常用语 -->\r\n    <words :isWords=\"isWords\" @closeBox=\"closeBox\" @selectMsg=\"selectMsg\"></words>\r\n    <!-- 转接 -->\r\n    <div class=\"transfer-mask\" v-if=\"isTransfer\">\r\n      <div class=\"content\" :class=\"{ on: isTransfer }\">\r\n        <div class=\"title\">转接客服<span class=\"iconfont iconcha\" v-db-click @click=\"closeTransfer\"></span></div>\r\n        <div class=\"list-wrapper\">\r\n          <el-radio-group v-model=\"activeKF\">\r\n            <el-radio class=\"list-item\" v-for=\"(item, index) in transferList\" :label=\"item.uid\" :key=\"index\">\r\n              <div class=\"avatar-box\">\r\n                <img v-lazy=\"item.avatar\" alt=\"\" />\r\n              </div>\r\n              <p class=\"nickName\">{{ item.wx_name }}</p>\r\n            </el-radio>\r\n          </el-radio-group>\r\n        </div>\r\n        <el-button class=\"btn\" v-db-click @click=\"confirm\">确定</el-button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<script>\r\nvar mp3 = require('@/assets/video/notice.mp3');\r\nvar mp3 = new Audio(mp3);\r\nimport Setting from '@/setting';\r\nimport words from '../components/words';\r\nimport { Socket } from '@/libs/socket';\r\nimport util from '@/libs/util';\r\nimport emojiList from '@/utils/emoji';\r\nimport { serviceList, speeChcraft, transferList, serviceCate, serviceTransfer } 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: 'adminChat_index',\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\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      tourist: 0,\r\n      activeKF: '',\r\n    };\r\n  },\r\n  components: {\r\n    words,\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      if (!this.chatList.length) return;\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    this.fileUrl = Setting.apiBaseURL.replace('adminapi', 'kefuapi') + '/upload';\r\n    this.toUid = this.$route.query.toUid || '';\r\n    this.nickname = this.$route.query.nickname || '';\r\n    this.kefuInfo = JSON.parse(getCookies('kefuInfo'));\r\n    Promise.all([this.getChatList(), this.getTransferList()]);\r\n  },\r\n  mounted() {\r\n    window.document.title = `${this.$route.query.nickname || ''} - 对话详情`;\r\n    // 上传头部token\r\n    this.header['Authori-zation'] = 'Bearer ' + getCookies('kefu_token');\r\n    let isLogin = JSON.parse(sessionStorage.getItem('wsLogin'));\r\n    Socket.then((ws) => {\r\n      let that = this;\r\n      if (isLogin) {\r\n        ws.send({\r\n          data: {\r\n            id: this.toUid,\r\n          },\r\n          type: 'to_chat',\r\n        });\r\n      } else {\r\n        ws.send({\r\n          type: 'kefu_login',\r\n          data: getCookies('kefu_token'),\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        // if (data.msn_type == 5)\r\n        this.chatList.push(data);\r\n\r\n        this.$refs['scrollBox'].refresh();\r\n        this.$nextTick(() => {\r\n          this.scrollBom();\r\n        });\r\n      });\r\n      ws.$on('reply', (data) => {\r\n        // mp3.play();\r\n      });\r\n      ws.$on('socket_error', () => {\r\n        this.$util.Tips({\r\n          title: '连接失败',\r\n        });\r\n      });\r\n    });\r\n    this.$nextTick(() => {});\r\n  },\r\n  beforeDestroy() {\r\n    Socket.then((ws) => {\r\n      ws.send({\r\n        data: {\r\n          id: 0,\r\n        },\r\n        type: 'to_chat',\r\n      });\r\n    });\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    goUserInfo(item, status) {\r\n      if (!status) {\r\n        this.$router.push({\r\n          path: `/kefu/user/index/${item.uid}/${item.type}`,\r\n        });\r\n      }\r\n    },\r\n    // 上传之前\r\n    beforeUpload(file) {\r\n      return isPicUpload(file);\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      // uni.navigateTo({\r\n      //     url: `/pages/admin/orderDetail/index?id=${item.msn}`\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    confirm() {\r\n      if (this.activeKF) {\r\n        serviceTransfer({\r\n          uid: this.toUid,\r\n          kefuToUid: this.activeKF,\r\n        })\r\n          .then((res) => {\r\n            this.transferList.forEach((el, index) => {\r\n              el.isCheck = false;\r\n            });\r\n            this.$message.success(res.msg);\r\n            this.isTransfer = false;\r\n          })\r\n          .catch((error) => {\r\n            this.$message.error(error.msg);\r\n          });\r\n      } else {\r\n        this.$message.error('请选择转接客服');\r\n      }\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      serviceList({\r\n        limit: this.limit,\r\n        uid: this.toUid,\r\n        upperId: this.upperId,\r\n        is_tourist: this.$route.query.is_tourist,\r\n      }).then((res) => {\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.$nextTick(() => {\r\n          this.$emit('change', true);\r\n          this.$refs['scrollBox'].refresh();\r\n          if (this.upperId == 0) {\r\n            setTimeout((res) => {\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            }, 300);\r\n          }\r\n        });\r\n      });\r\n    },\r\n    // 发送消息\r\n    sendText() {\r\n      if (!this.isSend) {\r\n        return 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          to_uid: this.toUid,\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    selectWords(item) {\r\n      this.isWords = false;\r\n      this.sendMsg(item.message, 1);\r\n    },\r\n    //  商品详情页\r\n    goProduct(item) {\r\n      this.$router.push({\r\n        path: '/kefu/goods/detail?goodsId=' + item.msn,\r\n      });\r\n    },\r\n    // 管理员订单\r\n    goAdminOrder() {\r\n      this.$router.push({\r\n        path: '/kefu/orderList/0/' + this.toUid,\r\n      });\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    // 转接列表\r\n    getTransferList() {\r\n      transferList({\r\n        uid: this.toUid,\r\n      }).then((res) => {\r\n        res.data.list.forEach((item, index) => {\r\n          item.isCheck = false;\r\n        });\r\n        this.transferList = res.data.list;\r\n      });\r\n    },\r\n    // 关闭常用语\r\n    closeBox() {\r\n      this.isWords = false;\r\n    },\r\n    // 选择话术\r\n    selectMsg(data) {\r\n      this.con += data;\r\n      this.isWords = false;\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      this.getChatList();\r\n\r\n      this.$on('change', (data) => {\r\n        if (data) 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<style>\r\nhtml,\r\nbody {\r\n  font-size: 50px;\r\n}\r\n</style>\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 .iconfont {\r\n      font-size: 0.5rem;\r\n    }\r\n    .input-box {\r\n      display: flex;\r\n      align-items: center;\r\n      width: 4.92rem;\r\n      height: 0.64rem;\r\n      padding-right: 0.05rem;\r\n      margin-left: 0.18rem;\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      .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      color: #333;\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      .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 #f0f2f7;\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</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"]}]}