工作台

src/pages/index/tab3-content.vue

@@ -27,7 +27,7 @@
           <view class="m-time">{{ dateFormat(item.sendTime, 'yyyy-MM-dd hh:mm') }}</view>
         </view>
         <view class="msg-right">
-          <u-button type="primary" size="mini" plain>查看</u-button>
+          <u-button type="primary" size="mini" plain @click="open(item)">查看</u-button>
         </view>
       </view>
       <view class="bottom">
@@ -55,6 +55,16 @@
         </view>
       </view>
     </u-popup>
+    <u-popup v-model="showNoticeDetail" mode="right" width="100%">
+      <view class="notice-box flex h-full flex-col">
+        <view class="notice-title">{{ curNotice.title }} </view>
+        <view class="notice-sub-title">发布时间：{{ dateFormat(curNotice.sendTime, 'yyyy-MM-dd') }} </view>
+        <view class="notice-content flex-1">{{ curNotice.content }} </view>
+        <view class="notice-foot text-left">
+          <u-button type="primary" size="mini" plain @click="showNoticeDetail = false">返回</u-button>
+        </view>
+      </view>
+    </u-popup>
   </view>
 </template>
 
@@ -93,13 +103,19 @@
         list: [],
         triggered: false,
         showPopup: false,
-        showParamsType: false
+        showParamsType: false,
+        showNoticeDetail: false,
+        curNotice: {}
       }
     },
     mounted() {
       this.search()
     },
     methods: {
+      open(item) {
+        this.curNotice = item
+        this.showNoticeDetail = true
+      },
       searchByParams() {
         this.showPopup = false
         this.search()
@@ -238,5 +254,28 @@
       height: 100rpx;
       padding-top: 20rpx;
     }
+    .notice-box {
+      padding: 0 24rpx;
+      .notice-title {
+        color: #262626;
+        font-size: 36rpx;
+        text-align: center;
+        margin-top: 30rpx;
+      }
+      .notice-sub-title {
+        margin-top: 16rpx;
+        margin-bottom: 30rpx;
+        text-align: center;
+      }
+      .notice-content {
+        text-indent: 2em;
+        font-size: 26rpx;
+        padding-bottom: 30rpx;
+        color: #444;
+      }
+      .notice-foot {
+        padding: 20rpx 0;
+      }
+    }
   }
 </style>