parent
39aa8c808c
commit
ed2c5aedb0
@ -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,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