txly-zfb-mini/components/detailsCard/index.js

const _my = require("../../__antmove/api/index.js")(my);
const wx = _my;
// components/detailsCard/index.js
import international from "../../international/appointment_scence/index";
import { getVisitorQrcodeId } from "../../utils/api/api";
import QRCode from "../../utils/util/weapp-qrcode";
Component({
  options: {
    observers: true,
    lifetimes: true
  },
  /**
   * 组件的属性列表
   */
  properties: {
    // 标题
    title: {
      type: String,
      value: "认证信息"
    },
    //单子状态
    status: {
      type: Number,
      value: null
    },
    //内容
    msg: {
      type: Array,
      value: []
    },
    // //二维码内容
    // qrCodeUrl: {
    //   type: String,
    //   value: ''
    // },
    // 语言
    language: {
      type: String,
      value: "ch"
    },
    userInfo: {
      type: Object,
      value: {}
    },
    regularList: {
      type: Object,
      value: null
    },
    isRegular: {
      type: Boolean,
      value: true
    },
    type: {
      type: String
    }
  },
  /**
   * 组件的初始数据
   */
  data: {
    international: international,
    //国际化语言包
    imageUrl: "",
    dateTime: null,
    qrCode: null,
    qrCodeType: null,
    //1已失效2未到时间3允许通行
    timer: null
  },
  /**
   * 组件的方法列表
   */
  methods: {
    //图片预览
    preview(e) {
      let url = e.currentTarget.dataset.src;
      wx.previewImage({
        current: url,
        // 当前显示图片的http链接
        urls: [url] // 需要预览的图片http链接列表
      });
    },

    // 获取访客qrcodeId
    getVisitorQrcodeId() {
      let id = this.data.regularList.userId;
      getVisitorQrcodeId({
        userId: id
      }).then(res => {
        this.setData({
          dateTime: new Date().getTime()
        });
        if(res.data && res.data.qrcodeId) {
          this.creatQrCode(res.data.qrcodeId);
        }
      });
    },
    // 创建二维码
    creatQrCode(id) {
      let that = this;
      new QRCode("myQrcode", {
        text: `HHFKJ?userId=${id}&timestamp=${this.data.dateTime}`,
        width: 176,
        //canvas 画布的宽
        height: 176,
        //canvas 画布的高
        padding: 0,
        // 生成二维码四周自动留边宽度，不传入默认为0
        correctLevel: QRCode.CorrectLevel.L,
        // 二维码可辨识度
        callback: res => {
          //工具回调数据
          // 接下来就可以直接调用微信小程序的api保存到本地或者将这张二维码直接画在海报上面去，看各自需求
          // wx.hideLoading()
          //将图片路劲放入data中，显示在wxml的image标签上
          that.setData({
            qrCode: res.path
          });
        }
      });
    },
    // 更新访客码
    updateQrCode() {
      // 访客申请记录页面
      if (!this.data.regularList) {
        return;
      }
      var newDate = new Date();
      var startTime = new Date(this.data.regularList.startTime);
      var endTime = new Date(this.data.regularList.endTime);
      let type;
      if (newDate > endTime) {
        type = 1;
      } else if (newDate < startTime) {
        type = 2;
      } else {
        type = 3;
        this.getVisitorQrcodeId();
      }
      this.setData({
        qrCodeType: type
      });
    },
    antmoveAction: function () {
      //执行时动态赋值，请勿删除
    }
  },
  observers: {
    status: function (status) {
      var {
        imageUrl
      } = this.data;
      switch (status) {
        case 0:
          imageUrl = "wait";
          break;
        case 1:
          imageUrl = "reject";
          break;
        case 2:
          imageUrl = "pass";
          break;
        case 3:
          imageUrl = "entrance";
          break;
        default:
          break;
      }
      this.setData({
        imageUrl
      });
    },
    regularList: function (n) {
      this.updateQrCode();
    }
  },
  lifetimes: {
    created: function () {
      // 在组件实例刚刚被创建时执行，该节点不能使用this.setData({}),
    },
    ready: function () {
      // 在组件实例进入页面节点树时执行，该节点可以开始使用this,setData({})
    },
    attached: function () {
      // console.log(this.properties.regularList)
      // 在组件实例进入页面节点树时执行，该节点可以开始使用
      this.updateQrCode();
      this.data.timer = setInterval(() => {
        this.updateQrCode();
      }, 1000 * 30);
    },
    detached: function () {
      // 移除
      clearInterval(this.data.timer);
      this.data.timer = null;
    }
  }
});