Skip to content

visualcloud / Vmatrix-client-taro

Go to a project
Commit a4cdf55e by lirandong
Options

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

parent c483385b
Showing with 348 additions and 18 deletions
config/index.js
......@@ -96,6 +96,7 @@ const config = {
}
},
h5: {
esnextModules: ['taro-ui'],
publicPath: '/',
staticDirectory: 'static',
module: {
......
package.json
......@@ -46,6 +46,7 @@
"redux-logger": "^3.0.6",
"redux-thunk": "^2.3.0",
"taro-axios": "^0.5.0",
"taro-ui": "^2.2.1",
"tslib": "^1.8.0"
},
"devDependencies": {
......
src/api/common.ts
......@@ -30,6 +30,11 @@ class UsersApi extends ApiClient {
getFilmDetailInfo(id: string) {
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()
src/app.tsx
......@@ -33,13 +33,14 @@ class App extends Component {
*/
config: Config = {
pages: [
'pages/home/device/index',
'pages/home/film/film_list/index',
'pages/home/user/index',
'pages/home/tempaltes/film_detail',
'pages/home/tempaltes/detail',
'pages/home/tempaltes/index',
'pages/home/index',
'pages/index/index',
'pages/home/device/index',
'pages/home/user/index'
// 'pages/home/tempaltes/detail'
],
window: {
......
src/constants/styles/var.scss
$bdColor: #f7f7f7;
$bgColor: #f7f7f7;
$text-color: #323233;
$input-color: #323233;
$primary-color: #1989fa;
......
src/pages/home/device/index.scss 0 → 100644
@import '@styles/var.scss';
@import "~taro-ui/dist/style/components/tabs.scss";
src/pages/home/device/index.tsx
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 './Device.less'
import Taro, { Component, Config } from '@tarojs/taro'
import './index.scss'
type PageStateProps = {}
......@@ -10,7 +12,7 @@ type PageDispatchProps = {}
type PageOwnProps = {}
type PageState = {
name: string
current: number
}
type IProps = PageStateProps & PageDispatchProps & PageOwnProps
......@@ -20,22 +22,34 @@ interface Device {
state: PageState
}
const tabList = [{ title: '我的视片' }, { title: '我的设备' }]
class Device extends Component {
config: Config = {
navigationStyle: 'custom'
navigationBarTitleText: '设备与视片',
navigationStyle: process.env.TARO_ENV === 'rn' ? 'custom' : 'default'
}
constructor(props) {
super(props)
this.state = {
name: '小红'
current: 0
}
}
changePage = value => {
this.setState({ current: value })
}
render() {
const { current } = this.state
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 0 → 100644
@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 0 → 100644
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 0 → 100644
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 {
height: 20px;
background-color: $bdColor;
background-color: $bgColor;
}
.temp-top-text-wrapper {
......
src/pages/home/user/index.scss 0 → 100644
@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 Taro, { Component, Config } from '@tarojs/taro'
import { View, Text } from '@tarojs/components'
import { View, Text, Image, ScrollView, Button } from '@tarojs/components'
// import './User.less'
type PageStateProps = {}
......@@ -10,7 +10,8 @@ type PageDispatchProps = {}
type PageOwnProps = {}
type PageState = {
name: string
nickName: string
avatarUrl: string
}
type IProps = PageStateProps & PageDispatchProps & PageOwnProps
......@@ -27,15 +28,65 @@ class User extends Component {
constructor(props) {
super(props)
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() {
const { avatarUrl, nickName } = this.state
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>
)
}
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment