Skip to content

visualcloud / Vmatrix-client-taro

Go to a project
Commit 2bac6b07 by hank
Options

日程模块ui

parent 6c0dac39
Showing with 215 additions and 134 deletions
src/common/utils.ts
...@@ -140,6 +140,7 @@ export function strToAb(id: number, str: string) { ...@@ -140,6 +140,7 @@ export function strToAb(id: number, str: string) {
} }
let advertisData = '' let advertisData = ''
let advertisData2 = ''
type ICallBack = { type ICallBack = {
page: number page: number
state: number state: number
...@@ -161,10 +162,13 @@ export function analysisPage(value: arrayBuffer): Promise<ICallBack> { ...@@ -161,10 +162,13 @@ export function analysisPage(value: arrayBuffer): Promise<ICallBack> {
if ((state & 0x40) !== 0) { if ((state & 0x40) !== 0) {
// 新包 // 新包
advertisData = getBLEData(value) advertisData = getBLEData(value)
// advertisData2 = String.fromCharCode.apply(null, new Uint8Array(value))
} else { } else {
// 累加包 // 累加包
advertisData = getBLEData(value) + advertisData advertisData = getBLEData(value) + advertisData
// advertisData2 = String.fromCharCode.apply(null, new Uint8Array(value)) + advertisData2
} }
console.log('累加结果', advertisData)
resolve({ page, advertisData, state }) resolve({ page, advertisData, state })
// callBack({ page, advertisData, state }) // callBack({ page, advertisData, state })
} else { } else {
......
src/conpoments/film_list_item/index.tsx
...@@ -58,7 +58,7 @@ class FilmListItem extends Component { ...@@ -58,7 +58,7 @@ class FilmListItem extends Component {
</View> </View>
<View className="films-item-info"> <View className="films-item-info">
<Text className="films-item-info-name">{filmName}</Text> <Text className="films-item-info-name">{filmName}</Text>
<Text className="films-item-info-detail">{filmDescribe}</Text> <Text className="films-item-info-detail">{filmDescribe ? filmDescribe : '无'}</Text>
<View className="films-item-info-time"> <View className="films-item-info-time">
<Text className="films-item-info-count">{updateTime}</Text> <Text className="films-item-info-count">{updateTime}</Text>
{isChoose ? null : ( {isChoose ? null : (
......
src/conpoments/schedule_item/index.scss
...@@ -2,53 +2,77 @@ ...@@ -2,53 +2,77 @@
.films-item { .films-item {
padding: 20px; padding: 20px;
padding-right: 10px;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
background-color: white; background-color: white;
margin-bottom: 20px;
border-radius: 5px;
&-img-box { &-img-box {
width: 320px; background: $bgColor;
width: 237px;
height: 237px;
.films-item-img { .films-item-img {
width: 100%; width: 100%;
height: 180px; height: 100%;
} }
.films-item-img2 { .films-item-img2 {
width: 100%; width: 100%;
height: 568px; height: 100%;
} }
} }
&-info { &-info {
flex: 1; flex: 1;
display: flex; display: flex;
padding-left: 20px; padding-left: 56px;
flex-direction: column; flex-direction: column;
&-name { &-name {
font-size: 32px; font-size: 30px;
color: #333; font-family: PingFangSC-Regular, PingFang SC;
margin-bottom: 30px; font-weight: 400;
color: rgba(0, 0, 0, 1);
margin-bottom: 20px;
} }
&-count { &-count {
font-size: 22px; font-size: 28px;
color: #666; font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: rgba(153, 153, 153, 1);
} }
} }
.start-name { .start-name {
font-size: 32px; font-size: 28px;
color: #333; font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: rgba(153, 153, 153, 1);
margin-bottom: 20px;
}
.picker-container {
width: 397px;
height: 64px;
background: rgba(242, 242, 242, 1);
border-radius: 11px;
} }
.picker { .picker {
width: 200px; width: 397px;
border: 1px solid #333; height: 64px;
padding: 10px; background: rgba(242, 242, 242, 1);
border-radius: 11px;
line-height: 64px;
font-size: 26px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: rgba(64, 64, 64, 1);
letter-spacing: 2px;
text-align: center; text-align: center;
font-size: 22px;
color: #333;
} }
} }
src/conpoments/schedule_item/index.tsx
...@@ -50,6 +50,7 @@ class ScheduleItem extends Component { ...@@ -50,6 +50,7 @@ class ScheduleItem extends Component {
className={ className={
templateShow === 'HORIZONTAL' ? 'films-item-img' : 'films-item-img films-item-img2' templateShow === 'HORIZONTAL' ? 'films-item-img' : 'films-item-img films-item-img2'
} }
mode="aspectFit"
src={templateUrl.split(',')[0]} src={templateUrl.split(',')[0]}
/> />
</View> </View>
...@@ -60,10 +61,15 @@ class ScheduleItem extends Component { ...@@ -60,10 +61,15 @@ class ScheduleItem extends Component {
{isList ? ( {isList ? (
<View className="picker">当前选择：{this.state.time}</View> <View className="picker">当前选择：{this.state.time}</View>
) : ( ) : (
<Picker mode="time" onChange={this.onTimeChange} value={time ? time : '00:00'}> <Picker
<View className="picker">{time ? time : '选择时间'}</View> mode="time"
</Picker> className="piker-container"
)} onChange={this.onTimeChange}
value={time ? time : '00:00'}
>
<View className="picker">{time ? time : '选择时间'}</View>
</Picker>
)}
</View> </View>
</View> </View>
</View> </View>
......
src/pages/home/device/index.scss
...@@ -10,6 +10,6 @@ ...@@ -10,6 +10,6 @@
} }
.at-tabs__item--active { .at-tabs__item--active {
color: #ff9110 !important; color: #000 !important;
font-size: 38px !important; font-size: 38px !important;
} }
src/pages/home/film/film_list/index.tsx
...@@ -225,7 +225,7 @@ class Films extends Component { ...@@ -225,7 +225,7 @@ class Films extends Component {
<View className="hui" /> <View className="hui" />
<ListView <ListView
count={count} count={count}
height={height && height} height={height && height - 20}
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_add/components/films/index.scss
@import '@styles/var.scss'; @import '@styles/var.scss';
@import '@styles/common.scss';
.films { .films {
width: 100%; width: 100%;
height: 100%; height: 100%;
background-color: $bgColor; background-color: $bgColor;
position: relative; position: relative;
padding-bottom: 100px;
.films-bind-item { .films-bind-item {
position: relative; position: relative;
...@@ -19,7 +21,7 @@ ...@@ -19,7 +21,7 @@
.enter { .enter {
position: fixed; position: fixed;
bottom: 0; bottom: 30px;
left: 0; left: 0;
right: 0; right: 0;
} }
...@@ -46,11 +48,24 @@ ...@@ -46,11 +48,24 @@
.type-tab-item { .type-tab-item {
padding: 0 20px; padding: 0 20px;
position: relative;
} }
.type-tab-item-active { .type-tab-item-active {
font-size: 38px; font-size: 38px;
color: #000; color: #000;
&::after {
content: '';
position: absolute;
bottom: -13px;
width: 38px;
height: 6px;
background: rgba(255, 145, 16, 1);
box-shadow: 0 2px 4px 0 rgba(233, 145, 42, 0.43);
border-radius: 3px;
left: calc(50% - 19px);
}
} }
} }
......
src/pages/home/film/schedule_add/components/films/index.tsx
...@@ -208,9 +208,9 @@ class Films extends Component { ...@@ -208,9 +208,9 @@ class Films extends Component {
} }
render() { render() {
const { list, height, count } = this.props const { list, count } = this.props
const { checked, showTemplate } = this.state const { checked, showTemplate } = this.state
let myHeight = height && height - 100 let myHeight = Taro.getSystemInfoSync().windowHeight - 130
return ( return (
<View className="films"> <View className="films">
<View className="film-search-bar"> <View className="film-search-bar">
...@@ -271,7 +271,7 @@ class Films extends Component { ...@@ -271,7 +271,7 @@ class Films extends Component {
</View> </View>
))} ))}
</ListView> </ListView>
<Button className="enter" type="primary" onClick={this.enter}> <Button className="enter bottom-btn" onClick={this.enter}>
确定 确定
</Button> </Button>
</View> </View>
......
src/pages/home/film/schedule_add/index.scss
@import '@styles/var.scss'; @import '@styles/var.scss';
@import '@styles/common.scss';
.schedule-add { .schedule-add {
width: 100%; width: 100%;
...@@ -6,27 +7,47 @@ ...@@ -6,27 +7,47 @@
min-height: 100vh; min-height: 100vh;
box-sizing: border-box; box-sizing: border-box;
position: relative; position: relative;
padding-bottom: 100px; padding-bottom: 110px;
background: $bgColor;
.btn-def {
width: 194px;
height: 64px;
background: linear-gradient(180deg, rgba(255, 145, 16, 1) 0%, rgba(255, 114, 14, 1) 100%);
border-radius: 11px;
font-size: 28px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: rgba(255, 255, 255, 1);
margin-bottom: 37px;
}
&-title { &-title {
font-size: 30px; margin: 27px 0;
margin: 10px 0; font-size: 28px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: rgba(153, 153, 153, 1);
} }
&-name { &-name {
// font-size: 30px; // font-size: 30px;
// margin: 10px 0; // margin: 10px 0;
width: 90%; box-sizing: border-box;
border: 1px solid #eee; padding: 10px 20px;
padding: 5px; // width: 696px;
border-radius: 4px; height: 88px;
background: rgba(255, 255, 255, 1);
border-radius: 5px;
color: #000;
font-size: 30px;
} }
.bottom-btn { .bottom-btn {
left: 0; left: 0;
right: 0; right: 0;
position: fixed; position: fixed;
bottom: 0; bottom: 30px;
display: flex; display: flex;
text-align: center; text-align: center;
justify-content: center; justify-content: center;
......
src/pages/home/film/schedule_add/index.tsx
...@@ -45,7 +45,7 @@ class ScheduleAdd extends Component { ...@@ -45,7 +45,7 @@ class ScheduleAdd extends Component {
const { id } = this.$router.params const { id } = this.$router.params
if (id) { if (id) {
Taro.setNavigationBarTitle({ Taro.setNavigationBarTitle({
title: '日程' title: '修改日程'
}) })
} }
this.setState({ this.setState({
...@@ -240,7 +240,7 @@ class ScheduleAdd extends Component { ...@@ -240,7 +240,7 @@ class ScheduleAdd extends Component {
className="schedule-add-name" className="schedule-add-name"
/> />
<View className="schedule-add-title">作品</View> <View className="schedule-add-title">作品</View>
<Button size="mini" onClick={this.chooseFilm}> <Button className="btn-def" size="mini" onClick={this.chooseFilm}>
选择作品 选择作品
</Button> </Button>
{filmList && {filmList &&
...@@ -253,14 +253,19 @@ class ScheduleAdd extends Component { ...@@ -253,14 +253,19 @@ class ScheduleAdd extends Component {
})} })}
<View className="schedule-add-title">播放设备</View> <View className="schedule-add-title">播放设备</View>
{deviceList && {/* {deviceList &&
deviceList.map((item: any, index) => { deviceList.map((item: any, index) => {
return <View key={index}>{item.equipmentName}</View> return <View key={index}>{item.equipmentName}</View>
})} })} */}
<Button size="mini" onClick={this.chooseDevice}> <Button className="btn-def" size="mini" onClick={this.chooseDevice}>
选择设备 选择{deviceList.length ? '('.concat(deviceList.length).concat(')') : '设备'}
</Button> </Button>
{id ? ( <View className="bottom-btn-container">
<View className="bottom-btn" onClick={this.enter}>
完成且同步到设备
</View>
</View>
{/* {id ? (
<View className="bottom-btn"> <View className="bottom-btn">
<View className="bottom-btn-item" onClick={this.deleteAction}> <View className="bottom-btn-item" onClick={this.deleteAction}>
删除 删除
...@@ -270,10 +275,7 @@ class ScheduleAdd extends Component { ...@@ -270,10 +275,7 @@ class ScheduleAdd extends Component {
</View> </View>
</View> </View>
) : ( ) : (
<Button type="primary" onClick={this.enter} className="bottom-btn"> )} */}
完成且同步到设备
</Button>
)}
</View> </View>
) )
} }
......
src/pages/home/film/schedule_list/index.scss
@import '@styles/var.scss'; @import '@styles/var.scss';
@import '~taro-ui/dist/style/components/list.scss';
@import '~taro-ui/dist/style/components/icon.scss';
.films { .films {
width: 100%; width: 100%;
height: 100%; height: 100%;
background-color: $bgColor2; background-color: $bgColor;
position: relative; position: relative;
.scroll-view { .scroll-view {
height: 100%; height: 100%;
} }
.schedule-list-item { .schedule-item-container {
&-active { margin: 15px 24px;
height: 300px; }
}
margin: 20px;
transition: height 1s ease-in-out;
height: 100px;
overflow: hidden;
display: block;
border: 1px solid #ffab20;
.top { .schedule-item {
height: 100px; position: relative;
display: flex; // height: 100px;
align-items: center; // line-height: 100px;
justify-content: space-between; padding: 33px 26px;
border: none; background: rgba(255, 255, 255, 1);
padding: 0 30px; border-radius: 5px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
color: #333;
font-size: 30px;
.left { &-name {
padding-bottom: 10px; font-size: 30px;
} font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: rgba(0, 0, 0, 1);
margin-bottom: 15px;
} }
.content { &-content {
display: none; font-size: 26px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: rgba(153, 153, 153, 1);
} }
} }
.schedule-list-add-btn { .schedule-list-add-btn {
right: 30px; right: 0;
bottom: 200px; left: 0;
width: 108px; bottom: 30px;
height: 108px; width: 106px;
height: 106px;
margin: 0 auto;
display: flex; display: flex;
color: white; color: white;
font-size: 30px; font-size: 50px;
position: absolute; position: absolute;
border-radius: 60px; border-radius: 60px;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
background-color: $bgColor; background-color: $bgColor;
background-image: linear-gradient(176deg, #ffab20 0%, #ff720e 97%); background-image: linear-gradient(176deg, #ffab20 0%, #ff720e 97%);
box-shadow: 0 8px 10px 0 rgba(226, 124, 64, 0.2);
} }
} }
src/pages/home/film/schedule_list/index.tsx
...@@ -4,9 +4,7 @@ import { View, Text, Icon } from '@tarojs/components' ...@@ -4,9 +4,7 @@ import { View, Text, Icon } 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, Config } from '@tarojs/taro' import Taro, { Component, Config } from '@tarojs/taro'
import { getDeviceList } from '@/actions/asyncCounter' import { AtList, AtListItem, AtSwipeAction } from 'taro-ui'
import FilmListItem from '@/conpoments/film_list_item'
import { AtList, AtListItem } from 'taro-ui'
import './index.scss' import './index.scss'
...@@ -54,18 +52,7 @@ class Schedule extends Component { ...@@ -54,18 +52,7 @@ class Schedule extends Component {
this.state = { this.state = {
count: 0, count: 0,
active: {}, active: {},
list: [ list: []
{
filmId: '123',
filmName: '123',
templateUrl: ''
},
{
filmId: '123',
filmName: '123',
templateUrl: ''
}
]
} }
} }
async componentWillMount() { async componentWillMount() {
...@@ -76,21 +63,28 @@ class Schedule extends Component { ...@@ -76,21 +63,28 @@ class Schedule extends Component {
} }
async getData() { async getData() {
const { list } = this.state const { list } = this.state
api.common.getScheduleList(this.page).then(res => { Taro.showLoading({ title: '数据加载中' })
const { count } = res api.common
const newList = res.list .getScheduleList(this.page)
if (this.page === 1) { .then(res => {
this.setState({ const { count } = res
list: newList, const newList = res.list
count if (this.page === 1) {
}) this.setState({
} else { list: newList,
this.setState({ count
list: list.concat(newList), })
count } else {
}) this.setState({
} list: list.concat(newList),
}) count
})
}
Taro.hideLoading()
})
.catch(() => {
Taro.hideLoading()
})
} }
goDetail(id: string) { goDetail(id: string) {
...@@ -123,6 +117,23 @@ class Schedule extends Component { ...@@ -123,6 +117,23 @@ class Schedule extends Component {
await this.getData() await this.getData()
done() done()
} }
async handleItem(item, info) {
const { text } = info
const { calendarId } = item
if (text === '删除') {
Taro.showModal({ content: '确定要删除？' }).then(async ({ confirm }) => {
if (confirm) {
try {
await api.common.deleteSchedule(calendarId)
this.getData()
showMyToast({ title: '删除成功~' })
} catch (error) {
showMyToast({ result: error, title: '失败~' })
}
}
})
}
}
addSchedule() { addSchedule() {
Taro.navigateTo({ url: `/pages/home/film/schedule_add/index?type=add` }) Taro.navigateTo({ url: `/pages/home/film/schedule_add/index?type=add` })
...@@ -140,7 +151,7 @@ class Schedule extends Component { ...@@ -140,7 +151,7 @@ class Schedule extends Component {
pullingUp={done => this.onScrollToLower(done)} pullingUp={done => this.onScrollToLower(done)}
pullingDown={done => this.onDownRefresh(done)} pullingDown={done => this.onDownRefresh(done)}
> >
<AtList> {/* <AtList>
{list.map((item, index) => ( {list.map((item, index) => (
<AtListItem <AtListItem
key={item.calendarId} key={item.calendarId}
...@@ -152,38 +163,33 @@ class Schedule extends Component { ...@@ -152,38 +163,33 @@ class Schedule extends Component {
}} }}
/> />
))} ))}
</AtList> </AtList> */}
{/* {list.map((item, index) => ( {list.map(item => (
<View <View key={item.equipmentId} className="schedule-item-container">
key={item.filmId} <AtSwipeAction
className={ autoClose
active[index] key={item.equipmentId}
? 'schedule-list-item schedule-list-item-active' onClick={info => this.handleItem(item, info)}
: 'schedule-list-item' options={[
} {
> text: '删除',
<View style: {
className="top" backgroundColor: '#F32B2B'
onClick={() => { }
this.changeActive(index) }
}} ]}
> >
<View className="left"> <View className="schedule-item" onClick={() => this.goDetail(item.calendarId)}>
<View className="name">任务名称</View> <View className="schedule-item-name">{item.calendarName}</View>
<View className="update-time">{new Date().toLocaleDateString()}</View> <View className="schedule-item-content">{item.updateTime}</View>
</View> </View>
<Icon className="icon" size="30" type="success" /> </AtSwipeAction>
</View>
<View className="content">
<FilmListItem {...item} />
</View>
</View> </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}>
新建 +
</Text> </Text>
</View> </View>
</View> </View>
......
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