优化 模板列表

project.config.json

 {
-  "miniprogramRoot": "./dist",
+	"miniprogramRoot": "dist/",
 	"projectname": "Vmatrix-client-taro",
 	"description": "",
 	"appid": "touristappid",
@@ -9,5 +9,8 @@
 		"postcss": false,
 		"minified": false
 	},
-  "compileType": "miniprogram"
+	"compileType": "miniprogram",
+	"simulatorType": "wechat",
+	"simulatorPluginLibVersion": {},
+	"condition": {}
 }
\ No newline at end of file

src/api/client.ts

@@ -8,7 +8,7 @@ interface IRequest {
   config?: AxiosRequestConfig
 }
 export class ApiClient {
-  protected request({ url, config, method = 'POST', data = {} }: IRequest): AxiosPromise<any> {
+  protected request({ url, config, method = 'POST', data = {} }: IRequest): any {
     return axios({
       url,
       data,

src/pages/home/tempaltes/index.less

@@ -14,13 +14,27 @@
 }
 
 .search {
-  height: 100%;
   padding: 0;
+  height: 100%;
   padding-left: 10;
   color: #969799;
   background-color: #f7f8fa;
 }
 
+.scroll-view-wrapper {
+  flex: 1;
+  height: 100;
+}
+
+.scroll-view {
+  height: 100%;
+  // display: flex;
+  // flex-wrap: wrap;
+  // flex-direction: row;
+  padding-left: 10;
+  padding-right: 10;
+}
+
 .list-wrapper {
   flex: 1;
 }

src/pages/home/tempaltes/index.tsx

 import { ComponentClass } from 'react'
+import TempItem from './temp_item/temp_item'
 import Taro, { Component, Config } from '@tarojs/taro'
-import { View, Text, Input, ScrollView } from '@tarojs/components'
+import { View, Text, Input, ScrollView, Image } from '@tarojs/components'
 import './index.less'
 import api from '../../../api'
 
@@ -10,8 +11,16 @@ type PageDispatchProps = {}
 
 type PageOwnProps = {}
 
+export interface ITempItem {
+  templateId: string
+  templateUrl: string
+  templateName: string
+}
+
 type PageState = {
-  name: string
+  dataList: ITempItem[]
+  page: number
+  count: number
 }
 
 type IProps = PageStateProps & PageDispatchProps & PageOwnProps
@@ -28,33 +37,45 @@ class Tempaltes extends Component {
   constructor(props) {
     super(props)
     this.state = {
-      name: '小红'
+      page: 1,
+      count: 0,
+      dataList: []
     }
   }
 
-  async componentDidMount() {
-    console.log('componentDidMount')
+  async componentWillMount() {
     try {
-      const res = await api.common.getTempList(1)
-      console.log({ res })
+      const { list, count } = await api.common.getTempList(this.state.page)
+      this.setState({
+        count,
+        dataList: list
+      })
     } catch (error) {
       console.log({ error })
     }
   }
 
+  shouldComponentUpdate(_nextProps, nextState) {
+    const { dataList } = nextState
+    const { dataList: Dl } = this.state
+    return Dl !== dataList
+  }
+
   render() {
-    console.log('componentDidMount')
+    const { dataList } = this.state
+    // console.warn({ dataList })
     return (
       <View className="tempaltes">
         <View className="search-bar">
           <Input className="search" placeholder="请输入搜索关键词" />
         </View>
-        <ScrollView>
-          <Text>111111111111111</Text>
+        <View className="scroll-view-wrapper">
+          <ScrollView className="scroll-view">
+            {dataList.map(item => (
+              <TempItem {...item} key={item.templateId} />
+            ))}
           </ScrollView>
-        {/* <View className="list-wrapper">
-          <Text>111111111111111</Text>
-        </View> */}
+        </View>
       </View>
     )
   }

src/pages/home/tempaltes/temp_item.tsx

-import { ComponentClass } from 'react'
-import Taro, { Component } from '@tarojs/taro'
-import { View, Text } from '@tarojs/components'
-import './index.less'
-
-type PageStateProps = {}
-
-type PageDispatchProps = {}
-
-type PageOwnProps = {}
-
-type PageState = {
-  name: string
-}
-
-type IProps = PageStateProps & PageDispatchProps & PageOwnProps
-
-interface Item {
-  props: IProps
-  state: PageState
-}
-
-class Item extends Component {
-  constructor(props) {
-    super(props)
-    this.state = {
-      name: '小红'
-    }
-  }
-
-  render() {
-    return (
-      <View className="item">
-        <Text>hello world</Text>
-      </View>
-    )
-  }
-}
-export default Item as ComponentClass<PageOwnProps, PageState>

src/pages/home/tempaltes/temp_item/temp_item.less

+.temp-item {
+  // self
+  width: 50%;
+  // background-color: black;
+}

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

+import { ComponentClass } from 'react'
+import Taro, { Component } from '@tarojs/taro'
+import { View, Text, Image } from '@tarojs/components'
+import './temp_item.less'
+import { ITempItem } from '..'
+
+type IProps = ITempItem
+
+interface PageState {}
+interface PageOwnProps {}
+
+interface TempItem {
+  props: IProps
+  state: PageState
+}
+
+class TempItem extends Component {
+  render() {
+    const { templateName, templateUrl: url } = this.props
+    return (
+      <View className="temp-item">
+        <Image src={url} />
+        <Text>{templateName}</Text>
+      </View>
+    )
+  }
+}
+export default TempItem as ComponentClass<PageOwnProps, PageState>