区分文章品牌和疾病header和样式

v2
king 1 year ago
parent bc0682351e
commit d52902def3
  1. 5
      src/api/brand.ts
  2. 13
      src/api/illness.ts
  3. 6
      src/components/collect/collect.module.scss
  4. 4
      src/components/collect/collect.tsx
  5. 6
      src/pages/preview/brand/article/article.module.scss
  6. 39
      src/pages/preview/brand/article/article.tsx
  7. 9
      src/pages/preview/search/search/components/list.tsx

@ -1,4 +1,5 @@
import {request} from "@/api/request"; import {request} from "@/api/request";
import {Illness} from "@/api/illness";
export type BrandRecord = { export type BrandRecord = {
logo: string; logo: string;
@ -21,8 +22,10 @@ export type ArticleRecord = {
created_at: string created_at: string
content: string content: string
brands: BrandRecord[] brands: BrandRecord[]
illness: Illness[]
collect: boolean collect: boolean
cover:string cover: string
owner_type: 1 | 2 // 疾病
} }
export const brandApi = { export const brandApi = {

@ -1,5 +1,16 @@
import {request} from "@/api/request"; import {request} from "@/api/request";
export interface Illness {
name: string;
description: string;
resource: any;
album: string[]
created_at:string
list: {
list: any[],
total: number
}
}
export const illnessApi = { export const illnessApi = {
/** 疾病列表 */ /** 疾病列表 */
@ -7,7 +18,7 @@ export const illnessApi = {
return request<{ list: any[], total: number }>(`/home/v1/illness/list`, "GET", {page, page_size, id}) return request<{ list: any[], total: number }>(`/home/v1/illness/list`, "GET", {page, page_size, id})
}, },
articleInfo(owner_id: number, page: number, page_size: number) { articleInfo(owner_id: number, page: number, page_size: number) {
return request<{ illness:{name:string;description:string;resource:any;album:string[]};list:{list: any[], total: number} }> return request<{ illness: Illness }>
(`/home/v1/article/illness_list`, "GET", {page, page_size, owner_id}) (`/home/v1/article/illness_list`, "GET", {page, page_size, owner_id})
}, },
} }

@ -20,14 +20,16 @@
} }
.zoom { .zoom {
top: 0; //top: 0;
left: 0; //left: 0;
position: absolute; position: absolute;
content: ''; content: '';
width: 32rpx; width: 32rpx;
height: 32rpx; height: 32rpx;
border-radius: 50%; border-radius: 50%;
border: 1px solid #FF9E5F; border: 1px solid #FF9E5F;
padding: 0 !important;
margin: 0 !important;
animation: Zooms 300ms ease forwards; animation: Zooms 300ms ease forwards;
opacity: 1; opacity: 1;
transform-origin: -100%, -100% 0; transform-origin: -100%, -100% 0;

@ -35,11 +35,9 @@ const Collect: FC<Props> = (props) => {
} }
if (loading) return; if (loading) return;
props.onClick?.() props.onClick?.()
console.log(select) await userApi.create({owner_id: props.owner_id, owner_type: props.owner_type})
setSelect(!select) setSelect(!select)
setLoading(true) setLoading(true)
// fixme: 动画逻辑不对,应该是先 loading, 然后只有操作成功之后才是 select 动画
await userApi.create({owner_id: props.owner_id, owner_type: props.owner_type})
props.onUpdate?.(!select) props.onUpdate?.(!select)
setTimeout(() => { setTimeout(() => {
setLoading(false) setLoading(false)

@ -54,12 +54,6 @@ page{
align-items: center; align-items: center;
background: #F5F8F7; background: #F5F8F7;
color: #909795; color: #909795;
View {
font-size: 26rpx;
padding: 0 10px;
text-align: center;
}
} }
.article { .article {

@ -97,9 +97,10 @@ const article: FC = () => {
onUpdate={onCollect} onUpdate={onCollect}
/> />
</View> </View>
<View className='flex flex-column justify-center align-center' onClick={() => setShow(true)}> <View className='flex flex-column justify-center align-center text-center px-10'
<Image src={catalogue} mode='widthFix' style={{width: '40rpx', height: '40rpx'}}/> onClick={() => setShow(true)}>
<View></View> <Image src={catalogue} mode='widthFix' style={{width: '36rpx', height: '36rpx', marginBottom: '8rpx'}}/>
<View className='font-26'></View>
</View> </View>
</View> </View>
} }
@ -110,12 +111,12 @@ const article: FC = () => {
style={{ style={{
height: !token ? globalData.pageHeight - 60 + 'px' : 'auto', height: !token ? globalData.pageHeight - 60 + 'px' : 'auto',
overflow: !token ? 'hidden' : 'auto', overflow: !token ? 'hidden' : 'auto',
boxSizing:'border-box' boxSizing: 'border-box'
}}> }}>
<View id="childrenNode"> <View id="childrenNode">
<View className={styles.articleTitle}>{articleInfo?.title}</View> <View className={styles.articleTitle}>{articleInfo?.title}</View>
{ {
articleInfo?.brands?.map(d => ( articleInfo?.owner_type === 1 && articleInfo?.brands?.map(d => (
<View className='flex align-center mb-4'> <View className='flex align-center mb-4'>
<View className={`${styles.article} flex-1`}> <View className={`${styles.article} flex-1`}>
<Img src={d.logo} width={80} height={80} className={styles.articleImag} errorType='avatar'/> <Img src={d.logo} width={80} height={80} className={styles.articleImag} errorType='avatar'/>
@ -141,6 +142,34 @@ const article: FC = () => {
</View> </View>
)) ))
} }
{
articleInfo?.owner_type === 2 && articleInfo?.illness?.map(d => (
<View className='flex align-center mb-4'>
<View className={`${styles.article} flex-1`}>
<Img src={''} width={80} height={80} className={styles.articleImag} errorType='health'/>
<View className='ml-2'>
<View>{d?.name}</View>
<View className='flex mt-1 text-muted font-24'>
<View className='mr-2'>{beforeTime(articleInfo?.created_at)} . </View>
<View> {articleInfo.page_view || 1}</View>
</View>
</View>
</View>
<View className='ml-2'>
<Collect
select={articleInfo?.collect}
styles={{flexDirection: 'column', justifyContent: 'center', padding: '20rpx'}}
stylesImage={{margin: '0 0 8rpx 0'}}
owner_id={Number(id)}
owner_type={1}
textHidden
onUpdate={onCollect}
/>
</View>
</View>
))
}
{ {
children.length > 0 children.length > 0
? <View>{children}</View> ? <View>{children}</View>

@ -5,9 +5,9 @@ import Taro from "@tarojs/taro";
import Empty from "@/components/empty/empty"; import Empty from "@/components/empty/empty";
import Img from "@/components/image/image"; import Img from "@/components/image/image";
import {SearchApi} from "@/api/search"; import {SearchApi} from "@/api/search";
import {AtLoadMore} from 'taro-ui'
import {rfc33392time} from "@/utils/day"; import {rfc33392time} from "@/utils/day";
import play from "@/static/img/play-back.png"; import play from "@/static/img/play-back.png";
import Spin from "@/components/spinner";
type Props = { type Props = {
name: string name: string
@ -95,10 +95,9 @@ const SearchList: FC<Props> = ({name, clear}) => {
className='scrollview' className='scrollview'
scrollY scrollY
scrollWithAnimation scrollWithAnimation
style={{height: `${globalData.screenHeight - 140}px`, backgroundColor: `#f5f5f5`}} style={{height: `${globalData.screenHeight - 140}px`, backgroundColor: `#f5f5f5`, position: 'relative'}}
onScrollToLower={onScrollToLower} onScrollToLower={onScrollToLower}>
> <Spin enable={loading} block overlay/>
{loading && <AtLoadMore status={'loading'}/>}
{ {
brands.length >= 1 && !loading && brands.length >= 1 && !loading &&
<> <>

Loading…
Cancel
Save