【变更】 消息加详情弹框

pages/home/home.js

@@ -44,7 +44,51 @@ Page({
       titile: '', // 提醒类型  3：会议 6：文件  7：邮寄 8：催款
       startTime: '', // 开始日期
       endTime: '' // 结束日期
-    }
+    },
+    content:'',// 消息内容
+    showModal:false, // 是否显示弹窗
+    clickItem:null,
+    signUpBool:false // 是否跳转可报名
+  },
+  showDialogBtn: function (e) {
+   let content =  e.currentTarget.dataset.message.msgContent
+   // 是否可跳转报名
+   const templateCode = e.currentTarget.dataset.message.templateCode
+   if(templateCode === 'QY_1_HYTZ_WORK_GROUP_CREATE' || templateCode === "QY_13_HYTZ_FBW_CREATE"){
+     this.setData({
+       signUpBool:true
+     })
+   }else{
+
+    this.setData({
+      signUpBool:false
+    })
+   }
+    const that = this
+    that.setData({
+      showModal: true,
+      content:content,
+      clickItem: e
+    })
+  },
+  /**
+   * 弹出框蒙层截断touchmove事件
+   */
+  preventTouchMove: function () {
+  },
+  /**
+   * 隐藏模态对话框
+   */
+  hideModal: function () {
+    const that = this
+    this.messageDetail(this.data.clickItem)
+    this.loadData()
+    that.setData({
+      showModal: false,
+      content:'',
+      clickItem:null
+    });
+  
   },
   loadData() {
     wx.showToast({
@@ -107,7 +151,7 @@ Page({
   // 会议去报名，切换已读状态
   messageDetail(e) {
     const readFlag = e.currentTarget.dataset.message.readFlag
-    const templateCode = e.currentTarget.dataset.message.templateCode
+    
     if (readFlag == 0) { // 标记已读
       UserApi.messageStatus({
         anntId: e.currentTarget.dataset.message.anntId
@@ -119,7 +163,12 @@ Page({
         })
       })
     }
-    const meetingId = JSON.parse(e.currentTarget.dataset.message.busId).id
+ 
+  },
+  // 去报名 
+  goSignUpPage(){
+    const templateCode = this.data.clickItem.currentTarget.dataset.message.templateCode
+    const meetingId = JSON.parse( this.data.clickItem.currentTarget.dataset.message.busId).id
     if (templateCode == 'QY_1_HYTZ_WORK_GROUP_CREATE' || templateCode == "QY_13_HYTZ_FBW_CREATE") { // 去报名页
       // 需要调用会议详情的接口 判断该会议是否还在报名时间内 并跳转不同的页面或者操作
       MeetingApi.meetingDetail({
@@ -132,6 +181,9 @@ Page({
             wx.navigateTo({
               // 这里传入的是会议id
               url: `../cannotSignUp/cannotSignUp`,
+              success: () => {
+                this.hideModal()
+              }
             })
           } else {
             // 从消息报名的参会单位不可更改

pages/home/home.wxml

@@ -30,7 +30,8 @@
             </picker>
           </view>
           <view class="select-item">
-            <picker mode="date" value="{{searchParams.startTime}}" start="2000-01-01" end="2050-12-31" bindchange="bindDateChange">
+            <picker mode="date" value="{{searchParams.startTime}}" start="2000-01-01" end="2050-12-31"
+              bindchange="bindDateChange">
               <view class="picker">
                 <text wx:if="{{!searchParams.startTime}}">时间</text>
                 <text wx:if="{{searchParams.startTime}}">{{searchParams.startTime}}</text>
@@ -41,14 +42,16 @@
       </view>
       <!-- 列表 -->
       <view class="list-content" wx:if="{{list && list.length}}">
-        <view class="list-content-item" wx:for="{{list}}" wx:key="item" wx:for-item="item" bindtap="messageDetail" data-message="{{item}}">
+        <view class="list-content-item" wx:for="{{list}}" wx:key="item" wx:for-item="item" bindtap="showDialogBtn"
+          data-message="{{item}}">
           <view class="content-top">
             <view>
               <image wx:if="{{item.titile == 8}}" src="../../assets/images/fapiao.png"></image>
               <image wx:if="{{item.titile == 7}}" src="../../assets/images/youji.png"></image>
               <image wx:if="{{item.titile == 6}}" src="../../assets/images/wenjian.png"></image>
               <image wx:if="{{item.titile == 3}}" src="../../assets/images/hy.png"></image>
-              <text class="{{item.titile == 3 ? 'blue' : item.titile == 6 ? 'yellow' : item.titile == 7 ? 'pol' : 'green' }}">{{item.titile_dictText}}</text>
+              <text
+                class="{{item.titile == 3 ? 'blue' : item.titile == 6 ? 'yellow' : item.titile == 7 ? 'pol' : 'green' }}">{{item.titile_dictText}}</text>
             </view>
             <text class="content-time">{{item.sendTime}}</text>
           </view>
@@ -61,4 +64,18 @@
       <text>暂无消息通知！</text>
     </view>
   </view>
-</view>
+
+  <view class="modal-mask" bindtap="hideModal" catchtouchmove="preventTouchMove" wx:if="{{showModal}}"></view>
+  <view class="modal-dialog" wx:if="{{showModal}}">
+    <view class="modal-content">
+      <!-- {{content}} -->
+      <!-- rich-text 会解析html模板中的html标签 -->
+      <rich-text nodes="{{content}}"></rich-text>
+      <text wx:if="{{signUpBool}}" style="color:#069f99" bindtap="goSignUpPage"> 去报名 </text>
+    </view>
+    <view class="modal-footer">
+      <view class="btn-cancel" bindtap="hideModal" data-status="cancel">我知道了</view>
+    </view>
+  </view>
+
+</view>

pages/home/home.wxss

@@ -123,4 +123,46 @@ page{
   height: 5px;
   background-color: #FF5E60;
   border-radius: 50%;
+}
+
+.modal-mask {
+  width: 100%;
+  height: 100%;
+  position: fixed;
+  top: 0;
+  left: 0;
+  background: #000;
+  opacity: 0.5;
+  overflow: hidden;
+  z-index: 9000;
+  color: #fff;
+}
+.modal-dialog {
+  width: 540rpx;
+  overflow: hidden;
+  position: fixed;
+  top: 50%;
+  left: 0;
+  z-index: 9999;
+  background: #f9f9f9;
+  margin: -180rpx 105rpx;
+  border-radius: 8rpx;
+} 
+.modal-content {
+  padding: 50rpx;
+  text-align: center;
+  color: #666
+}
+.modal-footer {
+  height: 70rpx;
+  border-top: 1px solid #dedede;
+  font-size: 32rpx;
+  line-height: 70rpx;
+}
+.btn-cancel {
+  width: 100%;
+  color: #fff;
+  background: #069F99;
+  text-align: center;
+  border-right: 1px solid #dedede;
 }