discounts-minapp/study/tourList/add.vue

<template>
  <view class="add">
    <view class="tips">
      提醒：姓名与身份证一致，否则会影响出游
    </view>

    <view class="card">
      <view class="form-item">
        <view class="label">姓名</view>
        <u--input customStyle="input" placeholder="请输入姓名" v-model="form.userName" border="none"></u--input>
      </view>
      <view class="form-item" @click="show = true">
        <view class="label">证件类型</view>
        <u--input customStyle="input" readonly placeholder="请选择证件类型" value="身份证" border="none"></u--input>
      </view>
      <view class="form-item">
        <view class="label">证件号码</view>
        <u--input customStyle="input" :maxlength="18" placeholder="请输入证件号码" v-model="form.idCard"
          border="none"></u--input>
      </view>
      <view class="form-item">
        <view class="label">手机号码</view>
        <u--input customStyle="input" :maxlength="11" placeholder="请输入号码" type="idcard" v-model="form.phone"
          border="none"></u--input>
      </view>
      <view class="form-item" @click="showSex = true">
        <view class="label">性别</view>
        <u--input customStyle="input" readonly placeholder="请选择性别" v-model="sexLabel" border="none"></u--input>
      </view>
    </view>

    <view class="buy-box">
      <button :loading="loading" class="buy-btn" type="default" @click="handleAdd">确定</button>
    </view>
    <u-action-sheet :closeOnClickOverlay="true" @close="show = false" :closeOnClickAction="true" cancelText="取消"
      :actions="option" :show="show"></u-action-sheet>
    <u-action-sheet :closeOnClickOverlay="true" @close="showSex = false" :closeOnClickAction="true" cancelText="取消"
      :actions="sexOption" @select="select" :show="showSex"></u-action-sheet>
  </view>
</template>

<script>

import { saveTraveler } from "@/api/study"
export default {
  data() {
    return {
      option: [
        {
          name: '身份证',
        },
      ],
      sexOption: [
        {
          name: '男',
        },
        {
          name: '女',
        },
      ],
      form: {
        id: '',
        idCard: '',
        cardType: '1',
        phone: '',
        sex: '',
        userId: '',
        userName: ''
      },
      sexLabel: '',
      show: false,
      showSex: false,
      loading: false
    };
  },
  methods: {
    select({ name }) {
      this.sexLabel = name
      this.form.sex = name == "男" ? 1 : 2
    },
    handleAdd() {
      this.loading = true
      // 表单校验
      if (!this.validate()) {
        this.loading = false
        return
      }

      saveTraveler(this.form).then(res => {
        if (res.state == 'Success') {
          uni.showToast({
            title: '完成',
            icon: 'none'
          });
          uni.navigateBack({
            delta: 1
          });
        }
      })
    },
    validate() {
      if (!this.form.userName) {
        uni.showToast({
          title: '请输入姓名',
          icon: 'none'
        });

        return
      }
      if (!this.form.idCard) {
        uni.showToast({
          title: '请输入证件号码',
          icon: 'none'
        });

        return
      }
      // 校验身份证合法性
      if (!/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(this.form.idCard)) {
        uni.showToast({
          title: '身份证格式不正确',
          icon: 'none'
        });
        return
      }
      if (!this.form.phone) {
        uni.showToast({
          title: '请输入手机号码',
          icon: 'none'
        });
        return
      }
      // 校验手机合法性
      if (!/^1[3456789]\d{9}$/.test(this.form.phone)) {
        uni.showToast({
          title: '手机号码格式不正确',
          icon: 'none'
        });
        return
      }
      if (!this.form.sex) {
        uni.showToast({
          title: '请选择性别',
          icon: 'none'
        });
        return
      }
      return true
    }
  },
};
</script>

<style lang="scss" scoped>
.add {
  background: #F9F9F9;
  min-height: 100vh;
  padding: 0 20rpx;
}

.tips {
  color: #AAAAAA;
  font-size: 28rpx;
  padding: 28rpx 0;
}

.card {
  padding: 24rpx;
  background: #FFFFFF;
  border-radius: 16rpx;

  .form-item {
    border-top: 1px solid #F0F0F0;
    display: flex;

    &:first-child {
      border-top: none;
    }

    .label {
      color: #222222;
      font-size: 24rpx;
      margin: 24rpx 0;
      width: 152rpx;
    }

    .input {}
  }
}

.buy-box {
  position: fixed;
  bottom: 0%;
  left: 0%;
  width: 100%;
  background: #fff;
  padding: 10rpx 24rpx env(safe-area-inset-bottom);
  box-sizing: border-box;

  .buy-btn {
    width: 702rpx;
    height: 80rpx;
    line-height: 80rpx;
    text-align: center;
    background: #3B83FF;
    border-radius: 40rpx;
    font-weight: 600;
    font-size: 28rpx;
    color: #FFFFFF;
  }

}
</style>