xuan/TestEShopDist
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

下单功能基本完成

Browse Source
This commit is contained in:
cheng
2022-04-14 14:14:09 +08:00
parent 63e1e66a63
commit 9350978491
17 changed files with 185 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/details/components/preview/index.module.scss
+36
View File
@@ -0,0 +1,36 @@
.main{
position: fixed;
width: 100vw;
height: 100vh;
top: 0;
left: 0;
background-color: rgba(0,0,0, 0.8);
display: flex;
justify-content: center;
align-items: flex-start;
.con{
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
width: 100%;
margin-top: 200px;
image{
width:100%;
border-radius: 10px;
}
.name {
width: 488px;
height: 72px;
color: #fff;
text-align: center;
font-size: 26px;
border-radius: 20px;
line-height: 72px;
margin-top: 10px;
background-color: rgba(0,0,0, 0.5);
padding: 0 10px;
@include common_ellipsis
}
}
}
src/pages/details/components/preview/index.tsx
+24
View File
@@ -0,0 +1,24 @@
import { Image, View } from "@tarojs/components"
import styles from './index.module.scss'
export type colorItem = {
title: string,
img: string
}
export type colorParams = {
value?: colorItem,
show?: false|true
onClose?: () => void
}
export default ({value, show = false, onClose}: colorParams) => {
return (
<>
{show&&<View className={styles.main} catch-move="true" onClick={() => onClose?.()}>
<View className={styles.con}>
<Image mode="aspectFill" src={value?.img as string}/>
<View className={styles.name}>{value?.title}</View>
</View>
</View>}
</>
)
}
src/pages/details/components/shopCart/index.module.scss
+12 -2
View File
@@ -67,13 +67,11 @@
}
}
.product_color_con{
flex:1;
height: 0;
padding-bottom:151px;
}
.color_con{
.item {
display: flex;
justify-content: space-between;
@@ -130,6 +128,15 @@
}
}
}
.noData{
width:100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
color: $color_font_three;
font-size: $font_size_medium;
}
.buy_btn{
width: 100%;
padding: 0 40px;
@@ -156,6 +163,9 @@
line-height: 90px;
border-radius: 50px;
color: #fff;
background: linear-gradient(38deg,#5cabff, #7cbcfc 100%, #99ccff 100%);
}
.select_add_cart{
background: linear-gradient(38deg,#007aff, #4fa6ff 100%, #68b4ff 100%);
}
}
src/pages/details/components/shopCart/index.tsx
+9 -6
View File
@@ -7,13 +7,13 @@ import Counter from "../counter";
import Big from 'big.js'
import classnames from "classnames";
import styles from "./index.module.scss"
import { useEffect, useState } from "react";
import { memo, useEffect, useState } from "react";
type param = {
show?: true|false,
onClose?: () => void
}
export default ({show = false, onClose}: param) => {
export default memo(({show = false, onClose}: param) => {
const selectList = [
{step:1, digits:2, title:'剪板', unit:'米'},
{step:1, digits:2, title:'散剪', unit:'米'},
@@ -27,6 +27,8 @@ export default ({show = false, onClose}: param) => {
const [list, setList] = useState<any[]>([])
const [loading, setLoading] = useState(false)
console.log('执行执行')
useEffect(() => {
let lists:any[] = []
for(let i = 0; i < 20; i++) {
@@ -114,7 +116,7 @@ export default ({show = false, onClose}: param) => {
<View className={classnames('iconfont icon-sousuo', styles.miconfont)} onClick={() => changeSearchShow()}></View>
</View>
<View className={styles.product_color_con}>
<InfiniteScroll>
{list.length > 0&&<InfiniteScroll>
<View className={styles.color_con}>
{list.map(item => {
return <View className={styles.item}>
@@ -141,12 +143,13 @@ export default ({show = false, onClose}: param) => {
</View>
})}
</View>
</InfiniteScroll>
</InfiniteScroll>||
<View className={styles.noData}>暂无此商品</View>}
</View>
<View className={styles.buy_btn}>
<View className={styles.buy_btn_con}>
<View className={styles.count}>当前已选{selectCount.kindCount}种，共{selectCount.sumCount}{selectList[selectIndex].unit}</View>
<View className={styles.add_cart}>加入购物车</View>
<View className={classnames(styles.add_cart, selectCount.kindCount&&styles.select_add_cart)}>加入购物车</View>
</View>
</View>
</View>
@@ -154,4 +157,4 @@ export default ({show = false, onClose}: param) => {
</Popup>
</View>
)
}
})
src/pages/details/index.module.scss
+11 -2
View File
@@ -30,10 +30,14 @@
color: $color_font_three;
.text{
margin-top: 10px;
font-size: $font_size_medium;
}
}
.miconfont{
font-size: 27px;
font-size: 36px;
}
.collected{
color: #FFC300;
}
}
.des_data{
@@ -66,7 +70,7 @@
.list{
margin-top: 30px;
display: grid;
grid-template-columns: auto auto auto ;
grid-template-columns: 210px 210px 210px ;
justify-content: space-between;
.item {
width:210px;
@@ -76,6 +80,11 @@
height: 210px;
background-color: red;
border-radius: 20px;
image{
width: 100%;
height: 100%;
border-radius: 20px;
}
}
.item_name{
text-align: center;
src/pages/details/index.tsx
+53 -10
View File
@@ -5,8 +5,9 @@ import classnames from "classnames";
import DesSwiper from './components/swiper';
import OrderCount from './components/shopCart';
import ShopCart from '@/components/shopCart';
import Preview,{colorItem} from './components/preview';
import styles from './index.module.scss'
import { useState } from 'react';
import { useMemo, useState } from 'react';
type item = {title:string, img:string, url:string, id:number}
type params = {
@@ -32,12 +33,53 @@ export default (props:params) => {
]
const [showCart, setShowCart] = useState(false)
const [showOrderCount, setShowOrderCount] = useState(true)
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}/>
@@ -47,11 +89,11 @@ export default (props:params) => {
<View className={styles.des}>面料描述，疯狂描述。。。</View>
</View>
<View className={styles.share}>
<View className={classnames('iconfont icon-sousuo', styles.miconfont)}></View>
<View className={classnames('iconfont icon-fenxiang', styles.miconfont)}></View>
<View className={styles.text}>分享</View>
</View>
<View className={styles.collect}>
<View className={classnames('iconfont icon-sousuo', styles.miconfont)}></View>
<View className={classnames('iconfont icon-shoucang', styles.miconfont, collectStatus&&styles.collected)} onClick={() => changeCollect()}></View>
<View className={styles.text}>收藏</View>
</View>
</View>
@@ -67,12 +109,12 @@ export default (props:params) => {
<View className={styles.product_color}>
<View className={styles.title}>色号 (10)</View>
<View className={styles.list}>
{new Array(10).fill('').map(item => {
return <View className={styles.item}>
{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}>1#</View>
<View className={styles.item_name}>{item.title}</View>
</View>
})}
</View>
@@ -81,14 +123,15 @@ export default (props:params) => {
<RichText nodes={html}></RichText>
</View>
<View className={styles.product_buy}>
<View className={styles.buy_cart}>
<View className={styles.buy_cart} onClick={() => setShowCart(true)}>
<View className={classnames('iconfont icon-gouwuche', styles.miconfont)}></View>
<View className={styles.text} onClick={() => setShowCart(true)}>购物车</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>
)