首页图片组件封装

v2
一杯沧海 1 year ago
parent d44f3eb15c
commit 26fbcc475a
  1. 2
      src/pages/home/components/feature_recommended.tsx
  2. 2
      src/pages/preview/brand/info/info.module.scss
  3. 8
      src/pages/preview/brand/info/info.tsx
  4. 3
      src/pages/preview/illness/article/article.tsx
  5. 48
      src/utils/day.ts

@ -116,7 +116,7 @@ const FeatureRecommended: FC<Props> = (props) => {
return props.illness.map<DataContent>(d => ({ return props.illness.map<DataContent>(d => ({
id: d.id, id: d.id,
imageUrl: '', imageUrl: '',
description: d.description?.replace(/[^\u4e00-\u9fa5]/gi,"") ?? '暂无描述', description: d.description || '暂无简介',
title: d.name, title: d.name,
path: `?id=${d.id}` path: `?id=${d.id}`
})) }))

@ -55,7 +55,7 @@ page{
.image{ .image{
width: 172rpx; width: 172rpx;
height:128rpx; height:128rpx;
background-color: pink; background-color: #eee;
border-radius: 8rpx; border-radius: 8rpx;
} }
.leftBox{ .leftBox{

@ -5,6 +5,8 @@ import styles from './info.module.scss'
import Taro, {useReachBottom, useRouter} from "@tarojs/taro"; import Taro, {useReachBottom, useRouter} from "@tarojs/taro";
import LineEllipsis from "@/components/textCollapse/collapse"; import LineEllipsis from "@/components/textCollapse/collapse";
import Empty from "@/components/empty/empty"; import Empty from "@/components/empty/empty";
import Img from "@/components/image/image";
import {rfc33392time} from "@/utils/day";
type Params = { type Params = {
id: number id: number
@ -116,9 +118,11 @@ const BrandInfo: FC = () => {
<View className={styles.inner}> <View className={styles.inner}>
<View className={styles.leftBox}> <View className={styles.leftBox}>
<View className='font-weight mb-2 font-28 lh-40'>{i.title}</View> <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 className={styles.desc}>{rfc33392time(i.created_at)} {i.page_view}</View>
</View>
<View className={styles.image}>
<Img width={172} height={128} src={'dd'}/>
</View> </View>
{/*<Image mode='aspectFill' className={styles.image} src={'dd'}/>*/}
</View> </View>
</View> </View>
) )

@ -1,4 +1,4 @@
import {FC, useEffect, useMemo, useState} from "react"; import {FC, useEffect, useMemo, useRef, useState} from "react";
import {Image, PageContainer, Text, View} from "@tarojs/components"; import {Image, PageContainer, Text, View} from "@tarojs/components";
import Taro, {useRouter} from "@tarojs/taro"; import Taro, {useRouter} from "@tarojs/taro";
import {ArticleRecord, brandApi} from "@/api"; import {ArticleRecord, brandApi} from "@/api";
@ -13,6 +13,7 @@ const article:FC = () => {
const [show,setShow] = useState(false) const [show,setShow] = useState(false)
const [articleInfo,setArticleInfo] = useState<ArticleRecord>() const [articleInfo,setArticleInfo] = useState<ArticleRecord>()
const { children, headings } = useMemo(() => parse(articleInfo?.content || ''), [articleInfo]) const { children, headings } = useMemo(() => parse(articleInfo?.content || ''), [articleInfo])
const query = Taro.createSelectorQuery() const query = Taro.createSelectorQuery()

@ -0,0 +1,48 @@
/**
* RFC3339
*
* ```js
* rfc33392time('2020-07-31T14:27:10.035542+08:00')
* // 2020-07-31 14:28:12
* ```
*
* @param {string} dateStr RFC3339
* @returns {string}
*/
export const rfc33392time = (dateStr: string): string => {
const date = new Date(dateStr).toJSON()
return (new Date(+new Date(date) + 8 * 3600 * 1000))
.toISOString()
.replace(/T/g, ' ')
.replace(/\.[\d]{3}Z/, '')
}
const TIME_OFFSET = (() => {
const info = (new Date().toString()).match(/GMT\+(\d{2})(\d{2})/)
return `+${info![1]} : ${info![2]}`
})()
/**
* RFC3339
*
* ```js
* time2rfc3339('2020-07-31 14:28:12')
* // 2020-07-31T14:27:10.035542+08:00
* ```
*
* @param {string} date
* @returns {string} RFC3339
*/
export function time2rfc3339(date: string) {
const time = new Date(date)
const y = time.getFullYear()
const m = time.getMonth() + 1 < 10 ? `0${time.getMonth() + 1}` : (time.getMonth() + 1)
const d = time.getDate() < 10 ? `0${time.getDate()}` : time.getDate()
const hh = time.getHours() < 10 ? `0${time.getHours()}` : time.getHours()
const mm = time.getMinutes() < 10 ? `0${time.getMinutes()}` : time.getMinutes()
const ss = time.getSeconds() < 10 ? `0${time.getSeconds()}` : time.getSeconds()
// const endDate = y + '-' + m + '-' + d + ' ' + hh + ':' + mm + ':' + ss
// endDate = endDate.replace(/\s+/g, 'T') + '+08:00'
// return endDate
return `${y}-${m}-${d}T${hh}:${mm}:${ss}${TIME_OFFSET}`
}
Loading…
Cancel
Save