settle_down_wx/pages/subPackages/toread/index.vue

<template>
  <div class="secureselftest">
     <div class="toReadItem" v-for="item in msgList" @tap="showDialog(item)" >
          <div class="readTitle">【{{item.type}}】</div>
          <div class="readInfo">{{item.title}}</div>
          <div class="readTime">2024-04-25  09:00</div>
     </div>
    <van-dialog
        use-slot
        title="消息提醒"
        :show="show"
        :show-cancel-button="false"
        confirm-button-text="我知道了"
        confirm-button-color="rgba(87, 107, 149, 1)"
        @confirm="confirm"
        width="640rpx"
    >
      <div class="dialogBox">
        <div class="dialogInfoTitle">{{ title }}</div>
        <div class="dialogInfo">
          <div class="infoRow">
            <span class="infoTitle">合同编号：</span>
            <span class="infoMsg">{{ contractForm.contractNo }}</span>
          </div>
          <div class="infoRow">
            <span class="infoTitle">关联载体：</span>
            <span class="infoMsg">{{ contractForm.houseName }}</span>
          </div>
          <div class="infoRow">
            <span class="infoTitle">合同起止日期：</span>
            <span class="infoMsg">{{ contractForm.startDate }} ~ {{contractForm.endDate}}</span>
          </div>
        </div>
      </div>
    </van-dialog>
  </div>
</template>

<script>
import { getUserLocalStorageInfo, readListAll, userRead, getContractById } from "@/js_sdk/http.js"

export default {
  onShow(){
    this.getList()
  },
  data(){
    return{
      msgList:[
        // {type:'合同到期提醒',info:'xxxxsssSSXX企业名称XXXX企业的合同即将到期请尽快续约.'}
      ],
      show:false,
      id: '',
      contractForm: {

      },
      title: ''
    }
  },
  methods:{
    getList(){
      this.msgList = []
      const data = {
        userId: getUserLocalStorageInfo().userId,
        types: '1'
      }
      readListAll(data).then(res=>{
        res.forEach(item=>{
          const json = this.getItemJson(item)
          this.msgList.push(json)
        })
      })
    },
    getItemJson(item){
      item.type = item.readType == '1' ? '合同到期提醒' : '未知'
      return item;
    },
    showDialog(item){
      if (item.type === '合同到期提醒'){
        this.show = true
        this.title = item.title
        this.id = item.id
        const data = {
          id: item.routeParam.replace('id=','')
        }
        getContractById(data).then(res=>{
          this.contractForm = res
        })
      }
    },
    confirm(){
      const data = {
        id:this.id,
        userId: getUserLocalStorageInfo().userId
      }
      userRead(data).then(res=>{
        this.show = false
        this.getList()
      })
    }
  }
}

</script>


<style lang="scss">
    .secureselftest{
      .toReadItem{
        margin-top: 24rpx;
        margin-left: 32rpx;
        display: flex;
        flex-direction: column;
        background: white;
        width: 686rpx;
        padding: 32rpx;
        box-sizing: border-box;
        border-radius: 16rpx;
        .readTitle{
          color: rgba(3, 101, 249, 1);
          font-size: 28rpx;
        }
        .readInfo{
          color: rgba(51, 51, 51, 1);
          font-size: 28rpx;
          line-height: 42rpx;
          padding: 16rpx 0;
        }
        .readTime{
          color: rgba(102, 102, 102, 1);
          font-size: 28rpx;
        }
      }
      .dialogBox{
        padding: 36rpx 24rpx;
        .dialogInfoTitle{
          color:rgba(53, 53, 53, 1);
          font-size: 32rpx;
          line-height: 48rpx;
          margin-bottom: 32rpx;
        }
        .dialogInfo{
          background: rgba(245, 247, 250, 1);
          border-radius: 8rpx;
          width: 592rpx;
          padding: 20rpx 16rpx;
          box-sizing: border-box;
          .infoRow{
            display: flex;
            align-items: center;
            line-height: 50rpx;
          }
          .infoTitle{
            width: 196rpx;
            font-size: 28rpx;
            color: rgba(51, 51, 51, 1);
          }
          .infoMsg{
            color:rgba(102, 102, 102, 1);
            font-size: 28rpx;
          }
        }
      }
    }
</style>