infoExport.vue 1.9 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697
  1. <template>
  2. <view class="container">
  3. <view class="desc-box">
  4. 请输入个人邮箱,个人信息副本将于5个工作日内完成导出,结果将发送至您的个人邮箱,每日限提交一次
  5. </view>
  6. <view class="form-box">
  7. <u-form :model="formData.form" ref="formRef" label-width="120" :label-style="{fontWeight: 'bold', fontSize: '26rpx'}">
  8. <u-form-item prop="email">
  9. <u-input v-model="formData.form.email" :border="true" type="text" placeholder="请输入电子邮箱"/>
  10. </u-form-item>
  11. </u-form>
  12. </view>
  13. <view class="bottom-box">
  14. <u-button type="primary" shape="circle" @click="onSubmit">提交</u-button>
  15. </view>
  16. </view>
  17. </template>
  18. <script setup>
  19. import { ref, reactive } from 'vue'
  20. import { onLoad, onReady } from '@dcloudio/uni-app'
  21. const formRef = ref()
  22. const formData = reactive({
  23. form: {
  24. phone: null,
  25. code: null
  26. },
  27. rules: {
  28. phone: [
  29. {
  30. required: true,
  31. message: '请输入绑定手机号',
  32. // 可以单个或者同时写两个触发验证方式
  33. trigger: 'blur',
  34. }
  35. ],
  36. code: [
  37. {
  38. required: true,
  39. message: '请输入验证码',
  40. // 可以单个或者同时写两个触发验证方式
  41. trigger: 'blur',
  42. }
  43. ],
  44. }
  45. })
  46. function onSubmit() {
  47. formRef.value.validate((valid) => {
  48. if (valid) {
  49. // 提交
  50. }
  51. })
  52. }
  53. onReady(() => {
  54. formRef.value.setRules(formData.rules)
  55. })
  56. </script>
  57. <style lang="scss" scoped>
  58. .container {
  59. height: 100vh;
  60. width: 100vw;
  61. background-color: $uni-bg-color;
  62. padding: 20rpx;
  63. .desc-box {
  64. text-indent: 2em;
  65. line-height: 60rpx;
  66. padding: 20rpx 0;
  67. margin-bottom: 20rpx;
  68. }
  69. .form-box {
  70. padding: 20rpx 0;
  71. .input-code {
  72. display: flex;
  73. align-items: center;
  74. gap: 20rpx;
  75. .input {
  76. width: 70%;
  77. }
  78. .btn {
  79. width: 30%;
  80. text-align: center;
  81. }
  82. }
  83. }
  84. .bottom-box {
  85. margin-top: 50rpx;
  86. padding: 0 50rpx;
  87. }
  88. }
  89. </style>