Skip to content

visualcloud / Vmatrix-client-taro

Go to a project
Commit 172233cc by hank
Options

修改交互流程

parent 65233f66
Showing with 251 additions and 23 deletions
src/app.tsx
...@@ -54,6 +54,7 @@ class App extends Component { ...@@ -54,6 +54,7 @@ class App extends Component {
'pages/home/tempaltes/film_page', 'pages/home/tempaltes/film_page',
'pages/home/tempaltes/film_preview', 'pages/home/tempaltes/film_preview',
'pages/home/tempaltes/film_edit', 'pages/home/tempaltes/film_edit',
'pages/home/tempaltes/film_edit_info',
'pages/home/film/schedule_add/index', 'pages/home/film/schedule_add/index',
'pages/home/film/schedule_add/components/films/index', 'pages/home/film/schedule_add/components/films/index',
'pages/home/film/schedule_add/components/device/index', 'pages/home/film/schedule_add/components/device/index',
......
src/common/index.ts
export const FETCH_TIME_OUT = 5000 export const FETCH_TIME_OUT = 5000
// export const BASE_URL = 'https://server.bdideal.com' // export const BASE_URL = 'https://server.bdideal.com'
// export const WEBVIEW_URL = 'https://visual.bdideal.com'
export const BASE_URL = 'https://dev-server.bdideal.com' export const BASE_URL = 'https://dev-server.bdideal.com'
export const WEBVIEW_URL = 'https://dev-visual.bdideal.com' export const WEBVIEW_URL = 'https://dev-visual.bdideal.com'
// export const BASE_URL = 'http://172.16.4.219:8090'
/** 蓝牙的服务 uuid */ /** 蓝牙的服务 uuid */
export const BLE_SERVICE_ID = '000088A0-0000-1000-8000-00805F9B34FB' export const BLE_SERVICE_ID = '000088A0-0000-1000-8000-00805F9B34FB'
......
src/pages/home/film/film_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 { AtSwipeAction, AtActionSheet, AtActionSheetItem } from 'taro-ui'
import { connect } from '@tarojs/redux' import { connect } from '@tarojs/redux'
import { View, Text } from '@tarojs/components' import { View, Text } from '@tarojs/components'
import { showMyToast } from '@/common/utils' import { showMyToast } from '@/common/utils'
...@@ -10,7 +10,6 @@ import { getDeviceList } from '@/actions/asyncCounter' ...@@ -10,7 +10,6 @@ import { getDeviceList } from '@/actions/asyncCounter'
import FilmListItem from '@/conpoments/film_list_item' import FilmListItem from '@/conpoments/film_list_item'
import './index.scss' import './index.scss'
type PageStateProps = { type PageStateProps = {
list: any[] list: any[]
count: number count: number
...@@ -32,7 +31,9 @@ export interface IMilmListItme { ...@@ -32,7 +31,9 @@ export interface IMilmListItme {
} }
interface PageState { interface PageState {
showTemplate: string showTemplate: 'HORIZONTAL'
isOpened: false
chooseItem: {}
} }
type IProps = PageStateProps & PageDispatchProps & PageOwnProps type IProps = PageStateProps & PageDispatchProps & PageOwnProps
...@@ -55,28 +56,35 @@ interface Films { ...@@ -55,28 +56,35 @@ interface Films {
) )
class Films extends Component { class Films extends Component {
protected page = 1 protected page = 1
constructor(props) {
super(props)
this.setState({
isOpened: false,
chooseItem: {}
})
}
async componentWillMount() { async componentWillMount() {
this.getData() this.getData()
} }
componentDidShow() { componentDidShow() {
this.getData() this.getData()
this.onClose()
} }
async getData() { async getData() {
const { showTemplate } = this.state const { showTemplate } = this.state
this.props.getDeviceListData(this.page, showTemplate) this.props.getDeviceListData(this.page, showTemplate || 'HORIZONTAL')
} }
async handleItem({ filmId }: IMilmListItme) { async handleItem({ filmId }) {
this.setState({
isOpened: false
})
Taro.showModal({ content: '确定要删除？' }).then(async ({ confirm }) => { Taro.showModal({ content: '确定要删除？' }).then(async ({ confirm }) => {
if (confirm) { if (confirm) {
try { try {
await api.common.removeFilm(filmId) await api.common.removeFilm(filmId)
this.getData() this.getData()
showMyToast({ title: '删除成功~' }) showMyToast({ title: '删除成功~' })
} catch (error) {
console.error(error)
showMyToast({ title: '失败成功~' })
} }
} }
}) })
...@@ -93,10 +101,45 @@ class Films extends Component { ...@@ -93,10 +101,45 @@ class Films extends Component {
) )
} }
goDetail({ filmId }: IMilmListItme) { goDetail(item: IMilmListItme) {
Taro.navigateTo({ url: `/pages/home/tempaltes/film_detail?filmId=${filmId}` }) console.log(item)
if (process.env.TARO_ENV !== 'rn') {
Taro.hideTabBar().then(() => {
this.setState({
isOpened: true,
chooseItem: item
})
})
} else {
this.setState({
isOpened: true,
chooseItem: item
})
}
// Taro.navigateTo({ url: `/pages/home/tempaltes/film_detail?filmId=${item.filmId}` })
}
ActionSheetHandleCancel() {
this.setState({
isOpened: false
})
}
handleClickSheet(item) {
this.ActionSheetHandleCancel()
Taro.navigateTo({ url: `/pages/home/tempaltes/film_detail?filmId=${item.filmId}` })
}
changeInfo(item) {
this.ActionSheetHandleCancel()
Taro.navigateTo({ url: `/pages/home/tempaltes/film_edit_info?filmId=${item.filmId}` })
} }
onClose() {
this.ActionSheetHandleCancel()
if (process.env.TARO_ENV !== 'rn') {
Taro.showTabBar()
}
this.ActionSheetHandleCancel()
}
async onDownRefresh(done: any) { async onDownRefresh(done: any) {
this.page = 1 this.page = 1
await this.getData() await this.getData()
...@@ -111,19 +154,33 @@ class Films extends Component { ...@@ -111,19 +154,33 @@ class Films extends Component {
done() done()
} }
shouldComponentUpdate(nextProps: IProps) { // shouldComponentUpdate(nextProps: IProps) {
const { list } = this.props // const { list } = this.props
const { showTemplate } = this.state // const { showTemplate } = this.state
const { list: _list } = nextProps // const { list: _list } = nextProps
return list !== _list || !!showTemplate // return list !== _list || !!showTemplate
} // }
render() { render() {
const { list, height, count } = this.props const { list, height, count } = this.props
let { showTemplate } = this.state let { showTemplate, isOpened, chooseItem } = this.state
showTemplate = showTemplate || 'HORIZONTAL' showTemplate = showTemplate || 'HORIZONTAL'
return ( return (
<View className="films"> <View className="films">
<AtActionSheet
isOpened={isOpened}
title="设置影片"
onCancel={this.ActionSheetHandleCancel}
onClose={() => {
this.onClose()
}}
>
<AtActionSheetItem onClick={() => { this.handleClickSheet(chooseItem) }} >
编辑</AtActionSheetItem>
<AtActionSheetItem onClick={() => { this.changeInfo(chooseItem) }} >
设置信息</AtActionSheetItem>
<AtActionSheetItem onClick={() => this.handleItem(chooseItem)}>删除</AtActionSheetItem>
</AtActionSheet>
<View className="film-search-bar"> <View className="film-search-bar">
<View className="type-tab"> <View className="type-tab">
<Text <Text
......
src/pages/home/film/index.scss
@import '@styles/var.scss'; @import '@styles/var.scss';
@import '~taro-ui/dist/style/components/tabs.scss'; @import '~taro-ui/dist/style/components/tabs.scss';
@import '~taro-ui/dist/style/components/action-sheet.scss';
.at-tabs__item-underline { .at-tabs__item-underline {
background: #ff9110 !important; background: #ff9110 !important;
......
src/pages/home/film/index.tsx
...@@ -35,7 +35,6 @@ class Device extends Component { ...@@ -35,7 +35,6 @@ class Device extends Component {
} }
constructor(props) { constructor(props) {
super(props) super(props)
const { windowHeight } = Taro.getSystemInfoSync() const { windowHeight } = Taro.getSystemInfoSync()
this.state = { this.state = {
current: 0, current: 0,
...@@ -49,10 +48,11 @@ class Device extends Component { ...@@ -49,10 +48,11 @@ class Device extends Component {
render() { render() {
const { current, windowHeight } = this.state const { current, windowHeight } = this.state
return ( return (
<AtTabs current={current} tabList={tabList} onClick={this.changePage} swipeable={false}> <AtTabs current={current} tabList={tabList} onClick={this.changePage} swipeable={false}>
<AtTabsPane current={current} index={0}> <AtTabsPane current={current} index={0}>
<View style={{ height: `${windowHeight}px` }}> <View style={{ height: `${windowHeight + 70}px` }}>
<FilmList height={windowHeight} /> <FilmList height={windowHeight} />
</View> </View>
</AtTabsPane> </AtTabsPane>
......
src/pages/home/tempaltes/detail.tsx
...@@ -86,7 +86,10 @@ class TempDetail extends Component { ...@@ -86,7 +86,10 @@ class TempDetail extends Component {
} }
createFilm = () => { createFilm = () => {
this.setState({ showModal: true }) Taro.navigateTo({
url: `/pages/home/tempaltes/film_detail?templateId=${this.$router.params.templateId}`
})
// this.setState({ showModal: true })
} }
cancelModal = () => { cancelModal = () => {
......
src/pages/home/tempaltes/film_detail.tsx
...@@ -62,6 +62,10 @@ class FilmDetail extends Component { ...@@ -62,6 +62,10 @@ class FilmDetail extends Component {
// delta: -1 // delta: -1
// }) // })
// }, 10000) // }, 10000)
Taro.showLoading({
title: '资源加载中',
mask: true
})
} }
componentDidShow() { componentDidShow() {
// this.getData() // this.getData()
...@@ -157,6 +161,9 @@ class FilmDetail extends Component { ...@@ -157,6 +161,9 @@ class FilmDetail extends Component {
} }
}) })
} }
webviewLoad() {
Taro.hideLoading()
}
render() { render() {
const { filmInfo, filmList, showModal, filmId } = this.state const { filmInfo, filmList, showModal, filmId } = this.state
...@@ -218,6 +225,9 @@ class FilmDetail extends Component { ...@@ -218,6 +225,9 @@ class FilmDetail extends Component {
src={`${WEBVIEW_URL}/tempaltes/edit?${ src={`${WEBVIEW_URL}/tempaltes/edit?${
templateId ? 'templateId=' + templateId : 'filmId=' + filmId templateId ? 'templateId=' + templateId : 'filmId=' + filmId
}&token=${token.getToken()}`} }&token=${token.getToken()}`}
onLoad={() => {
this.webviewLoad()
}}
/> />
</View> </View>
) )
......
src/pages/home/tempaltes/film_edit_info.tsx 0 → 100644
import { ComponentClass } from 'react'
import Taro, { Component, Config } from '@tarojs/taro'
import { View, Text, Button, Input } from '@tarojs/components'
import { showMyToast } from '@/common/utils'
import './scss/film_detail.scss'
import api from '@/api/index'
type PageStateProps = {}
type PageDispatchProps = {}
type PageOwnProps = {}
type PageState = {
page: number
count: number
filmInfo: any
filmId: string
filmList: any[]
showModal: boolean
deviceList: any[]
}
type IProps = PageStateProps & PageDispatchProps & PageOwnProps
interface FilmDetail {
props: IProps
state: PageState
}
class FilmDetail extends Component {
config: Config = {
navigationBarTitleText: '设置信息'
// navigationStyle: undefined
}
constructor() {
super()
const filmId = this.$router.params.filmId
this.state = {
filmId,
page: 1,
count: 0,
filmInfo: {},
showModal: false,
filmList: [],
deviceList: []
}
}
componentWillMount() {
this.getData()
}
componentDidShow() {
this.getData()
}
async getData() {
const { filmId } = this.state
try {
const [filmInfo] = await Promise.all([api.common.getFilmDetailInfo(filmId)])
this.setState({
filmInfo
})
} catch (error) {
console.error(error)
}
}
inputConfirm = async () => {
const {
filmInfo: { templateName, templateDescribe, filmId }
} = this.state
if (!templateName) {
showMyToast({ title: '视片名称不能为空~' })
return
}
try {
await api.common.updateFilmName(templateName, templateDescribe, filmId)
showMyToast({ title: '更新成功' })
setTimeout(() => {
Taro.navigateBack()
}, 500)
} catch (error) {
showMyToast({ title: '更新失败' })
}
}
showMyModal() {
this.setState({ showModal: true })
}
changeFilmName = ({ target }) => {
const { value } = target
const { filmInfo } = this.state
this.setState({
filmInfo: {
...filmInfo,
filmName: value
}
})
}
changeDescribeName = ({ target }) => {
const { value } = target
const { filmInfo } = this.state
this.setState({
filmInfo: {
...filmInfo,
filmDescribe: value
}
})
}
render() {
const { filmInfo, filmList, showModal, filmId } = this.state
filmInfo.templateName = filmInfo.filmName
filmInfo.templateDescribe = filmInfo.filmDescribe
console.log('film-detailRender')
return (
<View className="film-detail">
<View className="film-modal">
<Text className="film-modal-text">视片名称</Text>
<Input
placeholder="请输入视片名称"
className="film-modal-input"
value={filmInfo.templateName}
onInput={this.changeFilmName}
/>
<Text className="film-modal-text">视片描述</Text>
<Input
placeholder="请输入视片描述"
className="film-modal-input"
value={filmInfo.templateDescribe}
onInput={this.changeDescribeName}
/>
</View>
<Button
className="btn-max"
type="primary"
size="default"
onClick={() => {
this.inputConfirm()
}}
>
确定
</Button>
</View>
)
}
}
export default FilmDetail as ComponentClass<PageOwnProps, PageState>
src/pages/home/tempaltes/scss/film_detail.scss
...@@ -7,6 +7,11 @@ ...@@ -7,6 +7,11 @@
flex-direction: column; flex-direction: column;
background-color: white; background-color: white;
.btn-max {
display: block;
width: 90%;
}
&-scroll { &-scroll {
flex: 1; flex: 1;
overflow: auto; overflow: auto;
......
src/pages/system/wifi_list/index.tsx
...@@ -92,7 +92,7 @@ class WifiList extends Component { ...@@ -92,7 +92,7 @@ class WifiList extends Component {
async getWifiList() { async getWifiList() {
try { try {
/** 设置监听获取WiFi列表的回调函数 */ /** 设置监听获取WiFi列表的回调函数 */
Taro.showLoading({ title: '获取WLAN...' }) Taro.showLoading({ title: '获取WLAN...', mask: true })
// 设置回调函数 // 设置回调函数
Ble.setCallBack({ Ble.setCallBack({
......
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