增加路线规划，样式修改

qingyiay

2023-05-15 6087ba7d24f2353c2d01a5e5a384d5a20f97a19b

 pages/public-page/message/message.vue

@@ -1,13 +1,15 @@
<template>
   <view class="message-body">
      <u-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png" v-if="messageList.length == 0" width="400" height="400" textSize="18"></u-empty>
      <u-list @scrolltolower="scrolltolower" :height="1400">
      <u-list @scroll="scrolltolower" :height="1400">
         <u-list-item>
            <u-swipe-action>
               <u-swipe-action-item :options="options1" v-for="(item, index) in messageList" :key="item.id" @click="deleteMsg(item, index)">
                  <u-badge :isDot="true" type="error" v-if="item.status === 0"></u-badge>
                  <u-cell size="large" :title="item.title" :label="item.content" @click="messageDetails(item, index)">
                     <view class="prepose" slot="icon"><u-icon name="file-text" color="#a299a0" size="80"></u-icon></view>
                  <u-badge :isDot="true" type="error" v-if="item.status !== 1"></u-badge>
                  <u-cell size="large" :title="item.title" @click="messageDetails(item, index)">
                     <u-parse :content="item.content" slot="label"></u-parse>

                     <view class="prepose" slot="icon"><u-icon name="volume" color="#035CFB" size="40"></u-icon></view>
                  </u-cell>
               </u-swipe-action-item>
            </u-swipe-action>
@@ -41,6 +43,10 @@
   onShow() {
      this.messageReq();
   },
   onHide() {
      this.messageList = [];
      this.pageNum = 1;
   },
   methods: {
      // 触底加载
      scrolltolower() {
@@ -57,10 +63,31 @@
            if (res.code == 0) {
               uni.hideLoading();
               this.total = res.data.total;
               const regex = /<[^>]*>([^<]*)<\/[^>]*>/g;

               const solveHandle = v => {
                  const regex = /<[^>]*>([^<]*)<\/[^>]*>/g;
                  let result = v.replace(regex, (match, p1) => {
                     return p1.length > 8 ? p1.slice(0, 8) + '...' : p1;
                  });
                  return result;
               };
               if (this.pageNum > 1) {
                  this.messageList = this.messageList.concat(res.data.records);
                  this.messageList = this.messageList.map(v => {
                     return {
                        ...v,
                        content: solveHandle(v.content)
                     };
                  });
               } else if (this.pageNum == 1) {
                  this.messageList = res.data.records;
                  this.messageList = this.messageList.map(v => {
                     return {
                        ...v,
                        content: solveHandle(v.content)
                     };
                  });
               }
            } else {
               this.$u.toast('加载失败');
@@ -73,21 +100,13 @@
            this.$reqAllJson('readMessage', { id: value.id, status: value.status }, { method: 'PUT', 'Content-Type': 'application/json' }).then(res => {
               if (res.code == 0) {
                  uni.navigateTo({
                     url: `/pages/public-page/messageDetails/messageDetails?index=${index}`
                     url: `/pages/public-page/messageDetails/messageDetails?messageId=${value.messageId}&id=${value.id}`
                  });
                  // uni.showLoading({
                  //    title: '加载中'
                  // });
                  // this.$reqGet('getMessageByUser', { current: 1, size: this.pageSize }).then(res => {
                  //    uni.hideLoading();
                  //    this.total = res.data.total;
                  //    this.messageList = res.data.records;
                  // });
               }
            });
         } else {
            uni.navigateTo({
               url: `/pages/public-page/messageDetails/messageDetails?index=${index}`
               url: `/pages/public-page/messageDetails/messageDetails?messageId=${value.messageId}&id=${value.id}`
            });
         }
      },
@@ -124,19 +143,38 @@
};
</script>

<style lang="scss">
<style lang="scss" scoped>
@mixin flex {
   display: flex;
   justify-content: center;
   align-items: center;
}
::v-deep .u-list-item- {
   position: relative;
   .u-badge {
      position: absolute;
      right: vww(10);
      top: vww(10);
      left: vww(45);
      top: vww(13);
   }
}
::v-deep .u-cell__title-text {
   height: 32rpx;
   font-size: 34rpx !important;
   font-weight: bold;
   color: #2f2f2f !important;
   margin-bottom: vww(18);
}
.message-body {
   width: 100%;
   height: 100%;

   .prepose {
      width: 89rpx;
      height: 89rpx;
      background: rgba(237, 240, 245, 0.75);
      border-radius: 50%;
      @include flex;
      margin-right: vww(32);
   }
   .more-text {
      color: #999;
      font-size: 24rpx;