ohplay_h5/src/pages/share/detail.vue

<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.length > 0">
          <img class="avatar" :src="data.podcasters[0].avatar" />
          <text>{{ data.podcasters[0].nickname }}</text>
        </view>
        <view class="play_number">
          <img src="@/static/share/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/share/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/share/time.png') no-repeat 100% / cover;
}

.play::before {
  background: url('@/static/share/playnumber.png') no-repeat 100% / cover;
}

.date::before {
  background: url('@/static/share/date.png') no-repeat 100% / cover;
}

.no-data {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #ffffff66;
  font-size: 24rpx;
}
</style>