feature: 添加频道列表界面

pages/pageC/channelDetails/channelDetails.js

@@ -1,66 +1,45 @@
-// pages/pageC/channelDetails/channelDetails.js
+// pages/channelDetails/channelDetails.js
+const {
+  pageByDevice
+} = require('./../../utils/api.js');
+const app = getApp();
 Page({
 
-  /**
-   * 页面的初始数据
-   */
   data: {
-
-  },
-
-  /**
-   * 生命周期函数--监听页面加载
-   */
-  onLoad(options) {
-
-  },
-
-  /**
-   * 生命周期函数--监听页面初次渲染完成
-   */
-  onReady() {
-
-  },
-
-  /**
-   * 生命周期函数--监听页面显示
-   */
-  onShow() {
-
+    nvabarData: {
+      showCapsule: 1, //是否显示左上角图标   1表示显示    0表示不显示
+      title: '', //导航栏 中间的标题
+    },
+    navBarHeight: app.globalData.navBarHeight,
+    MenuButtonTop: app.globalData.MenuButtonTop,
+    thisChannel: {},
+    pageIndex: 1,
+    channelList: [],
+  },
+
+  onLoad() {
+    var that = this;
+    wx.getStorage({
+      key: "channelDeta",
+      success(r) {
+        that.setData({
+          thisChannel: r.data
+        });
+
+        pageByDevice({
+          channelId: r.data.channelId,
+          pageNum: 1,
+          pageSize: 300
+        }).then((res) => {
+          that.setData({
+            channelList: res.records
+          })
+          wx.removeStorage({
+            key: 'channelDeta',
+          })
+        })
+      }
+    })
   },
 
-  /**
-   * 生命周期函数--监听页面隐藏
-   */
-  onHide() {
-
-  },
-
-  /**
-   * 生命周期函数--监听页面卸载
-   */
-  onUnload() {
-
-  },
-
-  /**
-   * 页面相关事件处理函数--监听用户下拉动作
-   */
-  onPullDownRefresh() {
-
-  },
-
-  /**
-   * 页面上拉触底事件的处理函数
-   */
-  onReachBottom() {
-
-  },
-
-  /**
-   * 用户点击右上角分享
-   */
-  onShareAppMessage() {
-
-  }
 })

pages/pageC/channelDetails/channelDetails.wxml

@@ -1,2 +1,26 @@
-<!--pages/pageC/channelDetails/channelDetails.wxml-->
-<text>pages/pageC/channelDetails/channelDetails.wxml</text>
+<view class="channelDetails">
+  <nav-bar bind:goBack="_goBack" nav-bgc-class="ex-nav-bgc-class" nav-title-class="ex-nav-title-class" ex-back-pre="ex-back-pre" navbar-data='{{nvabarData}}'>
+  </nav-bar>
+  <view class="content">
+    <view class="headInfo">
+      <view class="channelInfo">
+        <view class="pic">
+          <image src="{{thisChannel.channelPic}}"></image>
+        </view>
+        <view class="textInfo">
+          <text>FM.{{thisChannel.channelNum !== null ? (thisChannel.channelNum < 10 ? "0" + (thisChannel.channelNum) : thisChannel.channelNum) : 00}}</text>
+              <text>{{thisChannel.channelName}}</text>
+        </view>
+      </view>
+      <!-- <image class="bgPic_1" src="../../../img/pd1.png" mode="heightFix"></image> -->
+      <image class="bgPic_3" src="../../../img/pd3.png" mode="widthFix"></image>
+      <image class="bgPic_2" src="../../../img/pd2.png" mode="heightFix"></image>
+    </view>
+    <view class="list" style="height: calc(100vh - {{navBarHeight}}px - 260rpx);">
+      <view class="info" wx:for="{{channelList}}">
+        <image src="{{item.audioPic}}" mode="scaleToFill"></image>
+        <text>{{item.audioName}}</text>
+      </view>
+    </view>
+  </view>
+</view>

pages/pageC/channelDetails/channelDetails.wxss

@@ -1 +1,91 @@
-/* pages/pageC/channelDetails/channelDetails.wxss */
+/* pages/channelDetails/channelDetails.wxss */
+.headInfo{
+  width: 100vw;
+  height: 260rpx;
+  background: rgba(0, 1, 3, 0.8);
+  filter: blur(0px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+}
+.headInfo .channelInfo{
+  width: calc(100vw - 64rpx);
+  height: 160rpx;
+  display: flex;
+  align-items: center;
+}
+.headInfo .channelInfo .pic{
+  width: 160rpx;
+  height: 160rpx;
+  margin-right: 20rpx;
+}
+.headInfo .channelInfo .pic image{
+  width: 160rpx;
+  height: 160rpx;
+  border-radius: 18rpx;
+}
+.headInfo .channelInfo .textInfo{
+  height: 160rpx;
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+}
+.headInfo .channelInfo .textInfo text:first-child{
+  font-size: 48rpx;
+  font-weight: 600;
+  color: #FFFFFF;
+  line-height: 66rrpx;
+}
+.headInfo .channelInfo .textInfo text:last-child{
+  font-size: 30rpx;
+  font-weight: 500;
+  color: #FFFFFF;
+  line-height: 38rpx;
+  text-shadow: 0px 4rpx 8rpx rgba(0,0,0,0.5);
+  opacity: 0.8;
+}
+.headInfo>image{
+  position: absolute;
+}
+.headInfo .bgPic_1{
+  height: 48rpx;
+  top: 30rpx;
+  right: 30rpx;
+}
+.headInfo .bgPic_2{
+  height: 172rpx;
+  bottom: -6rpx;
+  left: 94rpx;
+}
+.headInfo .bgPic_3{
+  width: 100vw;
+  bottom: 0rpx;
+  left:0rpx;
+}
+.list{
+  padding: 0 6rpx;
+  overflow: auto;
+}
+.list .info{
+  margin: 40rpx 26rpx 0;
+  width: 192rpx;
+  float: left;
+}
+.list .info image{
+  height: 192rpx;
+  width: 192rpx;
+  border-radius: 18rpx;
+}
+.list .info text{
+  width: 192rpx;
+  height: 76rpx;
+  font-size: 30rpx;
+  font-weight: 400;
+  color: #353535;
+  line-height: 38rpx;
+  display:-webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp:2;
+  overflow:hidden;
+}