zhywpt-sp/subpackage/after-sale/to-bookkeeping-card/signing-bank.vue

<template>
  <view class="oderPage">
    <u-form :model="form" ref="myForm" :error-type="errorType">
      <view class="from">
        <u-form-item prop="bank">
          <view class="from_item">
            <text><text style="color: red">*</text>签约银行：</text>
            <u-input v-model="form.bank" class="input" disabled />
          </view>
        </u-form-item>
        <u-form-item prop="bankID">
          <view class="from_item">
            <text><text style="color: red">*</text>银行卡号：</text>
            <u-input v-model="form.bankID" class="input" />
          </view>
        </u-form-item>
        <u-form-item prop="phone">
          <view class="from_item">
            <text><text style="color: red">*</text>开户手机：</text>
            <u-input v-model="form.phone" class="input" />
            <view class="btn"> 获取验证码 </view>
          </view>
        </u-form-item>
        <u-form-item prop="code">
          <view class="from_item">
            <text><text style="color: red"></text>验证码：</text>
            <u-input v-model="form.code" class="input" />
          </view>
        </u-form-item>
      </view>
    </u-form>
    <button class="submit" @click="toPage()">下一步</button>
  </view>
</template>

<script setup lang="ts">
import navBar from "./components/nav-bar.vue";
import { checkStr } from "@/utils/utils";
import { ref, reactive } from "vue";
import { navTo } from "@/utils/utils";
import { onReady } from "@dcloudio/uni-app";

// 表单数据
const form = reactive({
  bank: "工商银行",
  bankID: "666655454554555",
  phone: "12332112321",
  code: "",
});
// 验证规则
const rules = {
  bankID: [
    {
      required: true,
      message: "请输入",
      trigger: ["change", "blur"],
    },
  ],
  bank: [
    {
      required: true,
      message: "请输入",
      trigger: ["change", "blur"],
    },
  ],
  code: [
    {
      required: true,
      message: "请输入",
      trigger: ["change", "blur"],
    },
  ],
  phone: [
    {
      required: true,
      message: "请输入手机号",
      trigger: ["change", "blur"],
    },
    {
      // 自定义验证函数，见上说明
      validator: (rule, value, callback) => {
        // 上面有说，返回true表示校验通过，返回false表示不通过
        console.log(checkStr(value, "mobile"), "0011");
        return checkStr(value, "mobile");
      },
      message: "手机号码不正确",
      trigger: ["change", "blur"],
    },
  ],
  // status: [{
  // 	required: true,
  // 	message: '请选择状态',
  //
  // 	trigger: ['change', 'blur'],
};
// 验证提示类型(toast要版本为1.3.5才支持)
const errorType = ["message", "border-bottom", "toast"];

// 设置验证规则
const myForm = ref(null);
onReady(() => {
  myForm.value.setRules(rules);
});

// 单选数据列表
const radiolist1 = reactive([
  {
    name: "营业点自提",
    disabled: false,
  },
  {
    name: "邮寄",
    disabled: false,
  },
]);

// 单选
const radioChange = (n) => {
  console.log("radioChange", n);
  // if (n == '卡退费') {
  // 	flag.value = true
  // 	console.log(flag.value);
  // } else {
  // 	flag.value = false
  // 	console.log(flag.value);
  // }
};

// // 提交
// const submit = () => {
// 	myForm.value.validate((valid) => {
// 		console.log(valid);
// 		if (valid) {
// 			console.log('验证通过', form);
// 		} else {
// 			console.log('验证未通过');
// 		}
// 	})
// }
const toPage = () => {
  uni.redirectTo({
    url: "/subpackage/after-sale/to-bookkeeping-card/choice-product",
  });
  // navTo('/subpackage/after-sale/to-bookkeeping-card/choice-product')
  // wx.showModal({
  // 	title: '模拟两种情况',
  // 	confirmText: '有卡有签',
  // 	cancelText: '无卡无签',
  // 	success: function(res) {
  // 		if (res.confirm) {
  // 			console.log('用户点击确定');
  // 			navTo('/pages/bluetooth/bluetooth')
  // 		} else if (res.cancel) {
  // 			console.log('用户点击取消');
  // 			navTo('/subpackage/after-sale/ETC-log-off/upload-card')
  // 		}
  // 	}
  // });
};
</script>

<style>
page {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: ##eef7f7;
}
</style>
<style lang="scss" scoped>
.oderPage {
  flex: 1;
  width: 100%;

  .from {
    background-color: #fff;
    margin-top: 30rpx;
    padding: 0 30rpx;

    ::v-deep .u-form-item {
      padding: 0;
      line-height: normal;

      .u-form-item__message {
        margin-bottom: 12rpx;
      }
    }

    .from_item {
      display: flex;
      flex-wrap: nowrap;
      justify-content: space-between;
      align-items: center;
      height: 80rpx;
      border-bottom: 1rpx solid #dcdcdc;

      .btn {
        font-size: 24rpx;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #ffffff;
        background: #00b38b;
        border-radius: 10rpx;
        padding: 10rpx 15rpx;
      }

      ::v-deep .input {
        text-align: left;
        flex: 1;

        input {
          text-align: left;
        }
      }
    }

    .from_item1 {
      display: flex;
      flex-wrap: nowrap;
      flex-direction: column;
      justify-content: space-between;
      padding: 30rpx;
      border-bottom: #dcdcdc 1px solid;

      input {
        text-align: right;
      }

      .textarea {
        background-color: #f1f1f1;
        width: 100%;
        border-radius: 20rpx;
        margin-top: 10rpx;
        text-indent: 1rem;
        height: 180rpx;
        padding: 20rpx;
        box-sizing: border-box;
      }
    }
  }
}

.submit {
  background: linear-gradient(to left, #43a1e0 0%, #13e7c1 100%);
  width: 670rpx;
  height: 80rpx;
  color: #fff;
  border-radius: 100rpx;
  position: fixed;
  left: 50%;
  transform: translate(-50%);
  bottom: 60rpx;
  font-size: 32rpx;
}
</style>