cd-rclv-weixin/pages/bindForm.vue

<template>
  <view class="bind-form-container" style="width: 100%; overflow: hidden">
    <image class="bg-image" src="/static/formBg.png" mode="aspectFill"></image>

    <image class="form-title-image" src="/static/logo.png"></image>
    <view class="form-container">
      <view class="form-title">Hi~</view>
      <uni-forms
        style="width: 100%"
        label-position="top"
        ref="baseForm"
        :modelValue="formData"
        :rules="customRules"
      >
        <uni-forms-item label="姓名" required name="name">
          <uni-easyinput
            v-model="formData.name"
            placeholder="请输入姓名"
          ></uni-easyinput>
        </uni-forms-item>
        <uni-forms-item label="身份证号" required name="sfzh">
          <uni-easyinput
            v-model="formData.sfzh"
            placeholder="请输入身份证号"
          ></uni-easyinput>
        </uni-forms-item>
      </uni-forms>
      <view @click="handleBindCard" class="bind-button">登录</view>
    </view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      baseUrl: getApp().globalData.baseUrl,
      customRules: {
        name: {
          rules: [
            {
              required: true,
              errorMessage: "姓名不能为空",
            },
          ],
        },
        sfzh: {
          rules: [
            {
              required: true,
              errorMessage: "身份证号不能为空",
            },
          ],
        },
      },
      formData: {
        name: "",
        sfzh: "",
      },
    };
  },
  onReady() {
    // 设置自定义表单校验规则，必须在节点渲染完毕后执行
    this.$refs.baseForm.setRules(this.customRules);
  },
  methods: {
    handleBindCard() {
      this.$refs.baseForm.validate().then((res) => {
        uni.showLoading({
          title: "加载中",
        });
        uni.request({
          url:
            this.baseUrl +
            "/wxsfrz/wxRegister?name=" +
            this.formData.name +
            "&sfzh=" +
            this.formData.sfzh +
            "&openid=" +
            getApp().globalData.openId,
          method: "POST",
          success: ({ data }) => {
            if (data.code == 200) {
              uni.hideLoading();
              setTimeout(() => {
                uni.reLaunch({
                  url:
                    "/pages/bindCard?name=" +
                    this.formData.name +
                    "&sfzh=" +
                    this.formData.sfzh,
                });
              }, 500);
            } else {
              uni.hideLoading();
              uni.showToast({
                title: data.msg,
                icon: "none",
              });
            }
          },
        });
      });
    },
  },
};
</script>
<style scoped lang="scss">
.form-title-image {
  width: 200rpx;
  height: 200rpx;
  position: absolute;
  top: 50rpx;
  left: 50%;
  transform: translateX(-50%);
}
.form-title {
  font-size: 40rpx;
  font-weight: bold;
  text-align: center;
  margin-bottom: 40rpx;
}
.form-container {
  width: 70%;
  padding: 40rpx 60rpx 50rpx;
  border-radius: 70rpx;
  box-shadow: #64646f33 0px 7px 29px 0px;
  margin: 300rpx auto 0;
  background-color: #fff;
}
.bg-image {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: -1;
}
.bind-button {
  width: 400rpx;
  margin: 70rpx auto 0;
  color: #fff;
  background: linear-gradient(to right, #007aff, #5c97d6);
  padding: 15rpx 10rpx;
  border-radius: 60rpx;
  text-align: center;
  box-shadow: #90979e23 0px 8px 24px;
}
</style>