detail.vue 5.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275
  1. <template>
  2. <view class="app-container">
  3. <!-- 背景 -->
  4. <view class="bg" />
  5. <!-- 跳转App -->
  6. <open-app @open="open" />
  7. <!-- 详情 -->
  8. <view class="detail">
  9. <img class="logo" :src="data.thumb" />
  10. <view class="content">
  11. <text style="font-weight: 600;">{{ data.name }}</text>
  12. <view class="tips" v-if="data.podcasters.length > 0">
  13. <img class="avatar" :src="data.podcasters[0].avatar" />
  14. <text>{{ data.podcasters[0].nickname }}</text>
  15. </view>
  16. <view class="play_number">
  17. <img src="@/static/share/playnumber.png" />
  18. <text>{{ data.playcount }}</text>
  19. </view>
  20. </view>
  21. </view>
  22. <text class="info">
  23. <text>{{ data.description }}</text>
  24. <uni-icons />
  25. </text>
  26. <!-- 列表 -->
  27. <uni-segmented-control :current="current" @clickItem="onClickItem" styleType="text" :values="items"
  28. activeColor="#fff" />
  29. <view v-show="current === 0" class="list_content">
  30. <uni-row class="item" v-for="(item, index) in list" :key="item.id" @click.native="open">
  31. <uni-col :span="2" style="color:#FFFFFF66; font-size: 28rpx; font-weight:bold">
  32. {{ index + 1}}
  33. </uni-col>
  34. <uni-col :span="20">
  35. <view style="font-size: 32rpx; margin-bottom: 10rpx;">{{ item.name }}</view>
  36. <view style="display:flex; font-size:22rpx; color:#FFFFFF66;">
  37. <text class="time">{{ item.durationText }}</text>
  38. <text class="play">{{ item.playcount }}</text>
  39. <text class="date">{{ item.updateTimeText }}</text>
  40. </view>
  41. </uni-col>
  42. <uni-col :span="2">
  43. <img src="@/static/share/playbtn.png" style="width: 48rpx;height: 48rpx" @click.stop="open" />
  44. </uni-col>
  45. </uni-row>
  46. </view>
  47. <view v-show="current === 1" class="list_content">
  48. <text class="no-data">暂时没有数据哦</text>
  49. </view>
  50. </view>
  51. </template>
  52. <script>
  53. import { podCastProgramList, podCastDetail } from '@/api/share'
  54. export default {
  55. data() {
  56. return {
  57. current: 0,
  58. items: ['节目', '推荐'],
  59. form: {
  60. audioId: '',
  61. pageNum: 1,
  62. pageSize: 10
  63. },
  64. list: [],
  65. total: 0,
  66. data: {}
  67. }
  68. },
  69. onLoad(e) {
  70. if (e.audioId) {
  71. this.form.audioId = e.audioId
  72. this.getDetail()
  73. this.getList()
  74. }
  75. },
  76. onReachBottom() {
  77. if (this.list.length < this.total) {
  78. this.form.pageSize += 10
  79. this.getList()
  80. }
  81. },
  82. methods: {
  83. // 列表
  84. getList() {
  85. podCastProgramList(this.form).then(res => {
  86. if (res.data.code === 0) {
  87. this.list = res.data.records
  88. this.total = res.data.total
  89. }
  90. })
  91. },
  92. // 详情
  93. getDetail() {
  94. podCastDetail({
  95. audioId: this.form.audioId
  96. }).then(res => {
  97. if (res.data.code === 0) {
  98. this.data = res.data
  99. }
  100. })
  101. },
  102. // 下一页
  103. // getNav(item) {
  104. // uni.navigateTo({
  105. // url: `/pages/share/controls?audioId=${item.audioId}`
  106. // })
  107. // },
  108. // 打开app
  109. open() {
  110. // this.openApp(2, this.data.audioType)
  111. if(this.data.audioType === 8){
  112. this.openApp(`?page=/mobile/playAlbumPage&audioType=${this.data.audioType}&audioId=${this.form.audioId}`)
  113. }
  114. },
  115. onClickItem(e) {
  116. if (this.current != e.currentIndex) {
  117. this.current = e.currentIndex
  118. }
  119. }
  120. }
  121. }
  122. </script>
  123. <style lang="scss" scoped>
  124. .bg {
  125. position: absolute;
  126. top: 0;
  127. left: 0;
  128. width: 100%;
  129. height: 450rpx;
  130. filter: brightness(0.5) blur(16px);
  131. z-index: -1;
  132. }
  133. .detail {
  134. display: flex;
  135. margin-top: 48rpx;
  136. .logo {
  137. width: 240rpx;
  138. height: 240rpx;
  139. border-radius: 16rpx;
  140. }
  141. .content {
  142. display: flex;
  143. flex-direction: column;
  144. justify-content: space-between;
  145. margin-left: 32rpx;
  146. .tips {
  147. color: rgba(255, 255, 255, 0.7);
  148. font-size: 22rpx;
  149. display: flex;
  150. align-items: center;
  151. margin-top: -32rpx;
  152. .avatar {
  153. width: 56rpx;
  154. height: 56rpx;
  155. border-radius: 50%;
  156. margin-right: 20rpx;
  157. }
  158. }
  159. .play_number {
  160. display: flex;
  161. align-content: center;
  162. img {
  163. width: 32rpx;
  164. height: 32rpx;
  165. }
  166. text {
  167. font-size: 24rpx;
  168. color: rgba(255, 255, 255, 0.4);
  169. }
  170. }
  171. }
  172. }
  173. .info {
  174. width: 100%;
  175. color: rgba(255, 255, 255, 0.7);
  176. font-size: 24rpx;
  177. position: relative;
  178. display: block;
  179. margin: 32rpx 0 40rpx 0;
  180. text {
  181. display: inline-block;
  182. width: 96%;
  183. overflow: hidden;
  184. text-overflow: ellipsis;
  185. white-space: nowrap;
  186. }
  187. }
  188. .info::after {
  189. content: '\e6b5';
  190. font-family: uniicons;
  191. position: absolute;
  192. right: 0;
  193. top: 5%;
  194. }
  195. ::v-deep .segmented-control__item {
  196. flex: none;
  197. margin-right: 64rpx;
  198. }
  199. ::v-deep .segmented-control__item--text::after {
  200. content: '';
  201. width: 32rpx;
  202. height: 8rpx;
  203. background: #a4d099;
  204. position: absolute;
  205. left: 50%;
  206. bottom: 0;
  207. transform: translate(-50%);
  208. border-radius: 20rpx;
  209. }
  210. .list_content {
  211. position: relative;
  212. margin-top: 32rpx;
  213. .item {
  214. display: flex;
  215. align-items: center;
  216. margin-bottom: 50rpx;
  217. }
  218. .item:last-child {
  219. margin: 0;
  220. }
  221. }
  222. .time,
  223. .play,
  224. .date {
  225. display: flex;
  226. align-items: center;
  227. margin-right: 16rpx;
  228. }
  229. .time::before,
  230. .play::before,
  231. .date::before {
  232. content: '';
  233. width: 28rpx;
  234. height: 28rpx;
  235. margin-right: 8rpx;
  236. }
  237. .time::before {
  238. background: url('@/static/share/time.png') no-repeat 100% / cover;
  239. }
  240. .play::before {
  241. background: url('@/static/share/playnumber.png') no-repeat 100% / cover;
  242. }
  243. .date::before {
  244. background: url('@/static/share/date.png') no-repeat 100% / cover;
  245. }
  246. .no-data {
  247. position: absolute;
  248. top: 50%;
  249. left: 50%;
  250. transform: translate(-50%, -50%);
  251. color: #ffffff66;
  252. font-size: 24rpx;
  253. }
  254. </style>