景徳镇旅游微信小程序
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.

160 lines
3.2 KiB

8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
  1. <template>
  2. <!-- 加入志愿者 -->
  3. <view class="volunteer">
  4. <navbar title="加入志愿者" leftClick @leftClick="$utils.navigateBack" />
  5. <view class="volunteer-form">
  6. <view class="volunteer-form-title">
  7. <view>志愿者信息</view>
  8. </view>
  9. <view class="volunteer-form-sheet">
  10. <view class="volunteer-form-sheet-cell">
  11. <view>
  12. 姓名
  13. </view>
  14. <input v-model="volunteerName" placeholder="请输入您的姓名" />
  15. </view>
  16. <view>
  17. <uv-picker ref="picker" :columns="columns" @confirm="confirm"></uv-picker>
  18. <view class="volunteer-form-sheet-cell">
  19. <view @click="openPicker">
  20. 证件类型
  21. </view>
  22. <uv-cell :border="false" title="选择证件类型" :isLink="true" arrow-direction="right"
  23. @click="openPicker" />
  24. </view>
  25. </view>
  26. <view class="volunteer-form-sheet-cell">
  27. <view>
  28. 证件号码
  29. </view>
  30. <input placeholder="请输入证件号码" v-model="volunteerCerNo" />
  31. </view>
  32. <view class="volunteer-form-sheet-cell">
  33. <view>
  34. 手机号码
  35. </view>
  36. <uv-input placeholder="请输入手机号码" fontSize="24rpx" border="none"
  37. :custom-style="{backgroundColor: '#fff'}">
  38. <template #suffix>
  39. <view>
  40. <text class="yzm">获取验证码</text>
  41. </view>
  42. </template>
  43. </uv-input>
  44. </view>
  45. <view class="volunteer-form-sheet-cell">
  46. <view>
  47. 验证码
  48. </view>
  49. <input placeholder="请输入验证码" />
  50. </view>
  51. </view>
  52. <view class="submit">
  53. <view>
  54. 提交
  55. </view>
  56. </view>
  57. </view>
  58. </view>
  59. </template>
  60. <script>
  61. export default {
  62. data() {
  63. return {
  64. columns: [
  65. ['中国', '美国', '日本']
  66. ],
  67. volunteerCerNo: "",
  68. volunteerName: "",
  69. volunteerPhone: ""
  70. }
  71. },
  72. methods: {
  73. openPicker() {
  74. this.$refs.picker.open();
  75. },
  76. confirm(e) {
  77. console.log('confirm', e);
  78. }
  79. }
  80. }
  81. </script>
  82. <style scoped lang="scss">
  83. .volunteer {
  84. .volunteer-form {
  85. width: 94%;
  86. margin-top: 40rpx;
  87. margin-left: 3%;
  88. .volunteer-form-title {
  89. color: #333;
  90. font-size: 36rpx;
  91. font-weight: 600;
  92. padding: 0rpx 0rpx 0rpx 8rpx;
  93. border-left: 8rpx solid #F6732D;
  94. }
  95. .volunteer-form-sheet {
  96. display: flex;
  97. height: 500rpx;
  98. flex-direction: column;
  99. justify-content: space-around;
  100. .volunteer-form-sheet-cell {
  101. display: flex;
  102. font-size: 28rpx;
  103. align-items: center;
  104. .yzm {
  105. display: inline-block;
  106. font-size: 22rpx;
  107. padding: 6rpx;
  108. border-radius: 20rpx;
  109. background-color: #ff0829;
  110. color: #fff;
  111. }
  112. /deep/ .uv-cell__title-text {
  113. font-size: 24rpx;
  114. }
  115. /deep/ .uv-cell__body {
  116. padding: 0;
  117. }
  118. /deep/ .uv-cell {
  119. flex: 1;
  120. }
  121. view {
  122. width: 140rpx;
  123. padding: 20rpx 0;
  124. }
  125. input {
  126. flex: 1;
  127. height: 100%;
  128. color: rgb(192, 196, 204);
  129. background-color: #fff;
  130. font-size: 24rpx;
  131. }
  132. }
  133. }
  134. .submit{
  135. position: fixed;
  136. bottom: 5%;
  137. background-color: #b12026;
  138. color: #fff;
  139. width: 94%;
  140. padding: 20rpx 0;
  141. text-align: center;
  142. border-radius: 40rpx;
  143. }
  144. }
  145. }
  146. </style>