Commit 20a9d7e4 by hank

tabbar 更换新增 以及模板市场修改

parent 554bcbd4
import api from '@/api/index' import api from '@/api/index'
import { setTempList, setDeviceList, setFilmData } from './counter' import { setTempList, setDeviceList, setFilmData, setShopData } from './counter'
/** 获取 模板市场 数据列表 */ /** 获取 模板市场 数据列表 */
export function getTempList(page: number) { export function getTempList(page: number) {
...@@ -36,3 +36,14 @@ export function getFilmList(page: number) { ...@@ -36,3 +36,14 @@ export function getFilmList(page: number) {
} }
} }
} }
/** 获取商城设备数据 */
export function getShopDeviceList(page: number) {
return async dispatch => {
try {
const { list, count } = await api.common.getShopDeviceList(page)
dispatch(setShopData(list, count))
} catch (error) {
console.error(error)
}
}
}
import { ADD_TEMP_LIST, ADD_DEVICE_LIST, ADD_FILM_LIST } from '../constants/counter' import { ADD_TEMP_LIST, ADD_DEVICE_LIST, ADD_FILM_LIST, ADD_SHOP_LIST } from '../constants/counter'
/** 修改模板市场数据 */ /** 修改模板市场数据 */
export function setTempList(list: any[], count: number) { export function setTempList(list: any[], count: number) {
...@@ -26,3 +26,11 @@ export function setFilmData(list: any[], count: number) { ...@@ -26,3 +26,11 @@ export function setFilmData(list: any[], count: number) {
type: ADD_FILM_LIST type: ADD_FILM_LIST
} }
} }
export function setShopData(list: any[], count: number) {
return {
list,
count,
type: ADD_SHOP_LIST
}
}
...@@ -65,6 +65,11 @@ class UsersApi extends ApiClient { ...@@ -65,6 +65,11 @@ class UsersApi extends ApiClient {
} }
/** 获取我的设备列表 */ /** 获取我的设备列表 */
getShopDeviceList(page: number) {
return this.request({ url: '/equipmentShop/get/list', data: { p: page, c: 10 } })
}
/** 获取我的设备列表 */
getMyDeviceList(page: number) { getMyDeviceList(page: number) {
return this.request({ url: '/myequipment/get/list', data: { p: page, c: 10 } }) return this.request({ url: '/myequipment/get/list', data: { p: page, c: 10 } })
} }
......
...@@ -36,8 +36,9 @@ class App extends Component { ...@@ -36,8 +36,9 @@ class App extends Component {
config: Config = { config: Config = {
pages: [ pages: [
'pages/index', 'pages/index',
'pages/home/tempaltes/index',
'pages/home/device/index', 'pages/home/device/index',
'pages/home/tempaltes/index',
'pages/home/film/index',
'pages/login/index', 'pages/login/index',
'pages/home/device/device_detail/index', 'pages/home/device/device_detail/index',
'pages/system/wifi_list/index', 'pages/system/wifi_list/index',
...@@ -65,14 +66,20 @@ class App extends Component { ...@@ -65,14 +66,20 @@ class App extends Component {
tabBar: { tabBar: {
list: [ list: [
{ {
pagePath: 'pages/home/device/index',
text: '设备',
iconPath: './assets/images/device.png',
selectedIconPath: './assets/images/device_ac.png'
},
{
pagePath: 'pages/home/tempaltes/index', pagePath: 'pages/home/tempaltes/index',
text: '模板市场', text: '模板市场',
iconPath: './assets/images/market.png', iconPath: './assets/images/market.png',
selectedIconPath: './assets/images/market_ac.png' selectedIconPath: './assets/images/market_ac.png'
}, },
{ {
pagePath: 'pages/home/device/index', pagePath: 'pages/home/film/index',
text: '设备与视片', text: '视片',
iconPath: './assets/images/device.png', iconPath: './assets/images/device.png',
selectedIconPath: './assets/images/device_ac.png' selectedIconPath: './assets/images/device_ac.png'
}, },
......
export const ADD_TEMP_LIST = 'ADD_TEMP_LIST' export const ADD_TEMP_LIST = 'ADD_TEMP_LIST'
export const ADD_FILM_LIST = 'ADD_FILM_LIST' export const ADD_FILM_LIST = 'ADD_FILM_LIST'
export const ADD_DEVICE_LIST = 'ADD_DEVICE_LIST' export const ADD_DEVICE_LIST = 'ADD_DEVICE_LIST'
export const ADD_SHOP_LIST = 'ADD_SHOP_LIST'
import FilmList from './film_list' import ShopList from './shop_list'
import DeviceList from './device_list' import DeviceList from './device_list'
import { ComponentClass } from 'react' import { ComponentClass } from 'react'
import { AtTabs, AtTabsPane } from 'taro-ui' import { AtTabs, AtTabsPane } from 'taro-ui'
...@@ -25,7 +25,7 @@ interface Device { ...@@ -25,7 +25,7 @@ interface Device {
state: PageState state: PageState
} }
const tabList = [{ title: '我的视片' }, { title: '我的设备' }] const tabList = [{ title: '我的设备' }, { title: '设备商城' }]
class Device extends Component { class Device extends Component {
config: Config = { config: Config = {
navigationBarTitleText: '', navigationBarTitleText: '',
...@@ -36,7 +36,7 @@ class Device extends Component { ...@@ -36,7 +36,7 @@ class Device extends Component {
const { windowHeight } = Taro.getSystemInfoSync() const { windowHeight } = Taro.getSystemInfoSync()
this.state = { this.state = {
current: 1, current: 0,
windowHeight: windowHeight - 43 windowHeight: windowHeight - 43
} }
} }
...@@ -51,12 +51,12 @@ class Device extends Component { ...@@ -51,12 +51,12 @@ class Device extends Component {
<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}px` }}>
<FilmList height={windowHeight} /> <DeviceList height={windowHeight} />
</View> </View>
</AtTabsPane> </AtTabsPane>
<AtTabsPane className="at-tabs-page" current={current} index={1}> <AtTabsPane className="at-tabs-page" current={current} index={1}>
<View style={{ height: `${windowHeight}px` }}> <View style={{ height: `${windowHeight}px` }}>
<DeviceList height={windowHeight} /> <ShopList height={windowHeight} />
</View> </View>
</AtTabsPane> </AtTabsPane>
</AtTabs> </AtTabs>
......
@import '@styles/var.scss';
.device-list {
width: 100%;
height: 100%;
position: relative;
&-add-btn {
right: 80px;
bottom: 80px;
width: 120px;
height: 120px;
display: flex;
position: absolute;
border-radius: 60px;
align-items: center;
justify-content: center;
background-color: $bgColor;
}
&-select {
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
position: absolute;
align-items: center;
flex-direction: column;
justify-content: center;
background-color: rgba($color: #000, $alpha: 0.7);
z-index: 2;
&-modal {
width: 400px;
padding: 0 20px;
border-radius: 6px;
background-color: white;
&-item {
padding: 20px 0;
}
}
}
}
import api from '@/api/index'
import { ComponentClass } from 'react'
import { AtSwipeAction } from 'taro-ui'
import { connect } from '@tarojs/redux'
import ListView from '@/conpoments/list_view'
import Taro, { Component } from '@tarojs/taro'
import { View, Text } from '@tarojs/components'
import DeviceItem from '@/conpoments/device_item'
import { getShopDeviceList } from '@/actions/asyncCounter'
import { showMyToast } from '@/common/utils'
import './index.scss'
export interface IDeviceItem {
filmId: any
filmName: any
mqttTopic: string
equipmentType: any
equipmentId: string
equipmentUrl: string
equipmentName: string
equipmentState: string
}
export interface IBluetoothServerListItem {
serviceId: string
characteristics: Taro.getBLEDeviceCharacteristics.PromisedPropCharacteristics
}
export interface IWifiListItem {
id: number
rssi: number
ssid: string
type: string
}
type PageStateProps = {
list: any[]
count: number
}
type PageDispatchProps = {
getFilmListData: (page: number) => void
}
type PageOwnProps = {
height: number
}
type PageState = {
deviceCode: string
showModal: boolean
deviceList: IDeviceItem[]
}
type IProps = PageStateProps & PageDispatchProps & PageOwnProps
interface MyDevice {
props: IProps
state: PageState
}
@connect(
({ counter }) => {
const { list, count } = counter.shopData
return { list, count }
},
dispacth => ({
getFilmListData(page: number) {
dispacth(getShopDeviceList(page))
}
})
)
class MyDevice extends Component {
protected page = 1
constructor(props: any) {
super(props)
this.state = {
deviceCode: '',
deviceList: [],
showModal: false
}
}
async componentWillMount() {
this.getDate()
}
componentDidShow() {
this.page = 1
this.getDate()
}
async getDate() {
this.props.getFilmListData(this.page)
}
async handleItem(item: IDeviceItem, info) {
const { text } = info
const { equipmentId } = item
if (text === '编辑') {
// console.log('')
Taro.navigateTo({ url: `/pages/home/device/device_detail/index?equipmentId=${equipmentId}` })
} else if (text === '删除') {
Taro.showModal({ content: '确定要删除?' }).then(async ({ confirm }) => {
if (confirm) {
try {
await api.common.removeDevice(equipmentId)
this.getDate()
showMyToast({ title: '删除成功~' })
} catch (error) {
console.error(error)
showMyToast({ result: error, title: '失败成功~' })
}
}
})
}
}
async pullingUp(done: any) {
this.page++
await this.getDate()
done()
}
async pullingDown(done: any) {
this.page = 1
await this.getDate()
setTimeout(() => {
done()
}, 500)
}
goDetail(equipmentId) {
Taro.navigateTo({ url: `/pages/home/device/device_detail/index?equipmentId=${equipmentId}` })
}
shouldComponentUpdate(nextProps: IProps, _nextState) {
const { list } = this.props
const { list: _list } = nextProps
const { showModal } = this.state
const { showModal: _showModal } = _nextState
return list !== _list || showModal !== _showModal
}
render() {
const { list, count, height } = this.props
const { showModal } = this.state
return (
<View className="device-list">
<ListView
count={count}
height={height}
dataListLength={list.length}
pullingUp={done => this.pullingUp(done)}
pullingDown={done => this.pullingDown(done)}
>
{list.map(item => (
<AtSwipeAction
autoClose
key={item.equipmentId}
onClick={info => this.handleItem(item, info)}
options={[
{
text: '编辑',
style: {
backgroundColor: '#6190E8'
}
},
{
text: '删除',
style: {
backgroundColor: '#FF4949'
}
}
]}
>
<View onClick={() => this.goDetail(item.equipmentId)}>
<DeviceItem {...item} />
</View>
</AtSwipeAction>
))}
</ListView>
</View>
)
}
}
export default MyDevice as ComponentClass<PageOwnProps, PageState>
@import '@styles/var.scss';
.films {
width: 100%;
height: 100%;
background-color: $bgColor;
.scroll-view {
height: 100%;
}
}
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 { showMyToast } from '@/common/utils'
import ListView from '@/conpoments/list_view'
import Taro, { Component } from '@tarojs/taro'
import { getDeviceList } from '@/actions/asyncCounter'
import FilmListItem from '@/conpoments/film_list_item'
import './index.scss'
type PageStateProps = {
list: any[]
count: number
}
type PageDispatchProps = {
getDeviceListData: (page: number) => void
}
type PageOwnProps = {
height?: number
}
export interface IMilmListItme {
filmId: string
filmName: string
templateUrl: string
equipmentCount: number
}
interface PageState {}
type IProps = PageStateProps & PageDispatchProps & PageOwnProps
interface Films {
props: IProps
state: PageState
}
@connect(
({ counter }) => {
const { list, count } = counter.deviceData
return { list, count }
},
dispacth => ({
getDeviceListData(page: number) {
dispacth(getDeviceList(page))
}
})
)
class Films extends Component {
protected page = 1
async componentWillMount() {
this.getData()
}
componentDidShow() {
this.getData()
}
async getData() {
this.props.getDeviceListData(this.page)
}
async handleItem({ filmId }: IMilmListItme) {
Taro.showModal({ content: '确定要删除?' }).then(async ({ confirm }) => {
if (confirm) {
try {
await api.common.removeFilm(filmId)
this.getData()
showMyToast({ title: '删除成功~' })
} catch (error) {
console.error(error)
showMyToast({ title: '失败成功~' })
}
}
})
}
goDetail({ filmId }: IMilmListItme) {
Taro.navigateTo({ url: `/pages/home/tempaltes/film_detail?filmId=${filmId}` })
}
async onDownRefresh(done: any) {
this.page = 1
await this.getData()
setTimeout(() => {
done()
}, 500)
}
async onScrollToLower(done: any) {
this.page++
await this.getData()
done()
}
shouldComponentUpdate(nextProps: IProps) {
const { list } = this.props
const { list: _list } = nextProps
return list !== _list
}
render() {
const { list, height, count } = this.props
return (
<View className="films">
<ListView
count={count}
height={height}
dataListLength={list.length}
pullingUp={done => this.onScrollToLower(done)}
pullingDown={done => this.onDownRefresh(done)}
>
{list.map(item => (
<AtSwipeAction
autoClose
key={item.filmId}
onClick={() => this.handleItem(item)}
options={[
{
text: '删除',
style: {
backgroundColor: '#FF4949'
}
}
]}
>
<FilmListItem onClick={() => this.goDetail(item)} {...item} />
</AtSwipeAction>
))}
</ListView>
</View>
)
}
}
export default Films as ComponentClass<PageOwnProps, PageState>
@import '@styles/var.scss';
@import '~taro-ui/dist/style/components/tabs.scss';
import FilmList from './film_list'
import { ComponentClass } from 'react'
import { AtTabs, AtTabsPane } from 'taro-ui'
import Taro, { Component, Config } from '@tarojs/taro'
import './index.scss'
import { View } from '@tarojs/components'
type PageStateProps = {}
type PageDispatchProps = {}
type PageOwnProps = {}
type PageState = {
current: number
windowHeight: number
}
type IProps = PageStateProps & PageDispatchProps & PageOwnProps
interface Device {
props: IProps
state: PageState
}
const tabList = [{ title: '我的视片' }, { title: '收藏的影片' }]
class Device extends Component {
config: Config = {
navigationBarTitleText: '',
navigationStyle: process.env.TARO_ENV === 'rn' ? 'custom' : 'default'
}
constructor(props) {
super(props)
const { windowHeight } = Taro.getSystemInfoSync()
this.state = {
current: 0,
windowHeight: windowHeight - 43
}
}
changePage = value => {
this.setState({ current: value })
}
render() {
const { current, windowHeight } = this.state
return (
<AtTabs current={current} tabList={tabList} onClick={this.changePage} swipeable={false}>
<AtTabsPane current={current} index={0}>
<View style={{ height: `${windowHeight}px` }}>
<FilmList height={windowHeight} />
</View>
</AtTabsPane>
<AtTabsPane className="at-tabs-page" current={current} index={1}>
<View style={{ height: `${windowHeight}px` }}>收藏的影片</View>
</AtTabsPane>
</AtTabs>
)
}
}
export default Device as ComponentClass<PageOwnProps, PageState>
.my-film {
width: 100%;
height: 100%;
}
import { ComponentClass } from 'react'
import { View } from '@tarojs/components'
import FilmList from '../film_list/index'
import Taro, { Component, Config } from '@tarojs/taro'
import './index.scss'
type PageStateProps = {}
type PageDispatchProps = {}
type PageOwnProps = {}
type PageState = {}
type IProps = PageStateProps & PageDispatchProps & PageOwnProps
interface MyFilm {
props: IProps
state: PageState
}
class MyFilm extends Component {
config: Config = {
navigationBarTitleText: '我的视片'
}
render() {
return (
<View className="my-film">
<FilmList />
</View>
)
}
}
export default MyFilm as ComponentClass<PageOwnProps, PageState>
...@@ -9,10 +9,15 @@ ...@@ -9,10 +9,15 @@
@include eject(display, block); @include eject(display, block);
width: 100%; width: 100%;
height: 185px; height: 195px;
background-color: #ccc; background-color: #ccc;
} }
.temp-img2 {
width: 100%;
height: 613px;
}
.temp-name { .temp-name {
width: 100%; width: 100%;
font-size: 28px; font-size: 28px;
......
...@@ -29,10 +29,14 @@ class TempItem extends Component { ...@@ -29,10 +29,14 @@ class TempItem extends Component {
} }
render() { render() {
const { templateName, templateUrl: url, filmName, equipmentCount } = this.props const { templateName, templateUrl: url, filmName, equipmentCount, templateShow } = this.props
return ( return (
<View className="temp-item" onClick={this.goDetail}> <View className="temp-item" onClick={this.goDetail}>
<Image lazyLoad className="temp-img" src={url.split(',')[0]} /> <Image
lazyLoad
className={templateShow === 'HORIZONTAL' ? 'temp-img' : 'temp-img temp-img2'}
src={url.split(',')[0]}
/>
<Text className="temp-name">{templateName || filmName}</Text> <Text className="temp-name">{templateName || filmName}</Text>
{equipmentCount !== undefined ? ( {equipmentCount !== undefined ? (
<Text className="equipment-count">播放设备:{equipmentCount}</Text> <Text className="equipment-count">播放设备:{equipmentCount}</Text>
......
...@@ -73,6 +73,7 @@ class TempDetail extends Component { ...@@ -73,6 +73,7 @@ class TempDetail extends Component {
api.common.getTempDetailFilmList(templateId, this.page) api.common.getTempDetailFilmList(templateId, this.page)
]) ])
const { list, count } = filmData const { list, count } = filmData
console.log(list, detailData)
this.setState({ this.setState({
count, count,
filmDataList: list, filmDataList: list,
...@@ -139,7 +140,7 @@ class TempDetail extends Component { ...@@ -139,7 +140,7 @@ class TempDetail extends Component {
render() { render() {
const { detailData, filmDataList, showModal, windowHeight, count } = this.state const { detailData, filmDataList, showModal, windowHeight, count } = this.state
console.log(detailData, filmDataList, 'render')
return ( return (
<View <View
className="temp-detail" className="temp-detail"
...@@ -153,7 +154,7 @@ class TempDetail extends Component { ...@@ -153,7 +154,7 @@ class TempDetail extends Component {
) : ( ) : (
<ListView <ListView
count={count} count={count}
dataListLength={filmDataList.length} dataListLength={filmDataList.length ? filmDataList.length : 1}
pullingUp={done => this.pullingUp(done)} pullingUp={done => this.pullingUp(done)}
pullingDown={done => this.pullingDown(done)} pullingDown={done => this.pullingDown(done)}
> >
......
...@@ -27,11 +27,11 @@ ...@@ -27,11 +27,11 @@
.type-item-btn { .type-item-btn {
margin-right: 20px; margin-right: 20px;
margin-bottom: 20px; margin-bottom: 20px;
font-size: 16px; font-size: 20px;
} }
&-list { &-list {
padding: 0 20px; padding: 20px 0;
// text-align: left; // text-align: left;
// display: flex; // display: flex;
// flex-wrap: wrap; // flex-wrap: wrap;
......
...@@ -14,6 +14,11 @@ ...@@ -14,6 +14,11 @@
.radio-list__label { .radio-list__label {
margin-right: 20px; margin-right: 20px;
.activeTagBtn {
background: yellow;
color: white;
}
} }
} }
...@@ -29,6 +34,11 @@ ...@@ -29,6 +34,11 @@
margin-right: 20px; margin-right: 20px;
font-size: 30px !important; font-size: 30px !important;
} }
&-item-active {
color: white;
background: blue;
}
} }
&-scroll { &-scroll {
......
...@@ -50,6 +50,7 @@ class TemplateTypeDetail extends Component { ...@@ -50,6 +50,7 @@ class TemplateTypeDetail extends Component {
constructor(props: any) { constructor(props: any) {
super(props) super(props)
const typeId = this.$router.params.typeId const typeId = this.$router.params.typeId
const tagId = this.$router.params.tagId
this.state = { this.state = {
count: 0, count: 0,
typeData: [], typeData: [],
...@@ -59,7 +60,7 @@ class TemplateTypeDetail extends Component { ...@@ -59,7 +60,7 @@ class TemplateTypeDetail extends Component {
templateShow: 'HORIZONTAL', templateShow: 'HORIZONTAL',
windowHeight: getWindiwHeight(), windowHeight: getWindiwHeight(),
tempList: [], tempList: [],
tagId: '', tagId: tagId ? tagId : '',
tagsList: [ tagsList: [
{ {
'': '全部' '': '全部'
...@@ -177,7 +178,15 @@ class TemplateTypeDetail extends Component { ...@@ -177,7 +178,15 @@ class TemplateTypeDetail extends Component {
} }
render() { render() {
const { typeData, filmDataList, windowHeight, count, tagsList } = this.state const {
typeData,
filmDataList,
windowHeight,
count,
tagsList,
tagId,
templateShow
} = this.state
console.log(tagsList, filmDataList) console.log(tagsList, filmDataList)
return ( return (
<View <View
...@@ -204,6 +213,7 @@ class TemplateTypeDetail extends Component { ...@@ -204,6 +213,7 @@ class TemplateTypeDetail extends Component {
/> />
<Button <Button
size="mini" size="mini"
className={tagId === item.tagId ? 'activeTagBtn' : ''}
onClick={() => { onClick={() => {
console.log('change') console.log('change')
this.tagIdChange(item.tagId) this.tagIdChange(item.tagId)
...@@ -221,7 +231,11 @@ class TemplateTypeDetail extends Component { ...@@ -221,7 +231,11 @@ class TemplateTypeDetail extends Component {
return ( return (
<Button <Button
size="mini" size="mini"
className="type-list-item" className={
item.typeName === templateShow
? 'type-list-item type-list-item-active'
: 'type-list-item'
}
key={item.typeName} key={item.typeName}
onClick={() => { onClick={() => {
console.log('change') console.log('change')
......
...@@ -37,7 +37,7 @@ class Index extends Component { ...@@ -37,7 +37,7 @@ class Index extends Component {
if (!toekn) { if (!toekn) {
Taro.navigateTo({ url: '/pages/login/index' }) Taro.navigateTo({ url: '/pages/login/index' })
} else { } else {
Taro.switchTab({ url: '/pages/home/tempaltes/index' }) Taro.switchTab({ url: '/pages/home/device/index' })
} }
} }
......
import { ADD_TEMP_LIST, ADD_FILM_LIST, ADD_DEVICE_LIST } from '../constants/counter' import { ADD_TEMP_LIST, ADD_FILM_LIST, ADD_DEVICE_LIST, ADD_SHOP_LIST } from '../constants/counter'
export interface ITempItem { export interface ITempItem {
filmId: string filmId: string
...@@ -7,6 +7,7 @@ export interface ITempItem { ...@@ -7,6 +7,7 @@ export interface ITempItem {
templateUrl: string templateUrl: string
templateName: string templateName: string
equipmentCount?: number equipmentCount?: number
templateShow?: string
clickItem?: () => void clickItem?: () => void
} }
export interface IInitialState { export interface IInitialState {
...@@ -28,6 +29,10 @@ const INITIAL_STATE = { ...@@ -28,6 +29,10 @@ const INITIAL_STATE = {
filmData: { filmData: {
list: [], list: [],
count: 0 count: 0
},
shopData: {
list: [],
count: 0
} }
} }
...@@ -48,6 +53,11 @@ export default function counter(state = INITIAL_STATE, action) { ...@@ -48,6 +53,11 @@ export default function counter(state = INITIAL_STATE, action) {
...state, ...state,
filmData: { list: action.list, count: action.count } filmData: { list: action.list, count: action.count }
} }
case ADD_SHOP_LIST:
return {
...state,
shopData: { list: action.list, count: action.count }
}
default: default:
return state return state
} }
......
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