Browse Source

直播功能放出

dev01 2 years ago
parent
commit
85ecdd4b9e

+ 53 - 43
project.config.json

@@ -1,45 +1,55 @@
 {
-  "miniprogramRoot": "dist/",
-  "projectname": "myApp",
-  "description": "我的项目",
-  "appid": "wxcf634bc22ab19eac",
-  "setting": {
-    "urlCheck": false,
-    "es6": false,
-    "enhance": false,
-    "postcss": false,
-    "preloadBackgroundData": false,
-    "minified": false,
-    "newFeature": false,
-    "coverView": true,
-    "nodeModules": false,
-    "autoAudits": false,
-    "showShadowRootInWxmlPanel": true,
-    "scopeDataCheck": false,
-    "uglifyFileName": false,
-    "checkInvalidKey": true,
-    "checkSiteMap": true,
-    "uploadWithSourceMap": true,
-    "compileHotReLoad": false,
-    "useMultiFrameRuntime": true,
-    "useApiHook": true,
-    "useApiHostProcess": true,
-    "babelSetting": {
-      "ignore": [],
-      "disablePlugins": [],
-      "outputPath": ""
+    "miniprogramRoot": "dist/",
+    "projectname": "myApp",
+    "description": "我的项目",
+    "appid": "wxcf634bc22ab19eac",
+    "setting": {
+        "urlCheck": false,
+        "es6": false,
+        "enhance": false,
+        "postcss": false,
+        "preloadBackgroundData": false,
+        "minified": false,
+        "newFeature": false,
+        "coverView": true,
+        "nodeModules": false,
+        "autoAudits": false,
+        "showShadowRootInWxmlPanel": true,
+        "scopeDataCheck": false,
+        "uglifyFileName": false,
+        "checkInvalidKey": true,
+        "checkSiteMap": true,
+        "uploadWithSourceMap": true,
+        "compileHotReLoad": false,
+        "useMultiFrameRuntime": true,
+        "useApiHook": true,
+        "useApiHostProcess": true,
+        "babelSetting": {
+            "ignore": [],
+            "disablePlugins": [],
+            "outputPath": ""
+        },
+        "enableEngineNative": false,
+        "bundle": false,
+        "useIsolateContext": true,
+        "useCompilerModule": true,
+        "userConfirmedUseCompilerModuleSwitch": false,
+        "userConfirmedBundleSwitch": false,
+        "packNpmManually": false,
+        "packNpmRelationList": [],
+        "minifyWXSS": true
     },
-    "enableEngineNative": false,
-    "bundle": false,
-    "useIsolateContext": true,
-    "useCompilerModule": true,
-    "userConfirmedUseCompilerModuleSwitch": false,
-    "userConfirmedBundleSwitch": false,
-    "packNpmManually": false,
-    "packNpmRelationList": [],
-    "minifyWXSS": true
-  },
-  "compileType": "miniprogram",
-  "condition": {},
-  "cloudbaseRoot": "cloudbase/"
-}
+    "compileType": "miniprogram",
+    "condition": {},
+    "cloudbaseRoot": "cloudbase/",
+    "libVersion": "2.25.4",
+    "srcMiniprogramRoot": "dist/",
+    "packOptions": {
+        "ignore": [],
+        "include": []
+    },
+    "editorSetting": {
+        "tabIndent": "insertSpaces",
+        "tabSize": 4
+    }
+}

+ 16 - 9
src/app.config.js

@@ -18,17 +18,24 @@ export default {
   usingComponents: Object.assign(useGlobalIconFont()),
   tabBar: {
     custom: true,
-    list: [{
-      pagePath: "pages/index/index",
-      text: "首页"
-    },{
-      pagePath: "pages/user/index",
-      text: "我的",
-    }]
+    list: [
+      {
+        pagePath: "pages/index/index",
+        text: "首页"
+      },
+      {
+        pagePath: "pages/liveList/index",
+        text: "直播",
+      },
+      {
+        pagePath: "pages/user/index",
+        text: "我的",
+      }
+    ]
   },
   // debug:true,
-  networkTimeout:{
-    request:1000
+  networkTimeout: {
+    request: 1000
   },
   plugins: {
     "live-player-plugin": {

BIN
src/custom-tab-bar/image/liveb.png


BIN
src/custom-tab-bar/image/selectLiveb.png


+ 45 - 43
src/custom-tab-bar/index.jsx

@@ -1,32 +1,34 @@
-import React,{Component} from 'react';
+import React, { Component } from 'react';
 import Taro from '@tarojs/taro';
-import { View , CoverImage,CoverView } from '@tarojs/components'
+import { View, CoverImage, CoverView } from '@tarojs/components'
 import './index.less'
 
 import icon_home from './image/home.png';
+import icon_liveb from './image/liveb.png';
 import icon_user from './image/user.png';
 import icon_selectUser from './image/selectUser.png';
+import icon_selectLiveb from './image/selectLiveb.png';
 import icon_selectHome from './image/selectHome.png';
-import {connect} from "react-redux";
-import {add, asyncAdd, minus} from "../actions/counter";
+import { connect } from "react-redux";
+import { add, asyncAdd, minus } from "../actions/counter";
 
 @connect(({ counter }) => ({
   counter
 }), (dispatch) => ({
-  add () {
+  add() {
     dispatch(add())
   },
-  dec () {
+  dec() {
     dispatch(minus())
   },
-  asyncAdd () {
+  asyncAdd() {
     dispatch(asyncAdd())
   }
 }))
-class CustomTabBar extends Component{
+class CustomTabBar extends Component {
   constructor(props) {
     super(props);
-    this.state={
+    this.state = {
       color: "#9C9ABB",
       selectedColor: "#76D3FF",
       list: [
@@ -36,12 +38,12 @@ class CustomTabBar extends Component{
           selectedIconPath: icon_selectHome,
           text: "首页"
         },
-        // {
-        //   pagePath: "/pages/liveList/index",
-        //   iconPath: icon_home,
-        //   selectedIconPath: icon_selectHome,
-        //   text: "直播"
-        // },
+        {
+          pagePath: "/pages/liveList/index",
+          iconPath: icon_liveb,
+          selectedIconPath: icon_selectLiveb,
+          text: "直播"
+        },
         {
           pagePath: "/pages/user/index",
           iconPath: icon_user,
@@ -53,41 +55,41 @@ class CustomTabBar extends Component{
     this.switchTab = this.switchTab.bind(this);
   }
 
-  switchTab(value,key) {
+  switchTab(value, key) {
     Taro.switchTab({
       url: value.pagePath
     })
   }
 
   render() {
-    return(
+    return (
       <View className='custom-tab-bar'>
-          {/*<View  className='tab-bar-border'/>*/}
-          {
-            this.state.list.map((v,key)=>(
-              <View key={key} className='tab-bar-item' dataPath={v.pagePath} dataIndex={key} onClick={()=>{
-                this.switchTab(v,key);
-              }}>
-                <CoverImage className='coverImage' src={this.props.counter.num === key ? v.selectedIconPath : v.iconPath}/>
-                <View className='View'  style={{color:this.props.counter.num === key ? this.state.selectedColor : this.state.color}}>
-                  {v.text}
-                </View>
-                {/*{*/}
-                {/*  key !== 1 ?*/}
-                {/*    <>*/}
-                {/*      <CoverImage className='coverImage' src={this.props.counter.num === key ? v.selectedIconPath : v.iconPath}/>*/}
-                {/*      <View className='View'  style={{color:this.props.counter.num === key ? this.state.selectedColor : this.state.color}}>*/}
-                {/*        {v.text}*/}
-                {/*      </View>*/}
-                {/*    </>:*/}
-                {/*    <View className='center'>*/}
-                {/*      <CoverImage className='centerCoverImage' src={this.props.counter.num === key ? v.selectedIconPath : v.iconPath}/>*/}
-                {/*      <View className='View'  style={{color:this.props.counter.num === key ? this.state.selectedColor : this.state.color}}>{v.text}</View>*/}
-                {/*    </View>*/}
-                {/*}*/}
-              </View >
-            ))
-          }
+        {/*<View  className='tab-bar-border'/>*/}
+        {
+          this.state.list.map((v, key) => (
+            <View key={key} className='tab-bar-item' dataPath={v.pagePath} dataIndex={key} onClick={() => {
+              this.switchTab(v, key);
+            }}>
+              <CoverImage className='coverImage' src={this.props.counter.num === key ? v.selectedIconPath : v.iconPath} />
+              <View className='View' style={{ color: this.props.counter.num === key ? this.state.selectedColor : this.state.color }}>
+                {v.text}
+              </View>
+              {/*{*/}
+              {/*  key !== 1 ?*/}
+              {/*    <>*/}
+              {/*      <CoverImage className='coverImage' src={this.props.counter.num === key ? v.selectedIconPath : v.iconPath}/>*/}
+              {/*      <View className='View'  style={{color:this.props.counter.num === key ? this.state.selectedColor : this.state.color}}>*/}
+              {/*        {v.text}*/}
+              {/*      </View>*/}
+              {/*    </>:*/}
+              {/*    <View className='center'>*/}
+              {/*      <CoverImage className='centerCoverImage' src={this.props.counter.num === key ? v.selectedIconPath : v.iconPath}/>*/}
+              {/*      <View className='View'  style={{color:this.props.counter.num === key ? this.state.selectedColor : this.state.color}}>{v.text}</View>*/}
+              {/*    </View>*/}
+              {/*}*/}
+            </View >
+          ))
+        }
       </View >
     )
   }

+ 3 - 3
src/pages/index/index.less

@@ -34,7 +34,7 @@
   .list{
     padding: 0 23px 0 23px;
     .item{
-      border-radius: 6px;
+      border-radius: 10px;
       padding: 21px 11px 31px 57px;
       background: #FFFFFF;
       display: flex;
@@ -71,11 +71,11 @@
         .amount{
           display: flex;
           flex-flow: row nowrap;
-          align-items: flex-end;
+          align-items: baseline;
           font-size: 28px;
           font-weight: bolder;
           color: #FE3371;
-          padding-left: 35px;
+          // padding-left: 35px;
           .money{
             padding-left: 10px;
             font-size: 20px;

+ 36 - 27
src/pages/liveList/index.jsx

@@ -1,26 +1,35 @@
 import { Component } from 'react';
 import Taro from '@tarojs/taro';
+import { connect } from 'react-redux'
 import { View, Image } from '@tarojs/components'
+import { set } from '../../actions/counter'
 import { getLiveList } from '../../utils/servers/servers'
 import dayjs from 'dayjs';
 
-import ListBottomStart  from '../../components/common/listBottomStart';
+import ListBottomStart from '../../components/common/listBottomStart';
 
 import './index.less';
 
 import background from '../../assets/images/background.png';
 import NavBar from "../../components/NavBar";
 
+@connect(({ counter }) => ({
+  counter
+}), (dispatch) => ({
+  set(value) {
+    dispatch(set(value))
+  }
+}))
 class LiveList extends Component {
 
   constructor(props) {
     super(props);
-    this.state={
+    this.state = {
       list: [],
       pageNo: 0,
       listState: 'LOADING',
     }
-    this.getLiveList= this.getLiveList.bind(this);
+    this.getLiveList = this.getLiveList.bind(this);
   }
 
   async componentDidShow() {
@@ -31,15 +40,15 @@ class LiveList extends Component {
     await this.getLiveList();
   }
 
-  onPullDownRefresh(){
+  onPullDownRefresh() {
     this.getLiveList();
   }
 
-  onReachBottom(){
-    this.getLiveList(this.state.pageNo+1);
+  onReachBottom() {
+    this.getLiveList(this.state.pageNo + 1);
   }
 
-  async getLiveList (pageNo = 1){
+  async getLiveList(pageNo = 1) {
     this.setState({
       listState: 'LOADING'
     })
@@ -47,30 +56,30 @@ class LiveList extends Component {
       pageNo: pageNo,
       pageSize: 10,
     });
-    if(msg.error.length === 0){
-      if(msg.data.totalCount === 0){
+    if (msg.error.length === 0) {
+      if (msg.data.totalCount === 0) {
         this.setState({
           listState: 'NO_DATA'
         })
-      }else if(msg.data.totalCount === this.state.list.length && pageNo !== 1){
-        Taro.showToast({title:'没有更多数据了',icon:'none'});
+      } else if (msg.data.totalCount === this.state.list.length && pageNo !== 1) {
+        Taro.showToast({ title: '没有更多数据了', icon: 'none' });
         this.setState({
           listState: 'NO_MORE_DATA'
         })
-      }else{
+      } else {
         this.setState({
-          list:pageNo === 1 ? msg.data.list : this.state.list.concat(msg.data.list),
+          list: pageNo === 1 ? msg.data.list : this.state.list.concat(msg.data.list),
           pageNo: msg.data.pageNo
-        },()=>{
-          if(msg.data.totalCount === this.state.list.length){
+        }, () => {
+          if (msg.data.totalCount === this.state.list.length) {
             this.setState({
               listState: 'NO_MORE_DATA'
             })
           }
         })
       }
-    }else{
-      Taro.showToast({title:msg.error[0].message,icon:'none'});
+    } else {
+      Taro.showToast({ title: msg.error[0].message, icon: 'none' });
       this.setState({
         listState: msg.error[0].field === '403' ? 'NO_DATA' : 'RELOAD'
       })
@@ -78,23 +87,23 @@ class LiveList extends Component {
     Taro.stopPullDownRefresh();
   }
 
-  render () {
+  render() {
     return (
       <View className='livePlayerPage'>
         <NavBar
           extClass='NavBar'
           title='直播'
           background='#7ac7ff'
-          onHome={()=>{}}
+          onHome={() => { }}
         />
-        <Image src={background} className='background'/>
+        <Image src={background} className='background' />
         <View className='title'>推荐</View>
         <View className='list'>
           {
-            this.state.list.map((v,k)=>(
-              <View key={k} className='item' onClick={()=>{
+            this.state.list.map((v, k) => (
+              <View key={k} className='item' onClick={() => {
                 let customParams = encodeURIComponent(JSON.stringify({ path: 'pages/liveRoom/index', pid: 1 }));
-                let url = 'plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?room_id='+v.roomid+'&custom_params='+customParams;
+                let url = 'plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?room_id=' + v.roomid + '&custom_params=' + customParams;
                 Taro.navigateTo({
                   url
                 })
@@ -115,15 +124,15 @@ class LiveList extends Component {
                     {dayjs.unix(v.start_time).format('YYYY-MM-DD HH:mm:ss')}
                   </View>
                 </View>
-                <Image className='thumbnailUrl' src={v.feeds_img} resizeMode='center'/>
+                <Image className='thumbnailUrl' src={v.feeds_img} resizeMode='center' />
               </View>
             ))
           }
           <ListBottomStart
             state={this.state.listState}
-            reload={()=>{
-              this.getLiveList(this.state.pageNo+1);
-            }}/>
+            reload={() => {
+              this.getLiveList(this.state.pageNo + 1);
+            }} />
         </View>
       </View>
     )

+ 3 - 3
src/pages/liveList/index.less

@@ -34,7 +34,7 @@
   .list{
     padding: 0 23px 0 23px;
     .item{
-      border-radius: 6px;
+      border-radius: 10px;
       padding: 21px 11px 31px 57px;
       background: #FFFFFF;
       display: flex;
@@ -71,11 +71,11 @@
         .amount{
           display: flex;
           flex-flow: row nowrap;
-          align-items: flex-end;
+          align-items: baseline;
           font-size: 28px;
           font-weight: bolder;
           color: #FE3371;
-          padding-left: 35px;
+          // padding-left: 35px;
           .money{
             padding-left: 10px;
             font-size: 20px;

+ 1 - 1
src/pages/user/index.jsx

@@ -39,7 +39,7 @@ class Index extends Component {
   }
 
   async componentDidShow() {
-    this.props.set(1);
+    this.props.set(2);
     this.setState({
       userInfor:Taro.getStorageSync('userInfor') || '',
       token: Taro.getStorageSync('token') || '',

+ 55 - 30
src/pages/user/index.less

@@ -1,16 +1,19 @@
-.userPage{
+.userPage {
   position: relative;
   min-height: 100vh;
   background: #F5F5F5;
   z-index: 1;
   padding-bottom: 202px;
-  .NavBar{
-    .lxy-nav-bar__left{
+
+  .NavBar {
+    .lxy-nav-bar__left {
       display: none;
     }
-    .lxy-nav-bar__center{
+
+    .lxy-nav-bar__center {
       padding-left: 0 !important;
-      text{
+
+      text {
         padding-left: 25px !important;
         margin-right: auto;
         color: #FFFFFF;
@@ -18,43 +21,50 @@
       }
     }
   }
-  .background{
+
+  .background {
     position: absolute;
     top: 0;
     z-index: -1;
     width: 100%;
     height: 400px;
   }
-  .userInfor{
+
+  .userInfor {
     display: flex;
     flex-flow: row nowrap;
     align-items: center;
     padding: 0 0 36px 25px;
-    .avatar{
+
+    .avatar {
       width: 104px;
       height: 104px;
       border-radius: 104px;
       overflow: hidden;
-      display:flex;
+      display: flex;
       align-items: center;
       justify-content: center;
       background: #989595;
-      .login{
+
+      .login {
         width: 100%;
         height: 100%;
       }
-      .noLogin{
+
+      .noLogin {
         width: 68px;
         height: 68px;
       }
     }
-    .nickName{
+
+    .nickName {
       padding-left: 19px;
       font-size: 25px;
       color: #FFFFFF;
       align-self: flex-start;
     }
-    .bindPhone{
+
+    .bindPhone {
       padding: 10px 15px;
       border: 1px solid #2f33e866;
       border-radius: 7px;
@@ -66,48 +76,60 @@
       margin-right: 23px;
     }
   }
-  .list{
-    padding: 0 154px 0 66px;
-    .item{
+
+  .list {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    .item {
+      width: 80%;
       background: #FFFFFF;
-      border-radius: 6px;
-      padding: 47px 22px 16px 16px;
+      border-radius: 10px;
+      padding: 20px;
       display: flex;
       flex-flow: row nowrap;
       align-items: center;
       margin-bottom: 64px;
-      .block{
+
+      .block {
         display: inline-table;
         width: 29px;
         height: 28px;
-        .top{
+
+        .top {
           height: 10px;
           background: #CF91FA;
         }
-        .bottom{
+
+        .bottom {
           display: flex;
           flex-flow: row nowrap;
           height: 18px;
-          .left{
+
+          .left {
             flex: 1;
             background: #C6106A;
             opacity: 0.6;
           }
-          .right{
+
+          .right {
             flex: 1;
             background: #912FFF;
             opacity: 0.6;
           }
         }
       }
-      .infor{
+
+      .infor {
         padding-left: 20px;
-        .title{
+
+        .title {
           font-size: 24px;
           color: #000000;
           padding-bottom: 12px;
         }
-        .content{
+
+        .content {
           font-size: 18px;
           display: inline-block;
           background: #EFF3FF;
@@ -117,19 +139,22 @@
           border: 1px #A7B6F1 solid;
         }
       }
-      .moneyInfor{
+
+      .moneyInfor {
         margin-left: auto;
         text-align: right;
-        .money{
+
+        .money {
           font-size: 27px;
           color: #000000;
           padding-bottom: 10px;
         }
-        .time{
+
+        .time {
           font-size: 16px;
           color: #000000;
         }
       }
     }
   }
-}
+}