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

面料详情

Browse Source
This commit is contained in:
czm 2022-04-12 16:50:05 +08:00 committed by li tong bao
parent 5ac3850c18
commit f59f641f5d
4 changed files with 163 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
src/pages/details/components/counter/index.module.scss Normal file
View File

@ -0,0 +1,34 @@
.main{
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
.reduce, .plus{
font-size: $font_size_big;
color: $color_main;
width: 60px;
height: 60px;
display: flex;
align-items: center;
justify-content:center;
font-size: 50px;
// flex:1;
}
.input{
display: flex;
align-items: flex-end;
background-color: #fff;
padding: 5px 10px;
box-sizing: border-box;
width: 106px;
}
input{
font-size: $font_size_medium;
}
.unit{
font-size: $font_size_min;
color: $color_font_two;
}
}

36
src/pages/details/components/counter/index.tsx Normal file
View File

@ -0,0 +1,36 @@
import { Input, View } from "@tarojs/components"
import { useRef, useState } from "react"
import styles from "./index.module.scss"
type params = {
minNum?: number,
maxNum?: number,
step?: number
}
export default ({minNum = 0, maxNum = 100, step=0.1}: params) => {
const [count, setCount] = useState(0)
const onPlus = () => {
let num = count + step
num = num >= maxNum?maxNum:num
setCount(num)
}
const minus = () => {
let num = count - step
num = num <= minNum?minNum:num
setCount(num)
}
return (
<View className={styles.main}>
<View className={styles.reduce} onClick={() => minus()}>-</View>
<View className={styles.input}>
<Input
value={String(count)}
onInput={() => {}}
onBlur={() => {}}
/>
<View className={styles.unit}>米</View>
</View>
<View className={styles.plus} onClick={() => onPlus()}>+</View>
</View>
)
}

57
src/pages/details/components/shopCart/index.module.scss
View File

@ -1,8 +1,8 @@
.shop_cart_main{
.popup_con{
height: 80vh;
display: flex;
flex-direction: column;
height: 80vh;
}
.header{
color: $color_font_one;
@ -10,6 +10,9 @@
font-weight: 700;
padding: 20px;
}
.colorFind{
padding: 10px 20px;
}
.search{
display: flex;
align-items: center;
@ -42,7 +45,7 @@
height: 51px;
}
}
.colorFind{
.colorNum{
display: flex;
justify-content: space-between;
padding: 20px;
@ -54,7 +57,14 @@
color: $color_font_two;
}
}
.product_color_con{
flex:1;
height: 0;
padding-bottom:151px;
}
.color_con{
.item {
display: flex;
justify-content: space-between;
@ -65,6 +75,11 @@
height: 156.5px;
border-radius: 20px;
background-color: red;
image{
width: 100%;
height: 100%;
border-radius: 20px;
}
}
.item_con{
flex:1;
@ -93,12 +108,48 @@
text-align: center;
line-height: 64px;
color: #fff;
padding: 10px;
box-sizing: border-box;
}
.btn_count{
width: 268px;
height: 64px;
background-color: #ECF5FF;
border-radius: 40px 0px 16px 0px;
padding: 0 20px;
display: flex;
align-items: center;
}
}
}
}
.buy_btn{
height: 151px;
width: 100%;
padding: 0 40px;
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
box-sizing: border-box;
position: fixed;
bottom:0;
font-size: $font_size_medium;
color: $color_font_two;
background-color: #fff;
box-shadow: 6px 0px 12px 0px rgba(0,0,0,0.16);
.buy_btn_con{
display: flex;
justify-content: space-between;
align-items: center;
height: 151px;
}
.add_cart{
width: 260px;
height: 90px;
font-size: $font_size_big;
text-align: center;
line-height: 90px;
border-radius: 50px;
color: #fff;
background: linear-gradient(38deg,#007aff, #4fa6ff 100%, #68b4ff 100%);
}
}
}

112
src/pages/details/components/shopCart/index.tsx
View File

@ -1,12 +1,13 @@
import {Image, ScrollView, View } from "@tarojs/components"
import Popup from "@/components/popup"
import classnames from "classnames";
import MCheckbox from "@/components/checkbox";
import LoadingCard from "@/components/loadingCard";
import InfiniteScroll from "@/components/infiniteScroll";
import styles from "./index.module.scss"
import { useEffect, useState } from "react";
import Taro from "@tarojs/taro";
import Search from "@/components/search";
import Counter from "../counter";
type param = {
show?: true|false,
@ -41,49 +42,21 @@ export default ({show = false, onClose}: param) => {
}, [show])
const [selectStatus, setSelectStatus] = useState(false)
const selectAll = () => {
list.map(item => {
item.select = !selectStatus
})
setSelectStatus(!selectStatus)
setList([...list])
}
//checkbox选中回调
const selectCallBack = (item) => {
item.select = true
setList([...list])
}
//checkbox关闭回调
const colseCallBack = (item) => {
item.select = false
setList([...list])
}
//popup关闭
const closePopup = () => {
onClose?.()
setShowPopup(false)
}
const delSelect = () => {
Taro.showModal({
content: '删除所选商品？',
success: function (res) {
if (res.confirm) {
Taro.showToast({
title: '成功',
icon: 'success',
duration: 2000
})
} else if (res.cancel) {
console.log('用户点击取消')
}
}
})
}
//已选择提示
const [selectCountMsg, setSelectCountMsg] = useState('')
useEffect(() => {
if(selectIndex == 2) {
setSelectCountMsg(`当前已选${1}种，共${1}米`)
} else {
setSelectCountMsg(`当前已选${1}种，共${1}条`)
}
},[selectIndex])
return (
<View className={styles.shop_cart_main}>
@ -99,50 +72,43 @@ export default ({show = false, onClose}: param) => {
</View>
</View>
<View className={styles.colorFind}>
<Search placeIcon="out" showBtn={true}/>
</View>
<View className={styles.colorNum}>
<View className={styles.title}>颜色分类 (13)</View>
<View className={classnames('iconfont icon-sousuo', styles.miconfont)}></View>
</View>
<View className={styles.color_con}>
<View className={styles.item}>
<View className={styles.item_color}></View>
<View className={styles.item_con}>
<View className={styles.title}>1#薄荷绿</View>
<View className={styles.num}>¥25.5/m</View>
<View className={styles.product_color_con}>
<InfiniteScroll>
<View className={styles.color_con}>
{new Array(10).fill('').map(item => {
return <View className={styles.item}>
<View className={styles.item_color}>
<Image src='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'/>
</View>
<View className={styles.item_con}>
<View className={styles.title}>1#薄荷绿</View>
<View className={styles.num}>¥25.5/m</View>
</View>
<View className={styles.btn_con}>
{/* <View className={styles.btn}>添加</View> */}
<View className={styles.btn_count}>
<Counter/>
</View>
</View>
</View>
})}
</View>
<View className={styles.btn_con}>
<View className={styles.btn}>添加</View>
</View>
</View>
<View className={styles.item}>
<View className={styles.item_color}></View>
<View className={styles.item_con}>
<View className={styles.title}>1#薄荷绿</View>
<View className={styles.num}>¥25.5/m</View>
</View>
<View className={styles.btn_con}>
<View className={styles.btn}>添加</View>
</View>
</View>
<View className={styles.item}>
<View className={styles.item_color}></View>
<View className={styles.item_con}>
<View className={styles.title}>1#薄荷绿</View>
<View className={styles.num}>¥25.5/m</View>
</View>
<View className={styles.btn_con}>
<View className={styles.btn}>添加</View>
</View>
</View>
</InfiniteScroll>
</View>
<View className={styles.buy_btn}>
<View className={styles.icon}>
<View className={classnames('iconfont', 'icon-gouwuche', styles.miconfont)}></View>
</View>
<View className={styles.goPay}>
去结算
<View className={styles.buy_btn_con}>
<View className={styles.count}>{selectCountMsg}</View>
<View className={styles.add_cart}>加入购物车</View>
</View>
</View>
</View>
<View className="common_safe_area_y"></View>
</Popup>
</View>
)