css

liukangdong

2024-06-25 ebc96a1cf0424c04dceacbc42f9ad2a897223be9

 h5/packagesMine/notice/notice.vue

@@ -1,172 +1,196 @@
<template>

   <view class="notice">

      <view class="notice_item" v-for="(item, index) in list" :key="index" @click="jump(item)">

         <view class="left">

            <view class="left_dian" v-if="item.status === 0"></view>

            <image src="@/static/meeting/icon/xiaoxi_ic_gonggao@2x.png" v-if="item.type === 1" mode="widthFix"></image>

            <image src="@/static/meeting/icon/xiaoxi_ic_gonggao@2x(1).png" v-else mode="widthFix"></image>

         </view>

         <view class="right">

            <view class="right_a">{{item.title}}</view>

            <view class="right_b" v-if="item.type === 1">

               <view class="right_b_label">会议主题：</view>

               <view class="right_b_val">{{item.meetingDetailResponse.meetingName}}</view>

            </view>

            <view class="right_b" v-if="item.type === 1">

               <view class="right_b_label">会议时间：</view>

               <view class="right_b_val">{{item.meetingDetailResponse.meetingDate}} {{item.meetingDetailResponse.meetingTime}}</view>

            </view>

            <view class="right_b" v-if="item.type === 1">

               <view class="right_b_label">会议室：</view>

               <view class="right_b_val">{{item.meetingDetailResponse.roomName}}</view>

            </view>

            <view class="right_b" v-if="item.type === 1">

               <view class="right_b_label">预约人：</view>

               <view class="right_b_val">{{item.meetingDetailResponse.bookingUserName}}</view>

            </view>

            <view class="right_c" v-if="item.type !== 1">{{item.createDate}}</view>

         </view>

      </view>

   </view>

  <view class="notice">

    <view

      class="notice_item"

      v-for="(item, index) in list"

      :key="index"

      @click="jump(item)"

    >

      <view class="left">

        <view class="left_dian" v-if="item.status === 0"></view>

        <image

          src="@/static/meeting/icon/xiaoxi_ic_gonggao@2x.png"

          v-if="item.type === 1"

          mode="widthFix"

        ></image>

        <image

          src="@/static/meeting/icon/xiaoxi_ic_gonggao@2x(1).png"

          v-else

          mode="widthFix"

        ></image>

      </view>

      <view class="right">

        <view class="right_a">{{ item.title }}</view>

        <view class="right_b" v-if="item.type === 1">

          <view class="right_b_label">会议主题：</view>

          <view class="right_b_val">{{

            item.meetingDetailResponse.meetingName

          }}</view>

        </view>

        <view class="right_b" v-if="item.type === 1">

          <view class="right_b_label">会议时间：</view>

          <view class="right_b_val"

            >{{ item.meetingDetailResponse.meetingDate }}

            {{ item.meetingDetailResponse.meetingTime }}</view

          >

        </view>

        <view class="right_b" v-if="item.type === 1">

          <view class="right_b_label">会议室：</view>

          <view class="right_b_val">{{

            item.meetingDetailResponse.roomName

          }}</view>

        </view>

        <view class="right_b" v-if="item.type === 1">

          <view class="right_b_label">预约人：</view>

          <view class="right_b_val">{{

            item.meetingDetailResponse.bookingUserName

          }}</view>

        </view>

        <view class="right_c" v-if="item.type !== 1">{{

          item.createDate

        }}</view>

      </view>

    </view>

  </view>

</template>



<script>

   export default {

      data() {

         return {

            page: 0,

            next: false,

            list: []

         };

      },

      onLoad() {

         this.getList()

      },

      onReachBottom(){

         this.getList()

      },

      methods: {

         getList() {

            if (!this.next) {

               this.page = this.page + 1

               this.$u.api.findNoticePage({

                  capacity: 20,

                  model: {

							
                  },

                  page: this.page

               }).then(res => {

                  if (res.data.records.length > 0) {

                     this.list = [...this.list, ...res.data.records]

                  }

                  if (res.data.records.length < 20) {

                     this.next = false

                  }

               })

            }

         },

         jump(item) {

            var that = this

            if (item.type === 0) {

               uni.navigateTo({

                  url: `/packagesMine/notificationDetails/notificationDetails?content=${item.id}`

               });

            } else {

               that.$u.api.getMemberDTO({ id: item.id })

                  .then(res => {

                     that.list.forEach(element => {

                        if (element.id === item.id) {

                           element.status = 1

                        }

                     })

                     uni.navigateTo({

                        url: `/packagesMine/meetingDetails/meetingDetails?id=${item.meetingDetailResponse.id}`

                     });

                  })

            }

         }

      }

   }

export default {

  data() {

    return {

      page: 0,

      next: false,

      list: []

    }

  },

  onLoad() {

    this.getList()

  },

  onReachBottom() {

    this.getList()

  },

  methods: {

    getList() {

      if (!this.next) {

        this.page = this.page + 1

        this.$u.api.findNoticePage({

          capacity: 20,

          model: {



          },

          page: this.page

        }).then(res => {

          if (res.data.records.length > 0) {

            this.list = [...this.list, ...res.data.records]

          }

          if (res.data.records.length < 20) {

            this.next = false

          }

        })

      }

    },

    jump(item) {

      var that = this

      if (item.type === 0) {

        uni.navigateTo({

          url: `/packagesMine/notificationDetails/notificationDetails?content=${item.id}`

        })

      } else {

        that.$u.api.getMemberDTO({ id: item.id })

          .then(res => {

            that.list.forEach(element => {

              if (element.id === item.id) {

                element.status = 1

              }

            })

            uni.navigateTo({

              url: `/packagesMine/meetingDetails/meetingDetails?id=${item.meetingDetailResponse.id}`

            })

          })

      }

    }

  }

}

</script>



<style lang="scss">

   .notice {

      width: 100%;

      padding: 26rpx 30rpx;

      box-sizing: border-box;

      .notice_item {

         width: 100%;

         display: flex;

         align-items: flex-start;

         justify-content: space-between;

         background-color: #fff;

         padding: 30rpx;

         box-sizing: border-box;

         margin-bottom: 20rpx;

         &:last-child {

            margin-bottom: 0 !important;

         }

         .left {

            flex-shrink: 0;

            width: 72rpx;

            height: 72rpx;

            position: relative;

            margin-right: 24rpx;

            .left_dian {

               position: absolute;

               right: 0;

               top: 0;

               width: 18rpx;

               height: 18rpx;

               background: #F62710;

               border: 2rpx solid #FFFFFF;

               border-radius: 50%;

            }

            image {

               width: 100%;

               height: 100%;

            }

         }

         .right {

            flex: 1;

            display: flex;

            flex-direction: column;

            .right_a {

               font-size: 32rpx;

               font-family: PingFangSC-Medium, PingFang SC;

               font-weight: 500;

               color: #222222;

               margin-bottom: 24rpx;

            }

            .right_c {

               font-size: 26rpx;

               font-family: PingFangSC-Regular, PingFang SC;

               font-weight: 400;

               color: #999999;

            }

            .right_b {

               display: flex;

               align-items: flex-start;

               margin-bottom: 24rpx;

               &:last-child {

                  margin-bottom: 0 !important;

               }

               .right_b_label {

                  flex-shrink: 0;

                  font-size: 26rpx;

                  font-family: PingFangSC-Regular, PingFang SC;

                  font-weight: 400;

                  color: #666666;

               }

               .right_b_val {

                  flex: 1;

                  font-size: 26rpx;

                  font-family: PingFangSC-Regular, PingFang SC;

                  font-weight: 400;

                  color: #333333;

               }

            }

         }

      }

   }

.notice {

  width: 100%;

  padding: 26rpx 30rpx;

  box-sizing: border-box;

  .notice_item {

    width: 100%;

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    background-color: #fff;

    padding: 30rpx;

    box-sizing: border-box;

    margin-bottom: 20rpx;

    &:last-child {

      margin-bottom: 0 !important;

    }

    .left {

      flex-shrink: 0;

      width: 72rpx;

      height: 72rpx;

      position: relative;

      margin-right: 24rpx;

      .left_dian {

        position: absolute;

        right: 0;

        top: 0;

        width: 18rpx;

        height: 18rpx;

        background: #f62710;

        border: 2rpx solid #ffffff;

        border-radius: 50%;

      }

      image {

        width: 100%;

        height: 100%;

      }

    }

    .right {

      flex: 1;

      display: flex;

      flex-direction: column;

      .right_a {

        font-size: 32rpx;

        font-family: PingFangSC-Medium, PingFang SC;

        font-weight: 600;

        color: #222222;

        margin-bottom: 24rpx;

      }

      .right_c {

        font-size: 26rpx;

        font-family: PingFangSC-Regular, PingFang SC;

        font-weight: 400;

        color: #999999;

      }

      .right_b {

        display: flex;

        align-items: flex-start;

        margin-bottom: 24rpx;

        &:last-child {

          margin-bottom: 0 !important;

        }

        .right_b_label {

          flex-shrink: 0;

          font-size: 26rpx;

          font-family: PingFangSC-Regular, PingFang SC;

          font-weight: 400;

          color: #666666;

        }

        .right_b_val {

          flex: 1;

          font-size: 26rpx;

          font-family: PingFangSC-Regular, PingFang SC;

          font-weight: 400;

          color: #333333;

        }

      }

    }

  }

}

</style>