dvcp_v2_wechat_app/src/mods/party/AppThreeSessions/qrcode.vue

<template>
  <div class="page">
    <!-- <span class="close-img" @click="closePage()">×</span> -->
    <image src="https://cdn.cunwuyun.cn/img/qrcode-sign-img.png" class="banner-img"></image>
    <div class="btn" @click="btnClick()">{{ btnspan }}</div>
    <div class="mask" v-if="showFail">
      <div class="mask-content">
        <image src="https://cdn.cunwuyun.cn/img/qrcode-sign-fail.png" class="fail-img"></image>
        <div class="mask-span">签到失败！请重新签到</div>
        <div class="mask-btn" @click="btnClick()">确认签到</div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      showFail: false,
      meetingId: '',
      btnspan: '',
      scene: '',
      userId: '',
      isSign: true
    };
  },
  onShow() {
    uni.setNavigationBarColor({
      frontColor: "#ffffff",
      backgroundColor: "#D7261E",
    })
    if (uni.getStorageSync('token')) {
      this.meetingId = this.$mp.query.scene
      // this.meetingId = 'c29aacb54f074c14ab93532e384a6daa'
      this.getUserInfo()
    } else {
      uni.showModal({
        title: '提示',
        content: '您还未登录,请先登录!',
        confirmspan: "去登录",
        showCancel: false,
        success(res) {
          if (res.confirm) {
            wx.switchTab({
              url: '../mine/mine',
            })
          }
        }
      })
    }
  },
  methods: {
    getUserInfo() {
      this.$store.commit("getUserInfo", v => {
        if (v) {
          this.userId = res.data.id
          this.getDetailInfo()
        }
      })
    },
    getDetailInfo() {
      this.$instance.post(`/app/appthreemeetinguser/queryWeathersignByMeetingIdAndUserIdForWX?meetingId=${this.meetingId}&userId=${this.userId}`, null, {}).then(res => {
        if (res.data) {
          this.isSign = true
          // if(res.data.status == 1) { //已签到
          //     this.btnspan = '已签到'
          // }
          if (res.data.status == 0) { //未签
            this.btnspan = '确认签到'
          } else {
            this.btnspan = '已签到'
          }
        } else {
          this.btnspan = '确认签到'
          this.isSign = false   //不是参会人员
        }
      }).catch(err => {
        uni.showToast({
          icon: 'none',
          title: err,
          duration: 2000
        });

      })
    },
    btnClick() {
      // if(!this.isSign) {
      //     uni.showToast({
      //         icon: 'none',
      //         title: '您不是参会人员',
      //         duration: 2000
      //     });
      //     return
      // }
      if (this.btnspan == '已签到') {
        uni.showToast({
          icon: 'none',
          title: '已签到',
          duration: 2000
        });
        return
      }
      this.$instance.post(`/app/appthreemeetinguser/signByMeetingIdAndUserIdForWX?meetingId=${this.meetingId}&userId=${this.userId}`, null, {}).then(res => {
        if (res.code == 0) {
          this.btnspan = '已签到'
          uni.showToast({
            title: '签到成功',
            duration: 2000
          });
        } else {
          this.showFail = true
        }

      }).catch(err => {
        uni.showToast({
          icon: 'none',
          title: err,
          duration: 2000
        });

      })
    },
    closePage() {
      uni.reLaunch({
        url: "../home/portal"
      })
    }
  },
};
</script>
<style lang="scss" scope>
@import "~dvcp-wui/common";

.page {
  background-color: #FFFFFF;
  position: relative;

  .close-img {
    position: absolute;
    font-size: 50px;
    left: 32px;
  }

  .banner-img {
    width: 514px;
    height: 340px;
    margin: 48px 0 118px 96px;
  }

  .btn {
    width: 622px;
    line-height: 96px;
    text-align: center;
    background: rgba(19, 90, 184, 1);
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.02);
    border-radius: 8px;
    margin: 0 auto;
    color: #fff;
    font-size: 32px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
  }

  .mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .3);

    .mask-content {
      width: 686px;
      height: 640px;
      background: #fff;
      border-radius: 8px;
      border: 2px solid rgba(151, 151, 151, 1);
      margin: 260px auto 0;

      .fail-img {
        width: 160px;
        height: 160px;
        margin: 112px 0 32px 264px;
      }

      .mask-span {
        width: 100%;
        line-height: 50px;
        font-size: 36px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 700;
        color: rgba(51, 51, 51, 1);
        text-align: center;
        margin-bottom: 134px;
      }

      .mask-btn {
        width: 560px;
        line-height: 96px;
        text-align: center;
        background: rgba(19, 90, 184, 1);
        box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.02);
        border-radius: 8px;
        margin: 0 auto;
        color: #fff;
        font-size: 32px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
      }
    }
  }
}
</style>