stu_require.vue 5.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210
  1. <template>
  2. <view>
  3. <uni-forms ref="baseForm" :model="baseFormData" labelWidth="75px">
  4. <uni-forms-item label="姓名" name="name" required>
  5. <uni-easyinput v-model="baseFormData.name" placeholder="请输入姓名" maxlength="6" trim="both" />
  6. </uni-forms-item>
  7. <uni-forms-item label="手机号" name="name" required>
  8. <button open-type="getPhoneNumber" type="primary" size="mini"
  9. @getphonenumber="getPhoneNumber">获取手机号</button>
  10. </uni-forms-item>
  11. <uni-forms-item label="微信号" name="weixinId" required>
  12. <uni-easyinput v-model="baseFormData.weixinId" placeholder="微信号(不便接听电话时微信沟通)" maxlength="25"
  13. trim="both" />
  14. </uni-forms-item>
  15. <uni-forms-item label="选择课程" required>
  16. <uni-data-picker placeholder="请选择课程" popup-title="课程大纲-具体课程" v-model="baseFormData.course" :clearIcon="false"
  17. :localdata="courseTree" />
  18. </uni-forms-item>
  19. <uni-forms-item label="辅导方式" required>
  20. <uni-data-checkbox v-model="baseFormData.mode" multiple :localdata="modes" />
  21. </uni-forms-item>
  22. <uni-forms-item label="学生性别" required>
  23. <uni-data-checkbox v-model="baseFormData.sex" :localdata="sexs" />
  24. </uni-forms-item>
  25. <uni-forms-item label="课时费" required>
  26. <uni-easyinput v-model="baseFormData.fee" type="number" placeholder="请输入课时金额" />
  27. </uni-forms-item>
  28. <uni-forms-item label="上课时间" required="">
  29. <uni-datetime-picker v-model="baseFormData.datetimerange" type="datetimerange" rangeSeparator="至" />
  30. </uni-forms-item>
  31. <uni-forms-item label="期望目标" name="target">
  32. <uni-easyinput type="textarea" v-model="baseFormData.target" maxlength="100" trim="both" />
  33. </uni-forms-item>
  34. <uni-forms-item label="老师身份" required>
  35. <uni-data-checkbox v-model="baseFormData.identify" :localdata="identifies" />
  36. </uni-forms-item>
  37. <uni-forms-item label="老师学历" required>
  38. <uni-data-select v-model="baseFormData.education" :localdata="educations" />
  39. </uni-forms-item>
  40. <uni-forms-item label="老师性别" required>
  41. <uni-data-checkbox v-model="baseFormData.sexTeacher" :localdata="sexsTeacher" />
  42. </uni-forms-item>
  43. <uni-forms-item label="老师照片" required>
  44. <uni-data-checkbox v-model="baseFormData.hasPhoto" :localdata="hasPhotoes" />
  45. </uni-forms-item>
  46. <uni-forms-item label="对老师要求" name="demandTeacher">
  47. <uni-easyinput type="textarea" v-model="baseFormData.demandTeacher" maxlength="100" trim="both" />
  48. </uni-forms-item>
  49. </uni-forms>
  50. <view>
  51. <button type="primary">提交需求</button>
  52. </view>
  53. </view>
  54. </template>
  55. <script>
  56. export default {
  57. data() {
  58. return {
  59. // 表单数据
  60. baseFormData: {
  61. name: '',
  62. phone: '',
  63. weixinId: '',
  64. course: '1-2',
  65. mode: '',
  66. sex: '保密',
  67. fee: '',
  68. datetimerange: '',
  69. target: '',
  70. identify: '不限',
  71. education: '',
  72. sexTeacher: '不限',
  73. hasPhoto: '不限',
  74. demandTeacher: ''
  75. },
  76. // 选择课程
  77. courseTree: [{
  78. text: '一年级',
  79. value: '1-0',
  80. children: [{
  81. text: '1.1班',
  82. value: '1-1'
  83. },
  84. {
  85. text: '1.2班',
  86. value: '1-2'
  87. }
  88. ]
  89. },
  90. {
  91. text: '二年级',
  92. value: '2-0',
  93. children: [{
  94. text: '2.1班',
  95. value: '2-1'
  96. },
  97. {
  98. text: '2.2班',
  99. value: '2-2'
  100. }
  101. ]
  102. }
  103. ],
  104. // 多选辅导方式数据源
  105. modes: [{
  106. text: '老师上门',
  107. value: '老师上门'
  108. }, {
  109. text: '学员上门',
  110. value: '学员上门'
  111. }, {
  112. text: '线上辅导',
  113. value: '线上辅导'
  114. }],
  115. // 单选性别数据源
  116. sexs: [{
  117. text: '男',
  118. value: '男'
  119. }, {
  120. text: '女',
  121. value: '女'
  122. }, {
  123. text: '保密',
  124. value: '保密'
  125. }],
  126. // 单选老师身份
  127. identifies: [{
  128. text: '不限',
  129. value: '不限'
  130. }, {
  131. text: '专职老师',
  132. value: '专职老师'
  133. }, {
  134. text: '在校大学生',
  135. value: '在校大学生'
  136. }],
  137. educations: [{
  138. value: '专科在读',
  139. text: '专科在读'
  140. }, {
  141. value: '专科毕业',
  142. text: '专科毕业'
  143. }, {
  144. value: '本科在读',
  145. text: '本科在读'
  146. }, {
  147. value: '本科毕业',
  148. text: '本科毕业'
  149. }, {
  150. value: '硕士在读',
  151. text: '硕士在读'
  152. }, {
  153. value: '硕士毕业',
  154. text: '硕士毕业'
  155. }, {
  156. value: '博士在读',
  157. text: '博士在读'
  158. }, {
  159. value: '博士毕业',
  160. text: '博士毕业'
  161. }],
  162. // 单选老师性别
  163. sexsTeacher: [{
  164. text: '不限',
  165. value: '不限'
  166. }, {
  167. text: '男',
  168. value: '男'
  169. }, {
  170. text: '女',
  171. value: '女'
  172. }],
  173. // 单选老师有无照片
  174. hasPhotoes: [{
  175. text: '不限',
  176. value: '不限'
  177. }, {
  178. text: '有照片',
  179. value: '有照片'
  180. }]
  181. };
  182. },
  183. created() {
  184. this.getPriceAndTree()
  185. },
  186. methods: {
  187. // 手机号
  188. async getPhoneNumber(e) {
  189. // console.log(e.detail.code)
  190. const query = {
  191. code: e.detail.code
  192. }
  193. const { data: result } = await uni.$http.get('/ucenter/mini-program-openid-uid/wxGetPhone', query)
  194. if (result.code === 20000) return uni.$showMsg('获取手机成功!')
  195. },
  196. // 树形结构的课程和价格表
  197. async getPriceAndTree() {
  198. const {
  199. data: result
  200. } = await uni.$http.get('/education/course-price/treeAndPrice')
  201. this.courseTree = result.data.treeCourse
  202. }
  203. }
  204. }
  205. </script>
  206. <style lang="scss" scoped>
  207. </style>