vue+pc端sokect聊天功能实现(可发送图片，视频，评分，选择产品）

1.效果图

<template>
  <div class="app-container">
    <div class="content">
      <div class="wxchatBorderLeft">
        <el-row>
          <div style="padding: 10px;">
          </div>
        </el-row>
        <el-row>
          <div>
            <el-col :span="24">
              <div class="contact" v-for="(item,index) in list" :key='index' @click='getInfo(item)'>
                <div style="display: inline-block;padding: 12px;">
                  <el-avatar shape="square" :src="item.icon"></el-avatar>
                </div>
                <div style="display: inline-block;">
                  <el-col>
                    <div class="wxchatPeople">{{item.name}}</div>
                  </el-col>
                  <el-col>
                    <div class="wxchatNews" v-if="item.type=='TIMVideoFileElem'">[ 视频 ]</div>
                    <div class="wxchatNews" v-else-if="item.type=='TIMImageElem'">[ 图片 ]</div>
                    <div class="wxchatNews" v-else-if="item.type=='TIMSoundElem'">[ 语音 ]</div>
                    <div class="wxchatNews" v-else-if="item.type=='TIMProductElem'">[ 产品 ]</div>
                    <div class="wxchatNews" v-else>{{item.message}}</div>
                  </el-col>
                </div>
              </div>
            </el-col>
          </div>
        </el-row>
      </div>
      <div class="rightContent">
        <div class="wxchatBorderRightTop">
          <div class="wxchatName">{{userName}}</div>
        </div>
        <div class="wxchatBorderRightMid" @scroll="scrollEvent">
          <!-- <div class="more">{{moreText}}</div> -->
          <div v-for="(item,index) in userList" :key='index'>
            <div style="margin-left: 30px;margin-top: 15px;" v-if='userData.id!=item.sendMember.id'>
              <div align="center" style="padding: 15px 0;">
                <el-tag type="info" size="mini">{{item.time}}</el-tag>
              </div>
              <el-row>
                <el-col :span="2">
                  <el-avatar shape="square" :src="item.sendMember.icon" style="width: 35px;height: 35px;"></el-avatar>
                </el-col>
                <el-col :span="12">
                  <div class="chatPop1">
                    <div class="chatPop_item" style="line-height: 19px;" v-if="item.type=='TIMVideoFileElem'">
                      <video width="150px" height="150px" style="padding: 0 5px;" controls="controls" loop :src="item.message">
                        您的浏览器不支持视频播放</video>
                    </div>
                    <div class="chatPop_item" style="line-height: 19px;" v-else-if="item.type=='TIMImageElem'">
                      <el-image v-image-preview style="width: 90px;height: 90px;" :src="item.message" fit="cover"></el-image>
                    </div>
                    <div class="chatPop_item" style="line-height: 19px;" v-else-if="item.type=='TIMSoundElem'">
                      <audio style="width: 241px;height: 61px;" :src="item.message" controls="controls"></audio>
                    </div>
                    <div class="chatPop_item" style="line-height: 19px;" v-else-if="item.type=='TIMProductElem'">
                      <div style="border: 1px solid #CCCCCC;display: flex;flex-direction: column;background-color: #FFFFFF;">
                        <el-image v-image-preview :src="item.message.pic"
                          fit="cover"></el-image>
                        <span style="font-size: 16px;line-height: 25px;color: #000000;padding: 1px 8px;">{{item.message.proName}}</span>
                        <span style="color: #D30E0E;font-weight: bold;line-height: 25px;padding: 1px 6px;">￥{{item.message.price}}</span>
                      </div>
                    </div>
                    <div class="chatPop_item" style="line-height: 19px; word-wrap:break-word;" v-else>{{item.message}}</div>
                  </div>
                </el-col>
              </el-row>
            </div>
            <div style="margin-left: 30px;margin-top: 15px;" v-if='userData.id==item.sendMember.id'>
              <div align="center" style="padding: 15px 0;">
                <el-tag type="info" size="mini">{{item.time}}</el-tag>
              </div>
              <el-row>
                <el-col :span="21">
                  <div class="chatPop2">
                    <div class="chatPop_item" style="line-height: 19px;" v-if="item.type=='TIMVideoFileElem'">
                      <video width="150px" height="150px" style="padding: 0 5px;" controls="controls" loop :src="item.message">
                        您的浏览器不支持视频播放</video>
                    </div>
                    <div class="chatPop_item" style="line-height: 19px;" v-else-if="item.type=='TIMImageElem'">
                      <el-image v-image-preview style="width: 90px;height: 90px;" :src="item.message" fit="cover"
                        :preview-src-list="srcList"></el-image>
                    </div>
                    <div class="chatPop_item" style="line-height: 19px;" v-else-if="item.type=='TIMSoundElem'">
                      <audio style="width: 241px;height: 61px;" :src="item.message" controls="controls"></audio>
                    </div>
                    <div class="chatPop_item" style="line-height: 19px;" v-else-if="item.type=='TIMProductElem'">
                      <div style="display: flex;flex-direction: column;background-color: #FFFFFF;">
                        <el-image v-image-preview :src="item.message.pic"
                          fit="cover"></el-image>
                        <span style="font-size: 16px;line-height: 25px;color: #000000;padding: 1px 8px;">{{item.message.proName}}</span>
                        <span style="color: #D30E0E;font-weight: bold;line-height: 25px;padding: 1px 6px;">￥{{item.message.price}}</span>
                      </div>
                    </div>
                    <div class="chatPop_item" style="line-height: 1px; word-wrap:break-word;height: 30px;" v-else>
                      {{item.message}}
                    </div>
                  </div>
                </el-col>
                <el-col :span="2">
                  <el-avatar shape="square" :src="item.sendMember.icon" style="width: 35px;height: 35px;"></el-avatar>
                </el-col>
              </el-row>
            </div>
          </div>
        </div>
        <div class="wxchatBorderRightBottom">
          <div>
            <div class="wxchatIcon1">
              <el-tooltip placement="top" content="图片">
                <el-upload action="https://wtwf-product.oss-cn-chengdu.aliyuncs.com" :data="dataObj" class="avatar-uploader"
                  :file-list="fileList" :show-file-list="false" :on-remove="handleRemove" :on-success="handleUploadSuccess"
                  :before-upload="beforeUpload">
                  <i style="fontSize:'18px',fontWeight:'bold',padding:10px" class="el-icon-picture"></i>
                </el-upload>
              </el-tooltip>
            </div>
            <div class="wxchatIcon2">
              <el-tooltip placement="top" content="视频">
                <el-upload action="https://wtwf-product.oss-cn-chengdu.aliyuncs.com" :data="dataObj1" :show-file-list="false"
                  :auto-upload="true" :on-success="handleUploadSuccess1" :before-upload="beforeUpload1" accept=".mp4">
                  <span class="warpss">
                    <i class="el-icon-video-camera-solid" style="fontSize:22px"></i>
                  </span>
                </el-upload>
              </el-tooltip>
            </div>
            <div class="wxchatIcon3">
              <el-tooltip placement="top" content="评分">
                <i class="el-icon-star-on" @click="score"></i>
              </el-tooltip>
            </div>
            <div class="wxchatIcon4">
              <el-tooltip placement="top" content="选择商品">
                <i class="el-icon-s-shop" @click='dialogTableVisibles=true'></i>
              </el-tooltip>
            </div>
          </div>
          <div style="margin: -2px 15px;">
            <el-input type="textarea" :autosize="{ minRows: 3, maxRows: 3}" placeholder="" v-model="textarea2" resize="none"
              autofocus maxlength="500" @keyup.enter.native="onSubmit">
            </el-input>
          </div>
          <div class="sendButton">
            <el-button size="mini" @click='sendMessage'>发送</el-button>
          </div>
        </div>
      </div>
    </div>
    <!-- 选择产品 -->
    <!-- 修改弹框 -->
    <el-dialog title="选择商品" width="990px" :visible.sync="dialogTableVisibles" :close-on-click-modal="false">
      <div style="display: flex;justify-content: center;flex-direction: column;">
        <div style="margin-top: 15px;width: 700px;align-self: center;">
          <el-input placeholder="搜索宝贝" v-model="goods" class="input-with-select">
            <el-button slot="append" icon="el-icon-search" style="background-color:#D30E0E;color: white;" @click='toquery'></el-button>
          </el-input>
        </div>
        <!-- 商品 -->
        <div class="selectGoods">
          <i class="el-icon-s-shop" style="color: #D30E0E;font-size: 28px;margin: 0 10px;"></i>
          <span style="font-size: 18px;color: #D30E0E;font-weight: bold;">全部商品</span>
        </div>
        <div class="goodsList">
          <div class="goodContent">
            <div class="goodsInfo" v-for="(item,index) in goodsList" :key='index'>
              <el-image style='width: 100%;height: 170px;' :src="item.pic" fit='cover'></el-image>
              <el-tooltip class="item" effect="dark" :content="item.proName" placement="top-start">
                <span style="flex: 1;font-size: 15px;font-weight: bold;padding: 7px 5px;box-sizing: border-box;">{{item.proName.length>20?item.proName.slice(0,21)+'...':item.proName}}</span>
              </el-tooltip>
              <div class="goodsText">
                <span style="font-weight: bold;color:#D30E0E;font-size: 19px; ">￥{{item.price}}</span>
                <el-button type="danger" size="mini" round style="background-color:#D30E0E;" @click='selectGoods(item)'>发送</el-button>
              </div>
            </div>
          </div>
        </div>
        <div style="position: relative;top: 50px;">
          <!--分页组件-->
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
            :page-sizes="[10, 20, 30, 40, 50, 100]" :page-size="pageSize" layout="total, prev, pager, next, sizes,jumper"
            :total="total">
          </el-pagination>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="text" @click="dialogTableVisibles=false">返回</el-button>
        <!-- <el-button @click="reply" type="primary" size="small">回复</el-button> -->
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import {
    policy1
  } from '../../../api/oss.js'
  import singleUpload from '../../../components/singleUpload.vue' //单张
  import {
    getInfo,
  } from '../../../api/login.js'
  import {
    getChat, //查询用户聊天分组
    getChatMessage,
    sendMessage,
    queryUser
  } from '../../../api/bannerManagement.js'
  import {
    addMall,
    listGoods1
  } from '../../../api/mallManagement.js'
  export default {
    name: 'Resource',
    components: {
      singleUpload
    },
    data() {
      return {
        currentPage: 1,
        pageSize: 10,
        total: 10,
        goodsList: [],
        goods: '',
        dialogTableVisibles: false,
        srcList: [],
        dataObj: {
          policy: '',
          signature: '',
          key: '',
          ossaccessKeyId: '',
          dir: '',
          host: ''
        },
        dataObj1: {
          policy: '',
          signature: '',
          key: '',
          ossaccessKeyId: '',
          dir: '',
          host: ''
        },
        userImg: '',
        moreText: '点击查看更多',
        chatUserId: null,
        userName: '',
        keywordNew: '',
        list: [],
        wsUrl: '',
        content: [{
          id: 33,
          time: '2021-3-11 10:10:10',
          icon: "",
          message: '1234',
        }],
        userList: [],
        websocket: null,
        dialogTableVisible: true,
        input2: '',
        textarea2: '',
        websock: null,
        username: '',
        page: 1,
        pageSize: 10,
        dialogImageUrl: null,
        dialogImageUrlArr: [],
        userData: {},
        fileList1: [],
      }
    },
    created() {

    },
    computed: {

      imageUrl() {
        console.log("修改图", this.value);
        if (this.value) {
          this.dialogImageUrl = this.value;
        } else {
          this.dialogImageUrl = '';
        }
        return this.value;
      },
      imageName() {
        if (this.value != null && this.value !== '') {
          return this.value.substr(this.value.lastIndexOf('/') + 1)
        } else {
          return null
        }
      },
      fileList() {
        return [{
          name: this.imageName,
          url: this.imageUrl
        }]
      },
      showFileList: {
        get: function() {
          return this.value !== null && this.value !== '' && this.value !== undefined
        },
        set: function(newValue) {}
      }
    },
    mounted() {
      getInfo().then(res => {
        this.username = res.data.username;
        this.getSocket()
        // console.log('获取名字111', this.username)
      }).catch(res => {})
      this.chatPai();
      queryUser().then(res => {
        // console.log('获取初始化数据', res.data);
        this.userData = res.data;
      }).catch(res => {

      })
      this.update();
    },
    methods: {
      //发送产品
      selectGoods(item){
        var data = {
          message: 'SHARE_PRODUCT_MESSAGE_ID:' + item.id,
          userId: this.chatUserId,
        }
        sendMessage(data).then(res => {

          let message = {
            "evaluateId": null,
            "id": null,
            "message": "",
            "sendMember": null,
            "time": null,
            "type": "",
          }
          message.sendMember = this.userData;
          message.message = item;
          message.type = 'TIMProductElem';
          message.time = this.dateFormat(new Date());
          this.fileList1 = '';
          this.userList.push(
            message
          )
          this.chatPai();
          this.$message({
            type: 'success',
            message: res.message
          });
        }).catch(res => {

        })
      },
      queryApi(searchData) {
        listGoods1(searchData).then(res => {
          this.total = res.data.total;
          this.goodsList = res.data.list;
          this.$message({
            type: 'success',
            message: res.message
          });
          this.goods = '';
        }).catch(res => {
          // console.log("失败", res);
          this.$message({
            type: 'warning',
            message: res.message
          });
        })
      },
      toquery() {
        var searchData = {};
        this.keywordNew = this.goods;
        searchData.keyword = this.goods; //搜索字符串
        searchData.page = this.currentPage; //	当前页
        searchData.limit = this.pageSize; //每页显示数量
        searchData.type = null; //全部=null,下架=0,上架=1,售罄=2
        console.log("查询", searchData);
        this.queryApi(searchData);
      },
      //更新
      update() {
        var that = this;
        //初始化
        var userDataList = {};
        userDataList.page = this.currentPage; //当前页
        userDataList.limit = this.pageSize; //每页显示条数
        userDataList.type = null;
        listGoods1(userDataList).then(res => {
          console.log("成功", res.data.list);
          this.total = res.data.total;
          that.goodsList = res.data.list;
        }).catch(res => {
          console.log("失败", res);
        })
      },
      //分页
      handleSizeChange(val) {
        this.pageSize = val;
        if (this.keywordNew) {
          var searchData = {};
          searchData.keyword = this.keywordNew; //搜索字符串
          searchData.page = this.currentPage; //	当前页
          searchData.limit = this.pageSize; //每页显示数量
          searchData.type = null; //全部=null,下架=0,上架=1,售罄=2
          this.queryApi(searchData);
        } else {
          this.update();
        }
      },
      handleCurrentChange(val) {
        this.currentPage = val;
        if (this.keywordNew) {
          var searchData = {};
          searchData.keyword = this.keywordNew; //搜索字符串
          searchData.page = this.currentPage; //	当前页
          searchData.limit = this.pageSize; //每页显示数量
          searchData.type = null; //全部=null,下架=0,上架=1,售罄=2
          this.queryApi(searchData);
        } else {
          this.update();
        }
      },
      //评分
      score() {
        var data = {
          message: 'TO_END_MESSAGE_SCORE',
          userId: this.chatUserId,
        }
        sendMessage(data).then(res => {
          this.chatPai();
        }).catch(res => {})
      },
      beforeUpload1(file) {
        var fileSize = file.size / 1024 / 1024 < 100;
        console.log('视频大小', fileSize);
        if (['video/mp4', 'video/ogg', 'video/flv', 'video/avi', 'video/wmv', 'video/rmvb', 'video/mov'].indexOf(file.type) ==
          -1) {
          this.$message({
            type: 'warning',
            message: '请上传正确的视频格式'
          });
          return false;
        }
        if (!fileSize) {
          this.$message({
            type: 'warning',
            message: '视频大小不能超过100MB'
          });
          return false;
        }
        this.videoFlag = true;
        console.log("上传视频值", file);
        const _self = this
        return new Promise((resolve, reject) => {
          policy1().then(response => {
            console.log("视频---->获取数据", response.data);
            _self.dataObj1.policy = response.data.policy;
            // console.log('policy值',response.data.policy);
            _self.dataObj1.signature = response.data.signature;
            // console.log('signature值',response.data.signature);
            _self.dataObj1.ossaccessKeyId = response.data.accessKeyId;
            // console.log('ossaccessKeyId值',response.data.accessKeyId);
            _self.dataObj1.key = response.data.dir + this.getUUID() + '_${filename}';
            console.log('视频---->key值', response.data.dir + this.getUUID() + '_${filename}');
            _self.dataObj1.dir = response.data.dir;
            console.log('视频---->dir值', response.data.dir);
            _self.dataObj1.host = response.data.host;
            _self.dataObj1.callback = response.data.callback;
            resolve(true)
          }).catch(err => {
            console.log(err)
            reject(false)
          })
        })
      },
      handleUploadSuccess1(res, file) {
        let url = this.dataObj1.host + '/' + this.dataObj1.key.replace('${filename}', file.name);
        this.fileList1 = url
        console.log("视频地址", this.fileList1);
        var data = {
          message: this.fileList1,
          userId: this.chatUserId,
        }
        sendMessage(data).then(res => {
          let message = {
            "evaluateId": null,
            "id": null,
            "message": "",
            "sendMember": null,
            "time": null,
            "type": "",
          }
          message.sendMember = this.userData;
          message.message = this.fileList1;
          message.type = 'TIMVideoFileElem';
          message.time = this.dateFormat(new Date());
          this.fileList1 = '';
          this.userList.push(
            message
          )
          this.chatPai();
        }).catch(res => {

        })
      },
      handleRemove(file, fileList) {
        this.emitInput('')
      },
      handleUploadSuccess(res, file) {
        this.showFileList = true
        this.fileList.pop();
        this.dialogImageUrl = this.dataObj.host + '/' + this.dataObj.key.replace('${filename}', file.name);
        this.dialogImageUrlArr.push(this.dialogImageUrl);
        console.log('上传图片', this.dialogImageUrl);
        var data = {
          message: this.dialogImageUrl,
          userId: this.chatUserId,
        }
        sendMessage(data).then(res => {
          let message = {
            "evaluateId": null,
            "id": null,
            "message": "",
            "sendMember": null,
            "time": null,
            "type": "",
          }
          message.sendMember = this.userData;
          message.message = this.dialogImageUrl;
          message.type = 'TIMImageElem';
          message.time = this.dateFormat(new Date());
          this.dialogImageUrl = '';
          this.userList.push(
            message
          )
          this.chatPai();
        }).catch(res => {

        })
      },
      getUUID() {
        return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, c => {
          return (c === 'x' ? (Math.random() * 16 | 0) : ('r&0x3' | '0x8')).toString(16)
        })
      },
      beforeUpload(file) {
        console.log("获取数据前", file);
        const _self = this;
        return new Promise((resolve, reject) => {
          policy1().then(response => {
            _self.dataObj.policy = response.data.policy;
            _self.dataObj.signature = response.data.signature;
            _self.dataObj.ossaccessKeyId = response.data.accessKeyId;
            _self.dataObj.key = response.data.dir + this.getUUID() + '_${filename}';
            console.log('key值', _self.dataObj.key);
            _self.dataObj.dir = response.data.dir;
            _self.dataObj.host = response.data.host;
            _self.dataObj.callback = response.data.callback;
            resolve(true)
          }).catch(err => {
            console.log(err)
            reject(false)
          })
        })
      },
      //滚动事件
      scrollEvent(e) {
        var container = this.$el.querySelector(".wxchatBorderRightMid");
        if (container.scrollTop == 0) {
          getChatMessage(this.chatUserId, ++this.page, this.pageSize).then(res => {
            // let message =  res.data.list;
            // message.push(this.userList)
            this.userList = res.data.list.concat(this.userList)
            for(let item of this.userList){
              if(item.type =='TIMProductElem'){
                var string =eval('(' + item.message + ')')
                 item.message = string;
               }else{
                 console.log(item.message)
               }
            }
            console.log('聊天记录', res.data.list)
            this.$nextTick(() => {
              var container = this.$el.querySelector(".wxchatBorderRightMid");
              container.scrollTop = container.scrollHeight / this.page;
            })
          }).catch(res => {})
        }
      },
      sendMessage() {
        var data = {
          message: this.textarea2,
          userId: this.chatUserId,
        }
        sendMessage(data).then(res => {
          let message = {
            "evaluateId": null,
            "id": null,
            "message": "",
            "sendMember": null,
            "time": null,
            "type": "",
          }
          message.sendMember = this.userData;
          message.message = this.textarea2;
          message.type = 'TIMTextElem';
          message.time = this.dateFormat(new Date());
          this.textarea2 = '';
          this.userList.push(
            message
          )
          this.chatPai()
        }).catch(res => {

        })
      },
      chatPai() {
        getChat().then(res => {
          this.list = res.data.list;
          this.userName = this.list[0].name;
          console.log('获取初始化数据', this.list[0]);
          if (this.list.length > 0) {
            getChatMessage(this.list[0].id, this.page, this.pageSize).then(res => {
              this.userList = res.data.list;
              this.chatUserId = this.list[0].id;
               for(let item of this.userList){
                 if(item.type =='TIMProductElem'){
                   var string =eval('(' + item.message + ')')
                    item.message = string;
                  }
                 }
                console.log("聊天记录",this.userList)
              this.scrollToBottom()

            }).catch(res => {

            })
          }
        }).catch(res => {

        })
      },
      //提交
      onSubmit() {
        console.log(this.textarea2, '回车');
        var data = {
          message: this.textarea2,
          userId: this.chatUserId
        }
        sendMessage(data).then(res => {
          let message = {
            "evaluateId": null,
            "id": null,
            "message": "",
            "sendMember": null,
            "time": null,
            "type": "",
          }
          message.sendMember = this.userData;
          message.message = this.textarea2;
          message.type = 'TIMTextElem';
          message.time = this.dateFormat(new Date());
          this.textarea2 = '';
          this.userList.push(
            message
          )
          this.chatPai();
        }).catch(res => {

        })
      },
      scrollToBottom() {
        this.$nextTick(() => {
          var container = this.$el.querySelector(".wxchatBorderRightMid");
          container.scrollTop = container.scrollHeight;
        })
      },
      getInfo(data) {
        this.page = 1;
        this.pageSize = 15;
        this.userName = data.name;
        this.chatUserId = data.id;
        console.log('idsdfs', this.chatUserId);
        getChatMessage(data.id, this.page, this.pageSize).then(res => {
          this.userList = res.data.list;
         for(let item of this.userList){
           if(item.type =='TIMProductElem'){
             var string =eval('(' + item.message + ')')
              item.message = string;
            }else{
              console.log(item.message)
            }
           }
          this.scrollToBottom();
          console.log('聊天记录', res.data.list)
        }).catch(res => {})
      },
      getSocket() {
        //获取消息
        let that = this;
        //判断当前浏览器是否支持WebSocket
        if ('WebSocket' in window) {
          var socket = new WebSocket('地址?uid=' + that.username + '&type=1');
        } else {
          alert('当前浏览器 Not support websocket')
        }
        socket.onopen = () => {
          console.log("websocket握手成功!")
        }
        socket.onmessage = (e) => {
          try {
            let nowMessage = JSON.parse(e.data);
            console.log('获取对方id', this.chatUserId);
            if (nowMessage.sendMember.id == this.chatUserId) {
              let jsonString = JSON.parse(nowMessage.message);
              nowMessage.message = jsonString;
              this.userList.push(
                nowMessage
              )
              this.scrollToBottom();
            } else {
              for (let item of this.list) {
                if (item.id == nowMessage.sendMember.id) {
                  item.message = nowMessage.message;
                }
              }
            }
            console.log(e.data);
          } catch (err) {
            console.log(err);
          }
        };
      },
      dateFormat(date) {
        let fmt = 'YYYY-mm-dd HH:MM:SS'
        let ret;
        const opt = {
          "Y+": date.getFullYear().toString(), // 年
          "m+": (date.getMonth() + 1).toString(), // 月
          "d+": date.getDate().toString(), // 日
          "H+": date.getHours().toString(), // 时
          "M+": date.getMinutes().toString(), // 分
          "S+": date.getSeconds().toString() // 秒
          // 有其他格式化字符需求可以继续添加，必须转化成字符串
        };
        for (let k in opt) {
          ret = new RegExp("(" + k + ")").exec(fmt);
          if (ret) {
            fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
          };
        };
        return fmt;
      }
    }
  }
</script>

<style scoped="scoped">
  /* 商品选择 */
  .goodsInfo {
    border: 1px solid #CCCCCC;
    height: 269px;
    width: 204px;
    display: flex;
    flex-direction: column;
    margin: 4px 4px;
  }

  .goodsText {
    display: flex;
    justify-content: space-between;
    padding: 9px 5px;
    align-items: center;
  }

  .selectGoods {
    height: 50px;
    line-height: 40px;
    display: flex;
    position: relative;
    top: 40px;
    margin: 0 50px;
    align-items: center;
    background-color: #F3F3F3;
  }

  .goodContent {
    flex-wrap: wrap;
    display: flex;
  }

  .goodsList {
    position: relative;
    top: 50px;
    /* height: 700px; */
    margin: 0 50px;
    /* padding: 10px 10px; */
    box-sizing: border-box;
    border: 1px solid #CCCCCC;
    display: flex;
  }

  /deep/ .avatar-uploader .el-upload {
    border: 1px dashed transparent !important;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: inherit !important;
  }

  .app-container {
    width: 100%;
    margin: 20px auto;
    height: 900px;
    position: relative;
    display: flex;
    justify-content: center;
  }

  .contact {
    border-bottom: 1px dashed #ccc;
  }

  .rightContent {
    display: flex;
    flex-direction: column;
  }

  .content {
    width: 1000px;
    display: flex;
  }

  .el-dialog__header {
    padding: 20px 20px 10px;
  }

  .chatPop1 :hover {
    background-color: #FAFAFA;
  }

  video {
    object-fit: fill;
  }

  .chatPop1 .chatPop_item {
    background-color: #fff;
    padding: 17px 19px;
    display: inline-block;
    border-radius: 10px;
    margin: 0px 0 10px 10px;
    position: relative;
    border: 1px solid #E3E3E3;
    max-width: 247px;
  }

  .chatPop1 .chatPop_item::after {
    content: '';
    border: 8px solid #ffffff00;
    border-right: 8px solid #fff;
    position: absolute;
    top: 8px;
    left: -16px;
  }

  .chatPop2 :hover {
    /* background-color: #FAFAFA; */
  }

  .chatPop2 .chatPop_item {
    background-color: #2683f5;
    padding: 17px 19px;
    display: inline-block;
    border-radius: 10px;
    margin: 0px 15px 10px 10px;
    position: relative;
    border: 1px solid #E3E3E3;
    max-width: 247px;
    float: right;
    color: #fff;
  }

  .chatPop2 .chatPop_item::after {
    content: '';
    border: 8px solid #ffffff00;
    border-right: 8px solid #2683f5;
    position: absolute;
    top: 8px;
    right: -16px;
    transform: rotateY(180deg)
  }

  .custom {
    border: 0px solid blue;
    height: 670px;
    width: 795px;
  }

  .wxchatBorder {
    width: 795px;
    height: 670px;
    border: 1px solid red;
    margin-left: -20px;
    margin-top: -59.5px;

  }

  .wxchatBorderLeft::-webkit-scrollbar {
    display: none;
  }

  .wxchatBorderLeft {
    width: 250px;
    background-color: #eeebe9;
    display: inline-block;
    overflow-y: scroll;
    width: 250px;
  }

  .wxchatPeople {
    color: #000000;
    font-size: 14px;
  }

  .wxchatNews {
    color: #999;
    padding-top: 5px;
    font-size: 12px;
  }

  .wxchatName {
    color: #000000;
    font-size: 20px;
    float: left;
    padding-left: 30px;
    padding-top: 20px;
  }

  .wxchatMore {
    color: #999;
    font-size: 20px;
    float: right;
    margin-right: -15px;
    padding-top: 25px;
  }

  .wxchatBorderRight {
    max-width: 245px;
    height: 670px;
    display: inline-block;
    float: right;
    margin-right: -22px;
    margin-top: -60px;
  }

  .wxchatBorderRightTop {
    width: 748px;
    height: 60px;
    background-color: #f5f5f5;
    border-bottom: 1px solid #e7e7e7;
    display: block;
    float: right;
  }

  .more {
    text-align: center;
    color: #CCCCCC;
    margin: 10px auto;
  }

  .wxchatBorderRightMid ::-webkit-scrollbar {
    display: none;
  }

  .wxchatBorderRightMid {
    height: 603px;
    background-color: #f5f5f5;
    overflow-y: scroll;
  }

  .wxchatBorderRightBottom {
    height: 196px;
    background-color: #fff;
    border: 1px solid #eee;
  }

  .wxchatIcon1 {
    display: inline-block;
    padding: 8px 10px 10px 30px;
    width: 40px;
    height: 40px;
    font-size: 20px;
  }

  .wxchatIcon2 {
    display: inline-block;
    padding: 8px 10px 10px 20px;
    width: 40px;
    height: 40px;
    font-size: 20px;
  }

  .wxchatIcon3 {
    display: inline-block;
    padding: 8px 10px 10px 10px;
    width: 40px;
    height: 40px;
    font-size: 20px;
  }

  .wxchatIcon4 {
    display: inline-block;
    padding: 8px 10px 10px 0px;
    width: 40px;
    height: 40px;
    font-size: 20px;
  }

  .sendButton {
    float: right;
    margin-top: 5px;
    margin-right: 28px;
  }
</style>

;
color: #CCCCCC;
margin: 10px auto;
}

.wxchatBorderRightMid ::-webkit-scrollbar {
display: none;
}

.wxchatBorderRightMid {
height: 603px;
background-color: #f5f5f5;
overflow-y: scroll;
}

.wxchatBorderRightBottom {
height: 196px;
background-color: #fff;
border: 1px solid #eee;
}

.wxchatIcon1 {
display: inline-block;
padding: 8px 10px 10px 30px;
width: 40px;
height: 40px;
font-size: 20px;
}

.wxchatIcon2 {
display: inline-block;
padding: 8px 10px 10px 20px;
width: 40px;
height: 40px;
font-size: 20px;
}

.wxchatIcon3 {
display: inline-block;
padding: 8px 10px 10px 10px;
width: 40px;
height: 40px;
font-size: 20px;
}

.wxchatIcon4 {
display: inline-block;
padding: 8px 10px 10px 0px;
width: 40px;
height: 40px;
font-size: 20px;
}

.sendButton {
float: right;
margin-top: 5px;
margin-right: 28px;
}

转发请注明原创噢~~~~
看完记得点个赞哟！！！