venueDetail.vue 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391
  1. <template>
  2. <view class="content">
  3. <u-image :src="venueInfo.url" mode="aspectFill" height="45vw" border-radius="10px" width="calc(100vw - 30px)" style="margin: 10px 15px;float: left;"></u-image>
  4. <u-section :title="venueInfo.name" :right="false" :show-line="false" font-size="32" class="title-box"></u-section>
  5. <view class="venue-text">
  6. <u-icon name="map" style="font-size: 14px;margin-right: 2px;"></u-icon>
  7. {{venueInfo.address}}
  8. </view>
  9. <!-- 场馆简介 -->
  10. <u-section title="场馆简介" :right="false" :show-line="false" font-size="32" class="title-box"></u-section>
  11. <view class="venue-text">{{venueInfo.desc}}</view>
  12. <!-- 会员开通 -->
  13. <u-section title="会员开通" font-size="32" :right="false" :show-line="false" class="title-box"></u-section>
  14. <view class="menber-box">
  15. <view class="menber-col" v-for="(item, index) in menberList" :key="index">
  16. <view class="menber-label">{{item.typeValue}}</view>
  17. <!-- <u-button type="warning" shape="circle" :ripple="true" :custom-style="{...handleCustomStyle, float: 'left', marginLeft: ''}" size="mini" @click="goToPay(item)">点击开通</u-button> -->
  18. <u-checkbox v-model="item.checked" active-color="#ff6e3e" @change="changeCardClick(item)">选择</u-checkbox>
  19. <view class="menber-icon iconfont iconzu4931"></view>
  20. </view>
  21. <view v-if="checkedCardList.length">
  22. <u-button type="warning" shape="circle" :ripple="true" :custom-style="{...handleCustomStyle, float: 'right'}" size="mini" @click="handlePayClick">去支付</u-button>
  23. </view>
  24. </view>
  25. <!-- 班级信息 -->
  26. <u-section title="班级信息" :right="false" :show-line="false" font-size="32" class="title-box"></u-section>
  27. <view class="class-box">
  28. <u-card :head-border-bottom="false" :foot-border-top="false" padding="0" margin="10px" v-for="(item, index) in venueInfo.classListResList"
  29. :key="index" class="class-card" @click="goToClassDetail(item)">
  30. <view class="class-content" slot="head" style="padding-top: 10px;">
  31. <text class="class-name">{{item.name}}</text>
  32. </view>
  33. <view class="class-content" slot="body" style="padding-bottom: 10px;">
  34. <view class="class-info">
  35. <view class="class-info-row">
  36. <u-icon name="clock"></u-icon>
  37. {{item.classStartDate}}&nbsp;~&nbsp;{{item.classEndDate}}
  38. </view>
  39. <view class="class-info-row" v-for="(site, index2) in item.classExtrasList" :key="index2">
  40. <u-icon name="calendar" style="visibility: hidden;"></u-icon>
  41. <text>{{site.week}}&nbsp;{{site.startTime}}-{{site.endTime}}</text>
  42. </view>
  43. <view class="class-info-row">
  44. <u-icon name="map"></u-icon>
  45. {{item.address}}
  46. </view>
  47. </view>
  48. </view>
  49. <view class="class-content" slot="foot" style="padding-bottom: 10px;text-align: right;">
  50. <u-button type="default" shape="circle" :ripple="true" :custom-style="handleDefaultCustomStyle" size="mini"
  51. :hair-line="false" plain @click.stop="cardHandle(item, 1)">体验</u-button>
  52. <!-- <u-button type="warning" shape="circle" :ripple="true" :custom-style="handleCustomStyle" size="mini" @click.stop="cardHandle(item, 2)">报名</u-button> -->
  53. </view>
  54. </u-card>
  55. </view>
  56. <u-popup v-model="enlistShow" mode="bottom" border-radius="30" :closeable="true">
  57. <scroll-view scroll-y class="student-box">
  58. <u-card :title="item.studentName" title-size="32" :head-style="cardStyle" :head-border-bottom="false" :show-foot="false"
  59. margin="10px" borderRadius="20" v-for="(item, index) in studentList1" :key="index" @click="enlistStudent(item)">
  60. <view class="student-card" slot="body">
  61. <view class="class-info-text">性别:{{item.sex}}&nbsp;&nbsp;年龄:{{item.age}}</view>
  62. </view>
  63. </u-card>
  64. </scroll-view>
  65. <u-button type="warning" shape="circle" :ripple="true" :custom-style="{...customStyle,margin:'15px',float: 'left',width: 'calc(100% - 30px)'}"
  66. @click="goToSubscribelForm()">新增学员</u-button>
  67. </u-popup>
  68. <u-popup v-model="subscribeShow" mode="bottom" border-radius="30">
  69. <scroll-view scroll-y class="student-box">
  70. <u-card :title="item.studentName" title-size="32" :head-style="cardStyle" :head-border-bottom="false" :show-foot="false"
  71. margin="10px" borderRadius="20" v-for="(item, index) in studentList2" :key="index" @click="subscribeStudent(item)">
  72. <view class="student-card" slot="body">
  73. <view class="class-info-text">性别:{{item.sex}}&nbsp;&nbsp;年龄:{{item.age}}</view>
  74. </view>
  75. </u-card>
  76. </scroll-view>
  77. <u-button type="warning" shape="circle" :ripple="true" :custom-style="{...customStyle,margin:'15px',float: 'left',width: 'calc(100% - 30px)'}"
  78. @click="goToSubscribelForm()">新增学员</u-button>
  79. </u-popup>
  80. <u-top-tips ref="uTips" zIndex="100000"></u-top-tips>
  81. </view>
  82. </template>
  83. <script>
  84. import {
  85. mapGetters
  86. } from 'vuex'
  87. const NET = require('@/utils/request')
  88. const API = require('@/config/api')
  89. export default {
  90. computed: {
  91. ...mapGetters([
  92. 'mainColor',
  93. 'customStyle',
  94. 'handleCustomStyle',
  95. 'handleDefaultCustomStyle',
  96. ])
  97. },
  98. data() {
  99. return {
  100. venueId: '',
  101. venueInfo: {
  102. url: '',
  103. name: '',
  104. address: '',
  105. desc: '',
  106. classListResList: [],
  107. },
  108. menberList: [],
  109. checkedCardList: [],
  110. classId: '',
  111. cardStyle: {
  112. fontWeight: 'bold'
  113. },
  114. enlistShow: false,
  115. studentList1: [],
  116. subscribeShow: false,
  117. studentList2: [],
  118. }
  119. },
  120. onLoad(options) {
  121. this.venueId = options.id
  122. this.initialize()
  123. },
  124. onShow() {
  125. NET.request(API.getEnlistAbleStudent, {}, 'POST').then(res => {
  126. this.studentList1 = res.data.row
  127. }).catch(error => {
  128. this.$refs.uTips.show({
  129. title: error.message,
  130. type: 'warning',
  131. })
  132. })
  133. NET.request(API.getSubscribeAbleList, {}, 'POST').then(res => {
  134. this.studentList2 = res.data.row
  135. }).catch(error => {
  136. this.$refs.uTips.show({
  137. title: error.message,
  138. type: 'warning',
  139. })
  140. })
  141. },
  142. onPullDownRefresh() {
  143. this.initialize()
  144. setTimeout(() => {
  145. uni.stopPullDownRefresh();
  146. }, 500)
  147. },
  148. methods: {
  149. // 获取初始化数据
  150. initialize() {
  151. NET.request(API.getVenueDetail, {
  152. id: this.venueId
  153. }, 'POST').then(res => {
  154. this.venueInfo = res.data
  155. }).catch(error => {
  156. this.$refs.uTips.show({
  157. title: error.message,
  158. type: 'warning',
  159. })
  160. })
  161. // 会员卡
  162. NET.request(API.getMemberCardList, {}, 'POST').then(res => {
  163. this.menberList = res.data.map(item => {
  164. return {
  165. type: item.type,
  166. typeValue: item.typeValue,
  167. checked: false
  168. }
  169. })
  170. }).catch(error => {
  171. this.$refs.uTips.show({
  172. title: error.message,
  173. type: 'warning',
  174. })
  175. })
  176. },
  177. // 选择会员卡
  178. changeCardClick(cardItem) {
  179. const cardItemIndex = this.checkedCardList.findIndex( item => item.typeValue === cardItem.typeValue )
  180. if(cardItemIndex === -1) {
  181. this.checkedCardList.push(cardItem)
  182. } else {
  183. this.checkedCardList.splice(cardItemIndex,1)
  184. }
  185. },
  186. // 跳转班级详情
  187. goToClassDetail(item) {
  188. uni.navigateTo({
  189. url: '/pagesMember/classDetail?id=' + item.id
  190. });
  191. },
  192. // 弹出
  193. cardHandle(item, type) {
  194. this.classId = item.id
  195. if (type == 1) {
  196. this.subscribeShow = true
  197. } else {
  198. this.enlistShow = true
  199. }
  200. },
  201. // 学员报名
  202. enlistStudent(item) {
  203. NET.request(API.enlistStudent, {
  204. classId: this.classId,
  205. studentId: item.studentId,
  206. }, 'POST').then(res => {
  207. this.enlistShow = false
  208. this.$refs.uTips.show({
  209. title: res.message,
  210. type: 'success',
  211. })
  212. }).catch(error => {
  213. this.$refs.uTips.show({
  214. title: error.message,
  215. type: 'warning',
  216. })
  217. })
  218. },
  219. // 学员预约
  220. subscribeStudent(item) {
  221. NET.request(API.subscribeStudent, {
  222. classId: this.classId,
  223. studentId: item.studentId,
  224. }, 'POST').then(res => {
  225. this.subscribeShow = false
  226. this.$refs.uTips.show({
  227. title: res.message,
  228. type: 'success',
  229. })
  230. }).catch(error => {
  231. this.$refs.uTips.show({
  232. title: error.message,
  233. type: 'warning',
  234. })
  235. })
  236. },
  237. // 跳转开通支付
  238. handlePayClick() {
  239. console.log(this.checkedCardList);
  240. // uni.navigateTo({
  241. // url: '/pagesMain/openMember?memberCardType=' + site.type + '&typeValue=' + site.typeValue
  242. // });
  243. uni.navigateTo({
  244. url: '/pagesMain/openMember?cardinfo=' + encodeURIComponent(JSON.stringify(this.checkedCardList))
  245. })
  246. },
  247. // 跳转新增学员表单
  248. goToSubscribelForm() {
  249. uni.navigateTo({
  250. url: '/pagesMember/subscribelForm'
  251. });
  252. },
  253. },
  254. }
  255. </script>
  256. <style lang="scss" scoped>
  257. @import "@/static/css/themes.scss";
  258. .content {
  259. width: 100%;
  260. float: left;
  261. .title-box {
  262. width: 100vw;
  263. padding: 10px 15px 5px 15px;
  264. float: left;
  265. box-sizing: border-box;
  266. }
  267. .venue-text {
  268. width: 100vw;
  269. padding: 5px 15px 15px 15px;
  270. float: left;
  271. box-sizing: border-box;
  272. color: #999999;
  273. font-size: 10px;
  274. line-height: 16px;
  275. }
  276. .section-title {
  277. width: 100%;
  278. height: 28px;
  279. display: flex;
  280. align-items: center;
  281. margin-top: 20px;
  282. padding: 0 15px;
  283. u-section {
  284. margin-left: 10px;
  285. flex: 1;
  286. }
  287. }
  288. .menber-box {
  289. width: 100vw;
  290. float: left;
  291. padding: 10px 15px;
  292. .menber-col {
  293. width: 100%;
  294. padding: 15px 20px;
  295. margin-bottom: 10px;
  296. display: inline-block;
  297. background-color: #FFFFFF;
  298. border-radius: 15px;
  299. box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2);
  300. position: relative;
  301. overflow: hidden;
  302. .menber-label {
  303. width: 100%;
  304. margin-bottom: 10px;
  305. float: left;
  306. font-size: 14px;
  307. font-weight: bold;
  308. line-height: 20px;
  309. }
  310. .menber-num {
  311. width: 100%;
  312. float: left;
  313. font-size: 26px;
  314. line-height: 28px;
  315. color: $mainColor;
  316. }
  317. .menber-icon {
  318. font-size: 80px;
  319. color: $mainColor;
  320. position: absolute;
  321. right: -5px;
  322. bottom: -15px;
  323. opacity: 0.5;
  324. }
  325. }
  326. }
  327. .class-box {
  328. width: 100vw;
  329. padding: 5px;
  330. float: left;
  331. box-sizing: border-box;
  332. .class-card {
  333. /deep/.u-border:after {
  334. border-radius: 20px !important;
  335. border-color: #999999;
  336. }
  337. .class-content {
  338. width: 100%;
  339. padding: 2px 15px;
  340. float: left;
  341. position: relative;
  342. }
  343. .class-name {
  344. height: 20px;
  345. font-weight: bold;
  346. font-size: 14px;
  347. line-height: 20px;
  348. }
  349. .class-info {
  350. .class-info-row {
  351. color: #999999;
  352. line-height: 18px;
  353. }
  354. }
  355. }
  356. }
  357. .student-box {
  358. max-height: 200px;
  359. padding: 0 15px;
  360. margin: 25px 0 0 0;
  361. box-sizing: border-box;
  362. overflow: auto;
  363. /deep/.u-card__head {
  364. padding-bottom: 0px !important;
  365. }
  366. }
  367. }
  368. </style>