From 32005433fcfb6cbda0560238efbd1c23eb6be3d1 Mon Sep 17 00:00:00 2001
From: yangzhe <yangzhe@qq.com>
Date: Thu, 31 Jul 2025 15:45:05 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20copy=20=E5=AF=B9=E8=AF=9D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/message/dialogBox/dialogBox copy.vue | 1351 ++++++++++++++++++++
 1 file changed, 1351 insertions(+)
 create mode 100644 pages/message/dialogBox/dialogBox copy.vue

diff --git a/pages/message/dialogBox/dialogBox copy.vue b/pages/message/dialogBox/dialogBox copy.vue
new file mode 100644
index 0000000..3aee25a
--- /dev/null
+++ b/pages/message/dialogBox/dialogBox copy.vue	
@@ -0,0 +1,1351 @@
+<template>
+  <view>
+    <u-navbar :border-bottom="false" back-text="" title="">
+      <view slot="" class="navbar-center">
+        <view class="info">
+          <text class="name">{{ userInfo.name }}</text>
+        </view>
+      </view>
+      <!-- <view class="navbar-right" slot="right">
+        <u-button v-if='userInfo.carewState && userInfo.carewState != "admin"' @click='InsertOrDelFollow()'
+          size="mini" class='btn' :plain="userInfo.carewState.indexOf('未关注') < 0" type="primary">{{
+            userInfo.carewState }}</u-button>
+      </view> -->
+    </u-navbar>
+    <view v-if="userInfo.carewState.indexOf('未关注') && showAttention" style="width: 100%;background-color: #fff;">
+      <view class="attention-box">
+        <view>关注方便以后常联系</view>
+        <view class="attention-right">
+          <view class="attention-btn" @click='InsertOrDelFollow()'>关注</view>
+          <image src="/static/common/img/close.png" @click="() => showAttention = false"></image>
+        </view>
+      </view>
+    </view>
+    <!-- 认证用户 -->
+    <view id="messagesList"></view>
+    <view v-if="false" class="quick Tips">
+      <view class="justify-center section_2">
+        <text>关注他，方便以后常聊</text>
+        <image class="image_2" src="/static/common/img/msgclose.png"/>
+      </view>
+    </view>
+    <!-- 未认证yonghu -->
+    <view :style="{ height: errShow ? '0.16rem' : '0' }" class="errTips">
+      <view class="flex-row group_3">
+        <image class="image_2" src="/static/common/img/16462770928974838161.png"/>
+        <text class="text_5">该用户尚未进行认证，请注意信息的甄别，保护个人信息！</text>
+      </view>
+    </view>
+    <view :class="[{ emoji: emoji }, { msg: CommonWords }, { text: inputShow }]" class="msgList" @mousedown="close">
+      <scroll-view :scroll-top="scrollTop" :scroll-with-animation="true" class="scroll" scroll-y="true"
+                   @refresherrefresh=''>
+        <!-- <scroll-view scroll-y="true" class="scroll" @refresherrefresh='' :scroll-top="scrollTop"
+        :scroll-with-animation="true" :refresher-enabled='true' refresher-background='#f6f7fa'
+        refresher-default-style="black"> -->
+        <template v-for="(v, i) in MsgList">
+          <view style='display:none'>{{ v.sendDate ? v.sendDate = v.sendDate.replace(/-/g, "/") : '' }}</view>
+          <!-- 提示消息（时间） -->
+          <view v-if='new Date(v.sendDate) - new Date(MsgList[i > 1 ? i - 1 : 0].sendDate) > 30000'
+                class="tis">
+            <text
+                v-if='new Date(v.sendDate) - 0 + (3600000 * 24) > new Date() && new Date(v.sendDate).getDate() == new Date().getDate()'
+                class="text">{{ v.sendDate.slice(10, 16) }}
+            </text>
+            <text v-else class="text">{{ v.sendDate }}</text>
+          </view>
+          <!-- 系统提示对方基本信息 -->
+          <view v-if='v.istips && v.type == 0' class="systis">
+            <view>
+              <view class="flex-col section_2">
+                <view class="flex-row group_2">
+                  <text>姓名：{{ v.Name }}</text>
+                </view>
+                <view class="flex-row group_2">
+                  <text>年龄：{{ v.Age }}</text>
+                </view>
+                <view class="flex-row group_2">
+                  <text>班级：{{ v.School }}</text>
+                </view>
+                <view class="flex-row group_2">
+                  <text>现居地（区）：{{ v.Address }}</text>
+                </view>
+                <view class="flex-row group_2">
+                  <text>手机号码:{{ v.Phone }}</text>
+                </view>
+              </view>
+            </view>
+          </view>
+          <view v-if='v.istips && v.type == 1' class="tis">
+            <text class="text">{{ v.title }}</text>
+          </view>
+          <template v-if='!v.mymsg && !v.hemsg && !v.istips'>
+            <!-- 我方的消息 -->
+            <view v-if='v.fromUserId == vuex_user.id' class="mymsg">
+              <view class="justify-end group_5">
+                <view class="flex-col items-center text-wrapper">
+                  <text>{{ v.message }}</text>
+                </view>
+                <!-- <image :src="$u.http.config.imgUrl+vuex_user.head" class="image_3" /> -->
+                <u-avatar :src="$u.http.config.imgUrl + vuex_user.head" class="image_1"></u-avatar>
+              </view>
+            </view>
+            <!-- 对方消息 -->
+            <view v-else class="hemsg">
+              <view class="flex-row group">
+                <u-avatar :src="$u.http.config.imgUrl + userInfo.head" class="image_3 image_11"
+                          @click='toDeatil'></u-avatar>
+                <view class="right-text-wrapper_1 flex-col items-center">
+                  <text>{{ v.message }}</text>
+                </view>
+              </view>
+            </view>
+          </template>
+
+          <!-- 我方交换信息 -->
+          <template v-else>
+            <view v-if='v.mymsg' class="mymsg">
+              <view class="justify-end group_5">
+                <view class="exchange">
+                  <view class="top-group justify-center">
+                    <view class="flex-col section_3">
+                      <text class="text_11 text_12">请求交换信息</text>
+                      <!-- <view class="bottom-group flex-row view_1">
+                      <view @click='InfoExchange(v.type,false)' class="left-text-wrapper flex-col items-center">
+                        <text>拒绝</text>
+                      </view>
+                      <view @click='InfoExchange(v.type,true)' class="right-text-wrapper flex-col items-center">
+                        <text>同意</text>
+                      </view>
+                    </view> -->
+                    </view>
+                  </view>
+                </view>
+                <!-- <image :src="$u.http.config.imgUrl+vuex_user.head" class="image_3" /> -->
+                <u-avatar :src="$u.http.config.imgUrl + vuex_user.head" class="image_3"></u-avatar>
+              </view>
+            </view>
+            <!-- 对方交换信息 -->
+            <view v-if='v.hemsg' class="hemsg">
+              <view class="flex-row group">
+                <!-- <image @click='toDeatil' :src="$u.http.config.imgUrl+userInfo.head" class="image_3 image_11" /> -->
+                <u-avatar :src="$u.http.config.imgUrl + userInfo.head" class="image_1"
+                          @click='toDeatil'></u-avatar>
+                <view class="exchange">
+                  <view class="top-group justify-center">
+                    <view class="flex-col section_3">
+                      <text class="text_11 text_12">请求交换信息</text>
+                      <view class="bottom-group flex-row view_1" style='justify-content: center;'>
+                        <view v-if='v.type == 0' class="left-text-wrapper flex-col items-center"
+                              @click='InfoExchange(false, i)'>
+                          <text>拒绝</text>
+                        </view>
+                        <view v-if='v.type == 0' class="right-text-wrapper flex-col items-center"
+                              @click='InfoExchange(true, i)'>
+                          <text>同意</text>
+                        </view>
+                        <view v-if='v.type == 1'
+                              class="left-text-wrapper flex-col items-center">
+                          <text>已同意</text>
+                        </view>
+                        <view v-if='v.type == 2'
+                              class="left-text-wrapper flex-col items-center">
+                          <text>已拒绝</text>
+                        </view>
+                      </view>
+                    </view>
+                  </view>
+                </view>
+              </view>
+            </view>
+          </template>
+        </template>
+      </scroll-view>
+    </view>
+
+    <view class="msgbox">
+      <view v-if='chatType != 1' :style="[{ background: quick ? '#fff' : 'none' }]" class="quick">
+        <view v-if="quick" class="justify-between section_7">
+          <view class="flex-row" style='transform: translateX(-50%);'>
+            <view class="flex-col  items-center text-wrapper_2" @click='exchangeInfo(1)'>
+              <text class="text">交换信息</text>
+            </view>
+            <!-- 	<view @click='exchangeInfo(0)' class="flex-col items-end text-wrapper_3">
+              <text class="text">交换联系方式</text>
+            </view> -->
+          </view>
+          <image class="image_13" src="/static/common/img/msgclose.png" @click="quick = false"/>
+        </view>
+        <!-- <view style="display: flex; justify-content: flex-end" v-else>
+          <image style="margin: 0.08rem; width: 0.2rem; height: 0.2rem" @click="quick = true"
+            src="/static/common/img/msgopen.png" class="image_13" />
+        </view> -->
+      </view>
+      <view class="flex-row section_1">
+        <view class="input-box">
+          <!-- <text class="text" @click="CommonWords = !CommonWords; emoji = false;">常用语</text> -->
+          <u-input v-model="message" :auto-height="true" :type="'textarea'" class="input" @blur="inputBlur"
+                   @click="shuru" @focus="inputFocus"/>
+          <view class="icon" @click="emoji = !emoji; CommonWords = false; emojicurrent = 0;">
+            <image class="image" src="/static/common/img/icon-happy-face.png"/>
+          </view>
+          <view v-if="message != ''" class="btn">
+            <u-button class="sendOut" size="mini" @click="SendMessage">发送</u-button>
+          </view>
+          <view v-else class="icon" @click="expandBox = !expandBox">
+            <image class="image" src="/static/common/img/add-circle.png"/>
+          </view>
+        </view>
+      </view>
+      <!-- 常用语 -->
+      <view class="CommonWords">
+        <scroll-view :class="CommonWords ? 'open' : ''" scroll-y="true"
+                     style="transition: all 0.3s; height: 0rem">
+          <text v-for="(v, i) in CommonlyMsg" :key="i" @click="choice(v)">{{ v }}</text>
+        </scroll-view>
+      </view>
+      <!-- emoji 表情 -->
+      <swiper :class="emoji ? 'emojishow' : ''" :current="emojicurrent" class="slider">
+        <swiper-item v-for="(item, key) in emojiData" :key="key" :class="[key == emojiData.length - 1 ? 'lastbox' : '']"
+                     class="slider-emoji">
+          <text v-for="(emoji, index) in item" :key="index" class="slider-emoji-icon"
+                @click="selemoji(emoji)">{{
+              emoji
+            }}
+          </text>
+        </swiper-item>
+      </swiper>
+      <!-- 点击加号 -->
+      <view class="expandBox">
+        <view :class="expandBox ? 'open' : ''" style="transition: all 0.3s; height: 0rem">
+          <view class="expand-content">
+            <view v-for="i in expandList" class="expand-item" @click="expandFn(i.type)">
+              <image :src="i.img"></image>
+              <text class="expand-text">{{ i.text }}</text>
+            </view>
+          </view>
+        </view>
+      </view>
+    </view>
+    <u-toast ref="uToast"/>
+    <u-top-tips ref="uTips" :navbar-height="0"></u-top-tips>
+  </view>
+</template>
+
+<script>
+import emoji from "../../../static/common/js/emoji";
+
+export default {
+  data() {
+    return {
+      // 常用语
+      CommonlyMsg: ['您好，很高兴认识你！', '您好，有空聊一聊吗？', '嗨，你好呀！', '好的，我知道了。', '我们下次再聊，拜拜。'],
+      CommonWords: false, // 常用语 显示隐藏
+      quick: false, // 交换信息 显示隐藏
+      message: "", // 交换信息 显示隐藏
+      emojiData: [],
+      emoji: false,
+      inputShow: false,
+      scrollTop: 999999999999,
+      emojicurrent: 0,
+      userId: '',
+      userInfo: '',
+      MsgList: [],
+      errShow: false,
+      chatType: -1,
+      id: '',
+      type: 0,
+      connectionId: '',
+      state: false,
+      role: 0,
+      showAttention: true,
+      expandBox: false, // 点击加号展开
+      expandList: [
+        /* {
+        text: '拍照',
+        img: '/static/common/img/changeCard.png',
+        type:0
+      }, {
+        text: '相册',
+        img: '/static/common/img/changePhone.png',
+        type:1
+      }, {
+        text: '位置',
+        img: '/static/common/img/changeAddress.png',
+        type:2
+      },  */
+        {
+          text: '交换名片',
+          img: '/static/common/img/changeCard.png',
+          type: 3
+        }]
+    };
+  },
+  onLoad(e) {
+
+    // 管理员对用户
+    if (e.id == 'admin') {
+      this.type = 2;
+      this.chatType = 1;
+      this.userId = e.fromid;
+      this.role = 1,
+          this.getList()
+
+      this.emojiInit();
+      this.LinkChar();
+      this.goBottom()
+      this.toBind()
+      return
+    }
+
+    // 判断聊天类型
+    if (e.chatType == undefined) {
+      uni.switchTab({
+        url: "../../message/msgList/msgList",
+      });
+      return;
+    }
+    this.type = e.type
+    this.id = e.id
+    this.chatType = e.chatType
+
+    // 用户对管理员
+    if (e.chatType == 1) {
+      this.userInfo = {
+        name: '管理员',
+        head: e.head,
+        carewState: 'admin'
+      }
+      this.getList()
+    }
+    // 用户和用户
+    if (e.chatType == 0) {
+      if (!e.id) {
+        uni.switchTab({
+          url: "../../main/index/index",
+        });
+        return;
+      }
+      this.userId = e.id;
+      this.getList()
+      this.getDetail();
+    }
+
+    if (this.errShow) {
+      setTimeout(() => {
+        this.errShow = false
+      }, 3000)
+    }
+    this.goBottom()
+    this.emojiInit();
+    this.LinkChar();
+  },
+  onShow() {
+
+    if (this.vuex_msgList) {
+      var msgList = this.vuex_msgList;
+      if (this.chatType == 1) {
+        if (this.type = 2) {
+          msgList = msgList.replace((this.userId + 'user,'), '')
+        } else {
+          msgList = msgList.replace('admin,', '')
+        }
+      } else {
+        msgList = msgList.replace((this.userId + ','), '')
+      }
+      this.$u.vuex('vuex_msgList', msgList)
+      if (!msgList || msgList.indexOf(',') < 0) {
+        this.$u.vuex('vuex_msgList', '')
+        var tab = this.vuex_tabbar;
+        tab[1].isDot = false;
+        this.$u.vuex('vuex_tabbar', tab);
+      }
+    }
+    this.goBottom()
+    this.getDetail();
+  },
+  onHide() {
+    if (this.chatType == 1) {
+      this.colseBind()
+    }
+  },
+  onUnload() {
+    if (this.chatType == 1) {
+      this.colseBind()
+    }
+  },
+  methods: {
+    expandFn(type) {
+      switch (type) {
+        case 3:
+          this.exchangeInfo()
+          break;
+      }
+    },
+    //管理员聊天绑定
+    toBind() {
+      let data = {
+        manageUser: this.vuex_user.id,
+        lockUser: this.userId
+      }
+      this.$u.api.toBind(data).then(res => {
+      })
+    },
+    //管理员聊天取消绑定
+    colseBind() {
+      let data = {
+        lockUser: this.userId
+      }
+      this.$u.api.colseBind(data).then(res => {
+      })
+    },
+    // 回应交换信息
+    InfoExchange(bool, index) {
+      this.$connection
+          .invoke("whetherAgreeExchange", this.vuex_user.id, this.userId, bool)
+          .then((res) => {
+            this.MsgList[index].type = bool ? 1 : 2;
+            this.goBottom()
+          })
+    },
+    //请求交换信息
+    exchangeInfo() {
+      this.$connection
+          .invoke("exchangeInfo", this.vuex_user.id, this.userId)
+          .then((res) => {
+            this.MsgList.push({
+              fromUserId: this.vuex_user.id,
+              mymsg: true,
+              type: 0,
+              sendDate: this.getIsTime()
+            })
+            this.goBottom()
+            this.quick = false
+          })
+    },
+    // 获取当前时间
+    getIsTime() {
+      const year = new Date().getFullYear();
+      const Month = new Date().getMonth() + 1;
+      const day = new Date().getDate();
+      const Hours = new Date().getHours();
+      const Minut = new Date().getMinutes();
+      const second = new Date().getSeconds();
+
+      //小于10的拼接上0字符串
+      function addZero(s) {
+        return s < 10 ? ('0' + s) : s;
+      }
+
+      return year + '-' + addZero(Month) + '-' + addZero(day) + ' ' + addZero(Hours) + ':' + addZero(Minut) +
+          ':' + addZero(second)
+    },
+
+    // 获取聊天记录
+    getList(id) {
+      const data = {
+        getUserId: this.vuex_user.id,
+        userId: this.userId,
+        chatType: this.chatType
+      }
+      if (id) {
+        data.getUserId = id;
+      }
+      this.$u.api.getChatRecord(data).then(res => {
+        this.MsgList = res
+      })
+    },
+    // 查看用户主页
+    toDeatil() {
+      if (this.chatType == 0) {
+        this.$u.route({
+          url: '/pages/AlumniCircle/userDetail/userDetail?id=' + this.userId + '&type=1'
+        })
+      }
+    },
+    // 关注
+    InsertOrDelFollow() {
+      const data = {
+        userId: this.vuex_user.id,
+        carewId: this.userId,
+      }
+      this.$u.apiList.InsertOrDelFollow(data).then(res => {
+        console.log(res, '关注成功');
+        if (res.succeed) {
+          // this.$tips('关注成功!', 'success')
+          this.$refs.uToast.show({
+            title: '关注成功',
+            type: 'success',
+          })
+          this.showAttention = false
+        }
+        // this.getDetail()
+      })
+    },
+    //获取用户信息
+    getDetail() {
+      this.$u.api.getUserInfo({
+        userId: this.userId
+      }).then((res) => {
+        this.userInfo = {
+          name: res.baseData.userName,
+          head: res.baseData.head,
+          carewState: res.carewState
+        }
+        if (res.carewState.includes('未关注')) {
+          this.showAttention = true
+        } else {
+          this.showAttention = false
+        }
+      });
+    },
+    //链接聊天
+    LinkChar() {
+      // 聊天限制提示3条后不能发送消息
+      this.$connection.on("FailInSend", (user, msg) => {
+        if (type == false) {
+          this.MsgList.push({
+            title: msg,
+            sendDate: this.getIsTime(),
+            istips: true,
+            type: 1,
+          })
+          this.goBottom()
+        }
+      })
+
+      //交换信息对方选择
+      this.$connection.on("whetherAgreeExchange", (user, type) => {
+        if (type == false) {
+          this.MsgList.push({
+            title: '对方已拒绝您的交换请求',
+            sendDate: this.getIsTime(),
+            istips: true,
+            type: 1,
+          })
+          this.goBottom()
+        }
+      })
+
+      //交换信息
+      this.$connection.on("ExchangeInfo", (user, type) => {
+        this.MsgList.push({
+          fromUserId: user,
+          hemsg: true,
+          type: 0,
+          sendDate: this.getIsTime()
+        })
+        this.goBottom()
+      })
+      // 显示
+      this.$connection.on("ShowUserInfo", (user, message) => {
+        // console.log(user, message);
+        const data = JSON.parse(message)
+        this.MsgList.push({
+          Name: data.Name,
+          sendDate: this.getIsTime(),
+          istips: true,
+          type: 0,
+          Phone: data.Phone,
+          Age: data.Age,
+          Address: data.Address,
+          School: data.School
+        })
+        this.goBottom()
+      });
+      //接收数据
+      this.$connection.on("ReceiveMessage", (user, message, type) => {
+        // console.log(user, message, type, this.chatType)
+        if (this.route.indexOf('dialogBox') >= 0) {
+          if (type <= 2 && this.chatType == 0 || type >= 3 && this.chatType == 1) {
+            if (user == this.userId || (this.userId == '' && type == 4)) {
+              this.MsgList.push({
+                fromUserId: user,
+                message: message,
+                sendDate: this.getIsTime(),
+                toUserId: this.vuex_user.id,
+              })
+              this.goBottom()
+            } else {
+              this.AddTisp(user, type)
+            }
+          } else {
+            this.AddTisp(user, type)
+          }
+        }
+      });
+    },
+    // 添加提示
+    AddTisp(user, type) {
+      var tab = this.vuex_tabbar;
+      tab[1].isDot = true;
+      this.$u.vuex('vuex_tabbar', tab);
+      var msgList = this.vuex_tabbar
+      var msgList = this.vuex_msgList
+      // 管理员对普通用户
+      if (type == 4) {
+        user = 'admin'
+      }
+      if (type == 3) {
+        user += 'user'
+      }
+      if (msgList.indexOf(user) < 0) {
+        msgList += (user + ',');
+      }
+      this.$u.vuex('vuex_msgList', msgList)
+    },
+    charLink() {
+      var that = this;
+      (function start(ms, that) {
+        setTimeout(() => {
+          try {
+            that.$connection
+                .start()
+                .then(() => {
+                  that.connectionId = that.$connection.connection.transport.url.split(
+                      "=")[1]
+                  that.CharLogin()
+                  if (that.state) {
+                    this.SendMessage()
+                    that.state = false
+                  }
+                })
+                .catch((e) => {
+                  //重试
+                  // console.log("websocket连接失败", e);
+                  return start(500, that);
+                });
+          } catch (e) {
+            //重试
+            // console.log("websocket连接失败", e);
+            return start(500, that);
+          }
+        }, ms);
+      })(0, that)
+    },
+    CharLogin() {
+      //绑定用户账号和connectionId
+      if (this.vuex_user.id) {
+        this.$connection
+            .invoke("login", this.connectionId, this.vuex_user.id)
+            .then((res) => {
+              // console.log("登录成功", res);
+            })
+            .catch((err) => {
+              // console.log("登录失败", err);;
+            });
+      } else {
+        setTimeout(() => {
+          this.CharLogin()
+        }, 1000)
+      }
+    },
+    // 发送消息
+    async SendMessage() {
+      // 判断当前学校是否认证，未认证不可聊天
+
+      const req = {
+        userId: this.vuex_user.id,
+      }
+      const res = await this.$u.apiList.MyPage(req)
+      console.log(JSON.parse(JSON.stringify(res)), 'res')
+      const edcationList = res.edcationList
+      if (!edcationList.length) {
+        return this.$refs.uToast.show({
+          title: '认证后可进行聊天操作',
+          type: 'warning',
+        })
+
+      }
+      const findRow = edcationList.find(x => x.isSelected === true);
+      if ([0, 2].includes(findRow.certifyStatus)) {
+        return this.$refs.uToast.show({
+          title: '认证后可进行聊天操作',
+          type: 'warning',
+        })
+
+      }
+      this.$connection
+          .invoke("sendMessage", this.vuex_user.id, this.userId, this.message, parseInt(this.chatType), this
+              .role)
+          .then((res) => {
+            this.MsgList.push({
+              fromUserId: this.vuex_user.id,
+              message: this.message,
+              sendDate: this.getIsTime(),
+              toUserId: this.userId,
+            })
+            this.state = true
+            this.close()
+            this.goBottom()
+            this.message = ''
+          }).catch((err) => {
+        this.charLink()
+      });
+    },
+    // 退出连接
+    closeChar() {
+      this.$connection.invoke("signOut", this.vuex_user.id).then((res) => {
+        ;
+      });
+      // this.$connection.onclose(function (data) { //去掉斜杠
+      //   console.log("websocket连接断开");
+      //   //重试
+      //   this.LinkChar()
+      // })
+    },
+    // 表情
+    emojiInit() {
+      var number = 60;
+      var page = Math.ceil(emoji.length / number);
+      for (let i = 0; i < page; i++) {
+        this.emojiData[i] = [];
+        for (let k = 0; k < number; k++) {
+          emoji[i * number + k] ?
+              this.emojiData[i].push(emoji[i * number + k]) : "";
+        }
+      }
+    },
+    inputFocus() {
+      this.CommonWords = false;
+      this.emoji = false;
+      this.goBottom();
+    },
+    inputBlur() {
+      ;
+    },
+    shuru() {
+      this.goBottom()
+    },
+    choice(txt) {
+      this.message = txt;
+    },
+    close() {
+      this.CommonWords = false;
+      this.emoji = false;
+    },
+    sendOut() {
+      this.close();
+    },
+    selemoji(m) {
+      this.message += m;
+    },
+    goBottom() {
+      setTimeout(() => {
+        this.scrollTop += 1;
+      }, 200);
+    },
+    //返回上一级
+    router() {
+      if (this.type == 2) {
+        this.$u.route({
+          url: '/pages/message/adminList/adminList'
+        });
+        return
+      }
+      if (this.type == 0) {
+        uni.switchTab({
+          url: '../../message/msgList/msgList'
+        })
+      } else {
+        this.$u.route({
+          url: 'pages/AlumniCircle/userDetail/userDetail?id=' + this.id + '&type=3'
+        });
+      }
+
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.msgList.emoji,
+.msgList.msg {
+  position: relative;
+  bottom: 3rem;
+}
+
+.errTips {
+  position: absolute;
+  z-index: 9999;
+  width: 100%;
+  background: #fff;
+  height: 0.16rem;
+  overflow: hidden;
+  transition: all 1s;
+
+  .group_3 {
+    color: rgb(255, 117, 134);
+    font-size: 0.11rem;
+    line-height: 0.12rem;
+    letter-spacing: 0.011rem;
+    white-space: nowrap;
+    justify-content: center;
+  }
+
+  .image_2 {
+    width: 0.16rem;
+    height: 0.14rem;
+  }
+
+  .text_5 {
+    margin-left: 0.085rem;
+    line-height: 1.4;
+  }
+}
+
+.emojishow {
+  height: 3rem !important;
+}
+
+.slider {
+  background: #fff;
+  width: 7.75rem;
+  height: 0rem;
+  transition: all 0.3s;
+
+  .slider-emoji {
+    overflow-y: scroll;
+    width: 100vw !important;
+  }
+
+  &-emoji {
+    width: 6.75rem;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: center;
+
+    &-icon {
+      font-size: 0.265rem;
+      display: inline-block;
+      width: 10%;
+      text-align: center;
+      padding: 0.05rem 0;
+      border-radius: 0.1rem;
+      //   border-bottom: 1px solid #ccc;
+    }
+
+    &-icon:active {
+      background: #ccc;
+    }
+  }
+}
+
+.lastbox {
+  justify-content: flex-start;
+}
+
+.msgList {
+  .scroll {
+    height: calc(100vh - 1rem);
+    background: #fff;
+    padding: 0 0.17rem;
+    box-sizing: border-box;
+
+    ::v-deep .uni-scroll-view-content {
+      height: auto;
+      padding-bottom: 0.2rem;
+    }
+  }
+
+  > view {
+    margin-top: 0;
+  }
+
+  .systis {
+    width: 80%;
+    background-color: #f1f1f5;
+    margin: 0.15rem auto;
+    margin-top: 0.2rem;
+    border-radius: 0.1rem;
+
+    .section_2 {
+      margin-right: 0.02rem;
+      margin-top: 0.15rem;
+      padding: 0.13rem 0.075rem 0.13rem 0.18rem;
+      border-radius: 0.087rem 0.087rem 0.087rem 0.087rem;
+      background-size: 100% 100%;
+      background-repeat: no-repeat;
+    }
+
+    .group_2 {
+      color: rgb(160, 162, 172);
+      font-size: 0.12rem;
+      line-height: 0.2rem;
+      letter-spacing: 0.012rem;
+
+      text {
+        width: 100%;
+      }
+    }
+
+    .text_6 {
+      margin-top: 0.08rem;
+      color: rgb(160, 162, 172);
+      font-size: 0.12rem;
+      line-height: 0.16rem;
+      letter-spacing: 0.012rem;
+      white-space: nowrap;
+    }
+
+    .group_3 {
+      margin-top: 0.095rem;
+      color: rgb(160, 162, 172);
+      font-size: 0.12rem;
+      line-height: 0.12rem;
+      letter-spacing: 0.012rem;
+      white-space: nowrap;
+    }
+
+    .group_4 {
+      margin-top: 0.095rem;
+      padding-left: 0.005rem;
+    }
+
+    .text_5 {
+      margin-top: 0.07rem;
+    }
+
+    .text_8 {
+      margin-left: 0.04rem;
+    }
+
+    .text_9 {
+      align-self: center;
+      color: rgb(160, 162, 172);
+      font-size: 0.12rem;
+      line-height: 0.12rem;
+      letter-spacing: 0.012rem;
+      white-space: nowrap;
+    }
+
+    .text_10 {
+      color: rgb(46, 155, 255);
+      font-size: 0.12rem;
+      line-height: 0.16rem;
+      white-space: nowrap;
+    }
+  }
+
+  .exchange {
+    .top-group {
+      margin-left: 0.15rem;
+      margin-top: 0.085rem;
+      margin-right: 0.15rem;
+    }
+
+    .left-text-wrapper {
+      padding: 0.065rem 0 0.055rem;
+      background-color: rgb(255, 255, 255);
+      border-radius: 0.03rem;
+      width: 0.65rem;
+      height: 0.25rem;
+      border: solid 0.01rem rgb(255, 255, 255);
+    }
+
+    .right-text-wrapper {
+      margin-left: 0.24rem;
+      padding: 0.06rem 0;
+      background-color: rgb(255, 255, 255);
+      border-radius: 0.03rem;
+      width: 0.65rem;
+      height: 0.25rem;
+      border: solid 0.01rem rgb(255, 255, 255);
+    }
+
+    .text_11 {
+      color: rgb(255, 255, 255);
+      font-size: 0.15rem;
+      line-height: 0.14rem;
+      letter-spacing: 0.015rem;
+      white-space: nowrap;
+      text-align: center;
+    }
+
+    .bottom-group {
+      color: rgb(115, 129, 255);
+      font-size: 0.12rem;
+      line-height: 0.12rem;
+      letter-spacing: 0.012rem;
+      white-space: nowrap;
+    }
+
+    .right {
+      margin-left: 0.14rem;
+    }
+
+    .section_3 {
+      margin-top: 0.06rem;
+      padding: 0.15rem 0.33rem;
+      border-radius: 0.075rem 0.075rem 0.075rem 0.075rem;
+      background-image: url("~@/static/common/img/exchangeBjImg.png");
+      background-size: 100% 100%;
+      background-repeat: no-repeat;
+    }
+
+    .text_12 {
+    }
+
+    .view_1 {
+      margin-top: 0.21rem;
+    }
+  }
+
+  .hemsg {
+    margin-top: 0.15rem;
+
+    .image_3 {
+      width: 0.4rem !important;
+      height: 0.4rem !important;
+      border-radius: 50%;
+      overflow: hidden;
+      flex: 0 0 0.4rem !important;
+    }
+
+    .right-text-wrapper_1 {
+      margin-left: 0.15rem;
+      margin-top: 0.085rem;
+      padding: 0.1rem;
+      background-color: #f6f8fa;
+      border-radius: 0.1rem;
+      // border-top-left-radius: 0;
+      max-width: 65%;
+      word-break: break-all;
+    }
+
+    .group {
+      color: rgb(0, 0, 0);
+      font-size: 0.15rem;
+      line-height: 0.16rem;
+      letter-spacing: 0.015rem;
+      //   white-space: nowrap;
+    }
+
+    .image_11 {
+      margin-bottom: 0.035rem;
+    }
+  }
+
+  .tis {
+    margin-top: 0.15rem;
+
+    .text {
+      display: block;
+      text-align: center;
+      color: rgb(180, 182, 189);
+      font-size: 0.11rem;
+      line-height: 0.12rem;
+      letter-spacing: 0.011rem;
+      white-space: nowrap;
+    }
+  }
+
+  .mymsg {
+    margin-top: 0.1rem;
+
+    .image_3 {
+      width: 0.4rem;
+      height: 0.4rem;
+      border-radius: 50%;
+    }
+
+    .text-wrapper {
+      margin-right: 0.14rem;
+      margin-top: 0.085rem;
+      padding: 0.1rem 0.1rem 0.09rem;
+      border-radius: 0.1rem;
+      // border-top-right-radius: 0;
+      background: #3CB5FB;
+      background-size: 100% 100%;
+      background-repeat: no-repeat;
+      max-width: 65%;
+      word-break: break-all;
+
+    }
+
+    .group_5 {
+      margin-top: 0.025rem;
+      color: rgb(255, 255, 255);
+      font-size: 0.15rem;
+      line-height: 0.16rem;
+      letter-spacing: 0.015rem;
+      white-space: wrap;
+    }
+  }
+}
+
+.Tips {
+  position: absolute;
+  z-index: 9;
+  top: 0.44rem;
+  left: 0;
+  right: 0;
+  background: #fff;
+}
+
+.navbar-center {
+  text-align: center;
+  width: 100%;
+
+  text {
+    display: block;
+  }
+
+  .info {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+  }
+
+  .name {
+    line-height: 0.15rem;
+    font-weight: 800;
+    font-size: 32rpx;
+    color: rgba(0, 0, 0, 0.9);
+  }
+
+  .shool {
+    font-size: 0.11rem;
+    color: #cacaca;
+  }
+}
+
+.navbar-right {
+  .btn {
+    // height: 0.3rem;
+    background-color: #2e9bff;
+    border-radius: 0.05rem;
+    font-size: 0.15rem;
+    line-height: 0.15rem;
+    color: #ffffff;
+    margin-right: 0.22rem;
+  }
+}
+
+.quick {
+  .section_2 {
+    padding: 0.08rem 0.095rem 0.06rem;
+    color: rgb(46, 155, 255);
+    font-size: 0.11rem;
+    line-height: 0.12rem;
+    letter-spacing: 0.011rem;
+    white-space: nowrap;
+    position: relative;
+  }
+
+  .image_2 {
+    position: absolute;
+    right: 0.095rem;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 0.18rem;
+    height: 0.18rem;
+  }
+
+  .info {
+    font-size: 0.11rem;
+    line-height: 0.18rem;
+    letter-spacing: 0.01rem;
+    color: #2e9bff;
+  }
+
+  .text {
+    text-transform: uppercase;
+    color: #fff !important;
+    line-height: 0.25rem !important;
+  }
+
+  .section_7 {
+    padding: 0.055rem 0.095rem 0.045rem 50%;
+    color: rgb(255, 255, 255);
+    font-size: 0.12rem;
+    line-height: 0.12rem;
+    white-space: nowrap;
+    background-color: rgba(46, 155, 255, 0.1);
+  }
+
+  .image_13 {
+    margin: 0.04rem 0 0.025rem;
+    width: 0.18rem;
+    height: 0.18rem;
+  }
+
+  .text-wrapper_2 {
+    background-color: rgb(115, 129, 255);
+    border-radius: 0.05rem;
+    width: 0.97rem;
+    height: 0.25rem;
+    color: #fff;
+  }
+
+  .text-wrapper_3 {
+    margin-left: 0.14rem;
+    background-color: rgb(115, 129, 255);
+    border-radius: 0.05rem;
+    height: 0.25rem;
+  }
+}
+
+.msgbox {
+  position: fixed;
+  bottom: 0;
+  width: 100%;
+
+  .section_1 {
+    // height: 0.52rem;
+    background-color: #fff;
+    border: solid 0.01rem #eeeeee;
+    padding: 0.11rem 0.1rem 0.11rem 0.1rem;
+
+    .input-box {
+      display: flex;
+      width: 100%;
+      background: #f6f8f9;
+      padding: 6rpx;
+      border-radius: 20rpx;
+      align-items: center;
+    }
+  }
+
+  .text {
+    font-size: 0.14rem;
+    line-height: 0.15rem;
+    color: #505051;
+    margin: 0 0.1rem;
+    line-height: 0.36rem;
+  }
+
+  .input {
+    width: 80%;
+    min-height: 0.36rem !important;
+    line-height: 0.36rem;
+    // background-color: #f7f7f7;
+    border-radius: 0.1rem;
+    font-size: 0.14rem;
+    padding-right: 0.1rem !important;
+
+    ::v-deep .u-input__input {
+      padding: 0.05rem;
+      min-height: 0.16rem !important;
+      transform: translateY(0.03rem);
+    }
+  }
+
+  .icon {
+    margin-left: 0.05rem;
+    // padding: 0.03rem 0;
+    margin-top: 10rpx;
+  }
+
+  .btn {
+    padding: 0.03rem 0;
+
+    .sendOut {
+      height: 60rpx;
+      line-height: 60rpx;
+      width: 90rpx;
+      margin-left: 0.05rem;
+      background: linear-gradient(178deg, #3CB5FB 0%, #06E1FA 100%);;
+      color: #ffffff;
+
+    }
+  }
+
+  .image {
+    width: 0.26rem;
+    height: 0.26rem;
+  }
+
+  .CommonWords {
+    width: 100%;
+    background-color: #f6f7fa;
+
+    text {
+      transition: all 0.3s;
+      display: block;
+      padding: 0.1rem 0 0.1rem 0.2rem;
+      font-size: 0.14rem;
+      line-height: 0.2rem;
+      height: 0.4rem;
+      overflow: hidden;
+      color: #505051;
+    }
+
+    text:active {
+      background: #ccc;
+    }
+  }
+
+  .open {
+    height: 3rem !important;
+    transition: all 0.3s;
+  }
+
+  .expandBox {
+    width: 100%;
+    background-color: #fff;
+
+    .expand-content {
+      width: 100%;
+      padding: 20rpx 30rpx;
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: space-between;
+
+      .expand-item {
+        width: 140rpx;
+        text-align: center;
+        color: #999999;
+      }
+
+      image {
+        width: 140rpx;
+        height: 140rpx;
+        margin-bottom: 10rpx;
+      }
+    }
+
+  }
+
+  .open {
+    width: 100%;
+    height: 1.5rem !important;
+    transition: all 0.3s;
+  }
+}
+
+.attention-box {
+  width: 686rpx;
+  height: 100rpx;
+  background: #F6F8F9;
+  box-shadow: 0rpx 2rpx 10rpx -2rpx rgba(0, 0, 0, 0.06), 0rpx 4rpx 4rpx 0rpx rgba(0, 0, 0, 0.04), 0rpx 2rpx 12rpx 0rpx rgba(0, 0, 0, 0.02);
+  border-radius: 24rpx;
+  margin: 0 auto;
+  padding: 0 40rpx;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.attention-right {
+  display: flex;
+  align-items: center;
+
+  image {
+    width: 44rpx;
+    height: 44rpx;
+  }
+}
+
+.attention-btn {
+  width: 120rpx;
+  height: 48rpx;
+  text-align: center;
+  line-height: 48rpx;
+  background: linear-gradient(178deg, #3CB5FB 0%, #06E1FA 100%);
+  border-radius: 64rpx;
+  font-size: 24rpx;
+  color: #fff;
+  margin-right: 20rpx;
+}
+</style>