bimwe/mini-programs
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'feat/liujie'

Browse Source
This commit is contained in:
刘杰
2025-09-08 21:22:53 +08:00
parent 94bf935b48 2089b31cb6
commit 3b92bfec9b
8 changed files with 135 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/UploadCover/index.tsx
View File

@@ -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) {
}
</View>
</CommonPopup>
<UploadSourcePopup ref={uploadSourcePopupRef} onAdd={onAdd} />
<UploadSourcePopup tag={tag} ref={uploadSourcePopupRef} onAdd={onAdd} />
<div className={`upload-cover-root ${value.length === 0 && align === 'center' ? 'upload-cover-act-center' : ''}`}>
{value.length < maxCount && (
<div className="upload-cover-act" onClick={() => setVisible(true)}>

20
src/components/UploadCover/upload-from-wx.tsx
View File

@@ -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<string> {
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 = {

4
src/components/UploadCover/upload-source-popup.tsx
View File

@@ -18,6 +18,7 @@ type ImageItem = {
interface UploadImageProps {
onAdd: (images: ImageItem[]) => void
tag: 'cover' | 'screenshot'
}
export const sourceMap = new Map<SourceType, string>([
@@ -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<SourceType>('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 => ({

3
src/config/formSchema/publishBallFormSchema.ts
View File

@@ -51,7 +51,8 @@ export const publishBallFormSchema: FormFieldConfig[] = [
required: true,
props: {
maxCount: 9,
source: ['album', 'history', 'preset']
source: ['album', 'history', 'preset'],
tag: 'cover',
}
},
{

29
src/pages/detail/index.scss
View File

@@ -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;
}

149
src/pages/detail/index.tsx
View File

@@ -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 (
<View className='detail-page-content-avatar-tags'>
<View className='detail-page-content-avatar-tags-avatar'>
{/* network image mock */}
<Image className='detail-page-content-avatar-tags-avatar-image' src="https://img.yzcdn.cn/vant/cat.jpeg" />
</View>
<View className='detail-page-content-avatar-tags-tags'>
{tags.map((tag, index) => (
<View key={index} className='detail-page-content-avatar-tags-tags-tag'>
{tag.icon && <Image src={tag.icon} />}
<Text>{tag.name}</Text>
</View>
))}
</View>
</View>
)
}
type CourselItemType = {
url: string
width: number
height: number
}
function Coursel(props) {
const { detail } = props
const [list, setList] = useState<CourselItemType[]>([])
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 (
<View className="detail-swiper-container">
<View className="detail-swiper-scroll-container" style={{ width: listWidth + 'px' }}>
{
list.map((item, index) => {
return (
<View className='detail-swiper-item' key={index}>
<Image
src={item.url}
mode="aspectFill"
className='detail-swiper-item-image'
style={{ width: item.width + 'px', height: item.height + 'px' }}
/>
</View>
)
})
}
</View>
</View>
)
}
// 分享弹窗
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() {
</view>
<View className='detail-page-bg' style={backgroundImage} />
{/* swiper */}
<View className="detail-swiper-container">
<View className="detail-swiper-scroll-container">
{
detail?.image_list?.length > 0 && detail?.image_list.map((item, index) => {
return (
<View className='detail-swiper-item' key={index}>
<Image
src={item}
mode="aspectFill"
className='detail-swiper-item-image'
/>
</View>
)
})
}
</View>
</View>
<Coursel detail={detail} />
{/* content */}
<View className='detail-page-content'>
{/* avatar and tags */}
<View className='detail-page-content-avatar-tags'>
<View className='detail-page-content-avatar-tags-avatar'>
{/* network image mock */}
<Image className='detail-page-content-avatar-tags-avatar-image' src="https://img.yzcdn.cn/vant/cat.jpeg" />
</View>
<View className='detail-page-content-avatar-tags-tags'>
{tags.map((tag, index) => (
<View key={index} className='detail-page-content-avatar-tags-tags-tag'>
{tag.icon && <Image src={tag.icon} />}
<Text>{tag.name}</Text>
</View>
))}
</View>
</View>
<GameTags detail={detail} />
{/* title */}
<View className='detail-page-content-title'>
<Text className='detail-page-content-title-text'>{detail.title}</Text>

3
src/pages/publishBall/components/SelectStadium/StadiumDetail.tsx
View File

@@ -230,8 +230,9 @@ const StadiumDetail = forwardRef<StadiumDetailRef, StadiumDetailProps>(({
}
}}
maxCount={9}
source={['album', 'history', 'preset']}
source={['album', 'history']}
align='left'
tag="screenshot"
/>
</SectionContainer>
)

4
src/services/publishService.ts
View File

@@ -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: [],
},