收藏模块

src/api/common.ts

+import { pages } from './../constants/router'
+import { createStore } from 'redux'
 import { FilmListItem } from '@/conpoments/film_list_item'
 import { ApiClient } from './client'
 
@@ -146,6 +148,37 @@ class UsersApi extends ApiClient {
       data: { equipmentId, filmId }
     })
   }
+  /** 添加收藏 */
+  createCollection(templateId: string) {
+    return this.request({
+      method: 'GET',
+      url: `/collect/add/info/${templateId}`
+    })
+  }
+  /** 查看收藏状态 */
+  getCollectionState(templateId: string) {
+    return this.request({
+      method: 'GET',
+      url: `/collect/get/id/${templateId}`
+    })
+  }
+  /** 取消收藏 */
+  cancelCollection(collectId: string) {
+    return this.request({
+      url: `/collect/del/info`,
+      data: { collectIds: [collectId] }
+    })
+  }
+  /** 获取收藏列表 */
+  getCollectionList(templateShow: string, page: number = 1, limit: number = 10) {
+    return this.request({
+      method: 'post',
+      url: `/collect/get/list?p=${page}&c=${limit}`,
+      data: {
+        templateShow
+      }
+    })
+  }
 }
 
 export default new UsersApi()

src/conpoments/collection_item/index.scss

+@import '@styles/var.scss';
+
+.films-item {
+  padding: 20px;
+  display: flex;
+  flex-direction: row;
+  background-color: white;
+
+  &-img-box {
+    width: 320px;
+
+    .films-item-img {
+      width: 100%;
+      height: 180px;
+    }
+  }
+
+  &-info {
+    flex: 1;
+    display: flex;
+    padding-left: 20px;
+    flex-direction: column;
+
+    &-name {
+      font-size: 32px;
+      color: #333;
+      margin-bottom: 30px;
+    }
+
+    &-count {
+      font-size: 22px;
+      color: #666;
+    }
+  }
+}

src/conpoments/collection_item/index.tsx

+import { ComponentClass } from 'react'
+import Taro, { Component } from '@tarojs/taro'
+import { View, Text, Image } from '@tarojs/components'
+import { IMilmListItme } from '@/pages/home/device/film_list'
+
+import './index.scss'
+
+type PageStateProps = {}
+
+type PageDispatchProps = {}
+
+interface PageOwnProps {
+  onClick?: () => void
+  templateId: string
+  templateName: string
+  templateUrl: string
+  templateShow: string
+  templateDescribe: string
+}
+
+type PageState = {}
+
+type IProps = PageStateProps & PageDispatchProps & PageOwnProps
+
+interface FilmListItem {
+  props: IProps
+  state: PageState
+}
+
+class FilmListItem extends Component {
+  render() {
+    let { templateUrl, templateName, onClick, templateDescribe } = this.props
+    templateUrl = templateUrl || ''
+    return (
+      <View className="films-item" onClick={() => onClick && onClick()}>
+        <View className="films-item-img-box">
+          <Image className="films-item-img" src={templateUrl.split(',')[0]} />
+        </View>
+        <View className="films-item-info">
+          <Text className="films-item-info-name">{templateName}</Text>
+          <Text className="films-item-info-count">{templateDescribe}</Text>
+        </View>
+      </View>
+    )
+  }
+}
+export default FilmListItem as ComponentClass<PageOwnProps, PageState>

src/pages/home/tempaltes/collection.tsx

@@ -7,17 +7,17 @@ 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 CollectionTtem from '@/conpoments/collection_item'
 
 import './scss/index.scss'
 
 type PageStateProps = {
-  list: any[]
-  count: number
+  list?: any[]
+  count?: number
 }
 
 type PageDispatchProps = {
-  getDeviceListData: (page: number) => void
+  getDeviceListData?: (page: number) => void
 }
 
 type PageOwnProps = {
@@ -25,15 +25,18 @@ type PageOwnProps = {
 }
 
 export interface IMilmListItme {
-  filmId: string
+  templateId: string
   filmName: string
   templateUrl: string
   equipmentCount: number
   showTempalte?: string
+  collectId?: string
 }
 
 interface PageState {
   showTempalte: string
+  list: any[]
+  count: number
 }
 
 type IProps = PageStateProps & PageDispatchProps & PageOwnProps
@@ -43,17 +46,6 @@ interface Collection {
   state: PageState
 }
 
-@connect(
-  ({ counter }) => {
-    const { list, count } = counter.deviceData
-    return { list, count }
-  },
-  dispacth => ({
-    getDeviceListData(page: number) {
-      dispacth(getDeviceList(page))
-    }
-  })
-)
 class Collection extends Component {
   config: Config = {
     navigationBarTitleText: '收藏列表'
@@ -62,7 +54,9 @@ class Collection extends Component {
   constructor(props) {
     super(props)
     this.state = {
-      showTempalte: 'HORIZONTAL'
+      showTempalte: 'HORIZONTAL',
+      count: 0,
+      list: []
     }
   }
   async componentWillMount() {
@@ -72,19 +66,40 @@ class Collection extends Component {
     this.getData()
   }
   async getData() {
-    this.props.getDeviceListData(this.page)
+    // this.props.getDeviceListData(this.page)
+    const { showTempalte, list } = this.state
+    api.common.getCollectionList(showTempalte, this.page).then(res => {
+      const { count } = res
+      const newList = res.list
+      if (this.page === 1) {
+        this.setState({
+          list: newList,
+          count
+        })
+      } else {
+        this.setState({
+          list: list.concat(newList),
+          count
+        })
+      }
+    })
   }
   typeChange(state) {
-    this.setState({
-      showTempalte: state
-    })
-    console.log(state)
+    this.setState(
+      {
+        showTempalte: state
+      },
+      async () => {
+        this.page = 1
+        await this.getData()
+      }
+    )
   }
-  async handleItem({ filmId }: IMilmListItme) {
+  async handleItem({ collectId }: IMilmListItme) {
     Taro.showModal({ content: '确定要删除？' }).then(async ({ confirm }) => {
       if (confirm) {
         try {
-          await api.common.removeFilm(filmId)
+          await api.common.cancelCollection(collectId)
           this.getData()
           showMyToast({ title: '删除成功~' })
         } catch (error) {
@@ -95,8 +110,8 @@ class Collection extends Component {
     })
   }
 
-  goDetail({ filmId }: IMilmListItme) {
-    Taro.navigateTo({ url: `/pages/home/tempaltes/film_detail?filmId=${filmId}` })
+  goDetail({ templateId }: IMilmListItme) {
+    Taro.navigateTo({ url: `/pages/home/tempaltes/detail?templateId=${templateId}` })
   }
 
   async onDownRefresh(done: any) {
@@ -113,17 +128,11 @@ class Collection extends Component {
     done()
   }
 
-  shouldComponentUpdate(nextProps: IProps) {
-    const { list } = this.props
-    const { list: _list } = nextProps
-    return true
-  }
-
   render() {
-    const { list, height, count } = this.props
-    const { showTempalte } = this.state
+    const { height } = this.props
+    const { list, count, showTempalte } = this.state
     return (
-      <View className="films">
+      <View className="films collections">
         <View className="temp-search-bar">
           <View className="type-tab">
             <Text
@@ -148,6 +157,16 @@ class Collection extends Component {
             >
               竖版
             </Text>
+            <Text
+              onClick={() => {
+                this.typeChange('OTHER')
+              }}
+              className={
+                showTempalte === 'OTHER' ? 'type-tab-item type-tab-item-active' : 'type-tab-item'
+              }
+            >
+              异形屏
+            </Text>
           </View>
         </View>
         <ListView
@@ -160,18 +179,22 @@ class Collection extends Component {
           {list.map(item => (
             <AtSwipeAction
               autoClose
-              key={item.filmId}
+              key={item.templateId}
               onClick={() => this.handleItem(item)}
               options={[
                 {
-                  text: '删除',
+                  text: '取消收藏',
                   style: {
                     backgroundColor: '#FF4949'
                   }
                 }
               ]}
             >
-              <FilmListItem onClick={() => this.goDetail(item)} {...item} />
+              <CollectionTtem
+                onClick={() => this.goDetail(item)}
+                {...item}
+                templateShow={showTempalte}
+              />
             </AtSwipeAction>
           ))}
         </ListView>

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

@@ -19,6 +19,8 @@
 .temp-top-text-wrapper {
   padding-left: 20px;
   padding-bottom: 20px;
+  padding-top: 20px;
+  position: relative;
 }
 
 .temp-top-title {
@@ -30,3 +32,11 @@
   color: #ccc;
   font-size: 26px;
 }
+
+.temp-top-collection {
+  width: 50px;
+  height: 50px;
+  position: absolute;
+  right: 30px;
+  top: 10px;
+}

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

 import { ComponentClass } from 'react'
 import Taro, { Component } from '@tarojs/taro'
 import { View, Text, Image, Swiper, SwiperItem } from '@tarojs/components'
-
+import api from '@/api/index.ts'
 import './index.scss'
 
 type PageStateProps = {}
@@ -13,9 +13,13 @@ type PageOwnProps = {
   templateName: string
   templateDescribe: string
   templateShow?: string
+  templateId?: string
 }
 
-type PageState = {}
+type PageState = {
+  collectionState: boolean
+  collectionId: string
+}
 
 type IProps = PageStateProps & PageDispatchProps & PageOwnProps
 
@@ -25,9 +29,67 @@ interface DerailTop {
 }
 
 class DerailTop extends Component {
+  public sendState = false
+  componentWillMount() {
+    const { templateId } = this.props
+    api.common.getCollectionState(String(templateId)).then(res => {
+      this.setState({
+        collectionId: res.data,
+        collectionState: !!res.data
+      })
+    })
+  }
+  toggleCollection() {
+    const { collectionState, collectionId } = this.state
+    const { templateId } = this.props
+    console.log(12313, !this.sendState)
+    if (!this.sendState) {
+      if (!collectionState) {
+        api.common
+          .createCollection(String(templateId))
+          .then(res => {
+            this.setState(
+              {
+                collectionId: res.data,
+                collectionState: !collectionState
+              },
+              () => {
+                this.sendState = false
+              }
+            )
+          })
+          .catch(() => {
+            this.sendState = false
+          })
+      } else {
+        api.common
+          .cancelCollection(String(collectionId))
+          .then(() => {
+            this.setState(
+              {
+                collectionState: !collectionState
+              },
+              () => {
+                this.sendState = false
+              }
+            )
+          })
+          .catch(() => {
+            this.sendState = false
+          })
+      }
+
+      this.sendState = true
+      console.log('toggleCollection')
+    }
+  }
   render() {
     let { templateUrl, templateName, templateDescribe, templateShow } = this.props
     templateUrl = templateUrl || ''
+    const { collectionState } = this.state
+    let collectionUrl = collectionState
+      ? 'http://visual-clouds.oss-cn-beijing.aliyuncs.com/miniprogram/collectionSelect.png'
+      : 'http://visual-clouds.oss-cn-beijing.aliyuncs.com/miniprogram/collection.png'
     return (
       <View className="derail-top">
         <View className="temp-top-info">
@@ -60,6 +122,13 @@ class DerailTop extends Component {
             <View>
               <Text className="temp-top-describe">{templateDescribe}</Text>
             </View>
+            <Image
+              className="temp-top-collection"
+              onClick={() => {
+                this.toggleCollection()
+              }}
+              src={collectionUrl}
+            />
           </View>
         </View>
         <View className="temp-top-info-bar" />

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

@@ -7,19 +7,25 @@ import './index.scss'
 interface IProps {
   detailData: any
   filmDataList: any[]
+  templateId?: string
 }
 
 export default function TempDetailContent(props: IProps) {
-  const { detailData, filmDataList } = props
+  const { detailData, filmDataList, templateId } = props
+  console.log(templateId, 'TempDetailContent')
+  if (!templateId) {
+    return null
+  }
   return (
     <View className="temp-detail">
-      <DetailTop {...detailData} />
-      <View className="temp-detail-list">
+      <DetailTop {...Object.assign(detailData, { templateId })} templateId2={templateId} />
+
+      {/* <View className="temp-detail-list">
         <Text className="temp-detail-list-title">我的视片({filmDataList.length})</Text>
         <View className="temp-detail-list-content">
           {filmDataList && filmDataList.map(item => <TempItem {...item} key={item.templateId} />)}
         </View>
-      </View>
+      </View> */}
     </View>
   )
 }

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

 @import '@styles/var.scss';
 
+.collections {
+  .temp-item {
+    width: 100%;
+    margin-bottom: 20px;
+    position: relative;
+  }
+}
+
 .temp-item {
   width: 339px;
   margin-bottom: 20px;

src/pages/home/tempaltes/detail.tsx

@@ -140,7 +140,7 @@ class TempDetail extends Component {
   }
 
   render() {
-    const { detailData, filmDataList, showModal, windowHeight, count } = this.state
+    const { detailData, filmDataList, showModal, windowHeight, count, templateId } = this.state
     console.log(detailData, filmDataList, 'render')
     return (
       <View
@@ -150,7 +150,11 @@ class TempDetail extends Component {
         <View className="temp-detail-scroll">
           {process.env.TARO_ENV === 'rn' ? (
             <ScrollView scrollY className="temp-detail-scroll-view">
-              <TempDetailContent detailData={detailData} filmDataList={filmDataList} />
+              <TempDetailContent
+                detailData={detailData}
+                filmDataList={filmDataList}
+                templateId={templateId}
+              />
             </ScrollView>
           ) : (
             <ListView
@@ -159,7 +163,11 @@ class TempDetail extends Component {
               pullingUp={done => this.pullingUp(done)}
               pullingDown={done => this.pullingDown(done)}
             >
-              <TempDetailContent detailData={detailData} filmDataList={filmDataList} />
+              <TempDetailContent
+                detailData={detailData}
+                filmDataList={filmDataList}
+                templateId={templateId}
+              />
               <View style={{ height: '20px' }} />
             </ListView>
           )}

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

@@ -105,3 +105,11 @@
 
   @include eject(box-sizing, border-box);
 }
+
+.collections {
+  .temp-item {
+    width: 100%;
+    margin-bottom: 20px;
+    position: relative;
+  }
+}