浏览代码

分享12频道

DESKTOP-O04BTUJ\muzen 3 年之前
父节点
当前提交
3bd5242a7f
共有 4 个文件被更改,包括 807 次插入0 次删除
  1. 125 0
      src/pages/share/channels.vue
  2. 175 0
      src/pages/share/controls.vue
  3. 272 0
      src/pages/share/detail.vue
  4. 235 0
      src/pages/share/list.vue

+ 125 - 0
src/pages/share/channels.vue

@@ -0,0 +1,125 @@
+<template>
+  <view class="app-container">
+    <open-app :page="0" />
+    <!-- 12频道分享 -->
+    <view class="twelve_channels">
+      <view class="item" v-for="item in list" :key="item.channelId" @click="getDetail(item)">
+        <view class="logo">
+          <img :src="item.channelPic" />
+          <view class="mask">{{ item.channelId }}</view>
+        </view>
+        <view class="content">
+          <view style="display:flex">
+            <text class="name">{{ item.aliasName }}</text>
+            <text class="tips">{{ item.channelTypeText }}</text>
+          </view>
+          <view>{{ item.description }}</view>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+import { channelsList } from '@/api/share'
+export default {
+  data() {
+    return {
+      userId: '',
+      list: []
+    }
+  },
+  onLoad(e) {
+    if (e.userId) {
+      this.userId = e.userId
+      channelsList({
+        userId: e.userId
+      }).then(res => {
+        if (res.data.code === 0) {
+          this.list = res.data.data
+        }
+      })
+    }
+  },
+  methods: {
+    getDetail(item) {
+      uni.navigateTo({
+        url: `/pages/share/list?channelId=${item.id}&userId=${this.userId}`,
+      })
+    },
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.twelve_channels {
+  margin-top: 48rpx;
+  .item:first-child,
+  .item:last-child {
+    margin: 0;
+  }
+
+  .item {
+    margin: 48rpx 0;
+    height: 136rpx;
+    display: flex;
+    align-items: center;
+
+    .logo {
+      width: 136rpx;
+      height: 136rpx;
+      position: relative;
+
+      img {
+        width: 100%;
+        height: 100%;
+        border-radius: 10rpx;
+      }
+
+      .mask {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 136rpx;
+        height: 136rpx;
+        text-align: center;
+        line-height: 136rpx;
+        background: rgba(0, 0, 0, 0.3);
+      }
+    }
+
+    .content {
+      margin-left: 20rpx;
+      font-size: 28rpx;
+      line-height: 44rpx;
+
+      view:first-child {
+        .name {
+          width: 382rpx;
+          display: inline-block;
+          overflow: hidden;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+        }
+
+        .tips {
+          border: 2rpx solid rgba(255, 255, 255, 0.15);
+          border-radius: 50rpx;
+          font-size: 22rpx;
+          color: rgba(255, 255, 255, 0.7);
+          padding: 0 16rpx;
+          margin-left: 16rpx;
+        }
+      }
+
+      view:last-child {
+        width: 478rpx;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        color: rgba(255, 255, 255, 0.4);
+      }
+    }
+  }
+}
+</style>

+ 175 - 0
src/pages/share/controls.vue

@@ -0,0 +1,175 @@
+<template>
+  <div class="app-container">
+    <!-- 背景 -->
+    <view class="bg" :style="{'background': `url(${form.icon})no-repeat 100% / cover`}" />
+    <!-- 跳转App -->
+    <open-app :page="3" :audioId="form.audioId" />
+    <!-- 播控分享 -->
+    <view class="play_control">
+      <img v-if="channelType !== '1'" class="cover" :src="form.icon" />
+      <view v-if="channelType === '1'" class="FM">
+        <img :src="form.icon" />
+        <text>以上内容来自{{ form.platformId }}</text>
+      </view>
+      <view class="title">{{ form.title }}</view>
+      <view class="name" v-if="channelType === '1'">{{ form.title }}</view>
+      <view v-if="channelType !== '1'" class="platform">
+        以上内容来自{{ form.platformId }}
+      </view>
+      <slider min="0" max="100" block-color="#78B06A" block-size="12" activeColor="#78B06A"
+        backgroundColor="#727c82" disabled />
+      <view class="length">
+        <text>00:00:00</text>
+        <text>00:00:00</text>
+      </view>
+      <img class="play_btn" src="@/static/play.png" @click="open" />
+    </view>
+  </div>
+</template>
+
+<script>
+import { boradcastDetail, podCastProgramDetail } from '@/api/share'
+export default {
+  data() {
+    return {
+      channelType: '',
+      form: {},
+      platFormOptions: [{
+        value: 0,
+        label: '未知'
+      }, {
+        value: 1,
+        label: '蜻蜓'
+      }, {
+        value: 2,
+        label: '官方电台'
+      }, {
+        value: 3,
+        label: '猫王好听'
+      }, {
+        value: 4,
+        label: '海外电台'
+      }, {
+        value: 5,
+        label: '音乐随身听'
+      }, {
+        value: 6,
+        label: 'qq音乐'
+      }, {
+        value: 7,
+        label: 'HiFIVE音乐'
+      }, {
+        value: 8,
+        label: '看见音乐'
+      }]
+    }
+  },
+  onLoad(e) {
+    if (e.audioId) {
+      this.channelType = e.channelType
+      if (e.channelType === '1') {
+        boradcastDetail({
+          audioId: e.audioId
+        }).then(res => {
+          if (res.data.code === 0) {
+            this.form = res.data.data
+            this.form.platformId = this.platFormOptions.find(i => i.value === res.data.data.platformId).label
+          }
+        })
+      } else {
+        podCastProgramDetail({
+          audioId: e.audioId
+        }).then(res => {
+          if (res.data.code === 0) {
+            this.form = res.data.data
+            this.form.platformId = this.platFormOptions.find(i => i.value === res.data.data.platformId).label
+            this.form.icon = res.data.data.audioPic
+          }
+        })
+      }
+    }
+  },
+  methods: {
+    // 打开app
+    open() {
+      this.openApp(3, this.form.audioId)
+    }
+  }
+}
+</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;
+}
+
+.play_control {
+  text-align: center;
+  margin-top: 32rpx;
+
+  .cover {
+    width: 100%;
+    border-radius: 16rpx;
+    margin-bottom: 48rpx;
+  }
+
+  .title {
+    font-size: 48rpx;
+    font-weight: 600;
+  }
+
+  .name {
+    font-size: 28rpx;
+    color: #727c82;
+    margin: 20rpx 0;
+  }
+
+  .platform {
+    font-size: 22rpx;
+    color: #727c82;
+    line-height: 64rpx;
+  }
+
+  .length {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-size: 20rpx;
+    color: #727c82;
+  }
+
+  .FM {
+    width: 558rpx;
+    height: 606rpx;
+    border-radius: 16rpx;
+    padding: 32rpx 32rpx 0;
+    margin: 0 auto 32rpx auto;
+    background: rgba(255, 255, 255, 0.05);
+
+    img {
+      width: 494rpx;
+      height: 494rpx;
+      border-radius: 16rpx;
+    }
+
+    text {
+      font-size: 22rpx;
+      color: rgba(255, 255, 255, 0.4);
+      margin-top: 20rpx;
+      float: left;
+    }
+  }
+
+  .play_btn {
+    width: 112rpx;
+    height: 112rpx;
+    margin-top: 48rpx;
+  }
+}
+</style>

+ 272 - 0
src/pages/share/detail.vue

@@ -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>

+ 235 - 0
src/pages/share/list.vue

@@ -0,0 +1,235 @@
+<template>
+  <view class="app-container">
+    <!-- 背景 -->
+    <view class="bg" :style="{'background': `url(${data.channelPic})no-repeat 100% / cover`}" />
+    <!-- 跳转App -->
+    <open-app :page="1" :channel="data.channelId" />
+    <!-- 详情 -->
+    <view class="detail">
+      <img :src="data.channelPic" />
+      <view class="content">
+        <view class="title">{{ data.aliasName }}</view>
+        <view class="num">
+          <text class="tips">{{ data.channelTypeText }}</text>
+          <text>{{ data.count }}个{{ data.channelTypeText }}</text>
+        </view>
+        <view class="info">
+          <text v-if="data.description">{{ data.description }}</text>
+          <text v-else>暂无描述</text>
+          <uni-icons />
+        </view>
+      </view>
+    </view>
+    <!-- 列表 -->
+    <view class="list">
+      <view class="item" v-for="item in list" :key="item.audioId" @click="getNav(item)">
+        <img class="logo" :src="item.audioPic" />
+        <view class="title">
+          <text>{{ item.audioName }}</text>
+          <text>{{ item.audioInfo }}</text>
+        </view>
+        <img class="play" src="@/static/playbtn.png" @click.stop="open" />
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+import { channelAudioPage, channelDetail } from '@/api/share'
+export default {
+  data() {
+    return {
+      form: {
+        pageNum: 1,
+        pageSize: 10
+      },
+      list: [],
+      total: 0,
+      data: {}
+    }
+  },
+  onLoad(e) {
+    if (e.userId) {
+      this.form.userId = e.userId,
+      this.form.channelId = e.channelId
+      // 频道详情
+      channelDetail({
+        channelId: e.channelId,
+        userId: e.userId
+      }).then(res => {
+        if (res.data.code === 0) {
+          this.data = res.data.data
+        }
+      })
+      this.getList()
+    }
+  },
+  onReachBottom() {
+    if (this.list.length < this.total) {
+      this.form.pageSize += 10
+      this.getList()
+    }
+  },
+  methods: {
+    // 列表
+    getList() {
+      channelAudioPage(this.form).then(res => {
+        if (res.data.code === 0) {
+          this.list = res.data.data.records
+          this.total = res.data.data.total
+        }
+      })
+    },
+    // 下一页
+    getNav(item) {
+      let url = this.data.channelType === 1 || this.data.channelType === 3 ? `/pages/share/controls?channelType=${this.data.channelType}&audioId=${item.audioId}` : `/pages/share/detail?audioId=${item.audioId}`
+      uni.navigateTo({
+        url: url
+      })
+    },
+    // 打开app
+    open() {
+      this.openApp(1, this.data.channelId)
+    }
+  }
+}
+</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;
+
+  img {
+    width: 240rpx;
+    height: 240rpx;
+    border-radius: 16rpx;
+  }
+
+  .content {
+    width: calc(100% - 272rpx);
+    margin-left: 32rpx;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+
+    .title {
+      font-weight: 600;
+      margin-bottom: 10rpx;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .num {
+      display: flex;
+      flex-direction: column;
+      margin-top: -50rpx;
+      font-size: 24rpx;
+      color: rgba(255, 255, 255, 0.7);
+
+      .tips {
+        color: rgba(255, 255, 255, 0.7);
+        font-size: 22rpx;
+        border: 1px solid rgba(255, 255, 255, 0.15);
+        border-radius: 20rpx;
+        padding: 2rpx 16rpx;
+        width: fit-content;
+        margin-bottom: 10rpx;
+      }
+    }
+
+    .info {
+      width: 400rpx;
+      color: rgba(255, 255, 255, 0.7);
+      font-size: 24rpx;
+      position: relative;
+
+      text {
+        display: block;
+        width: 360rpx;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+    }
+
+    .info::after {
+      content: '\e6b5';
+      font-family: uniicons;
+      position: absolute;
+      right: 0rpx;
+      top: 5%;
+    }
+  }
+}
+
+.list {
+  margin-top: 80rpx;
+
+  .item:last-child {
+    margin: 0;
+  }
+
+  .item {
+    margin: 32rpx 0;
+    height: 160rpx;
+    position: relative;
+
+    .logo {
+      width: 160rpx;
+      height: 160rpx;
+      position: absolute;
+      top: 0;
+      left: 0;
+      border-radius: 16rpx;
+    }
+
+    .title {
+      position: absolute;
+      top: 50%;
+      left: 180rpx;
+      transform: translate(0, -50%);
+      display: flex;
+      flex-direction: column;
+
+      text:first-child {
+        font-size: 28rpx;
+        width: 360rpx;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      text:last-child {
+        font-size: 24rpx;
+        color: rgba(255, 255, 255, 0.4);
+        width: 360rpx;
+        overflow: hidden;
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 3;
+      }
+    }
+
+    .play {
+      width: 48rpx;
+      height: 48rpx;
+      position: absolute;
+      top: 50%;
+      right: 0;
+      transform: translate(0, -50%);
+    }
+  }
+}
+</style>