139 lines
5.5 KiB
TypeScript
139 lines
5.5 KiB
TypeScript
|
||
import { Image, RichText, Swiper, SwiperItem, View } from '@tarojs/components'
|
||
import Taro from '@tarojs/taro';
|
||
import classnames from "classnames";
|
||
import DesSwiper from './components/swiper';
|
||
import OrderCount from './components/orderCount';
|
||
import ShopCart from '@/components/shopCart';
|
||
import Preview,{colorItem} from './components/preview';
|
||
import styles from './index.module.scss'
|
||
import { useMemo, useState } from 'react';
|
||
type item = {title:string, img:string, url:string, id:number}
|
||
|
||
type params = {
|
||
list?: item[]
|
||
swiperOnClick?: (val: item) => void,
|
||
style?: Object
|
||
}
|
||
export default (props:params) => {
|
||
|
||
const list = [
|
||
{
|
||
title:'数据',
|
||
img:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F811%2F021315104H2%2F150213104H2-3-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1651817947&t=5467a207f845ddfc7737d55934e6b26d',
|
||
url:'',
|
||
id:1
|
||
},
|
||
{
|
||
title:'数据',
|
||
img:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F811%2F021315104H2%2F150213104H2-3-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1651817947&t=5467a207f845ddfc7737d55934e6b26d',
|
||
url:'',
|
||
id:2
|
||
}
|
||
]
|
||
|
||
const [showCart, setShowCart] = useState(false)
|
||
|
||
|
||
|
||
const [showOrderCount, setShowOrderCount] = useState(false)
|
||
// const showCartmemo = useMemo(() => {
|
||
// return showCart
|
||
// },[showCart])
|
||
|
||
const html = `<h1>这里是详情</h1>
|
||
<div style="font-size:13px">你好啊啊</div>
|
||
<img style="width:100%" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic24.nipic.com%2F20121021%2F10910884_100200815001_2.jpg&refer=http%3A%2F%2Fpic24.nipic.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1652257920&t=9353dda34f18ae2fe6803f3da35954bb">
|
||
`
|
||
|
||
const colorList = [
|
||
{
|
||
title:'#1',
|
||
img:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F811%2F021315104H2%2F150213104H2-3-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1651817947&t=5467a207f845ddfc7737d55934e6b26d',
|
||
url:'',
|
||
id:1
|
||
},
|
||
{
|
||
title:'#1',
|
||
img:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F811%2F021315104H2%2F150213104H2-3-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1651817947&t=5467a207f845ddfc7737d55934e6b26d',
|
||
url:'',
|
||
id:1
|
||
},
|
||
|
||
]
|
||
const [colorInfo, setColorInfo] = useState<colorItem>()
|
||
const [showPreview, setShowPreview] = useState(false)
|
||
const getColorItem = (item) => {
|
||
setColorInfo({
|
||
title: item.title,
|
||
img: item.img,
|
||
})
|
||
setShowPreview(true)
|
||
}
|
||
|
||
const [collectStatus, setCollectStatus] = useState(false)
|
||
const changeCollect = () => {
|
||
setCollectStatus(!collectStatus)
|
||
Taro.showToast({
|
||
title: '收藏成功',
|
||
icon: 'success',
|
||
duration: 2000
|
||
})
|
||
}
|
||
return (
|
||
<View className={styles.main}>
|
||
<DesSwiper list={list}/>
|
||
<View className={styles.product_header}>
|
||
<View className={styles.title}>
|
||
<View className={styles.name}>0770# 21S单面平纹(食毛)</View>
|
||
<View className={styles.des}>面料描述，疯狂描述。。。</View>
|
||
</View>
|
||
<View className={styles.share}>
|
||
<View className={classnames('iconfont icon-fenxiang', styles.miconfont)}></View>
|
||
<View className={styles.text}>分享</View>
|
||
</View>
|
||
<View className={styles.collect}>
|
||
<View className={classnames('iconfont icon-shoucang', styles.miconfont, collectStatus&&styles.collected)} onClick={() => changeCollect()}></View>
|
||
<View className={styles.text}>收藏</View>
|
||
</View>
|
||
</View>
|
||
<View className={styles.des_data}>
|
||
<View className={styles.title}>详情参数</View>
|
||
<View className={styles.con}>
|
||
<View>编号:0770</View>
|
||
<View>幅宽:160cm</View>
|
||
<View>克重:160g</View>
|
||
<View>成分:67.6%棉24%涤纶6.4%氨纶%氨纶</View>
|
||
</View>
|
||
</View>
|
||
<View className={styles.product_color}>
|
||
<View className={styles.title}>色号 (10)</View>
|
||
<View className={styles.list}>
|
||
{colorList.map(item => {
|
||
return <View className={styles.item} onClick={() => getColorItem(item)}>
|
||
<View className={styles.item_color}>
|
||
<Image src={item.img}></Image>
|
||
</View>
|
||
<View className={styles.item_name}>{item.title}</View>
|
||
</View>
|
||
})}
|
||
</View>
|
||
</View>
|
||
<View className={styles.product_detail}>
|
||
<RichText nodes={html}></RichText>
|
||
</View>
|
||
<View className={styles.product_buy}>
|
||
<View className={styles.buy_cart} onClick={() => setShowCart(true)}>
|
||
<View className={classnames('iconfont icon-gouwuche', styles.miconfont)}></View>
|
||
<View className={styles.text}>购物车</View>
|
||
</View>
|
||
<View className={styles.buy_btn} onClick={() => setShowOrderCount(true)}>开始下单</View>
|
||
</View>
|
||
<OrderCount show={showOrderCount} onClose={() => setShowOrderCount(false)}/>
|
||
<ShopCart show={showCart} onClose={() => setShowCart(false)}/>
|
||
<Preview value={colorInfo} show={showPreview} onClose={() => setShowPreview(false)}/>
|
||
<View className='common_safe_area_y'></View>
|
||
</View>
|
||
)
|
||
}
|