添加 设备与视片、个人中心页面

config/index.js

@@ -96,6 +96,7 @@ const config = {
     }
     }
   },
   },
   h5: {
   h5: {
+    esnextModules: ['taro-ui'],
     publicPath: '/',
     publicPath: '/',
     staticDirectory: 'static',
     staticDirectory: 'static',
     module: {
     module: {

package.json

@@ -46,6 +46,7 @@
     "redux-logger": "^3.0.6",
     "redux-logger": "^3.0.6",
     "redux-thunk": "^2.3.0",
     "redux-thunk": "^2.3.0",
     "taro-axios": "^0.5.0",
     "taro-axios": "^0.5.0",
+    "taro-ui": "^2.2.1",
     "tslib": "^1.8.0"
     "tslib": "^1.8.0"
   },
   },
   "devDependencies": {
   "devDependencies": {

src/api/common.ts

@@ -30,6 +30,11 @@ class UsersApi extends ApiClient {
   getFilmDetailInfo(id: string) {
   getFilmDetailInfo(id: string) {
     return this.request({ method: 'GET', url: `/template/get/film/info/${id}` })
     return this.request({ method: 'GET', url: `/template/get/film/info/${id}` })
   }
   }
+
+  /** 获取我的视片列表 */
+  getMyFilmsList(page: number) {
+    return this.request({ url: `/myfilm/get/list`, data: { p: page, c: 10 } })
+  }
 }
 }
 
 
 export default new UsersApi()
 export default new UsersApi()

src/app.tsx

@@ -33,13 +33,14 @@ class App extends Component {
    */
    */
   config: Config = {
   config: Config = {
     pages: [
     pages: [
+      'pages/home/device/index',
+      'pages/home/film/film_list/index',
+      'pages/home/user/index',
       'pages/home/tempaltes/film_detail',
       'pages/home/tempaltes/film_detail',
       'pages/home/tempaltes/detail',
       'pages/home/tempaltes/detail',
       'pages/home/tempaltes/index',
       'pages/home/tempaltes/index',
       'pages/home/index',
       'pages/home/index',
       'pages/index/index',
       'pages/index/index',
-      'pages/home/device/index',
-      'pages/home/user/index'
       // 'pages/home/tempaltes/detail'
       // 'pages/home/tempaltes/detail'
     ],
     ],
     window: {
     window: {

src/constants/styles/var.scss

-$bdColor: #f7f7f7;
+$bgColor: #f7f7f7;
 $text-color: #323233;
 $text-color: #323233;
 $input-color: #323233;
 $input-color: #323233;
 $primary-color: #1989fa;
 $primary-color: #1989fa;

src/pages/home/device/index.scss

+@import '@styles/var.scss';
+@import "~taro-ui/dist/style/components/tabs.scss";

src/pages/home/device/index.tsx

 import { ComponentClass } from 'react'
 import { ComponentClass } from 'react'
-import Taro, { Component, Config } from '@tarojs/taro'
+import FilmList from '../film/film_list/index1'
+import { AtTabs, AtTabsPane } from 'taro-ui'
 import { View, Text } from '@tarojs/components'
 import { View, Text } from '@tarojs/components'
-// import './Device.less'
+import Taro, { Component, Config } from '@tarojs/taro'
+import './index.scss'
 
 
 type PageStateProps = {}
 type PageStateProps = {}
 
 
@@ -10,7 +12,7 @@ type PageDispatchProps = {}
 type PageOwnProps = {}
 type PageOwnProps = {}
 
 
 type PageState = {
 type PageState = {
-  name: string
+  current: number
 }
 }
 
 
 type IProps = PageStateProps & PageDispatchProps & PageOwnProps
 type IProps = PageStateProps & PageDispatchProps & PageOwnProps
@@ -20,22 +22,34 @@ interface Device {
   state: PageState
   state: PageState
 }
 }
 
 
+const tabList = [{ title: '我的视片' }, { title: '我的设备' }]
 class Device extends Component {
 class Device extends Component {
   config: Config = {
   config: Config = {
-    navigationStyle: 'custom'
+    navigationBarTitleText: '设备与视片',
+    navigationStyle: process.env.TARO_ENV === 'rn' ? 'custom' : 'default'
   }
   }
   constructor(props) {
   constructor(props) {
     super(props)
     super(props)
     this.state = {
     this.state = {
-      name: '小红'
+      current: 0
     }
     }
   }
   }
 
 
+  changePage = value => {
+    this.setState({ current: value })
+  }
+
   render() {
   render() {
+    const { current } = this.state
     return (
     return (
-      <View className="Device">
-        <Text>hello Device</Text>
-      </View>
+      <AtTabs current={current} tabList={tabList} onClick={this.changePage}>
+        <AtTabsPane current={current} index={0}>
+          <FilmList />
+        </AtTabsPane>
+        <AtTabsPane current={current} index={1}>
+          <FilmList />
+        </AtTabsPane>
+      </AtTabs>
     )
     )
   }
   }
 }
 }

src/pages/home/film/film_list/index.scss

+@import '@styles/var.scss';
+
+.films {
+  width: 100%;
+  height: 100%;
+  background-color: $bgColor;
+}
+
+.films-item-wrapper {
+  padding: 20px;
+  display: flex;
+  margin-bottom: 40px;
+  flex-direction: row;
+  background-color: white;
+}
+
+.img-box {
+  width: 320px;
+}
+
+.films-item-img {
+  width: 100%;
+  height: 180px;
+}
+
+.films-item-info {
+  flex: 1;
+  display: flex;
+  padding-left: 20px;
+  flex-direction: column;
+}

src/pages/home/film/film_list/index.tsx

+import api from '@/api/index'
+import { ComponentClass } from 'react'
+import Taro, { Component, Config } from '@tarojs/taro'
+import { View, Text, ScrollView, Image } from '@tarojs/components'
+import './index.scss'
+
+type PageStateProps = {}
+
+type PageDispatchProps = {}
+
+type PageOwnProps = {}
+
+type PageState = {
+  page: number
+  count: number
+  flimListData: any[]
+}
+
+type IProps = PageStateProps & PageDispatchProps & PageOwnProps
+
+interface Films {
+  props: IProps
+  state: PageState
+}
+
+class Films extends Component {
+  config: Config = {
+    navigationBarTitleText: '我的视片'
+  }
+
+  constructor(props) {
+    super(props)
+    this.state = {
+      page: 1,
+      count: 0,
+      flimListData: []
+    }
+  }
+
+  async componentWillMount() {
+    try {
+      const { page } = this.state
+      const { count, list } = await api.common.getMyFilmsList(page)
+      this.setState({
+        count,
+        flimListData: list
+      })
+      // console.log({ res })
+    } catch (error) {
+      console.error(error)
+    }
+  }
+
+  shouldComponentUpdate(_nextProps, _nextState) {
+    const { flimListData } = this.state
+    const { flimListData: FD } = _nextState
+    return flimListData !== FD
+  }
+
+  render() {
+    const { flimListData } = this.state
+    // const {templateUrl} = flimListData
+    return (
+      <View className="films">
+        <ScrollView className="scroll-view">
+          {flimListData.map(item => (
+            <View className="films-item-wrapper" key={item.filmId}>
+              <View className="img-box">
+                <Image className="films-item-img" src={item.templateUrl} />
+              </View>
+              <View className="films-item-info">
+                <Text>{item.filmName}</Text>
+                <Text>播放设备数量：{item.equipmentCount}</Text>
+              </View>
+            </View>
+          ))}
+        </ScrollView>
+        {/* <Text className="films-count-bar">hello world</Text> */}
+        {/* <View className="scroll-wrapper">
+        </View> */}
+      </View>
+    )
+  }
+}
+export default Films as ComponentClass<PageOwnProps, PageState>

src/pages/home/film/film_list/index1.tsx

+import api from '@/api/index'
+import { ComponentClass } from 'react'
+import Taro, { Component, Config } from '@tarojs/taro'
+import { View, Text, ScrollView, Image } from '@tarojs/components'
+import './index.scss'
+
+type PageStateProps = {}
+
+type PageDispatchProps = {}
+
+type PageOwnProps = {}
+
+type PageState = {
+  page: number
+  count: number
+  flimListData: any[]
+}
+
+type IProps = PageStateProps & PageDispatchProps & PageOwnProps
+
+interface Films {
+  props: IProps
+  state: PageState
+}
+
+class Films extends Component {
+  config: Config = {
+    navigationBarTitleText: '我的视片'
+  }
+
+  constructor(props) {
+    super(props)
+    this.state = {
+      page: 1,
+      count: 0,
+      flimListData: []
+    }
+  }
+
+  async componentWillMount() {
+    try {
+      const { page } = this.state
+      const { count, list } = await api.common.getMyFilmsList(page)
+      this.setState({
+        count,
+        flimListData: list
+      })
+      // console.log({ res })
+    } catch (error) {
+      console.error(error)
+    }
+  }
+
+  shouldComponentUpdate(_nextProps, _nextState) {
+    const { flimListData } = this.state
+    const { flimListData: FD } = _nextState
+    return flimListData !== FD
+  }
+
+  render() {
+    const { flimListData } = this.state
+    // const {templateUrl} = flimListData
+    return (
+      <View className="films">
+        <ScrollView className="scroll-view">
+          {flimListData.map(item => (
+            <View className="films-item-wrapper" key={item.filmId}>
+              <View className="img-box">
+                <Image className="films-item-img" src={item.templateUrl} />
+              </View>
+              <View className="films-item-info">
+                <Text>{item.filmName}</Text>
+                <Text>播放设备数量：{item.equipmentCount}</Text>
+              </View>
+            </View>
+          ))}
+        </ScrollView>
+        {/* <Text className="films-count-bar">hello world</Text> */}
+        {/* <View className="scroll-wrapper">
+        </View> */}
+      </View>
+    )
+  }
+}
+export default Films as ComponentClass<PageOwnProps, PageState>

src/pages/home/tempaltes/conpoments/detail_top/index.scss

@@ -7,7 +7,7 @@
 
 
 .temp-top-info-bar {
 .temp-top-info-bar {
   height: 20px;
   height: 20px;
-  background-color: $bdColor;
+  background-color: $bgColor;
 }
 }
 
 
 .temp-top-text-wrapper {
 .temp-top-text-wrapper {

src/pages/home/user/index.scss

+@import '@styles/var.scss';
+
+.user {
+  width: 100%;
+  height: 100%;
+  background-color: $bgColor;
+}
+
+// .color-bar {
+//   height: 40px;
+//   background-color: $bgColor;
+// }
+
+.top-user-info {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  margin-bottom: 40px;
+  padding: 80px 0 40px 40px;
+  background-color: white;
+}
+
+.top-user-avatar {
+  width: 200px;
+  height: 200px;
+  border-radius: 100px;
+}
+
+.top-user-name {
+  margin-left: 40px;
+}
+
+.item-wrapper {
+  margin-bottom: 40px;
+  padding: 20px 20px 0 20px;
+  background-color: white;
+}
+
+.item-view {
+  padding-bottom: 20px;
+}
+
+.logout-btn-wrapper {
+  display: flex;
+  padding-top: 20px;
+  align-items: center;
+  flex-direction: row;
+  justify-content: center;
+}
+
+.logout-btn {
+  width: 500px;
+  font-size: 28px;
+}

src/pages/home/user/index.tsx

 import { ComponentClass } from 'react'
 import { ComponentClass } from 'react'
 import Taro, { Component, Config } from '@tarojs/taro'
 import Taro, { Component, Config } from '@tarojs/taro'
-import { View, Text } from '@tarojs/components'
+import { View, Text, Image, ScrollView, Button } from '@tarojs/components'
 // import './User.less'
 // import './User.less'
 
 
 type PageStateProps = {}
 type PageStateProps = {}
@@ -10,7 +10,8 @@ type PageDispatchProps = {}
 type PageOwnProps = {}
 type PageOwnProps = {}
 
 
 type PageState = {
 type PageState = {
-  name: string
+  nickName: string
+  avatarUrl: string
 }
 }
 
 
 type IProps = PageStateProps & PageDispatchProps & PageOwnProps
 type IProps = PageStateProps & PageDispatchProps & PageOwnProps
@@ -27,15 +28,65 @@ class User extends Component {
   constructor(props) {
   constructor(props) {
     super(props)
     super(props)
     this.state = {
     this.state = {
-      name: '小红'
+      nickName: '',
+      avatarUrl: ''
     }
     }
   }
   }
 
 
+  componentWillMount() {
+    this.getUserInfo()
+  }
+
+  async getUserInfo() {
+    if (process.env.TARO_ENV === 'weapp') {
+      const {
+        userInfo: { avatarUrl, nickName }
+      } = await Taro.getUserInfo()
+      this.setState({ avatarUrl, nickName })
+    }
+  }
+
+  shouldComponentUpdate(_nextPorps, _nextState) {
+    const { nickName, avatarUrl } = this.state
+    const { nickName: _nickName, avatarUrl: _avatarUrl } = _nextState
+    return _nickName !== nickName || _avatarUrl !== avatarUrl
+  }
+
   render() {
   render() {
+    const { avatarUrl, nickName } = this.state
     return (
     return (
-      <View className="User">
-        <Text>hello User</Text>
-      </View>
+      <ScrollView scrollY className="user">
+        <View className="top-user-info">
+          <Image className="top-user-avatar" src={avatarUrl} />
+          <Text className="top-user-name">{nickName}</Text>
+        </View>
+        <View className="item-wrapper">
+          <View className="item-view">
+            <Text>我的视片</Text>
+          </View>
+          <View className="item-view">
+            <Text>我的设备</Text>
+          </View>
+        </View>
+        <View className="item-wrapper">
+          <View className="item-view">
+            <Text>帮助</Text>
+          </View>
+        </View>
+        <View className="item-wrapper">
+          <View className="item-view">
+            <Text>我的视片</Text>
+          </View>
+          <View className="item-view">
+            <Text>我的设备</Text>
+          </View>
+        </View>
+        <View className="logout-btn-wrapper">
+          <Button className="logout-btn" type="primary">
+            退出登录
+          </Button>
+        </View>
+      </ScrollView>
     )
     )
   }
   }
 }
 }