subscribeInfo.vue 7.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248
  1. <template>
  2. <view class="content">
  3. <u-form :model="subscribelForm" ref="subscribelForm" label-width="140">
  4. <u-form-item label="学生姓名" prop="studentName">
  5. <u-input v-model="subscribelForm.studentName" disabled />
  6. </u-form-item>
  7. <!-- <u-form-item label="家长姓名" prop="fatherName" required>
  8. <u-input v-model="subscribelForm.fatherName" placeholder="请输入家长姓名" />
  9. </u-form-item> -->
  10. <u-form-item label="学生性别" prop="sex">
  11. <u-input v-model="subscribelForm.sex" disabled />
  12. </u-form-item>
  13. <u-form-item label="学生年龄" prop="age">
  14. <u-input v-model="subscribelForm.age" disabled />
  15. </u-form-item>
  16. <u-form-item label="学生班级" prop="name">
  17. <u-input v-if="!subscribelForm.experience" v-model="subscribelForm.name" placeholder="请输入学生班级" type="select" @click="handleClassInfoShow" />
  18. <text v-else>{{ subscribelForm.name }}</text>
  19. </u-form-item>
  20. <!-- <u-form-item label="学生生日" prop="birthday" required>
  21. <u-input v-model="subscribelForm.birthday" placeholder="请选择学生生日" :select-open="birthdayShow" type="select" @click="birthdayShow = true" />
  22. </u-form-item> -->
  23. <!-- <u-form-item label="手机号码" prop="phone" required>
  24. <u-input v-model="subscribelForm.phone" type="number" placeholder="请输入手机号码" />
  25. </u-form-item> -->
  26. <!-- <u-form-item label="体验日期" placeholder="请选择体验日期" prop="experience">
  27. <u-input v-model="subscribelForm.experience" :select-open="experienceShow" type="select" @click="experienceShow = true" />
  28. </u-form-item> -->
  29. <u-form-item label="上课教练" placeholder="请选择上课教练" prop="coachName">
  30. <u-input v-if="!subscribelForm.experience" v-model="subscribelForm.coachName" type="select" @click="handleCoachListShow" />
  31. <text v-else>{{ subscribelForm.coachName }}</text>
  32. </u-form-item>
  33. </u-form>
  34. <!-- 性别 -->
  35. <!-- <u-action-sheet :list="sexList" v-model="sexShow" @click="setSex"></u-action-sheet> -->
  36. <!-- 班级 -->
  37. <!-- <u-action-sheet :list="classList" v-model="classShow" @click="HandleChooseClassClick"></u-action-sheet> -->
  38. <u-picker v-model="classShow" mode="selector" :range="classList" range-key="text" @confirm="HandleChooseClassClick"></u-picker>
  39. <!-- 教练 -->
  40. <!-- <u-action-sheet :list="coachList" v-model="coachShow" @click="HandleChooseCoachClick"></u-action-sheet> -->
  41. <u-picker v-model="coachShow" mode="selector" :range="coachList" range-key="text" @confirm="HandleChooseCoachClick"></u-picker>
  42. <!-- 学生生日 -->
  43. <u-picker v-model="birthdayShow" mode="time" :params="params" @confirm="setBirthday"></u-picker>
  44. <!-- 体验日期 -->
  45. <u-calendar v-model="experienceShow" mode="date" :active-bg-color="mainColor" btn-type="error" availableText="有课"
  46. :available="availableList" @change="setExperience" max-date="2300-12-31"></u-calendar>
  47. <view class="handle-fix-box" v-if="!subscribelForm.experience">
  48. <u-button type="warning" shape="circle" :ripple="true" :custom-style="customStyle" @click="submitForm">确认到场体验</u-button>
  49. </view>
  50. <u-top-tips ref="uTips"></u-top-tips>
  51. </view>
  52. </template>
  53. <script>
  54. import {
  55. mapGetters
  56. } from 'vuex'
  57. const NET = require('@/utils/request')
  58. const API = require('@/config/api')
  59. export default {
  60. computed: {
  61. ...mapGetters([
  62. 'mainColor',
  63. 'customStyle',
  64. ])
  65. },
  66. data() {
  67. return {
  68. // 场馆id
  69. venueId: null,
  70. subscribelForm: {
  71. studentId: '',
  72. studentName: '',
  73. sex: '',
  74. age: '',
  75. classId: '',
  76. name: '',
  77. coachId: '',
  78. coachName: '',
  79. // 预约id
  80. subscribeId: ''
  81. },
  82. sexShow: false,
  83. sexList: [{
  84. text: '男'
  85. },
  86. {
  87. text: '女'
  88. }
  89. ],
  90. birthdayShow: false,
  91. params: {
  92. year: true,
  93. month: true,
  94. day: true,
  95. hour: false,
  96. minute: false,
  97. second: false
  98. },
  99. experienceShow: false,
  100. availableList: [],
  101. classShow: false,
  102. classList: [],
  103. coachShow: false,
  104. coachList: [],
  105. }
  106. },
  107. onLoad(options) {
  108. const item = JSON.parse(decodeURIComponent(options.item));
  109. this.venueId = item.venueId
  110. this.subscribelForm = { ...item, classId: item.classId, sex:item.sex == 0 ? '男' : '女', coachName: item.coachId != -1 ? item.coachName : ''}
  111. },
  112. onReady() {
  113. this.$refs.subscribelForm.setRules(this.rules);
  114. },
  115. methods: {
  116. // 显示班级列表
  117. handleClassInfoShow() {
  118. this.classShow = true
  119. this.getClassFromVenue()
  120. console.log(this.venueId);
  121. },
  122. // 获取班级列表
  123. getClassFromVenue() {
  124. NET.request(API.getClassListByVenueId, { id:this.venueId }, 'POST').then(res => {
  125. if(res.status === 10000) {
  126. this.classList = res.data.map( item => { return { id: item.id, text: item.name } })
  127. this.subscribelForm.coachId = ''
  128. this.subscribelForm.coachName = ''
  129. } else {
  130. this.$refs.uTips.show({
  131. title: res.message,
  132. type: 'error',
  133. })
  134. }
  135. })
  136. },
  137. // 选择班级
  138. HandleChooseClassClick(index) {
  139. this.subscribelForm.classId = this.classList[index].id
  140. this.subscribelForm.name = this.classList[index].text
  141. },
  142. // 显示教练列表
  143. handleCoachListShow() {
  144. this.coachList = []
  145. this.coachShow = true
  146. // 教练列表
  147. NET.request(API.getCoachList, {venueId: this.venueId, classId: this.subscribelForm.classId }, 'POST').then(res=> {
  148. if(res.status == 10000) {
  149. this.coachList = res.data.map( item => { return { id: item.coachId, text: item.nickname }})
  150. } else {
  151. this.$refs.uTips.show({
  152. title: res.message,
  153. type: 'error',
  154. })
  155. }
  156. })
  157. },
  158. // 选择教练
  159. HandleChooseCoachClick(index) {
  160. this.subscribelForm.coachId = this.coachList[index].id
  161. this.subscribelForm.coachName = this.coachList[index].text
  162. },
  163. // 设置性别
  164. setSex(index) {
  165. this.subscribelForm.sex = this.sexList[index].text
  166. },
  167. // 设置生日
  168. setBirthday(object) {
  169. this.subscribelForm.birthday = object.year + '-' + object.month + '-' + object.day
  170. },
  171. // 设置体验日期
  172. setExperience(object) {
  173. let date = object.year + '-' + object.month + '-' + object.day
  174. if (this.availableList.filter(site => site == date).length) {
  175. this.subscribelForm.experience = date
  176. } else {
  177. this.subscribelForm.experience = ''
  178. this.$refs.uTips.show({
  179. title: '请选择可用日期',
  180. type: 'error',
  181. })
  182. }
  183. },
  184. // 提交表单
  185. submitForm() {
  186. if(!this.subscribelForm.coachId || !this.subscribelForm.coachName) {
  187. this.$refs.uTips.show({
  188. title: '请选择教练',
  189. type: 'warning',
  190. })
  191. return
  192. }
  193. this.$refs.subscribelForm.validate(valid => {
  194. if (valid) {
  195. const data = {
  196. id: parseInt(this.subscribelForm.subscribeId),
  197. classId: parseInt(this.subscribelForm.classId),
  198. studentId: parseInt(this.subscribelForm.studentId),
  199. coachId: parseInt(this.subscribelForm.coachId)
  200. }
  201. NET.request(API.updateAppointment, data, 'POST').then(res => {
  202. if(res.status == 10000) {
  203. this.$refs.uTips.show({
  204. title: '保存成功',
  205. type: 'success',
  206. })
  207. setTimeout(() => {
  208. uni.navigateBack()
  209. }, 1000)
  210. } else {
  211. this.$refs.uTips.show({
  212. title: res.message,
  213. type: 'warning',
  214. })
  215. }
  216. }).catch(error => {
  217. this.$refs.uTips.show({
  218. title: error.message,
  219. type: 'warning',
  220. })
  221. })
  222. }
  223. });
  224. },
  225. },
  226. }
  227. </script>
  228. <style>
  229. page {
  230. width: 100%;
  231. height: 100%;
  232. position: relative;
  233. }
  234. </style>
  235. <style lang="scss" scoped>
  236. @import "@/static/css/themes.scss";
  237. .content {
  238. width: 100%;
  239. float: left;
  240. padding: 0 15px 60px 15px;
  241. box-sizing: border-box;
  242. }
  243. </style>