Skip to content

visualcloud / Vmatrix-client-taro

Go to a project
Commit daec53ea by hank
Options

list 修改

parent 183286c6
Showing with 204 additions and 42 deletions
src/actions/asyncCounter.ts
...@@ -17,7 +17,7 @@ export function getTempList(page: number) { ...@@ -17,7 +17,7 @@ export function getTempList(page: number) {
} }
/** 获取我的视片列表 */ /** 获取我的视片列表 */
export function getDeviceList(page: number) { export function getDeviceList(page: number, showTemplate: string = '') {
return async (dispatch, state) => { return async (dispatch, state) => {
const oldState = state().counter const oldState = state().counter
try { try {
......
src/api/common.ts
...@@ -179,6 +179,13 @@ class UsersApi extends ApiClient { ...@@ -179,6 +179,13 @@ class UsersApi extends ApiClient {
} }
}) })
} }
/** 获取日程列表 */
getScheduleList(page: number = 1, limit: number = 10) {
return this.request({
method: 'post',
url: `/myfilm/get/list?p=${page}&c=${limit}`
})
}
} }
export default new UsersApi() export default new UsersApi()
src/pages/home/film/film_list/index.scss
...@@ -5,6 +5,39 @@ ...@@ -5,6 +5,39 @@
height: 100%; height: 100%;
background-color: $bgColor; background-color: $bgColor;
.film-search-bar {
// height: 120px;
padding: 20px 24px;
background-color: white;
position: relative;
text-align: center;
.menu-all {
height: 37px;
width: 38px;
position: absolute;
left: 30px;
}
.type-tab {
width: 100%;
text-align: center;
font-size: 28px;
color: #969799;
.type-tab-item {
padding: 0 20px;
}
.type-tab-item-active {
font-size: 38px;
color: #000;
}
}
@include eject(box-sizing, border-box);
}
.scroll-view { .scroll-view {
height: 100%; height: 100%;
} }
......
src/pages/home/film/film_list/index.tsx
...@@ -2,7 +2,7 @@ import api from '@/api/index' ...@@ -2,7 +2,7 @@ import api from '@/api/index'
import { ComponentClass } from 'react' import { ComponentClass } from 'react'
import { AtSwipeAction } from 'taro-ui' import { AtSwipeAction } from 'taro-ui'
import { connect } from '@tarojs/redux' import { connect } from '@tarojs/redux'
import { View } from '@tarojs/components' import { View, Text } from '@tarojs/components'
import { showMyToast } from '@/common/utils' import { showMyToast } from '@/common/utils'
import ListView from '@/conpoments/list_view' import ListView from '@/conpoments/list_view'
import Taro, { Component } from '@tarojs/taro' import Taro, { Component } from '@tarojs/taro'
...@@ -31,7 +31,9 @@ export interface IMilmListItme { ...@@ -31,7 +31,9 @@ export interface IMilmListItme {
equipmentCount: number equipmentCount: number
} }
interface PageState {} interface PageState {
showTempalte: string
}
type IProps = PageStateProps & PageDispatchProps & PageOwnProps type IProps = PageStateProps & PageDispatchProps & PageOwnProps
...@@ -78,6 +80,11 @@ class Films extends Component { ...@@ -78,6 +80,11 @@ class Films extends Component {
} }
}) })
} }
typeChange(value) {
this.setState({
showTempalte: value
})
}
goDetail({ filmId }: IMilmListItme) { goDetail({ filmId }: IMilmListItme) {
Taro.navigateTo({ url: `/pages/home/tempaltes/film_detail?filmId=${filmId}` }) Taro.navigateTo({ url: `/pages/home/tempaltes/film_detail?filmId=${filmId}` })
...@@ -99,17 +106,56 @@ class Films extends Component { ...@@ -99,17 +106,56 @@ class Films extends Component {
shouldComponentUpdate(nextProps: IProps) { shouldComponentUpdate(nextProps: IProps) {
const { list } = this.props const { list } = this.props
const { showTempalte } = this.state
const { list: _list } = nextProps const { list: _list } = nextProps
return list !== _list return list !== _list || !!showTempalte
} }
render() { render() {
const { list, height, count } = this.props const { list, height, count } = this.props
let { showTempalte } = this.state
showTempalte = showTempalte || 'HORIZONTAL'
return ( return (
<View className="films"> <View className="films">
<View className="film-search-bar">
<View className="type-tab">
<Text
onClick={() => {
this.typeChange('HORIZONTAL')
}}
className={
showTempalte === 'HORIZONTAL'
? 'type-tab-item type-tab-item-active'
: 'type-tab-item'
}
>
横版
</Text>
<Text
onClick={() => {
this.typeChange('VERTICAL')
}}
className={
showTempalte === 'VERTICAL' ? 'type-tab-item type-tab-item-active' : 'type-tab-item'
}
>
竖版
</Text>
<Text
onClick={() => {
this.typeChange('OTHER')
}}
className={
showTempalte === 'OTHER' ? 'type-tab-item type-tab-item-active' : 'type-tab-item'
}
>
异形屏
</Text>
</View>
</View>
<ListView <ListView
count={count} count={count}
height={height} height={height && height - 60}
dataListLength={list.length} dataListLength={list.length}
pullingUp={done => this.onScrollToLower(done)} pullingUp={done => this.onScrollToLower(done)}
pullingDown={done => this.onDownRefresh(done)} pullingDown={done => this.onDownRefresh(done)}
......
src/pages/home/film/schedule_list/index.scss
...@@ -10,6 +10,36 @@ ...@@ -10,6 +10,36 @@
height: 100%; height: 100%;
} }
.schedule-list-item {
&-active {
height: 300px;
}
margin: 20px;
transition: height 1s ease-in-out;
height: 100px;
overflow: hidden;
display: block;
border: 1px solid #ffab20;
.top {
height: 100px;
display: flex;
align-items: center;
justify-content: space-between;
border: none;
padding: 0 30px;
.left {
padding-bottom: 10px;
}
}
.content {
display: none;
}
}
.schedule-list-add-btn { .schedule-list-add-btn {
right: 30px; right: 30px;
bottom: 200px; bottom: 200px;
......
src/pages/home/film/schedule_list/index.tsx
import api from '@/api/index' import api from '@/api/index'
import { ComponentClass } from 'react' import { ComponentClass } from 'react'
import { AtSwipeAction } from 'taro-ui' import { View, Text, Icon } from '@tarojs/components'
import { connect } from '@tarojs/redux'
import { View, Text } from '@tarojs/components'
import { showMyToast } from '@/common/utils' import { showMyToast } from '@/common/utils'
import ListView from '@/conpoments/list_view' import ListView from '@/conpoments/list_view'
import Taro, { Component } from '@tarojs/taro' import Taro, { Component } from '@tarojs/taro'
...@@ -31,7 +29,11 @@ export interface IMilmListItme { ...@@ -31,7 +29,11 @@ export interface IMilmListItme {
equipmentCount: number equipmentCount: number
} }
interface PageState {} interface PageState {
list: any[]
count: number
active: {}
}
type IProps = PageStateProps & PageDispatchProps & PageOwnProps type IProps = PageStateProps & PageDispatchProps & PageOwnProps
...@@ -40,20 +42,28 @@ interface Schedule { ...@@ -40,20 +42,28 @@ interface Schedule {
state: PageState state: PageState
} }
@connect(
({ counter }) => {
const { list, count } = counter.deviceData
return { list, count }
},
dispacth => ({
getDeviceListData(page: number) {
dispacth(getDeviceList(page))
}
})
)
class Schedule extends Component { class Schedule extends Component {
protected page = 1 protected page = 1
constructor(props) {
super(props)
this.state = {
count: 0,
active: {},
list: [
{
filmId: '123',
filmName: '123',
templateUrl: ''
},
{
filmId: '123',
filmName: '123',
templateUrl: ''
}
]
}
}
async componentWillMount() { async componentWillMount() {
this.getData() this.getData()
} }
...@@ -61,7 +71,22 @@ class Schedule extends Component { ...@@ -61,7 +71,22 @@ class Schedule extends Component {
this.getData() this.getData()
} }
async getData() { async getData() {
this.props.getDeviceListData(this.page) const { list } = this.state
api.common.getScheduleList(this.page).then(res => {
const { count } = res
const newList = res.list
if (this.page === 1) {
this.setState({
list: newList,
count
})
} else {
this.setState({
list: list.concat(newList),
count
})
}
})
} }
async handleItem({ filmId }: IMilmListItme) { async handleItem({ filmId }: IMilmListItme) {
...@@ -90,6 +115,19 @@ class Schedule extends Component { ...@@ -90,6 +115,19 @@ class Schedule extends Component {
done() done()
}, 500) }, 500)
} }
changeActive(index) {
const { active } = this.state
let myActive = active
if (myActive[index]) {
delete myActive[index]
} else {
myActive[index] = true
}
this.setState({
active: myActive
})
console.log(myActive)
}
async onScrollToLower(done: any) { async onScrollToLower(done: any) {
this.page++ this.page++
...@@ -97,18 +135,13 @@ class Schedule extends Component { ...@@ -97,18 +135,13 @@ class Schedule extends Component {
done() done()
} }
shouldComponentUpdate(nextProps: IProps) {
const { list } = this.props
const { list: _list } = nextProps
return list !== _list
}
addSchedule() { addSchedule() {
Taro.navigateTo({ url: `/pages/home/film/schedule_add/index?type=add` }) Taro.navigateTo({ url: `/pages/home/film/schedule_add/index?type=add` })
} }
render() { render() {
const { list, height, count } = this.props const { height } = this.props
const { list, count, active } = this.state
return ( return (
<View className="films"> <View className="films">
<ListView <ListView
...@@ -118,23 +151,36 @@ class Schedule extends Component { ...@@ -118,23 +151,36 @@ class Schedule extends Component {
pullingUp={done => this.onScrollToLower(done)} pullingUp={done => this.onScrollToLower(done)}
pullingDown={done => this.onDownRefresh(done)} pullingDown={done => this.onDownRefresh(done)}
> >
{list.map(item => ( {list.map((item, index) => (
<AtSwipeAction <View
autoClose
key={item.filmId} key={item.filmId}
onClick={() => this.handleItem(item)} className={
options={[ active[index]
{ ? 'schedule-list-item schedule-list-item-active'
text: '删除', : 'schedule-list-item'
style: { }
backgroundColor: '#FF4949'
}
}
]}
> >
<FilmListItem onClick={() => this.goDetail(item)} {...item} /> <View
</AtSwipeAction> className="top"
onClick={() => {
this.changeActive(index)
}}
>
<View className="left">
<View className="name">任务名称</View>
<View className="update-time">{new Date().toLocaleDateString()}</View>
</View>
<Icon className="icon" size="30" type="success" />
</View>
<View className="content">
<FilmListItem {...item} />
</View>
</View>
))} ))}
<View className="schedule-list-item">121323</View>
<View className="schedule-list-item">121323</View>
<View className="schedule-list-item">121323</View>
</ListView> </ListView>
<View className="schedule-list-add-btn"> <View className="schedule-list-add-btn">
<Text className="icon" onClick={this.addSchedule}> <Text className="icon" onClick={this.addSchedule}>
......
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