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) {
}
/** 获取我的视片列表 */
export function getDeviceList(page: number) {
export function getDeviceList(page: number, showTemplate: string = '') {
return async (dispatch, state) => {
const oldState = state().counter
try {
......
src/api/common.ts
......@@ -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()
src/pages/home/film/film_list/index.scss
......@@ -5,6 +5,39 @@
height: 100%;
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 {
height: 100%;
}
......
src/pages/home/film/film_list/index.tsx
......@@ -2,7 +2,7 @@ import api from '@/api/index'
import { ComponentClass } from 'react'
import { AtSwipeAction } from 'taro-ui'
import { connect } from '@tarojs/redux'
import { View } from '@tarojs/components'
import { View, Text } from '@tarojs/components'
import { showMyToast } from '@/common/utils'
import ListView from '@/conpoments/list_view'
import Taro, { Component } from '@tarojs/taro'
......@@ -31,7 +31,9 @@ export interface IMilmListItme {
equipmentCount: number
}
interface PageState {}
interface PageState {
showTempalte: string
}
type IProps = PageStateProps & PageDispatchProps & PageOwnProps
......@@ -78,6 +80,11 @@ class Films extends Component {
}
})
}
typeChange(value) {
this.setState({
showTempalte: value
})
}
goDetail({ filmId }: IMilmListItme) {
Taro.navigateTo({ url: `/pages/home/tempaltes/film_detail?filmId=${filmId}` })
......@@ -99,17 +106,56 @@ class Films extends Component {
shouldComponentUpdate(nextProps: IProps) {
const { list } = this.props
const { showTempalte } = this.state
const { list: _list } = nextProps
return list !== _list
return list !== _list || !!showTempalte
}
render() {
const { list, height, count } = this.props
let { showTempalte } = this.state
showTempalte = showTempalte || 'HORIZONTAL'
return (
<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
count={count}
height={height}
height={height && height - 60}
dataListLength={list.length}
pullingUp={done => this.onScrollToLower(done)}
pullingDown={done => this.onDownRefresh(done)}
......
src/pages/home/film/schedule_list/index.scss
......@@ -10,6 +10,36 @@
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 {
right: 30px;
bottom: 200px;
......
src/pages/home/film/schedule_list/index.tsx
import api from '@/api/index'
import { ComponentClass } from 'react'
import { AtSwipeAction } from 'taro-ui'
import { connect } from '@tarojs/redux'
import { View, Text } from '@tarojs/components'
import { View, Text, Icon } from '@tarojs/components'
import { showMyToast } from '@/common/utils'
import ListView from '@/conpoments/list_view'
import Taro, { Component } from '@tarojs/taro'
......@@ -31,7 +29,11 @@ export interface IMilmListItme {
equipmentCount: number
}
interface PageState {}
interface PageState {
list: any[]
count: number
active: {}
}
type IProps = PageStateProps & PageDispatchProps & PageOwnProps
......@@ -40,20 +42,28 @@ interface Schedule {
state: PageState
}
@connect(
({ counter }) => {
const { list, count } = counter.deviceData
return { list, count }
},
dispacth => ({
getDeviceListData(page: number) {
dispacth(getDeviceList(page))
}
})
)
class Schedule extends Component {
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() {
this.getData()
}
......@@ -61,7 +71,22 @@ class Schedule extends Component {
this.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) {
......@@ -90,6 +115,19 @@ class Schedule extends Component {
done()
}, 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) {
this.page++
......@@ -97,18 +135,13 @@ class Schedule extends Component {
done()
}
shouldComponentUpdate(nextProps: IProps) {
const { list } = this.props
const { list: _list } = nextProps
return list !== _list
}
addSchedule() {
Taro.navigateTo({ url: `/pages/home/film/schedule_add/index?type=add` })
}
render() {
const { list, height, count } = this.props
const { height } = this.props
const { list, count, active } = this.state
return (
<View className="films">
<ListView
......@@ -118,23 +151,36 @@ class Schedule extends Component {
pullingUp={done => this.onScrollToLower(done)}
pullingDown={done => this.onDownRefresh(done)}
>
{list.map(item => (
<AtSwipeAction
autoClose
{list.map((item, index) => (
<View
key={item.filmId}
onClick={() => this.handleItem(item)}
options={[
{
text: '删除',
style: {
backgroundColor: '#FF4949'
}
}
]}
className={
active[index]
? 'schedule-list-item schedule-list-item-active'
: 'schedule-list-item'
}
>
<FilmListItem onClick={() => this.goDetail(item)} {...item} />
</AtSwipeAction>
<View
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>
<View className="schedule-list-add-btn">
<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