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