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

src/actions/asyncCounter.ts

 import api from '@/api/index'
-import { setTempList, setDeviceList, setFilmData } from './counter'
+import { setTempList, setDeviceList, setFilmData, setShopData } from './counter'
 
 /** 获取 模板市场 数据列表 */
 export function getTempList(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)
+    }
+  }
+}

src/actions/counter.ts

-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) {
@@ -26,3 +26,11 @@ export function setFilmData(list: any[], count: number) {
     type: ADD_FILM_LIST
   }
 }
+
+export function setShopData(list: any[], count: number) {
+  return {
+    list,
+    count,
+    type: ADD_SHOP_LIST
+  }
+}

src/api/common.ts

@@ -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) {
     return this.request({ url: '/myequipment/get/list', data: { p: page, c: 10 } })
   }

src/app.tsx

@@ -36,8 +36,9 @@ class App extends Component {
   config: Config = {
     pages: [
       'pages/index',
-      'pages/home/tempaltes/index',
       'pages/home/device/index',
+      'pages/home/tempaltes/index',
+      'pages/home/film/index',
       'pages/login/index',
       'pages/home/device/device_detail/index',
       'pages/system/wifi_list/index',
@@ -65,14 +66,20 @@ class App extends Component {
     tabBar: {
       list: [
         {
+          pagePath: 'pages/home/device/index',
+          text: '设备',
+          iconPath: './assets/images/device.png',
+          selectedIconPath: './assets/images/device_ac.png'
+        },
+        {
           pagePath: 'pages/home/tempaltes/index',
           text: '模板市场',
           iconPath: './assets/images/market.png',
           selectedIconPath: './assets/images/market_ac.png'
         },
         {
-          pagePath: 'pages/home/device/index',
-          text: '设备与视片',
+          pagePath: 'pages/home/film/index',
+          text: '视片',
           iconPath: './assets/images/device.png',
           selectedIconPath: './assets/images/device_ac.png'
         },

src/constants/counter.ts

 export const ADD_TEMP_LIST = 'ADD_TEMP_LIST'
 export const ADD_FILM_LIST = 'ADD_FILM_LIST'
 export const ADD_DEVICE_LIST = 'ADD_DEVICE_LIST'
+export const ADD_SHOP_LIST = 'ADD_SHOP_LIST'

src/pages/home/device/index.tsx

-import FilmList from './film_list'
+import ShopList from './shop_list'
 import DeviceList from './device_list'
 import { ComponentClass } from 'react'
 import { AtTabs, AtTabsPane } from 'taro-ui'
@@ -25,7 +25,7 @@ interface Device {
   state: PageState
 }
 
-const tabList = [{ title: '我的视片' }, { title: '我的设备' }]
+const tabList = [{ title: '我的设备' }, { title: '设备商城' }]
 class Device extends Component {
   config: Config = {
     navigationBarTitleText: '',
@@ -36,7 +36,7 @@ class Device extends Component {
 
     const { windowHeight } = Taro.getSystemInfoSync()
     this.state = {
-      current: 1,
+      current: 0,
       windowHeight: windowHeight - 43
     }
   }
@@ -51,12 +51,12 @@ class Device extends Component {
       <AtTabs current={current} tabList={tabList} onClick={this.changePage} swipeable={false}>
         <AtTabsPane current={current} index={0}>
           <View style={{ height: `${windowHeight}px` }}>
-            <FilmList height={windowHeight} />
+            <DeviceList height={windowHeight} />
           </View>
         </AtTabsPane>
         <AtTabsPane className="at-tabs-page" current={current} index={1}>
           <View style={{ height: `${windowHeight}px` }}>
-            <DeviceList height={windowHeight} />
+            <ShopList height={windowHeight} />
           </View>
         </AtTabsPane>
       </AtTabs>

src/pages/home/device/shop_list/index.scss

+@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;
+      }
+    }
+  }
+}

src/pages/home/device/shop_list/index.tsx

+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>

src/pages/home/film/film_list/index.scss

+@import '@styles/var.scss';
+
+.films {
+  width: 100%;
+  height: 100%;
+  background-color: $bgColor;
+
+  .scroll-view {
+    height: 100%;
+  }
+}

src/pages/home/film/film_list/index.tsx

+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>

src/pages/home/film/index.scss

+@import '@styles/var.scss';
+@import '~taro-ui/dist/style/components/tabs.scss';

src/pages/home/film/index.tsx

+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>

src/pages/home/film/my_film/index.scss

+.my-film {
+  width: 100%;
+  height: 100%;
+}

src/pages/home/film/my_film/index.tsx

+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>

src/pages/home/tempaltes/conpoments/temp_item/index.scss

@@ -9,10 +9,15 @@
   @include eject(display, block);
 
   width: 100%;
-  height: 185px;
+  height: 195px;
   background-color: #ccc;
 }
 
+.temp-img2 {
+  width: 100%;
+  height: 613px;
+}
+
 .temp-name {
   width: 100%;
   font-size: 28px;

src/pages/home/tempaltes/conpoments/temp_item/index.tsx

@@ -29,10 +29,14 @@ class TempItem extends Component {
   }
 
   render() {
-    const { templateName, templateUrl: url, filmName, equipmentCount } = this.props
+    const { templateName, templateUrl: url, filmName, equipmentCount, templateShow } = this.props
     return (
       <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>
         {equipmentCount !== undefined ? (
           <Text className="equipment-count">播放设备：{equipmentCount}台</Text>

src/pages/home/tempaltes/detail.tsx

@@ -73,6 +73,7 @@ class TempDetail extends Component {
         api.common.getTempDetailFilmList(templateId, this.page)
       ])
       const { list, count } = filmData
+      console.log(list, detailData)
       this.setState({
         count,
         filmDataList: list,
@@ -139,7 +140,7 @@ class TempDetail extends Component {
 
   render() {
     const { detailData, filmDataList, showModal, windowHeight, count } = this.state
-
+    console.log(detailData, filmDataList, 'render')
     return (
       <View
         className="temp-detail"
@@ -153,7 +154,7 @@ class TempDetail extends Component {
           ) : (
             <ListView
               count={count}
-              dataListLength={filmDataList.length}
+              dataListLength={filmDataList.length ? filmDataList.length : 1}
               pullingUp={done => this.pullingUp(done)}
               pullingDown={done => this.pullingDown(done)}
             >

src/pages/home/tempaltes/scss/temp-type.scss

@@ -27,11 +27,11 @@
     .type-item-btn {
       margin-right: 20px;
       margin-bottom: 20px;
-      font-size: 16px;
+      font-size: 20px;
     }
 
     &-list {
-      padding: 0 20px;
+      padding: 20px 0;
       // text-align: left;
       // display: flex;
       // flex-wrap: wrap;

src/pages/home/tempaltes/scss/type_detail.scss

@@ -14,6 +14,11 @@
 
     .radio-list__label {
       margin-right: 20px;
+
+      .activeTagBtn {
+        background: yellow;
+        color: white;
+      }
     }
   }
 
@@ -29,6 +34,11 @@
       margin-right: 20px;
       font-size: 30px !important;
     }
+
+    &-item-active {
+      color: white;
+      background: blue;
+    }
   }
 
   &-scroll {

src/pages/home/tempaltes/template_type_detail.tsx

@@ -50,6 +50,7 @@ class TemplateTypeDetail extends Component {
   constructor(props: any) {
     super(props)
     const typeId = this.$router.params.typeId
+    const tagId = this.$router.params.tagId
     this.state = {
       count: 0,
       typeData: [],
@@ -59,7 +60,7 @@ class TemplateTypeDetail extends Component {
       templateShow: 'HORIZONTAL',
       windowHeight: getWindiwHeight(),
       tempList: [],
-      tagId: '',
+      tagId: tagId ? tagId : '',
       tagsList: [
         {
           '': '全部'
@@ -177,7 +178,15 @@ class TemplateTypeDetail extends Component {
   }
 
   render() {
-    const { typeData, filmDataList, windowHeight, count, tagsList } = this.state
+    const {
+      typeData,
+      filmDataList,
+      windowHeight,
+      count,
+      tagsList,
+      tagId,
+      templateShow
+    } = this.state
     console.log(tagsList, filmDataList)
     return (
       <View
@@ -204,6 +213,7 @@ class TemplateTypeDetail extends Component {
                     />
                     <Button
                       size="mini"
+                      className={tagId === item.tagId ? 'activeTagBtn' : ''}
                       onClick={() => {
                         console.log('change')
                         this.tagIdChange(item.tagId)
@@ -221,7 +231,11 @@ class TemplateTypeDetail extends Component {
               return (
                 <Button
                   size="mini"
-                  className="type-list-item"
+                  className={
+                    item.typeName === templateShow
+                      ? 'type-list-item type-list-item-active'
+                      : 'type-list-item'
+                  }
                   key={item.typeName}
                   onClick={() => {
                     console.log('change')

src/pages/index.tsx

@@ -37,7 +37,7 @@ class Index extends Component {
     if (!toekn) {
       Taro.navigateTo({ url: '/pages/login/index' })
     } else {
-      Taro.switchTab({ url: '/pages/home/tempaltes/index' })
+      Taro.switchTab({ url: '/pages/home/device/index' })
     }
   }
 

src/reducers/counter.ts

-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 {
   filmId: string
@@ -7,6 +7,7 @@ export interface ITempItem {
   templateUrl: string
   templateName: string
   equipmentCount?: number
+  templateShow?: string
   clickItem?: () => void
 }
 export interface IInitialState {
@@ -28,6 +29,10 @@ const INITIAL_STATE = {
   filmData: {
     list: [],
     count: 0
+  },
+  shopData: {
+    list: [],
+    count: 0
   }
 }
 
@@ -48,6 +53,11 @@ export default function counter(state = INITIAL_STATE, action) {
         ...state,
         filmData: { list: action.list, count: action.count }
       }
+    case ADD_SHOP_LIST:
+      return {
+        ...state,
+        shopData: { list: action.list, count: action.count }
+      }
     default:
       return state
   }