分享12频道

src/pages/share/channels.vue

@@ -1,19 +1,19 @@
 <template>
   <view class="app-container">
-    <open-app />
+    <open-app :page="0" />
     <!-- 12频道分享 -->
     <view class="twelve_channels">
-      <view class="item" v-for="(item, index) in 12" :key="item" @click="getDetail">
+      <view class="item" v-for="item in list" :key="item.channelId" @click="getDetail(item)">
         <view class="logo">
-          <img src="@/static/logo.png" />
-          <view class="mask">{{ index + 1 }}</view>
+          <img :src="item.channelPic" />
+          <view class="mask">{{ item.channelId }}</view>
         </view>
         <view class="content">
-          <view>
-            <text>猫王音乐台</text>
-            <text class="tips" v-if="item > 2">点播</text>
+          <view style="display:flex">
+            <text class="name">{{ item.aliasName }}</text>
+            <text class="tips">{{ item.channelTypeText }}</text>
           </view>
-          <view>猫王音乐台、猫王爵士圣经、猫猫猫</view>
+          <view>{{ item.description }}</view>
         </view>
       </view>
     </view>
@@ -21,21 +21,30 @@
 </template>
 
 <script>
+import { channelsList } from '@/api/share'
 export default {
   data() {
     return {
+      userId: '',
       list: []
     }
   },
-  onLoad(e){
-    if(e){
-
+  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() {
+    getDetail(item) {
       uni.navigateTo({
-        url: `/pages/share/list`
+        url: `/pages/share/list?channelId=${item.id}&userId=${this.userId}`,
       })
     },
   }
@@ -85,6 +94,14 @@ export default {
       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;
@@ -96,7 +113,7 @@ export default {
       }
 
       view:last-child {
-        width: 416rpx;
+        width: 478rpx;
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;

src/pages/share/controls.vue

@@ -1,26 +1,26 @@
 <template>
   <div class="app-container">
     <!-- 背景 -->
-    <view class="bg" />
+    <view class="bg" :style="{'background': `url(${form.icon})no-repeat 100% / cover`}" />
     <!-- 跳转App -->
-    <open-app />
+    <open-app :page="3" :audioId="form.audioId" />
     <!-- 播控分享 -->
     <view class="play_control">
-      <view class="bg" />
-      <img class="cover" src="@/static/logo.png" />
-      <!-- <view class="FM">
-        <img src="@/static/logo.png" />
-        <text>以上内容来自蜻蜓FM</text>
-      </view> -->
-      <view style="fontSize: 48rpx;font-weight: 600;">001 蓝色天空</view>
-      <view style="fontSize: 28rpx; color: #727c82">咸鱼老师</view>
-      <view style="fontSize: 22rpx; color: #727c82; lineHeight: 64rpx">以上内容来自蜻蜓FM</view>
+      <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" />
-      <view
-        style="display: flex; justify-content: space-between; align-items: center; fontSize: 20rpx; color:#727c82">
-        <text>00:00</text>
-        <text>02:53</text>
+        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>
@@ -28,42 +28,122 @@
 </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()
+    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;
 
-  .bg {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: linear-gradient(#3b5735, #181818);
-    z-index: -1;
-  }
-
   .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;

src/pages/share/detail.vue

@@ -3,39 +3,40 @@
     <!-- 背景 -->
     <view class="bg" />
     <!-- 跳转App -->
-    <open-app />
+    <open-app :page="2" :audioType="data.audioType" />
     <!-- 详情 -->
     <view class="detail">
-      <img class="logo" src="@/static/logo.png" />
+      <img class="logo" :src="data.thumb" />
       <view class="content">
-        <text style="font-weight: 600;">我的声色犬马</text>
-        <view class="tips">
-          <img class="avatar" src="@/static/logo.png" />
-          <text>一个没有梦想的咸鱼</text>
+        <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>132万</text>
+          <text>{{ data.playcount }}</text>
         </view>
       </view>
     </view>
     <text class="info">
-      <text>频道简介频道简介频道简介频道简介频道简介频道简介频道简介频道简介介频道简介介频道简介</text>
+      <text>{{ data.description }}</text>
       <uni-icons />
     </text>
     <!-- 列表 -->
-    <uni-segmented-control :current="current" styleType="text" :values="items" activeColor="#fff" />
+    <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 in 12" :key="item" @click.native="getNav">
+      <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">
-          1
+          {{ index + 1}}
         </uni-col>
         <uni-col :span="20">
-          <view style="fontSize: 32rpx; margin-bottom: 10rpx;">001 梦想天空分外蓝</view>
+          <view style="fontSize: 32rpx; margin-bottom: 10rpx;">{{ item.name }}</view>
           <view style="display:flex; fontSize:22rpx; color:#FFFFFF66;">
-            <text class="time">02:53</text>
-            <text class="play">123</text>
-            <text class="date">2021-02-18</text>
+            <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">
@@ -43,29 +44,76 @@
         </uni-col>
       </uni-row>
     </view>
-    <view v-show="current === 1">
-      选项卡2的内容
+    <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: ['节目', '推荐']
+      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: {
-    getNav() {
+    // 列表
+    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`
+        url: `/pages/share/controls?audioId=${item.audioId}`
       })
     },
     // 打开app
-    open(){
-      this.openApp()
+    open() {
+      this.openApp(2, this.data.audioType)
+    },
+    onClickItem(e) {
+      if (this.current != e.currentIndex) {
+        this.current = e.currentIndex
+      }
     }
   }
 }
@@ -78,7 +126,7 @@ export default {
   left: 0;
   width: 100%;
   height: 450rpx;
-  background: linear-gradient(#3b5735, #181818);
+  filter: brightness(0.5) blur(16px);
   z-index: -1;
 }
 
@@ -172,6 +220,7 @@ export default {
 }
 
 .list_content {
+  position: relative;
   margin-top: 32rpx;
   .item {
     display: flex;
@@ -188,7 +237,7 @@ export default {
 .date {
   display: flex;
   align-items: center;
-  margin-right: 32rpx;
+  margin-right: 16rpx;
 }
 
 .time::before,
@@ -211,4 +260,13 @@ export default {
 .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>

src/pages/share/list.vue

@@ -1,29 +1,32 @@
 <template>
   <view class="app-container">
     <!-- 背景 -->
-    <view class="bg" />
+    <view class="bg" :style="{'background': `url(${data.channelPic})no-repeat 100% / cover`}" />
     <!-- 跳转App -->
-    <open-app />
+    <open-app :page="1" :channel="data.channelId" />
     <!-- 详情 -->
     <view class="detail">
-      <img src="@/static/logo.png" />
+      <img :src="data.channelPic" />
       <view class="content">
-        <view class="title">我的声色犬马</view>
-        <text class="tips">直播频道</text>
-        <view class="num">3个电台</view>
+        <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>频道简介频道简介频道简介频道简介频道简介</text>
+          <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 3" :key="item" @click="getNav">
-        <img class="logo" src="@/static/logo.png" />
+      <view class="item" v-for="item in list" :key="item.audioId" @click="getNav(item)">
+        <img class="logo" :src="item.audioPic" />
         <view class="title">
-          <text>CNR音乐之声</text>
-          <text>音乐台 国家台</text>
+          <text>{{ item.audioName }}</text>
+          <text>{{ item.audioInfo }}</text>
         </view>
         <img class="play" src="@/static/playbtn.png" @click.stop="open" />
       </view>
@@ -32,22 +35,61 @@
 </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: {
-    // 打开歌单
-    getNav() {
+    // 列表
+    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: `/pages/share/detail`
+        url: url
       })
     },
     // 打开app
-    open(){
-      this.openApp()
+    open() {
+      this.openApp(1, this.data.channelId)
     }
   }
 }
@@ -60,7 +102,7 @@ export default {
   left: 0;
   width: 100%;
   height: 450rpx;
-  background: linear-gradient(#3b5735, #181818);
+  filter: brightness(0.5) blur(16px);
   z-index: -1;
 }
 
@@ -75,25 +117,36 @@ export default {
   }
 
   .content {
+    width: calc(100% - 272rpx);
     margin-left: 32rpx;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
 
     .title {
       font-weight: 600;
       margin-bottom: 10rpx;
-    }
-
-    .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;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
     }
 
     .num {
-      margin: 15rpx 0 35rpx 0;
+      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 {
@@ -103,7 +156,7 @@ export default {
       position: relative;
 
       text {
-        display: inline-block;
+        display: block;
         width: 360rpx;
         overflow: hidden;
         text-overflow: ellipsis;
@@ -124,7 +177,6 @@ export default {
 .list {
   margin-top: 80rpx;
 
-  .item:first-child,
   .item:last-child {
     margin: 0;
   }
@@ -153,10 +205,20 @@ export default {
 
       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;
       }
     }