From 6325147e8173487119557ca7598bf15f9c222974 Mon Sep 17 00:00:00 2001 From: Dawn1Ocean <1785590531@qq.com> Date: Fri, 12 Apr 2024 00:35:45 +0800 Subject: [PATCH] refactor PicUploader from TicketDetail/Comment --- doc/api.md | 9 ++- mock/api.ts | 7 +- .../PicUploader/PicUploader.config.ts | 3 + src/components/PicUploader/PicUploader.scss | 0 src/components/PicUploader/PicUploader.tsx | 66 +++++++++++++++++++ src/pages/TicketDetail/Comment.tsx | 37 +++++------ src/service/picUpload.ts | 35 ++++++++++ src/service/submitComment.ts | 11 +--- src/utils/random.ts | 11 ++++ 9 files changed, 149 insertions(+), 30 deletions(-) create mode 100644 src/components/PicUploader/PicUploader.config.ts create mode 100644 src/components/PicUploader/PicUploader.scss create mode 100644 src/components/PicUploader/PicUploader.tsx create mode 100644 src/service/picUpload.ts diff --git a/doc/api.md b/doc/api.md index 508ddd1..e00bb51 100644 --- a/doc/api.md +++ b/doc/api.md @@ -249,7 +249,14 @@ Request "token": "token_test", "id": "id", "content": "为什么 PD 不能充电呢？", - "pic": ["https://....jpg"] +} +``` + +Data + +```json +{ + "id": "id", // 返回的是评论的 id } ``` diff --git a/mock/api.ts b/mock/api.ts index fc7b1b3..a848c95 100644 --- a/mock/api.ts +++ b/mock/api.ts @@ -59,7 +59,9 @@ export default { }, 'POST /tickets/addnote': { success: true, - data: {}, + data: { + id: 114, + }, }, 'POST /tickets/create': { success: true, @@ -138,4 +140,7 @@ export default { islogin: true, }, }, + 'POST /upload/pic': { + success: true, + }, }; diff --git a/src/components/PicUploader/PicUploader.config.ts b/src/components/PicUploader/PicUploader.config.ts new file mode 100644 index 0000000..fd50080 --- /dev/null +++ b/src/components/PicUploader/PicUploader.config.ts @@ -0,0 +1,3 @@ +export default { + component: true, +}; diff --git a/src/components/PicUploader/PicUploader.scss b/src/components/PicUploader/PicUploader.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/components/PicUploader/PicUploader.tsx b/src/components/PicUploader/PicUploader.tsx new file mode 100644 index 0000000..bf56fcd --- /dev/null +++ b/src/components/PicUploader/PicUploader.tsx @@ -0,0 +1,66 @@ +import { picUpload } from '@/service/picUpload'; +import { View } from '@tarojs/components'; +import Taro from '@tarojs/taro'; +import { Component, ReactNode } from 'react'; +import { AtImagePicker } from 'taro-ui'; +import { File } from 'taro-ui/types/image-picker'; + +const reLaunchInterval = 1000; + +interface PicUploaderState { + files: File[]; +} + +interface PicUploaderProps { + source: string; + id: number; + superId?: number; +} + +export default class PicUploader extends Component< + PicUploaderProps, + PicUploaderState +> { + state = { + files: [] as File[], + }; + onUpload() { + if (this.state.files.length !== 0) { + for (let file of this.state.files) { + picUpload(this, file.url); + } + } + if (this.props.source == 'comment') { + setTimeout(() => { + Taro.reLaunch({ + url: '/pages/TicketDetail/TicketDetail?id=' + this.props.superId, + }); + }, reLaunchInterval); + } else if (this.props.source == 'conclusion') { + setTimeout(() => { + Taro.reLaunch({ + url: '/pages/index/index', + }); + }, reLaunchInterval); + } + } + handlePicChange(files: File[]) { + this.setState({ + files: files, + }); + return files; + } + render(): ReactNode { + return ( + + + + ); + } +} diff --git a/src/pages/TicketDetail/Comment.tsx b/src/pages/TicketDetail/Comment.tsx index 737a73f..0c7087e 100644 --- a/src/pages/TicketDetail/Comment.tsx +++ b/src/pages/TicketDetail/Comment.tsx @@ -1,21 +1,29 @@ import { ExpandItem } from '@/components/ExpandItem/ExpandItem'; +import PicUploader from '@/components/PicUploader/PicUploader'; import pt from '@/plain-text'; import { submitComment } from '@/service/submitComment'; import { View } from '@tarojs/components'; import Taro from '@tarojs/taro'; -import { Component, ReactNode } from 'react'; -import { AtButton, AtForm, AtImagePicker, AtTextarea } from 'taro-ui'; +import React, { Component, ReactNode } from 'react'; +import { AtButton, AtForm, AtTextarea } from 'taro-ui'; const submitInterval = 5000; +export interface commentData { + content: string; + id: number; +} + export class Comment extends Component { state = { isLoading: false, isDisable: false, comment: '', - files: [], + commentId: 0, }; + uploaderRef = React.createRef(); + props = { setFloatLayout: (_: boolean) => {}, id: 0, @@ -29,13 +37,6 @@ export class Comment extends Component { return comment; } - handlePicChange(files: string[]) { - this.setState({ - files: files, - }); - return files; - } - onCommentSubmit() { this.setState({ isDisable: true, @@ -54,6 +55,7 @@ export class Comment extends Component { return; } submitComment(this); + this.uploaderRef.current?.onUpload(); setTimeout(() => { this.setState({ isDisable: false, @@ -74,15 +76,12 @@ export class Comment extends Component { - - + } /> { + console.log(res.data); + Taro.atMessage({ + message: pt.get().button.submitText.success, + type: 'success', + }); + }) + .catch((err) => { + console.log(err.errMsg); + Taro.atMessage({ + message: pt.get().button.submitText.error + err.errMsg, + type: 'error', + }); + }); +} diff --git a/src/service/submitComment.ts b/src/service/submitComment.ts index c31a9b8..3726578 100644 --- a/src/service/submitComment.ts +++ b/src/service/submitComment.ts @@ -4,36 +4,29 @@ import pt from '@/plain-text'; import wechatUser from '@/wechat'; import { getUrl } from '.'; -const reLaunchInterval = 1000; - export function submitComment(that: Comment) { that.setState({ isLoading: true, }); Taro.request({ - url: getUrl('/ticket/addnote'), + url: getUrl('/tickets/addnote'), method: 'POST', data: { token: wechatUser.getToken(), content: that.state.comment, id: that.props.id, - pic: that.state.files, }, }) .then((res) => { console.log(res.data); that.setState({ isLoading: false, + commentId: res.data.data.id, }); Taro.atMessage({ message: pt.get().button.submitText.success, type: 'success', }); - setTimeout(() => { - Taro.reLaunch({ - url: '/pages/TicketDetail/TicketDetail?id=' + that.props.id, - }); - }, reLaunchInterval); }) .catch((err) => { console.log(err.errMsg); diff --git a/src/utils/random.ts b/src/utils/random.ts index f2db933..4a8ede1 100644 --- a/src/utils/random.ts +++ b/src/utils/random.ts @@ -1,3 +1,14 @@ export const randomInt = (floor: number, ceiling: number) => { return Math.floor(Math.random() * (ceiling - floor + 1) + floor); }; + +export const randomString = (length: number) => { + const chars = + '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ'; + const maxPos = chars.length; + let randomStr = ''; + for (let i = 0; i < length; i++) { + randomStr += chars.charAt(Math.floor(Math.random() * maxPos)); + } + return randomStr; +};