You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

cancellation-contract.vue 5.1KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242
  1. <template>
  2. <view class="oderPage">
  3. <view class="head">
  4. 您的ETC卡类型是记账卡,需要先解约,才可继续办理更换业务,请确认您的签约信息
  5. </view>
  6. <u-form :model="form" ref="myForm" :error-type="errorType">
  7. <view class="from">
  8. <u-form-item prop="name">
  9. <view class="from_item">
  10. <text><text style="color: red"></text>签约银行</text>
  11. <u-input v-model="form.bank" value="" class="input" disabled />
  12. </view>
  13. </u-form-item>
  14. <u-form-item prop="name">
  15. <view class="from_item">
  16. <text><text style="color: red"></text>签约时间</text>
  17. <u-input v-model="form.time" value="2022-10-11 12:11:12" class="input" disabled />
  18. </view>
  19. </u-form-item>
  20. <u-form-item prop="name">
  21. <view class="from_item">
  22. <text><text style="color: red"></text>卡号</text>
  23. <u-input v-model="form.code" value="12312313213123" class="input" disabled />
  24. </view>
  25. </u-form-item>
  26. <u-form-item prop="name">
  27. <view class="from_item">
  28. <text><text style="color: red"></text>车牌号</text>
  29. <u-input v-model="form.carID" value="贵A123321" class="input" disabled />
  30. </view>
  31. </u-form-item>
  32. </view>
  33. </u-form>
  34. <button class="submit" @click="toPage()">下一步</button>
  35. </view>
  36. </template>
  37. <script setup lang="ts">
  38. import navBar from "./components/nav-bar.vue";
  39. import { checkStr } from "@/utils/utils";
  40. import { ref, reactive } from "vue";
  41. import { navTo } from "@/utils/utils";
  42. import { onReady } from "@dcloudio/uni-app";
  43. // 表单数据
  44. const form = reactive({
  45. bank: "工商银行",
  46. time: "2022-10-11 10:12:30",
  47. code: "12321123312313",
  48. carID: "贵A123321",
  49. });
  50. // 验证规则
  51. const rules = {
  52. receiving1: [
  53. {
  54. required: true,
  55. message: "请选择",
  56. trigger: ["change", "blur"],
  57. },
  58. ],
  59. receiving2: [
  60. {
  61. required: true,
  62. message: "请选择",
  63. trigger: ["change", "blur"],
  64. },
  65. ],
  66. code: [
  67. {
  68. required: true,
  69. message: "请输入",
  70. trigger: ["change", "blur"],
  71. },
  72. ],
  73. phone: [
  74. {
  75. required: true,
  76. message: "请输入手机号",
  77. trigger: ["change", "blur"],
  78. },
  79. {
  80. // 自定义验证函数,见上说明
  81. validator: (rule, value, callback) => {
  82. // 上面有说,返回true表示校验通过,返回false表示不通过
  83. console.log(checkStr(value, "mobile"), "0011");
  84. return checkStr(value, "mobile");
  85. },
  86. message: "手机号码不正确",
  87. trigger: ["change", "blur"],
  88. },
  89. ],
  90. // status: [{
  91. // required: true,
  92. // message: '请选择状态',
  93. //
  94. // trigger: ['change', 'blur'],
  95. };
  96. // 验证提示类型(toast要版本为1.3.5才支持)
  97. const errorType = ["message", "border-bottom", "toast"];
  98. // 设置验证规则
  99. const myForm = ref(null);
  100. onReady(() => {
  101. myForm.value.setRules(rules);
  102. });
  103. // 单选数据列表
  104. const radiolist1 = reactive([
  105. {
  106. name: "营业点自提",
  107. disabled: false,
  108. },
  109. {
  110. name: "邮寄",
  111. disabled: false,
  112. },
  113. ]);
  114. // 单选
  115. const radioChange = (n) => {
  116. console.log("radioChange", n);
  117. };
  118. // // 提交
  119. // const submit = () => {
  120. // myForm.value.validate((valid) => {
  121. // console.log(valid);
  122. // if (valid) {
  123. // console.log('验证通过', form);
  124. // } else {
  125. // console.log('验证未通过');
  126. // }
  127. // })
  128. // }
  129. const toPage = () => {
  130. navTo("/subpackage/after-sale/replace-equipment/release-products");
  131. };
  132. </script>
  133. <style>
  134. page {
  135. width: 100%;
  136. height: 100%;
  137. display: flex;
  138. flex-direction: column;
  139. background: #eef7f7;
  140. }
  141. </style>
  142. <style lang="scss" scoped>
  143. .oderPage {
  144. flex: 1;
  145. width: 100%;
  146. .head {
  147. padding: 30rpx;
  148. font-size: 28rpx;
  149. color: #303133;
  150. padding-bottom: 0;
  151. }
  152. .from {
  153. background-color: #fff;
  154. margin-top: 30rpx;
  155. padding: 0 30rpx;
  156. ::v-deep .u-form-item {
  157. padding: 0;
  158. line-height: normal;
  159. .u-form-item__message {
  160. margin-bottom: 12rpx;
  161. }
  162. }
  163. .from_item {
  164. display: flex;
  165. flex-wrap: nowrap;
  166. justify-content: space-between;
  167. align-items: center;
  168. height: 80rpx;
  169. border-bottom: 1rpx solid #dcdcdc;
  170. .btn {
  171. font-size: 24rpx;
  172. font-family: Microsoft YaHei;
  173. font-weight: 400;
  174. color: #ffffff;
  175. background: #00b38b;
  176. border-radius: 10rpx;
  177. padding: 10rpx 15rpx;
  178. }
  179. ::v-deep .input {
  180. text-align: right;
  181. flex: 1;
  182. background: transparent;
  183. input {
  184. text-align: right;
  185. }
  186. }
  187. }
  188. .from_item1 {
  189. display: flex;
  190. flex-wrap: nowrap;
  191. flex-direction: column;
  192. justify-content: space-between;
  193. padding: 30rpx;
  194. border-bottom: #dcdcdc 1px solid;
  195. input {
  196. text-align: right;
  197. }
  198. .textarea {
  199. background-color: #f1f1f1;
  200. width: 100%;
  201. border-radius: 20rpx;
  202. margin-top: 10rpx;
  203. text-indent: 1rem;
  204. height: 180rpx;
  205. padding: 20rpx;
  206. box-sizing: border-box;
  207. }
  208. }
  209. }
  210. }
  211. .submit {
  212. background: linear-gradient(to left, #43a1e0 0%, #13e7c1 100%);
  213. width: 670rpx;
  214. height: 80rpx;
  215. color: #fff;
  216. border-radius: 100rpx;
  217. position: fixed;
  218. left: 50%;
  219. transform: translate(-50%);
  220. bottom: 60rpx;
  221. font-size: 32rpx;
  222. }
  223. </style>