su_nan-mobile_wx/pages/activity/apply-popup.vue

<template>
  <div class="apply">
    <van-popup :show="show" class="form-popup">
      <div class="popup-body">
        <div class="popup-header">
          <div class="title">请确认企业签到信息</div>
          <div class="close" @click="close">
            <i class="iconfont icon-guanbi"></i>
          </div>
        </div>
        <div class="popup-center">
          <van-form>
            <van-field
              readonly
              class="input-item"
              label="*公司名称"
              placeholder="请填写公司名称"
              :value="signInfo.companyName"
            />
            <van-field
              readonly
              class="input-item"
              label="*参与人姓名"
              placeholder="请填写参与人姓名"
              :value="signInfo.participants"
            />
            <van-field
              readonly
              class="input-item"
              label="*参与人职位"
              placeholder="请填写参与人职位"
              :value="signInfo.participantsPosition"
            />
            <van-field
              readonly
              class="input-item"
              label="*参与总人数"
              placeholder="请填写参与总人数"
              :value="signInfo.participantsNumber"
            />
            <van-field
              readonly
              class="input-item"
              label="说明"
              :value="signInfo.remark"
              type="textarea"
              autosize
            />
          </van-form>
        </div>
        <div class="popup-foot-but">
          <div class="cancel" @click="cancel()">取消</div>
          <div class="gb" @click="confirm">确认</div>
        </div>
      </div></van-popup
    >
  </div>
</template>
  
  <script>
import { richScan } from "@/js_sdk/http";
import vanPopup from "../../wxcomponents/weapp/dist/popup/index";
import vanField from "../../wxcomponents/weapp/dist/popup/index";
export default {
  props: {
    referenceId: {
      // 关联id
      type: String,
      default: "",
    },
    referenceType: {
      // 关联类型
      type: String,
      default: "",
    },
  },
  components: {
    vanPopup,
    vanField,
  },
  data() {
    return {
      signInfo: {},
      show: false,
      companyName: "",
      participants: "",
      participantsPosition: "",
      participantsPhone: "",
      partakeNumber: "",
      remark: "",
    };
  },
  mounted() {},
  methods: {
    cancel() {
      uni.navigateBack({});
    },
    init(signInfo) {
      this.signInfo = signInfo;
      this.show = true;
    },
    close() {
      this.show = false;
      this.initData();
    },
    initData() {
      this.companyName = "";
      this.participants = "";
      this.participantsPosition = "";
      this.participantsPhone = "";
      this.partakeNumber = "";
      this.remark = "";
    },
    confirm() {
      const _this = this;

      richScan({
        signInCode: _this.signInfo.signInCode,
      }).then((res) => {
        if (res.errmsg == "成功") {
          this.$showToast(res.data);
          if (res.data == "签到成功") {
            uni.navigateBack({});
          }
        }
      });
      _this.show = false;
      _this.initData();
    },
  },
};
</script>
  
  <style lang="scss" type="text/scss">
.form-popup {
  top: 50%;
  width: 644rpx;
  border-radius: 15rpx;
  .popup-body {
    padding-bottom: 100rpx;
    position: relative;
    .popup-header {
      padding: 30rpx 40rpx;
      @include flex;
      .title {
        font-size: 28rpx;
        color: #a1a1a1;
      }
      .close {
        width: 80rpx;
        text-align: right;
        i {
          font-size: 30rpx;
          color: $color4;
        }
      }
    }
    .popup-center {
      padding: 0 40rpx;
      width: 700rpx;
      .input-item {
        margin-top: 30rpx;
        .van-field__label {
          font-size: 28rpx;
          color: #333;
          line-height: 60rpx;
        }
        .van-field__body {
          input {
            line-height: 60rpx;
          }
        }
      }
    }
    .popup-foot-but {
      box-sizing: border-box;
      position: absolute;
      width: 100%;
      bottom: 0;
      left: 0;
      padding: 0 0 20rpx 0rpx;
      display: flex;
      .gb {
        text-align: center;
        width: 152rpx;
        font-size: 28rpx;
        color: #fff;
        background: $main;
        line-height: 64rpx;
        border-radius: 6rpx;
        float: right;
        margin-left: 295rpx;
      }
      .cancel {
        text-align: center;
        width: 152rpx;
        font-size: 28rpx;
        color: rgb(51, 51, 51);
        border: 2rpx solid #ccc;
        background: white;
        line-height: 64rpx;
        border-radius: 6rpx;
        margin-left: 100rpx;
        float: left;
      }
    }
  }
}

.apply {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 700rpx;
}
.popup-foot-but {
  position: absolute;
  width: 100%;
  bottom: 0;
  left: 0;
  text-align: center;
  padding: 0 0 30rpx;
  .gb {
    width: 284rpx;
    font-size: 28rpx;
    color: #fff;
    background: $blue;
    line-height: 92rpx;
    border-radius: 10rpx;
  }
}
</style>