editAddress.vue 2.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102
  1. <template>
  2. <view class="content">
  3. <u-form :model="form" ref="uForm" :label-width="140" :error-type="['toast']">
  4. <u-form-item label="姓名" required prop="name">
  5. <u-input placeholder="请输入姓名" :maxlength="30" v-model="form.name" />
  6. </u-form-item>
  7. <u-form-item label="电话" required prop="mobile">
  8. <u-input placeholder="请输入电话" :maxlength="11" type="number" v-model="form.mobile" />
  9. </u-form-item>
  10. <u-form-item label="省市区" required prop="area">
  11. <u-input v-model="form.area" placeholder="请选择省市区" @click="show = true" type="select" />
  12. <u-picker v-model="show" @confirm="chooseArea" mode="region"></u-picker>
  13. </u-form-item>
  14. <u-form-item label="详细地址" required prop="address">
  15. <u-input placeholder="请输入收货详细地址" :maxlength="100" v-model="form.address" />
  16. </u-form-item>
  17. </u-form>
  18. <view class="buttons">
  19. <u-button type="primary" @click="submit">提交</u-button>
  20. </view>
  21. </view>
  22. </template>
  23. <script>
  24. export default {
  25. data() {
  26. return {
  27. show: false,
  28. form: {
  29. name: '',
  30. mobile: '',
  31. area: '',
  32. address: ''
  33. },
  34. rules: {
  35. name: [
  36. {
  37. required: true,
  38. message: '请输入姓名',
  39. // 可以单个或者同时写两个触发验证方式
  40. trigger: ['change','blur'],
  41. }
  42. ],
  43. mobile: [
  44. {
  45. required: true,
  46. message: '请输入电话',
  47. // 可以单个或者同时写两个触发验证方式
  48. trigger: ['change','blur'],
  49. }
  50. ],
  51. area: [
  52. {
  53. required: true,
  54. message: '请选择省市区',
  55. trigger: ['change','blur']
  56. }
  57. ],
  58. address: [
  59. {
  60. required: true,
  61. max: 100,
  62. message: '请输入详细地址,最多100个字',
  63. trigger: ['change','blur']
  64. }
  65. ]
  66. }
  67. };
  68. },
  69. methods: {
  70. submit() {
  71. this.$refs.uForm.validate(valid => {
  72. if (valid) {
  73. console.log('验证通过');
  74. } else {
  75. console.log('验证失败');
  76. }
  77. });
  78. },
  79. // 选择地址
  80. chooseArea(e){
  81. console.log(e)
  82. this.form.area = e.province.label + '-' + e.city.label + '-' + e.area.label
  83. }
  84. },
  85. // 必须要在onReady生命周期,因为onLoad生命周期组件可能尚未创建完毕
  86. onReady() {
  87. this.$refs.uForm.setRules(this.rules);
  88. }
  89. };
  90. </script>
  91. <style lang="scss">
  92. .content{
  93. padding: 0 50upx;
  94. background: #FFFFFF;
  95. width: 100%;
  96. .buttons{
  97. padding: 80upx 100upx;
  98. }
  99. }
  100. </style>