wx-qhb/pageD/settleIn/settleIn.vue

<template>
  <view class="page">
    <view class="content">
      <u--form
        labelPosition="left"
        :model="model1"
        ref="uForm"
        labelWidth="100"
      >
        <u-form-item label="姓名" prop="userInfo.name" borderBottom ref="item1">
          <u--input
            inputAlign="right"
            v-model="model1.name"
            placeholder="请输入真实姓名"
            border="none"
          ></u--input>
        </u-form-item>
        <u-form-item
          label="身份证号"
          prop="userInfo.name"
          borderBottom
          ref="item1"
        >
          <u--input
            inputAlign="right"
            v-model="model1.idcard"
            type="idcard"
            placeholder="请输入您的身份证"
            border="none"
          ></u--input>
        </u-form-item>
        <u-form-item
          label="银行卡号"
          prop="userInfo.name"
          borderBottom
          ref="item1"
        >
          <u--input
            inputAlign="right"
            v-model="model1.card_number"
            type="number"
            placeholder="请输入您的银行卡号"
            border="none"
          ></u--input>
        </u-form-item>
        <u-form-item
          label="手机号"
          prop="userInfo.name"
          borderBottom
          ref="item1"
        >
          <u--input
            inputAlign="right"
            v-model="model1.phone"
            type="number"
            placeholder="请输入手机号"
            border="none"
          ></u--input>
        </u-form-item>
        <u-form-item label="验证码" borderBottom ref="item1">
          <view style="display: flex; align-items: center">
            <u--input
              inputAlign="right"
              v-model="model1.code"
              placeholder="请输入短信验证码"
              border="none"
            ></u--input>
            <view style="color: #f83224; font-weight: 600; margin-left: 50rpx">
              获取验证码
            </view>
          </view>
        </u-form-item>
      </u--form>
    </view>

    <view class="bottom-1">
      <u-radio-group
        v-model="radiovalue1"
        placement="column"
        @change="groupChange"
      >
        <u-radio name="name" @change="radioChange" activeColor="red"> </u-radio>
      </u-radio-group>
      我已阅读并同意<text style="color: #f83224">《用户服务协议》</text>和
      <text style="color: #f83224">《隐私政策》</text>
    </view>
    <button class="btn" @click="submit">开始人脸识别验证</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      model1: {
        name: "",
        idcard: "",
        phone: "",
        card_number: "",
        code: "",
      },

      radiovalue1: "",
    };
  },
  methods: {
    radioChange() {
      this.value = !this.value;
    },
    groupChange(e) {
      console.log(e);
    },
    submit() {
      delete this.model1.code;
      if (!this.model1.name) {
        uni.showToast({
          title: "请填写姓名",
          icon: "none",
        });
        return;
      } else if (!this.model1.idcard) {
        uni.showToast({
          title: "请填写身份证号",
          icon: "none",
        });
        return;
      } else if (!this.model1.phone) {
        uni.showToast({
          title: "请填写手机号",
          icon: "none",
        });
        return;
      } else if (!this.model1.card_number) {
        uni.showToast({
          title: "请填写银行卡号",
          icon: "none",
        });
        return;
      }
      uni.$u.http.post("/api/merchant/apply", this.model1).then((res) => {
        console.log(res);
      });
    },
    getTeamStatus() {},
  },
  mounted() {
    this.getTeamStatus();
    uni.setNavigationBarTitle({
      title: "团长入驻",
    });
  },
};
</script>

<style lang="scss" scoped>
.page {
  padding: 20rpx 24rpx;

  .content {
    padding: 0 20rpx;
    background-color: #fff;
    border-radius: 16rpx;
  }
  .bottom-1 {
    font-size: 20rpx;
    margin-top: 68rpx;
    color: #555;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 70%;
    .radio {
      width: 24rpx;
      height: 24rpx;
    }
  }
  .btn {
    color: #fff;
    background-color: #f83224;
    border-radius: 44rpx;
    margin-top: 28rpx;
    height: 88rpx;
    font-size: 32rpx;
  }
}
</style>