From 2089b31cb60160104e8febf6c5c5e6952201307f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=88=98=E6=9D=B0?= Date: Mon, 8 Sep 2025 21:22:25 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E4=B8=8A=E4=BC=A0=E5=9B=BE=E7=89=87?= =?UTF-8?q?=E7=BB=84=E4=BB=B6=E5=9C=BA=E6=99=AF=E6=B7=BB=E5=8A=A0=E3=80=81?= =?UTF-8?q?=E8=BD=AE=E6=92=AD=E5=9B=BE=E6=A0=B7=E5=BC=8F=E4=BF=AE=E5=A4=8D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/UploadCover/index.tsx | 5 +- src/components/UploadCover/upload-from-wx.tsx | 20 +-- .../UploadCover/upload-source-popup.tsx | 4 +- .../formSchema/publishBallFormSchema.ts | 13 +- src/pages/detail/index.scss | 29 +--- src/pages/detail/index.tsx | 149 ++++++++++++------ .../SelectStadium/StadiumDetail.tsx | 3 +- src/services/publishService.ts | 4 +- 8 files changed, 135 insertions(+), 92 deletions(-) diff --git a/src/components/UploadCover/index.tsx b/src/components/UploadCover/index.tsx index 06453a2..eaf9d51 100644 --- a/src/components/UploadCover/index.tsx +++ b/src/components/UploadCover/index.tsx @@ -25,6 +25,7 @@ export interface UploadCoverProps { source?: source maxCount?: number align?: 'center' | 'left' + tag?: 'cover' | 'screenshot' } // const values = [ @@ -34,7 +35,6 @@ export interface UploadCoverProps { // ] const mergeCoverImages = (value: CoverImageValue[], images: CoverImageValue[]) => { - console.log(value, images, 11111) // 根据id来更新url, 如果id不存在，则添加到value中 const newImages = images const updatedValue = value.map(item => { @@ -55,6 +55,7 @@ export default function UploadCover(props: UploadCoverProps) { source = ['album', 'history', 'preset'] as source, maxCount = 9, align = 'center', + tag = 'cover', } = props const [visible, setVisible] = useState(false) @@ -111,7 +112,7 @@ export default function UploadCover(props: UploadCoverProps) { } - +
{value.length < maxCount && (
setVisible(true)}> diff --git a/src/components/UploadCover/upload-from-wx.tsx b/src/components/UploadCover/upload-from-wx.tsx index 6ac6e32..35aabda 100644 --- a/src/components/UploadCover/upload-from-wx.tsx +++ b/src/components/UploadCover/upload-from-wx.tsx @@ -4,17 +4,14 @@ import Taro from '@tarojs/taro' import uploadApi from '@/services/uploadFiles' import './upload-from-wx.scss' import { CoverImageValue } from '.' -import { uploadFileResponseData } from '@/services/uploadFiles' export interface UploadFromWxProps { - onAdd: (images: CoverImageValue[], onFileUploaded: Promise<{ id: string, data: uploadFileResponseData }[]>) => void + onAdd: (images: CoverImageValue[], onFileUploaded: Promise<{ id: string, url: string }[]>) => void maxCount: number } async function convert_to_jpg_and_compress (src: string, { width, height }): Promise { - console.log(width, height, '13123132') const canvas = Taro.createOffscreenCanvas({ type: '2d', width, height }) - console.log(canvas, canvas.width, canvas.height, 'canvas') const ctx = canvas.getContext('2d') as CanvasRenderingContext2D const image = canvas.createImage() @@ -23,14 +20,13 @@ async function convert_to_jpg_and_compress (src: string, { width, height }): Pro image.src = src }) ctx.clearRect(0, 0, width, height) - ctx.drawImage(image, 0, 0, width, height) + ctx.drawImage(image as unknown as CanvasImageSource, 0, 0, width, height) - const imageData = ctx.getImageData(0, 0, width, height) - console.log(imageData, 'imageData') + // const imageData = ctx.getImageData(0, 0, width, height) return new Promise((resolve, reject) => { Taro.canvasToTempFilePath({ - canvas, + canvas: canvas as unknown as Taro.Canvas, fileType: 'jpg', quality: 0.7, success: res => resolve(res.tempFilePath), @@ -43,7 +39,6 @@ async function convert_to_jpg_and_compress (src: string, { width, height }): Pro async function compressImage(files) { const res: string[] = [] for (const file of files) { - console.log(file, file.width, file.height, 'file frfdfsfds') const compressed_image = await convert_to_jpg_and_compress(file.path, { width: file.width, height: file.height }) res.push(compressed_image) } @@ -59,15 +54,14 @@ const IMAGE_MAX_SIZE = { // 标准长宽比，判断标准 const STANDARD_ASPECT_RATIO = IMAGE_MAX_SIZE.width / IMAGE_MAX_SIZE.height +type ChoosenImageRes = { path: string, size: number, width: number, height: number } // 根据图片标准重新设置图片尺寸 async function onChooseImageSuccess(tempFiles) { - console.log(tempFiles, 'tempFiles') - const result: { path: string, size: number, widht: number, height: number }[] = [] + const result: ChoosenImageRes[] = [] for (const tempFile of tempFiles) { - console.count('tempFile') const { width, height } = await Taro.getImageInfo({ src: tempFile.path }) const image_aspect_ratio = width / height - let fileRes: { path: string, size: number } = { path: tempFile.path, size: tempFile.size } + let fileRes: ChoosenImageRes = { path: tempFile.path, size: tempFile.size, width: 0, height: 0 } // 如果图片长宽比小于标准长宽比，则依照图片高度以及图片最大高度来重新设置图片尺寸 if (image_aspect_ratio < STANDARD_ASPECT_RATIO) { fileRes = { diff --git a/src/components/UploadCover/upload-source-popup.tsx b/src/components/UploadCover/upload-source-popup.tsx index 5b02ad0..6858b44 100644 --- a/src/components/UploadCover/upload-source-popup.tsx +++ b/src/components/UploadCover/upload-source-popup.tsx @@ -18,6 +18,7 @@ type ImageItem = { interface UploadImageProps { onAdd: (images: ImageItem[]) => void + tag: 'cover' | 'screenshot' } export const sourceMap = new Map([ @@ -32,6 +33,7 @@ const checkImageSelected = (images: ImageItem[], image: ImageItem) => { export default forwardRef(function UploadImage(props: UploadImageProps, ref) { const { onAdd = () => void 0, + tag = 'cover', } = props const [visible, setVisible] = useState(false) const [sourceType, setSourceType] = useState('history') @@ -62,7 +64,7 @@ export default forwardRef(function UploadImage(props: UploadImageProps, ref) { })) function fetchImages(st: SourceType) { - publishService.getPictures({ type: st }).then(res => { + publishService.getPictures({ type: st, tag }).then(res => { if (res.code === 0) { let start = 0 setImages(res.data.rows.map(item => ({ diff --git a/src/config/formSchema/publishBallFormSchema.ts b/src/config/formSchema/publishBallFormSchema.ts index 92bc56b..d130a71 100644 --- a/src/config/formSchema/publishBallFormSchema.ts +++ b/src/config/formSchema/publishBallFormSchema.ts @@ -51,7 +51,8 @@ export const publishBallFormSchema: FormFieldConfig[] = [ required: true, props: { maxCount: 9, - source: ['album', 'history', 'preset'] + source: ['album', 'history', 'preset'], + tag: 'cover', } }, { @@ -97,7 +98,7 @@ export const publishBallFormSchema: FormFieldConfig[] = [ type: FieldType.LOCATION, placeholder: '请选择活动地点', required: true, - }, + }, { prop: 'play_type', label: '玩法', @@ -126,7 +127,7 @@ export const publishBallFormSchema: FormFieldConfig[] = [ max: 20, } }, - + { prop: 'skill_level', label: 'NTRP 水平要求', @@ -162,7 +163,7 @@ export const publishBallFormSchema: FormFieldConfig[] = [ label: '', type: FieldType.CHECKBOX, placeholder: '开启自动候补逻辑', - required: true, + required: true, props:{ subTitle: '开启自动候补逻辑', showToast: true, @@ -173,9 +174,9 @@ export const publishBallFormSchema: FormFieldConfig[] = [ prop: 'is_wechat_contact', label: '', type: FieldType.WECHATCONTACT, - required: true, + required: true, props:{ subTitle: '允许球友微信联系我', } } -] \ No newline at end of file +] \ No newline at end of file diff --git a/src/pages/detail/index.scss b/src/pages/detail/index.scss index 2a1acf2..e3b6554 100644 --- a/src/pages/detail/index.scss +++ b/src/pages/detail/index.scss @@ -87,26 +87,16 @@ } } - .detail-page-bg-text { - width: 100%; - height: 100%; - position: fixed; - left: 0; - top: 0; - z-index: -1; - background-color: rgba(0, 0, 0, 0.3); - } - .detail-swiper-container { - height: 240px; - margin-top: 15px; - margin-left: 15px; - margin-right: 15px; + height: 270px; + width: 100%; + padding: 15px 15px 0; + box-sizing: border-box; overflow-x: scroll; .detail-swiper-scroll-container { display: flex; - height: 240px; + height: 250px; width: auto; align-items: center; justify-content: flex-start; @@ -115,13 +105,10 @@ .detail-swiper-item { flex: 0 0 auto; - max-width: calc(100vw - 30px); - max-height: 240px; + height: 250px; + display: flex; + align-items: center; &-image { - max-width: 100%; - max-height: 100%; - width: 300px; - height: 300px; border-radius: 12px; transition: transform 0.5s; } diff --git a/src/pages/detail/index.tsx b/src/pages/detail/index.tsx index efa46c7..53c0f33 100644 --- a/src/pages/detail/index.tsx +++ b/src/pages/detail/index.tsx @@ -1,4 +1,4 @@ -import React, { useState, useRef, useImperativeHandle, forwardRef } from 'react' +import React, { useState, useEffect, useRef, useImperativeHandle, forwardRef } from 'react' import { View, Text, Image, Map, ScrollView } from '@tarojs/components' import { Avatar, Popover, ImagePreview } from '@nutui/nutui-react-taro' import Taro, { useRouter, useShareAppMessage, useShareTimeline, useDidShow } from '@tarojs/taro' @@ -23,6 +23,106 @@ function insertDotInTags(tags: string[]) { return tags.join('-·-').split('-') } +function GameTags(props) { + const { detail } = props + const tags = [{ + name: '🕙 急招', + icon: '', + }, { + name: '🔥 本周热门', + icon: '', + }, { + name: '🎉 新活动', + icon: '', + }, { + name: '官方组织', + icon: '', + }] + return ( + + + {/* network image mock */} + + + + {tags.map((tag, index) => ( + + {tag.icon && } + {tag.name} + + ))} + + + ) +} + +type CourselItemType = { + url: string + width: number + height: number +} +function Coursel(props) { + const { detail } = props + const [list, setList] = useState([]) + const [listWidth, setListWidth] = useState(0) + const { image_list } = detail + + async function getImagesMsg (imageList) { + const latest_list: CourselItemType[] = [] + const sys_info = await Taro.getSystemInfo() + console.log(sys_info, 'info') + const max_width = sys_info.screenWidth - 30 + const max_height = 240 + const current_aspect_ratio = max_width / max_height + let container_width = 0 + for (const imageUrl of imageList) { + const { width, height } = await Taro.getImageInfo({ src: imageUrl }) + if (width && height) { + const aspect_ratio = width / height + const latest_w_h = { width, height } + if (aspect_ratio < current_aspect_ratio) { + latest_w_h.width = max_height * aspect_ratio + latest_w_h.height = max_height + } else { + latest_w_h.width = max_width + latest_w_h.height = max_width / aspect_ratio + } + container_width += latest_w_h.width + 12 + latest_list.push({ + url: imageUrl, + width: latest_w_h.width, + height: latest_w_h.height, + }) + } + } + setList(latest_list) + setListWidth(container_width) + } + + useEffect(() => { getImagesMsg(image_list || []) }, [image_list]) + + return ( + + + { + list.map((item, index) => { + return ( + + + + ) + }) + } + + + ) +} + // 分享弹窗 const SharePopup = forwardRef(({ id, from }: { id: string, from: string }, ref) => { const [visible, setVisible] = useState(false) @@ -565,20 +665,6 @@ function Index() { }) } - const tags = [{ - name: '🕙 急招', - icon: '', - }, { - name: '🔥 本周热门', - icon: '', - }, { - name: '🎉 新活动', - icon: '', - }, { - name: '官方组织', - icon: '', - }] - function handleBack() { const pages = Taro.getCurrentPages() if (pages.length <= 1) { @@ -609,40 +695,11 @@ function Index() { {/* swiper */} - - - { - detail?.image_list?.length > 0 && detail?.image_list.map((item, index) => { - return ( - - - - ) - }) - } - - + {/* content */} {/* avatar and tags */} - - - {/* network image mock */} - - - - {tags.map((tag, index) => ( - - {tag.icon && } - {tag.name} - - ))} - - + {/* title */} {detail.title} diff --git a/src/pages/publishBall/components/SelectStadium/StadiumDetail.tsx b/src/pages/publishBall/components/SelectStadium/StadiumDetail.tsx index e864a11..e3d6e6a 100644 --- a/src/pages/publishBall/components/SelectStadium/StadiumDetail.tsx +++ b/src/pages/publishBall/components/SelectStadium/StadiumDetail.tsx @@ -230,8 +230,9 @@ const StadiumDetail = forwardRef(({ } }} maxCount={9} - source={['album', 'history', 'preset']} + source={['album', 'history']} align='left' + tag="screenshot" /> ) diff --git a/src/services/publishService.ts b/src/services/publishService.ts index 777abff..8e4674e 100644 --- a/src/services/publishService.ts +++ b/src/services/publishService.ts @@ -143,7 +143,7 @@ class PublishService { }) } async getPictures(req) { - const { type, otherReq = {} } = req + const { type, tag, otherReq = {} } = req if (type === 'history') { return this.getHistoryImageList({ pageOption: { @@ -151,7 +151,7 @@ class PublishService { pageSize: 100, }, seachOption: { - tag: 'cover', + tag, resource_type: 'image', dateRange: [], },