payTeamCourse.vue 8.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283
  1. <template>
  2. <div class="teamCourseList">
  3. <p class="coreTitle">
  4. 乐团课
  5. <el-form-item
  6. class="titleFormItem"
  7. label="加课方式"
  8. prop="leixing"
  9. :rules="[
  10. {
  11. required: true,
  12. message: '请选择加课方式',
  13. trigger: 'change',
  14. },
  15. ]"
  16. >
  17. <!-- &&courseViewType != 2 -->
  18. <el-radio-group style="width: 100%" v-model="form.leixing">
  19. <el-radio label="1">标准课程</el-radio>
  20. <el-radio label="2">自定义课程</el-radio>
  21. </el-radio-group>
  22. </el-form-item>
  23. <!-- !this.rowDetail&& v-if="
  24. isCommon &&
  25. form.musicGroupOrganizationCourseSettingId != 0 &&
  26. courseViewType != 2
  27. "-->
  28. <el-form-item
  29. class="titleFormItem"
  30. v-if="form.leixing == 1"
  31. label="收费标准"
  32. prop="musicGroupOrganizationCourseSettingId"
  33. :rules="[
  34. {
  35. required: true,
  36. message: '请选择收费标准',
  37. trigger: 'change',
  38. },
  39. ]"
  40. >
  41. <el-select
  42. style="width: 100% !important"
  43. v-model="form.musicGroupOrganizationCourseSettingId"
  44. placeholder="请选择收费标准"
  45. size="mini"
  46. >
  47. <el-option
  48. v-for="item in charges"
  49. :key="item.id"
  50. :label="item.name"
  51. :value="item.id"
  52. >
  53. </el-option>
  54. </el-select>
  55. </el-form-item>
  56. <el-form-item label="是否展示" prop="isShowMusicCourseForPay" v-if="allCourseCurrentPrice==0" class="titleFormItem">
  57. <el-select
  58. style="width: 100% !important"
  59. v-model="form.isShowMusicCourseForPay"
  60. placeholder="请选择是否展示乐团费用"
  61. size="mini"
  62. >
  63. <el-option label="是" :value="true"> </el-option>
  64. <el-option label="否" :value="false"> </el-option>
  65. </el-select>
  66. </el-form-item>
  67. <el-button
  68. icon="el-icon-plus"
  69. size="mini"
  70. plain
  71. class="addBtn"
  72. @click="$listeners.create"
  73. v-if="!isDisabled"
  74. >新增课程类型</el-button
  75. >
  76. </p>
  77. <el-table
  78. class="courseTable"
  79. :data="form.eclass"
  80. style="width: 100% !important; background: #f9f9f9"
  81. :header-cell-style="{ background: '#F9F9F9', color: '#444' }"
  82. >
  83. <el-table-column
  84. label="课程类型"
  85. prop="courseType"
  86. key="courseType"
  87. width="170px"
  88. >
  89. <template slot-scope="scope">
  90. <el-form-item
  91. :prop="'eclass.' + scope.$index + '.courseType'"
  92. :rules="{
  93. required: true,
  94. message: '请选择课程类型',
  95. trigger: 'change',
  96. }"
  97. >
  98. <el-select
  99. style="width: 90% !important"
  100. v-model="form.eclass[scope.$index].courseType"
  101. placeholder="课程类型"
  102. clearable
  103. @change="courseItemChange(scope.row, scope.$index)"
  104. :disabled="isDisabled"
  105. >
  106. <el-option
  107. v-for="(item, key) in courseUnitPriceSettingsByType"
  108. :key="key"
  109. :disabled="isOptionDisabled(key)"
  110. :label="courseType[key]"
  111. :value="key"
  112. ></el-option>
  113. </el-select>
  114. </el-form-item>
  115. </template>
  116. </el-table-column>
  117. <el-table-column
  118. label="课程时长(分钟)"
  119. prop="courseTotalMinuties"
  120. key="courseTotalMinuties"
  121. width="170px"
  122. >
  123. <template slot-scope="scope">
  124. <el-form-item
  125. :prop="'eclass.' + scope.$index + '.courseTotalMinuties'"
  126. :rules="[
  127. {
  128. required: true,
  129. message: '请输入课程时长',
  130. trigger: 'blur',
  131. },
  132. ]"
  133. >
  134. <el-input-number
  135. style="width: 90% !important"
  136. class="number-input"
  137. v-model="form.eclass[scope.$index].courseTotalMinuties"
  138. :controls="false"
  139. :precision="0"
  140. :min="0"
  141. :disabled="isDisabled"
  142. @change="$listeners.priceChange(scope.row, scope.$index)"
  143. placeholder="课程时长"
  144. />
  145. </el-form-item>
  146. </template>
  147. </el-table-column>
  148. <el-table-column
  149. label="售价(元)"
  150. prop="courseCurrentPrice"
  151. key="courseCurrentPrice"
  152. width="170px"
  153. >
  154. <template slot="header">
  155. <p style="">
  156. 售价(元)
  157. <el-tooltip placement="top" popper-class="mTooltip">
  158. <div slot="content">学生实际缴费金额</div>
  159. <i
  160. class="el-icon-question"
  161. style="
  162. font-size: 18px;
  163. color: #f56c6c;
  164. top: 2px;
  165. position: relative;
  166. "
  167. ></i>
  168. </el-tooltip>
  169. </p>
  170. </template>
  171. <template slot-scope="scope">
  172. <el-form-item
  173. :prop="'eclass.' + scope.$index + '.courseCurrentPrice'"
  174. :rules="{
  175. required: true,
  176. message: '请输入售价',
  177. trigger: 'blur',
  178. }"
  179. >
  180. <!-- $listeners.moneyChange -->
  181. <el-input-number
  182. style="width: 90% !important"
  183. class="number-input"
  184. v-model="form.eclass[scope.$index].courseCurrentPrice"
  185. :controls="false"
  186. :precision="0"
  187. :min="0"
  188. @change="change"
  189. placeholder="请输入售价"
  190. />
  191. </el-form-item>
  192. </template>
  193. </el-table-column>
  194. <el-table-column
  195. prop="courseOriginalPrice"
  196. key="courseOriginalPrice"
  197. label="原价(元)"
  198. width="170px"
  199. >
  200. <template slot-scope="scope">
  201. <el-form-item
  202. :prop="'eclass.' + scope.$index + '.courseOriginalPrice'"
  203. :rules="{
  204. required: true,
  205. message: '请输入原价',
  206. trigger: 'blur',
  207. }"
  208. >
  209. <el-input-number
  210. style="width: 90% !important"
  211. class="number-input"
  212. v-model="form.eclass[scope.$index].courseOriginalPrice"
  213. :controls="false"
  214. :precision="0"
  215. :min="0"
  216. :disabled="true"
  217. placeholder="请输入原价"
  218. />
  219. </el-form-item>
  220. </template>
  221. </el-table-column>
  222. <el-table-column prop="close" key="close">
  223. <template slot-scope="scope">
  224. <div
  225. style="color: #fa6400; cursor: pointer"
  226. v-if="!isDisabled && form.eclass.length > 1"
  227. @click="$listeners.remove && $listeners.remove(scope.$index)"
  228. >
  229. <!-- v-if="form.length > 1" v-if="clearable" -->
  230. <i class="el-icon-error"></i>
  231. 删除
  232. </div>
  233. </template>
  234. </el-table-column>
  235. </el-table>
  236. <!-- v-if="!isCommon && $listeners.create" -->
  237. </div>
  238. </template>
  239. <script>
  240. import { courseType, boolOptions } from "@/constant";
  241. import { objectToOptions } from "@/utils";
  242. export default {
  243. props: ["form", "charges", "courseUnitPriceSettingsByType"],
  244. data() {
  245. return {
  246. clearable: false,
  247. courseType,
  248. courseTypeOptions: this.courseUnitPriceSettingsByType,
  249. boolOptionsOptions: objectToOptions(boolOptions),
  250. showisMusicGroupFee :false
  251. };
  252. },
  253. mounted() {},
  254. methods: {
  255. courseItemChange(row, index) {},
  256. priceChange(row, index) {},
  257. isOptionDisabled(key) {
  258. const selected = this.form.eclass.map((item) => item.courseType);
  259. return selected.includes(key);
  260. },
  261. change() {},
  262. },
  263. computed: {
  264. isDisabled() {
  265. return this.form.leixing == 1;
  266. },
  267. allCourseCurrentPrice(){
  268. let price = 0
  269. this.form.eclass.forEach(element => {
  270. price+=element.courseCurrentPrice
  271. });
  272. if(price >0){
  273. this.form.isShowMusicCourseForPay = true
  274. }
  275. return price
  276. }
  277. },
  278. };
  279. </script>
  280. <style lang="scss" scoped>
  281. @import "~@/views/resetTeaming/modals/pay.scss";
  282. </style>