|
@@ -0,0 +1,272 @@
|
|
|
+<template>
|
|
|
+ <view class="app-container">
|
|
|
+ <!-- 背景 -->
|
|
|
+ <view class="bg" />
|
|
|
+ <!-- 跳转App -->
|
|
|
+ <open-app :page="2" :audioType="data.audioType" />
|
|
|
+ <!-- 详情 -->
|
|
|
+ <view class="detail">
|
|
|
+ <img class="logo" :src="data.thumb" />
|
|
|
+ <view class="content">
|
|
|
+ <text style="font-weight: 600;">{{ data.name }}</text>
|
|
|
+ <view class="tips" v-if="data.podcasters">
|
|
|
+ <img class="avatar" :src="data.podcasters[0].avatar" />
|
|
|
+ <text>{{ data.podcasters[0].nickname }}</text>
|
|
|
+ </view>
|
|
|
+ <view class="play_number">
|
|
|
+ <img src="@/static/playnumber.png" />
|
|
|
+ <text>{{ data.playcount }}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <text class="info">
|
|
|
+ <text>{{ data.description }}</text>
|
|
|
+ <uni-icons />
|
|
|
+ </text>
|
|
|
+ <!-- 列表 -->
|
|
|
+ <uni-segmented-control :current="current" @clickItem="onClickItem" styleType="text" :values="items"
|
|
|
+ activeColor="#fff" />
|
|
|
+ <view v-show="current === 0" class="list_content">
|
|
|
+ <uni-row class="item" v-for="(item, index) in list" :key="item.id" @click.native="getNav(item)">
|
|
|
+ <uni-col :span="2" style="color:#FFFFFF66; fontSize: 28rpx; fontWeight:bold">
|
|
|
+ {{ index + 1}}
|
|
|
+ </uni-col>
|
|
|
+ <uni-col :span="20">
|
|
|
+ <view style="fontSize: 32rpx; margin-bottom: 10rpx;">{{ item.name }}</view>
|
|
|
+ <view style="display:flex; fontSize:22rpx; color:#FFFFFF66;">
|
|
|
+ <text class="time">{{ item.durationText }}</text>
|
|
|
+ <text class="play">{{ item.playcount }}</text>
|
|
|
+ <text class="date">{{ item.updateTimeText }}</text>
|
|
|
+ </view>
|
|
|
+ </uni-col>
|
|
|
+ <uni-col :span="2">
|
|
|
+ <img src="@/static/playbtn.png" style="width: 48rpx;height: 48rpx" @click.stop="open" />
|
|
|
+ </uni-col>
|
|
|
+ </uni-row>
|
|
|
+ </view>
|
|
|
+ <view v-show="current === 1" class="list_content">
|
|
|
+ <text class="no-data">暂时没有数据哦</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { podCastProgramList, podCastDetail } from '@/api/share'
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ current: 0,
|
|
|
+ items: ['节目', '推荐'],
|
|
|
+ form: {
|
|
|
+ audioId: '',
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 10
|
|
|
+ },
|
|
|
+ list: [],
|
|
|
+ total: 0,
|
|
|
+ data: {}
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad(e) {
|
|
|
+ if (e.audioId) {
|
|
|
+ this.form.audioId = e.audioId
|
|
|
+ this.getDetail()
|
|
|
+ this.getList()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onReachBottom() {
|
|
|
+ if (this.list.length < this.total) {
|
|
|
+ this.form.pageSize += 10
|
|
|
+ this.getList()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 列表
|
|
|
+ getList() {
|
|
|
+ podCastProgramList(this.form).then(res => {
|
|
|
+ if (res.data.code === 0) {
|
|
|
+ this.list = res.data.data.records
|
|
|
+ this.total = res.data.data.total
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 详情
|
|
|
+ getDetail() {
|
|
|
+ podCastDetail({
|
|
|
+ audioId: this.form.audioId
|
|
|
+ }).then(res => {
|
|
|
+ if (res.data.code === 0) {
|
|
|
+ this.data = res.data.data
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 下一页
|
|
|
+ getNav(item) {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: `/pages/share/controls?audioId=${item.audioId}`
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 打开app
|
|
|
+ open() {
|
|
|
+ this.openApp(2, this.data.audioType)
|
|
|
+ },
|
|
|
+ onClickItem(e) {
|
|
|
+ if (this.current != e.currentIndex) {
|
|
|
+ this.current = e.currentIndex
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.bg {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 450rpx;
|
|
|
+ filter: brightness(0.5) blur(16px);
|
|
|
+ z-index: -1;
|
|
|
+}
|
|
|
+
|
|
|
+.detail {
|
|
|
+ display: flex;
|
|
|
+ margin-top: 48rpx;
|
|
|
+
|
|
|
+ .logo {
|
|
|
+ width: 240rpx;
|
|
|
+ height: 240rpx;
|
|
|
+ border-radius: 16rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .content {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin-left: 32rpx;
|
|
|
+
|
|
|
+ .tips {
|
|
|
+ color: rgba(255, 255, 255, 0.7);
|
|
|
+ font-size: 22rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-top: -32rpx;
|
|
|
+
|
|
|
+ .avatar {
|
|
|
+ width: 56rpx;
|
|
|
+ height: 56rpx;
|
|
|
+ border-radius: 50%;
|
|
|
+ margin-right: 20rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .play_number {
|
|
|
+ display: flex;
|
|
|
+ align-content: center;
|
|
|
+ img {
|
|
|
+ width: 32rpx;
|
|
|
+ height: 32rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ text {
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: rgba(255, 255, 255, 0.4);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.info {
|
|
|
+ width: 100%;
|
|
|
+ color: rgba(255, 255, 255, 0.7);
|
|
|
+ font-size: 24rpx;
|
|
|
+ position: relative;
|
|
|
+ display: block;
|
|
|
+ margin: 32rpx 0 40rpx 0;
|
|
|
+
|
|
|
+ text {
|
|
|
+ display: inline-block;
|
|
|
+ width: 96%;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.info::after {
|
|
|
+ content: '\e6b5';
|
|
|
+ font-family: uniicons;
|
|
|
+ position: absolute;
|
|
|
+ right: 0;
|
|
|
+ top: 5%;
|
|
|
+}
|
|
|
+
|
|
|
+::v-deep .segmented-control__item {
|
|
|
+ flex: none;
|
|
|
+ margin-right: 64rpx;
|
|
|
+}
|
|
|
+
|
|
|
+::v-deep .segmented-control__item--text::after {
|
|
|
+ content: '';
|
|
|
+ width: 32rpx;
|
|
|
+ height: 8rpx;
|
|
|
+ background: #a4d099;
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ bottom: 0;
|
|
|
+ transform: translate(-50%);
|
|
|
+ border-radius: 20rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.list_content {
|
|
|
+ position: relative;
|
|
|
+ margin-top: 32rpx;
|
|
|
+ .item {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 50rpx;
|
|
|
+ }
|
|
|
+ .item:last-child {
|
|
|
+ margin: 0;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.time,
|
|
|
+.play,
|
|
|
+.date {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-right: 16rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.time::before,
|
|
|
+.play::before,
|
|
|
+.date::before {
|
|
|
+ content: '';
|
|
|
+ width: 28rpx;
|
|
|
+ height: 28rpx;
|
|
|
+ margin-right: 8rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.time::before {
|
|
|
+ background: url('@/static/time.png') no-repeat 100% / cover;
|
|
|
+}
|
|
|
+
|
|
|
+.play::before {
|
|
|
+ background: url('@/static/playnumber.png') no-repeat 100% / cover;
|
|
|
+}
|
|
|
+
|
|
|
+.date::before {
|
|
|
+ background: url('@/static/date.png') no-repeat 100% / cover;
|
|
|
+}
|
|
|
+
|
|
|
+.no-data {
|
|
|
+ position: absolute;
|
|
|
+ top: 50%;
|
|
|
+ left: 50%;
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
+ color: #ffffff66;
|
|
|
+ font-size: 24rpx;
|
|
|
+}
|
|
|
+</style>
|