zhywpt-sp/after-sale/ETC-log-off/etc-log-off.vue

<template>
  <view class="oderPage">
    <u-form :model="form" ref="myForm" :error-type="errorType">
      <view class="from">
        <u-form-item prop="cardState">
          <view class="from_item">
            <text><text style="color: red">*</text>是否有卡注销：</text>
            <u-radio-group v-model="form.cardState">
              <u-radio
                :customStyle="{ marginBottom: '8px' }"
                activeColor="#2CE242"
                v-for="(item, index) in radiolist1"
                :key="index"
                :label="item.disabled"
                :name="item.name"
                @change="radioChange"
              >
                {{ item.name }}
              </u-radio>
            </u-radio-group>
          </view>
        </u-form-item>
        <u-form-item prop="equipmentState">
          <view class="from_item">
            <text><text style="color: red">*</text>是否有设备注销:：</text>
            <u-radio-group v-model="form.equipmentState">
              <u-radio
                :customStyle="{ marginBottom: '8px' }"
                activeColor="#2CE242"
                v-for="(item, index) in radiolist1"
                :key="index"
                :label="item.disabled"
                :name="item.name"
                @change="radioChange"
              >
                {{ item.name }}
              </u-radio>
            </u-radio-group>
          </view>
        </u-form-item>
        <u-form-item prop="phone">
          <view class="from_item" style="background-color: #f7f7f7">
            <text><text style="color: red"></text>手机号：</text>
            <u-input v-model="form.phone" class="input" />
          </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 class="btn"> 获取验证码 </view>
          </view>
        </u-form-item>
      </view>
    </u-form>

    <!-- 		<view class="from1">
			<uni-forms ref="form_ref" :modelValue="form" :rules="rules">
				<uni-forms-item label="是否有卡注销" name="bank" label-width="112" required>
					<uni-data-checkbox v-model="form.cardState" class="radio" :localdata="range"
						@change="radioChange" />
				</uni-forms-item>
				<uni-forms-item label="是否有设备注销" name="bankID" label-width="112" required>
					<uni-data-checkbox v-model="form.equipmentState" class="radio" :localdata="range"
						@change="radioChange" />
				</uni-forms-item>
				<uni-forms-item label="手机号" name="phone" label-width="112" required>
					<uni-easyinput type="text" v-model="form.phone" :inputBorder="false"
						placeholderStyle="font-size: 28rpx;" placeholder="请输入" />
				</uni-forms-item>
				<uni-forms-item label="验证码" name="code" label-width="112">
					<uni-easyinput type="text" v-model="form.code" :inputBorder="false"
						placeholderStyle="font-size: 28rpx;" placeholder="请输入" />
					<view class="btn">
						获取验证码
					</view>
				</uni-forms-item>
			</uni-forms>
		</view> -->
    <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({
  cardState: "",
  equipmentState: "",
  phone: "18223323235",
  code: "",
});
// 验证规则
const rules = {
  cardState: [
    {
      required: true,
      message: "请选择",
      trigger: ["change", "blur"],
    },
  ],
  equipmentState: [
    {
      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"],
    },
  ],
};
// 验证提示类型(toast要版本为1.3.5才支持)
const errorType = ["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 toPage = () => {
  myForm.value.validate((valid) => {
    console.log(valid);
    if (valid) {
      console.log("验证通过", form);
      wx.showModal({
        title: "模拟两种情况",
        confirmText: "有卡有签",
        cancelText: "无卡无签",
        success: function (res) {
          if (res.confirm) {
            console.log("用户点击确定");
            navTo("/pages/bluetooth/bluetooth");
          } else if (res.cancel) {
            console.log("用户点击取消");
            navTo("/after-sale/ETC-log-off/upload-card");
          }
        },
      });
    } else {
      console.log("验证未通过");
    }
  });
};
</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%;

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

    ::v-deep .uni-forms-item {
      border-bottom: 1rpx solid #ccc;
      padding: 15rpx 0;
      margin-bottom: 0;

      .uni-forms-item__label {
        font-size: 28rpx;
        height: 50rpx;
      }

      .uni-forms-item__content {
        display: flex;
      }

      .uni-easyinput__content-input {
        font-size: 28rpx;
        height: 50rpx;
      }
    }

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

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