king
1 year ago
parent
8c53f17917
commit
c7c99d6730
@ -1,4 +0,0 @@ |
||||
export default definePageConfig({ |
||||
navigationBarTitleText: '文章详情', |
||||
onReachBottomDistance: 30 |
||||
}) |
||||
@ -1,28 +0,0 @@ |
||||
import {FC, useEffect, useState} from "react"; |
||||
import {View} from "@tarojs/components"; |
||||
import Taro, {useRouter} from "@tarojs/taro"; |
||||
import {ArticleRecord, brandApi} from "@/api"; |
||||
|
||||
|
||||
const article:FC = () => { |
||||
const {id} = useRouter().params as unknown as { id: number} |
||||
const [articleInfo,setArticleInfo] = useState<ArticleRecord>() |
||||
useEffect(() => { |
||||
getData() |
||||
}, [id]) |
||||
|
||||
const getData = async () => { |
||||
try { |
||||
const data = await brandApi.articleInfo(id) |
||||
Taro.setNavigationBarTitle({title:data.title}) |
||||
setArticleInfo(data) |
||||
} catch (e) { |
||||
} |
||||
} |
||||
function helloWorld() { |
||||
const html = articleInfo?.content; |
||||
return <View dangerouslySetInnerHTML={{ __html: html! }}></View> |
||||
} |
||||
return helloWorld() |
||||
} |
||||
export default article |
||||
@ -1,4 +0,0 @@ |
||||
export default definePageConfig({ |
||||
navigationBarTitleText: '', |
||||
onReachBottomDistance: 30 |
||||
}) |
||||
@ -1,65 +0,0 @@ |
||||
.swiper{ |
||||
width:750rpx; |
||||
height:600rpx; |
||||
background-color: pink; |
||||
} |
||||
.body{ |
||||
border-radius: 32rpx 32rpx 0 0; |
||||
background-color:cadetblue; |
||||
width: 750rpx; |
||||
box-sizing: border-box; |
||||
display: flex; |
||||
flex-direction: column; |
||||
min-height: 80vh; |
||||
position: absolute; |
||||
top: 520rpx; |
||||
.top{ |
||||
padding:40rpx 30rpx 30rpx 30rpx; |
||||
border-radius: 32rpx; |
||||
background-color: #fff; |
||||
.title{ |
||||
font-size: 32rpx; |
||||
font-weight: bold; |
||||
color: #323635; |
||||
line-height:44rpx; |
||||
} |
||||
} |
||||
.bottom{ |
||||
margin-top: 20rpx; |
||||
flex:1; |
||||
background-color: #fff; |
||||
border-radius: 32rpx 32rpx 0 0; |
||||
width: 100%; |
||||
.box { |
||||
display: flex; |
||||
background-color: #fff; |
||||
border-radius: 16rpx; |
||||
padding: 30rpx; |
||||
box-sizing: border-box; |
||||
} |
||||
.inner{ |
||||
flex:1; |
||||
display: flex; |
||||
padding-bottom: 24rpx; |
||||
border-bottom: 2rpx solid #F5F8F7; |
||||
.image{ |
||||
width: 172rpx; |
||||
height:128rpx; |
||||
background-color: pink; |
||||
border-radius: 8rpx; |
||||
} |
||||
.leftBox{ |
||||
padding-right: 24rpx; |
||||
box-sizing: border-box; |
||||
flex: 1; |
||||
} |
||||
.desc{ |
||||
font-size: 22rpx; |
||||
font-weight: 500; |
||||
color: #909795; |
||||
line-height: 32rpx |
||||
} |
||||
} |
||||
|
||||
} |
||||
} |
||||
@ -1,96 +0,0 @@ |
||||
import {FC, useCallback, useEffect, useState} from "react"; |
||||
import {Image, Swiper, SwiperItem, Text, Video, View} from "@tarojs/components"; |
||||
import {ArticleRecord, brandApi, BrandRecord} from "@/api"; |
||||
import styles from './info.module.scss' |
||||
import Taro, {useRouter} from "@tarojs/taro"; |
||||
import LineEllipsis from "@/components/textCollapse/collapse"; |
||||
import Empty from "@/components/empty/empty"; |
||||
|
||||
type Params = { |
||||
id: number |
||||
} |
||||
const BrandInfo: FC = () => { |
||||
const {id} = useRouter().params as unknown as Params |
||||
const [brandInfo, setBrandInfo] = useState<BrandRecord>() |
||||
const [articleList,setArticleList] = useState<ArticleRecord[]>() |
||||
|
||||
useEffect(() => { |
||||
getData() |
||||
}, [id]) |
||||
|
||||
const getData = async () => { |
||||
try { |
||||
const data = await brandApi.info(id) |
||||
Taro.setNavigationBarTitle({title:data.name}) |
||||
setBrandInfo(data) |
||||
const data1 = await brandApi.articleList(id) |
||||
setArticleList(data1.list) |
||||
} catch (e) { |
||||
// setBrandInfo({disabled: 0, graphic_introduction: "", id: 0, introductory_video: "", name: "", brand_album:['1','2','3']})
|
||||
} |
||||
} |
||||
|
||||
|
||||
return ( |
||||
<View className='flex flex-column '> |
||||
{ |
||||
<Swiper |
||||
className={styles['swiper']} |
||||
indicatorColor='#999' |
||||
indicatorActiveColor='#333' |
||||
indicatorDots |
||||
> |
||||
<SwiperItem> |
||||
<Video |
||||
style={{width: '750rpx', height: '600rpx'}} |
||||
playBtnPosition={"center"} |
||||
id='video' |
||||
src={brandInfo?.introductory_video_resource?.url} |
||||
initialTime={0} |
||||
controls={true} |
||||
enableProgressGesture={false} |
||||
showFullscreenBtn={false} |
||||
autoplay={false} |
||||
loop={false} |
||||
muted={false} |
||||
/> |
||||
</SwiperItem>) |
||||
{ brandInfo?.brand_album?.length |
||||
&& brandInfo?.brand_album.map((d) => |
||||
<SwiperItem> |
||||
<Image src={d}></Image> |
||||
</SwiperItem>) |
||||
} |
||||
</Swiper> |
||||
|
||||
} |
||||
<View className={styles['body']}> |
||||
<View className={styles['top']}> |
||||
<Text className={styles['title']}>{brandInfo?.name}</Text> |
||||
<LineEllipsis text={brandInfo?.graphic_introduction}></LineEllipsis> |
||||
</View> |
||||
<View className={styles['bottom']}> |
||||
{ |
||||
articleList?.length ? |
||||
articleList.map((i)=> |
||||
<View className={styles.box} onClick={()=>{Taro.navigateTo({url: `/pages/brand/article/article?id=${i.id}`})}}> |
||||
<View className={styles.inner}> |
||||
<View className={styles.leftBox}> |
||||
<View className='font-weight mb-2 font-28 lh-40'>{i.title}</View> |
||||
<View className={styles.desc}>{i.created_at} {i.page_view}阅读</View> |
||||
</View> |
||||
{/*<Image mode='aspectFill' className={styles.image} src={'dd'}/>*/} |
||||
</View> |
||||
</View> |
||||
|
||||
) |
||||
: <Empty name='空空如也'/> |
||||
} |
||||
|
||||
</View> |
||||
</View> |
||||
</View> |
||||
); |
||||
} |
||||
|
||||
export default BrandInfo |
||||
@ -1,4 +0,0 @@ |
||||
export default definePageConfig({ |
||||
navigationBarTitleText: '品牌列表', |
||||
onReachBottomDistance: 30 |
||||
}) |
||||
@ -1,32 +0,0 @@ |
||||
.box { |
||||
display: flex; |
||||
margin-bottom: 20rpx; |
||||
background-color: #fff; |
||||
border-radius: 16rpx; |
||||
padding: 24rpx; |
||||
box-sizing: border-box; |
||||
} |
||||
.image{ |
||||
width: 128rpx; |
||||
height:128rpx; |
||||
background-color: pink; |
||||
border-radius: 8rpx; |
||||
} |
||||
.rightBox{ |
||||
padding-left: 24rpx; |
||||
box-sizing: border-box; |
||||
flex: 1; |
||||
} |
||||
.desc{ |
||||
font-size: 24rpx; |
||||
font-weight: 500; |
||||
color: #909795; |
||||
line-height: 34rpx; |
||||
display: -webkit-box; |
||||
word-break: break-all; |
||||
text-overflow: ellipsis; |
||||
overflow: hidden; |
||||
-webkit-box-orient:vertical; |
||||
-webkit-line-clamp:2; |
||||
} |
||||
|
||||
@ -1,58 +0,0 @@ |
||||
import {FC, useCallback, useEffect, useState} from "react"; |
||||
import {Image, View} from "@tarojs/components"; |
||||
import {brandApi, BrandRecord} from "@/api"; |
||||
import styles from './list.module.scss' |
||||
import Taro, {useReachBottom} from "@tarojs/taro"; |
||||
import Empty from "@/components/empty/empty"; |
||||
|
||||
const BrandList: FC = () => { |
||||
const [page, setPage] = useState(1) |
||||
const [brands, setBrands] = useState<BrandRecord[]>([]) |
||||
const [total, setTotal] = useState(0) |
||||
|
||||
useEffect(() => { |
||||
getData() |
||||
}, [page]) |
||||
|
||||
const getData = useCallback( async () => { |
||||
try { |
||||
const res = await brandApi.list(1, 10) |
||||
setTotal(res.total) |
||||
setBrands([ |
||||
...res.data |
||||
]) |
||||
} catch (e) { |
||||
} |
||||
}, [page]) |
||||
|
||||
|
||||
function jumpInfo(id: number) { |
||||
Taro.navigateTo({url: `/pages/brand/info/info?id=${id}`}) |
||||
} |
||||
|
||||
useReachBottom(useCallback(() => { |
||||
if (brands?.length < total) { |
||||
setPage(page + 1) |
||||
} |
||||
}, [total, brands])) |
||||
|
||||
|
||||
|
||||
return ( |
||||
<View className='p-2'> |
||||
{ |
||||
brands.length ? brands.map((d) => |
||||
<View onClick={() => jumpInfo(d.id)} className={styles.box} key={d.id}> |
||||
<Image src={d.brand_album?.[0]} mode='aspectFill' className={styles.image}/> |
||||
<View className={styles.rightBox}> |
||||
<View className='font-weight mb-2 font-28'>{d.name}</View> |
||||
<View className={styles.desc}>{d.graphic_introduction.repeat(30)}</View> |
||||
</View> |
||||
</View>) |
||||
: <Empty name='空空如也'/> |
||||
} |
||||
</View> |
||||
) |
||||
} |
||||
|
||||
export default BrandList |
||||
Loading…
Reference in new issue