移动端
Nie możesz wybrać więcej, niż 25 tematów Tematy muszą się zaczynać od litery lub cyfry, mogą zawierać myślniki ('-') i mogą mieć do 35 znaków.
 
 

159 wiersze
4.2 KiB

  1. <template>
  2. <div class="app-container">
  3. <van-nav-bar
  4. left-arrow
  5. fixed
  6. placeholder
  7. @click-left="$router.back(-1)"
  8. >
  9. <template #title>
  10. <p style="font-weight: bold;">宅基地利用情况</p>
  11. </template>
  12. </van-nav-bar>
  13. <van-form @submit="onSubmit">
  14. <div class="main_box">
  15. <van-field
  16. readonly
  17. clickable
  18. name="picker"
  19. :value="value"
  20. label="宅基地代码"
  21. placeholder="请选择"
  22. @click="showPicker = true"
  23. input-align="right"
  24. right-icon="arrow-down"
  25. />
  26. <van-popup v-model="showPicker" position="bottom">
  27. <van-picker
  28. show-toolbar
  29. :columns="columns"
  30. @confirm="onConfirm"
  31. @cancel="showPicker = false"
  32. />
  33. </van-popup>
  34. <van-field
  35. readonly
  36. clickable
  37. name="picker"
  38. :value="value"
  39. label="宅基地利用情况"
  40. placeholder="请选择"
  41. @click="showPicker = true"
  42. input-align="right"
  43. right-icon="arrow-down"
  44. label-width="auto"
  45. />
  46. <van-popup v-model="showPicker" position="bottom">
  47. <van-picker
  48. show-toolbar
  49. :columns="columns"
  50. @confirm="onConfirm"
  51. @cancel="showPicker = false"
  52. />
  53. </van-popup>
  54. <van-field label="宅基地闲置原因" placeholder="闲置原因" input-align="right" label-width="auto"/>
  55. <van-field
  56. readonly
  57. clickable
  58. name="picker"
  59. :value="value"
  60. label="宅基地闲置起始时间"
  61. placeholder="宅基地闲置起始时间"
  62. @click="showPicker1 = true"
  63. input-align="right"
  64. right-icon="arrow-down"
  65. label-width="auto"
  66. />
  67. <van-popup v-model="showPicker1" position="bottom">
  68. <van-datetime-picker
  69. v-model="currentDate"
  70. type="date"
  71. title="选择年月日"
  72. :min-date="minDate"
  73. :max-date="maxDate"
  74. />
  75. </van-popup>
  76. <van-field
  77. readonly
  78. clickable
  79. name="picker"
  80. :value="value"
  81. label="调查事件"
  82. placeholder="调查事件"
  83. @click="showPicker1 = true"
  84. input-align="right"
  85. right-icon="arrow-down"
  86. label-width="auto"
  87. />
  88. <van-field label="备注" type="textarea" placeholder="请输入内容" input-align="right" label-width="auto"/>
  89. </div>
  90. <div style="padding: 16px 0;">
  91. <van-row>
  92. <van-col span="12" align="center">
  93. <van-button type="info" color="#B4B0B0" native-type="submit" class="submitButton">关闭</van-button>
  94. </van-col>
  95. <van-col span="12" align="center">
  96. <van-button type="info" native-type="submit" class="submitButton">保存</van-button>
  97. </van-col>
  98. </van-row>
  99. <div class="clear"></div>
  100. </div>
  101. </van-form>
  102. </div>
  103. </template>
  104. <script>
  105. export default {
  106. name: "circulationAdd",
  107. data() {
  108. return {
  109. value: '',
  110. columns: ['杭州', '宁波', '温州', '嘉兴', '湖州'],
  111. showPicker: false,
  112. showPicker1: false,
  113. minDate: new Date(2020, 0, 1),
  114. maxDate: new Date(2025, 10, 1),
  115. currentDate: new Date(2021, 0, 17),
  116. findList:[]
  117. };
  118. },
  119. created() {
  120. },
  121. methods: {
  122. onConfirm(value) {
  123. this.value = value;
  124. this.showPicker = false;
  125. },
  126. },
  127. }
  128. </script>
  129. <style scoped lang="scss">
  130. .app-container {
  131. padding: 2% 0;
  132. }
  133. .main_title{
  134. font-size: 0.4rem;
  135. color: #1D6FE9;
  136. margin: 0.2rem 6%;
  137. position: relative;
  138. }
  139. .main_box{
  140. width: 96%;
  141. margin: 0 auto;
  142. border-radius: 6px;
  143. box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16);
  144. overflow: hidden;
  145. background-color: #FFF;
  146. }
  147. .submitButton{
  148. width: 80%;
  149. margin: 0 auto;
  150. background-color: #1D6FE9;
  151. }
  152. </style>