改 less 为 sass

.stylelintrc.js

 module.exports = {
   extends: 'stylelint-config-standard',
   // 使用的插件
-  // plugins: ['stylelint-less'],
+  plugins: ['stylelint-scss'],
   // 需要忽略的文件类型
-  ignoreFiles: ['node_modules/**/*', '**/*.md', '**/*.ts', '**/*.tsx', '**/*.js'],
+  ignoreFiles: ['node_modules/**/*.scss', '**/*.md', '**/*.ts', '**/*.tsx', '**/*.js'],
   rules: {
     indentation: 2,
-    'no-empty-source': null,
     'at-rule-no-unknown': null,
+    'scss/at-rule-no-unknown': true,
     'no-descending-specificity': null,
     'selector-type-no-unknown': null
   }

config/index.js

 const path = require('path')
 
 // NOTE 在 sass 中通过别名（@ 或 ~）引用需要指定路径
-const lessImporter = function (url) {
+const sassImporter = function (url) {
   if (url[0] === '~' && url[1] !== '/') {
     return {
       file: path.resolve(__dirname, '..', 'node_modules', url.substr(1))
@@ -10,7 +10,7 @@ const lessImporter = function (url) {
 
   const reg = /^@styles\/(.*)/
   return {
-    file: reg.test(url) ? path.resolve(__dirname, '..', 'src/styles', url.match(reg)[1]) : url
+    file: reg.test(url) ? path.resolve(__dirname, '..', 'src/constants/styles', url.match(reg)[1]) : url
   }
 }
 
@@ -32,6 +32,7 @@ const config = {
     '@/actions': path.resolve(__dirname, '..', 'src/actions'),
     '@/constants': path.resolve(__dirname, '..', 'src/constants'),
     '@/conpoments': path.resolve(__dirname, '..', 'src/conpoments'),
+    '@styles': path.resolve(__dirname, '..', 'src/constants/styles'),
   },
   plugins: {
     babel: {
@@ -47,8 +48,8 @@ const config = {
         'transform-object-rest-spread'
       ]
     },
-    less: {
-      importer: lessImporter
+    sass: {
+      importer: sassImporter
     }
   },
   defineConstants: {
@@ -117,8 +118,8 @@ const config = {
           }
         }
       },
-      lessLoaderOption: {
-        importer: lessImporter
+      sassLoaderOption: {
+        importer: sassImporter
       }
     }
   }

package.json

@@ -6,7 +6,7 @@
   "templateInfo": {
     "name": "redux",
     "typescript": true,
-    "css": "less"
+    "css": "sass"
   },
   "scripts": {
     "build:weapp": "taro build --type weapp",
@@ -21,7 +21,7 @@
     "dev:tt": "npm run build:tt -- --watch",
     "dev:h5": "npm run build:h5 -- --watch",
     "dev:rn": "npm run build:rn -- --watch",
-    "lint": "tslint --project ./tsconfig.json && stylelint \"./src/**/*.less\"",
+    "lint": "tslint --project ./tsconfig.json && stylelint \"./src/**/*.scss\"",
     "precommit": "npm run lint",
     "run:shell": "cd ../taro-native-shell/ && yarn android"
   },
@@ -51,7 +51,7 @@
   "devDependencies": {
     "@tarojs/plugin-babel": "1.3.12",
     "@tarojs/plugin-csso": "1.3.12",
-    "@tarojs/plugin-less": "1.3.12",
+    "@tarojs/plugin-sass": "1.3.12",
     "@tarojs/plugin-uglifyjs": "1.3.12",
     "@tarojs/webpack-runner": "1.3.12",
     "@types/react": "^16.4.8",
@@ -73,6 +73,7 @@
     "stylelint": "^10.1.0",
     "stylelint-config-standard": "^18.3.0",
     "stylelint-config-taro-rn": "1.3.12",
+    "stylelint-scss": "^3.9.3",
     "stylelint-taro-rn": "1.3.12",
     "tslint": "^5.17.0",
     "tslint-react": "^4.0.0",

src/api/common.ts

@@ -6,9 +6,15 @@ class UsersApi extends ApiClient {
     return this.request({ method: 'POST', url: `/template/get/list`, data: { p: page, c: 10 } })
   }
 
-  getTempDetail(id: string, page: number) {
+  /** 获取 模板详情 我的视频列表 */
+  getTempDetailFilmList(id: string, page: number) {
     return this.request({ method: 'GET', url: `/template/get/film/list/${id}?p=${page}&c=10` })
   }
+
+  /** 获取模板详情信息 */
+  getTempDetailData(id: string) {
+    return this.request({ method: 'GET', url: `/template/get/info/${id}` })
+  }
 }
 
 export default new UsersApi()

src/app.tsx

@@ -7,7 +7,7 @@ import Index from './pages/index'
 import configStore from './store'
 import token from './constants/token'
 
-import './app.less'
+import './app.scss'
 
 // 如果需要在 h5 环境中开启 React Devtools
 // 取消以下注释：

src/conpoments/modal/modal.scss

+.modal {
+  color: white;
+}

src/conpoments/modal/modal.tsx

+import { ComponentClass } from 'react'
+import Taro, { Component } from '@tarojs/taro'
+import { View, Text } from '@tarojs/components'
+import './modal.less'
+
+type PageStateProps = {}
+
+type PageDispatchProps = {}
+
+type PageOwnProps = {}
+
+type PageState = {}
+
+type IProps = PageStateProps & PageDispatchProps & PageOwnProps
+
+interface Modal {
+  props: IProps
+  state: PageState
+}
+
+class Modal extends Component {
+  render() {
+    return (
+      <View className="modal">
+        <Text>hello world</Text>
+      </View>
+    )
+  }
+}
+export default Modal as ComponentClass<PageOwnProps, PageState>

src/constants/components/pageView.tsx

@@ -3,7 +3,7 @@ import { View } from '@tarojs/components'
 import Taro, { Component } from '@tarojs/taro'
 import { getStatusBarHeight } from '../utils'
 
-import './less/pageView.less'
+import './scss/pageView.scss'
 
 type PageStateProps = {}
 

src/constants/less/var.less → src/constants/styles/var.scss

-@bdColor: #d9d9d9;
-@input-color: #323233;
+$bdColor: #f7f7f7;
+$text-color: #323233;
+$input-color: #323233;
+$primary-color: #1989fa;
 
-.border-bottom {
+@mixin border-bottom {
   border-style: solid;
   border-bottom-width: 1px;
   border-bottom-color: #ccc;

src/pages/home/index.tsx

@@ -4,7 +4,7 @@ import Taro, { Component, Config } from '@tarojs/taro'
 // import pagesTempaltes from './tempaltes'
 // import pagesDevice from './device'
 // import pagesUser from './user'
-import './index.less'
+import './index.scss'
 import { View, Text } from '@tarojs/components'
 
 /** RN 的 tabar */

src/pages/home/tempaltes/detail.tsx

+import api from '@/api/index'
+import { ITempItem } from '.'
 import { ComponentClass } from 'react'
 import Taro, { Component, Config } from '@tarojs/taro'
-import { View, Text } from '@tarojs/components'
-import './less/detail.less'
-import api from '../../../api'
-import { ITempItem } from '.'
+import { View, Text, Swiper, Image, ScrollView, Button } from '@tarojs/components'
+
+import './scss/detail.scss'
+
 type PageOwnProps = {}
+export interface IDetailData {
+  frameId: string
+  frameUrl: string
+  resourceId: string
+  resourceUrl: string
+  templateDescribe: string
+  templateId: string
+  templateName: string
+  templateUrl: string
+}
 
 type PageState = {
-  page: 1
+  page: number
+  count: number
+  detailData: any
+  templateId: string
+  filmDataList: any[]
 }
 
 interface TempDetail {
@@ -22,21 +38,63 @@ class TempDetail extends Component {
   constructor(props) {
     super(props)
     this.state = {
-      page: 1
+      page: 1,
+      count: 0,
+      detailData: {},
+      filmDataList: [],
+      templateId: this.$router.params.templateId
     }
   }
 
   async componentWillMount() {
-    const { templateId } = this.props
-    const res = await api.common.getTempDetail(templateId, 1)
-    console.log({ res })
+    const { templateId } = this.state
+    try {
+      const [detailData, filmData] = await Promise.all([
+        api.common.getTempDetailData(templateId),
+        api.common.getTempDetailFilmList(templateId, 1)
+      ])
+      const { list, count } = filmData
+      this.setState({
+        count,
+        filmDataList: list,
+        detailData: detailData
+      })
+    } catch (error) {
+      console.error(error)
+    }
+  }
+
+  createFilm = () => {
+
+  }
+
+  shouldComponentUpdate(_nextProps: ITempItem, _nextState: PageState) {
+    const { detailData, filmDataList } = this.state
+    const { detailData: _detailData, filmDataList: _filmDataList } = _nextState
+    return _filmDataList !== filmDataList || _detailData !== detailData
   }
 
   render() {
-    // console.log(window)
+    const { detailData, filmDataList } = this.state
+    const { templateUrl, templateName, templateDescribe } = detailData
     return (
-      <View className="TempDetail">
-        <Text>hello world</Text>
+      <View className="temp-detail">
+        <ScrollView scrollY className="scroll-view">
+          <View className="temp-top-info">
+            <Image className="temp-top-img" src={templateUrl} />
+            <View className="temp-top-text-wrapper">
+              <Text className="temp-top-title">{templateName}</Text>
+              <View>
+                <Text className="temp-top-describe">{templateDescribe}</Text>
+              </View>
+            </View>
+          </View>
+          <View className="temp-top-info-bar" />
+          <View className="film-list-warpper">
+            <Text>我的视片({filmDataList.length})</Text>
+          </View>
+        </ScrollView>
+        <Button type="primary" className="bottom-btn" onClick={this.createFilm} >创建视片</Button>
       </View>
     )
   }

src/pages/home/tempaltes/index.tsx

@@ -3,7 +3,7 @@ import TempItem from './temp_item'
 import Taro, { Component, Config } from '@tarojs/taro'
 import PageView from '@/constants/components/pageView'
 import { View, Text, Input, ScrollView, Image } from '@tarojs/components'
-import './less/index.less'
+import './scss/index.scss'
 import api from '@/api/index'
 import token from '@/constants/token'
 

src/pages/home/tempaltes/scss/detail.scss

+@import '@styles/var.scss';
+
+.temp-detail {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  background-color: white;
+}
+
+.scroll-view {
+  flex: 1;
+}
+
+.temp-top-img {
+  width: 100%;
+  // height: auto;
+}
+
+.temp-top-info-bar {
+  height: 20px;
+  background-color: $bdColor;
+}
+
+.temp-top-text-wrapper {
+  padding-left: 20px;
+  padding-bottom: 20px;
+}
+
+.temp-top-title {
+  font-size: 28px;
+  color: $text-color;
+}
+
+.temp-top-describe {
+  color: #ccc;
+  font-size: 26px;
+}
+
+.film-list-warpper {
+  padding-top: 20px;
+  padding-left: 20px;
+  padding-right: 20px;
+}
+
+.bottom-btn {
+  width: 100%;
+  font-size: 28px;
+  border-radius: 0;
+  background-color: $primary-color;
+}

src/pages/home/tempaltes/temp_item.tsx

 import { ComponentClass } from 'react'
 import Taro, { Component } from '@tarojs/taro'
 import { View, Text, Image } from '@tarojs/components'
-import './less/temp_item.less'
+import './scss/temp_item.scss'
 import { ITempItem } from '.'
 
 type IProps = ITempItem
@@ -17,7 +17,7 @@ interface TempItem {
 
 class TempItem extends Component {
   goDetail = () => {
-    const templateId = this.props
+    const { templateId } = this.props
     Taro.navigateTo({ url: `/pages/home/tempaltes/detail?templateId=${templateId}` })
   }
 

src/pages/login/index.tsx

@@ -8,7 +8,7 @@ import { checkPhone, showErrorToast } from '../../constants/utils'
 import Taro, { Component, Config } from '@tarojs/taro'
 import { View, Text, Input, Button, Checkbox, Label } from '@tarojs/components'
 
-import './login.less'
+import './login.scss'
 
 type PageStateProps = {
   counter: {

src/pages/login/login.less → src/pages/login/login.scss

-@import '../../constants/less/var.less';
+@import '@styles/var.scss';
 
 .login {
   width: 100%;
@@ -22,16 +22,16 @@
 }
 
 .user-phone {
-  .border-bottom;
+  @include border-bottom;
 }
 
 .user-phone-input {
   flex: 1;
-  color: @input-color;
+  color: $input-color;
 }
 
 .check-code {
-  .border-bottom;
+  @include border-bottom;
 
   flex-direction: row;
   align-items: center;

typings/global.d.ts

-declare module "*.png";
-declare module "*.gif";
-declare module "*.jpg";
-declare module "*.jpeg";
-declare module "*.svg";
-declare module "*.css";
-declare module "*.less";
-declare module "*.scss";
-declare module "*.sass";
-declare module "*.styl";
+declare module '*.png'
+declare module '*.gif'
+declare module '*.jpg'
+declare module '*.jpeg'
+declare module '*.svg'
+declare module '*.css'
+declare module '*.less'
+declare module '*.scss'
+declare module '*.sass'
+declare module '*.styl'
 
 // @ts-ignore
 declare const process: {
   env: {
-    TARO_ENV: 'weapp' | 'swan' | 'alipay' | 'h5' | 'rn' | 'tt';
-    [key: string]: any;
+    TARO_ENV: 'weapp' | 'swan' | 'alipay' | 'h5' | 'rn' | 'tt'
+    [key: string]: any
   }
 }