From f59f641f5d606ef296c3aa0925eb590147aa4787 Mon Sep 17 00:00:00 2001 From: czm <2192718639@qq.com> Date: Tue, 12 Apr 2022 16:50:05 +0800 Subject: [PATCH] =?UTF-8?q?=E9=9D=A2=E6=96=99=E8=AF=A6=E6=83=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/counter/index.module.scss | 34 ++++++ .../details/components/counter/index.tsx | 36 ++++++ .../components/shopCart/index.module.scss | 57 ++++++++- .../details/components/shopCart/index.tsx | 112 ++++++------------ 4 files changed, 163 insertions(+), 76 deletions(-) create mode 100644 src/pages/details/components/counter/index.module.scss create mode 100644 src/pages/details/components/counter/index.tsx diff --git a/src/pages/details/components/counter/index.module.scss b/src/pages/details/components/counter/index.module.scss new file mode 100644 index 0000000..4d6bd4d --- /dev/null +++ b/src/pages/details/components/counter/index.module.scss @@ -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; + } + +} \ No newline at end of file diff --git a/src/pages/details/components/counter/index.tsx b/src/pages/details/components/counter/index.tsx new file mode 100644 index 0000000..12f1d33 --- /dev/null +++ b/src/pages/details/components/counter/index.tsx @@ -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 ( + + minus()}>- + + {}} + onBlur={() => {}} + /> + 米 + + onPlus()}>+ + + ) +} \ No newline at end of file diff --git a/src/pages/details/components/shopCart/index.module.scss b/src/pages/details/components/shopCart/index.module.scss index cac843b..c3885da 100644 --- a/src/pages/details/components/shopCart/index.module.scss +++ b/src/pages/details/components/shopCart/index.module.scss @@ -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%); + } } } \ No newline at end of file diff --git a/src/pages/details/components/shopCart/index.tsx b/src/pages/details/components/shopCart/index.tsx index c707ffd..e8233ea 100644 --- a/src/pages/details/components/shopCart/index.tsx +++ b/src/pages/details/components/shopCart/index.tsx @@ -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 ( @@ -99,50 +72,43 @@ export default ({show = false, onClose}: param) => { + + + 颜色分类 (13) - - - - - 1#薄荷绿 - ¥25.5/m + + + + {new Array(10).fill('').map(item => { + return + + + + + 1#薄荷绿 + ¥25.5/m + + + {/* 添加 */} + + + + + + })} - - 添加 - - - - - - 1#薄荷绿 - ¥25.5/m - - - 添加 - - - - - - 1#薄荷绿 - ¥25.5/m - - - 添加 - - + - - - - - 去结算 + + {selectCountMsg} + 加入购物车 + )