第一版

.gitignore

@@ -0,0 +1,6 @@
+dist/
+deploy_versions/
+.temp/
+.rn_temp/
+node_modules/
+.DS_Store

app_list.json

@@ -0,0 +1,32 @@
+{
+  "taroConfig": {
+    "version": "1.4.5",
+    "desc": "更改人物动漫化"
+  },
+  "app_list": [
+    {
+      "projectname": "AI绘画练习生",
+      "description": "AI绘画练习生",
+      "appid": "wxcf756553cfb65cb8",
+      "path_name": "project.config.json"
+    },
+    {
+      "projectname": "AI绘画实用工具",
+      "description": "AI绘画实用工具",
+      "appid": "tt93fde5400cc2d78401",
+      "path_name": "project.tt.json"
+    },
+    {
+      "projectname": "AI绘画练习生",
+      "description": "AI绘画练习生",
+      "appid": "tt8534f3891a0bf12e01",
+      "path_name": "project.tt.json"
+    },
+    {
+      "projectname": "AI绘画未来派",
+      "description": "AI绘画未来派",
+      "appid": "tta3fed5433cc1e78401",
+      "path_name": "project.tt.json"
+    }
+  ]
+}

auto_pack.py

@@ -0,0 +1,94 @@
+#!/usr/bin/python3
+# -*- coding:utf-8 -*-
+# __author__ = '__spring__'
+
+'''
+归因上报抖音数据的脚本
+
+'''
+
+import json
+import os
+
+
+class Handle:
+
+    def __init__(self):
+        pass
+    
+    """
+    将替换的字符串写到一个新的文件中，然后将原文件删除，新文件改为原来文件的名字
+    :param file: 文件路径
+    :param old_str: 需要替换的字符串
+    :param new_str: 替换的字符串
+    :return: None
+    """
+    def updateFile(self,file,old_str,new_str):
+        with open(file, "r", encoding="utf-8") as f1,open("%s.bak" % file, "w", encoding="utf-8") as f2:
+            for line in f1:
+                if old_str in line:
+                    line = line.replace(old_str, new_str)
+                f2.write(line)
+        os.remove(file)
+        os.rename("%s.bak" % file, file)
+    
+    def main(self):
+        # 读取需要打包的app 列表
+        with open('./app_list.json','r') as f :
+            data =  f.read()
+        data = json.loads(data)
+        app_list = data["app_list"]
+        tar_ver = data["taroConfig"]
+        
+        #读取版本号
+        with open('./package.json','r') as f :
+            package = f.read()
+            package =  json.loads(package)
+        
+        #更新版本号
+        with open('./package.json','w') as f :
+            package["taroConfig"] = tar_ver
+            json.dump(package,f,indent=4,ensure_ascii=False)
+            
+        
+        #遍历需要打包的应用
+        for app_info in app_list:
+            path_name = app_info["path_name"]
+            #读取配置文件
+            with open(path_name,'r') as f:
+                pro_data =  f.read()
+                pro_data = json.loads(pro_data)
+            #修改配置文件
+            with open(path_name,'w') as f:
+                pro_data["appid"] = app_info["appid"]
+                pro_data["projectname"] = app_info["projectname"]
+                pro_data["description"] = app_info["description"]
+                json.dump(pro_data,f,indent=4,ensure_ascii=False)
+            
+            #修改抖音自定义导航栏的样式
+            # self.updateFile("./src/pages/albums_play/index.config.js","custom","default")
+            if app_info["appid"].find("wx") > -1:
+                #修改打包插件的appid
+                self.updateFile("./config/index.js","__APPID__",app_info["appid"])
+                #修改抖音自定义导航栏的样式
+                # self.updateFile("./src/pages/albums_play/index.config.js","default","custom")
+                
+                #自己添加打包插件
+            self.updateFile("./config/index.js","plugins:[]",'plugins:[["@tarojs/plugin-mini-ci", CIPluginOpt]]')
+            
+            #开始运行打包命令
+            cmd = "npm run build:weapp_upload"
+            if path_name.find("tt") > 0:
+                cmd = "npm run build:tt_upload"
+            os.system(cmd) #执行命令
+            
+            if app_info["appid"].find("wx") > -1:
+                #修改打包插件的appid
+                self.updateFile("./config/index.js",app_info["appid"],"__APPID__")
+                
+            self.updateFile("./config/index.js",'plugins:[["@tarojs/plugin-mini-ci", CIPluginOpt]]',"plugins:[]")
+            
+        pass
+
+if __name__=='__main__':
+    Handle().main()

babel.config.js

@@ -0,0 +1,10 @@
+// babel-preset-taro 更多选项和默认值：
+// https://github.com/NervJS/taro/blob/next/packages/babel-preset-taro/README.md
+module.exports = {
+  presets: [
+    ['taro', {
+      framework: 'react',
+      ts: true
+    }]
+  ]
+}

config/dev.js

@@ -0,0 +1,9 @@
+module.exports = {
+  env: {
+    NODE_ENV: '"development"'
+  },
+  defineConstants: {
+  },
+  mini: {},
+  h5: {}
+}

config/index.js

@@ -0,0 +1,99 @@
+
+const appid_weapp = '__APPID__'
+const CIPluginOpt = {
+  // 微信小程序
+  weapp: {
+    appid: appid_weapp,
+    privateKeyPath: `./private/private.${appid_weapp}.key`
+  },
+  // 字节跳动小程序
+  tt: {
+    email: "func@fys1001.onexmail.com",
+    password: "lihai1243434798"
+  },
+}
+
+
+const config = {
+  projectName: 'myApp',
+  date: '2023-3-2',
+  designWidth: 750,
+  deviceRatio: {
+    640: 2.34 / 2,
+    750: 1,
+    828: 1.81 / 2
+  },
+  sourceRoot: 'src',
+  outputRoot: `dist/${process.env.TARO_ENV}`,
+  plugins:[],
+  defineConstants: {
+  },
+  copy: {
+    patterns: [
+    ],
+    options: {
+    }
+  },
+  framework: 'react',
+  compiler: 'webpack5',
+  cache: {
+    enable: false // Webpack 持久化缓存配置，建议开启。默认配置请参考：https://docs.taro.zone/docs/config-detail#cache
+  },
+  mini: {
+    postcss: {
+      pxtransform: {
+        enable: true,
+        config: {
+          selectorBlackList: [/van-/],
+        }
+      },
+      url: {
+        enable: true,
+        config: {
+          limit: 1024 // 设定转换尺寸上限
+        }
+      },
+      cssModules: {
+        enable: false, // 默认为 false，如需使用 css modules 功能，则设为 true
+        config: {
+          namingPattern: 'module', // 转换模式，取值为 global/module
+          generateScopedName: '[name]__[local]___[hash:base64:5]'
+        }
+      }
+    }
+  },
+  h5: {
+    publicPath: '/',
+    staticDirectory: 'static',
+    esnextModules: ['taro-ui'],
+    postcss: {
+      autoprefixer: {
+        enable: true,
+        config: {
+        }
+      },
+      cssModules: {
+        enable: false, // 默认为 false，如需使用 css modules 功能，则设为 true
+        config: {
+          namingPattern: 'module', // 转换模式，取值为 global/module
+          generateScopedName: '[name]__[local]___[hash:base64:5]'
+        }
+      }
+    }
+  },
+  rn: {
+    appName: 'taroDemo',
+    postcss: {
+      cssModules: {
+        enable: false, // 默认为 false，如需使用 css modules 功能，则设为 true
+      }
+    }
+  }
+}
+
+module.exports = function (merge) {
+  if (process.env.NODE_ENV === 'development') {
+    return merge({}, config, require('./dev'))
+  }
+  return merge({}, config, require('./prod'))
+}

config/prod.js

@@ -0,0 +1,37 @@
+module.exports = {
+  env: {
+    NODE_ENV: '"production"'
+  },
+  defineConstants: {
+  },
+  mini: {},
+  h5: {
+    /**
+     * WebpackChain 插件配置
+     * @docs https://github.com/neutrinojs/webpack-chain
+     */
+    // webpackChain (chain) {
+    //   /**
+    //    * 如果 h5 端编译后体积过大，可以使用 webpack-bundle-analyzer 插件对打包体积进行分析。
+    //    * @docs https://github.com/webpack-contrib/webpack-bundle-analyzer
+    //    */
+    //   chain.plugin('analyzer')
+    //     .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin, [])
+
+    //   /**
+    //    * 如果 h5 端首屏加载时间过长，可以使用 prerender-spa-plugin 插件预加载首页。
+    //    * @docs https://github.com/chrisvfritz/prerender-spa-plugin
+    //    */
+    //   const path = require('path')
+    //   const Prerender = require('prerender-spa-plugin')
+    //   const staticDir = path.join(__dirname, '..', 'dist')
+    //   chain
+    //     .plugin('prerender')
+    //     .use(new Prerender({
+    //       staticDir,
+    //       routes: [ '/pages/index/index' ],
+    //       postProcess: (context) => ({ ...context, outputPath: path.join(staticDir, 'index.html') })
+    //     }))
+    // }
+  }
+}

package.json

@@ -0,0 +1,87 @@
+{
+    "name": "myApp",
+    "version": "1.0.0",
+    "private": true,
+    "description": "liaotian ",
+    "templateInfo": {
+        "name": "redux",
+        "typescript": false,
+        "css": "less"
+    },
+    "scripts": {
+        "build:weapp": "taro build --type weapp",
+        "build:weapp_upload": "taro build --type weapp  --upload",
+        "build:swan": "taro build --type swan",
+        "build:alipay": "taro build --type alipay",
+        "build:tt": "taro build --type tt",
+        "build:tt_upload": "taro build --type tt  --upload",
+        "build:h5": "taro build --type h5",
+        "build:rn": "taro build --type rn",
+        "build:qq": "taro build --type qq",
+        "build:jd": "taro build --type jd",
+        "build:quickapp": "taro build --type quickapp",
+        "dev:weapp": "npm run build:weapp -- --watch",
+        "dev:swan": "npm run build:swan -- --watch",
+        "dev:alipay": "npm run build:alipay -- --watch",
+        "dev:tt": "npm run build:tt -- --watch",
+        "dev:h5": "npm run build:h5 -- --watch",
+        "dev:rn": "npm run build:rn -- --watch",
+        "dev:qq": "npm run build:qq -- --watch",
+        "dev:jd": "npm run build:jd -- --watch",
+        "dev:quickapp": "npm run build:quickapp -- --watch",
+        "deploy": "gh-pages -d dist"
+    },
+    "browserslist": [
+        "last 3 versions",
+        "Android >= 4.1",
+        "ios >= 8"
+    ],
+    "author": "",
+    "dependencies": {
+        "@babel/runtime": "^7.7.7",
+        "@tarojs/components": "3.5.7",
+        "@tarojs/helper": "3.5.7",
+        "@tarojs/plugin-framework-react": "3.5.7",
+        "@tarojs/plugin-platform-alipay": "3.5.7",
+        "@tarojs/plugin-platform-jd": "3.5.7",
+        "@tarojs/plugin-platform-qq": "3.5.7",
+        "@tarojs/plugin-platform-swan": "3.5.7",
+        "@tarojs/plugin-platform-tt": "3.5.7",
+        "@tarojs/plugin-platform-weapp": "3.5.7",
+        "@tarojs/react": "3.5.7",
+        "@tarojs/router": "3.5.7",
+        "@tarojs/runtime": "3.5.7",
+        "@tarojs/shared": "3.5.7",
+        "@tarojs/taro": "3.5.7",
+        "@tarojs/taro-h5": "^3.5.7",
+        "@vant/weapp": "^1.10.14",
+        "postcss": "^8.2.1",
+        "react": "^18.0.0",
+        "react-dom": "^18.0.0",
+        "taro-cropper": "^1.2.3",
+        "tt-ide-cli": "^0.1.15"
+    },
+    "devDependencies": {
+        "@babel/core": "^7.8.0",
+        "@pmmmwh/react-refresh-webpack-plugin": "^0.5.5",
+        "@tarojs/cli": "3.5.7",
+        "@tarojs/plugin-mini-ci": "3.5.7",
+        "@tarojs/webpack5-runner": "3.5.7",
+        "@types/react": "^18.0.0",
+        "@types/webpack-env": "^1.13.6",
+        "babel-preset-taro": "3.5.7",
+        "eslint": "^8.12.0",
+        "eslint-config-taro": "3.5.7",
+        "eslint-plugin-import": "^2.12.0",
+        "eslint-plugin-react": "^7.8.2",
+        "eslint-plugin-react-hooks": "^4.2.0",
+        "react-refresh": "^0.11.0",
+        "stylelint": "^14.4.0",
+        "taro-ui": "^3.0.0-alpha.9",
+        "webpack": "5.69.0"
+    },
+    "taroConfig": {
+        "version": "1.4.5",
+        "desc": "更改人物动漫化"
+    }
+}

private/private.wxcf756553cfb65cb8.key

@@ -0,0 +1,27 @@
+-----BEGIN RSA PRIVATE KEY-----
+MIIEpAIBAAKCAQEAtiXHmMyLeuv8l313XejSM01sTFJVU6clTXVA1qrCXjIway1z
+nnLW5P4get8lb2Uixojsot6Xy+b9Q+A95eCiuTDbTRtwonnP1pgxlzblkYjouGxg
+FNJ9ZkSTBBb4hF4Faskr3GglVt+4fLaxN2ey40op2okZ7FNRy8RT0hwpK1Aunf3n
+C4U+ChmSwbBT90CybPVjvcfeYbf4p25/BWa8yVogHnbzk4FhOSRYkuBhceZcjUlX
+6yBV3OzejtxGqy8aCD7JLOrmUeBF7wvKeapv9hvvGlZ5p4/BY9HAYf+iHGPh781/
+Vvww3sz6CGCz7tRjJ9YLWfzgsMydE6xJUxz0KQIDAQABAoIBAAEiSxPQci3ZukDX
+Lx8OjAB1wu7WtGFI8RqCWFz9wygC9/oy1j1uSZgzXNBnAzymTIkf4RlCeX9zeLAr
+fTcpJtowS603NoRMbdbQK77dQKCfUZOUWSTICq/QTXoBCpsIWtBHYFaG73SS//sG
+yCOoKZzwoUITCG5INoImPr9YHYl/e5bpKDZQ/E03md1+jyNCKOsS7TxK/5m/lXqM
+2hy6afFCaZgbFMf1i/8A5baXDSmLysTZNBw8zjeRw97h7vcsnbtpyHk1beVE3Zc6
+mbaytpcdT0BX6wLHDrpIvDvpiTwHnR19ay71oKGZweLxtFBgwjLpOe70jbe4sRVq
+5ImL1AECgYEA7ytsnPhoNkMQgbAH/suB1mZQHnGC1Kotx+BzQZoJsQYKXK2ujhIT
+1NCl25IFFWSiUWRvbRnctz9iRf4cgQr6/tKeKd3O5SxH53bb14VhYEjmP2lcQHEP
+eMSJJa+L9CYJG5MyCU7zt7LW4EG+5Q0EoEv1AewNmQeQ0XmqPM7fvFECgYEAwvce
+Y4DLEvHDXi+CSf3BQidezVEkejCFp+ioADFO0j4RvNdC0gd/JSkwPBHyCmwKHtYL
+gwLitPfnz1/uTHXMorhxAdLvY9iRjhix3g+gGJGqKaJwluTjuzs6eanP0qB9MZdA
+r4UDteQwJeJ/IuirAc+w0hmM+a9AT0w4Cbs5vFkCgYEAqOtDj+4GNGTTcLUyQGvd
+bN7gMVA8dhUntma5IJk5xRSeFuz4PxFXflRLADQ2cPCdj9zesfC1KZuTvhmGakGm
+GnoJCUrGiKfotPsGtEZZCxcRv7GbXUw9AC/XKY29zBddEWO50Ec57QFbsBHfUIkM
+PmbHSa89v1pPlxNWABKghLECgYBEhs1UlgFKsFVF9pbp4NoboXDt45ZZqFJiGSFr
+p+kXdp+Pa23eGqpy6k483uXfCehovD0hmFMM3pHIzuQYVdNOYlu+E2D3DDjk5AMo
+lP9lg1V2+tRuBReSSJgeCTS1yJkYZBxlVPBf70uJFVowb+0jXte8kSR+4j1NYfHU
+Yc1CSQKBgQCtJidMaU0+iN56nuGtOIgV/UwhhZ/v1d1ylJUcwYhB3BCCgq8oi6Rs
+ucFkuPlAcOodDaSj+jysSgh7mMYoBTfYPhWvehalw2yWKe9HuwcscVlw2nrx3uaR
+VSCO4/R1/rJ1oHcXvMdusqPH66iwkT2PPvg+NNlDpXnOu1LSyHwEIw==
+-----END RSA PRIVATE KEY-----

project.config.json

@@ -0,0 +1,29 @@
+{
+    "miniprogramRoot": "dist/weapp/",
+    "projectname": "AI绘画练习生",
+    "description": "AI绘画练习生",
+    "appid": "wxcf756553cfb65cb8",
+    "setting": {
+        "urlCheck": true,
+        "es6": false,
+        "postcss": false,
+        "minified": false,
+        "babelSetting": {
+            "ignore": [],
+            "disablePlugins": [],
+            "outputPath": ""
+        }
+    },
+    "compileType": "miniprogram",
+    "libVersion": "2.26.0",
+    "srcMiniprogramRoot": "dist/",
+    "packOptions": {
+        "ignore": [],
+        "include": []
+    },
+    "condition": {},
+    "editorSetting": {
+        "tabIndent": "insertSpaces",
+        "tabSize": 2
+    }
+}

project.tt.json

@@ -0,0 +1,12 @@
+{
+    "miniprogramRoot": "./",
+    "projectname": "指尖文学",
+    "appid": "ttfea9881461917a8a01",
+    "setting": {
+        "urlCheck": true,
+        "es6": false,
+        "postcss": false,
+        "minified": false
+    },
+    "description": "指尖文学"
+}

src/api/config.js

@@ -0,0 +1,8 @@
+// 配置请求对象
+// 本地调试 dev 开发阶段
+// export const baseUrl = "https://test-api-book.fyshark.com";//测试
+export const baseUrl = "https://api-book.fyshark.com";//正式
+// product 阶段
+// https://www.fastmock.site/mock/3f112f6cb2f621fc9c2dd6a14be19f38/beers/
+// 设计模式
+

src/api/request.js

@@ -0,0 +1,52 @@
+import Taro from '@tarojs/taro';
+import ttappid from '../../project.tt.json'
+import wxappid from '../../project.config.json'
+import {
+  baseUrl
+} from './config';
+
+
+export default (options = {
+  method: 'GET',
+  data: {}
+}) => {
+  const request_data = {
+    session_key: Taro.getStorageSync('session_key') || '',
+    channel_name: Taro.getStorageSync('channel_name') || 'channel_name',
+    source_name: Taro.getStorageSync('source_name') || 'source_name',
+  };
+  if (process.env.TARO_ENV === 'weapp') {
+    request_data['appid'] = wxappid.appid
+  } else if (process.env.TARO_ENV === 'tt') {
+    request_data['appid'] = ttappid.appid
+  }
+  return Taro.request({
+    url: baseUrl + options.url,
+    data: {
+      ...request_data,
+      ...options.data,
+    },
+    header: {
+      'Content-Type': 'application/json',
+      'accept': 'application/json'
+    },
+    method: options.method.toUpperCase(),
+  }).then(res => {
+    const {
+      statusCode,
+      data
+    } = res;
+    const _res = Taro.getStorageInfoSync()
+    let notApiStr = '/api/get_app_config;/api/login;/api/report_login;/api/video/video_detail;/api/pay/get_my_wallet;/api/get_template_list'
+    
+    if (statusCode == 200) {
+      return data;
+    } else {
+      Taro.showToast({
+        title: `${res.msg}~`,
+        icon: 'none',
+        mask: true,
+      });
+    }
+  });
+};

src/app.config.js

@@ -0,0 +1,52 @@
+
+import Taro from '@tarojs/taro'
+export default defineAppConfig({
+  pages: [
+    'pages/index/index',
+    'pages/index/subpages/search/index',
+    'pages/index/subpages/novel/index',
+    'pages/index/subpages/novelText/index',
+    'pages/index/subpages/directory/index',
+    "pages/mine/index",
+    "pages/mine/subpages/history/index",
+    "pages/mine/subpages/vipDetail/index",
+    "pages/mine/subpages/makeMoney/index",
+    "pages/mine/subpages/withdrawal/index",
+    "pages/mine/subpages/team/index",
+    "pages/mine/subpages/moneyPlay/index",
+    'pages/collection/index'
+  ],
+  window: {
+    backgroundTextStyle: 'light',
+    navigationBarBackgroundColor: '#FFFFFF',
+    navigationBarTitleText: 'AI绘画',
+    navigationBarTextStyle: 'black',
+    backgroundColor: "#FFFFFF"
+  },
+  tabBar: {
+    color: "#888888",
+    selectedColor: "#E04A4A",
+    borderStyle: "white",
+    backgroundColor: "#FFFFFF",
+    list: [
+      {
+        pagePath: "pages/collection/index",
+        iconPath: "images/nav/like.png",
+        selectedIconPath: "images/nav/like_pin.png",
+        text: "书架"
+      },
+      {
+        pagePath: "pages/index/index",
+        iconPath: "images/nav/play.png",
+        selectedIconPath: "images/nav/play_pin.png",
+        text: "书城"
+      },
+      {
+        pagePath: "pages/mine/index",
+        iconPath: "images/nav/my.png",
+        selectedIconPath: "images/nav/my_pin.png",
+        text: "我的"
+      }
+    ]
+  },
+})

src/app.js

@@ -0,0 +1,55 @@
+import { Component } from 'react'
+import tool from './common/tool'
+import Taro, { getCurrentInstance } from '@tarojs/taro'
+// import 'taro-ui/dist/style/index.scss'
+import './app.less'
+
+class App extends Component {
+  $instance = getCurrentInstance()
+  componentDidMount () { }
+
+  componentDidShow () {
+
+  }
+  onLaunch () {
+    console.log('app启动');
+    if (!Taro.getStorageSync('session_key')) {
+      tool.toLogin();
+    }
+    
+    // 保持屏幕常亮
+    Taro.setKeepScreenOn({
+      keepScreenOn: true
+    })
+    // 获取路由参数
+    let params = this.$instance.router.params
+    if (params.scene) {
+      let _scene = decodeURIComponent(params.scene)
+      const arr = _scene.split("=");
+      const result1 = arr[1].split("&")[0]; // 去掉第二个等号后面的"&"符号
+      const result2 = arr[2]; // 第三个等号后面的内容
+      Taro.setStorageSync('channel_name', result1)
+      Taro.setStorageSync('source_name', result2)
+    }
+    let item = params
+    if (params.c) {
+      Taro.setStorageSync('channel_name', item.c)
+    }
+    if (params.s) {
+      Taro.setStorageSync('source_name', item.s)
+    }
+    tool.reportLogin()
+    Taro.setKeepScreenOn({
+      keepScreenOn: true
+    })
+  }
+
+  componentDidHide () { }
+
+  render () {
+    // this.props.children 是将要会渲染的页面
+    return this.props.children
+  }
+}
+
+export default App

src/common/tool.js

@@ -0,0 +1,133 @@
+import Taro from '@tarojs/taro'
+import * as api from '../service/index'
+const tool = {
+  shareTitle: '一款属于自己的AI绘画小程序，快来创作属于自己的独家作品吧。',
+  shareImg: 'http://video-img.fyshark.com/1680599995457%E5%88%86%E4%BA%AB%E5%9B%BE%20200-200.png',
+  //去登录
+  toLogin: function (rescallback = () => { }) {
+    Taro.login({
+      success: function (res) {
+        let params = {
+          code: res.code,
+        }
+        console.log(res.code, 'res.code');
+        if (res.code) {
+          api.login(params).then(item => {
+            Taro.setStorage({
+              key: "session_key",
+              data: item.data.session_key
+            })
+            Taro.setStorage({
+              key: "user_id",
+              data: item.data.id
+            })
+          })
+        } else {
+        }
+      }
+    })
+  },
+  //上报渠道信息
+  reportLogin:function(){
+    api.reportLogin()
+  },
+  // 生成四位随机数的函数
+  generateRandomNumber () {
+    // 生成一个 0 到 9999 之间的随机整数
+    const randomNumber = Math.floor(Math.random() * 10000);
+    // 如果随机数不足四位，则在前面补零
+    return randomNumber.toString().padStart(4, '0');
+  },
+  //判断不为安卓
+  notAndroid: function () {
+    let is_ios = false;
+    Taro.getSystemInfo({
+      success: function (res) {
+        if (res.platform != "android") {
+          is_ios = true
+        }
+      }
+    })
+    console.log(is_ios, 'is_ios');
+    return is_ios;
+  },
+  //判断是否为安卓
+  isAndroid: function () {
+    let is_android = false;
+    Taro.getSystemInfo({
+      success: function (res) {
+        if (res.platform == "android") {
+          is_android = true
+        }
+      }
+    })
+    return is_android;
+  },
+  // 生成用户ID的函数
+  generateUserID () {
+    // 获取当前时间戳
+    const timestamp = Date.now().toString();
+    // 生成四位随机数
+    const randomNumber = this.generateRandomNumber();
+    // 将时间戳和随机数拼接起来，得到用户ID
+    const userID = timestamp + randomNumber;
+    console.log(userID, 'userID');
+    return userID;
+  },
+  /**
+* 限制字符串长度
+* value:字符串对象
+* lmit:展示的长度
+*/
+  ellipsis: function (value, lmit) {
+    if (!value) return ''
+    if (value.length > lmit) {
+      return value.slice(0, lmit) + '...'
+    }
+    return value
+  },
+
+  //简化版js节流，默认2s内只能点击一次
+  throttle: function (fn, wait = 2000) {
+    let timer = null;
+    let lastTime = 0;
+    console.log('节流');
+    return function (...args) {
+      const now = +new Date();
+
+      if (now - lastTime > wait) {
+        lastTime = now;
+        fn.apply(this, args);
+      } else {
+        clearTimeout(timer);
+        timer = setTimeout(() => {
+          lastTime = now;
+          fn.apply(this, args);
+        }, wait - (now - lastTime));
+      }
+    };
+  },
+  //标准时间转年月日
+  formattedDate: function (time) {
+    // 创建一个表示中国标准时间的日期对象
+    var date = new Date(time);
+
+    // 提取年、月、日信息
+    var year = date.getFullYear();
+    var month = date.getMonth() + 1; // 月份从0开始，因此需要加1
+    var day = date.getDate();
+
+    // 将月份和日期转换为两位数格式
+    if (month < 10) {
+      month = "0" + month;
+    }
+    if (day < 10) {
+      day = "0" + day;
+    }
+
+    // 构建年月日字符串
+    var formattedDate = year + "-" + month + "-" + day + "";
+    return formattedDate
+  }
+}
+export default tool

src/component/taro-plugin-canvas/index.css

@@ -0,0 +1,16 @@
+.canvas {
+  width: 750rpx;
+  height: 750rpx;
+}
+.canvas.pro {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  transform: translate3d(-9999rpx, 0, 0);
+}
+.canvas.debug {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  border: 1rpx solid #ccc;
+}

src/component/taro-plugin-canvas/index.tsx

@@ -0,0 +1,322 @@
+import Taro, { CanvasContext } from '@tarojs/taro';
+import { Component } from 'react'
+import PropTypes from 'prop-types';
+import { Canvas } from '@tarojs/components';
+import { randomString, getHeight, downloadImageAndInfo } from './utils/tools';
+import {
+  drawImage,
+  drawText,
+  drawBlock,
+  drawLine,
+} from './utils/draw';
+import { IConfig, IIMage } from './types';
+import './index.css';
+
+interface ICanvasDrawerProps {
+  config: IConfig;
+  onCreateSuccess: (res: any) => void;
+  onCreateFail: (err: Error) => void;
+}
+
+interface ICanvasDrawerState {
+  pxWidth: number;
+  pxHeight: number;
+  debug: boolean;
+  factor: number;
+  pixelRatio: number;
+}
+
+
+let count = 1;
+export default class CanvasDrawer extends Component<ICanvasDrawerProps, ICanvasDrawerState> {
+  cache: any;
+  drawArr: any[];
+  canvasId: string;
+  ctx: CanvasContext | null;
+
+  static propTypes = {
+    config: PropTypes.object.isRequired,
+    onCreateSuccess: PropTypes.func.isRequired,
+    onCreateFail: PropTypes.func.isRequired,
+  };
+
+  static defaultProps = {};
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      pxWidth: 0,
+      pxHeight: 0,
+      debug: false,
+      factor: 0,
+      pixelRatio: 1,
+    }
+    this.canvasId = randomString(10);
+    this.ctx = null;
+    this.cache = {};
+    this.drawArr = [];
+  }
+
+  componentWillMount() {
+    const { config } = this.props;
+    const height = getHeight(config);
+    this.initCanvas(config.width, height, config.debug);
+  }
+
+  componentDidMount() {
+    const sysInfo = Taro.getSystemInfoSync();
+    const screenWidth = sysInfo.screenWidth;
+    this.setState({
+      factor: screenWidth / 750
+    })
+    this.onCreate();
+  }
+
+  componentWillUnmount() { }
+
+  /**
+   * @description rpx => px 基础方法
+   * @param { number } rpx - 需要转换的数值
+   * @param { boolean} int - 是否为 int
+   * @param { number } [factor = this.state.factor] - 转化因子
+   * @returns { number }
+   */
+  toPx = (rpx: number, int: boolean = false, factor: number = this.state.factor) => {
+    if (int) {
+      return Math.ceil(rpx * factor * this.state.pixelRatio);
+    }
+    return rpx * factor * this.state.pixelRatio;
+  }
+  /**
+   * @description px => rpx
+   * @param { number } px - 需要转换的数值
+   * @param { boolean} int - 是否为 int
+   * @param { number } [factor = this.state.factor] - 转化因子
+   * @returns { number }
+   */
+  toRpx = (px: number, int: boolean = false, factor: number = this.state.factor) => {
+    if (int) {
+      return Math.ceil(px / factor);
+    }
+    return px / factor;
+  }
+
+  /**
+   * @description 下载图片并获取图片信息
+   * @param  {} image
+   * @param  {} index
+   */
+  _downloadImageAndInfo = (image: IIMage, index: number, pixelRatio: number) => {
+    return new Promise<any>((resolve, reject) => {
+      downloadImageAndInfo(image, index, this.toRpx, pixelRatio)
+        .then(
+          (result) => {
+            this.drawArr.push(result);
+            resolve(result);
+          }
+        )
+        .catch(err => {
+          console.log(err);
+          reject(err)
+        });
+    })
+  }
+  /**
+   * @param  {} images=[]
+   */
+  downloadResource = ({ images = [], pixelRatio = 1 }: { images: IIMage[], pixelRatio: number }) => {
+    const drawList: any[] = [];
+    let imagesTemp = images;
+
+    imagesTemp.forEach((image, index) => drawList.push(this._downloadImageAndInfo(image, index, pixelRatio)));
+
+    return Promise.all(drawList);
+  }
+
+  /**
+   * @param
+   */
+  downloadResourceTransit = () => {
+    const { config } = this.props;
+    return new Promise<any>((resolve, reject) => {
+      if (config.images && config.images.length > 0) {
+        this.downloadResource({
+          images: config.images,
+          pixelRatio: config.pixelRatio || 1,
+        })
+          .then(() => {
+            resolve();
+          })
+          .catch((e) => {
+            // console.log(e);
+            reject(e)
+          });
+      } else {
+        setTimeout(() => {
+          resolve(1);
+        }, 500)
+      }
+    })
+  }
+
+  initCanvas = (w, h, debug) => {
+    return new Promise<void>((resolve) => {
+      this.setState({
+        pxWidth: this.toPx(w),
+        pxHeight: this.toPx(h),
+        debug,
+      }, resolve);
+    });
+  }
+
+  onCreate = () => {
+    const { onCreateFail, config } = this.props;
+    if (config['hide-loading'] === false) {
+      Taro.showLoading({ mask: true, title: '生成中...' });
+    }
+    return this.downloadResourceTransit()
+      .then(() => {
+        this.create(config);
+      })
+      .catch((err) => {
+        config['hide-loading'] && Taro.hideLoading();
+        Taro.showToast({ icon: 'none', title: err.errMsg || '下载图片失败' });
+        console.error(err);
+        if (!onCreateFail) {
+          console.warn('您必须实现 taro-plugin-canvas 组件的 onCreateFail 方法，详见文档 https://github.com/chuyun/taro-plugin-canvas#fail');
+        }
+        onCreateFail && onCreateFail(err);
+      })
+  }
+
+  create = (config) => {
+    this.ctx = Taro.createCanvasContext(this.canvasId, this.$scope);
+    const height = getHeight(config);
+    // 设置 pixelRatio
+    this.setState({
+      pixelRatio: config.pixelRatio || 1,
+    }, () => {
+      this.initCanvas(config.width, height, config.debug)
+        .then(() => {
+          // 设置画布底色
+          if (config.backgroundColor) {
+            this.ctx!.save();
+            this.ctx!.setFillStyle(config.backgroundColor);
+            this.ctx!.fillRect(0, 0, this.toPx(config.width), this.toPx(height));
+            this.ctx!.restore();
+          }
+          const {
+            texts = [],
+            // images = [],
+            blocks = [],
+            lines = [],
+          } = config;
+          const queue = this.drawArr
+            .concat(texts.map((item) => {
+              item.type = 'text';
+              item.zIndex = item.zIndex || 0;
+              return item;
+            }))
+            .concat(blocks.map((item) => {
+              item.type = 'block';
+              item.zIndex = item.zIndex || 0;
+              return item;
+            }))
+            .concat(lines.map((item) => {
+              item.type = 'line';
+              item.zIndex = item.zIndex || 0;
+              return item;
+            }));
+          // 按照顺序排序
+          queue.sort((a, b) => a.zIndex - b.zIndex);
+
+          queue.forEach((item) => {
+            let drawOptions = {
+              ctx: (this.ctx as CanvasContext),
+              toPx: this.toPx,
+              toRpx: this.toRpx,
+            }
+            if (item.type === 'image') {
+              if (drawOptions.ctx !== null) {
+                drawImage(item, drawOptions);
+              }
+            } else if (item.type === 'text') {
+              if (drawOptions.ctx !== null) {
+                drawText(item, drawOptions)
+              }
+            } else if (item.type === 'block') {
+              if (drawOptions.ctx !== null) {
+                drawBlock(item, drawOptions)
+              }
+
+            } else if (item.type === 'line') {
+              if (drawOptions.ctx !== null) {
+                drawLine(item, drawOptions)
+              }
+            }
+          });
+
+          const res = Taro.getSystemInfoSync();
+          const platform = res.platform;
+          let time = 0;
+          if (platform === 'android') {
+            // 在安卓平台，经测试发现如果海报过于复杂在转换时需要做延时，要不然样式会错乱
+            time = 300;
+          }
+          this.ctx!.draw(false, () => {
+            setTimeout(() => {
+              this.getTempFile(null);
+            }, time);
+          });
+        })
+        .catch((err) => {
+          Taro.showToast({ icon: 'none', title: err.errMsg || '生成失败' });
+          console.error(err);
+        });
+    });
+
+  }
+
+  getTempFile = (otherOptions) => {
+    const { onCreateSuccess, onCreateFail } = this.props;
+    Taro.canvasToTempFilePath({
+      canvasId: this.canvasId,
+      success: (result) => {
+        if (!onCreateSuccess) {
+          console.warn('您必须实现 taro-plugin-canvas 组件的 onCreateSuccess 方法，详见文档 https://github.com/chuyun/taro-plugin-canvas#success');
+        }
+        onCreateSuccess && onCreateSuccess(result);
+      },
+      fail: (error) => {
+        const { errMsg } = error;
+        console.log(errMsg)
+        if (errMsg === 'canvasToTempFilePath:fail:create bitmap failed') {
+          count += 1;
+          if (count <= 3) {
+            this.getTempFile(otherOptions);
+          } else {
+            if (!onCreateFail) {
+              console.warn('您必须实现 taro-plugin-canvas 组件的 onCreateFail 方法，详见文档 https://github.com/chuyun/taro-plugin-canvas#fail');
+            }
+            onCreateFail && onCreateFail(error);
+          }
+        }
+      },
+    }, this.$scope);
+  }
+
+  render() {
+    const { pxWidth, pxHeight, debug } = this.state;
+    if (pxWidth && pxHeight) {
+      return (
+        <Canvas
+          canvasId={this.canvasId}
+          style={`width:${pxWidth}px; height:${pxHeight}px;`}
+          className={`${debug ? 'debug' : 'pro'} canvas`}
+        />
+      );
+    }
+    return null;
+  }
+}
+

src/component/taro-plugin-canvas/types.ts

@@ -0,0 +1,84 @@
+
+export interface IConfig {
+  width: number;
+  height: number;
+  backgroundColor?: string;
+  debug?: boolean;
+  pixelRatio?: number;
+  preload?: boolean;
+  'hide-loading'?: boolean;
+  blocks?: IBlock[];
+  texts?: IText[];
+  images?: IIMage[];
+  lines?: ILine[];
+}
+
+
+export interface IBlock {
+  x: number;
+  y: number;
+  width?: number;
+  height: number;
+  paddingLeft?: number;
+  paddingRight?: number;
+  borderWidth?: number;
+  borderColor?: string;
+  backgroundColor?: string;
+  borderRadius?: number;
+  text?: IText;
+  opacity?: number;
+  zIndex?: number;
+}
+
+export interface IText {
+  x: number;
+  y: number;
+  text: string | {
+    text: string;
+    marginLeft: number;
+    marginRight: number;
+  };
+  fontSize: number;
+  color?: string;
+  opacity?: 1 | 0;
+  lineHeight?: number;
+  lineNum?: number;
+  width?: number;
+  marginLeft?: number;
+  marginRight?: number;
+  textDecoration?: 'line-through' | 'none';
+  baseLine?: 'top' | 'middle' | 'bottom';
+  textAlign?: 'left' | 'center' | 'right';
+  fontFamily?: string;
+  fontWeight?: string;
+  fontStyle?: string;
+  zIndex?: number;
+}
+
+export interface IIMage {
+  x: number;
+  y: number;
+  url: string;
+  width: number;
+  height: number;
+  borderRadius?: number;
+  borderWidth?: number;
+  borderColor?: string;
+  zIndex?: number;
+}
+
+export interface ILine {
+  startX: number;
+  startY: number;
+  endX: number;
+  endY: number;
+  width: number;
+  color?: string;
+  zIndex?: number;
+}
+
+export type IDrawType = 'text' | 'image' | 'block' | 'line';
+
+export type IDrawArrayItem = {
+  type?: IDrawType;
+} & (ILine | IIMage | IBlock | IText);

src/component/taro-plugin-canvas/utils/draw.ts

@@ -0,0 +1,394 @@
+
+import { CanvasContext } from "@tarojs/taro";
+import { IText, IIMage, ILine, IBlock } from '../types';
+
+export interface IDrawRadiusRectData {
+  x: number;
+  y: number;
+  w: number;
+  h: number;
+  r: number;
+}
+
+export interface IDrawOptions {
+  ctx: CanvasContext;
+  toPx: (rpx: number, int?: boolean, factor?: number) => number;
+  toRpx: (px: number, int?: boolean, factor?: number) => number;
+}
+
+/**
+  * @description 绘制圆角矩形
+  * @param { object } drawData - 绘制数据
+  * @param { number } drawData.x - 左上角x坐标
+  * @param { number } drawData.y - 左上角y坐标
+  * @param { number } drawData.w - 矩形的宽
+  * @param { number } drawData.h - 矩形的高
+  * @param { number } drawData.r - 圆角半径
+  */
+export function _drawRadiusRect(drawData: IDrawRadiusRectData, drawOptions: IDrawOptions) {
+  const { x, y, w, h, r } = drawData;
+  const {
+    ctx,
+    toPx,
+    // toRpx,
+  } = drawOptions;
+  const br = r / 2;
+  ctx.beginPath();
+  ctx.moveTo(toPx(x + br), toPx(y));    // 移动到左上角的点
+  ctx.lineTo(toPx(x + w - br), toPx(y));
+  ctx.arc(toPx(x + w - br), toPx(y + br), toPx(br), 2 * Math.PI * (3 / 4), 2 * Math.PI * (4 / 4))
+  ctx.lineTo(toPx(x + w), toPx(y + h - br));
+  ctx.arc(toPx(x + w - br), toPx(y + h - br), toPx(br), 0, 2 * Math.PI * (1 / 4))
+  ctx.lineTo(toPx(x + br), toPx(y + h));
+  ctx.arc(toPx(x + br), toPx(y + h - br), toPx(br), 2 * Math.PI * (1 / 4), 2 * Math.PI * (2 / 4))
+  ctx.lineTo(toPx(x), toPx(y + br));
+  ctx.arc(toPx(x + br), toPx(y + br), toPx(br), 2 * Math.PI * (2 / 4), 2 * Math.PI * (3 / 4))
+}
+
+
+/**
+ * @description 计算文本长度
+ * @param { Array | Object } text 数组 或者 对象
+ */
+export function _getTextWidth(_text: IText | IText[], drawOptions: IDrawOptions): number {
+  const { ctx, toPx, toRpx } = drawOptions;
+  let texts: IText[] = [];
+  if (Array.isArray(_text)) {
+    texts = _text;
+  } else {
+    texts.push(_text);
+  }
+  let width = 0;
+  texts.forEach(({
+    fontSize,
+    text,
+    marginLeft = 0,
+    marginRight = 0
+  }) => {
+    ctx.setFontSize(toPx(fontSize));
+    let _textWidth = 0;
+    if (typeof text === 'object') {
+      _textWidth = ctx.measureText(text.text).width + text.marginLeft + text.marginRight;
+    } else {
+      _textWidth = ctx.measureText(text).width;
+    }
+    width += _textWidth + marginLeft + marginRight;
+  })
+  return toRpx(width);
+}
+
+
+/**
+  * @description 渲染一段文字
+  * @param { object } drawData - 绘制数据
+  * @param { number } drawData.x - x坐标 rpx
+  * @param { number } drawData.y - y坐标 rpx
+  * @param { number } drawData.fontSize - 文字大小 rpx
+  * @param { number } [drawData.color] - 颜色
+  * @param { string } [drawData.baseLine] - 基线对齐方式 top| middle|bottom
+  * @param { string } [drawData.textAlign='left'] - 对齐方式 left|center|right
+  * @param { string } drawData.text - 当Object类型时，参数为 text 字段的参数，marginLeft、marginRight这两个字段可用
+  * @param { number } [drawData.opacity=1] - 1为不透明，0为透明
+  * @param { string } [drawData.textDecoration='none']
+  * @param { number } [drawData.width] - 文字宽度 没有指定为画布宽度
+  * @param { number } [drawData.lineNum=1] - 根据宽度换行，最多的行数
+  * @param { number } [drawData.lineHeight=0] - 行高
+  * @param { string } [drawData.fontWeight='normal'] - 'bold' 加粗字体，目前小程序不支持 100 - 900 加粗
+  * @param { string } [drawData.fontStyle='normal'] - 'italic' 倾斜字体
+  * @param { string } [drawData.fontFamily="sans-serif"] - 小程序默认字体为 'sans-serif', 请输入小程序支持的字体
+  */
+
+interface IDrawSingleTextData extends IText {
+}
+export function _drawSingleText(drawData: IDrawSingleTextData, drawOptions: IDrawOptions) {
+  let { x, y, fontSize, color, baseLine, textAlign = 'left', text, opacity = 1, textDecoration = 'none',
+    width = 0, lineNum = 1, lineHeight = 0, fontWeight = 'normal', fontStyle = 'normal', fontFamily = "sans-serif" } = drawData;
+  const { ctx, toPx } = drawOptions;
+  ctx.save();
+  ctx.beginPath();
+  ctx.font = fontStyle + " " + fontWeight + " " + toPx(fontSize, true) + "px " + fontFamily
+  ctx.setGlobalAlpha(opacity);
+  // ctx.setFontSize(toPx(fontSize));
+  if (typeof text === 'object') {
+    text = text.text
+  }
+
+  color && ctx.setFillStyle(color);
+  baseLine && ctx.setTextBaseline(baseLine);
+  ctx.setTextAlign(textAlign);
+  let textWidth = (ctx.measureText(text as string).width);
+  const textArr: string[] = [];
+  let drawWidth = toPx(width);
+  if (width && textWidth > drawWidth) {
+    // 文本宽度 大于 渲染宽度
+    let fillText = '';
+    let line = 1;
+    for (let i = 0; i <= (text as string).length - 1; i++) {  // 将文字转为数组，一行文字一个元素
+      fillText = fillText + text[i];
+      if ((ctx.measureText(fillText).width) >= drawWidth) {
+        if (line === lineNum) {
+          if (i !== (text as string).length - 1) {
+            fillText = fillText.substring(0, fillText.length - 1) + '...';
+          }
+        }
+        if (line <= lineNum) {
+          textArr.push(fillText);
+        }
+        fillText = '';
+        line++;
+      } else {
+        if (line <= lineNum) {
+          if (i === (text as string).length - 1) {
+            textArr.push(fillText);
+          }
+        }
+      }
+    }
+    textWidth = width;
+  } else {
+    textArr.push(text as string);
+  }
+
+  textArr.forEach((item, index) => {
+    ctx.fillText(item, toPx(x), toPx(y + (lineHeight || fontSize) * index));
+  })
+  ctx.restore();
+  // textDecoration
+  if (textDecoration !== 'none') {
+    let lineY = y;
+    if (textDecoration === 'line-through') {
+      // 目前只支持贯穿线
+      lineY = y;
+      // 小程序画布baseLine偏移阈值
+      let threshold = 5;
+
+      // 根据baseLine的不同对贯穿线的Y坐标做相应调整
+      switch (baseLine) {
+        case 'top':
+          lineY += fontSize / 2 + threshold;
+          break;
+        case 'middle':
+          break;
+        case 'bottom':
+          lineY -= fontSize / 2 + threshold;
+          break;
+        default:
+          lineY -= fontSize / 2 - threshold;
+          break;
+      }
+    }
+    ctx.save();
+    ctx.moveTo(toPx(x), toPx(lineY));
+    ctx.lineTo(toPx(x) + toPx(textWidth), toPx(lineY));
+    color && ctx.setStrokeStyle(color);
+    ctx.stroke();
+    ctx.restore();
+  }
+  return textWidth;
+}
+
+/**
+ * 渲染文字
+ * @param { object } params - 绘制数据
+ * @param { number } params.x - x坐标 rpx
+ * @param { number } params.y - y坐标 rpx
+ * @param { number } params.fontSize - 文字大小 rpx
+ * @param { number } [params.color] - 颜色
+ * @param { string } [params.baseLine] - 基线对齐方式 top| middle|bottom
+ * @param { string } [params.textAlign='left'] - 对齐方式 left|center|right
+ * @param { string } params.text - 当Object类型时，参数为 text 字段的参数，marginLeft、marginRight这两个字段可用
+ * @param { number } [params.opacity=1] - 1为不透明，0为透明
+ * @param { string } [params.textDecoration='none']
+ * @param { number } [params.width] - 文字宽度 没有指定为画布宽度
+ * @param { number } [params.lineNum=1] - 根据宽度换行，最多的行数
+ * @param { number } [params.lineHeight=0] - 行高
+ * @param { string } [params.fontWeight='normal'] - 'bold' 加粗字体，目前小程序不支持 100 - 900 加粗
+ * @param { string } [params.fontStyle='normal'] - 'italic' 倾斜字体
+ * @param { string } [params.fontFamily="sans-serif"] - 小程序默认字体为 'sans-serif', 请输入小程序支持的字体
+ */
+export function drawText(params: IText, drawOptions: IDrawOptions) {
+  // const { ctx, toPx, toRpx } = drawOptions;
+  const {
+    x,
+    y, text, baseLine,
+    // fontSize,
+    // color,
+    // textAlign,
+    // opacity = 1,
+    // width,
+    // lineNum,
+    // lineHeight
+  } = params;
+  if (Array.isArray(text)) {
+    let preText = { x, y, baseLine };
+    text.forEach(item => {
+      preText.x += item.marginLeft || 0;
+      const textWidth = _drawSingleText(Object.assign(item, {
+        ...preText,
+      }), drawOptions);
+      preText.x += textWidth + (item.marginRight || 0); // 下一段字的 x 轴为上一段字 x + 上一段字宽度
+    })
+  } else {
+    _drawSingleText(params, drawOptions);
+  }
+}
+
+export interface IDrawImageData extends IIMage {
+  imgPath: string;
+  w: number;
+  h: number;
+  sx: number;
+  sy: number;
+  sw: number;
+  sh: number;
+}
+
+/**
+ * @description 渲染图片
+ * @param { object } data
+ * @param { number } x - 图像的左上角在目标 canvas 上 x 轴的位置
+ * @param { number } y - 图像的左上角在目标 canvas 上 y 轴的位置
+ * @param { number } w - 在目标画布上绘制图像的宽度，允许对绘制的图像进行缩放
+ * @param { number } h - 在目标画布上绘制图像的高度，允许对绘制的图像进行缩放
+ * @param { number } sx - 源图像的矩形选择框的左上角 x 坐标
+ * @param { number } sy - 源图像的矩形选择框的左上角 y 坐标
+ * @param { number } sw - 源图像的矩形选择框的宽度
+ * @param { number } sh - 源图像的矩形选择框的高度
+ * @param { number } [borderRadius=0] - 圆角
+ * @param { number } [borderWidth=0] - 边框
+ */
+export function drawImage(data: IDrawImageData, drawOptions: IDrawOptions) {
+  const { ctx, toPx } = drawOptions;
+  const { imgPath, x, y, w, h, sx, sy, sw, sh, borderRadius = 0, borderWidth = 0, borderColor } = data;
+  ctx.save();
+  if (borderRadius > 0) {
+    let drawData = {
+      x, y, w, h,
+      r: borderRadius
+    };
+    _drawRadiusRect(drawData, drawOptions);
+    ctx.strokeStyle = 'rgba(255,255,255,0)';
+    ctx.stroke();
+    ctx.clip();
+    ctx.drawImage(imgPath, toPx(sx), toPx(sy), toPx(sw), toPx(sh), toPx(x), toPx(y), toPx(w), toPx(h));
+    if (borderWidth > 0) {
+      borderColor && ctx.setStrokeStyle(borderColor);
+      ctx.setLineWidth(toPx(borderWidth));
+      ctx.stroke();
+    }
+  } else {
+    ctx.drawImage(imgPath, toPx(sx), toPx(sy), toPx(sw), toPx(sh), toPx(x), toPx(y), toPx(w), toPx(h));
+  }
+  ctx.restore();
+}
+
+/**
+ * @description 渲染线
+ * @param  { number } startX - 起始坐标
+ * @param  { number } startY - 起始坐标
+ * @param  { number } endX - 终结坐标
+ * @param  { number } endY - 终结坐标
+ * @param  { number } width - 线的宽度
+ * @param  { string } [color] - 线的颜色
+ */
+export function drawLine(drawData: ILine, drawOptions: IDrawOptions) {
+  const { startX, startY, endX, endY, color, width } = drawData;
+  const { ctx, toPx } = drawOptions;
+  ctx.save();
+  ctx.beginPath();
+  color && ctx.setStrokeStyle(color);
+  ctx.setLineWidth(toPx(width));
+  ctx.moveTo(toPx(startX), toPx(startY));
+  ctx.lineTo(toPx(endX), toPx(endY));
+  ctx.stroke();
+  ctx.closePath();
+  ctx.restore();
+}
+
+/**
+* @description 渲染块
+* @param  { number } x - x坐标
+* @param  { number } y - y坐标
+* @param  { number } height -高
+* @param  { string|object } [text] - 块里面可以填充文字，参考texts字段
+* @param  { number } [width=0] - 宽 如果内部有文字，由文字宽度和内边距决定
+* @param  { number } [paddingLeft=0] - 内左边距
+* @param  { number } [paddingRight=0] - 内右边距
+* @param  { number } [borderWidth] - 边框宽度
+* @param  { string } [backgroundColor] - 背景颜色
+* @param  { string } [borderColor] - 边框颜色
+* @param  { number } [borderRadius=0] - 圆角
+* @param  { number } [opacity=1] - 透明度
+*
+*/
+export function drawBlock(blockData: IBlock, drawOptions: IDrawOptions) {
+  const { ctx, toPx, } = drawOptions;
+  const { text, width = 0, height, x, y, paddingLeft = 0, paddingRight = 0, borderWidth, backgroundColor, borderColor, borderRadius = 0, opacity = 1 } = blockData;
+  // 判断是否块内有文字
+  let blockWidth = 0; // 块的宽度
+  let textX = 0;
+  let textY = 0;
+  if (typeof text !== 'undefined') {
+    // 如果有文字并且块的宽度小于文字宽度，块的宽度为 文字的宽度 + 内边距
+    // const textWidth = _getTextWidth(typeof text.text === 'string' ? text : text.text, drawOptions);
+    const textWidth: number = _getTextWidth(text, drawOptions);
+    blockWidth = textWidth > width ? textWidth : width;
+    blockWidth += paddingLeft + paddingLeft;
+
+    const {
+      textAlign = 'left',
+      // text: textCon,
+    } = text;
+    textY = height / 2 + y; // 文字的y轴坐标在块中线
+    if (textAlign === 'left') {
+      // 如果是右对齐，那x轴在块的最左边
+      textX = x + paddingLeft;
+    } else if (textAlign === 'center') {
+      textX = blockWidth / 2 + x;
+    } else {
+      textX = x + blockWidth - paddingRight;
+    }
+  } else {
+    blockWidth = width;
+  }
+
+  if (backgroundColor) {
+    // 画面
+    ctx.save();
+    ctx.setGlobalAlpha(opacity);
+    ctx.setFillStyle(backgroundColor);
+    if (borderRadius > 0) {
+      // 画圆角矩形
+      let drawData = {
+        x, y, w: blockWidth, h: height, r: borderRadius
+      };
+      _drawRadiusRect(drawData, drawOptions);
+      ctx.fill();
+    } else {
+      ctx.fillRect(toPx(x), toPx(y), toPx(blockWidth), toPx(height));
+    }
+    ctx.restore();
+  }
+  if (borderWidth) {
+    // 画线
+    ctx.save();
+    ctx.setGlobalAlpha(opacity);
+    borderColor && ctx.setStrokeStyle(borderColor);
+    ctx.setLineWidth(toPx(borderWidth));
+    if (borderRadius > 0) {
+      // 画圆角矩形边框
+      let drawData = {
+        x, y, w: blockWidth, h: height, r: borderRadius,
+      }
+      _drawRadiusRect(drawData, drawOptions);
+      ctx.stroke();
+    } else {
+      ctx.strokeRect(toPx(x), toPx(y), toPx(blockWidth), toPx(height));
+    }
+    ctx.restore();
+  }
+
+  if (text) {
+    drawText(Object.assign(text, { x: textX, y: textY }), drawOptions)
+  }
+}

src/component/taro-plugin-canvas/utils/tools.ts

@@ -0,0 +1,204 @@
+import Taro from '@tarojs/taro';
+import { IConfig } from '../types';
+/**
+ * @description 生成随机字符串
+ * @param  { number } length - 字符串长度
+ * @returns { string }
+ */
+export const randomString = (length: number) => {
+  let str = Math.random().toString(36).substr(2);
+  if (str.length >= length) {
+    return str.substr(0, length);
+  }
+  str += randomString(length - str.length);
+  return str;
+}
+
+/**
+ * @description 获取最大高度
+ * @param  {} config
+ * @returns { number }
+ */
+export const getHeight = (config: IConfig) => {
+  const getTextHeight = (text) => {
+    let fontHeight = text.lineHeight || text.fontSize;
+    let height = 0;
+    if (text.baseLine === 'top') {
+      height = fontHeight;
+    } else if (text.baseLine === 'middle') {
+      height = fontHeight / 2;
+    } else {
+      height = 0;
+    }
+    return height;
+  }
+  const heightArr: number[] = [];
+  (config.blocks || []).forEach((item) => {
+    heightArr.push(item.y + item.height);
+  });
+  (config.texts || []).forEach((item) => {
+    let height;
+    height = getTextHeight(item);
+    heightArr.push(item.y + height);
+  });
+  (config.images || []).forEach((item) => {
+    heightArr.push(item.y + item.height);
+  });
+  (config.lines || []).forEach((item) => {
+    heightArr.push(item.startY);
+    heightArr.push(item.endY);
+  });
+  const sortRes = heightArr.sort((a, b) => b - a);
+  let canvasHeight = 0;
+  if (sortRes.length > 0) {
+    canvasHeight = sortRes[0];
+  }
+  if (config.height < canvasHeight || !config.height) {
+    return canvasHeight;
+  } else {
+    return config.height;
+  }
+}
+
+
+/**
+ * 将http转为https
+ * @param {String}} rawUrl 图片资源url
+ * @returns { string }
+ */
+export function mapHttpToHttps(rawUrl: string) {
+  if (rawUrl.indexOf(':') < 0) {
+    return rawUrl;
+  }
+  const urlComponent = rawUrl.split(':');
+  if (urlComponent.length === 2) {
+    if (urlComponent[0] === 'http') {
+      urlComponent[0] = 'https';
+      return `${urlComponent[0]}:${urlComponent[1]}`;
+    }
+  }
+  return rawUrl;
+}
+
+/**
+ * 下载图片资源
+ * @param { string } imageUrl
+ * @returns  { Promise }
+ */
+export function downImage(imageUrl: string) {
+  return new Promise<string>((resolve, reject) => {
+    // if (/^http/.test(imageUrl) && !new RegExp(wx.env.USER_DATA_PATH).test(imageUrl))
+    if (
+      /^http/.test(imageUrl) &&
+      // @ts-ignore
+      !new RegExp((wx as any).env.USER_DATA_PATH).test(imageUrl) &&
+      !/^http:\/\/tmp/.test(imageUrl)
+    ) {
+      Taro.downloadFile({
+        url: (imageUrl),
+        // TODO
+        // url: mapHttpToHttps(imageUrl),
+        success: (res) => {
+          if (res.statusCode === 200) {
+            resolve(res.tempFilePath);
+          } else {
+            reject(res.errMsg);
+          }
+        },
+        fail(err) {
+          reject(err);
+        },
+      });
+    } else {
+      // 支持本地地址
+      resolve(imageUrl);
+    }
+  });
+}
+
+export interface IMageInfo {
+  imgPath: string;
+  imgInfo: any;
+  index: number | string;
+}
+
+
+/**
+ * 获取图片信息
+ * @param {*} imgPath
+ * @param {*} index
+ * @returns  { Promise }
+ */
+export function getImageInfo(imgPath: string, index: string) {
+  return new Promise<IMageInfo>((resolve, reject) => {
+    Taro.getImageInfo({
+      src: imgPath
+    })
+      .then(res => {
+        resolve({
+          imgPath,
+          imgInfo: res,
+          index
+        });
+      })
+      .catch(err => {
+        reject(err);
+      })
+  });
+}
+
+/**
+* @description 下载图片并获取图片信息
+* @param  {} image
+* @param  {} index
+* @returns  { Promise }
+*/
+export function downloadImageAndInfo(image, index, toRpxFunc, pixelRatio) {
+  return new Promise<any>((resolve, reject) => {
+    const { x, y, url, zIndex } = image;
+    const imageUrl = url;
+    // 下载图片
+    downImage(imageUrl)
+      // 获取图片信息
+      .then(imgPath => getImageInfo(imgPath, index))
+      .then(({ imgPath, imgInfo }) => {
+        // 根据画布的宽高计算出图片绘制的大小，这里会保证图片绘制不变形
+        let sx;
+        let sy;
+        const borderRadius = image.borderRadius || 0;
+        const setWidth = image.width;
+        const setHeight = image.height;
+        const width = toRpxFunc(imgInfo.width / pixelRatio);
+        const height = toRpxFunc(imgInfo.height / pixelRatio);
+
+        if (width / height <= setWidth / setHeight) {
+          sx = 0;
+          sy = (height - ((width / setWidth) * setHeight)) / 2;
+        } else {
+          sy = 0;
+          sx = (width - ((height / setHeight) * setWidth)) / 2;
+        }
+        let result = {
+          type: 'image',
+          borderRadius,
+          borderWidth: image.borderWidth,
+          borderColor: image.borderColor,
+          zIndex: typeof zIndex !== 'undefined' ? zIndex : index,
+          imgPath,
+          sx,
+          sy,
+          sw: (width - (sx * 2)),
+          sh: (height - (sy * 2)),
+          x,
+          y,
+          w: setWidth,
+          h: setHeight,
+        }
+        resolve(result);
+      })
+      .catch(err => {
+        console.log(err);
+        reject(err)
+      });
+  });
+}

src/index.html

@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
+  <meta content="width=device-width,initial-scale=1,user-scalable=no" name="viewport">
+  <meta name="apple-mobile-web-app-capable" content="yes">
+  <meta name="apple-touch-fullscreen" content="yes">
+  <meta name="format-detection" content="telephone=no,address=no">
+  <meta name="apple-mobile-web-app-status-bar-style" content="white">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" >
+  <title>myApp</title>
+  <style>
+    page{
+      background-color: #041129;
+    }
+  </style>
+  <script><%= htmlWebpackPlugin.options.script %></script>
+</head>
+<body>
+  <div id="app"></div>
+</body>
+</html>

src/pages/collection/index.config.js

@@ -0,0 +1,5 @@
+export default definePageConfig({
+  navigationBarTitleText: '书架',
+  enableShareAppMessage: true,
+  enableShareTimeline: true ,
+})

src/pages/collection/index.jsx

@@ -0,0 +1,196 @@
+import { Component } from 'react'
+import { View, Text, Button, Image, scrollView, Input } from '@tarojs/components'
+import * as api from '../../service/index'
+import tool from '../../common/tool'
+import Taro, { } from '@tarojs/taro'
+import './index.less'
+
+export default class collection extends Component {
+  state = {
+    bookList: [],
+    isEdit: false,
+    isOverSelect: false
+  }
+
+  componentWillMount () {
+  }
+  componentDidShow () {
+    Taro.showLoading({
+      title: '加载中',
+    })
+    if (!Taro.getStorageSync('session_key')) {
+      setTimeout(() => {
+        this.myBookFollow()
+      }, 1000)
+    } else {
+      this.myBookFollow()
+    }
+  }
+  myBookFollow () {
+    api.myBookFollow().then(res => {
+      Taro.hideLoading()
+      if (res.code == 200) {
+        this.setState({
+          bookList: res.data
+        })
+      }
+    })
+  }
+  changeEdit () {
+    this.setState({
+      isEdit: true
+    })
+  }
+  cancelEdit () {
+    let _bookList = this.state.bookList
+    _bookList.forEach((item, index) => {
+      item.isSelect = false
+    })
+    this.setState({
+      bookList: _bookList,
+      isOverSelect: false,
+      isEdit: false
+    })
+  }
+  deleteEdit () {
+    let that = this
+    Taro.showModal({
+      title: '提示',
+      content: '确定删除吗？',
+      success: function (res) {
+        if (res.confirm) {
+          let book_ids = []
+          that.state.bookList.forEach(item => {
+            if (item.isSelect) {
+              book_ids.push(item.book_id)
+            }
+          })
+          api.deleteBookCollect({ book_ids: book_ids.toString() }).then(res => {
+            if (res.code == 200) {
+              that.myBookFollow()
+              that.setState({
+                isEdit: false,
+                isOverSelect: false
+              })
+            }
+          })
+        } else if (res.cancel) {
+          console.log('用户点击取消')
+        }
+
+      }
+    })
+
+
+
+  }
+  overSelect () {
+    let _bookList = this.state.bookList
+    _bookList.forEach((item, index) => {
+      item.isSelect = !this.state.isOverSelect
+    })
+    this.setState({
+      bookList: _bookList,
+      isOverSelect: !this.state.isOverSelect,
+    })
+  }
+  changeSelect (item, index) {
+    console.log(item);
+    if (!this.state.isEdit) {
+      Taro.navigateTo({
+        url: `/pages/index/subpages/novelText/index?book_id=${item.book_id}`
+      })
+    } else {
+      let _bookList = this.state.bookList
+      _bookList.forEach((item, i) => {
+        if (index == i) {
+          item.isSelect = !this.state.bookList[index].isSelect
+        }
+      })
+
+      this.setState({
+        bookList: _bookList
+      }, () => {
+        let list = this.state.bookList.filter(res => {
+          return !res.isSelect
+        })
+        if (list.length == 0) {
+          this.setState({
+            isOverSelect: true
+          })
+        } else {
+          this.setState({
+            isOverSelect: false
+          })
+        }
+      })
+    }
+  }
+  addBooks () {
+    Taro.navigateTo({
+      url: '/pages/index/subpages/search/index'
+    })
+  }
+
+  render () {
+    return (
+      <View className='mine'>
+        {
+          this.state.bookList.length == 0 ?
+            <View className='empty'>
+              <Image className='empty-img' src='https://video-img.fyshark.com/1683801289275slsll.png'></Image>
+              <View className='empty-tips'>书架暂时没有书哦！</View>
+              <View className='add' onClick={e => (this.addBooks())}>去添加</View>
+            </View>
+            :
+            <View>
+
+              {
+                !this.state.isEdit ?
+                  <View className='edit'>
+                    <View className='edit-content' onClick={e => (this.changeEdit())}>
+
+                      <Image className='edit-img' src='https://video-img.fyshark.com/1683687193883dhksjn.png'></Image>
+                      编辑
+                    </View>
+                  </View>
+                  :
+                  <View className='select'>
+                    <View className='select-content' onClick={e => (this.overSelect())}>
+                      <Image className='select-img' src={this.state.isOverSelect ? 'https://video-img.fyshark.com/1683698925516hnakjl.png' : 'https://video-img.fyshark.com/1683698074122dhkahj.png'}></Image>
+                      全选
+                    </View>
+                  </View>
+              }
+              <View className='content'>
+                {
+                  this.state.bookList.map((item, index) => (
+                    <View className='content-info' key={index} onClick={e => (this.changeSelect(item, index))}>
+                      <View className='info-image'>
+                        <Image className='info-img' mode='widthFix' src={item.img}></Image>
+                        {
+                          this.state.isEdit &&
+                          <Image className='select-icon' src={item.isSelect ? 'https://video-img.fyshark.com/1683699004116sihel.png' : 'https://video-img.fyshark.com/1683698064582dhka.png'}></Image>
+                        }
+                      </View>
+                      <View className='info-title'>{tool.ellipsis(item.name, 6)}</View>
+                      <View className='info-tips'>已读{item.read_cnt}章·更新{item.album_cnt}章</View>
+                    </View>
+                  ))
+                }
+              </View>
+              {
+                this.state.isEdit &&
+                <View className='edit-console'>
+                  <View className='console'>
+                    <View className='cancellation' onClick={e => (this.cancelEdit())}>取消</View>
+                    <View className='delete' onClick={e => (this.deleteEdit())}>删除</View>
+                  </View>
+                </View>
+              }
+            </View>
+        }
+      </View>
+    )
+  }
+}

src/pages/collection/index.less

@@ -0,0 +1,173 @@
+.mine {
+  padding-bottom: 70px;
+  padding-top: 50px;
+  min-height: 100vh;
+
+  .edit {
+    margin-right: 40px;
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    font-size: 28px;
+    font-family: PingFang SC;
+    font-weight: bold;
+    color: #888888;
+
+    .edit-content {
+      display: flex;
+      align-items: center;
+    }
+
+    .edit-img {
+      width: 30px;
+      height: 30px;
+      display: block;
+      margin-right: 12px;
+    }
+
+  }
+
+  .select {
+    margin-left: 40px;
+    display: flex;
+    align-items: center;
+    font-size: 28px;
+    font-family: PingFang SC;
+    font-weight: bold;
+    color: #888888;
+
+    .select-content {
+      display: flex;
+      align-items: center;
+    }
+
+    .select-img {
+      width: 30px;
+      height: 30px;
+      display: block;
+      margin-right: 12px;
+    }
+  }
+
+  .content {
+    margin-top: 20px;
+    padding: 0 40px 0 28px;
+
+    .content-info {
+      margin-top: 20px;
+      margin-left: 12px;
+      display: inline-block;
+
+      .info-image {
+        position: relative;
+
+      }
+
+      .info-img {
+        width: 216px;
+        // height: 300px;
+        border-radius: 10px;
+      }
+
+      .info-title {
+        font-size: 26px;
+        font-family: PingFang SC;
+        font-weight: bold;
+        color: #363636;
+      }
+
+      .info-tips {
+        font-size: 20px;
+        font-family: PingFang SC;
+        font-weight: bold;
+        color: rgba(0, 0, 0, 0.6);
+      }
+
+      .select-icon {
+        position: absolute;
+        bottom: 14px;
+        right: 8px;
+        width: 48px;
+        height: 48px;
+        display: block;
+      }
+    }
+  }
+
+  .edit-console {
+    width: 100%;
+    position: fixed;
+    bottom: 0;
+    left: 0;
+
+    .console {
+      padding: 0 40px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+
+      .cancellation {
+        width: 280px;
+        height: 66px;
+        line-height: 66px;
+        text-align: center;
+        background: #E9EAEA;
+        border-radius: 33px;
+        font-size: 26px;
+        font-family: PingFang SC;
+        font-weight: bold;
+        color: #363636;
+      }
+
+      .delete {
+        width: 280px;
+        height: 66px;
+        line-height: 66px;
+        text-align: center;
+        background: linear-gradient(90deg, #E04A4A, #EC705D);
+        border-radius: 33px;
+        font-size: 26px;
+        font-family: PingFang SC;
+        font-weight: bold;
+        color: #FFFFFF;
+      }
+    }
+  }
+
+  .empty {
+    position: absolute;
+    left: 50%;
+    top: 30%;
+    transform: translateX(-50%);
+
+    .empty-img {
+      width: 360px;
+      height: 360px;
+    }
+
+    .empty-tips {
+      font-size: 26rpx;
+      font-family: PingFang SC;
+      font-weight: bold;
+      text-align: center;
+      color: #888888;
+    }
+
+    .add {
+      position: relative;
+      left: 50%;
+      transform: translateX(-50%);
+      margin-top: 58px;
+      width: 322px;
+      height: 68px;
+      line-height: 68px;
+      background: #E04A4A;
+      border-radius: 32px;
+      font-size: 28px;
+      text-align: center;
+      font-family: PingFang SC;
+      font-weight: 800;
+      color: #FFFFFF;
+    }
+  }
+}

src/pages/index/index.config.js

@@ -0,0 +1,5 @@
+export default definePageConfig({
+  navigationBarTitleText: '书城',
+  enableShareAppMessage: true,
+  enableShareTimeline: true ,
+})

src/pages/index/index.jsx

@@ -0,0 +1,149 @@
+import { Component } from 'react'
+import { View, Text, Button, Image, ScrollView, Input } from '@tarojs/components'
+import * as api from '../../service/index'
+import tool from '../../common/tool'
+import Taro, { } from '@tarojs/taro'
+import './index.less'
+
+export default class collection extends Component {
+  state = {
+    tags: [],//标签列表
+    tagsIndex: 0,//当前的标签
+    booksList: [],//分类书籍
+    page: 1,
+    page_size: 20,
+    isNext: true,//是否还有下一页
+  }
+
+  componentWillMount () {
+    this.getBookCatIndex()
+  }
+  componentDidShow () {
+  }
+  getBookCatIndex () {
+    api.getBookCatIndex().then(res => {
+      if (res.code == 200) {
+
+        this.setState({
+          tags: res.data.book_cat,
+
+        }, () => {
+          this.getBookCatInfo()
+        })
+      }
+    })
+  }
+  getBookCatInfo () {
+    let params = {
+      cat_id: this.state.tags[this.state.tagsIndex].id,
+      page: this.state.page,
+      page_size: this.state.page_size,
+    }
+    api.getBookCatInfo(params).then(res => {
+      if (res.code == 200) {
+        let isNext = true
+        console.log(res.data.book_cat.length, 'res.data.book_cat.length');
+        if (res.data.book_cat.length < 20) {
+          isNext = false
+        }
+        this.setState({
+          booksList: [...this.state.booksList, ...res.data.book_cat],
+          isNext: isNext,
+          page: isNext ? this.state.page + 1 : this.state.page
+        })
+      }
+    })
+  }
+  toSearch () {
+    Taro.navigateTo({
+      url: '/pages/index/subpages/search/index'
+    })
+  }
+  selectedLabel (item, index) {
+    this.setState({
+      tagsIndex: index,
+      booksList: [],
+      page: 1
+    }, () => {
+      this.getBookCatInfo()
+    })
+  }
+  onReachBottom () {
+    console.log(this.state.isNext, 'this.state.isNext');
+    if (this.state.isNext) {
+      this.getBookCatInfo()
+    }
+  }
+  toDetail (item, index) {
+    Taro.navigateTo({
+      url: `/pages/index/subpages/novel/index?book_id=${item.id}`
+    })
+  }
+  toMoneyPlay () {
+    Taro.navigateTo({
+      url: `/pages/mine/subpages/moneyPlay/index`
+    })
+  }
+
+
+  render () {
+    return (
+      <View className='mine'>
+        <View className='mine-content'>
+          <View className='search' onClick={e => (this.toSearch())}>
+            <Image className='search-img' src='https://video-img.fyshark.com/1683600195067ahjdklj.png'></Image>
+            <Input className='search-input' disabled type='text' placeholder='请输入书名/口令码' focus />
+          </View>
+          <ScrollView
+            className='recharge'
+            scrollX
+          >
+            {
+              this.state.tags.map((item, index) => (
+                <View className='recharge-list' onClick={e => (this.selectedLabel(item, index))} key={index}>
+                  <View className={this.state.tagsIndex == index ? 'recharge-info-active' : 'recharge-info'}
+                    key={index}
+                  >
+                    {item.name}
+                  </View>
+                  {
+                    this.state.tagsIndex == index &&
+                    <View className='recharge-tips'></View>
+                  }
+                </View>
+              ))
+            }
+          </ScrollView>
+          <View className='book-content'>
+            <View className='book-list'>
+              {
+                this.state.booksList.map((item, index) => (
+                  <View className='book-info' key={index} onClick={e => (this.toDetail(item, index))}>
+                    <View className='book-info-left'>
+                      <Image className='book-img' src={item.img}></Image>
+                    </View>
+                    <View className='book-right'>
+                      <View className='book-title'>{item.name}</View>
+                      <View className='book-tips'>{tool.ellipsis(item.intro, 56)}</View>
+                      <View className='book-label-list'>
+                        {
+                          item.name_tag.length > 0 &&
+                          <View className='book-label-info'>
+                            {item.name_tag}
+                          </View>
+                        }
+                      </View>
+                    </View>
+                  </View>
+                ))
+              }
+            </View>
+          </View>
+        </View>
+        <View className='share update-active' onClick={e => (this.toMoneyPlay())}>
+          <Image className='share-img' mode='widthFix' src='https://video-img.fyshark.com/1684494291916shjkgnla.png'></Image>
+        </View>
+      </View>
+    )
+  }
+}

src/pages/index/index.less

@@ -0,0 +1,155 @@
+.mine {
+  width: 100vw;
+  min-height: 100vh;
+
+  .mine-content {
+    padding: 36px 30px;
+
+    .search {
+      // width: 100%;
+      display: flex;
+      padding: 0 20px;
+      height: 70px;
+      align-items: center;
+      background: #EAEAEF;
+      border-radius: 35px;
+
+      .search-img {
+        width: 36px;
+        height: 36px;
+        display: flex;
+      }
+
+      .search-input {
+        margin-left: 6px;
+        flex: 1;
+        font-size: 24px;
+        font-family: PingFang SC;
+        font-weight: bold;
+        color: rgba(0, 0, 0, 0.4);
+        line-height: 82px;
+      }
+    }
+
+    .recharge {
+      margin-top: 30px;
+      width: 100%;
+      white-space: nowrap;
+
+      .recharge-list {
+        display: inline-block;
+        position: relative;
+        padding-right: 52px;
+
+        .recharge-info {
+          font-size: 28px;
+          font-family: PingFang SC;
+          font-weight: 800;
+          color: #888888;
+          line-height: 60px;
+        }
+
+        .recharge-info-active {
+          font-size: 32px;
+          font-family: PingFang SC;
+          font-weight: 800;
+          color: #363636;
+          line-height: 60px;
+        }
+
+        .recharge-tips {
+          position: relative;
+          left: 50%;
+          transform: translateX(-50%);
+          width: 30rpx;
+          border: 2px solid #E04A4A;
+        }
+      }
+
+    }
+
+    .book-content {
+      padding: 20px 66px 50px 20px;
+
+      .book-list {
+        .book-info {
+          display: flex;
+          margin-bottom: 30px;
+
+          .book-info-left {
+            .book-img {
+              width: 158px;
+              height: 220px;
+              display: block;
+              border-radius: 10px;
+            }
+          }
+
+          .book-right {
+            margin-left: 20px;
+
+            .book-title {
+              font-size: 26px;
+              font-family: PingFang SC;
+              font-weight: 800;
+              color: #363636;
+            }
+
+            .book-tips {
+              font-size: 22px;
+              margin-top: 22px;
+              font-family: PingFang SC;
+              font-weight: bold;
+              color: #888888;
+            }
+
+            .book-label-list {
+              display: flex;
+              margin-top: 28px;
+
+              .book-label-info {
+                margin-left: 10px;
+                padding: 6px 12px;
+                border-radius: 10px;
+                font-size: 18px;
+                font-family: PingFang SC;
+                font-weight: 800;
+                letter-spacing: 1px;
+                background:rgb(212 242 245 / 54%);
+                color: #4ec7da;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .share {
+    position: fixed;
+    right: 20px;
+    bottom: 68px;
+
+    .share-img {
+      width: 150px;
+    }
+  }
+
+  /* 定义动画 */
+  @keyframes shrink {
+
+    0%,
+    100% {
+      transform: translateY(0) scale(1);
+    }
+
+    50% {
+      transform: translateY(0px) scale(0.95);
+    }
+  }
+
+  /* 应用动画 */
+  .update-active {
+    animation: shrink 1.2s ease-in-out infinite;
+  }
+}

src/pages/index/subpages/directory/index.config.js

@@ -0,0 +1,5 @@
+export default definePageConfig({
+  navigationBarTitleText: '',
+  enableShareAppMessage: true,
+  enableShareTimeline: true ,
+})

src/pages/index/subpages/directory/index.jsx

@@ -0,0 +1,84 @@
+import { Component } from 'react'
+import { View, Text, Button, Image, scrollView, RichText, Input } from '@tarojs/components'
+import * as api from '../../../../service/index'
+import tool from '../../../../common/tool'
+import Taro, { getCurrentInstance } from '@tarojs/taro'
+import './index.less'
+import { AtDrawer } from 'taro-ui'
+import "taro-ui/dist/style/components/drawer.scss";
+
+export default class collection extends Component {
+  $instance = getCurrentInstance()
+  state = {
+    directoryList: [
+    ],
+    show: true,
+    order_by_sta: 0,//0:正序，1:倒序
+
+  }
+
+  componentWillMount () {
+    this.getBookCatalogue()
+  }
+  componentDidShow () {
+  }
+  getBookCatalogue () {
+    let routers = this.$instance.router.params
+    api.getBookCatalogue({ book_id: routers.book_id, order_by_sta: this.state.order_by_sta }).then(res => {
+      if (res.code == 200) {
+        this.setState({
+          directoryList: res.data.book_catalogue,
+        })
+      }
+    })
+  }
+  changeOrderBySta () {
+    this.setState({
+      order_by_sta: this.state.order_by_sta == 0 ? 1 : 0
+    }, () => {
+      this.getBookCatalogue()
+    })
+  }
+  toNovelText (item, index) {
+    api.bookReadReort({ content_id: item.id }).then(res => {
+      if (res.code == 200) {
+        let routers = this.$instance.router.params
+        Taro.navigateTo({
+          url: `/pages/index/subpages/novelText/index?book_id=${routers.book_id}`
+        })
+      }
+    })
+  }
+
+
+  render () {
+    return (
+      <View className='mine'>
+        <View className='mine-content'>
+          <View className='drawer-content'>
+            <View className='drawer-over'>
+              <View className='drawer-over-num'>共{this.state.directoryList.length}章</View>
+              <View className='drawer-over-right' onClick={e => (this.changeOrderBySta())}>
+                <View className='drawer-over-right-title'>倒序</View>
+                <Image className='drawer-over-right-img' src='https://video-img.fyshark.com/1683631467893djaj.png'></Image>
+              </View>
+            </View>
+            <View className='drawer-list'>
+              {
+                this.state.directoryList.map((item, index) => (
+                  <View className='drawer-info' key={index} onClick={e => (this.toNovelText(item, index))}>
+                    <View className='drawer-info-left'>{item.name}</View>
+                    {
+                      item.is_vip == 1 &&
+                      <Image className='drawer-info-right' src='https://video-img.fyshark.com/1683633924768dsjkmalnjdl.png'></Image>
+                    }
+                  </View>
+                ))
+              }
+            </View>
+          </View>
+        </View>
+      </View>
+    )
+  }
+}

src/pages/index/subpages/directory/index.less

@@ -0,0 +1,61 @@
+.mine {
+  width: 100vw;
+  min-height: 100vh;
+  background: #F3F3F3;
+
+  .mine-content {
+    padding: 60px 40px;
+    padding-bottom: 180px;
+
+    .drawer-content {
+      position: relative;
+
+      .drawer-over {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        .drawer-over-right {
+          display: flex;
+
+          .drawer-over-right-title {
+            font-size: 26px;
+            font-family: PingFang SC;
+            font-weight: bold;
+            color: #565656;
+          }
+
+          .drawer-over-right-img {
+            margin-left: 10px;
+            width: 36px;
+            height: 36px;
+            display: block;
+          }
+        }
+      }
+
+      .drawer-list {
+        font-size: 32px;
+        font-family: PingFang SC;
+        font-weight: bold;
+        color: #6b6969;
+
+        .drawer-info {
+          padding: 35px 0;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          border-bottom: 2px solid rgba(53, 53, 53, .1);
+        }
+
+        .drawer-info-right {
+          width: 36px;
+          height: 36px;
+          display: block;
+        }
+      }
+    }
+  }
+
+
+}

src/pages/index/subpages/novel/index.config.js

@@ -0,0 +1,5 @@
+export default definePageConfig({
+  navigationBarTitleText: '详情',
+  enableShareAppMessage: true,
+  enableShareTimeline: true ,
+})

src/pages/index/subpages/novel/index.jsx

@@ -0,0 +1,182 @@
+import { Component } from 'react'
+import { View, Text, Button, Image, scrollView, Input } from '@tarojs/components'
+import * as api from '../../../../service/index'
+import tool from '../../../../common/tool'
+import Taro, { getCurrentInstance } from '@tarojs/taro'
+
+import './index.less'
+
+export default class collection extends Component {
+  $instance = getCurrentInstance()
+  state = {
+    booksinfo: {},
+    is_collect: 0,//是否加入书架，0|1
+    likeBookList: [],
+    lastTime: 0
+  }
+
+  componentWillMount () {
+    this.getBookinfo()
+    this.getBookLike()
+  }
+  componentDidShow () {
+  }
+  getBookLike () {
+    api.getBookLike().then(res => {
+      if (res.code == 200) {
+        this.setState({
+          likeBookList: res.data.book_like
+        })
+      }
+    })
+  }
+  getBookinfo () {
+    let routers = this.$instance.router.params
+    api.getBookinfo({ book_id: routers.book_id }).then(res => {
+      if (res.code == 200) {
+        this.setState({
+          booksinfo: res.data.book_info[0],
+          is_collect: res.data.is_collect
+        })
+      }
+    })
+  }
+  bookCollect () {
+    if (this.state.is_collect == 1) return
+    let routers = this.$instance.router.params
+    api.bookCollect({ book_id: routers.book_id }).then(res => {
+      if (res.code == 200) {
+        this.getBookinfo()
+      }
+    })
+  }
+  onReachBottom () {
+    // if (!this.state.total) {
+    //   this.setState({
+    //     page: this.state.page + 1
+    //   })
+    // }
+  }
+  toDetail (item, index) {
+    Taro.navigateTo({
+      url: '/pages/index/subpages/novel/index'
+    })
+  }
+  toNovelText () {
+    Taro.navigateTo({
+      url: `/pages/index/subpages/novelText/index?book_id=${this.state.booksinfo.id}`
+    })
+  }
+  toDirectory () {
+    Taro.navigateTo({
+      url: `/pages/index/subpages/directory/index?book_id=${this.state.booksinfo.id}`
+    })
+  }
+  toLikeBooks (item, index) {
+    Taro.navigateTo({
+      url: `/pages/index/subpages/novel/index?book_id=${item.id}`
+    })
+  }
+  copyCode () {
+    let lastTime = this.state.lastTime;
+    let now = new Date().getTime();
+    if (now - lastTime < 2000) return
+    this.setState({
+      lastTime: now
+    }, () => {
+      api.getCommand({ book_id: this.state.booksinfo.id }).then(res => {
+        if (res.code == 200) {
+          let text = res.data
+          // if (process.env.TARO_ENV == 'tt') {
+          //   text = res.data
+          // }
+          Taro.setClipboardData({
+            data: text,
+            success: function (res) {
+              Taro.showModal({
+                title: '口令复制成功',
+                content: "是否前往了解赚钱计划？",
+                success: function (res) {
+                  if (res.confirm) {
+                    Taro.navigateTo({
+                      url: `/pages/mine/subpages/moneyPlay/index`
+                    })
+                  } else if (res.cancel) {
+                    console.log('用户点击取消')
+                  }
+                }
+              })
+            }
+          })
+
+        }
+      })
+    })
+  }
+
+  render () {
+    return (
+      <View className='mine'>
+        <View className='mine-content'>
+          <View className='book-top'>
+            <Image className='book-img' src={this.state.booksinfo.img}></Image>
+            <View className='top-right'>
+              <View className='book-title'>{tool.ellipsis(this.state.booksinfo.name, 15)}</View>
+              <View className='book-visit-num'>{this.state.booksinfo.paly_cnt}游览</View>
+            </View>
+            <View className='share update-active' onClick={e => (this.copyCode())}>
+              <Image className='share-img' mode='widthFix' src='https://video-img.fyshark.com/1684206675357shykahfgl.png'></Image>
+            </View>
+          </View>
+          <View className='book-tips'>
+            <View className='book-tips-title'>书籍简介</View>
+            <View className='book-tips-content'>{this.state.booksinfo.intro} </View>
+          </View>
+          <View className='directory' onClick={e => (this.toDirectory())}>
+            <View className='directory-left'>
+              <Image className='directory-icon' src='https://video-img.fyshark.com/1683618704652dadda%20.png'></Image>
+              <View className='derectory-title'>查看目录</View>已更新到{this.state.booksinfo.album_cnt}章
+            </View>
+            <Image className='directory-right-icon' src='https://video-img.fyshark.com/1683618693594ddada%20.png'></Image>
+          </View>
+          <View className='like'>
+            <View className='like-tips'>
+              <View className='lick-title'>猜你喜欢</View>
+              <View className='lick-change' onClick={e => (this.getBookLike())}>
+                换一换
+                <Image className='like-img' src='https://video-img.fyshark.com/1683619412847dada%20.png'></Image>
+              </View>
+            </View>
+            <View className='lick-list'>
+              {
+                this.state.likeBookList.map((item, index) => (
+                  <View className='lick-info' key={index} onClick={e => (this.toLikeBooks(item, index))}>
+                    <Image className='like-img' src={item.img}></Image>
+                    <View className='like-title'>{tool.ellipsis(item.name, 4)}</View>
+                  </View>
+                ))
+              }
+            </View>
+          </View>
+          <View className='selected'>
+            <View className='selected-title'>精选内容</View>
+            <View className='selected-text'>{this.state.booksinfo.short_name}</View>
+          </View>
+          <View className='console'>
+            <View className='console-content'>
+              <View className='console-left'
+                style={this.state.is_collect == 1 ? 'opacity:0.3' : ''}
+                onClick={e => (this.bookCollect())}>
+                <Image className='console-left-img' src='https://video-img.fyshark.com/1683620721580adda.png'></Image>
+                <View className='console-left-title'>{this.state.is_collect == 0 ? '加入书架' : '已在书架'}</View>
+              </View>
+              <View className='console-right' onClick={e => (this.toNovelText())}>
+                继续阅读
+              </View>
+            </View>
+          </View>
+        </View>
+      </View>
+    )
+  }
+}

src/pages/index/subpages/novel/index.less

@@ -0,0 +1,241 @@
+.mine {
+  width: 100vw;
+  min-height: 100vh;
+
+  .mine-content {
+    padding: 42px 30px;
+    padding-bottom: 180px;
+
+    .book-top {
+      display: flex;
+      position: relative;
+
+      .book-img {
+        width: 200px;
+        height: 280px;
+        border-radius: 10px;
+      }
+
+      .top-right {
+        margin-left: 28px;
+
+        .book-title {
+          margin-top: 28px;
+          font-size: 28px;
+          font-family: PingFang SC;
+          font-weight: 800;
+          color: #363636;
+        }
+
+        .book-visit-num {
+          margin-top: 38px;
+          font-size: 22px;
+          font-family: PingFang SC;
+          font-weight: 800;
+          color: #888888;
+        }
+      }
+      .share{
+        position: absolute;
+        right: 0;
+        top: 68px;
+        .share-img{
+          width: 150px;
+        }
+      }
+    }
+
+    .book-tips {
+      margin-top: 40px;
+
+      .book-tips-title {
+        font-size: 32px;
+        font-family: PingFang SC;
+        font-weight: bold;
+        color: #363636;
+      }
+
+      .book-tips-content {
+        font-size: 28px;
+        font-family: PingFang SC;
+        font-weight: bold;
+        color: #888888;
+        line-height: 40px;
+        margin-top: 36px;
+      }
+    }
+
+    .directory {
+      margin-top: 36px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+
+      .directory-left {
+        display: flex;
+        align-items: center;
+        font-size: 22px;
+        font-family: PingFang SC;
+        font-weight: 800;
+        color: #888888;
+
+        .directory-icon {
+          width: 36px;
+          height: 36px;
+          display: block;
+        }
+
+        .derectory-title {
+          margin: 0 14px 0 8px;
+          font-size: 28px;
+          color: #363636;
+        }
+      }
+
+      .directory-right-icon {
+        width: 32px;
+        height: 32px;
+        display: block;
+      }
+    }
+
+    .like {
+      margin-top: 80px;
+
+      .like-tips {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        .lick-title {
+          font-size: 28px;
+          font-family: PingFang SC;
+          font-weight: 800;
+          color: #363636;
+        }
+
+        .lick-change {
+          display: flex;
+          font-size: 24px;
+          font-family: PingFang SC;
+          font-weight: 800;
+          color: #888888;
+
+          .like-img {
+            margin-left: 10px;
+            width: 36px;
+            height: 36px;
+            display: block;
+          }
+        }
+      }
+
+      .lick-list {
+        margin-top: 50px;
+        display: flex;
+        justify-content: space-between;
+
+        .lick-info {
+          .like-img {
+            width: 156px;
+            height: 220px;
+            border-radius: 10px;
+          }
+
+          .like-title {
+            text-align: center;
+            font-size: 26px;
+            font-family: PingFang SC;
+            font-weight: 800;
+            color: #363636;
+          }
+        }
+      }
+    }
+
+    .selected {
+      margin-top: 40px;
+
+      .selected-title {
+        font-size: 28px;
+        font-family: PingFang SC;
+        font-weight: 800;
+        color: #363636;
+      }
+
+      .selected-text {
+        text-indent: 2em;
+        margin-top: 30px;
+        font-size: 28px;
+        font-family: PingFang SC;
+        font-weight: bold;
+        color: #888888;
+        line-height: 40px;
+      }
+    }
+
+    .console {
+      position: fixed;
+      width: 100%;
+      bottom: 0;
+      left: 0;
+
+      .console-content {
+        padding: 16px 30px 42px 30px;
+        display: flex;
+        background: #FFFFFF;
+        justify-content: space-between;
+        align-items: center;
+
+      }
+
+      .console-left {
+        padding: 0 40px;
+        position: relative;
+
+        .console-left-img {
+          position: relative;
+          left: 50%;
+          transform: translateX(-50%);
+          width: 40px;
+          height: 40px;
+          display: block;
+        }
+
+        .console-left-title {
+          font-size: 20px;
+          font-family: PingFang SC;
+          font-weight: bold;
+          color: #888888;
+        }
+      }
+
+      .console-right {
+        width: 408px;
+        height: 62px;
+        line-height: 62px;
+        text-align: center;
+        background: linear-gradient(90deg, #E04A4A, #EC705D);
+        border-radius: 31px;
+        font-size: 26px;
+        font-family: PingFang SC;
+        font-weight: bold;
+        color: #FFFFFF;
+      }
+    }
+  }
+   /* 定义动画 */
+ @keyframes shrink {
+  0%, 100% {
+    transform: translateY(0) scale(1);
+  }
+  50% {
+    transform: translateY(0px) scale(0.95);
+  }
+}
+
+/* 应用动画 */
+.update-active {
+  animation: shrink 1.2s ease-in-out infinite;
+}
+}

src/pages/index/subpages/novelText/index.config.js

@@ -0,0 +1,5 @@
+export default definePageConfig({
+  navigationBarTitleText: '',
+  enableShareAppMessage: true,
+  enableShareTimeline: true ,
+})

src/pages/index/subpages/novelText/index.jsx

@@ -0,0 +1,434 @@
+import { Component } from 'react'
+import { View, Text, Button, Image, scrollView, RichText, Input } from '@tarojs/components'
+import * as api from '../../../../service/index'
+import tool from '../../../../common/tool'
+import Taro, { getCurrentInstance } from '@tarojs/taro'
+import './index.less'
+import { AtDrawer } from 'taro-ui'
+import "taro-ui/dist/style/components/drawer.scss";
+
+export default class collection extends Component {
+  $instance = getCurrentInstance()
+  state = {
+    booksinfo: {},
+    directoryList: [],//目录
+    show: false,
+    order_by_sta: 0,//0:正序，1:倒序
+    content_id: 0,//上次观看的章节
+    isConsole: true,
+    purchaseList: [
+      {
+        title: '7天包周',
+        money: 990,
+        oldMoney: '￥19.8元/周',
+        tips: '热门',
+        text: '立享5折',
+      },
+      {
+        title: '7天包周',
+        money: 990,
+        oldMoney: '￥19.8元/周',
+        tips: '',
+        text: '立享5折',
+      },
+      {
+        title: '7天包周',
+        money: 990,
+        oldMoney: '￥19.8元/周',
+        tips: '优惠',
+        text: '立享5折',
+      },
+    ],
+    selectVip: 0,//当前选择的充值
+    isIos: false,
+    pay_status: 1,//是否绑定口令
+    code:''
+  }
+
+  componentWillMount () {
+    if (!Taro.getStorageSync('session_key')) {
+      setTimeout(() => {
+        this.getBookCatalogue()
+        this.getShopList()
+      }, 1500)
+    } else {
+      this.getBookCatalogue()
+      this.getShopList()
+    }
+    let that = this
+    Taro.getSystemInfo({
+      success: function (res) {
+        if (res.platform != "android") {
+          that.setState({
+            isIos: true
+          })
+        }
+      }
+    })
+  }
+  componentDidShow () {
+  }
+  getBookCatalogue () {
+    Taro.showLoading({
+      title: '加载中',
+    })
+    let routers = this.$instance.router.params
+
+    api.getBookCatalogue({ book_id: routers.book_id, order_by_sta: this.state.order_by_sta }).then(res => {
+      Taro.hideLoading()
+      if (res.code == 200) {
+        this.setState({
+          directoryList: res.data.book_catalogue,
+          content_id: res.data.content_id
+        }, () => {
+          this.getBookContent()
+        })
+      }
+    })
+  }
+
+  getBookContent () {
+    let that = this
+    let routers = this.$instance.router.params
+    api.getBookContent({ book_id: routers.book_id, content_id: this.state.content_id }).then(res => {
+      if (res.code == 200) {
+        Taro.setNavigationBarTitle({ title: res.data.title })
+        this.setState({
+          booksinfo: res.data
+        }, () => {
+          that.changeChapter(res.data.content_id)
+          Taro.pageScrollTo({
+            scrollTop: 0,
+            duration: 10
+          })
+        })
+      }
+    })
+  }
+  changeOrderBySta () {
+    this.setState({
+      order_by_sta: this.state.order_by_sta == 0 ? 1 : 0
+    }, () => {
+      this.getBookCatalogue()
+    })
+  }
+  getShopList () {
+    api.getShopList().then(res => {
+      if (res.code == 200) {
+        this.setState({
+          purchaseList: res.data.vip_list,
+          pay_status: res.data.pay_status
+        })
+      }
+    })
+  }
+  //充值
+  toOrder () {
+    if (this.state.purchaseList[this.state.selectVip].ios_status == 0) {
+      if (this.state.isIos) {
+        Taro.showToast({
+          title: 'ios暂不支持充值',
+          icon: 'none',
+          duration: 2000
+        })
+        return
+      }
+    }
+    let that = this
+    let item = this.state.purchaseList[this.state.selectVip]
+    if (process.env.TARO_ENV === 'tt') {
+      Taro.showLoading({
+        title: '加载中...',
+      })
+      let routers = this.$instance.router.params
+      api.ttCreateOrder({ pay_info_id: item.id, book_id: routers.book_id }).then(res => {
+        if (res.code == 200) {
+          Taro.hideLoading()
+          tt.pay({
+            orderInfo: {
+              order_id: res.data.order_id,
+              order_token: res.data.order_token
+            },
+            service: 5,
+            success (item) {
+              if (item.code == 0) {
+                that.getBookCatalogue()
+                that.getShopList()
+                setTimeout(() => {
+                  that.getBookCatalogue()
+                  that.getShopList()
+                }, 2000);
+                // 支付成功处理逻辑，只有res.code=0时，才表示支付成功
+                // 但是最终状态要以商户后端结果为准
+              }
+            },
+            fail (item) {
+              // 调起收银台失败处理逻辑
+            },
+          });
+        }
+      })
+    } else if (process.env.TARO_ENV === 'weapp') {
+      Taro.getSystemInfo({
+        success: function (res) {
+          Taro.showLoading({
+            title: '加载中...',
+          })
+          api.createOrder({ shop_id: item.id }).then(res => {
+            if (res.code == 200) {
+              Taro.hideLoading()
+              Taro.requestPayment({
+                timeStamp: res.data.timeStamp,
+                nonceStr: res.data.nonceStr,
+                package: res.data.package,
+                signType: res.data.signType,
+                paySign: res.data.paySign,
+                success: function (res) {
+                  that.getBookCatalogue()
+                  that.getShopList()
+                  setTimeout(() => {
+                    that.getBookCatalogue()
+                    that.getShopList()
+                  }, 2000);
+                },
+                fail: function (err) {
+                  try {
+                    const res = Taro.getSystemInfoSync()
+                    console.log(res, 'iphone=====');
+                  } catch (e) {
+                  }
+                }
+              })
+            }
+          })
+        }
+      })
+    }
+
+  }
+  selectVip (item, index) {
+    this.setState({
+      selectVip: index
+    })
+  }
+  //上一章
+  previous () {
+    if (this.state.booksinfo.content_last_id == 0) return
+    this.setState({
+      content_id: this.state.booksinfo.content_last_id
+    }, () => {
+
+      // this.changeChapter(this.state.booksinfo.content_last_id)
+      this.getBookContent()
+    })
+  }
+  //打开目录
+  directory () {
+    this.setState({
+      show: true
+    })
+  }
+  unDirectory () {
+    this.setState({
+      show: false
+    })
+  }
+  //下一章
+  next () {
+    if (this.state.booksinfo.content_next_id == 0) return
+    this.setState({
+      content_id: this.state.booksinfo.content_next_id
+    }, () => {
+      // this.changeChapter(this.state.booksinfo.content_next_id)
+      this.getBookContent()
+    })
+  }
+  //上报阅读记录
+  changeChapter (content_id) {
+    api.bookReadReort({ content_id: content_id }).then(res => {
+      if (res.code == 200) {
+
+      }
+    })
+  }
+  jumpChapter (content_id) {
+    this.setState({
+      show: false,
+      content_id: content_id
+    }, () => {
+      this.getBookContent()
+    })
+  }
+  changeIsConsole () {
+    this.setState({
+      isConsole: !this.state.isConsole
+    })
+  }
+  openCode () {
+    this.setState({
+      isOpen: true
+    })
+  }
+  searchCode (e) {
+    this.setState(
+      {
+        code: e.detail.value
+      }
+    )
+  }
+  cancel () {
+    this.setState({
+      isOpen: false
+    })
+  }
+  determine () {
+    api.getCheckoutBookCode({ input_str: this.state.code }).then(res => {
+      if (res.code == 200) {
+        this.getShopList()
+        this.setState({
+          isOpen: false
+        })
+        Taro.showToast({
+          title: `已获取折扣`,
+          icon: 'none',
+          duration: 2000
+        })
+      } else {
+        Taro.showToast({
+          title: res.msg,
+          icon: 'none',
+          duration: 2000
+        })
+      }
+    })
+  }
+
+  render () {
+    return (
+      <View className='mine'>
+
+        {
+          this.state.booksinfo.book_is_vip == 0 &&
+          <View className='mine-content'>
+            <View className='console-modil' onClick={e => (this.changeIsConsole())}>
+            </View>
+            <View className='novel-title'>{this.state.booksinfo.book_name}</View>
+            <RichText
+              className='member-title'
+              nodes={this.state.booksinfo.book_content}></RichText>
+            {
+              this.state.isConsole &&
+              <View className='console'>
+                <View className='console-deteal'>
+                  <View className='console-left' style={this.state.booksinfo.content_last_id == 0 ? 'opacity: 0.3;' : ''} onClick={e => (this.previous())}>
+                    <Image className='console-img' src='https://video-img.fyshark.com/1683623105394hsikah.png'></Image>
+                    上一章
+                  </View>
+                  <View className='console-content' onClick={e => (this.directory())}>
+                    <Image className='console-img' src='https://video-img.fyshark.com/1683623271853dhjkdhjl.png'></Image>
+                    目录
+                  </View>
+                  <View className='console-right' style={this.state.booksinfo.content_next_id == 0 ? 'opacity: 0.3;' : ''} onClick={e => (this.next())}>
+                    下一章
+                    <Image className='console-img' src='https://video-img.fyshark.com/1683623282017shiojh.png'></Image>
+                  </View>
+                </View>
+              </View>
+            }
+            <AtDrawer
+              show={this.state.show}
+              className='drawer'
+              onClose={e => (this.unDirectory())}
+              left
+              width='300px'
+              mask
+            >
+              <View className='drawer-content'>
+                <View className='drawer-over'>
+                  <View className='drawer-over-num'>共{this.state.directoryList.length}章</View>
+                  <View className='drawer-over-right' onClick={e => (this.changeOrderBySta())}>
+                    <View className='drawer-over-right-title'>倒序</View>
+                    <Image className='drawer-over-right-img' src='https://video-img.fyshark.com/1683631467893djaj.png'></Image>
+                  </View>
+                </View>
+                <View className='drawer-list'>
+                  {
+                    this.state.directoryList.map((item, index) => (
+                      <View className='drawer-info' key={index} onClick={e => (this.jumpChapter(item.id))}>
+                        <View className='drawer-info-left'>{item.name}</View>
+                        {
+                          item.is_vip == 1 &&
+                          <Image className='drawer-info-right' src='https://video-img.fyshark.com/1683633924768dsjkmalnjdl.png'></Image>
+                        }
+                      </View>
+                    ))
+                  }
+                </View>
+              </View>
+            </AtDrawer>
+          </View>
+        }
+        {this.state.booksinfo.book_is_vip == 1 &&
+          <View className='mine-content'>
+            <View className='novel-title'>{this.state.booksinfo.book_name}</View>
+            <RichText
+              className='member-title'
+              nodes={this.state.booksinfo.book_intro}></RichText>
+            <View className='payInfo'>
+              <View className='payInfo-content'>
+                <View className='payInfo-title'>开通会员，继续阅读</View>
+                {
+                  this.state.pay_status == 0 &&
+                  <View className='active' onClick={e => (this.openCode())}>
+                    <Image className='active-img' src='https://video-img.fyshark.com/1685349084726icon.png' mode='widthFix'></Image>
+                  </View>
+                }
+                <View className='purchase-list'>
+                  {
+                    this.state.purchaseList.map((item, index) => (
+                      <View className={this.state.selectVip == index ? 'purchase-info-active' : 'purchase-info'}
+                        key={index}
+                        onClick={e => (this.selectVip(item, index))}
+                      >
+                        {
+                          item.tag && item.tag.length > 0 &&
+                          < View className='purchase-tips'>{item.tag}</View>
+                        }
+                        <View className='purchase-title'>{item.title}</View>
+                        <View className='purchase-money'><View className='purchase-money-tip'>￥</View>{item.money / 100}</View>
+                        <View className='purchase-oldMoney'>￥{item.coin / 100}元</View>
+                        <View className='purchase-text'>
+                          <View className='purchase-button'>{item.sub_title}</View>
+                        </View>
+                      </View>
+                    ))
+                  }
+                </View>
+                <View className='payInfo-button' onClick={e => (this.toOrder())}>
+                  立即支付
+                </View>
+              </View>
+            </View>
+          </View>
+        }
+        {
+          this.state.isOpen &&
+          <View className='information'>
+            <View className='information-content'>
+              <View className='information-title'>
+                请输入口令码
+              </View>
+              <View className='search'>
+                <Input className='search-input' onInput={e => (this.searchCode(e))} type='text' placeholder='请输入口令码' focus />
+              </View>
+              <View className='information-console'>
+                <View className='cancel' onClick={e => (this.cancel())}>取消</View>
+                <View className='determine' onClick={e => (this.determine())}>确定</View>
+              </View>
+            </View>
+          </View>
+        }
+      </View>
+    )
+  }
+}

src/pages/index/subpages/novelText/index.less

@@ -0,0 +1,377 @@
+.mine {
+  width: 100vw;
+  min-height: 100vh;
+  background: #F3F3F3;
+
+  .mine-content {
+    padding: 60px 40px;
+    padding-bottom: 180px;
+
+    .console-modil {
+      position: fixed;
+      left: 50%;
+      top: 20%;
+      transform: translateX(-50%);
+      width: 500px;
+      height: 900px;
+    }
+
+    .novel-title {
+      font-size: 40px;
+      font-family: PingFang SC;
+      font-weight: bold;
+      color: #353535;
+    }
+
+    .member-title {
+      margin-top: 30px;
+      padding-bottom: 280px;
+      font-size: 36px;
+      line-height: 54px;
+      font-family: PingFang SC;
+      font-weight: 500;
+      color: #5c5a5a;
+      letter-spacing: 4px;
+
+      line-height: 52px;
+    }
+
+    .console {
+      position: fixed;
+      width: 100%;
+      bottom: 78px;
+      left: 0;
+
+      .console-deteal {
+        width: 90%;
+        position: relative;
+        left: 50%;
+        transform: translateX(-50%);
+        padding: 32px 0;
+        display: flex;
+        justify-content: space-between;
+        font-size: 28px;
+        font-family: PingFang SC;
+        font-weight: 500;
+        color: #363636;
+        background: #FFFFFF;
+        border-radius: 46rpx;
+
+      }
+
+      .console-img {
+        width: 28px;
+        height: 28px;
+        margin: 0 10px;
+      }
+
+      .console-left {
+        flex: 1;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      .console-content {
+        flex: 1;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        border-left: 2px solid #A7A7A7;
+        border-right: 2px solid #A7A7A7;
+      }
+
+      .console-right {
+        flex: 1;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+
+
+    }
+  }
+
+  .drawer {
+    overflow: hidden;
+  }
+
+  .at-drawer__content {
+    overflow-y: hidden;
+  }
+
+  .drawer-content {
+    padding: 20px 30px;
+    position: relative;
+
+    .drawer-over {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+
+      .drawer-over-right {
+        display: flex;
+
+        .drawer-over-right-title {
+          font-size: 26px;
+          font-family: PingFang SC;
+          font-weight: bold;
+          color: #565656;
+        }
+
+        .drawer-over-right-img {
+          margin-left: 10px;
+          width: 36px;
+          height: 36px;
+          display: block;
+        }
+      }
+    }
+
+    .drawer-list {
+      height: 1320px;
+      font-size: 32px;
+      font-family: PingFang SC;
+      overflow-y: auto;
+      font-weight: bold;
+      color: #6b6969;
+
+      .drawer-info {
+        padding: 35px 0;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        border-bottom: 2px solid rgba(53, 53, 53, .1);
+      }
+
+      .drawer-info-right {
+        width: 36px;
+        height: 36px;
+        display: block;
+      }
+    }
+  }
+
+  .payInfo {
+    position: fixed;
+    left: 0;
+    top: 0;
+    width: 100vw;
+    height: 100vh;
+    background: rgba(49, 48, 48, .1);
+    display: flex;
+    align-items: flex-end;
+
+    .payInfo-content {
+
+      width: 100%;
+      padding: 44px 30px 66px 30px;
+      background: #FFFFFF;
+
+      .active {
+        margin-top: 20px;
+
+        .active-img {
+          width: 100%;
+        }
+      }
+
+      .payInfo-title {
+        text-align: center;
+        font-size: 28px;
+        font-family: PingFang SC;
+        font-weight: 800;
+        color: #353535;
+      }
+
+      .purchase-list {
+        margin-top: 68px;
+        display: flex;
+        justify-content: space-between;
+
+        .purchase-info {
+          position: relative;
+          width: 212px;
+          padding: 54px 0 26px 0;
+          background: #FFFFFF;
+          border: 2px solid rgba(136, 136, 136, 0.5);
+          border-radius: 20rpx;
+          text-align: center;
+          color: #353535;
+
+        }
+
+        .purchase-info-active {
+          position: relative;
+          width: 212px;
+          padding: 54px 0 26px 0;
+          background: #FCF5E9;
+          border: 2px solid #E7C06F;
+          border-radius: 20rpx;
+          text-align: center;
+          color: #AC5A27;
+
+        }
+
+        .purchase-tips {
+          position: absolute;
+          left: 0;
+          top: -22px;
+          background: linear-gradient(90deg, #F1A53E, #ED7535);
+          border-radius: 20rpx 0rpx 20rpx 0rpx;
+          padding: 8px 22px 6px 20px;
+          font-size: 24px;
+          font-family: PingFang SC;
+          font-weight: bold;
+          color: #FFFFFF;
+        }
+
+        .purchase-title {
+          font-size: 24px;
+          font-family: PingFang SC;
+          font-weight: 800;
+
+        }
+
+        .purchase-money {
+          margin-top: 20px;
+          font-size: 40px;
+          font-family: PingFang SC;
+          font-weight: 800;
+        }
+
+        .purchase-money-tip {
+          display: inline-block;
+          font-size: 20rpx;
+          font-family: PingFang SC;
+          font-weight: 800;
+
+        }
+
+        .purchase-oldMoney {
+          margin-top: 10px;
+          font-size: 24px;
+          font-family: PingFang SC;
+          text-decoration: line-through;
+          font-weight: bold;
+        }
+
+        .purchase-text {
+          margin-top: 24px;
+          display: flex;
+          justify-content: center;
+
+          .purchase-button {
+            width: 144px;
+            height: 38px;
+            line-height: 38px;
+            background: #F2D9A9;
+            border-radius: 19px;
+            font-size: 24px;
+            font-family: PingFang SC;
+            font-weight: 800;
+            color: #AC5A27;
+          }
+        }
+      }
+
+      .payInfo-button {
+        margin-top: 50px;
+        height: 76px;
+        line-height: 76px;
+        background: linear-gradient(180deg, #FBC578, #FC9D18);
+        border-radius: 38px;
+        font-size: 30px;
+        font-family: PingFang SC;
+        text-align: center;
+        font-weight: 800;
+        color: #FFFFFF;
+      }
+    }
+  }
+  .information {
+    position: fixed;
+    background: rgba(0, 0, 0, 0.4);
+    width: 100vw;
+    height: 100vh;
+    left: 0;
+    top: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    .information-content {
+      border-radius: 20px;
+      width: 80%;
+      padding: 40px;
+      background: #fff;
+      .information-title{
+        text-align: center;
+        font-size: 36px;
+      }
+      .information-tips{
+        margin-top: 20px;
+        font-size: 24px;
+      }
+
+      .search-title {
+        margin-top: 40px;
+        font-size: 32px;
+      }
+
+      .search {
+        margin-top: 20px;
+        // width: 100%;
+        display: flex;
+        padding: 0 20px;
+        height: 70px;
+        align-items: center;
+        background: #EAEAEF;
+        border-radius: 10px;
+  
+        .search-img {
+          width: 36px;
+          height: 36px;
+          display: flex;
+        }
+  
+        .search-input {
+          margin-left: 6px;
+          flex: 1;
+          font-size: 24px;
+          font-family: PingFang SC;
+          font-weight: bold;
+          color: rgba(0, 0, 0, 0.4);
+          line-height: 82px;
+        }
+      }
+      .information-console{
+        margin-top: 40px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        font-size: 28px;
+        text-align: center;
+        .cancel{
+          width: 240px;
+          height: 64px;
+          border-radius: 10px;
+          line-height: 64px;
+          border: 1px solid #777373;
+
+        }
+        .determine{
+          width: 240px;
+          height: 64px;
+          border-radius: 10px;
+          color: #fff;
+          line-height: 64px;
+          background:linear-gradient(90deg, #E04A4A, #EC705D);
+        }
+      }
+
+    }
+
+
+  }
+}

src/pages/index/subpages/search/index.config.js

@@ -0,0 +1,5 @@
+export default definePageConfig({
+  navigationBarTitleText: '搜索',
+  enableShareAppMessage: true,
+  enableShareTimeline: true ,
+})

src/pages/index/subpages/search/index.jsx

@@ -0,0 +1,84 @@
+import { Component } from 'react'
+import { View, Text, Button, Image, scrollView, Input } from '@tarojs/components'
+import * as api from '../../../../service/index'
+import tool from '../../../../common/tool'
+import Taro, { } from '@tarojs/taro'
+import './index.less'
+
+export default class collection extends Component {
+  state = {
+    booksList: [],
+  }
+
+  componentWillMount () {
+    this.getBookSearch('')
+  }
+  componentDidShow () {
+  }
+  search (e) {
+    this.getBookSearch(e.detail.value)
+  }
+  getBookSearch (input_str) {
+    api.getBookSearch({ input_str: input_str }).then(res => {
+      if (res.code == 200) {
+        this.setState({
+          booksList: res.data.book_search
+        })
+      }
+    })
+  }
+  onReachBottom () {
+    // if (!this.state.total) {
+    //   this.setState({
+    //     page: this.state.page + 1
+    //   })
+    // }
+  }
+  toDetail (item, index) {
+    Taro.navigateTo({
+      url: `/pages/index/subpages/novel/index?book_id=${item.id}`
+    })
+  }
+
+  render () {
+    return (
+      <View className='mine'>
+        <View className='mine-content'>
+          <View className='search'>
+            <Image className='search-img' src='https://video-img.fyshark.com/1683600195067ahjdklj.png'></Image>
+            <Input className='search-input' onInput={e => (this.search(e))} type='text' placeholder='请输入书名/口令码' focus />
+          </View>
+          <View className='search-title'>热门推荐</View>
+          <View className='book-content'>
+            {
+              this.state.booksList.length > 0 &&
+              <View className='book-list'>
+                {
+                  this.state.booksList.map((item, index) => (
+                    <View className='book-info' key={index} onClick={e => (this.toDetail(item, index))}>
+                      <View className='book-info-left'>
+                        <Image className='book-img' src={item.img}></Image>
+                      </View>
+                      <View className='book-right'>
+                        <View className='book-title'>{item.name}</View>
+                        <View className='book-tips'>{tool.ellipsis(item.intro, 56)}</View>
+                        <View className='book-label-list'>
+                          {
+                            item.name_tag.length > 0 &&
+                            <View className='book-label-info'>
+                              {item.name_tag}
+                            </View>
+                          }
+                        </View>
+                      </View>
+                    </View>
+                  ))
+                }
+              </View>
+            }
+          </View>
+        </View>
+      </View>
+    )
+  }
+}

src/pages/index/subpages/search/index.less

@@ -0,0 +1,97 @@
+.mine {
+  width: 100vw;
+  min-height: 100vh;
+
+  .mine-content {
+    padding: 36px 30px;
+
+    .search {
+      // width: 100%;
+      display: flex;
+      padding: 0 20px;
+      height: 70px;
+      align-items: center;
+      background: #EAEAEF;
+      border-radius: 35px;
+
+      .search-img {
+        width: 36px;
+        height: 36px;
+        display: flex;
+      }
+
+      .search-input {
+        margin-left: 6px;
+        flex: 1;
+        font-size: 24px;
+        font-family: PingFang SC;
+        font-weight: bold;
+        color: rgba(0, 0, 0, 0.4);
+        line-height: 82px;
+      }
+    }
+
+    .search-title {
+      margin-top: 60px;
+      font-size: 30px;
+      font-family: PingFang SC;
+      font-weight: 800;
+      color: #363636;
+    }
+
+    .book-content {
+      padding: 36px 30px 50px 0;
+
+      .book-list {
+        .book-info {
+          display: flex;
+          margin-bottom: 30px;
+
+          .book-info-left {
+            .book-img {
+              width: 158px;
+              height: 220px;
+              display: block;
+              border-radius: 10px;
+            }
+          }
+
+          .book-right {
+            margin-left: 20px;
+
+            .book-title {
+              font-size: 26px;
+              font-family: PingFang SC;
+              font-weight: 800;
+              color: #363636;
+            }
+
+            .book-tips {
+              font-size: 22px;
+              margin-top: 22px;
+              font-family: PingFang SC;
+              font-weight: bold;
+              color: #888888;
+            }
+            .book-label-list {
+              display: flex;
+              margin-top: 28px;
+
+              .book-label-info {
+                margin-left: 10px;
+                padding: 6px 12px;
+                border-radius: 10px;
+                font-size: 18px;
+                font-family: PingFang SC;
+                font-weight: 800;
+                letter-spacing: 1px;
+                background:rgb(212 242 245 / 54%);
+                color: #4ec7da;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}

src/pages/mine/index.config.js

@@ -0,0 +1,5 @@
+export default definePageConfig({
+  navigationBarTitleText: '我的',
+  enableShareAppMessage: true,
+  enableShareTimeline: true ,
+})

src/pages/mine/index.jsx

@@ -0,0 +1,200 @@
+import { Component } from 'react'
+import { View, Text, Button, Image, scrollView, Input } from '@tarojs/components'
+import * as api from '../../service/index'
+import tool from '../../common/tool'
+import Taro, { } from '@tarojs/taro'
+import './index.less'
+
+export default class collection extends Component {
+  state = {
+    userInfo: {},
+    pageList: [
+      {
+        title: '阅读记录',
+        icon: 'https://video-img.fyshark.com/1683703300058shsho.png',
+        url: '/pages/mine/subpages/history/index',
+        isOpen: true
+      },
+      {
+        title: '我的收益',
+        icon: 'https://video-img.fyshark.com/1683703315275akljs.png',
+        url: '/pages/mine/subpages/makeMoney/index',
+        isOpen: true
+      },
+      {
+        title: '赚钱计划',
+        icon: 'https://video-img.fyshark.com/1683703340452dnkhfgo.png',
+        url: '/pages/mine/subpages/moneyPlay/index',
+        isOpen: true
+      },
+      {
+        title: '我的团队',
+        icon: 'https://video-img.fyshark.com/1685065866448dslajd.png',
+        url: '/pages/mine/subpages/team/index',
+        isOpen: true
+      },
+      {
+        title: '通知公告',
+        icon: 'https://video-img.fyshark.com/1683703331018dhjldj.png',
+        url: '',
+        isOpen: false
+      }
+
+    ],
+    adUnitId: '',
+    ad_status: ''
+  }
+
+  componentWillMount () {
+    this.getAppConfig()
+  }
+  componentDidShow () {
+    Taro.showLoading({
+      title: '加载中',
+    })
+    if (!Taro.getStorageSync('session_key')) {
+      setTimeout(() => {
+        this.getUserInfo()
+      }, 1000)
+    } else {
+      this.getUserInfo()
+    }
+  }
+  getAppConfig () {
+    api.getAppConfig().then(res => {
+      if (res.code == 200) {
+        this.setState({
+          // adUnitId: res.data.adUnitId,
+          ad_status: res.data.ad_status
+        })
+      }
+    })
+  }
+  getUserInfo () {
+    api.getUserInfo().then(res => {
+      Taro.hideLoading()
+      if (res.code == 200) {
+        this.setState({
+          userInfo: res.data
+        })
+      }
+    })
+  }
+  toVipDetial () {
+    Taro.navigateTo({
+      url: '/pages/mine/subpages/vipDetail/index'
+    })
+  }
+  toDetial (item, index) {
+    if (!item.isOpen) {
+      Taro.showToast({ title: '敬请期待', icon: 'none' })
+      return
+    }
+    Taro.navigateTo({
+      url: item.url
+    })
+  }
+  onShareAppMessage(res) {
+    if (res.from === 'button') {
+      // 来自页面内转发按钮
+      console.log(res.target)
+    }
+    return {
+      channel: "video",
+      title: "测试分享视频",
+      desc: "测试描述",
+      extra: {
+        videoTopics: ["hello", "hi"],
+        withVideoId: true,
+      },
+      success(res) {
+        /* res结构：{errMsg: string, videoId: string } */
+        console.log(res.videoId);
+        tt.navigateToVideoView({
+          videoId: res.videoId,
+          success: (res) => {
+            /* res结构： {errMsg: string } */
+            console.log("done");
+          },
+          fail: (err) => {
+            if (err.errCode === 1006) {
+              tt.showToast({
+                title: "something wrong with your network",
+              });
+            }
+          },
+        });
+      },
+    }
+  }
+
+  render () {
+    return (
+      <View className='mine'>
+        <View className='user-info'>
+          <View className='info-left'>
+            <Image className='user-img' src={this.state.userInfo.head_img}></Image>
+          </View>
+          <View className='info-right'>
+            <View className='user-name'>{this.state.userInfo.user_name}
+              {
+                this.state.userInfo.is_vip == 1 &&
+                <Image className='vip-img' src='https://video-img.fyshark.com/1683860337987f-vip3.png'></Image>
+              }
+            </View>
+            <View className='user-id'>用户ID:{this.state.userInfo.id}</View>
+          </View>
+        </View>
+        {
+          this.state.userInfo.is_vip == 0 ?
+            <View className='user-vip-banner' onClick={e => (this.toVipDetial())}>
+              <Image className='banner-img' mode='widthFix' src='https://video-img.fyshark.com/1683705427196VIP.png'></Image>
+            </View>
+            :
+            <View className='user-vip-banner-have'>
+              <View className='vip-banner-have-left'>
+                <Image className='vip-banner-img' src='https://video-img.fyshark.com/1683860337987f-vip3.png'></Image>
+                <View className='vip-banner-tips'>已开通会员，有效期至：{tool.formattedDate(this.state.userInfo.time_is_vip)}</View>
+              </View>
+              <View className='vip-banner-have-right' onClick={e => (this.toVipDetial())}>
+                续费
+              </View>
+            </View>
+        }
+        <View className='user-page'>
+          {
+            this.state.pageList.map((item, index) => (
+              <View className='page-info' key={index} onClick={e => (this.toDetial(item, index))}>
+                <View className='page-left'>
+                  <Image className='page-icon' src={item.icon}></Image>
+                  <View className='page-title'>{item.title}</View>
+                </View>
+                <Image className='page-next' src='https://video-img.fyshark.com/1683703470907shkls.png'></Image>
+              </View>
+            ))
+          }
+          <Button className=' button'
+            plain type='default' open-type='contact'>
+            <View className='page-info'>
+              <View className='page-left'>
+                <Image className='page-icon' src='https://video-img.fyshark.com/1683703284336shkdj.png'></Image>
+                <View className='page-title'>联系客服</View>
+              </View>
+              <Image className='page-next' src='https://video-img.fyshark.com/1683703470907shkls.png'></Image>
+            </View>
+          </Button>
+          {/* <Button className=' button'
+            plain type='default' open-type='share'>
+            <View className='page-info'>
+              <View className='page-left'>
+                <Image className='page-icon' src='https://video-img.fyshark.com/1683703284336shkdj.png'></Image>
+                <View className='page-title'>转发</View>
+              </View>
+              <Image className='page-next' src='https://video-img.fyshark.com/1683703470907shkls.png'></Image>
+            </View>
+          </Button> */}
+        </View>
+      </View>
+    )
+  }
+}

src/pages/mine/index.less

@@ -0,0 +1,149 @@
+.mine {
+  min-height: 100vh;
+  padding: 70px 30px;
+
+  // padding-bottom: 120px;
+  .user-info {
+    padding: 0 12px;
+    display: flex;
+    align-items: center;
+
+    .info-left {
+      .user-img {
+        width: 130px;
+        height: 130px;
+        display: block;
+        border-radius: 50%;
+      }
+    }
+
+    .info-right {
+      margin-left: 28px;
+
+      .user-name {
+        font-size: 34px;
+        font-family: PingFang SC;
+        font-weight: 800;
+        color: #353535;
+        display: flex;
+        align-items: center;
+      }
+
+      .vip-img {
+        margin-left: 16px;
+        width: 50px;
+        height: 40px;
+        display: block;
+      }
+
+      .user-id {
+        margin-top: 22px;
+        font-size: 24px;
+        font-family: PingFang SC;
+        font-weight: 800;
+        color: #888888;
+      }
+
+    }
+  }
+
+  .user-vip-banner {
+    margin-top: 60px;
+    width: 100%;
+    height: 200px;
+
+    .banner-img {
+      width: 100%;
+      display: block;
+    }
+  }
+
+  .user-vip-banner-have {
+    margin-top: 60px;
+    padding: 30px;
+    border-radius: 20px;
+    background: linear-gradient(90deg, #d48510, #2d291f, #E7AF51);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    .vip-banner-have-left {
+      .vip-banner-img {
+        width: 60px;
+        height: 46px;
+        display: block;
+      }
+
+      .vip-banner-tips {
+        margin-top: 11px;
+        font-size: 26px;
+        font-family: PingFang SC;
+        font-weight: 800;
+        color: #fbf8f8;
+      }
+    }
+    .vip-banner-have-right{
+      padding: 15px 40px;
+      font-size: 28px;
+      border-radius: 30px;
+      font-family: PingFang SC;
+      font-weight: 800;
+      background: #fbf8f8;
+      color: #353535;
+    }
+  }
+
+  .user-page {
+    margin-top: 28px;
+
+    .page-info {
+      width: 100%;
+      padding: 28px 0;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      border-bottom: 1px solid rgba(94, 94, 93, .1);
+
+      .page-left {
+        display: flex;
+        align-items: center;
+
+        .page-icon {
+          width: 36px;
+          height: 36px;
+          display: block;
+        }
+
+        .page-title {
+          margin-left: 16px;
+          font-size: 28px;
+          font-family: PingFang SC;
+          font-weight: 800;
+          color: #353535;
+        }
+      }
+
+      .page-next {
+        width: 30px;
+        height: 30px;
+      }
+    }
+  }
+  .button {
+    padding: 0 0 ;
+    border: none !important;
+    border-bottom: 1px solid rgba(94, 94, 93, .1) !important;
+    line-height: normal !important;
+    outline: none !important;
+    background-color: rgba(0,0,0,0) !important;
+  }
+  
+  button::after {
+    border: none;
+  }
+  .ad-video{
+    margin-top: 10px;
+    width: 100%;
+    height: 200px;
+  }
+}

src/pages/mine/subpages/history/index.config.js

@@ -0,0 +1,5 @@
+export default definePageConfig({
+  navigationBarTitleText: '阅读记录',
+  enableShareAppMessage: true,
+  enableShareTimeline: true ,
+})

src/pages/mine/subpages/history/index.jsx

@@ -0,0 +1,213 @@
+import { Component } from 'react'
+import { View, Text, Button, Image, scrollView, Input } from '@tarojs/components'
+import * as api from '../../../../service/index'
+import tool from '../../../../common/tool'
+import Taro, { } from '@tarojs/taro'
+import './index.less'
+
+export default class collection extends Component {
+  state = {
+    bookList: [],
+    isEdit: false,
+    isOverSelect: false
+  }
+
+  componentWillMount () {
+  }
+  componentDidShow () {
+    this.myBookRead()
+  }
+  onReachBottom () {
+    // if (!this.state.total) {
+    //   this.setState({
+    //     page: this.state.page + 1
+    //   })
+    // }
+  }
+  myBookRead () {
+    api.myBookRead().then(res => {
+      if (res.code == 200) {
+        this.setState({
+          bookList: res.data
+        })
+      }
+    })
+  }
+  changeEdit () {
+    this.setState({
+      isEdit: true
+    })
+  }
+  cancelEdit () {
+    let _bookList = this.state.bookList
+    _bookList.forEach((item, index) => {
+      item.isSelect = false
+    })
+    this.setState({
+      bookList: _bookList,
+      isOverSelect: false,
+      isEdit: false
+    })
+  }
+  deleteEdit () {
+    let that = this
+    Taro.showModal({
+      title: '提示',
+      content: '确定删除吗？',
+      success: function (res) {
+        if (res.confirm) {
+          let book_ids = []
+          that.state.bookList.forEach(item => {
+            if (item.isSelect) {
+              book_ids.push(item.book_id)
+            }
+          })
+
+          api.deleteBookRead({ book_ids: book_ids.toString() }).then(res => {
+            if (res.code == 200) {
+              that.myBookRead()
+              that.setState({
+                isEdit: false,
+                isOverSelect: false
+              })
+            }
+          })
+        } else if (res.cancel) {
+          console.log('用户点击取消')
+        }
+
+      }
+    })
+
+  }
+  overSelect () {
+    let _bookList = this.state.bookList
+    _bookList.forEach((item, index) => {
+      item.isSelect = !this.state.isOverSelect
+    })
+    this.setState({
+      bookList: _bookList,
+      isOverSelect: !this.state.isOverSelect,
+    })
+  }
+  changeSelect (item, index) {
+    if (!this.state.isEdit) return
+    let _bookList = this.state.bookList
+    _bookList.forEach((item, i) => {
+      if (index == i) {
+        item.isSelect = !this.state.bookList[index].isSelect
+      }
+    })
+
+    this.setState({
+      bookList: _bookList
+    }, () => {
+      let list = this.state.bookList.filter(res => {
+        return !res.isSelect
+      })
+      if (list.length == 0) {
+        this.setState({
+          isOverSelect: true
+        })
+      } else {
+        this.setState({
+          isOverSelect: false
+        })
+      }
+    })
+  }
+  toDetail (item, index) {
+    if (this.state.isEdit) {
+      let _bookList = this.state.bookList
+      _bookList.forEach((item, i) => {
+        if (index == i) {
+          item.isSelect = !this.state.bookList[index].isSelect
+        }
+      })
+
+      this.setState({
+        bookList: _bookList
+      }, () => {
+        let list = this.state.bookList.filter(res => {
+          return !res.isSelect
+        })
+        if (list.length == 0) {
+          this.setState({
+            isOverSelect: true
+          })
+        } else {
+          this.setState({
+            isOverSelect: false
+          })
+        }
+      })
+    } else {
+      Taro.navigateTo({
+        url: `/pages/index/subpages/novelText/index?book_id=${item.book_id}`
+      })
+    }
+  }
+
+  render () {
+    return (
+      <View className='mine'>
+        {
+          this.state.bookList.length == 0 ?
+            <View className='empty'>
+              <Image className='empty-img' src='https://video-img.fyshark.com/1683801289275slsll.png'></Image>
+              <View className='empty-tips'>暂时还没有阅读记录哦！</View>
+            </View>
+            :
+            <View className='mine-content'>
+              {
+                !this.state.isEdit ?
+                  <View className='edit'>
+                    <View className='edit-content' onClick={e => (this.changeEdit())}>
+                      <Image className='edit-img' src='https://video-img.fyshark.com/1683687193883dhksjn.png'></Image>
+                      编辑
+                    </View>
+                  </View>
+                  :
+                  <View className='select'>
+                    <View className='select-content' onClick={e => (this.overSelect())}>
+                      <Image className='select-img' src={this.state.isOverSelect ? 'https://video-img.fyshark.com/1683698925516hnakjl.png' : 'https://video-img.fyshark.com/1683698074122dhkahj.png'}></Image>
+                      全选
+                    </View>
+                  </View>
+              }
+              <View className='book-content'>
+                <View className='book-list'>
+                  {
+                    this.state.bookList.map((item, index) => (
+                      <View className='book-info' key={index} onClick={e => (this.toDetail(item, index))}>
+                        <View className='book-info-left'>
+                          <Image className='book-img' src={item.img}></Image>
+                          {
+                            this.state.isEdit &&
+                            <Image className='select-icon' src={item.isSelect ? 'https://video-img.fyshark.com/1683699004116sihel.png' : 'https://video-img.fyshark.com/1683698064582dhka.png'}></Image>
+                          }
+                        </View>
+                        <View className='book-right'>
+                          <View className='book-title'>{item.name}</View>
+                          <View className='book-tips'>{tool.ellipsis(item.album_name, 56)}</View>
+                        </View>
+                      </View>
+                    ))
+                  }
+                </View>
+              </View>
+              {
+                this.state.isEdit &&
+                <View className='edit-console'>
+                  <View className='console'>
+                    <View className='cancellation' onClick={e => (this.cancelEdit())}>取消</View>
+                    <View className='delete' onClick={e => (this.deleteEdit())}>删除</View>
+                  </View>
+                </View>
+              }
+            </View>
+        }
+      </View>
+    )
+  }
+}

src/pages/mine/subpages/history/index.less

@@ -0,0 +1,162 @@
+.mine {
+  width: 100vw;
+  position: relative;
+
+  .empty {
+    position: absolute;
+    left: 50%;
+    top: 30%;
+    transform: translateX(-50%);
+
+    .empty-img {
+      width: 360px;
+      height: 360px;
+    }
+
+    .empty-tips {
+      font-size: 26rpx;
+      font-family: PingFang SC;
+      font-weight: bold;
+      text-align: center;
+      color: #888888;
+    }
+  }
+
+  .mine-content {
+    padding: 70px 50px;
+
+    .edit {
+      display: flex;
+      justify-content: flex-end;
+      align-items: center;
+      font-size: 28px;
+      font-family: PingFang SC;
+      font-weight: bold;
+      color: #888888;
+
+      .edit-content {
+        display: flex;
+        align-items: center;
+      }
+
+      .edit-img {
+        width: 30px;
+        height: 30px;
+        display: block;
+        margin-right: 12px;
+      }
+    }
+
+    .select {
+      display: flex;
+      align-items: center;
+      font-size: 28px;
+      font-family: PingFang SC;
+      font-weight: bold;
+      color: #888888;
+
+      .select-content {
+        display: flex;
+        align-items: center;
+      }
+
+      .select-img {
+        width: 30px;
+        height: 30px;
+        display: block;
+        margin-right: 12px;
+      }
+    }
+
+    .book-content {
+      margin-top: 16px;
+
+      .book-list {
+        .book-info {
+          display: flex;
+          margin-bottom: 30px;
+
+          .book-info-left {
+            position: relative;
+
+            .book-img {
+              width: 158px;
+              height: 220px;
+              display: block;
+              border-radius: 10px;
+            }
+
+            .select-icon {
+              position: absolute;
+              bottom: 14px;
+              right: 8px;
+              width: 48px;
+              height: 48px;
+              display: block;
+            }
+          }
+
+          .book-right {
+            margin-left: 20px;
+
+            .book-title {
+              font-size: 26px;
+              font-family: PingFang SC;
+              font-weight: 800;
+              color: #363636;
+            }
+
+            .book-tips {
+              font-size: 22px;
+              margin-top: 22px;
+              font-family: PingFang SC;
+              font-weight: bold;
+              color: #888888;
+            }
+          }
+        }
+      }
+    }
+
+    .edit-console {
+      width: 100%;
+      position: fixed;
+      bottom: 38px;
+      left: 0;
+
+      .console {
+        padding: 0 40px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        .cancellation {
+          width: 330px;
+          height: 66px;
+          line-height: 66px;
+          text-align: center;
+          background: #E9EAEA;
+          border-radius: 10px;
+          font-size: 26px;
+          font-family: PingFang SC;
+          font-weight: bold;
+          color: #363636;
+        }
+
+        .delete {
+          width: 330px;
+          height: 66px;
+          line-height: 66px;
+          text-align: center;
+          background: linear-gradient(90deg, #E04A4A, #EC705D);
+          border-radius: 10px;
+          font-size: 26px;
+          font-family: PingFang SC;
+          font-weight: bold;
+          color: #FFFFFF;
+        }
+      }
+    }
+  }
+
+}

src/pages/mine/subpages/makeMoney/index.config.js

@@ -0,0 +1,5 @@
+export default definePageConfig({
+  navigationBarTitleText: '我的收益',
+  enableShareAppMessage: true,
+  enableShareTimeline: true ,
+})

src/pages/mine/subpages/makeMoney/index.jsx

@@ -0,0 +1,112 @@
+import { Component } from 'react'
+import { View, Text, Button, Image, scrollView, Input } from '@tarojs/components'
+import * as api from '../../../../service/index'
+import tool from '../../../../common/tool'
+import Taro, { } from '@tarojs/taro'
+import './index.less'
+
+export default class collection extends Component {
+  state = {
+    earningslist: [],//收益详情
+    add_sum: 0,//累计收益
+    already_sum: 0,//已提取收益
+    now_sum: 0,//可提现金额
+    extract_status: 0,
+    page: 1,
+    page_size: 20,
+    isNext: true,//是否还有下一页
+  }
+
+  componentWillMount () {
+    this.getEarningsInfo()
+  }
+  componentDidShow () {
+  }
+  getEarningsInfo () {
+    let params = {
+      page: this.state.page,
+      page_size: this.state.page_size,
+    }
+    api.getEarningsInfo(params).then(res => {
+      if (res.code == 200) {
+        let isNext = true
+        console.log(res.data.earningslist.length, 'res.data.book_cat.length');
+        if (res.data.earningslist.length < 20) {
+          isNext = false
+        }
+        this.setState({
+          earningslist: [...res.data.earningslist, ...this.state.earningslist],
+          add_sum: res.data.add_sum,
+          already_sum: res.data.already_sum,
+          now_sum: res.data.now_sum,
+          extract_status: res.data.extract_status,
+          isNext: isNext,
+          page: isNext ? this.state.page + 1 : this.state.page
+        })
+      }
+    })
+  }
+  withdrawal () {
+    if (this.state.extract_status == 2) {
+      Taro.showToast({
+        title: `目前已有提现金额在审核中...`,
+        icon: 'none',
+      });
+      return
+    }
+    Taro.navigateTo({
+      url: '/pages/mine/subpages/withdrawal/index'
+    })
+  }
+  onReachBottom () {
+    if (this.state.isNext) {
+      this.getEarningsInfo()
+    }
+  }
+
+  render () {
+    return (
+      <View className='mine'>
+        <View className='make-info'>
+          <View className='make-info-top'>
+            <View className='make-info-top-left'>
+              <View className='make-info-title'>目前可提取总金额（元）</View>
+              <View className='make-info-money'>{this.state.now_sum / 100}</View>
+            </View>
+            {
+              this.state.extract_status != 4 &&
+              <View className='make-info-top-right' onClick={e => (this.withdrawal())}>{this.state.extract_status == 2 ? '审核中' : '提现'}</View>
+            }
+          </View>
+          <View className='make-info-bottom'>
+            <View className='make-info-bottom-left'>
+              <View className='make-all-money-title'>累计收益（元）</View>
+              <View className='make-all-money-num'>{this.state.add_sum / 100}</View>
+            </View>
+            <View className='make-info-bottom-right'>
+              <View className='withdrawal-title'>已提现金额（元）</View>
+              <View className='withdrawal-num'>{this.state.already_sum / 100}</View>
+            </View>
+          </View>
+        </View>
+        <View className='income'>
+          <View className='income-title'>收益详情</View>
+          <View className='income-list'>
+            {
+              this.state.earningslist.map((item, index) => (
+                <View className='income-info' key={index}>
+                  <View className='income-left'>
+                    <View className='income-info-title'>{item.money_name}</View>
+                    <View className='income-date'>{item.time}</View>
+                  </View>
+                  <View className='income-right' style={item.earnings_type == 0 ? 'color: #84f121' : 'color: #f13921;'}>{item.earnings_type == 0 ? '+' : '-'}{item.money / 100}</View>
+                </View>
+              ))
+            }
+          </View>
+          <View className='income-tips'>已经到底啦</View>
+        </View>
+      </View >
+    )
+  }
+}

src/pages/mine/subpages/makeMoney/index.less

@@ -0,0 +1,105 @@
+.mine {
+  min-height: 100vh;
+  background: #e4e4e4;
+  padding: 40px 40px;
+
+  .make-info {
+    padding: 40px;
+    background: linear-gradient(180deg, #efbe66, #ec8f05);
+    border-radius: 30px;
+    font-size: 24px;
+    color: #fff;
+
+    .make-info-top {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding-bottom: 40px;
+      border-bottom: 1px solid #ffffff44;
+
+      .make-info-top-left {
+        .make-info-title {}
+
+        .make-info-money {
+          margin-top: 20px;
+          font-size: 28px;
+        }
+      }
+
+      .make-info-top-right {
+        padding: 10px 20px;
+        background: #fff;
+        color: #d48510;
+        border-radius: 28px;
+        font-size: 28px;
+      }
+    }
+
+    .make-info-bottom {
+      margin-top: 30px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+
+      .make-info-bottom-left {
+        .make-all-money-title {}
+
+        .make-all-money-num {
+          margin-top: 20px;
+          font-size: 26px;
+        }
+      }
+
+      .make-info-bottom-right {
+        .withdrawal-num {
+          margin-top: 20px;
+          font-size: 26px;
+        }
+      }
+    }
+  }
+  .income{
+    // height: 900px;
+    // overflow-y: auto;
+    margin-top: 20px;
+    padding: 40px 0;
+    border-radius: 10px;
+    background: #ffffff;
+    .income-title{
+      font-size: 28px;
+      text-align: center;
+      padding: 20px 0;
+      border-bottom: 1px solid rgba(68, 68, 68, 0.1);
+    }
+    .income-list{
+      padding:0 40px ;
+      .income-info{
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        border-bottom: 1px solid rgba(68, 68, 68, 0.1);
+        padding: 30px 0;
+        .income-left{
+          .income-info-title{
+            font-size: 28px;
+  
+          }
+          .income-date{
+            margin-top: 10px;
+            font-size: 24px;
+            color: #4e4d4d;
+          }
+        }
+        .income-right{
+          
+        }
+      }
+    }
+    .income-tips{
+      margin-top: 40px;
+      font-size: 24px;
+      text-align: center;
+      color: rgba(13, 12, 12, 0.4);
+    }
+  }
+}

src/pages/mine/subpages/moneyPlay/index.config.js

@@ -0,0 +1,5 @@
+export default definePageConfig({
+  navigationBarTitleText: '赚钱计划',
+  enableShareAppMessage: true,
+  enableShareTimeline: true ,
+})

src/pages/mine/subpages/moneyPlay/index.jsx

@@ -0,0 +1,36 @@
+import { Component } from 'react'
+import { View, RichText, Button, Image, scrollView, Input } from '@tarojs/components'
+import * as api from '../../../../service/index'
+import tool from '../../../../common/tool'
+import Taro, { } from '@tarojs/taro'
+import './index.less'
+
+export default class collection extends Component {
+  state = {
+    content: ''
+  }
+
+  componentWillMount () {
+    this.getInformationDetails()
+  }
+
+  componentDidShow () {
+  }
+  getInformationDetails () {
+    api.getInformationDetails({ news_id: 24 }).then(res => {
+      if (res.code == 200) {
+        this.setState({
+          content: res.data.content
+        })
+      }
+    })
+  }
+
+  render () {
+    return (
+      <View className='mine'>
+        <RichText className='member-title' nodes={this.state.content}></RichText>
+      </View>
+    )
+  }
+}

src/pages/mine/subpages/moneyPlay/index.less

@@ -0,0 +1,4 @@
+.mine {
+  min-height: 100vh;
+  padding: 40px 20px;
+}

src/pages/mine/subpages/team/index.config.js

@@ -0,0 +1,5 @@
+export default definePageConfig({
+  navigationBarTitleText: '我的团队',
+  enableShareAppMessage: true,
+  enableShareTimeline: true ,
+})

src/pages/mine/subpages/team/index.jsx

@@ -0,0 +1,97 @@
+import { Component } from 'react'
+import { View, Text, Button, Image, scrollView, Input } from '@tarojs/components'
+import * as api from '../../../../service/index'
+import tool from '../../../../common/tool'
+import Taro, { } from '@tarojs/taro'
+import './index.less'
+
+export default class collection extends Component {
+  state = {
+    my_code: "",//邀请码
+    my_role_name: "普通用户",
+    my_role_status: 0,
+    team_sum: 0
+  }
+
+  componentWillMount () {
+  }
+  componentDidShow () {
+    this.getTeamInfo()
+
+  }
+  getTeamInfo () {
+    api.getTeamInfo().then(res => {
+      if (res.code == 200) {
+        this.setState({
+          my_code: res.data.my_code,
+          my_role_name: res.data.my_role_name,
+          my_role_status: res.data.my_role_status,
+          team_sum: res.data.team_sum
+        })
+      }
+    })
+  }
+  teamEnqueue () {
+    if (this.state.my_role_status == 0) {
+      api.teamEnqueue({ input_str: this.state.my_code }).then(res => {
+        if (res.code == 200) {
+          this.getTeamInfo()
+        } else {
+          Taro.showToast({ icon: 'none', title: res.msg });
+        }
+      })
+    } else {
+      Taro.setClipboardData({
+        data: this.state.my_code,
+        success: function (res) {
+          Taro.showToast({ icon: 'none', title: '邀请码复制成功' });
+        }
+      })
+    }
+  }
+  search (e) {
+    console.log(e);
+    this.setState({
+      my_code: e.detail.value
+    })
+  }
+
+
+  render () {
+    return (
+      <View className='mine'>
+        <View className='content'>
+          {
+            this.state.my_role_status == 0 ?
+              <View>
+                <View className='title'>请输入邀请码</View>
+                <View className='search'>
+                  <Image className='search-img' src='https://video-img.fyshark.com/1683600195067ahjdklj.png'></Image>
+                  <Input className='search-input' onInput={e => (this.search(e))} type='text' placeholder='请输入邀请码' focus />
+                </View>
+              </View>
+              :
+              <View>
+                <View className='title'>团队邀请码：</View>
+                <View className='code'>{this.state.my_code}</View>
+              </View>
+          }
+          <View className='console'>
+            <View className='console-button' onClick={e => (this.teamEnqueue())}>{this.state.my_role_status == 0 ? "确定" : '一键复制'}</View>
+          </View>
+          <View className='user-info'>
+            <View className='identity'>我的角色：{this.state.my_role_name}</View>
+            {
+              this.state.my_role_status != 1 &&
+              <View className='status'>我的邀请状态：{this.state.my_role_status == 0 ? '未邀请' : '已加入'}</View>
+            }
+            {
+              this.state.my_role_status == 1 &&
+              <View className='status'>我的团队人数：{this.state.team_sum}人</View>
+            }
+          </View>
+        </View>
+      </View>
+    )
+  }
+}

src/pages/mine/subpages/team/index.less

@@ -0,0 +1,73 @@
+.mine {
+  width: 100vw;
+  position: relative;
+  
+  .content {
+    padding: 40px;
+    margin-top: 60px;
+
+    .title {
+      font-size: 28px;
+      margin-bottom: 30px;
+    }
+    .code{
+      text-align: center;
+      font-size: 48px;
+    }
+
+    .search {
+      // width: 100%;
+      display: flex;
+      padding: 0 20px;
+      height: 70px;
+      align-items: center;
+      background: #EAEAEF;
+      border-radius: 10px;
+
+      .search-img {
+        width: 36px;
+        height: 36px;
+        display: flex;
+      }
+
+      .search-input {
+        margin-left: 6px;
+        flex: 1;
+        font-size: 24px;
+        font-family: PingFang SC;
+        font-weight: bold;
+        color: rgba(0, 0, 0, 0.4);
+        line-height: 82px;
+      }
+    }
+    .console{
+      width: 100%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      .console-button{
+        margin-top: 80px;
+        width: 70%;
+        height: 60px;
+        border-radius: 60px;
+        line-height: 60px;
+        background: firebrick;
+        color: #EAEAEF;
+        font-size: 28px;
+        text-align: center;
+      }
+    }
+    .user-info{
+      margin-top: 40px;
+      padding: 40px;
+      background: #e3e3e979;
+      font-size: 28px;
+      .identity{
+        
+      }
+      .status{
+        margin-top: 10px;
+      }
+    }
+  }
+}

src/pages/mine/subpages/vipDetail/index.config.js

@@ -0,0 +1,5 @@
+export default definePageConfig({
+  navigationBarTitleText: '开通会员',
+  enableShareAppMessage: true,
+  enableShareTimeline: true ,
+})

src/pages/mine/subpages/vipDetail/index.jsx

@@ -0,0 +1,276 @@
+import { Component } from 'react'
+import { View, Text, Button, Image, scrollView, Input } from '@tarojs/components'
+import * as api from '../../../../service/index'
+import tool from '../../../../common/tool'
+import Taro, { } from '@tarojs/taro'
+import './index.less'
+
+export default class collection extends Component {
+  state = {
+    userInfo: {},
+    purchaseList: [],
+    selectVip: 0,//当前选择的充值
+    isIos: false,
+    isOpen: false,//是否打开口令填写弹窗
+    code: '',//口令
+    pay_status: 1,//是否绑定口令
+  }
+
+  componentWillMount () {
+    let that = this
+    this.getShopList()
+    this.getUserInfo()
+    Taro.getSystemInfo({
+      success: function (res) {
+        if (res.platform != "android") {
+          that.setState({
+            isIos: true
+          })
+        }
+      }
+    })
+  }
+  componentDidShow () {
+  }
+  getUserInfo () {
+    api.getUserInfo().then(res => {
+      Taro.hideLoading()
+      if (res.code == 200) {
+        this.setState({
+          userInfo: res.data
+        })
+      }
+    })
+  }
+  getShopList () {
+    api.getShopList().then(res => {
+      if (res.code == 200) {
+        this.setState({
+          purchaseList: res.data.vip_list,
+          pay_status: res.data.pay_status
+        })
+      }
+    })
+  }
+  //充值
+  toOrder () {
+    if (this.state.purchaseList[this.state.selectVip].ios_status == 0) {
+      if (this.state.isIos) {
+        Taro.showToast({
+          title: 'ios暂不支持充值',
+          icon: 'none',
+          duration: 2000
+        })
+        return
+      }
+    }
+    let that = this
+    let item = this.state.purchaseList[this.state.selectVip]
+    if (process.env.TARO_ENV === 'tt') {
+      Taro.showLoading({
+        title: '加载中...',
+      })
+      api.ttCreateOrder({ pay_info_id: item.id, book_id: -1 }).then(res => {
+        if (res.code == 200) {
+          Taro.hideLoading()
+          tt.pay({
+            orderInfo: {
+              order_id: res.data.order_id,
+              order_token: res.data.order_token
+            },
+            service: 5,
+            success (item) {
+              if (item.code == 0) {
+                that.getUserInfo()
+                setTimeout(() => {
+                  that.getUserInfo()
+                }, 2000);
+                // 支付成功处理逻辑，只有res.code=0时，才表示支付成功
+                // 但是最终状态要以商户后端结果为准
+              }
+            },
+            fail (item) {
+              // 调起收银台失败处理逻辑
+            },
+          });
+        }
+      })
+    } else if (process.env.TARO_ENV === 'weapp') {
+      Taro.getSystemInfo({
+        success: function (res) {
+          Taro.showLoading({
+            title: '加载中...',
+          })
+          api.createOrder({ shop_id: item.id }).then(res => {
+            if (res.code == 200) {
+              Taro.hideLoading()
+              Taro.requestPayment({
+                timeStamp: res.data.timeStamp,
+                nonceStr: res.data.nonceStr,
+                package: res.data.package,
+                signType: res.data.signType,
+                paySign: res.data.paySign,
+                success: function (res) {
+                  // console.log(res);
+                  //添加2s延迟在刷新数据
+                  setTimeout(() => {
+                    that.getUserInfo()
+                  }, 2000);
+                },
+                fail: function (err) {
+                  try {
+                    const res = Taro.getSystemInfoSync()
+                    console.log(res, 'iphone=====');
+                  } catch (e) {
+                  }
+                }
+              })
+            }
+          })
+        }
+      })
+    }
+
+  }
+  selectVip (item, index) {
+    this.setState({
+      selectVip: index
+    })
+  }
+  openCode () {
+    this.setState({
+      isOpen: true
+    })
+  }
+  searchCode (e) {
+    this.setState(
+      {
+        code: e.detail.value
+      }
+    )
+  }
+  cancel () {
+    this.setState({
+      isOpen: false
+    })
+  }
+  determine () {
+    api.getCheckoutBookCode({ input_str: this.state.code }).then(res => {
+      if (res.code == 200) {
+        this.getShopList()
+        this.getUserInfo()
+        this.setState({
+          isOpen: false
+        })
+        Taro.showToast({
+          title: `已获取折扣`,
+          icon: 'none',
+          duration: 2000
+        })
+      } else {
+        Taro.showToast({
+          title: res.msg,
+          icon: 'none',
+          duration: 2000
+        })
+      }
+    })
+  }
+
+  render () {
+    return (
+      <View className='mine'>
+        <View className='mine-content'>
+          {
+            this.state.userInfo.is_vip == 1 &&
+            <View className='user-vip-banner-have'>
+              <View className='vip-banner-have-left'>
+                <Image className='vip-banner-img' src='https://video-img.fyshark.com/1683860337987f-vip3.png'></Image>
+                <View className='vip-banner-tips'>已开通会员，有效期至：{tool.formattedDate(this.state.userInfo.time_is_vip)}</View>
+              </View>
+            </View>
+          }
+          <View className='vip-tips'>
+            <View className='tips-title'>会员权益</View>
+            <View className='tips-content'>
+              <View className='tips-left'>
+                <View className='tips-img'>
+                  <Image className='tips-icon' src='https://video-img.fyshark.com/1683709602205akkhs.png'></Image>
+                </View>
+                <View className='tips-text'>
+                  <View className='text-title'>免费阅读</View>
+                  <View className='text-introduce'>付费章节享受免费阅读</View>
+                </View>
+              </View>
+              <View className='tips-right'>
+                <View className='tips-img'>
+                  <Image className='tips-icon' src='https://video-img.fyshark.com/1683709622282slljl.png'></Image>
+                </View>
+                <View className='tips-text'>
+                  <View className='text-title'>新书优先阅读</View>
+                  <View className='text-introduce'>新书会员可优先阅读</View>
+                </View>
+              </View>
+            </View>
+          </View>
+          <View className='purchase'>
+            <View className='purchase-title'>购买会员</View>
+            {
+              this.state.pay_status == 0 &&
+              <View className='active' onClick={e => (this.openCode())}>
+                <Image className='active-img' src='https://video-img.fyshark.com/1685349084726icon.png' mode='widthFix'></Image>
+              </View>
+            }
+            <View className='purchase-list'>
+              {
+                this.state.purchaseList.map((item, index) => (
+                  <View className={this.state.selectVip == index ? 'purchase-info-active' : 'purchase-info'}
+                    key={index}
+                    onClick={e => (this.selectVip(item, index))}
+                  >
+                    {
+                      item.tag && item.tag.length > 0 &&
+                      < View className='purchase-tips'>{item.tag}</View>
+                    }
+                    <View className='purchase-title'>{item.title}</View>
+                    <View className='purchase-money'><View className='purchase-money-tip'>￥</View>{item.money / 100}</View>
+                    <View className='purchase-oldMoney'>￥{item.coin / 100}元/周</View>
+                    <View className='purchase-text'>
+                      <View className='purchase-button'>{item.sub_title}</View>
+                    </View>
+                  </View>
+                ))
+              }
+            </View>
+          </View>
+          <View className='payInfo' onClick={e => (this.toOrder())}>
+            立即支付
+          </View>
+          <View className='prompt'>
+            <View className='prompt-title'>温馨提示</View>
+            <View className='prompt-text'>1.未满18周岁的用户请谨慎购买；</View>
+            <View className='prompt-text'>2.VIP会员属于虚拟商品，一旦购买不做退换；</View>
+            <View className='prompt-text'>3.如有问题请在我的页面联系客服。</View>
+          </View>
+        </View>
+        {
+          this.state.isOpen &&
+          <View className='information'>
+            <View className='information-content'>
+              <View className='information-title'>
+                请输入口令码
+              </View>
+              <View className='search'>
+                <Input className='search-input' onInput={e => (this.searchCode(e))} type='text' placeholder='请输入口令码' focus />
+              </View>
+              <View className='information-console'>
+                <View className='cancel' onClick={e => (this.cancel())}>取消</View>
+                <View className='determine' onClick={e => (this.determine())}>确定</View>
+              </View>
+            </View>
+          </View>
+        }
+      </View >
+    )
+  }
+}

src/pages/mine/subpages/vipDetail/index.less

@@ -0,0 +1,367 @@
+.mine {
+  width: 100vw;
+  min-height: 100vh;
+
+  .mine-content {
+    padding: 70px 24px;
+    padding-bottom: 180px;
+
+    .vip-tips {
+      .tips-title {
+        font-size: 28rpx;
+        font-family: PingFang SC;
+        font-weight: bold;
+        color: #353535;
+
+      }
+
+      .tips-content {
+        margin-top: 60px;
+        padding-bottom: 52px;
+        border-bottom: 1px solid #B2B2B2;
+        display: flex;
+
+        .tips-left {
+          flex: 1;
+          display: flex;
+          align-items: center;
+
+          .tips-img {
+            width: 78px;
+            height: 78px;
+            background: linear-gradient(90deg, #F8E6C0, #DCA542);
+            border-radius: 50%;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+
+            .tips-icon {
+              width: 50px;
+              height: 50px;
+            }
+          }
+
+          .tips-text {
+            margin-left: 12px;
+
+            .text-title {
+              font-size: 28rpx;
+              font-family: PingFang SC;
+              font-weight: bold;
+              color: #353535;
+            }
+
+            .text-introduce {
+              font-size: 22px;
+              font-family: PingFang SC;
+              font-weight: bold;
+              color: #888888;
+            }
+          }
+        }
+
+        .tips-right {
+          flex: 1;
+          display: flex;
+          align-items: center;
+
+          .tips-img {
+            width: 78px;
+            height: 78px;
+            background: linear-gradient(90deg, #F8E6C0, #DCA542);
+            border-radius: 50%;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+
+            .tips-icon {
+              width: 50px;
+              height: 50px;
+            }
+          }
+
+          .tips-text {
+            margin-left: 12px;
+
+            .text-title {
+              font-size: 28rpx;
+              font-family: PingFang SC;
+              font-weight: bold;
+              color: #353535;
+            }
+
+            .text-introduce {
+              font-size: 22px;
+              font-family: PingFang SC;
+              font-weight: bold;
+              color: #888888;
+            }
+          }
+        }
+      }
+    }
+
+    .purchase {
+      margin-top: 48px;
+
+      .purchase-title {
+        font-size: 28px;
+        font-family: PingFang SC;
+        font-weight: bold;
+        color: #353535;
+      }
+
+      .active {
+        margin-top: 20px;
+        .active-img {
+          width: 100%;
+        }
+      }
+
+      .purchase-list {
+        margin-top: 38px;
+        display: flex;
+        justify-content: space-between;
+
+        .purchase-info {
+          position: relative;
+          width: 212px;
+          padding: 54px 0 26px 0;
+          background: #FFFFFF;
+          border: 2px solid rgba(136, 136, 136, 0.5);
+          border-radius: 20rpx;
+          text-align: center;
+          color: #353535;
+
+        }
+
+        .purchase-info-active {
+          position: relative;
+          width: 212px;
+          padding: 54px 0 26px 0;
+          background: #FCF5E9;
+          border: 2px solid #E7C06F;
+          border-radius: 20rpx;
+          text-align: center;
+          color: #AC5A27;
+
+        }
+
+        .purchase-tips {
+          position: absolute;
+          left: 0;
+          top: -22px;
+          background: linear-gradient(90deg, #F1A53E, #ED7535);
+          border-radius: 20rpx 0rpx 20rpx 0rpx;
+          padding: 8px 22px 6px 20px;
+          font-size: 24px;
+          font-family: PingFang SC;
+          font-weight: bold;
+          color: #FFFFFF;
+        }
+
+        .purchase-title {
+          font-size: 24px;
+          font-family: PingFang SC;
+          font-weight: 800;
+
+        }
+
+        .purchase-money {
+          margin-top: 20px;
+          font-size: 40px;
+          font-family: PingFang SC;
+          font-weight: 800;
+        }
+
+        .purchase-money-tip {
+          display: inline-block;
+          font-size: 20rpx;
+          font-family: PingFang SC;
+          font-weight: 800;
+
+        }
+
+        .purchase-oldMoney {
+          margin-top: 10px;
+          font-size: 24px;
+          font-family: PingFang SC;
+          font-weight: bold;
+          text-decoration: line-through
+        }
+
+        .purchase-text {
+          margin-top: 24px;
+          display: flex;
+          justify-content: center;
+
+          .purchase-button {
+            width: 144px;
+            height: 38px;
+            line-height: 38px;
+            background: #F2D9A9;
+            border-radius: 19px;
+            font-size: 24px;
+            font-family: PingFang SC;
+            font-weight: 800;
+            color: #AC5A27;
+          }
+        }
+      }
+    }
+
+    .payInfo {
+      margin-top: 50px;
+      height: 76px;
+      line-height: 76px;
+      background: linear-gradient(180deg, #FBC578, #FC9D18);
+      border-radius: 38px;
+      font-size: 30px;
+      font-family: PingFang SC;
+      text-align: center;
+      font-weight: 800;
+      color: #FFFFFF;
+    }
+
+    .prompt {
+      margin-top: 50px;
+
+      .prompt-title {
+        font-size: 28px;
+        font-family: PingFang SC;
+        font-weight: bold;
+        color: #353535;
+      }
+
+      .prompt-text {
+        font-size: 22px;
+        font-family: PingFang SC;
+        font-weight: bold;
+        color: #888888;
+        line-height: 52px;
+      }
+    }
+
+    .user-vip-banner-have {
+      padding: 30px;
+      border-radius: 20px;
+      background: linear-gradient(90deg, #d48510, #2d291f, #E7AF51);
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 24px;
+
+      .vip-banner-have-left {
+        .vip-banner-img {
+          width: 60px;
+          height: 46px;
+          display: block;
+        }
+
+        .vip-banner-tips {
+          margin-top: 11px;
+          font-size: 26px;
+          font-family: PingFang SC;
+          font-weight: 800;
+          color: #fbf8f8;
+        }
+      }
+
+      .vip-banner-have-right {
+        padding: 15px 40px;
+        font-size: 28px;
+        border-radius: 30px;
+        font-family: PingFang SC;
+        font-weight: 800;
+        background: #fbf8f8;
+        color: #353535;
+      }
+
+    }
+  }
+  .information {
+    position: fixed;
+    background: rgba(0, 0, 0, 0.4);
+    width: 100vw;
+    height: 100vh;
+    left: 0;
+    top: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    .information-content {
+      border-radius: 20px;
+      width: 80%;
+      padding: 40px;
+      background: #fff;
+      .information-title{
+        text-align: center;
+        font-size: 36px;
+      }
+      .information-tips{
+        margin-top: 20px;
+        font-size: 24px;
+      }
+
+      .search-title {
+        margin-top: 40px;
+        font-size: 32px;
+      }
+
+      .search {
+        margin-top: 20px;
+        // width: 100%;
+        display: flex;
+        padding: 0 20px;
+        height: 70px;
+        align-items: center;
+        background: #EAEAEF;
+        border-radius: 10px;
+  
+        .search-img {
+          width: 36px;
+          height: 36px;
+          display: flex;
+        }
+  
+        .search-input {
+          margin-left: 6px;
+          flex: 1;
+          font-size: 24px;
+          font-family: PingFang SC;
+          font-weight: bold;
+          color: rgba(0, 0, 0, 0.4);
+          line-height: 82px;
+        }
+      }
+      .information-console{
+        margin-top: 40px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        font-size: 28px;
+        text-align: center;
+        .cancel{
+          width: 240px;
+          height: 64px;
+          border-radius: 10px;
+          line-height: 64px;
+          border: 1px solid #777373;
+
+        }
+        .determine{
+          width: 240px;
+          height: 64px;
+          border-radius: 10px;
+          color: #fff;
+          line-height: 64px;
+          background:linear-gradient(90deg, #E04A4A, #EC705D);
+        }
+      }
+
+    }
+
+
+  }
+}

src/pages/mine/subpages/withdrawal/index.config.js

@@ -0,0 +1,5 @@
+export default definePageConfig({
+  navigationBarTitleText: '提现',
+  enableShareAppMessage: true,
+  enableShareTimeline: true ,
+})

src/pages/mine/subpages/withdrawal/index.jsx

@@ -0,0 +1,206 @@
+import { Component } from 'react'
+import { View, Text, Button, Image, scrollView, Input } from '@tarojs/components'
+import * as api from '../../../../service/index'
+import tool from '../../../../common/tool'
+import Taro, { } from '@tarojs/taro'
+import './index.less'
+
+export default class collection extends Component {
+  state = {
+    title: '',
+    phone: '',
+    account: '',
+    vip_list: [],
+    vipIndex: 0,//当前选择的提现金额
+    now_sum: 0,//总金额
+    extract_status: 0,//是否已填写收款信息
+    isOpen: false,//是否打开收款信息填写弹窗
+    extract_text: '',
+  }
+
+  componentWillMount () {
+    this.getExtractList()
+  }
+  componentDidShow () {
+  }
+  getExtractList () {
+    api.getExtractList().then(res => {
+      if (res.code == 200) {
+        this.setState({
+          now_sum: res.data.now_sum,
+          vip_list: res.data.vip_list,
+          extract_status: res.data.extract_status,
+          title: res.data.alipay_name,
+          phone: res.data.phone_num,
+          account: res.data.alipay_account,
+          extract_text: res.data.extract_text
+        })
+      }
+    })
+  }
+  searchTitle (e) {
+    console.log(e);
+    this.setState(
+      {
+        title: e.detail.value
+      }
+    )
+  }
+  searchAccount (e) {
+    console.log(e);
+    this.setState(
+      {
+        account: e.detail.value
+      }
+    )
+  }
+  searchPhone (e) {
+    console.log(e);
+    this.setState(
+      {
+        phone: e.detail.value
+      }
+    )
+  }
+  cancel () {
+    this.setState({
+      isOpen: false
+    })
+  }
+  determine () {
+    let that = this
+    switch (0) {
+      case this.state.title.length:
+        Taro.showToast({
+          title: `请输入支付宝昵称`,
+          icon: 'none',
+        });
+        return
+      case this.state.account.length:
+        Taro.showToast({
+          title: `请输入支付宝账号`,
+          icon: 'none',
+        });
+        return
+
+      case this.state.phone.length:
+        Taro.showToast({
+          title: `请输入自己的手机号`,
+          icon: 'none',
+        });
+        return
+    }
+    let text = `确定提现${this.state.vip_list[this.state.vipIndex].title}到支付宝吗？`
+    if (this.state.vip_list[this.state.vipIndex].money == -1) {
+      text = `确定将全部金额提现到支付宝吗？`
+    }
+    Taro.showModal({
+      title: '提示',
+      content: text,
+      success: function (res) {
+        if (res.confirm) {
+          let params = {
+            alipay_name: that.state.title,
+            alipay_account: that.state.account,
+            phone_num: that.state.phone,
+            money: that.state.vip_list[that.state.vipIndex].money == -1 ? that.state.now_sum : that.state.vip_list[that.state.vipIndex].money
+          }
+          api.alipayExtract(params).then(i => {
+            if (i.code == 200) {
+              Taro.navigateBack()
+            }
+          })
+        } else if (res.cancel) {
+          console.log('用户点击取消')
+        }
+      }
+    })
+  }
+  openUserInfo (item, index) {
+    console.log(item);
+    if (this.state.now_sum / 100 < 50) {
+      Taro.showToast({
+        title: `总金额小于50`,
+        icon: 'none',
+      });
+      return
+    }
+    if (this.state.now_sum < item.money) {
+      Taro.showToast({
+        title: `总金额小于${item.money / 100}`,
+        icon: 'none',
+      });
+      return
+    }
+
+    this.setState({
+      isOpen: true,
+      vipIndex: index,
+    })
+  }
+
+  render () {
+    return (
+      <View className='mine'>
+        <View className='withdrawal-top'>
+          <View className='withdrawal-num'>{this.state.now_sum / 100}</View>
+          <View className='withdrawal-tips'>总金额（元）</View>
+        </View>
+        <View className='withdrawal-info'>
+          {
+            this.state.extract_status == 3 &&
+            <View className='withdrawal-results'>
+              <View className='results-title'>提现失败</View>
+              <View className='results-tips'>原因：{this.state.extract_text}</View>
+            </View>
+          }
+          <View className='withdrawal-title'>支付宝提现</View>
+          <View className='withdrawal-content'>
+            {
+              this.state.vip_list.map((item, index) => (
+                <View className='withdrawal-info-list' key={index} onClick={e => (this.openUserInfo(item, index))}>
+                  {item.money == -1 ? '全部' : `${item.money / 100}`}
+                  {
+                    item.money != -1 &&
+                    <View className='withdrawal-info-list-unit'>元</View>
+                  }
+                </View>
+              ))
+            }
+          </View>
+        </View>
+        <View className='tip'>
+          <View className='tips-text'>1、个人提现到账时间预计在三个工作日之内。</View>
+          <View className='tips-text'>2、大金额提现会有工作人员电话确认，请保持通讯正常。</View>
+        </View>
+        {
+          this.state.isOpen &&
+          <View className='information'>
+            <View className='information-content'>
+              <View className='information-title'>
+                请填写收款信息
+              </View>
+              <View className='information-tips'>请仔细确认以下信息，如有错误导致打款失败平台概不负责!</View>
+              <View className='search-title'>支付宝昵称：</View>
+              <View className='search'>
+                <Input className='search-input' onInput={e => (this.searchTitle(e))} type='text' placeholder={this.state.title.length > 0 ? this.state.title : '请输入支付宝昵称'} focus />
+              </View>
+              <View className='search-title'>支付宝账号：</View>
+              <View className='search'>
+                <Input className='search-input' onInput={e => (this.searchAccount(e))} type='text' placeholder={this.state.account.length > 0 ? this.state.account : '请输入支付宝账号'} focus />
+              </View>
+              <View className='search-title'>手机号：</View>
+              <View className='search'>
+                <Input className='search-input' onInput={e => (this.searchPhone(e))} type='text' placeholder={this.state.phone.length > 0 ? this.state.phone : '请输入自己的手机号'} focus />
+              </View>
+              <View className='information-console'>
+                <View className='cancel' onClick={e => (this.cancel())}>取消</View>
+                <View className='determine' onClick={e => (this.determine())}>确定</View>
+              </View>
+            </View>
+          </View>
+        }
+      </View >
+    )
+  }
+}

src/pages/mine/subpages/withdrawal/index.less

@@ -0,0 +1,169 @@
+.mine {
+  min-height: 100vh;
+
+  .withdrawal-top {
+    padding: 60px 0 100px 0;
+    background: #ea702d;
+
+    .withdrawal-num {
+      font-size: 46px;
+      color: #f2f3d0;
+      text-align: center;
+    }
+
+    .withdrawal-tips {
+      margin-top: 10px;
+      font-size: 28px;
+      color: #f2f3d0;
+      text-align: center;
+    }
+  }
+
+  .withdrawal-info {
+    width: 100%;
+    margin-top: -20px;
+    border-top-left-radius: 20px;
+    border-top-right-radius: 20px;
+    background: #fff;
+    padding: 40px 0;
+    .withdrawal-results{
+      padding: 0 40px;
+      margin-bottom: 20px;
+      text-align: center;
+      color: red;
+      font-size: 24px;
+      .results-tips{
+        margin-top: 10px
+      }
+    }
+
+    .withdrawal-title {
+      padding-left: 40px;
+      font-size: 32px;
+    }
+    .withdrawal-results{
+
+    }
+
+    .withdrawal-content {
+      margin-top: 40px;
+
+      .withdrawal-info-list {
+        border-radius: 10px;
+        margin-top: 20px;
+        margin-left: 40px;
+        display: inline-block;
+        width: 198px;
+        height: 120px;
+        line-height: 120px;
+        font-size: 36px;
+        font-family: PingFang SC;
+        font-weight: 600;
+        text-align: center;
+        border: 1px solid rgba(68, 68, 68, 0.2);
+
+        .withdrawal-info-list-unit {
+          margin-left: 6px;
+          font-size: 24px;
+          display: inline-block;
+          font-weight: 400;
+        }
+      }
+    }
+  }
+  .tip{
+    margin-top: 60px;
+    padding: 0 40px;
+    
+    .tips-text{
+      margin-top: 10px;
+      font-size: 24px;
+    }
+  }
+
+  .information {
+    position: fixed;
+    background: rgba(0, 0, 0, 0.4);
+    width: 100vw;
+    height: 100vh;
+    left: 0;
+    top: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    .information-content {
+      border-radius: 20px;
+      width: 80%;
+      padding: 40px;
+      background: #fff;
+      .information-title{
+        text-align: center;
+        font-size: 36px;
+      }
+      .information-tips{
+        margin-top: 20px;
+        font-size: 24px;
+      }
+
+      .search-title {
+        margin-top: 40px;
+        font-size: 32px;
+      }
+
+      .search {
+        margin-top: 20px;
+        // width: 100%;
+        display: flex;
+        padding: 0 20px;
+        height: 70px;
+        align-items: center;
+        background: #EAEAEF;
+        border-radius: 10px;
+  
+        .search-img {
+          width: 36px;
+          height: 36px;
+          display: flex;
+        }
+  
+        .search-input {
+          margin-left: 6px;
+          flex: 1;
+          font-size: 24px;
+          font-family: PingFang SC;
+          font-weight: bold;
+          color: rgba(0, 0, 0, 0.4);
+          line-height: 82px;
+        }
+      }
+      .information-console{
+        margin-top: 40px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        font-size: 28px;
+        text-align: center;
+        .cancel{
+          width: 240px;
+          height: 64px;
+          border-radius: 10px;
+          line-height: 64px;
+          border: 1px solid #777373;
+
+        }
+        .determine{
+          width: 240px;
+          height: 64px;
+          border-radius: 10px;
+          color: #fff;
+          line-height: 64px;
+          background:linear-gradient(90deg, #E04A4A, #EC705D);
+        }
+      }
+
+    }
+
+
+  }
+}

src/service/index.js

@@ -0,0 +1,201 @@
+//首页js接口
+import Request from '../api/request';
+
+//登录
+export const login = data =>
+  Request({
+    url: '/api/login',
+    method: 'POST',
+    data,
+  });
+//首页tab
+export const getBookCatIndex = data =>
+  Request({
+    url: '/api/get_book_cat_index',
+    method: 'POST',
+    data,
+  });
+//分类书籍
+export const getBookCatInfo = data =>
+  Request({
+    url: '/api/get_book_cat_info_v2',
+    method: 'POST',
+    data,
+  });
+//书籍简介
+export const getBookinfo = data =>
+  Request({
+    url: '/api/get_book_info',
+    method: 'POST',
+    data,
+  });
+//加入书架
+export const bookCollect = data =>
+  Request({
+    url: '/api/book_collect',
+    method: 'POST',
+    data,
+  });
+//获取目录
+export const getBookCatalogue = data =>
+  Request({
+    url: '/api/get_book_catalogue',
+    method: 'POST',
+    data,
+  });
+//获取文本
+export const getBookContent = data =>
+  Request({
+    url: '/api/get_book_content',
+    method: 'POST',
+    data,
+  });
+//获取书架
+export const myBookFollow = data =>
+  Request({
+    url: '/api/my_book_follow',
+    method: 'POST',
+    data,
+  });
+//获取用户信息
+export const getUserInfo = data =>
+  Request({
+    url: '/api/get_user_info',
+    method: 'POST',
+    data,
+  });
+//上报阅读记录
+export const bookReadReort = data =>
+  Request({
+    url: '/api/book_read_reort',
+    method: 'POST',
+    data,
+  });
+//获取订单列表
+export const getShopList = data =>
+  Request({
+    url: '/api/get_shop_list',
+    method: 'POST',
+    data,
+  });
+//获取阅读记录
+export const myBookRead = data =>
+  Request({
+    url: '/api/my_book_read',
+    method: 'POST',
+    data,
+  });
+//删除阅读记录
+export const deleteBookRead = data =>
+  Request({
+    url: '/api/delete_book_read',
+    method: 'POST',
+    data,
+  });
+//删除书架记录
+export const deleteBookCollect = data =>
+  Request({
+    url: '/api/delete_book_collect',
+    method: 'POST',
+    data,
+  });
+//搜索
+export const getBookSearch = data =>
+  Request({
+    url: '/api/get_book_search',
+    method: 'POST',
+    data,
+  });
+//创建微信订单
+export const createOrder = data =>
+  Request({
+    url: '/api/wx_create_order',
+    method: 'POST',
+    data,
+  });
+//创建抖音订单
+export const ttCreateOrder = data =>
+  Request({
+    url: '/api/pay/tt_create_order',
+    method: 'POST',
+    data,
+  });
+//喜欢列表
+export const getBookLike = data =>
+  Request({
+    url: '/api/get_book_like',
+    method: 'POST',
+    data,
+  });
+//获取口令
+export const getCommand = data =>
+  Request({
+    url: '/api/get_command',
+    method: 'POST',
+    data,
+  });
+//获取我的收益
+export const getEarningsInfo = data =>
+  Request({
+    url: '/api/get_earnings_info',
+    method: 'POST',
+    data,
+  });
+//获取提现列标
+export const getExtractList = data =>
+  Request({
+    url: '/api/get_extract_list',
+    method: 'POST',
+    data,
+  });
+//提现
+export const alipayExtract = data =>
+  Request({
+    url: '/api/alipay_extract',
+    method: 'POST',
+    data,
+  });
+//赚钱说明
+export const getInformationDetails = data =>
+  Request({
+    url: '/api/get_information_details',
+    method: 'POST',
+    data,
+  });
+//是否打开抖音广告
+export const getAppConfig = data =>
+  Request({
+    url: '/api/get_app_config',
+    method: 'POST',
+    data,
+  });
+//上报
+export const reportLogin = data =>
+  Request({
+    url: '/api/report_login',
+    method: 'POST',
+    data,
+  });
+//获取我的团队信息
+export const getTeamInfo = data =>
+  Request({
+    url: '/api/get_team_info',
+    method: 'POST',
+    data,
+  });
+
+//输入邀请码
+export const teamEnqueue = data =>
+  Request({
+    url: '/api/team_enqueue',
+    method: 'POST',
+    data,
+  });
+//绑定口令
+export const getCheckoutBookCode = data =>
+  Request({
+    url: '/api/get_checkout_book_code',
+    method: 'POST',
+    data,
+  });
+

types/global.d.ts

@@ -0,0 +1,19 @@
+/// <reference types="@tarojs/taro" />
+
+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 namespace NodeJS {
+  interface ProcessEnv {
+    TARO_ENV: 'weapp' | 'swan' | 'alipay' | 'h5' | 'rn' | 'tt' | 'quickapp' | 'qq' | 'jd'
+  }
+}
+