venueDetail.vue 4.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174
  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. <u-section title="场馆简介" :right="false" :show-line="false" font-size="32" class="title-box"></u-section>
  10. <view class="venue-text">{{venueInfo.desc}}</view>
  11. <u-section title="班级信息" :right="false" :show-line="false" font-size="32" class="title-box"></u-section>
  12. <view class="class-box">
  13. <u-card :head-border-bottom="false" :foot-border-top="false" padding="0" margin="10px" v-for="(item, index) in venueInfo.classListResList"
  14. :key="index" class="class-card" @click="goToClassDetail(item)">
  15. <view class="class-content" slot="head" style="padding-top: 10px;">
  16. <text class="class-name">{{item.name}}</text>
  17. </view>
  18. <view class="class-content" slot="body" style="padding-bottom: 10px;">
  19. <view class="class-info">
  20. <view class="class-info-row">
  21. <u-icon name="clock"></u-icon>
  22. {{item.classStartDate}}&nbsp;~&nbsp;{{item.classEndDate}}
  23. </view>
  24. <view class="class-info-row" v-for="(site, index2) in item.classExtrasList" :key="index2">
  25. <u-icon name="calendar" style="visibility: hidden;"></u-icon>
  26. <text>{{site.week}}&nbsp;{{site.startTime}}-{{site.endTime}}</text>
  27. </view>
  28. <view class="class-info-row">
  29. <u-icon name="map"></u-icon>
  30. {{item.address}}
  31. </view>
  32. </view>
  33. </view>
  34. <view class="class-content" slot="foot" style="padding-bottom: 10px;text-align: right;">
  35. <u-button type="warning" shape="circle" :ripple="true" :custom-style="handleCustomStyle" size="mini">详情</u-button>
  36. </view>
  37. </u-card>
  38. </view>
  39. <u-top-tips ref="uTips"></u-top-tips>
  40. </view>
  41. </template>
  42. <script>
  43. import {
  44. mapGetters
  45. } from 'vuex'
  46. const NET = require('@/utils/request')
  47. const API = require('@/config/api')
  48. export default {
  49. computed: {
  50. ...mapGetters([
  51. 'customStyle',
  52. 'handleCustomStyle',
  53. ])
  54. },
  55. data() {
  56. return {
  57. venueId: '',
  58. venueInfo: {
  59. url: '',
  60. name: '',
  61. address: '',
  62. desc: '',
  63. classListResList: [],
  64. },
  65. }
  66. },
  67. onLoad(options) {
  68. this.venueId = options.id
  69. this.initialize()
  70. },
  71. onShow() {},
  72. onPullDownRefresh() {
  73. this.initialize()
  74. setTimeout(() => {
  75. uni.stopPullDownRefresh();
  76. }, 500)
  77. },
  78. methods: {
  79. // 获取初始化数据
  80. initialize() {
  81. NET.request(API.getVenueDetail, {
  82. id: this.venueId
  83. }, 'POST').then(res => {
  84. this.venueInfo = res.data
  85. }).catch(error => {
  86. this.$refs.uTips.show({
  87. title: error.message,
  88. type: 'warning',
  89. })
  90. })
  91. },
  92. // 跳转班级详情
  93. goToClassDetail(item) {
  94. uni.navigateTo({
  95. url: '/pagesEnroll/classDetail?id=' + item.id
  96. });
  97. },
  98. },
  99. }
  100. </script>
  101. <style lang="scss" scoped>
  102. @import "@/static/css/themes.scss";
  103. .content {
  104. width: 100%;
  105. float: left;
  106. .title-box {
  107. width: 100vw;
  108. padding: 10px 15px 5px 15px;
  109. float: left;
  110. box-sizing: border-box;
  111. }
  112. .venue-text {
  113. width: 100vw;
  114. padding: 5px 15px 15px 15px;
  115. float: left;
  116. box-sizing: border-box;
  117. color: #999999;
  118. font-size: 10px;
  119. line-height: 16px;
  120. }
  121. .class-box {
  122. width: 100vw;
  123. padding: 5px;
  124. float: left;
  125. box-sizing: border-box;
  126. .class-card {
  127. /deep/.u-border:after {
  128. border-radius: 20px !important;
  129. border-color: #999999;
  130. }
  131. .class-content {
  132. width: 100%;
  133. padding: 2px 15px;
  134. float: left;
  135. position: relative;
  136. }
  137. .class-name {
  138. height: 20px;
  139. font-weight: bold;
  140. font-size: 14px;
  141. line-height: 20px;
  142. }
  143. .class-info {
  144. .class-info-row {
  145. color: #999999;
  146. line-height: 18px;
  147. }
  148. }
  149. }
  150. }
  151. .student-box {
  152. max-height: 200px;
  153. padding: 0 15px;
  154. margin: 25px 0 0 0;
  155. box-sizing: border-box;
  156. overflow: auto;
  157. /deep/.u-card__head {
  158. padding-bottom: 0px !important;
  159. }
  160. }
  161. }
  162. </style>