113 lines
3.1 KiB
JavaScript
113 lines
3.1 KiB
JavaScript
import React from 'react'
|
|
import { Image, Swiper, SwiperItem, Text, View } from '@tarojs/components'
|
|
// import { Swiper, SwiperItem } from '@nutui/nutui-react-taro';
|
|
import './index.scss'
|
|
import TabbarAction from '@/components/action';
|
|
import { Infiniteloading } from '@nutui/nutui-react-taro';
|
|
import { useEffect } from 'react';
|
|
import { useState } from 'react';
|
|
import backNav from '@/images/backNav.png'
|
|
import Taro from '@tarojs/taro';
|
|
import { useRouter } from '@tarojs/taro';
|
|
import { useDidShow } from '@tarojs/taro';
|
|
import { Button } from '@nutui/nutui-react-taro';
|
|
|
|
|
|
|
|
function Index() {
|
|
|
|
const param = useRouter().params
|
|
const [id] = useState(param.id)
|
|
|
|
const [swiperProgress, setSwiperProgress] = useState(1)
|
|
const list = [
|
|
'https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg',
|
|
'https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg',
|
|
'https://storage.360buyimg.com/jdc-article/welcomenutui.jpg'
|
|
]
|
|
|
|
useDidShow(() => {
|
|
console.log(12)
|
|
|
|
})
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
|
|
}, [id])
|
|
|
|
|
|
|
|
|
|
// 跳转
|
|
const navDetailFn = () => {
|
|
Taro.navigateTo({
|
|
url: `/pages/settle/index?id=${id}`
|
|
})
|
|
}
|
|
// 返回页面
|
|
const backFn = () => {
|
|
Taro.getCurrentPages().length > 0 && Taro.navigateBack()
|
|
}
|
|
|
|
return (
|
|
<View className='home-container'>
|
|
<View className='goods-detail-title'>
|
|
<Image src={backNav} className="square-35 absolute left-10 " onClick={backFn} />
|
|
商品详情
|
|
</View>
|
|
|
|
<View className='goods-body' catchMove>
|
|
<View catchMove className='relative'>
|
|
<Swiper
|
|
loop={true}
|
|
current={0}
|
|
autoplay={true}
|
|
className='goods-swiper'
|
|
interval={3000}
|
|
circular
|
|
indicatorActiveColor='#F67952'
|
|
displayMultipleItems={1}
|
|
adjustHeight
|
|
onChange={(e) => {
|
|
setSwiperProgress(x => x % 3 + 1)
|
|
}}
|
|
>
|
|
{list.map((item) => {
|
|
return (
|
|
<SwiperItem key={item} className='goods-swiper-item'>
|
|
<Image src={item} alt="" />
|
|
</SwiperItem>
|
|
)
|
|
})}
|
|
</Swiper>
|
|
<View className='goods-swiper-progress'>
|
|
<View style={{ backgroundColor: '#F67952', height: '100%', width: list.length ? ((swiperProgress / list.length) > 1 ? 1 : (swiperProgress / list.length)) * 100 + '%' : 0 }}></View>
|
|
</View>
|
|
</View>
|
|
<View className='goods-content'>
|
|
<View className='line-clamp-2 goods-name'>
|
|
银美孚1号 全合成油5w全合成油 5W-30 SN级 4L
|
|
</View>
|
|
<View className='goods-desc line-clamp-2'>
|
|
<View>规格</View>
|
|
</View>
|
|
<View className='goods-item-price'>
|
|
<Text className='goods-item-price-sale'>¥199</Text>
|
|
<Text className='goods-item-price-origin'>原价888</Text>
|
|
</View>
|
|
|
|
<View className='goods-content-box'>
|
|
图文内容专区
|
|
</View>
|
|
</View>
|
|
</View>
|
|
<Button className='buy-btn' onClick={navDetailFn}>立即购买</Button>
|
|
</View>
|
|
)
|
|
}
|
|
|
|
export default Index
|