第一版

babel.config.js

@@ -4,7 +4,7 @@ module.exports = {
   presets: [
     ['taro', {
       framework: 'react',
-      ts: false
+      ts: true
     }]
   ]
 }

package.json

@@ -53,7 +53,7 @@
         "@tarojs/runtime": "3.5.7",
         "@tarojs/shared": "3.5.7",
         "@tarojs/taro": "3.5.7",
-        "@tarojs/taro-h5": "3.5.7",
+        "@tarojs/taro-h5": "^3.5.7",
         "@vant/weapp": "^1.10.14",
         "postcss": "^8.2.1",
         "react": "^18.0.0",
@@ -81,4 +81,4 @@
         "version": "1.3.3",
         "desc": "添加广告"
     }
-}
+}

src/api/config.js

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

src/app.config.js

@@ -1,15 +1,21 @@
+
+import Taro from '@tarojs/taro'
 export default defineAppConfig({
   pages: [
     'pages/index/index',
     'pages/collection/index',
     "pages/darwDetail/index",
-    "pages/mine/index"
+    "pages/communityDetail/index",
+    "pages/earnPoints/index",
+    "pages/mine/index",
+
   ],
   window: {
     backgroundTextStyle: 'light',
     navigationBarBackgroundColor: '#041129',
     navigationBarTitleText: 'AI绘画',
-    navigationBarTextStyle: 'white'
+    navigationBarTextStyle: 'white',
+    backgroundColor: "#041129"
   },
   tabBar: {
     color: "#C6C6C6",
@@ -21,7 +27,7 @@ export default defineAppConfig({
         pagePath: "pages/collection/index",
         iconPath: "images/nav/like.png",
         selectedIconPath: "images/nav/like_pin.png",
-        text: "拓展"
+        text: "社区"
 
       },
       {

src/app.js

@@ -24,22 +24,24 @@ class App extends Component {
     })
     // 获取路由参数
     let params = this.$instance.router.params
-    console.log(params, '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.channel_name) {
-      Taro.setStorageSync('channel_name', item.channel_name)
+    if (params.c) {
+      Taro.setStorageSync('channel_name', item.c)
     }
-    if (params.source_name) {
-      Taro.setStorageSync('source_name', item.source_name)
+    if (params.s) {
+      Taro.setStorageSync('source_name', item.s)
     }
-
     Taro.setKeepScreenOn({
       keepScreenOn: true
     })
-
-
-
-
   }
 
   componentDidHide () { }

src/common/tool.js

@@ -1,6 +1,8 @@
 import Taro from '@tarojs/taro'
 import * as api from '../service/index'
 const tool = {
+  shareTitle:'一款属于自己的AI绘画小程序，快来创作属于自己的独家作品吧。',
+  shareImg:'https://we-spa.oss-cn-shenzhen.aliyuncs.com/total_picture/1679623995925.png',
   //去登录
   toLogin: function (rescallback = () => { }) {
     Taro.login({
@@ -14,6 +16,10 @@ const tool = {
               key: "session_key",
               data: item.data.session_key
             })
+            Taro.setStorage({
+              key: "user_id",
+              data: item.data.id
+            })
           })
         } else {
         }
@@ -27,7 +33,30 @@ const tool = {
     // 如果随机数不足四位，则在前面补零
     return randomNumber.toString().padStart(4, '0');
   },
-
+  //判断不为安卓
+  notAndroid: function () {
+    let is_ios = false;
+    Taro.getSystemInfo({
+      success: function (res) {
+        if (res.platform != "android") {
+          is_ios = true
+        }
+      }
+    })
+    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 () {
     // 获取当前时间戳
@@ -36,15 +65,15 @@ const tool = {
     const randomNumber = this.generateRandomNumber();
     // 将时间戳和随机数拼接起来，得到用户ID
     const userID = timestamp + randomNumber;
-    console.log(userID,'userID');
+    console.log(userID, 'userID');
     return userID;
   },
-   /**
- * 限制字符串长度
- * value:字符串对象
- * lmit:展示的长度
- */
-   ellipsis: function (value, lmit) {
+  /**
+* 限制字符串长度
+* value:字符串对象
+* lmit:展示的长度
+*/
+  ellipsis: function (value, lmit) {
     if (!value) return ''
     if (value.length > lmit) {
       return value.slice(0, lmit) + '...'

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

@@ -9,6 +9,11 @@
   <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>

src/pages/collection/index.config.js

@@ -1,3 +1,5 @@
 export default definePageConfig({
-  navigationBarTitleText: '首页'
+  navigationBarTitleText: '社区',
+  enableShareAppMessage: true,
+  enableShareTimeline: true ,
 })

src/pages/collection/index.jsx

@@ -1,24 +1,158 @@
 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 = {
+    tableIndex: 0,
+    total: false,
+    page: 1,
+    page_size: 20,
+    cardinalInfos: [],//基数
+    evenInfos: [],//偶数
+    type: 'hot',//hot:热门，time:最新
+  }
 
-  componentWillMount() { }
-
-  componentDidMount() { }
-
-  componentWillUnmount() { }
-
-  componentDidShow() { }
+  componentWillMount () {
+    // this.setInit(1, 'hot')
+  }
+  componentDidShow(){
+    this.setInit(1, 'hot')
+  }
+  setInit (page, type) {
+    this.setState({
+      total: false,//是否加载完
+      page: 1,
+      page_size: 20,
+      cardinalInfos: [],//基数
+      evenInfos: [],//偶数
+    })
+    this.getHubList(page, type)
+  }
+  onShareAppMessage = (res) => {
+    let shareData = {
+      title:tool.shareTitle,
+      path: `/pages/index/index?c=${Taro.getStorageSync('user_id')}&s=rightTap`,
+      imageUrl: tool.shareImg
+    }
+    return shareData;
+  }
 
-  componentDidHide() { }
+  getHubList (page, type) {
+    let params = {
+      page: page,
+      page_size: this.state.page_size,
+      otype: type
+    }
+    Taro.showLoading({
+      title: '加载中',
+    })
+    api.getHubList(params).then(res => {
+      if (res.code == 200) {
+        Taro.hideLoading()
+        let _evenInfos = res.data.filter((item, index) => {
+          return index % 2 == 1
+        })
+        let _cardinalInfos = res.data.filter((item, index) => {
+          return index % 2 == 0
+        })
+        console.log(_cardinalInfos, '_cardinalInfos');
+        let cardinalInfos = this.state.cardinalInfos.concat(_cardinalInfos)
+        let evenInfos = this.state.evenInfos.concat(_evenInfos)
+        this.setState({
+          cardinalInfos: cardinalInfos,//基数
+          evenInfos: evenInfos,//偶数
+          total: res.data.length < 20 ? true : false
+        })
+      }
+    })
+  }
+  onReachBottom () {
+    if (!this.state.total) {
+      this.setState({
+        page: this.state.page + 1
+      })
+      this.getHubList((this.state.page + 1), this.state.type)
+    }
+  }
+  componentDidHide () { }
+  changeTab (index) {
+    let _type = index == 0 ? 'hot' : 'time'
+    this.setState({
+      tableIndex: index,
+      type: _type
+    })
+    this.setInit(1, _type)
+  }
+  detail (item, index) {
+    console.log(item, 'item');
+    Taro.navigateTo({
+      url: `/pages/communityDetail/index?task_id=${item.id}`
+    })
+  }
 
-  render() {
+  render () {
     return (
-     <View>
-      collection
-     </View>
+      <View className='mine'>
+        <View className='table'>
+          <View className='table-info' onClick={e => (this.changeTab(0))} style={this.state.tableIndex == 0 ? 'font-size: 20px;color: #FFFFFF;border-bottom: 4px solid #0F84EC;' : ''}>热门</View>
+          <View className='table-info' onClick={e => (this.changeTab(1))} style={this.state.tableIndex == 1 ? 'font-size: 20px;color: #FFFFFF;border-bottom: 4px solid #0F84EC;' : ''}>最新</View>
+        </View>
+        <View className='image-list'>
+          <View className='list-left'>
+            {
+              this.state.cardinalInfos.map((item, index) => (
+                <View className='image-info' key={index} onClick={e => (this.detail(item, index))}>
+                  <View className='info-top'>
+                    <Image className='info-img' lazyLoad mode='widthFix' src={item.img}></Image>
+                  </View>
+                  <View className='info-bottom'>
+                    <View className='info-name'></View>
+                    <View className='info-tips'>
+                      <View className='info-tips-left'>
+                        <Image className='info-head-img' src={item.user_info.head_img}></Image>
+                        <View className='info-sampling'>{tool.ellipsis(item.user_info.user_name, 8)}</View>
+                      </View>
+                      <View className='info-tips-right'>
+                        <Image className='info-like-img' src={item.has_like == 0 ? 'https://we-spa.oss-cn-shenzhen.aliyuncs.com/total_picture/1679296882735.png' : 'https://we-spa.oss-cn-shenzhen.aliyuncs.com/total_picture/1679296893058.png'}></Image>
+                        <View className='like-num'>{item.like_cnt}</View>
+                      </View>
+                    </View>
+                  </View>
+                </View>
+              ))
+            }
+          </View>
+          <View className='list-right'>
+            {
+              this.state.evenInfos.map((item, index) => (
+                <View className='image-info' key={index} onClick={e => (this.detail(item, index))}>
+                  <View className='info-top'>
+                    <Image className='info-img' lazyLoad mode='widthFix' src={item.img}></Image>
+                  </View>
+                  <View className='info-bottom'>
+                    <View className='info-name'></View>
+                    <View className='info-tips'>
+                      <View className='info-tips-left'>
+                        <Image className='info-head-img' src={item.user_info.head_img}></Image>
+                        <View className='info-sampling'>{tool.ellipsis(item.user_info.user_name, 8)}</View>
+                      </View>
+                      <View className='info-tips-right'>
+                        <Image className='info-like-img' src={item.has_like == 0 ? 'https://we-spa.oss-cn-shenzhen.aliyuncs.com/total_picture/1679296882735.png' : 'https://we-spa.oss-cn-shenzhen.aliyuncs.com/total_picture/1679296893058.png'}></Image>
+                        <View className='like-num'>{item.like_cnt}</View>
+                      </View>
+                    </View>
+                  </View>
+                </View>
+              ))
+            }
+          </View>
+
+        </View>
+      </View>
     )
   }
 }

src/pages/collection/index.less

@@ -1,379 +1,95 @@
-page {
-  background-color: #f2f2f2;
-  height: 100%;
-  padding: 0 auto;
-  margin: 0 auto;
-}
-.login{
-  z-index: 999;
-  position: fixed;
-  top: 300rpx;
-  height: 100rpx;
-  text-align: center;
-  line-height: 100rpx;
-  width: 400rpx;
-  left: 50%;
-  margin-left: -200rpx;
-  background: white;
-}
-.Phone{
-  top: 500rpx;
-  width: 400rpx;
-}
-.login_zz{
-  position: fixed;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
-  z-index: 998;
-  
-background-color: rgba(0,0,0,0.5);
-}
-swiper {
-  height: 180rpx;
-}
- 
-swiper swiper-item .slide-image {
-  width: 100%;
-  height: 180rpx;
-}
- 
-.jia_img {
-  height: 80rpx;
-  width: 90rpx;
-}
- 
-.time {
-  text-align: center;
-  padding: 5rpx 20rpx 5rpx 20rpx;
-  border-radius: 10rpx;
-  display: block;
-  height: 38rpx;
-  line-height: 38rpx;
-  position: relative;
-  margin: 0 auto;
-  margin-bottom: 20rpx;
-  width: 90rpx;
-  color: white;
-  font-size: 26rpx;
-  background-color: #dedede;
-}
- 
-.tab {
-  bottom: 120rpx;
-}
- 
-.tab_1 {
-  position: fixed;
-  bottom: 50rpx;
-  width: 200rpx;
-  font-size: 26rpx;
-  left: 50%;
-  margin-left: -45rpx;
-  height: 100rpx;
-}
- 
-.tab_2 {
-  right: 30rpx;
-  position: fixed;
-}
- 
-/* 聊天 */
- 
-.my_right {
-  float: right;
-  margin-top: 30rpx;
-  position: relative;
-}
- 
-.my_audio {
-  height: 60rpx;
-  width: 60rpx;
-  z-index: 2;
-  position: relative;
-  top: 10rpx;
-  left: 20rpx;
-}
- 
-.you_left {
-  margin-top: 30rpx;
-  float: left;
-  position: relative;
-  padding-left: 5rpx;
-}
- 
-.new_img {
-  width: 85rpx;
-  height: 85rpx;
-  overflow: hidden;
-}
- 
-.page_r {
-  float: right;
-}
- 
-.new_txt {
-  min-width: 380rpx;
-  width: 460rpx;
-  word-break: break-all;
-}
- 
-.new_txt_my {
-  border-radius: 7rpx;
-  background: #9fe75a;
-  position: relative;
-  right: 30rpx;
-  padding: 17rpx 30rpx 17rpx 30rpx;
-  float: right;
-  border: 1px solid #d0d0d0;
-}
- 
-.new_txt_my .arrow {
-  position: absolute;
-  z-index: 2;
-  width: 40rpx;
-  right: -38rpx;
-}
- 
-.new_txt_my .arrow em {
-  position: absolute;
-  border-style: solid;
-  border-width: 15rpx;
-  border-color: transparent transparent transparent #d0d0d0;
-  top: 1rpx;
-}
- 
-.new_txt_my .arrow span {
-  position: absolute;
-  top: 5rpx;
-  border-style: solid;
-  border-width: 15rpx;
-  border-color: transparent transparent transparent #9fe75a;
-}
- 
-.new_txt_my_2 {
-  word-break: break-all;
-  border-radius: 7rpx;
-  background: #9fe75a;
-  min-width: 330rpx;
-  max-width: 530rpx;
-  padding: 17rpx 30rpx 17rpx 30rpx;
-  float: right;
-}
- 
-.new_txt_ai {
-  border-radius: 7rpx;
-  left: 20rpx;
-  background-color: #fff;
-  position: relative;
-  border: 1px solid #d0d0d0;
-  float: left;
-}
- 
-.new_txt_ai .arrow {
-  position: relative;
-  width: 40rpx;
-  left: -30rpx;
-}
- 
-.new_txt_ai .arrow em {
-  position: absolute;
-  border-style: solid;
-  border-width: 15rpx;
-  top: 20rpx;
-  border-color: transparent #d0d0d0 transparent transparent;
-}
- 
-.new_txt_ai .arrow span {
-  position: absolute;
-  top: 20rpx;
-  border-style: solid;
-  border-width: 15rpx;
-  border-color: transparent #fff transparent transparent;
-  left: 2rpx;
-}
- 
-.ai_content {
-  word-break: break-all;
-  padding: 17rpx 30rpx 17rpx 30rpx;
-}
- 
-.sanjiao {
-  top: 25rpx;
-  position: relative;
-  width: 0px;
-  height: 0px;
-  border-width: 15rpx;
-  border-style: solid;
-}
- 
-.my {
-  border-color: transparent transparent transparent #9fe75a;
-}
- 
-.you {
-  border-color: transparent #fff transparent transparent;
-}
- 
-._span {
-  border-color: #fff transparent transparent;
-  top: -17px;
-}
- 
-.is_ai_btn {
-  border-radius: 0 0 7px 7px;
-  border-top: 1px solid #d0d0d0;
-  background: white;
-  position: relative;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  height: 80rpx;
-  line-height: 80rpx;
-  display: flex;
-  flex-direction: row;
-  text-align: center;
-}
- 
-.is_ai_btn view {
-  width: 50%;
-}
- 
-.is_ai_btn image {
-  width: 32rpx;
-  position: relative;
-  top: 4rpx;
-  height: 32rpx;
-}
- 
-.is_ai_btn .two {
-  border-left: 1px solid #d0d0d0;
-}
- 
-.yes_problem_log {
-  border-top: 1px solid #d0d0d0;
-  height: 80rpx;
-  text-align: center;
-  line-height: 80rpx;
-}
- 
-.voice_icon {
-  width: 60rpx;
-  height: 60rpx;
-  margin: 0 auto;
-  padding: 10rpx 10rpx 10rpx 10rpx;
-}
- 
-.add_icon {
-  width: 70rpx;
-  height: 70rpx;
-  margin: 0 auto;
-  padding: 20rpx 10rpx 10rpx 15rpx;
-}
- 
-.voice_ing {
-  width: 90%;
-  height: 75rpx;
-  line-height: 85rpx;
-  text-align: center;
-  border-radius: 15rpx;
-  border: 1px solid #d0d0d0;
-}
- 
-.zezhao {
-  height: 100%;
-  position: absolute;
-  top: 0;
-  left: 0;
-  z-index: 2;
-  width: 100%;
-  background: rgba(0, 0, 0, 0.5);
-}
- 
-.in_voice_icon {
-  z-index: 3;
-  left: 0;
-  bottom: 0;
-  width: 100%;
-  position: absolute;
-  height: 500rpx;
-  background: #f8f8f8;
-}
- 
-.in_voice_icon .item {
-  position: relative;
-  margin-top: 50rpx;
-  margin-left: 50rpx;
-  text-align: center;
-  width: 140rpx;
-}
- 
-.in_voice_icon .img {
-  width: 80rpx;
-  height: 80rpx;
-  border-radius: 15rpx;
-}
- 
-.in_voice_icon .text {
-  font-size: 32rpx;
-  margin-top: 20rpx;
-}
- 
-.sendmessage {
-  width: 100%;
-  z-index: 2;
-  display: flex;
-  position: fixed;
-  bottom: 0px;
-  background-color: #f8f8f8;
-  flex-direction: row;
-  height: 100rpx;
-}
- 
-.sendmessage input {
-  width: 78%;
-  height: 80rpx;
-  line-height: 80rpx;
-  font-size: 28rpx;
-  margin-top: 10rpx;
-  margin-left: 20rpx;
-  border-bottom: 1px solid #d0d0d0;
-  padding-left: 20rpx;
-}
- 
-.sendmessage button {
-  border: 1px solid white;
-  width: 18%;
-  height: 80rpx;
-  background: #0c0;
-  color: white;
-  line-height: 80rpx;
-  margin-top: 10rpx;
-  font-size: 28rpx;
-}
- 
-.hei {
-  height: 20rpx;
-}
- 
-.history {
-  height: 88%;
-  display: flex;
-  font-size: 14px;
-  line-height: 50rpx;
-  position: relative;
-  top: 20rpx;
-}
- 
-.icno_kf {
-  position: fixed;
-  bottom: 160rpx;
-  margin: 0 auto;
-  text-align: center;
-  left: 50%;
-  margin-left: -40rpx;
-  width: 100rpx;
-  height: 100rpx;
-  border-radius: 50%;
+.mine {
+  padding: 48px 32px;
+  min-height: 100vh;
+  background-color: #041129;
+
+  .table {
+    display: flex;
+    .table-info {
+      font-family: PingFangSC-Regular;
+      font-size: 32px;
+      color: rgba(255, 255, 255, .75);
+      letter-spacing: 0;
+      height: 60px;
+      line-height: 60px;
+      padding: 0 10px;
+      margin-right: 20px;
+    }
+  }
+
+  .image-list {
+    margin-top: 50px;
+    display: flex;
+    justify-content: space-between;
+
+    .list-left {
+      width: 330px;
+    }
+
+    .list-right {
+      width: 330px;
+    }
+
+    .image-info {
+      margin-top: 20px;
+      border-radius: 8px;
+      border: 2px solid rgba(15, 132, 236, 1);
+
+      .info-top {
+        width: 100%;
+
+        .info-img {
+          width: 100%;
+          min-height: 360px;
+          display: block;
+        }
+      }
+
+      .info-bottom {
+        padding: 20px 22px;
+
+        .info-name {
+          font-family: PingFangSC-Medium;
+          font-size: 28px;
+          color: #FFFFFF;
+        }
+
+        .info-tips {
+          margin-top: 8px;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          font-family: PingFangSC-Regular;
+          font-size: 20px;
+          color: rgba(255, 255, 255, .75);
+
+          .info-tips-left {
+            display: flex;
+            align-items: center;
+          }
+
+          .info-tips-right {
+            display: flex;
+            align-items: center;
+          }
+
+          .info-head-img {
+            width: 32px;
+            height: 32px;
+          }
+
+          .info-sampling {
+            margin-left: 8px;
+          }
+
+          .info-like-img {
+            margin-left: 10px;
+            width: 28px;
+            height: 24px;
+            margin-right: 10px;
+          }
+        }
+      }
+    }
+  }
 }

src/pages/communityDetail/index.config.js

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

src/pages/communityDetail/index.jsx

@@ -0,0 +1,482 @@
+import { Component } from 'react'
+import { View, Swiper, SwiperItem, Image, Textarea } from '@tarojs/components'
+import Taro, { getCurrentInstance } from '@tarojs/taro'
+import tool from '../../common/tool'
+import TaroCanvasDrawer from '../../component/taro-plugin-canvas';
+import * as api from '../../service/index'
+import './index.less'
+
+export default class Task extends Component {
+  $instance = getCurrentInstance()
+  state = {
+    author: {},
+    img_info: {},
+    task_info: {},
+    model_info: {},
+    style: {},
+    is_like: 0,
+    canvasImage: '',
+    qrCodeImg: '',
+    // 绘图配置文件
+    config: null,
+    // 绘制的图片
+    shareImage: null,
+    // TaroCanvasDrawer 组件状态
+    canvasStatus: false,
+    isFill: false,//是否画海报
+  }
+
+  componentWillMount () {
+    this.getDrawTaskStatus()
+    this.getWxCodeImg()
+  }
+
+  getWxCodeImg () {
+    api.getWxCodeImg({ code_from: 'bill' }).then(res => {
+      this.dataURLtoFile(res.data)
+    })
+  }
+  onShareAppMessage = (res) => {
+    let shareData = {
+      title: tool.shareTitle,
+      path: `/pages/index/index?c=${Taro.getStorageSync('user_id')}&s=rightTap`,
+      imageUrl: tool.shareImg
+    }
+    return shareData;
+  }
+  //base64转本地路径
+  dataURLtoFile (dataurl) {
+    let that = this
+    /// 获取到base64Data
+    var base64Data = dataurl;
+    /// 通过微信小程序自带方法将base64转为二进制去除特殊符号，再转回base64
+    base64Data = wx.arrayBufferToBase64(wx.base64ToArrayBuffer(base64Data));
+    /// 拼接请求头，data格式可以为image/png或者image/jpeg等，看需求
+    const base64ImgUrl = "data:image/png;base64," + base64Data;
+
+    const base64ImgData = base64ImgUrl.replace(/^data:image\/\w+;base64,/, '');
+    const buffer = new ArrayBuffer(base64ImgData.length);
+    const view = new Uint8Array(buffer);
+    for (let i = 0; i < base64ImgData.length; i++) {
+      view[i] = base64ImgData.charCodeAt(i);
+    }
+    const fileStream = wx.base64ToArrayBuffer(base64ImgData);
+    const filePath = wx.env.USER_DATA_PATH + '/test.png';
+    wx.getFileSystemManager().writeFile({
+      filePath: filePath,
+      data: fileStream,
+      encoding: 'binary',
+      success: function (res) {
+        console.log('writeFile success:', res, filePath);
+        that.setState({
+          qrCodeImg: filePath
+        }, () => {
+        })
+      },
+      fail: function (res) {
+        console.log('保存失败')
+      }
+    })
+    /// 刷新数据
+    return base64ImgUrl;
+  }
+  // 调用绘画 => canvasStatus 置为true、同时设置config
+  canvasDrawFunc () {
+    let sizeList = this.state.task_info.img_size.split(":")
+    console.log(sizeList, 375 * sizeList[1] / sizeList[0]);
+    let rssConfig = {
+      width: 345,
+      height: 314 * sizeList[1] / sizeList[0] + 69 + 112,
+      backgroundColor: 'rgba(255,255,255,0.1)',
+      debug: false,
+      pixelRatio: 3,
+      blocks: [
+        {
+          x: 0,
+          y: 0,
+          width: 345,
+          height: 314 * sizeList[1] / sizeList[0] + 69 + 112,
+          paddingLeft: 0,
+          paddingRight: 0,
+          borderWidth: 0,
+          // borderColor: '#ccc',
+          backgroundColor: '#FFFFFF',
+          borderRadius: 0,
+          zIndex: 1,
+        },
+      ],
+
+      images: [
+        {
+          url: 'https://we-spa.oss-cn-shenzhen.aliyuncs.com/total_picture/1679561342726.png',
+          width: 154,
+          height: 21,
+          x: 16,
+          y: 19,
+          borderRadius: 12,
+          zIndex: 8,
+        },
+        {
+          url: 'https://we-spa.oss-cn-shenzhen.aliyuncs.com/total_picture/1679561346368.png',
+          width: 65,
+          height: 4,
+          x: 261,
+          y: 28,
+          borderRadius: 12,
+          zIndex: 8,
+        },
+        {
+          url: this.state.img_info.img,
+          width: 314,
+          height: 314 * sizeList[1] / sizeList[0],
+          x: 16,
+          y: 69,
+          borderRadius: 12,
+          zIndex: 11,
+        },
+        {
+          url: this.state.qrCodeImg,
+          width: 72,
+          height: 72,
+          x: 258,
+          y: 314 * sizeList[1] / sizeList[0] + 69 + 20,
+          borderRadius: 12,
+          zIndex: 12,
+        },
+        {
+          url: 'https://we-spa.oss-cn-shenzhen.aliyuncs.com/total_picture/1679562152791.png',
+          width: 143,
+          height: 38,
+          x: 91,
+          y: 314 * sizeList[1] / sizeList[0] + 69 + 34,
+          borderRadius: 0,
+          zIndex: 12,
+        },
+      ],
+      // texts: [
+      //   {
+      //     x: 170,
+      //     y: 314 * sizeList[1] / sizeList[0] + 69 + 34,
+      //     text: '长按扫码',
+      //     fontSize: 16,
+      //     color: '#333333',
+      //     opacity: 1,
+      //     baseLine: 'middle',
+      //     lineHeight: 22,
+      //     textAlign: 'right',
+      //     zIndex: 10,
+      //   },
+      //   {
+      //     x: 91,
+      //     y: 314 * sizeList[1] / sizeList[0] + 69 + 56,
+      //     text: '体验AI人工智能绘画',
+      //     fontSize: 16,
+      //     color: '#333333',
+      //     opacity: 1,
+      //     baseLine: 'middle',
+      //     lineHeight: 22,
+      //     textAlign: 'right',
+      //     zIndex: 10,
+      //   },
+      // ],
+    }
+    console.log('回执');
+    this.setState({
+      config: rssConfig,
+    }, () => {
+      this.setState({
+        isFill: true
+      })
+    })
+    Taro.showLoading({
+      title: '加载中...'
+    })
+  }
+
+  // 绘制成功回调函数 （必须实现）=> 接收绘制结果、重置 TaroCanvasDrawer 状态
+  onCreateSuccess = (result) => {
+    console.log('成功', result);
+    const { tempFilePath, errMsg } = result;
+    if (errMsg === 'canvasToTempFilePath:ok') {
+      this.setState({
+        shareImage: tempFilePath,
+        // 重置 TaroCanvasDrawer 状态，方便下一次调用
+        isFill: false,
+        config: {}
+      }, () => {
+        Taro.hideLoading();
+        wx.showShareImageMenu({
+          path: tempFilePath
+        })
+        //画图成功之后打开分享
+        // wx.downloadFile({
+        //   url: this.state.shareImage,
+        //   success: (res) => {
+        //     wx.showShareImageMenu({
+        //       path: res.tempFilePath
+        //     })
+        //   }
+        // })
+      })
+    } else {
+      // 重置 TaroCanvasDrawer 状态，方便下一次调用
+      this.setState({
+        isFill: false,
+        config: {}
+      })
+      Taro.showToast({ icon: 'none', title: errMsg || '出现错误' });
+      console.log(errMsg);
+    }
+    // 预览
+    // Taro.previewImage({
+    //   current: tempFilePath,
+    //   urls: [tempFilePath]
+    // })
+  }
+
+  // 绘制失败回调函数 （必须实现）=> 接收绘制错误信息、重置 TaroCanvasDrawer 状态
+  onCreateFail = (error) => {
+    console.log('失败');
+    Taro.hideLoading();
+    // 重置 TaroCanvasDrawer 状态，方便下一次调用
+    this.setState({
+      isFill: false,
+      config: {}
+    })
+    console.log(error);
+  }
+
+  // 保存图片至本地
+  saveToAlbum = () => {
+    const res = Taro.saveImageToPhotosAlbum({
+      filePath: this.state.shareImage,
+    });
+    if (res.errMsg === 'saveImageToPhotosAlbum:ok') {
+      Taro.showToast({
+        title: '保存图片成功',
+        icon: 'success',
+        duration: 2000,
+      });
+    }
+  }
+  openFill () {
+    this.canvasDrawFunc()
+  }
+  getDrawTaskStatus () {
+    let routers = this.$instance.router.params
+    api.getImgDetail({ img_id: routers.task_id }).then(res => {
+      //定时器不要轻易改，避免造成服务器攻击
+      if (res.code == 200) {
+        this.setState({
+          author: res.data.author,
+          img_info: res.data.img_info,
+          task_info: res.data.task_info,
+          model_info: res.data.model_info,
+          style: res.data.style,
+          is_like: res.data.is_like
+        })
+      }
+    })
+  }
+  download () {
+    this.downImg()
+  }
+  // 鉴权操作 判断是否有保存到相册的权限
+  // 有就直接下载 没有就弹窗提示给权限
+  downImg () {
+    Taro.getSetting({
+      success: res => {
+        if (!res.authSetting['scope.writePhotosAlbum']) {
+          Taro.authorize({
+            scope: 'scope.writePhotosAlbum',
+            success: () => {
+              this.doSaveImg()
+            },
+            fail: () => {
+              this.openConfirm()
+            }
+          })
+        } else {
+          this.doSaveImg()
+        }
+      }
+    })
+  }
+  // 生成临时路径 保存图片到手机
+  doSaveImg () {
+    Taro.downloadFile({
+      url: this.state.img_info.img,
+      success: res => {
+        Taro.saveImageToPhotosAlbum({
+          filePath: res.tempFilePath,
+          success: () => {
+            Taro.showToast({ title: '已保存到相册', icon: 'success' })
+          },
+          fail: () => {
+            Taro.showToast({ title: '保存失败', icon: 'none' })
+          }
+        })
+      }
+    })
+  }
+  // 权限弹窗
+  openConfirm () {
+    Taro.showModal({
+      content: '检测到您没有打开小程序相册权限，是否取设置打开？',
+      showCancel: true,
+      success: res => {
+        if (res.confirm) {
+          // 打开权限
+          Taro.openSetting({
+            success: res => {
+              this.doSaveImg()
+            }
+          })
+        }
+      }
+    })
+  }
+
+  copyPrompt () {
+    Taro.setClipboardData({
+      data: this.state.task_info.prompt,
+      success: function (res) {
+      }
+    })
+  }
+
+  copyNegativePrompt () {
+    Taro.setClipboardData({
+      data: this.state.task_info.negative_prompt,
+      success: function (res) {
+      }
+    })
+  }
+
+  componentDidMount () { }
+  //页面销毁之前调用
+  componentWillUnmount () {
+  }
+  changeLike () {
+    let img_info = this.state.img_info
+    img_info.like_cnt = this.state.is_like == 0 ? this.state.img_info.like_cnt + 1 : this.state.img_info.like_cnt - 1
+    this.setState({
+      is_like: this.state.is_like == 0 ? 1 : 0,
+      img_info: img_info
+    })
+    api.userLike({ img_id: this.state.img_info.id }).then(res => {
+
+    })
+  }
+  previewImage () {
+    Taro.previewImage({
+      current: this.state.img_info.img, // 当前显示图片的http链接  
+      urls: [`${this.state.img_info.img}`] // 需要预览的图片http链接列表  
+    })
+  }
+
+
+  render () {
+    return (
+      <View className='mine'>
+        <View className='banner-info'>
+          <Image className='banner-image' mode='aspectFit' onClick={e => (this.previewImage())} src={this.state.img_info.img}></Image>
+        </View>
+        <View className='content'>
+          <View className='draw-title'>画家信息</View>
+          <View className='user-text'>
+            <View className='user-left'>
+              <Image className='user-img' src={this.state.author.head_img}></Image>
+              <View className='user-name'>{this.state.author.user_name}</View>
+            </View>
+            <View className='like' onClick={e => { this.changeLike() }}>
+              <Image className='like-img' src={this.state.is_like == 0 ? 'https://we-spa.oss-cn-shenzhen.aliyuncs.com/total_picture/1679296882735.png' : 'https://we-spa.oss-cn-shenzhen.aliyuncs.com/total_picture/1679296893058.png'}></Image>
+              <View className='like-num'>{this.state.img_info.like_cnt}</View>
+            </View>
+          </View>
+          <View className='draw-title'>绘画描述</View>
+          <View className='draw-text'>
+            <Textarea
+              value={this.state.task_info.prompt}
+              className='draw-taxtarea'
+              placeholder='| 请输入相关描述，也可以输入关键词～'
+              showCount
+              disabled
+              maxlength='1000'
+            />
+            <View className='copy'>
+              <View className='copy-button' onClick={e => (this.copyPrompt())}>
+                <Image className='copy-icon' src='https://we-spa.oss-cn-shenzhen.aliyuncs.com/total_picture/1679017836200.png'></Image>
+                <View>复制</View>
+              </View>
+            </View>
+
+          </View>
+          <View className='draw-content'>
+            <View className='draw-info'>
+              <View className='info-title'>模型</View>
+              <View className='info-text'>{this.state.model_info.name} </View>
+            </View>
+            <View className='draw-info'>
+              <View className='info-title'>风格</View>
+              <View className='info-text'>{this.state.style.name} </View>
+            </View>
+            <View className='draw-info'>
+              <View className='info-title'>图片尺寸</View>
+              <View className='info-text'>{this.state.task_info.img_size} </View>
+            </View>
+            {/* <View className='draw-info'>
+              <View className='info-title'>图片质量</View>
+              <View className='info-text'>{} </View>
+            </View> */}
+          </View>
+          <View className='draw-title'>绘画不要的元素</View>
+          <View className='draw-text'>
+            <Textarea
+              value={this.state.task_info.negative_prompt}
+              className='draw-taxtarea'
+              placeholder='| 请输入相关描述，也可以输入关键词～'
+              showCount
+              maxlength='1000'
+              disabled
+            />
+            <View className='copy'>
+              <View className='copy-button' onClick={e => (this.copyNegativePrompt())}>
+                <Image className='copy-icon' src='https://we-spa.oss-cn-shenzhen.aliyuncs.com/total_picture/1679017836200.png'></Image>
+                <View>复制</View>
+              </View>
+            </View>
+          </View>
+        </View>
+        <View className='func'>
+          <View className='func-list'>
+            {/* <View className='func-info'>
+              <Image className='func-image' src='https://we-spa.oss-cn-shenzhen.aliyuncs.com/total_picture/1678952380367.png'></Image>
+              <View>发布</View>
+            </View> */}
+            {
+              this.state.qrCodeImg.length > 0 &&
+              <View className='func-info' onClick={e => (this.openFill())}>
+                <Image className='func-image' src='https://we-spa.oss-cn-shenzhen.aliyuncs.com/total_picture/1678952396973.png'></Image>
+                <View>分享</View>
+              </View>
+            }
+            <View className='func-info' onClick={e => (this.download())}>
+              <Image className='func-image' src='https://we-spa.oss-cn-shenzhen.aliyuncs.com/total_picture/1678952411029.png'></Image>
+              <View>下载</View>
+            </View>
+          </View>
+        </View>
+        {
+          this.state.isFill &&
+          <TaroCanvasDrawer
+            config={this.state.config} // 绘制配置
+            onCreateSuccess={e => (this.onCreateSuccess(e))} // 绘制成功回调
+            onCreateFail={e => (this.onCreateFail(e))} // 绘制失败回调
+          />
+        }
+      </View>
+
+    )
+  }
+}

src/pages/communityDetail/index.less

@@ -0,0 +1,153 @@
+.mine {
+  min-height: 100vh;
+  background-color: #041129;
+  padding-bottom: 120px;
+
+
+  .banner-info {
+    width: 100%;
+    height: 750px;
+
+    .banner-image {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  .content {
+    padding: 0 30px;
+
+    .user-text {
+      display: flex;
+      justify-content: space-between;
+      font-family: PingFangSC-Regular;
+      font-size: 28px;
+      color: rgba(255, 255, 255, .75);
+      font-family: PingFangSC-Regular;
+      font-size: 28px;
+      color: rgba(255,255,255,.75);
+
+      .user-left {
+        display: flex;
+        align-items: center;
+        .user-img {
+          width: 56px;
+          height: 56px;
+          display: block;
+          margin-right: 20px;
+        }
+
+      }
+
+      .like {
+        display: flex;
+        align-items: center;
+        .like-img {
+          width: 36px;
+          height: 36px;
+          margin-right: 6px;
+        }
+      }
+    }
+
+    .draw-title {
+      margin-top: 48px;
+      font-family: PingFangSC-Regular;
+      font-size: 32px;
+      color: #FFFFFF;
+    }
+
+    .draw-text {
+      margin-top: 20px;
+
+      .draw-taxtarea {
+        width: 642px;
+        background-color: rgba(255, 255, 255, .05);
+        color: rgba(255, 255, 255, .5);
+        min-height: 240px;
+        padding: 24px;
+      }
+
+      .copy {
+        margin-top: 20px;
+        display: flex;
+        justify-content: flex-end;
+
+        .copy-button {
+          display: flex;
+          align-items: center;
+          border: 2px solid #0F84EC;
+          color: #0F84EC;
+          font-size: 24px;
+          padding: 5px 20px;
+          border-radius: 30px;
+
+          .copy-icon {
+            width: 24px;
+            height: 24px;
+            margin-right: 10px;
+          }
+        }
+      }
+    }
+
+    .draw-content {
+      margin-top: 48px;
+
+      .draw-info {
+        margin-top: 1px;
+        background: #0F1A2F;
+
+        padding: 0 30px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        height: 112px;
+        font-family: PingFangSC-Regular;
+        font-size: 32px;
+        color: rgba(255, 255, 255, .75);
+      }
+
+      .draw-info:first-child {
+        border-radius: 16px 16px 0 0;
+      }
+
+      .draw-info:last-child {
+        border-radius: 0 0 16px 16px;
+      }
+    }
+
+  }
+
+  .func {
+    width: 100%;
+    margin-top: 76px;
+
+    .func-list {
+      padding: 0 30px;
+      display: flex;
+      justify-content: space-evenly;
+    }
+
+    .func-info {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      width: 218px;
+      height: 80px;
+      border-radius: 8px;
+      border: 2px solid rgba(16, 133, 237, 1);
+      font-family: PingFangSC-Regular;
+      font-size: 32px;
+      color: #38ADF4;
+      letter-spacing: 0;
+      text-align: center;
+
+      .func-image {
+        margin-right: 22px;
+        width: 48px;
+        height: 48px;
+      }
+    }
+  }
+}

src/pages/darwDetail/index.config.js

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

src/pages/darwDetail/index.jsx

@@ -1,6 +1,8 @@
 import { Component } from 'react'
-import { View, Swiper, SwiperItem, Image, Textarea } from '@tarojs/components'
-import Taro, { getCurrentInstance } from '@tarojs/taro'
+import { View, Swiper, SwiperItem, Image, Textarea, Canvas, Button } from '@tarojs/components'
+import Taro, { getCurrentInstance, CanvasContext } from '@tarojs/taro'
+import tool from '../../common/tool'
+import TaroCanvasDrawer from '../../component/taro-plugin-canvas';
 import * as api from '../../service/index'
 import './index.less'
 
@@ -12,12 +14,79 @@ export default class Task extends Component {
     draw_infos: [],
     que_cnt: 0,
     default_img: '',
-    interval: null
+    interval: null,
+    current: 0,
+    model_info: {},
+    style_info: {},
+    canvasImage: '',
+    qrCodeImg: '',
+    // 绘图配置文件
+    config: null,
+    // 绘制的图片
+    shareImage: null,
+    // TaroCanvasDrawer 组件状态
+    canvasStatus: false,
+    isFill: false,//是否画海报
+  }
+
+  componentDidMount () {
 
   }
 
   componentWillMount () {
+    this.getWxCodeImg()
     this.getDrawTaskStatus()
+    // this.getWxCodeImg ()
+  }
+  getWxCodeImg () {
+    api.getWxCodeImg({ code_from: 'bill' }).then(res => {
+      this.dataURLtoFile(res.data)
+    })
+  }
+  onShareAppMessage = (res) => {
+    let shareData = {
+      title: tool.shareTitle,
+      path: `/pages/index/index?c=${Taro.getStorageSync('user_id')}&s=rightTap`,
+      imageUrl: tool.shareImg
+    }
+    return shareData;
+  }
+
+  //base64转本地路径
+  dataURLtoFile (dataurl) {
+    let that = this
+    /// 获取到base64Data
+    var base64Data = dataurl;
+    /// 通过微信小程序自带方法将base64转为二进制去除特殊符号，再转回base64
+    base64Data = wx.arrayBufferToBase64(wx.base64ToArrayBuffer(base64Data));
+    /// 拼接请求头，data格式可以为image/png或者image/jpeg等，看需求
+    const base64ImgUrl = "data:image/png;base64," + base64Data;
+
+    const base64ImgData = base64ImgUrl.replace(/^data:image\/\w+;base64,/, '');
+    const buffer = new ArrayBuffer(base64ImgData.length);
+    const view = new Uint8Array(buffer);
+    for (let i = 0; i < base64ImgData.length; i++) {
+      view[i] = base64ImgData.charCodeAt(i);
+    }
+    const fileStream = wx.base64ToArrayBuffer(base64ImgData);
+    const filePath = wx.env.USER_DATA_PATH + '/test.png';
+    wx.getFileSystemManager().writeFile({
+      filePath: filePath,
+      data: fileStream,
+      encoding: 'binary',
+      success: function (res) {
+        console.log('writeFile success:', res, filePath);
+        that.setState({
+          qrCodeImg: filePath
+        }, () => {
+        })
+      },
+      fail: function (res) {
+        console.log('保存失败')
+      }
+    })
+    /// 刷新数据
+    return base64ImgUrl;
   }
   getDrawTaskStatus () {
     let routers = this.$instance.router.params
@@ -43,11 +112,22 @@ export default class Task extends Component {
         } else {
           clearInterval(this.state.interval)
         }
+        let _current = 0
+        if (res.data.draw_infos.length > 1 && routers.img_id) {
+          res.data.draw_infos.forEach((item, index) => {
+            if (routers.img_id == item.id) {
+              _current = index
+            }
+          })
+        }
         this.setState({
           draw_status: res.data.draw_status,
           draw_data: res.data.draw_data,
           que_cnt: res.data.que_cnt,
-          draw_infos: draw_infos
+          draw_infos: draw_infos,
+          current: _current,
+          model_info: res.data.model_info,
+          style_info: res.data.style_info
         })
       }
     })
@@ -122,6 +202,21 @@ export default class Task extends Component {
     })
   }
 
+  copyPrompt () {
+    Taro.setClipboardData({
+      data: this.state.draw_data.prompt,
+      success: function (res) {
+      }
+    })
+  }
+
+  copyNegativePrompt () {
+    Taro.setClipboardData({
+      data: this.state.draw_data.negative_prompt,
+      success: function (res) {
+      }
+    })
+  }
 
   componentDidMount () { }
   //页面销毁之前调用
@@ -129,6 +224,202 @@ export default class Task extends Component {
     //避免服务器攻击
     clearInterval(this.state.interval)
   }
+  previewImage (item, index) {
+    Taro.previewImage({
+      current: item.img, // 当前显示图片的http链接  
+      urls: [`${item.img}`] // 需要预览的图片http链接列表  
+    })
+  }
+  // 调用绘画 => canvasStatus 置为true、同时设置config
+  canvasDrawFunc () {
+    let sizeList = this.state.draw_data.img_size.split(":")
+    console.log(sizeList, 375 * sizeList[1] / sizeList[0]);
+    let rssConfig = {
+      width: 345,
+      height: 314 * sizeList[1] / sizeList[0] + 69 + 112,
+      backgroundColor: 'rgba(255,255,255,0.1)',
+      debug: false,
+      pixelRatio: 3,
+      blocks: [
+        {
+          x: 0,
+          y: 0,
+          width: 345,
+          height: 314 * sizeList[1] / sizeList[0] + 69 + 112,
+          paddingLeft: 0,
+          paddingRight: 0,
+          borderWidth: 0,
+          // borderColor: '#ccc',
+          backgroundColor: '#FFFFFF',
+          borderRadius: 0,
+          zIndex: 1,
+        },
+      ],
+
+      images: [
+        {
+          url: 'https://we-spa.oss-cn-shenzhen.aliyuncs.com/total_picture/1679561342726.png',
+          width: 154,
+          height: 21,
+          x: 16,
+          y: 19,
+          borderRadius: 12,
+          zIndex: 8,
+        },
+        {
+          url: 'https://we-spa.oss-cn-shenzhen.aliyuncs.com/total_picture/1679561346368.png',
+          width: 65,
+          height: 4,
+          x: 261,
+          y: 28,
+          borderRadius: 12,
+          zIndex: 8,
+        },
+        {
+          url: this.state.draw_infos[this.state.current].img,
+          width: 314,
+          height: 314 * sizeList[1] / sizeList[0],
+          x: 16,
+          y: 69,
+          borderRadius: 12,
+          zIndex: 11,
+        },
+        {
+          url: this.state.qrCodeImg,
+          width: 72,
+          height: 72,
+          x: 258,
+          y: 314 * sizeList[1] / sizeList[0] + 69 + 20,
+          borderRadius: 12,
+          zIndex: 12,
+        },
+        {
+          url: 'https://we-spa.oss-cn-shenzhen.aliyuncs.com/total_picture/1679562152791.png',
+          width: 143,
+          height: 38,
+          x: 91,
+          y: 314 * sizeList[1] / sizeList[0] + 69 + 34,
+          borderRadius: 0,
+          zIndex: 12,
+        },
+      ],
+      // texts: [
+      //   {
+      //     x: 170,
+      //     y: 314 * sizeList[1] / sizeList[0] + 69 + 34,
+      //     text: '长按扫码',
+      //     fontSize: 16,
+      //     color: '#333333',
+      //     opacity: 1,
+      //     baseLine: 'middle',
+      //     lineHeight: 22,
+      //     textAlign: 'right',
+      //     zIndex: 10,
+      //   },
+      //   {
+      //     x: 91,
+      //     y: 314 * sizeList[1] / sizeList[0] + 69 + 56,
+      //     text: '体验AI人工智能绘画',
+      //     fontSize: 16,
+      //     color: '#333333',
+      //     opacity: 1,
+      //     baseLine: 'middle',
+      //     lineHeight: 22,
+      //     textAlign: 'right',
+      //     zIndex: 10,
+      //   },
+      // ],
+    }
+    console.log('回执');
+    this.setState({
+      config: rssConfig,
+    }, () => {
+      this.setState({
+        isFill: true
+      })
+    })
+    Taro.showLoading({
+      title: '加载中...'
+    })
+  }
+
+  // 绘制成功回调函数 （必须实现）=> 接收绘制结果、重置 TaroCanvasDrawer 状态
+  onCreateSuccess = (result) => {
+    console.log('成功', result);
+    const { tempFilePath, errMsg } = result;
+    Taro.hideLoading();
+
+    if (errMsg === 'canvasToTempFilePath:ok') {
+      this.setState({
+        shareImage: tempFilePath,
+        // 重置 TaroCanvasDrawer 状态，方便下一次调用
+        isFill: false,
+        config: {}
+      }, () => {
+        wx.showShareImageMenu({
+          path: tempFilePath
+        })
+      })
+       //画图成功之后打开分享
+      //  wx.downloadFile({
+      //   url: tempFilePath,
+      //   success: (res) => {
+      //     console.log('打开分享');
+      //     wx.showShareImageMenu({
+      //       path: res.tempFilePath
+      //     })
+      //   }
+      // })
+    } else {
+      // 重置 TaroCanvasDrawer 状态，方便下一次调用
+      this.setState({
+        isFill: false,
+        config: {}
+      })
+      Taro.showToast({ icon: 'none', title: errMsg || '出现错误' });
+      console.log(errMsg);
+    }
+    // 预览
+    // Taro.previewImage({
+    //   current: tempFilePath,
+    //   urls: [tempFilePath]
+    // })
+  }
+
+  // 绘制失败回调函数 （必须实现）=> 接收绘制错误信息、重置 TaroCanvasDrawer 状态
+  onCreateFail = (error) => {
+    console.log('失败');
+    Taro.hideLoading();
+    // 重置 TaroCanvasDrawer 状态，方便下一次调用
+    this.setState({
+      isFill: false,
+      config: {}
+    })
+    console.log(error);
+  }
+
+  // 保存图片至本地
+  saveToAlbum = () => {
+    const res = Taro.saveImageToPhotosAlbum({
+      filePath: this.state.shareImage,
+    });
+    if (res.errMsg === 'saveImageToPhotosAlbum:ok') {
+      Taro.showToast({
+        title: '保存图片成功',
+        icon: 'success',
+        duration: 2000,
+      });
+    }
+  }
+  openFill () {
+    this.canvasDrawFunc()
+  }
+  changeCurrent(e){
+    this.setState({
+      current:e.detail.current
+    })
+    console.log(e,'eeee');
+  }
 
 
   render () {
@@ -139,14 +430,16 @@ export default class Task extends Component {
           indicatorColor='#121D34'
           indicatorActiveColor='#0F84EC'
           circular
+          current={this.state.current}
           adjustHeight='first'
+          onChange={e=>(this.changeCurrent(e))}
           indicatorDots
-          autoplay>
+          >
           {
             this.state.draw_infos.map((item, index) => (
               <SwiperItem key={index}>
                 <View className='banner-info'>
-                  <Image className='banner-image' mode='aspectFit' src={item.img}></Image>
+                  <Image className='banner-image' mode='aspectFit' src={item.img} onClick={e => (this.previewImage(item, index))}></Image>
                 </View>
               </SwiperItem>
             ))
@@ -154,15 +447,9 @@ export default class Task extends Component {
           {
             this.state.draw_status != 2 &&
             <View className='banner-tips'>
-              预计等待{this.state.que_cnt + 1}分钟...
+              预计等待{Math.floor((this.state.que_cnt - 1)*0.2+1)}分钟...
             </View>
           }
-          {/* <SwiperItem>
-            <View className='demo-text-2'><Image ></Image></View>
-          </SwiperItem>
-          <SwiperItem>
-            <View className='demo-text-3'><Image ></Image></View>
-          </SwiperItem> */}
         </Swiper>
         <View className='content'>
           <View className='draw-title'>绘画描述</View>
@@ -171,19 +458,26 @@ export default class Task extends Component {
               value={this.state.draw_data.prompt}
               className='draw-taxtarea'
               placeholder='| 请输入相关描述，也可以输入关键词～'
+              maxlength='1000'
               showCount
               disabled
             />
-            
+            <View className='copy'>
+              <View className='copy-button' onClick={e => (this.copyPrompt())}>
+                <Image className='copy-icon' src='https://we-spa.oss-cn-shenzhen.aliyuncs.com/total_picture/1679017836200.png'></Image>
+                <View>复制</View>
+              </View>
+            </View>
+
           </View>
           <View className='draw-content'>
             <View className='draw-info'>
               <View className='info-title'>模型</View>
-              <View className='info-text'>{this.state.draw_data.model_name} </View>
+              <View className='info-text'>{this.state.model_info.name} </View>
             </View>
             <View className='draw-info'>
               <View className='info-title'>风格</View>
-              <View className='info-text'>{ } </View>
+              <View className='info-text'>{this.state.style_info.name} </View>
             </View>
             <View className='draw-info'>
               <View className='info-title'>图片尺寸</View>
@@ -202,25 +496,46 @@ export default class Task extends Component {
               placeholder='| 请输入相关描述，也可以输入关键词～'
               showCount
               disabled
+              maxlength='1000'
             />
+            <View className='copy'>
+              <View className='copy-button' onClick={e => (this.copyNegativePrompt())}>
+                <Image className='copy-icon' src='https://we-spa.oss-cn-shenzhen.aliyuncs.com/total_picture/1679017836200.png'></Image>
+                <View>复制</View>
+              </View>
+            </View>
           </View>
         </View>
-        <View className='func'>
-          <View className='func-list'>
-            {/* <View className='func-info'>
+        {
+          this.state.draw_status == 2 &&
+          <View className='func'>
+            <View className='func-list'>
+              {/* <View className='func-info'>
               <Image className='func-image' src='https://we-spa.oss-cn-shenzhen.aliyuncs.com/total_picture/1678952380367.png'></Image>
               <View>发布</View>
             </View> */}
-            <View className='func-info'>
-              <Image className='func-image' src='https://we-spa.oss-cn-shenzhen.aliyuncs.com/total_picture/1678952396973.png'></Image>
-              <View>分享</View>
-            </View>
-            <View className='func-info' onClick={e => (this.download())}>
-              <Image className='func-image' src='https://we-spa.oss-cn-shenzhen.aliyuncs.com/total_picture/1678952411029.png'></Image>
-              <View>下载</View>
+              {
+                this.state.qrCodeImg.length > 0 &&
+                <View className='func-info' onClick={e => (this.openFill())}>
+                  <Image className='func-image' src='https://we-spa.oss-cn-shenzhen.aliyuncs.com/total_picture/1678952396973.png'></Image>
+                  <View>分享</View>
+                </View>
+              }
+              <View className='func-info' onClick={e => (this.download())}>
+                <Image className='func-image' src='https://we-spa.oss-cn-shenzhen.aliyuncs.com/total_picture/1678952411029.png'></Image>
+                <View>下载</View>
+              </View>
             </View>
           </View>
-        </View>
+        }
+        {
+          this.state.isFill &&
+          <TaroCanvasDrawer
+            config={this.state.config} // 绘制配置
+            onCreateSuccess={e => (this.onCreateSuccess(e))} // 绘制成功回调
+            onCreateFail={e => (this.onCreateFail(e))} // 绘制失败回调
+          />
+        }
       </View>
     )
   }

src/pages/darwDetail/index.less

@@ -23,7 +23,7 @@
 
       .banner-image {
         width: 100%;
-        height: 100%;
+        min-height: 800px;
       }
     }
   }
@@ -48,6 +48,28 @@
         min-height: 240px;
         padding: 24px;
       }
+
+      .copy {
+        margin-top: 20px;
+        display: flex;
+        justify-content: flex-end;
+
+        .copy-button {
+          display: flex;
+          align-items: center;
+          border: 2px solid #0F84EC;
+          color: #0F84EC;
+          font-size: 24px;
+          padding: 5px 20px;
+          border-radius: 30px;
+
+          .copy-icon {
+            width: 24px;
+            height: 24px;
+            margin-right: 10px;
+          }
+        }
+      }
     }
 
     .draw-content {
@@ -109,4 +131,75 @@
       }
     }
   }
+
+  .poster {
+    position: relative;
+    width: 750rpx;
+    height: 1200rpx;
+  }
+
+  .poster-image {
+    width: 750rpx;
+    height: 1200rpx;
+  }
+
+  .poster-qrcode {
+    position: absolute;
+    right: 60rpx;
+    bottom: 80rpx;
+    width: 180rpx;
+    height: 180rpx;
+  }
+}
+
+.bill {
+  position: relative;
+  width: 100vw;
+  height: 100vh;
+  z-index: 10000;
+  position: fixed;
+  background-color: rgba(2, 2, 2, .7);
+  left: 0;
+  top: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  .shareImage-cont {
+    width: 80%;
+
+    .shareImage {
+      width: 100%;
+      display: block;
+    }
+
+    .func-list {
+      margin-top: 20px;
+      padding: 0 30px;
+      display: flex;
+      justify-content: space-evenly;
+    }
+
+    .func-info {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      width: 218px;
+      height: 80px;
+      border-radius: 8px;
+      border: 2px solid rgba(16, 133, 237, 1);
+      font-family: PingFangSC-Regular;
+      font-size: 32px;
+      color: #38ADF4;
+      letter-spacing: 0;
+      text-align: center;
+
+      .func-image {
+        margin-right: 22px;
+        width: 48px;
+        height: 48px;
+      }
+    }
+  }
+
 }

src/pages/earnPoints/index.config.js

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

src/pages/earnPoints/index.jsx

@@ -0,0 +1,238 @@
+import { Component } from 'react'
+import { View, Swiper, SwiperItem, Image, Textarea, Text, ScrollView, RichText } from '@tarojs/components'
+import Taro, { getCurrentInstance } from '@tarojs/taro'
+import tool from '../../common/tool'
+import * as api from '../../service/index'
+import './index.less'
+
+export default class Task extends Component {
+  $instance = getCurrentInstance()
+  state = {
+    userInfo: {},
+    taskList: [],
+    vip_list: [],//会员列表
+    shop_list: [],//充值列表
+    ext_info: {},//注意事项
+    isIos: false,
+  }
+
+  componentWillMount () {
+    if (tool.notAndroid()) {
+      this.setState({
+        isIos: true
+      })
+    }
+    this.getCoinTaskList()
+    this.getShopList()
+    this.getUserInfo()
+  }
+  onShareAppMessage = (res) => {
+    let shareData = {
+      title: tool.shareTitle,
+      path: `/pages/index/index?c=${Taro.getStorageSync('user_id')}&s=rightTap`,
+      imageUrl: tool.shareImg
+    }
+    return shareData;
+  }
+  //获取任务列表
+  getCoinTaskList () {
+    api.getCoinTaskList().then(res => {
+      this.setState({
+        taskList: res.data
+      })
+    })
+  }
+  getUserInfo () {
+    api.getUserInfo().then(res => {
+      if (res.code == 200) {
+        this.setState({
+          userInfo: res.data
+        })
+      }
+    })
+  }
+  getShopList () {
+    api.getShopList().then(res => {
+      if (res.code == 200) {
+        this.setState({
+          vip_list: res.data.vip_list,
+          shop_list: res.data.shop_list,
+          ext_info: res.data.ext_info,
+        })
+      }
+    })
+  }
+  finishTask (item, index) {
+    api.finishTask({ task_id: item.id }).then(res => {
+      if (res.code == 200) {
+        this.getUserInfo()
+        this.getCoinTaskList()
+      }
+    })
+  }
+  //充值
+  toOrder (item, index) {
+    let that = this
+    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) {
+                }
+              }
+            })
+          }
+        })
+      }
+    })
+
+  }
+  //会员充值
+  memberToOrder (item, index) {
+    if (item.has_buy == 1) return
+    let that = this
+    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(() => {
+                  this.getCoinTaskList()
+                  this.getShopList()
+                  this.getUserInfo()
+                }, 2000);
+              },
+              fail: function (err) {
+                try {
+                  const res = Taro.getSystemInfoSync()
+                  console.log(res, 'iphone=====');
+                } catch (e) {
+                }
+              }
+            })
+          }
+        })
+      }
+    })
+
+  }
+  componentDidMount () { }
+  //页面销毁之前调用
+  componentWillUnmount () {
+    //避免服务器攻击
+  }
+
+
+  render () {
+    return (
+      <View className='mine'>
+        <View className='banner'>
+          <View className='banner-left'>
+            <View className='banner-title'>剩余积分：</View>
+            <View className='banner-num'>{this.state.userInfo.total_coin}</View>
+          </View>
+          <View className='banner-right'>
+            <Image className='banner-img' src='https://we-spa.oss-cn-shenzhen.aliyuncs.com/total_picture/1679465544881.png'></Image>
+          </View>
+        </View>
+        <View className='content'>
+          {
+            this.state.taskList.map((item, index) => (
+              <View className='register' key={index}>
+                <View className='register-left'>
+                  <View className='register-title'><Image className='register-icon' src={item.img} ></Image> {item.title}</View>
+                  <View className='register-tips'>{item.sub_title}</View>
+                </View>
+                <View className='register-right' style={item.status == 0 ? '' : 'background-image: linear-gradient(-45deg, #0c1419 0%, #3b3d3e 100%);opacity: 0.5;'} onClick={e => (this.finishTask(item, index))}>{item.btn_title}</View>
+              </View>
+            ))
+          }
+          {
+            !this.state.isIos &&
+            < View >
+              <View className='contact-title'>
+                点券充值
+              </View>
+              <ScrollView
+                className='recharge'
+                scrollX
+              >
+                {
+                  this.state.shop_list.map((item, index) => (
+                    <View className='recharge-info' key={index}>
+                      <View className='recharge-icon'><Image className='recharge-img' src='https://we-spa.oss-cn-shenzhen.aliyuncs.com/total_picture/1679457146188.png'> </Image></View>
+                      <View className='recharge-tips'>{item.sub_title}</View>
+                      <View className='recharge-title'>{item.title}</View>
+                      <View className='recharge-tag'>{item.tag}</View>
+                      <View className='recharge-button' onClick={e => (this.toOrder(item, index))}>充值</View>
+                    </View>
+                  ))
+                }
+              </ScrollView>
+              <View className='contact-title'>
+                会员充值
+              </View>
+              <View className='member-list'>
+                {
+                  this.state.vip_list.map((item, index) => (
+                    <View className='member-info' key={index}>
+                      <View className='member-top'>
+                        <RichText className='member-title' nodes={item.title}></RichText>
+                        <View className='member-tag'>{item.tag}</View>
+                      </View>
+                      <View className='member-bottom'>
+                        <View className='member-bottom-left'>
+                          <RichText nodes={item.sub_title}></RichText>
+                        </View>
+                        <View className='member-button' style={item.has_buy == 1 ? 'background-image: linear-gradient(-45deg, #0c1419 0%, #3b3d3e 100%);opacity: 0.5;' : ''} onClick={e => (this.memberToOrder(item, index))}>{item.has_buy == 1 ? '已开通' : '开通'}</View>
+                      </View>
+                    </View>
+                  ))
+                }
+              </View>
+            </View>
+          }
+          {
+            this.state.isIos &&
+            <View className='ios-tips'>
+              ios暂不支持充值
+            </View>
+          }
+        </View>
+      </View >
+    )
+  }
+}

src/pages/earnPoints/index.less

@@ -0,0 +1,249 @@
+.mine {
+  min-height: 100vh;
+  background-color: #041129;
+  padding-bottom: 120px;
+
+  .banner {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    .banner-left {
+      margin-left: 60px;
+      .banner-title {
+        font-family: PingFangSC-Regular;
+        font-size: 28px;
+        color: rgba(255, 255, 255, .75);
+      }
+
+      .banner-num {
+        font-family: DINPro-Medium;
+        font-size: 64px;
+        color: #0F84EC;
+      }
+    }
+    .banner-right{
+      .banner-img{
+        width: 350px;
+        height: 270px;
+      }
+    }
+  }
+
+  .content {
+    position: relative;
+    z-index: 1111;
+    margin-top: -60px;
+    padding: 0 30px;
+
+    .register {
+      margin-bottom: 12px;
+      border-radius: 16px;
+      width: 100%;
+      background: #0F1A2F;
+      height: 112px;
+      display: flex;
+      align-items: center;
+
+      .register-left {
+        padding-left: 30px;
+        flex: 1;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        font-size: 28px;
+        color: rgba(255, 255, 255, .75);
+
+        .register-title {
+          display: flex;
+          align-items: center;
+
+          .register-icon {
+            width: 48px;
+            height: 48px;
+            margin-right: 20px;
+          }
+
+          font-family: PingFangSC-Regular;
+          font-size: 32px;
+          color: #FFFFFF;
+          letter-spacing: 0;
+        }
+      }
+
+      .register-right {
+        padding: 0 22px;
+        height: 64px;
+        line-height: 64px;
+        text-align: center;
+        margin-left: 20px;
+        margin-right: 20px;
+        font-family: PingFangSC-Regular;
+        font-size: 32px;
+        color: #FFFFFF;
+        background-image: linear-gradient(-45deg, #4EC3F8 0%, #0F84EC 100%);
+        border-radius: 8px;
+      }
+    }
+
+    .register:nth-child(1) {
+      border-radius: 16px 16px 0 0;
+    }
+
+    .contact-title {
+      margin-top: 48px;
+      font-family: PingFangSC-Medium;
+      font-size: 32px;
+      color: #FFFFFF;
+    }
+
+    .contact-content {
+      margin-top: 30px;
+      height: 112px;
+      line-height: 112px;
+      background: #0F1A2F;
+      border-radius: 16px;
+      font-family: PingFangSC-Regular;
+      font-size: 32x;
+      color: #FFFFFF;
+      display: flex;
+      align-items: center;
+
+      .contact-icon {
+        margin-right: 20px;
+        width: 48px;
+        height: 48px;
+      }
+    }
+
+    .recharge {
+
+      margin-top: 30px;
+      width: 100%;
+      white-space: nowrap;
+
+      .recharge-info {
+        margin-right: 18px;
+        display: inline-block;
+        padding: 50px 0 24px 0;
+        width: 260px;
+        position: relative;
+        background: #0F1A2F;
+        border-radius: 16px;
+
+        .recharge-icon {
+          width: 100%;
+          display: flex;
+          justify-content: center;
+
+          .recharge-img {
+            width: 92px;
+            height: 64px;
+            display: block;
+          }
+        }
+
+        .recharge-tips {
+          margin-top: 16px;
+          position: absolute;
+          top: 0;
+          left: 0;
+          padding: 0 26px;
+          background: #DF5E5F;
+          border-radius: 16px 0 16px 0;
+          font-family: PingFangSC-Regular;
+          font-size: 20px;
+          color: #FFFFFF;
+        }
+
+        .recharge-title {
+          margin-top: 16px;
+          font-family: PingFangSC-Regular;
+          font-size: 28px;
+          color: #FFFFFF;
+          letter-spacing: 0;
+          text-align: center;
+          letter-spacing: 0;
+        }
+
+        .recharge-tag {
+          margin-top: 4px;
+          font-family: PingFangSC-Medium;
+          font-size: 24px;
+          color: #DF5E5F;
+          letter-spacing: 0;
+          text-align: center;
+          line-height: 31px;
+        }
+
+        .recharge-button {
+          margin-top: 24px;
+          position: relative;
+          left: 50%;
+          transform: translateX(-50%);
+          width: 120px;
+          height: 64px;
+          line-height: 64px;
+          background-image: linear-gradient(-45deg, #4EC3F8 0%, #0F84EC 100%);
+          border-radius: 32px;
+          font-family: PingFangSC-Regular;
+          font-size: 32px;
+          color: #FFFFFF;
+          letter-spacing: 0;
+          text-align: center;
+        }
+      }
+    }
+
+    .member-list {
+      .member-info {
+        margin-top: 30px;
+        padding: 15px;
+        background: #0F1A2F;
+        border-radius: 16px;
+
+        .member-top {
+          display: flex;
+          justify-content: space-between;
+          font-family: PingFangSC-Medium;
+          font-size: 32px;
+
+          .member-title {
+            color: #0F84EC;
+          }
+
+          .member-tag {
+            color: #FC4F79;
+          }
+        }
+
+        .member-bottom {
+          margin-top: 12px;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          font-family: PingFangSC-Regular;
+          font-size: 28px;
+          color: #FFFFFF;
+          line-height: 44px;
+
+          .member-button {
+            width: 136px;
+            height: 64px;
+            line-height: 64px;
+            text-align: center;
+            background-image: linear-gradient(-45deg, #45B7F2 0%, #0F84EC 100%);
+            border-radius: 64px;
+          }
+        }
+      }
+    }
+  }
+.ios-tips{
+  font-family: PingFangSC-Regular;
+  font-size: 32rpx;
+  color: rgba(255, 255, 255, 0.75);
+  margin-top: 100px;
+  text-align: center;
+}
+}

src/pages/index/index.config.js

@@ -1,3 +1,5 @@
 export default definePageConfig({
-  navigationBarTitleText: 'AI创作'
+  navigationBarTitleText: 'AI创作',
+  enableShareAppMessage: true,
+  enableShareTimeline: true ,
 })

src/pages/index/index.jsx

@@ -1,6 +1,7 @@
 import { Component } from 'react'
 import { View, Text, Button, Image, scrollView, Input, Textarea, Slider } from '@tarojs/components'
 import Taro, { getCurrentInstance } from '@tarojs/taro'
+import tool from '../../common/tool'
 import * as api from '../../service/index'
 
 import './index.less'
@@ -20,6 +21,7 @@ export default class Mine extends Component {
     modelIndex: 0,//当前选择的模型
     sliderNum: 7,//色彩丰富度
     drawNum: 1,//图片数量
+    mass: 0,//图片质量
   }
 
   componentDidShow () {
@@ -28,6 +30,15 @@ export default class Mine extends Component {
 
   componentDidMount () { }
 
+  onShareAppMessage = (res) => {
+    let shareData = {
+      title: tool.shareTitle,
+      path: `/pages/index/index?c=${Taro.getStorageSync('user_id')}&s=rightTap`,
+      imageUrl: tool.shareImg
+    }
+    return shareData;
+  }
+
   getMyDraw () {
     api.getMyDraw({ page_size: 100 })
   }
@@ -54,6 +65,16 @@ export default class Mine extends Component {
       }
     })
   }
+  deleteDrawText(){
+    this.setState({
+      value:''
+    })
+  }
+  deleteNegativeValue(){
+    this.setState({
+      negativeValue:''
+    })
+  }
   onInput (e) {
     console.log(e, 'e')
     var num = e.detail.cursor;
@@ -70,7 +91,7 @@ export default class Mine extends Component {
     var num = e.detail.cursor;
     document.getElementById('negative_prompt').innerHTML = num + "/1000";
   }
-  onBlurNegative(e){
+  onBlurNegative (e) {
     this.setState({
       negativeValue: e.detail.value
     })
@@ -113,8 +134,17 @@ export default class Mine extends Component {
       loraIndex: index
     })
   }
+  changeMass (e) {
+    this.setState({
+      mass: e
+    })
+  }
   //生成图片
   generatePictures () {
+    Taro.showLoading({
+      title: '加载中',
+    })
+
     console.log('生成图片');
     console.log();
     setTimeout(() => {
@@ -126,23 +156,33 @@ export default class Mine extends Component {
         return
       }
       let pramas = {
-        model_name: this.state.models[this.state.modelIndex].model_name,
-        file_name: this.state.models[this.state.modelIndex].lora_infos.length > 0 ? this.state.models[this.state.modelIndex].lora_infos[this.state.loraIndex].file_name : '',
+        // model_name: this.state.models[this.state.modelIndex].model_name,
+        // file_name: this.state.models[this.state.modelIndex].lora_infos.length > 0 ? this.state.models[this.state.modelIndex].lora_infos[this.state.loraIndex].file_name : '',
+        model_id: this.state.models[this.state.modelIndex].id,
+        style_id: this.state.models[this.state.modelIndex].lora_infos.length > 0 ? this.state.models[this.state.modelIndex].lora_infos[this.state.loraIndex].id : 0,
         img_size: this.state.imgSize[this.state.sizeIndex].name,
         img_cnt: this.state.drawNum,
         cfg_scale: this.state.sliderNum,
         sampler: this.state.sampling[this.state.samplingIndex],
         prompt: this.state.value,
-        negative_prompt: this.state.negativeValue
+        negative_prompt: this.state.negativeValue,
+        img_type: this.state.mass
       }
       api.drawTxt2img(pramas).then(res => {
         if (res.code == 200) {
+          Taro.hideLoading()
           Taro.navigateTo({
             url: `/pages/darwDetail/index?task_id=${res.data.task_id}`
           })
+        } else {
+          Taro.hideLoading()
+          Taro.showToast({
+            title: res.msg,
+            icon: 'error',
+          });
         }
       })
-    },1000)
+    }, 1000)
   }
   toChat (e) {
   }
@@ -154,13 +194,13 @@ export default class Mine extends Component {
           <Image className='banner-image' src=''></Image>
         </View> */}
         <View className='draw-content'>
-          <View className='draw-brack'>
+          {/* <View className='draw-brack'>
             <View className='draw-tab'>
               <View className='tab-text' style={'background: #0F84EC;color: #FFFFFF;'}>AI绘画</View>
               <View className='tab-text'>人物头像</View>
               <View className='tab-text'>风景头像</View>
             </View>
-          </View>
+          </View> */}
           <View className='draw-title'>绘画描述</View>
           <View className='draw-text'>
             <View className='recommend'>
@@ -174,8 +214,11 @@ export default class Mine extends Component {
               showCount
               onInput={e => (this.onInput(e))}
               onBlur={e => (this.onBlur(e))}
-
               maxlength='1000' />
+            {
+              this.state.value.length > 0 &&
+              <Image className='delete-draw-text' src='https://we-spa.oss-cn-shenzhen.aliyuncs.com/total_picture/1679637370560.png' onClick={e => (this.deleteDrawText())}></Image>
+            }
             <View className='textarea-num' id='textarea-num'>{this.state.value.length}/1000</View>
           </View>
           <View className='draw-title'>选择模型</View>
@@ -204,12 +247,15 @@ export default class Mine extends Component {
                 ))
             }
           </View>
+          {
+            this.state.models.length>6&&
           <View className='isOpen'>
             <View className='open-content' onClick={e => (this.changeOpen())}>
               <View className='open-title'>{!this.state.isOpen ? '展开' : '收起'}</View>
               <Image className='open-img' src={!this.state.isOpen ? 'https://we-spa.oss-cn-shenzhen.aliyuncs.com/total_picture/1678935050487.png' : 'https://we-spa.oss-cn-shenzhen.aliyuncs.com/total_picture/1678935114571.png'}></Image>
             </View>
           </View>
+          }
           {
             this.state.models[this.state.modelIndex] &&
             this.state.models[this.state.modelIndex].lora_infos.length > 0 &&
@@ -250,8 +296,8 @@ export default class Mine extends Component {
           </View>
           <View className='draw-title'>图片质量</View>
           <View className='draw-mass'>
-            <View className='mass-same'>一般</View>
-            <View className='mass-high'>高清</View>
+            <View className='mass-same' style={this.state.mass == 0 ? 'border: 2px solid #0F84EC;' : ''} onClick={e => (this.changeMass(0))}>普通</View>
+            <View className='mass-high' style={this.state.mass == 1 ? 'border: 2px solid #0F84EC;' : ''} onClick={e => (this.changeMass(1))}>高清</View>
           </View>
           <View className='draw-title'>采样方式</View>
           <View className='draw-sampling'>
@@ -271,11 +317,15 @@ export default class Mine extends Component {
               onInput={e => (this.onInputNegative(e))}
               onBlur={e => (this.onBlurNegative(e))}
               maxlength='1000' />
+              {
+              this.state.negativeValue.length > 0 &&
+              <Image className='delete-draw-text' src='https://we-spa.oss-cn-shenzhen.aliyuncs.com/total_picture/1679637370560.png' onClick={e => (this.deleteNegativeValue())}></Image>
+            }
             <View className='textarea-num' id='negative_prompt'>{this.state.negativeValue.length}/1000</View>
           </View>
         </View>
         <View className='generate-pictures' onClick={e => (this.generatePictures(e))} >
-          生成图片（消耗2积分）
+          生成图片（消耗{this.state.drawNum * 2 * (this.state.mass + 1)}积分）
         </View>
       </View>
     )

src/pages/index/index.less

@@ -82,7 +82,7 @@
         background-color: rgba(255, 255, 255, .05);
         color: rgba(255, 255, 255, .5);
         min-height: 240px;
-        padding: 24rpx;
+        padding: 24rpx 24rpx 44rpx 24rpx;
       }
 
       .textarea-num {
@@ -90,6 +90,13 @@
         text-align: end;
         color: rgba(255, 255, 255, .5);
       }
+      .delete-draw-text{
+        position: absolute;
+        right: 5px;
+        bottom: 65px;
+        width: 40px;
+        height: 40px;
+      }
 
 
     }
@@ -202,6 +209,7 @@
       .measurement-info {
         margin: 0 20px;
         width: 116px;
+        box-sizing: border-box;
         height: 116px;
         background-color: rgba(255, 255, 255, .05);
         border-radius: 16px;
@@ -257,13 +265,13 @@
     .draw-mass {
       margin-top: 20px;
       display: flex;
-      opacity: 0.5;
       font-family: PingFangSC-Regular;
       font-size: 28px;
       color: rgba(255, 255, 255, .5);
 
       .mass-same {
         width: 150px;
+        box-sizing: border-box;
         height: 80px;
         line-height: 80px;
         text-align: center;
@@ -274,6 +282,7 @@
       .mass-high {
         width: 150px;
         height: 80px;
+        box-sizing: border-box;
         line-height: 80px;
         text-align: center;
         background-color: rgba(255, 255, 255, .05);
@@ -291,7 +300,7 @@
       color: rgba(255, 255, 255, .5);
 
       .sampling-same {
-
+        box-sizing: border-box;
         margin-top: 20px;
         margin-right: 20px;
         padding: 0 40px;

src/pages/mine/index.config.js

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

src/pages/mine/index.jsx

@@ -10,14 +10,39 @@ export default class Mine extends Component {
   state = {
     userInfo: {},
     type: 0,
-    infos: [],
-    total: 20,
+    cardinalInfos: [],//基数
+    evenInfos: [],//偶数
+    total: 0,
     page: 1,
     page_size: 20,
+    selection: false,
+    cardinalSelectedNum: 0,
+
   }
 
   componentDidShow () {
+    this.getInit(1)
     this.getUserInfo()
+  }
+  onShareAppMessage = (res) => {
+    let shareData = {
+      title: tool.shareTitle,
+      path: `/pages/index/index?c=${Taro.getStorageSync('user_id')}&s=rightTap`,
+      imageUrl: tool.shareImg
+    }
+    return shareData;
+  }
+  getInit () {
+    this.setState({
+      cardinalInfos: [],//基数
+      evenInfos: [],//偶数
+      total: 0,
+      page: 1,
+      page_size: 20,
+      selection: false,
+      cardinalSelectedNum: 0,
+      evenSelectedNum: 0,
+    })
     this.getMyDraw(1)
   }
   getUserInfo () {
@@ -30,22 +55,43 @@ export default class Mine extends Component {
     })
   }
   getMyDraw (page) {
+    Taro.showLoading({
+      title: '加载中',
+    })
     let params = {
       page: page,
       page_size: this.state.page_size,
     }
-    api.getMyDraw(params).then(res => {
+    let getInit = api.getMyDraw(params)
+    if (this.state.type == 1) {
+      getInit = api.getLikeList(params)
+    }
+    getInit.then(res => {
       if (res.code == 200) {
-        let infos = this.state.infos.concat(res.data.infos)
+        Taro.hideLoading()
+        res.data.infos.forEach((item, index) => {
+          item['select'] = false
+        })
+        let infos = res.data.infos
+        let _evenInfos = res.data.infos.filter((item, index) => {
+          return index % 2 == 1
+        })
+        let _cardinalInfos = res.data.infos.filter((item, index) => {
+          return index % 2 == 0
+        })
+        console.log(_cardinalInfos, '_cardinalInfos');
+        let cardinalInfos = this.state.cardinalInfos.concat(_cardinalInfos)
+        let evenInfos = this.state.evenInfos.concat(_evenInfos)
         this.setState({
-          infos: infos,
+          cardinalInfos: cardinalInfos,//基数
+          evenInfos: evenInfos,//偶数
           total: res.data.total
         })
       }
     })
   }
   onReachBottom () {
-    if (this.state.infos.length < this.state.total) {
+    if ((this.state.cardinalInfos.length + this.state.evenInfos.length) < this.state.total) {
       this.setState({
         page: this.state.page + 1
       })
@@ -56,11 +102,134 @@ export default class Mine extends Component {
   changeType (index) {
     this.setState({
       type: index
+    }, () => {
+      this.getInit()
     })
   }
-  toDetail(item){
+  //选中||详情页
+  toDetail (item, index, type) {
+    if (this.state.selection) {
+      if (type == 'cardinal') {
+        let _infos = this.state.cardinalInfos
+        _infos[index].select = !this.state.cardinalInfos[index].select
+        let infosSelect = _infos.filter(res => {
+          return res.select == true
+        })
+        console.log(infosSelect.length, 'infosSelect');
+        this.setState({
+          cardinalInfos: _infos,
+          cardinalSelectedNum: infosSelect.length
+        })
+      } else {
+        let _infos = this.state.evenInfos
+        _infos[index].select = !this.state.evenInfos[index].select
+        let infosSelect = _infos.filter(res => {
+          return res.select == true
+        })
+        console.log(infosSelect.length, 'infosSelect');
+        this.setState({
+          evenInfos: _infos,
+          evenSelectedNum: infosSelect.length
+        })
+      }
+
+    } else {
+      if (this.state.type == 1) {
+        Taro.navigateTo({
+          url: `/pages/communityDetail/index?task_id=${item.id}`
+        })
+      }else{
+        Taro.navigateTo({
+          url: `/pages/darwDetail/index?task_id=${item.task_id}&img_id=${item.id}`
+        })
+      }
+    }
+  }
+  cancelDelect () {
+    let _evenInfos = this.state.evenInfos
+    _evenInfos.forEach((item, index) => {
+      item.select = false
+    })
+    let _cardinalInfos = this.state.cardinalInfos
+    _cardinalInfos.forEach((item, index) => {
+      item.select = false
+    })
+    this.setState({
+      cardinalInfos: _cardinalInfos,
+      evenInfos: _evenInfos,
+      cardinalSelectedNum: 0,
+      evenSelectedNum: 0,
+      selection: !this.state.selection
+    })
+  }
+  delectiImg () {
+    let that = this
+    Taro.showModal({
+      title: '提示',
+      content: `确定删除这${this.state.cardinalSelectedNum + this.state.evenSelectedNum}张图片吗`,
+      success: function (res) {
+        if (res.confirm) {
+          that.deleteImg()
+        } else if (res.cancel) {
+          console.log('用户点击取消')
+        }
+      }
+    })
+  }
+  deleteImg () {
+    let deleteObj = []
+    this.state.cardinalInfos.forEach(res => {
+      if (res.select) {
+        console.log(res.id, 'res.id', res.select);
+        deleteObj.push(res.id)
+      }
+    })
+    this.state.evenInfos.forEach(res => {
+      if (res.select) {
+        console.log(res.id, 'res.id', res.select);
+        deleteObj.push(res.id)
+      }
+    })
+    console.log(deleteObj.join(','), 'deleteObj');
+    api.userDelImg({ img_ids: deleteObj.join(',') }).then(res => {
+      if (res.code == 200) {
+        Taro.showToast({
+          title: `删除成功`,
+          icon: 'none',
+        });
+        this.getInit(1)
+        this.getUserInfo()
+      }
+    })
+  }
+  //批量选择
+  changeSelection () {
+    if (this.state.selection) {
+      let _evenInfos = this.state.evenInfos
+      _evenInfos.forEach((item, index) => {
+        item.select = false
+      })
+      let _cardinalInfos = this.state.cardinalInfos
+      _cardinalInfos.forEach((item, index) => {
+        item.select = false
+      })
+      this.setState({
+        cardinalInfos: _cardinalInfos,
+        evenInfos: _evenInfos,
+        cardinalSelectedNum: 0,
+        evenSelectedNum: 0,
+        selection: !this.state.selection
+      })
+    } else {
+      this.setState({
+        selection: !this.state.selection
+      })
+    }
+  }
+
+  getEarnPoints () {
     Taro.navigateTo({
-      url: `/pages/darwDetail/index?task_id=${item.task_id}`
+      url: `/pages/earnPoints/index`
     })
   }
 
@@ -70,40 +239,82 @@ export default class Mine extends Component {
     return (
       <View className='mine'>
         <View className='user-info'>
-          <View className='user-top'>
-            <Image className='user-img' src={this.state.userInfo.head_img}></Image>
-            <View className='user-info-text'>
-              <View className='info-top'>
-                <View className='user-name'>{this.state.userInfo.user_name}</View>
-              </View>
-              <View className='info-bottom'>
-                <View className='integral'>积分：~</View>
+          <View className='user-bag'>
+            <View className='user-top'>
+              <Image className='user-img' src={this.state.userInfo.head_img}></Image>
+              <View className='user-info-text'>
+                <View className='info-top'>
+                  <View className='user-name'>{this.state.userInfo.user_name}</View>
+                </View>
+                <View className='info-bottom'>
+                  <View className='integral'>点券：{this.state.userInfo.total_coin}</View>
+                </View>
               </View>
             </View>
-          </View>
-          <View className='get-integral'>
-            <View className='inte-button'>获取积分</View>
-          </View>
-        </View>
-        <View className='type'>
-          <View className='type-content'>
-            <View className='works' style={this.state.type == 0 ? ' background-image: linear-gradient(-45deg, #4EC3F8 0%, #0F84EC 100%);color: #FFFFFF;' : ''} onClick={e => (this.changeType(0))}>作品</View>
-            <View className='like' style={this.state.type == 1 ? ' background-image: linear-gradient(-45deg, #4EC3F8 0%, #0F84EC 100%);color: #FFFFFF;' : ''} onClick={e => (this.changeType(1))}>喜欢</View>
+            <View className='get-integral'>
+              <View className='inte-button' onClick={e => (this.getEarnPoints())}>获取点券</View>
+            </View>
           </View>
         </View>
+
         <View className='work-list'>
-          <View className='work-num'>作品数量：{this.state.total}/1000</View>
+          <View className='type'>
+            <View className='type-content'>
+              <View className='works' style={this.state.type == 0 ? ' background-image: linear-gradient(-45deg, #4EC3F8 0%, #0F84EC 100%);color: #FFFFFF;' : ''} onClick={e => (this.changeType(0))}>作品</View>
+              <View className='like' style={this.state.type == 1 ? ' background-image: linear-gradient(-45deg, #4EC3F8 0%, #0F84EC 100%);color: #FFFFFF;' : ''} onClick={e => (this.changeType(1))}>喜欢</View>
+            </View>
+          </View>
+          {
+            this.state.type == 0 &&
+            <View className='work-num'>作品数量：{this.state.total}/{this.state.userInfo.stock_cnt}</View>
+          }
           <View className='work-list-info' >
             {
-              this.state.infos.map((item, index) => (
-                <View className='work-info' key={index} onClick={e=>(this.toDetail(item))}>
-                  <Image className='work-img' mode='widthFix' src={item.img}></Image>
-                  <View className='work-name'>{tool.ellipsis(item.img_info, 20)}</View>
-                </View>
-              ))
+              this.state.type == 0 &&
+              <View className='selection' onClick={e => (this.changeSelection())}>{!this.state.selection ? '批量选择' : '取消'}</View>
             }
+            <View className='selection-left'>
+              {
+                this.state.cardinalInfos.map((item, index) => (
+                  <View className='work-info' key={index} onClick={e => (this.toDetail(item, index, 'cardinal'))}>
+                    {
+                      this.state.selection &&
+                      <Image className='select' src={item.select ? 'https://we-spa.oss-cn-shenzhen.aliyuncs.com/total_picture/1679033915899.jpg' : 'https://we-spa.oss-cn-shenzhen.aliyuncs.com/total_picture/1679033897198.jpg'}></Image>
+                    }
+                    <Image className='work-img' lazyLoad mode='widthFix' src={item.img ? item.img : 'https://we-spa.oss-cn-shenzhen.aliyuncs.com/total_picture/1679305142417.png'}></Image>
+                    <View className='work-name'>{tool.ellipsis(item.img_info, 8)}</View>
+                  </View>
+                ))
+              }
+            </View>
+            <View className='selection-right'>
+              {
+                this.state.evenInfos.map((item, index) => (
+                  <View className='work-info' key={index} onClick={e => (this.toDetail(item, index, 'even'))}>
+                    {
+                      this.state.selection &&
+                      <Image className='select' src={item.select ? 'https://we-spa.oss-cn-shenzhen.aliyuncs.com/total_picture/1679033915899.jpg' : 'https://we-spa.oss-cn-shenzhen.aliyuncs.com/total_picture/1679033897198.jpg'}></Image>
+                    }
+                    <Image className='work-img' lazyLoad mode='widthFix' src={item.img}></Image>
+                    <View className='work-name'>{tool.ellipsis(item.img_info, 8)}</View>
+                  </View>
+                ))
+              }
+            </View>
+
           </View>
         </View>
+        {
+          this.state.selection &&
+          <View className='select-content'>
+            <View className='cancel' onClick={e => (this.cancelDelect())}>取消</View>
+            <View >当前已选中{this.state.cardinalSelectedNum + this.state.evenSelectedNum}张</View>
+            <View className='delect' onClick={e => (this.delectiImg())}>
+              <Image className='delect-icon' src='https://we-spa.oss-cn-shenzhen.aliyuncs.com/total_picture/1679037709270.png'></Image>
+              <View className='delect-text'>删除</View>
+            </View>
+          </View>
+        }
       </View>
     )
   }

src/pages/mine/index.less

@@ -1,13 +1,19 @@
 .mine {
   min-height: 100vh;
   background-color: #041129;
-  padding-bottom: 120px;
+  // padding-bottom: 120px;
 
   .user-info {
     height: 326px;
-    background: #0F1A2F;
-    border-radius: 28px 28px 0 0;
     padding: 30px;
+    background-image: url(https://we-spa.oss-cn-shenzhen.aliyuncs.com/total_picture/1679475362928.png);
+
+    .user-bag {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+
+    }
 
     .user-top {
       display: flex;
@@ -37,14 +43,13 @@
           .integral {
             font-family: PingFangSC-Regular;
             font-size: 28px;
-            color: #FFFFFF;
+            color: rgba(255, 255, 255, .75);
           }
         }
       }
     }
 
     .get-integral {
-      margin-top: 66px;
       display: flex;
       justify-content: center;
 
@@ -52,10 +57,11 @@
         width: 216px;
         height: 80px;
         line-height: 80px;
-        border: 2px solid #1489ED;
+        background-image: linear-gradient(-45deg, #4EC3F8 0%, #0F84EC 100%);
+        border-radius: 40px;
         font-family: PingFangSC-Regular;
         font-size: 32px;
-        color: #C6C6C6;
+        color: #FFFFFF;
         text-align: center;
 
       }
@@ -69,7 +75,7 @@
 
     .type-content {
       display: flex;
-      background: #0F1A2F;
+      background: rgba(255, 255, 255, .3);
       font-family: PingFangSC-Regular;
       font-size: 28px;
       color: rgba(255, 255, 255, .5);
@@ -96,27 +102,79 @@
   }
 
   .work-list {
-    margin-top: 70px;
-    padding: 0 30px;
+    min-height: 100vh;
+    background: #0F1A2F;
+    box-shadow: 12px 0 30px 0 #1E376D;
+    border-radius: 28px 28px 0 0;
+    margin-top: -150px;
+    padding: 28px 30px;
 
     .work-num {
+      margin-top: 48px;
       font-family: PingFangSC-Regular;
       font-size: 32px;
       color: #FFFFFF;
     }
-    .work-list-info{
+
+    .work-list-info {
+      width: 100%;
+      position: relative;
       margin-top: 40px;
+      column-gap: 5rpx;
+      column-count: 2;
+      /*每一格的高度*/
+
       display: flex;
-      flex-wrap: wrap;
       justify-content: space-between;
-      .work-info{
+
+      .selection {
+        position: absolute;
+        right: 0;
+        top: -94px;
+        width: 178px;
+        height: 64px;
+        line-height: 64px;
+        border-radius: 40px;
+        border: 2px solid #1489ED;
+        color: #1489ED;
+        font-family: PingFangSC-Regular;
+        font-size: 32px;
+        text-align: center;
+
+      }
+
+      .selection-left {
+        width: 330px;
+      }
+
+      .selection-right {
+        width: 330px;
+      }
+
+      .work-info {
         position: relative;
         margin-top: 10px;
-        width: 45%;
-        .work-img{
+
+        // width: 45%;
+
+        .select {
+          position: absolute;
+          background-color: white;
+          border-radius: 8px;
+          left: 20px;
+          top: 20px;
+          width: 40px;
+          height: 40px;
+        }
+
+        .work-img {
           width: 100%;
+          min-height: 180px;
+          display: block;
+          // height: 100%;
         }
-        .work-name{
+
+        .work-name {
           position: absolute;
           bottom: 0;
           left: 0;
@@ -130,4 +188,46 @@
       }
     }
   }
+
+  @media only screen and (max-width: 768px) {
+    .work-info {
+      width: calc(50% - 10px);
+    }
+  }
+
+  @media only screen and (max-width: 480px) {
+    .work-info {
+      width: 100%;
+    }
+  }
+
+  .select-content {
+    width: 100%;
+    padding: 20px 0;
+    background: rgba(11, 19, 37, .8);
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    display: flex;
+    justify-content: space-between;
+    font-family: PingFangSC-Regular;
+    font-size: 32px;
+    color: #FFFFFF;
+
+    .cancel {
+      margin-left: 40px;
+    }
+
+    .delect {
+      margin-right: 40px;
+      display: flex;
+      align-items: center;
+
+      .delect-icon {
+        margin-right: 10px;
+        width: 40px;
+        height: 40px;
+      }
+    }
+  }
 }

src/service/index.js

@@ -37,6 +37,13 @@ export const getMyDraw = data =>
     method: 'POST',
     data,
   });
+//获取我喜欢的作品
+export const getLikeList = data =>
+  Request({
+    url: '/api/get_like_list',
+    method: 'POST',
+    data,
+  });
 //获取画图详情页
 export const getDrawTaskStatus = data =>
   Request({
@@ -47,7 +54,73 @@ export const getDrawTaskStatus = data =>
 //获取画图详情页
 export const getUserInfo = data =>
   Request({
-    url: '/api/get_user_info',
+    url: '/api/get_my_wallet',
+    method: 'POST',
+    data,
+  });
+//获取点券列表
+export const getCoinTaskList = data =>
+  Request({
+    url: '/api/get_coin_task_list',
+    method: 'POST',
+    data,
+  });
+//完成任务
+export const finishTask = data =>
+  Request({
+    url: '/api/finish_task',
+    method: 'POST',
+    data,
+  });
+//获取广场列表
+export const getHubList = data =>
+  Request({
+    url: '/api/get_hub_list',
     method: 'POST',
     data,
-  });
+  });
+//获取广场详情页
+export const getImgDetail = data =>
+  Request({
+    url: '/api/get_img_detail',
+    method: 'POST',
+    data,
+  });
+//点赞
+export const userLike = data =>
+  Request({
+    url: '/api/user_like',
+    method: 'POST',
+    data,
+  });
+//获取分享二维码
+export const getWxCodeImg = data =>
+  Request({
+    url: '/api/get_wx_code_img',
+    method: 'POST',
+    data,
+  });
+//获取商品列表
+export const getShopList = data =>
+  Request({
+    url: '/api/get_shop_list',
+    method: 'POST',
+    data,
+  });
+//获取商品列表
+export const createOrder = data =>
+  Request({
+    url: '/api/wx_create_order',
+    method: 'POST',
+    data,
+  });
+//删除作品
+export const userDelImg = data =>
+  Request({
+    url: '/api/user_del_img',
+    method: 'POST',
+    data,
+  });
+ 
+
+