zhywpt-sp/subpackage/after-sale/replace-equipment/cancellation-contract.vue

<template>
  <view class="oderPage">
    <view class="head">
      您的ETC卡类型是记账卡，需要先解约，才可继续办理更换业务，请确认您的签约信息
    </view>
    <u-form :model="form" ref="myForm" :error-type="errorType">
      <view class="from">
        <u-form-item prop="name">
          <view class="from_item">
            <text><text style="color: red"></text>签约银行</text>
            <u-input v-model="form.bank" value="" class="input" disabled />
          </view>
        </u-form-item>
        <u-form-item prop="name">
          <view class="from_item">
            <text><text style="color: red"></text>签约时间</text>
            <u-input
              v-model="form.time"
              value="2022-10-11 12:11:12"
              class="input"
              disabled
            />
          </view>
        </u-form-item>
        <u-form-item prop="name">
          <view class="from_item">
            <text><text style="color: red"></text>卡号</text>
            <u-input
              v-model="form.code"
              value="12312313213123"
              class="input"
              disabled
            />
          </view>
        </u-form-item>
        <u-form-item prop="name">
          <view class="from_item">
            <text><text style="color: red"></text>车牌号</text>
            <u-input
              v-model="form.carID"
              value="贵A123321"
              class="input"
              disabled
            />
          </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: "工商银行",
  time: "2022-10-11 10:12:30",
  code: "12321123312313",
  carID: "贵A123321",
});
// 验证规则
const rules = {
  receiving1: [
    {
      required: true,
      message: "请选择",
      trigger: ["change", "blur"],
    },
  ],
  receiving2: [
    {
      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 = () => {
  navTo("/subpackage/after-sale/replace-equipment/release-products");
  // uni.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: #eef7f7;
}
</style>
<style lang="scss" scoped>
.oderPage {
  flex: 1;
  width: 100%;

  .head {
    padding: 30rpx;
    font-size: 28rpx;
    color: #303133;
    padding-bottom: 0;
  }

  .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: right;
        flex: 1;
        background: transparent;
        input {
          text-align: right;
        }
      }
    }

    .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>