Skip to content

visualcloud / Vmatrix-client-taro

Go to a project
Commit 2bac6b07 by hank
Options

日程模块ui

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