更新

MrShi

2025-03-12 69a1b3bf45738f048361ee4ccb6bdc64fce35720

 h5/pages/meeting/myAppointment/myAppointment.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,667 @@
<template>

  <page-meta

    :page-style="'overflow:' + (pageShow ? 'hidden' : 'visible')"

  ></page-meta>

  <view class="yuyue">

    <view class="yuyue_head">

      <view class="yuyue_head_input">

        <u--input

          placeholder="搜索"

          prefixIcon="search"

          v-model="meetingName"

          @confirm="sou"

          prefixIconStyle="font-size: 22px; color: #909399"

        ></u--input>

      </view>

      <view class="yuyue_head_list">

        <view

          class="yuyue_head_list_item"

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

          :key="index"

          @click="clickItem(index)"

        >

          <text :class="i === index ? 'yuyue_head_list_item_active' : ''">{{

            item.name

          }}</text>

          <view class="yuyue_head_list_item_h" v-show="i === index"></view>

        </view>

      </view>

    </view>



    <view class="yuyue_content" v-if="list && list.length > 0">

      <view

        class="yuyue_content_item"

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

        :key="index"

      >

        <view class="item_a" @click="jump(item.id)">

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

          <view class="item_a_1 item_a_two" v-if="item.meetingStatus === 1"

            >未开始</view

          >

          <view class="item_a_1 item_a_one" v-else-if="item.meetingStatus === 2"

            >进行中</view

          >

          <view class="item_a_1 item_a_three" v-else>已结束</view>

        </view>

        <view class="item_b" @click="jump(item.id)"></view>

        <view class="item_c" @click="jump(item.id)">

          <view class="item_c_item">

            <text>会议时间：</text>

            <text>{{ item.meetingDate }} {{ item.meetingTime }}</text>

          </view>

          <view class="item_c_item">

            <text>会议室：</text>

            <text>{{ item.roomName }}</text>

          </view>

          <view class="item_c_item">

            <text>预约人：</text>

            <text>{{ item.bookingUser }}</text>

          </view>

        </view>

        <view class="item_d" v-if="i === 0">

          <view class="item_d_left">

            <view

              class="item_d_left_item"

              @click.stop="copy(item)"

              v-if="item.meetingStatus !== 3"

            >

              <image

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

                mode="widthFix"

              ></image>

              <text>复制</text>

            </view>

            <view

              class="item_d_left_item"

              @click="fenxiang(item)"

              v-if="item.meetingStatus !== 3"

            >

              <button open-type="share"></button>

              <image

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

                mode="widthFix"

              ></image>

              <text>分享</text>

            </view>

            <view

              class="item_d_left_item"

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

              @click.stop="closeRoom(item.meetingStatus, item.id)"

            >

              <image

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

                mode="widthFix"

              ></image>

              <text>取消</text>

            </view>

          </view>

          <view

            class="item_d_right"

            @click.stop="getQrCodes(item.id, item.roomName)"

          >

            å¼€é—¨ç 

          </view>

        </view>

      </view>

    </view>



    <view class="yuyue_content" v-else>

      <view class="yuyue_content_wu">

        <image src="@/static/meeting/common/364.png" mode="widthFix"></image>

      </view>

    </view>



    <!-- å¼€é—¨ç  -->

    <view class="details_ma">

      <u-popup

        :show="show"

        :closeable="true"

        :safeAreaInsetBottom="false"

        :round="0"

        mode="center"

        @close="close"

      >

        <view class="box">

          <text class="box_a">{{ roomName || "" }}</text>

          <!-- <text class="box_b">二维码{{time}}秒内有效</text> -->

          <text class="box_b" v-if="time > 0">二维码{{ time }}秒内有效</text>

          <text class="box_b" v-else>二维码已过期，请点击二维码刷新</text>

          <view class="qrcode" @click="Refresh(1)">

            <image :src="qrurl" mode="widthFix"></image>

          </view>

          <!-- <text class="box_c">出示该二维码，扫码进入会议室</text>

               <text class="box_d">如果打不开请联系管理员：</text>

               <text class="box_e">李红和 18899039483</text> -->

        </view>

      </u-popup>

    </view>



    <!-- å–消会议 -->

    <u-modal

      :show="show1"

      title="提示"

      content="是否确认取消当前会议"

      @confirm="confirm"

      @cancel="close1"

      ref="uModal"

      :showCancelButton="true"

      asyncClose="true"

    ></u-modal>

  </view>

</template>



<script>

import { mapState } from 'vuex'

import tkiQrcode from "@/components/tki-qrcode/tki-qrcode.vue"

export default {

  data() {

    return {

      i: 0,

      show: false,

      cate: [

        { name: '未开始', id: 1 },

        { name: '已结束', id: 2 }

      ],

      pageShow: false,

      id: '',

      meetingName: '',

      show1: false,

      val: '',

      list: [],

      next: false,

      page: 0,

      time: 0,

      roomName: '',

      link: '',

      qrurl: '',

      timer: null,

      timeValue: '',

      Id: '',

      share: {

        title: '',

        path: '',

        imageUrl: 'https://dmtest.ahapp.net/file/projects/20230511/13f256b832db4a4fadc5e6770f5727bf.png'

      }

    }

  },

  computed: {

    ...mapState(['token'])

  },

  components: { tkiQrcode },

  onReachBottom() {

    this.getList()

  },

  onLoad() {

    this.getList()

    this.getSYSTEM()

  },

  onShareAppMessage({ from, target }) {

    if (from == 'button') {

      return this.share

    }

  },

  methods: {

    // åˆ†äº«

    fenxiang(item) {

      this.share.title = item.meetingName

      this.share.path = `/packagesMine/meetingDetails/meetingDetails?shareId=${item.id}`

    },

    // åˆ·æ–°äºŒç»´ç 

    Refresh(type) {

      if (this.time !== 0) return

      uni.showLoading({

        title: '加载中',

        mask: true

      })

      uni.request({

        url: `${this.$baseUrl}web/meeting/getQrCodeImg?id=${this.Id}&token=${this.token}`,   //url地址

        method: 'GET',

        responseType: 'arraybuffer',

        header: {

          'Content-Type': 'application/json'

        },

        success: res => {

          const arrayBuffer = new Uint8Array(res.data)

          const base64 = "data:image/png;base64," + uni.arrayBufferToBase64(arrayBuffer)   //这里需要添加前缀

          this.qrurl = base64

          if (type === 1) {

            this.time = Number(this.timeValue) * 60

            this.getTime()

          }

        },

        complete() {

          uni.hideLoading()

        }

      })

    },

    getTime() {

      this.timer = setInterval(() => {

        if (this.time === 0) {

          clearInterval(this.timer)

          this.timer = null

          this.time = 0

          return

        }

        this.time = this.time - 1

      }, 1000)

    },

    getSYSTEM() {

      this.$u.api.getSystemDictData({

        dictCode: 'SYSTEM',

        label: 'QR_OPENBOOK_VALIDTIME'

      }).then(res => {

        this.time = Number(res.data.code) * 60

        this.timeValue = Number(res.data.code)

      })

      this.$u.api.getSystemDictData({

        dictCode: 'SYSTEM',

        label: 'H5_LINK_ADDR'

      }).then(res => {

        this.link = res.data.code

      })

    },

    sou() {

      this.list = []

      this.next = false

      this.page = 0

      this.getList()

    },

    copy(item) {

      let val = `${item.bookingUser} é‚€è¯·æ‚¨åŠ å…¥ä¼šè®®

会议主题：${item.meetingName}

会议室：${item.roomName}

会议时间：${item.meetingDate} ${item.meetingTime}

点击链接直接加入会议：

${this.link}?id=${item.id}`

      uni.setClipboardData({

        data: val,

        success: function () {

          uni.showToast({

            title: '会议信息复制成功，去分享给同事吧~',

            icon: 'none',

            duration: 2000

          })

        }

      })

    },

    close1() {

      this.show1 = false

    },

    closeRoom(status, id) {

      if (status !== 1) {

        uni.showToast({

          title: '会议不可取消',

          icon: "none",

          duration: 2000

        })

        return

      }

      this.id = id

      this.show1 = true

    },

    confirm() {

      this.$u.api.reservationCancel({

        id: this.id

      }).then(res => {

        this.show1 = false

        if (res.code === 200) {

          uni.showToast({

            title: '取消成功',

            icon: "none",

            duration: 2000

          })

          this.list.forEach((item, index) => {

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

              this.list.splice(index, 1)

            }

          })

        }

      })

    },

    jump(id) {

      uni.navigateTo({

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

      })

    },

    close() {

      this.time = 0

      clearInterval(this.timer)

      this.timer = null

      this.show = false

      this.pageShow = false

      uni.setScreenBrightness({

        value: 0.5,

        success: function () {

          console.log('success')

        }

      })

    },

    getQrCodes(id, roomName) {

      this.Id = id

      this.time = 0

      this.Refresh()

      this.time = this.timeValue * 60

      this.getTime()

      this.pageShow = true

      this.roomName = roomName



      this.show = true

      uni.setScreenBrightness({

        value: 1,

        success: function () {

          console.log('success')

        }

      })

    },

    clickItem(index) {

      this.i = index

      this.list = []

      this.next = false

      this.page = 0

      this.getList()

    },

    getList() {

      if (!this.next) {

        this.page = this.page + 1

        this.$u.api.myMeetingPage({

          capacity: 10,

          page: this.page,

          model: {

            queryType: 2,

            roomsName: this.meetingName,

            status: this.cate[this.i].id

          }

        }).then(res => {

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

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

          }

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

            this.next = true

          }

        })

      }

    }

  }

}

</script>



<style lang="scss">

.yuyue {

  width: 100%;

  .details_ma /deep/ {

    .u-popup__content {

      width: 100%;

      .box {

        width: 100%;

        padding: 80rpx 0;

        box-sizing: border-box;

        background-color: #ffffff;

        display: flex;

        align-items: center;

        justify-content: center;

        flex-direction: column;

        .box_a {

          padding: 0 30rpx;

          box-sizing: border-box;

          font-size: 36rpx;

          font-family: PingFangSC-Semibold, PingFang SC;

          font-weight: 600;

          color: #222222;

        }

        .box_b {

          font-size: 28rpx;

          font-family: PingFangSC-Regular, PingFang SC;

          font-weight: 400;

          color: #0055ff;

          margin-top: 40rpx;

        }

        .qrcode {

          width: 440rpx;

          height: 440rpx;

          margin-top: 40rpx;

          image {

            width: 100%;

            height: 100%;

          }

        }

        .box_c {

          font-size: 28rpx;

          font-family: PingFangSC-Regular, PingFang SC;

          font-weight: 400;

          color: #333333;

          margin-top: 40rpx;

        }

        .box_d {

          font-size: 26rpx;

          font-family: PingFangSC-Regular, PingFang SC;

          font-weight: 400;

          color: #666666;

          margin-top: 32rpx;

        }

        .box_e {

          font-size: 26rpx;

          font-family: PingFangSC-Regular, PingFang SC;

          font-weight: 400;

          color: #666666;

        }

      }

    }

  }

  .yuyue_head {

    padding: 30rpx;

    background-color: #ffffff;

    box-sizing: border-box;

    position: sticky;

    top: 0;

    z-index: 999;

    .yuyue_head_input /deep/ {

      width: 100%;

      height: 72rpx;

      background: #f7f7f7;

      border-radius: 4rpx;

      .u-border {

        border: none !important;

      }

    }

    .yuyue_head_list {

      width: 100%;

      display: flex;

      align-items: center;

      margin-top: 30rpx;

      .yuyue_head_list_item {

        flex: 1;

        display: flex;

        align-items: center;

        justify-content: center;

        flex-direction: column;

        position: relative;

        text {

          font-size: 28rpx;

          font-family: PingFangSC-Regular, PingFang SC;

          font-weight: 400;

          color: #666666;

        }

        .yuyue_head_list_item_active {

          font-size: 30rpx;

          font-family: PingFangSC-Medium, PingFang SC;

          font-weight: 600;

          color: #222222;

        }

        .yuyue_head_list_item_h {

          width: 60rpx;

          height: 4rpx;

          background: #0055ff;

          border-radius: 3rpx;

          position: absolute;

          bottom: -30rpx;

          left: 50%;

          transform: translate(-50%, 0);

        }

      }

    }

  }

  .yuyue_content {

    width: 100%;

    padding: 20rpx 30rpx;

    box-sizing: border-box;

    .yuyue_content_wu {

      width: 100%;

      margin-top: 50rpx;

      display: flex;

      align-items: center;

      justify-content: center;

      image {

        width: 340rpx;

        height: 364rpx;

      }

    }

    .yuyue_content_item {

      width: 100%;

      padding: 30rpx;

      box-sizing: border-box;

      background: #ffffff;

      margin-bottom: 20rpx;

      &:last-child {

        margin-bottom: 0 !important;

      }

      .item_a {

        width: 100%;

        height: 50rpx;

        display: flex;

        align-items: center;

        justify-content: space-between;

        .item_a_title {

          flex: 1;

          white-space: nowrap;

          text-overflow: ellipsis;

          overflow: hidden;

          font-size: 32rpx;

          font-family: PingFangSC-Semibold, PingFang SC;

          font-weight: 600;

          color: #222222;

        }

        .item_a_one {

          border: 2rpx solid #f62710 !important;

          font-size: 22rpx;

          font-family: PingFangSC-Regular, PingFang SC;

          font-weight: 400;

          color: #f62710;

        }

        .item_a_two {

          border: 2rpx solid #0055ff !important;

          font-size: 22rpx;

          font-family: PingFangSC-Regular, PingFang SC;

          font-weight: 400;

          color: #0055ff;

        }

        .item_a_three {

          border: 2rpx solid #999999 !important;

          font-size: 22rpx;

          font-family: PingFangSC-Regular, PingFang SC;

          font-weight: 400;

          color: #999999;

        }

        .item_a_1 {

          flex-shrink: 0;

          padding: 0 8rpx;

          height: 38rpx;

          box-sizing: border-box;

          line-height: 38rpx;

          text-align: center;

          border-radius: 4rpx;

          margin-left: 20rpx;

        }

      }

      .item_b {

        width: 100%;

        height: 1rpx;

        background-color: #e5e5e5;

        margin: 28rpx 0 30rpx 0;

      }

      .item_c {

        width: 100%;

        display: flex;

        flex-direction: column;

        .item_c_item {

          display: flex;

          align-items: flex-start;

          margin-bottom: 24rpx;

          &:last-child {

            margin-bottom: 0 !important;

          }

          text {

            &:first-child {

              flex-shrink: 0;

              font-size: 28rpx;

              font-family: PingFangSC-Regular, PingFang SC;

              font-weight: 400;

              color: #666666;

            }

            &:last-child {

              font-size: 28rpx;

              font-family: PingFangSC-Regular, PingFang SC;

              font-weight: 400;

              color: #333333;

            }

          }

        }

      }

      .item_d {

        width: 100%;

        display: flex;

        align-items: center;

        justify-content: space-between;

        margin-top: 40rpx;

        .item_d_left {

          display: flex;

          align-items: center;

          .item_d_left_item {

            display: flex;

            align-items: center;

            justify-content: center;

            margin-right: 40rpx;

            position: relative;

            overflow: hidden;

            &:last-child {

              margin-right: 0 !important;

            }

            button {

              position: absolute;

              width: 300rpx;

              height: 300rpx;

              border: none;

              top: -20rpx;

              left: -20rpx;

              background: rgba(0, 0, 0, 0);

            }

            image {

              width: 44rpx;

              height: 44rpx;

              margin-right: 8rpx;

            }

            text {

              font-size: 26rpx;

              font-family: PingFangSC-Regular, PingFang SC;

              font-weight: 400;

              color: #666666;

            }

          }

        }

        .item_d_right {

          width: 136rpx;

          height: 56rpx;

          line-height: 56rpx;

          text-align: center;

          background: #0055ff;

          border-radius: 4rpx;

          font-size: 24rpx;

          font-family: PingFangSC-Regular, PingFang SC;

          font-weight: 400;

          color: #ffffff;

        }

      }

    }

  }

}

</style>