;%@|XDXdx>p(`a3|lQD$P{T4V@aV!2Iv
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
literal 0
HcmV?d00001
From 8e5e73909d44caef6781068cf94cc6b87f59583c Mon Sep 17 00:00:00 2001
From: czm <2192718639@qq.com>
Date: Thu, 14 Apr 2022 14:34:55 +0800
Subject: [PATCH 05/10] =?UTF-8?q?=E5=B7=B2=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
package-lock.json | 82 +++++++++++++------
package.json | 1 +
src/common/common.ts | 25 +++++-
src/components/product/index.tsx | 9 +-
.../index.module.scss | 0
.../{shopCart => orderCount}/index.tsx | 0
src/pages/index/index.tsx | 9 +-
src/pages/search/index.tsx | 3 +-
yarn.lock | 7 ++
9 files changed, 92 insertions(+), 44 deletions(-)
rename src/pages/details/components/{shopCart => orderCount}/index.module.scss (100%)
rename src/pages/details/components/{shopCart => orderCount}/index.tsx (100%)
diff --git a/package-lock.json b/package-lock.json
index 403af71..a0df40e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,6 +14,7 @@
"@tarojs/runtime": "3.3.10",
"@tarojs/taro": "3.3.10",
"big.js": "^6.1.1",
+ "qs": "^6.10.3",
"react": "^17.0.0",
"react-dom": "^17.0.0"
},
@@ -5896,6 +5897,18 @@
"node": ">= 0.8"
}
},
+ "node_modules/body-parser/node_modules/qs": {
+ "version": "6.9.7",
+ "resolved": "https://registry.npmjs.org/qs/-/qs-6.9.7.tgz",
+ "integrity": "sha512-IhMFgUmuNpyRfxA90umL7ByLlgRXu6tIfKPpF5TmcfRLlLCckfP/g3IQmju6jjpu+Hh8rA+2p6A27ZSPOOHdKw==",
+ "dev": true,
+ "engines": {
+ "node": ">=0.6"
+ },
+ "funding": {
+ "url": "https://github.com/sponsors/ljharb"
+ }
+ },
"node_modules/bonjour": {
"version": "3.5.0",
"resolved": "https://registry.npmjs.org/bonjour/-/bonjour-3.5.0.tgz",
@@ -6241,7 +6254,6 @@
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz",
"integrity": "sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==",
- "dev": true,
"license": "MIT",
"dependencies": {
"function-bind": "^1.1.1",
@@ -9074,6 +9086,18 @@
"node": ">= 0.10.0"
}
},
+ "node_modules/express/node_modules/qs": {
+ "version": "6.9.7",
+ "resolved": "https://registry.npmjs.org/qs/-/qs-6.9.7.tgz",
+ "integrity": "sha512-IhMFgUmuNpyRfxA90umL7ByLlgRXu6tIfKPpF5TmcfRLlLCckfP/g3IQmju6jjpu+Hh8rA+2p6A27ZSPOOHdKw==",
+ "dev": true,
+ "engines": {
+ "node": ">=0.6"
+ },
+ "funding": {
+ "url": "https://github.com/sponsors/ljharb"
+ }
+ },
"node_modules/ext": {
"version": "1.6.0",
"resolved": "https://registry.npmjs.org/ext/-/ext-1.6.0.tgz",
@@ -9812,7 +9836,6 @@
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
"integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==",
- "dev": true,
"license": "MIT"
},
"node_modules/functional-red-black-tree": {
@@ -9846,7 +9869,6 @@
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.1.1.tgz",
"integrity": "sha512-kWZrnVM42QCiEA2Ig1bG8zjoIMOgxWwYCEeNdwY6Tv/cOSeGpcoX4pXHfKUxNKVoArnrEr2e9srnAxxGIraS9Q==",
- "dev": true,
"license": "MIT",
"dependencies": {
"function-bind": "^1.1.1",
@@ -10119,7 +10141,6 @@
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
"integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==",
- "dev": true,
"license": "MIT",
"dependencies": {
"function-bind": "^1.1.1"
@@ -10165,7 +10186,6 @@
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz",
"integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==",
- "dev": true,
"license": "MIT",
"engines": {
"node": ">= 0.4"
@@ -13711,7 +13731,6 @@
"version": "1.12.0",
"resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.12.0.tgz",
"integrity": "sha512-Ho2z80bVIvJloH+YzRmpZVQe87+qASmBUKZDWgx9cu+KDrX2ZDH/3tMy+gXbZETVGs2M8YdxObOh7XAtim9Y0g==",
- "dev": true,
"license": "MIT",
"funding": {
"url": "https://github.com/sponsors/ljharb"
@@ -15536,11 +15555,12 @@
}
},
"node_modules/qs": {
- "version": "6.9.7",
- "resolved": "https://registry.npmjs.org/qs/-/qs-6.9.7.tgz",
- "integrity": "sha512-IhMFgUmuNpyRfxA90umL7ByLlgRXu6tIfKPpF5TmcfRLlLCckfP/g3IQmju6jjpu+Hh8rA+2p6A27ZSPOOHdKw==",
- "dev": true,
- "license": "BSD-3-Clause",
+ "version": "6.10.3",
+ "resolved": "https://registry.npmjs.org/qs/-/qs-6.10.3.tgz",
+ "integrity": "sha512-wr7M2E0OFRfIfJZjKGieI8lBKb7fRCH4Fv5KNPEs7gJ8jadvotdsS08PzOKR7opXhZ/Xkjtt3WF9g38drmyRqQ==",
+ "dependencies": {
+ "side-channel": "^1.0.4"
+ },
"engines": {
"node": ">=0.6"
},
@@ -17167,7 +17187,6 @@
"version": "1.0.4",
"resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.4.tgz",
"integrity": "sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==",
- "dev": true,
"license": "MIT",
"dependencies": {
"call-bind": "^1.0.0",
@@ -25055,6 +25074,14 @@
"qs": "6.9.7",
"raw-body": "2.4.3",
"type-is": "~1.6.18"
+ },
+ "dependencies": {
+ "qs": {
+ "version": "6.9.7",
+ "resolved": "https://registry.npmjs.org/qs/-/qs-6.9.7.tgz",
+ "integrity": "sha512-IhMFgUmuNpyRfxA90umL7ByLlgRXu6tIfKPpF5TmcfRLlLCckfP/g3IQmju6jjpu+Hh8rA+2p6A27ZSPOOHdKw==",
+ "dev": true
+ }
}
},
"bonjour": {
@@ -25351,7 +25378,6 @@
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz",
"integrity": "sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==",
- "dev": true,
"requires": {
"function-bind": "^1.1.1",
"get-intrinsic": "^1.0.2"
@@ -27448,6 +27474,14 @@
"type-is": "~1.6.18",
"utils-merge": "1.0.1",
"vary": "~1.1.2"
+ },
+ "dependencies": {
+ "qs": {
+ "version": "6.9.7",
+ "resolved": "https://registry.npmjs.org/qs/-/qs-6.9.7.tgz",
+ "integrity": "sha512-IhMFgUmuNpyRfxA90umL7ByLlgRXu6tIfKPpF5TmcfRLlLCckfP/g3IQmju6jjpu+Hh8rA+2p6A27ZSPOOHdKw==",
+ "dev": true
+ }
}
},
"ext": {
@@ -27987,8 +28021,7 @@
"function-bind": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
- "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==",
- "dev": true
+ "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A=="
},
"functional-red-black-tree": {
"version": "1.0.1",
@@ -28012,7 +28045,6 @@
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.1.1.tgz",
"integrity": "sha512-kWZrnVM42QCiEA2Ig1bG8zjoIMOgxWwYCEeNdwY6Tv/cOSeGpcoX4pXHfKUxNKVoArnrEr2e9srnAxxGIraS9Q==",
- "dev": true,
"requires": {
"function-bind": "^1.1.1",
"has": "^1.0.3",
@@ -28212,7 +28244,6 @@
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
"integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==",
- "dev": true,
"requires": {
"function-bind": "^1.1.1"
}
@@ -28241,8 +28272,7 @@
"has-symbols": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz",
- "integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==",
- "dev": true
+ "integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A=="
},
"has-tostringtag": {
"version": "1.0.0",
@@ -30797,8 +30827,7 @@
"object-inspect": {
"version": "1.12.0",
"resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.12.0.tgz",
- "integrity": "sha512-Ho2z80bVIvJloH+YzRmpZVQe87+qASmBUKZDWgx9cu+KDrX2ZDH/3tMy+gXbZETVGs2M8YdxObOh7XAtim9Y0g==",
- "dev": true
+ "integrity": "sha512-Ho2z80bVIvJloH+YzRmpZVQe87+qASmBUKZDWgx9cu+KDrX2ZDH/3tMy+gXbZETVGs2M8YdxObOh7XAtim9Y0g=="
},
"object-is": {
"version": "1.1.5",
@@ -32147,10 +32176,12 @@
"dev": true
},
"qs": {
- "version": "6.9.7",
- "resolved": "https://registry.npmjs.org/qs/-/qs-6.9.7.tgz",
- "integrity": "sha512-IhMFgUmuNpyRfxA90umL7ByLlgRXu6tIfKPpF5TmcfRLlLCckfP/g3IQmju6jjpu+Hh8rA+2p6A27ZSPOOHdKw==",
- "dev": true
+ "version": "6.10.3",
+ "resolved": "https://registry.npmjs.org/qs/-/qs-6.10.3.tgz",
+ "integrity": "sha512-wr7M2E0OFRfIfJZjKGieI8lBKb7fRCH4Fv5KNPEs7gJ8jadvotdsS08PzOKR7opXhZ/Xkjtt3WF9g38drmyRqQ==",
+ "requires": {
+ "side-channel": "^1.0.4"
+ }
},
"query-string": {
"version": "4.3.4",
@@ -33326,7 +33357,6 @@
"version": "1.0.4",
"resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.4.tgz",
"integrity": "sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==",
- "dev": true,
"requires": {
"call-bind": "^1.0.0",
"get-intrinsic": "^1.0.2",
diff --git a/package.json b/package.json
index 54d82ed..9258dd5 100644
--- a/package.json
+++ b/package.json
@@ -41,6 +41,7 @@
"@tarojs/runtime": "3.3.10",
"@tarojs/taro": "3.3.10",
"big.js": "^6.1.1",
+ "qs": "^6.10.3",
"react": "^17.0.0",
"react-dom": "^17.0.0"
},
diff --git a/src/common/common.ts b/src/common/common.ts
index e92f7c6..d0266a1 100644
--- a/src/common/common.ts
+++ b/src/common/common.ts
@@ -1,8 +1,25 @@
import Taro from "@tarojs/taro"
+import Qs from 'qs'
-export const goLink = (path?:string, params?:Object) => {
- Taro.navigateTo({
- url: '/pages/search/index'
- })
+/**
+ * 跳转
+ * @param path
+ * @param params
+ * @param type false 跳转普通页面,true 跳转tabbar页面
+ */
+export const goLink = (path = '', params = {}, type:false|true = false) => {
+ if(path) {
+ let params_str = Qs.stringify(params)
+ path = params_str?path+'?'+params_str:path
+ if(!type) {
+ Taro.navigateTo({
+ url: path
+ })
+ } else {
+ Taro.switchTab({
+ url: path
+ })
+ }
+ }
}
\ No newline at end of file
diff --git a/src/components/product/index.tsx b/src/components/product/index.tsx
index cf6421a..d7d6d3b 100644
--- a/src/components/product/index.tsx
+++ b/src/components/product/index.tsx
@@ -1,20 +1,17 @@
import { Image, View } from "@tarojs/components"
import Taro from "@tarojs/taro"
+import { goLink } from "@/common/common"
import styles from './index.module.scss'
type params = {
desStatus?: true|false
}
export default ({desStatus = true}: params) => {
- const goLink = () => {
- Taro.navigateTo({
- url: '/pages/details/index?id=1'
- })
- }
+
return (
{new Array(10).fill('').map(item => {
- return goLink()}>
+ return goLink('/pages/details/index?id=1')}>
230色
diff --git a/src/pages/details/components/shopCart/index.module.scss b/src/pages/details/components/orderCount/index.module.scss
similarity index 100%
rename from src/pages/details/components/shopCart/index.module.scss
rename to src/pages/details/components/orderCount/index.module.scss
diff --git a/src/pages/details/components/shopCart/index.tsx b/src/pages/details/components/orderCount/index.tsx
similarity index 100%
rename from src/pages/details/components/shopCart/index.tsx
rename to src/pages/details/components/orderCount/index.tsx
diff --git a/src/pages/index/index.tsx b/src/pages/index/index.tsx
index 9f4cc32..985a864 100644
--- a/src/pages/index/index.tsx
+++ b/src/pages/index/index.tsx
@@ -6,6 +6,7 @@ import Product from '@/components/product'
import MoveBtn from '@/components/moveBtn'
import ShopCart from '@/components/shopCart'
import styles from './index.module.scss'
+import { goLink } from '@/common/common'
import { useState } from 'react'
import Taro from '@tarojs/taro'
@@ -32,12 +33,6 @@ export default () => {
const [showShopCart, setShowShopCart] = useState(false)
- const goLink = () => {
- Taro.navigateTo({
- url: '/pages/search/index'
- })
- }
-
return (
setShowShopCart(!showShopCart)}>
@@ -45,7 +40,7 @@ export default () => {
我的收藏
- goLink()}/>
+ goLink('/pages/search/index')}/>
diff --git a/src/pages/search/index.tsx b/src/pages/search/index.tsx
index bc14cd0..2c19f4b 100644
--- a/src/pages/search/index.tsx
+++ b/src/pages/search/index.tsx
@@ -1,6 +1,7 @@
import { View } from '@tarojs/components'
import Search from '@/components/search'
+import { goLink } from '@/common/common';
import classnames from "classnames";
import styles from './index.module.scss'
@@ -8,7 +9,7 @@ export default () => {
return (
-
+ goLink('/pages/searchList/index')}/>
diff --git a/yarn.lock b/yarn.lock
index 2348a98..ef6348d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -8321,6 +8321,13 @@
"resolved" "https://registry.npmjs.org/punycode/-/punycode-1.3.2.tgz"
"version" "1.3.2"
+"qs@^6.10.3":
+ "integrity" "sha512-wr7M2E0OFRfIfJZjKGieI8lBKb7fRCH4Fv5KNPEs7gJ8jadvotdsS08PzOKR7opXhZ/Xkjtt3WF9g38drmyRqQ=="
+ "resolved" "https://registry.npmjs.org/qs/-/qs-6.10.3.tgz"
+ "version" "6.10.3"
+ dependencies:
+ "side-channel" "^1.0.4"
+
"qs@~6.5.2":
"integrity" "sha512-qxXIEh4pCGfHICj1mAJQ2/2XVZkjCDTcEgfoSQxc/fYivUZxTkk7L3bDBJSoNrEzXI17oUO5Dp07ktqE5KzczA=="
"resolved" "https://registry.npmjs.org/qs/-/qs-6.5.3.tgz"
From 9e969c496fb39ddfe63fe563e6d8702a4dbddcc8 Mon Sep 17 00:00:00 2001
From: czm <2192718639@qq.com>
Date: Thu, 14 Apr 2022 18:33:20 +0800
Subject: [PATCH 06/10] =?UTF-8?q?=E5=88=86=E7=B1=BB=E7=AD=9B=E9=80=89?=
=?UTF-8?q?=E5=AE=8C=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/app.config.ts | 1 +
src/components/popup/index.module.scss | 2 +-
src/components/popup/index.tsx | 8 +-
src/components/swiper/index.tsx | 10 +-
.../components/filter/index.module.scss | 126 ++++++++++++++
.../classList/components/filter/index.tsx | 115 +++++++++++++
src/pages/classList/index.config.ts | 3 +
src/pages/classList/index.module.scss | 157 ++++++++++++++++++
src/pages/classList/index.tsx | 41 +++++
src/pages/details/index.tsx | 2 +-
src/styles/common.scss | 5 +-
11 files changed, 456 insertions(+), 14 deletions(-)
create mode 100644 src/pages/classList/components/filter/index.module.scss
create mode 100644 src/pages/classList/components/filter/index.tsx
create mode 100644 src/pages/classList/index.config.ts
create mode 100644 src/pages/classList/index.module.scss
create mode 100644 src/pages/classList/index.tsx
diff --git a/src/app.config.ts b/src/app.config.ts
index 05e474e..4fff5e1 100644
--- a/src/app.config.ts
+++ b/src/app.config.ts
@@ -4,6 +4,7 @@ export default {
'pages/search/index',
'pages/user/index',
'pages/searchList/index',
+ 'pages/classList/index',
'pages/details/index',
],
window: {
diff --git a/src/components/popup/index.module.scss b/src/components/popup/index.module.scss
index 0ed250b..00efd3c 100644
--- a/src/components/popup/index.module.scss
+++ b/src/components/popup/index.module.scss
@@ -44,7 +44,7 @@ $am-ms: 200ms;
.common_close_btn_icon{
position: absolute;
top: 10px;
- right: 10px;
+ left: 10px;
}
}
.drawer_container_active{
diff --git a/src/components/popup/index.tsx b/src/components/popup/index.tsx
index a71b45a..43349cb 100644
--- a/src/components/popup/index.tsx
+++ b/src/components/popup/index.tsx
@@ -4,11 +4,11 @@ import classnames from "classnames";
import { memo, ReactNode, useMemo } from "react";
import CloseBtnIcon from "@/components/closeBtn"
-interface Params {
+export interface Params {
title?: string,
show?: false|true,
showTitle?: false|true,
- onClose?:(boolean) => void,
+ onClose?:() => void,
children?: ReactNode,
IconButton?: ReactNode,
showIconButton?: false|true,
@@ -32,7 +32,7 @@ export default memo((
onClose?.(false)}
+ onClick={() => onClose?.()}
>
{showTitle&&{title}}
{showIconButton&&
- onClose?.(false)}/>
+ onClose?.()}/>
}
diff --git a/src/components/swiper/index.tsx b/src/components/swiper/index.tsx
index 414da20..2e49e14 100644
--- a/src/components/swiper/index.tsx
+++ b/src/components/swiper/index.tsx
@@ -1,4 +1,5 @@
import { Image, Swiper, SwiperItem, View } from "@tarojs/components"
+import { goLink } from "@/common/common"
import Taro from "@tarojs/taro"
import styles from './index.module.scss'
@@ -19,12 +20,7 @@ export default (props:params) => {
id:1
}
]
- const goLink = (item) => {
- swiperOnClick?.(item)
- Taro.navigateTo({
- url:'/pages/search/index'
- })
- }
+
return (
{
{
list.map(item => {
return
- goLink(item)}>
+ goLink(`/pages/classList/index?id=${item.id}`)}>
diff --git a/src/pages/classList/components/filter/index.module.scss b/src/pages/classList/components/filter/index.module.scss
new file mode 100644
index 0000000..599cdd0
--- /dev/null
+++ b/src/pages/classList/components/filter/index.module.scss
@@ -0,0 +1,126 @@
+.popup_main{
+ width: 608px;
+ height: 100vh;
+ padding: 20px;
+ box-sizing: border-box;
+ display: flex;
+ flex-direction: column;
+ .popup_title{
+ font-size: $font_size;
+ font-weight: 700;
+ text-align: center;
+ padding: 20px 0;
+ }
+ .scroll{
+ flex:1;
+ height: 0;
+ }
+ .popup_filter{
+ padding-bottom: 100px;
+ }
+ .popup_filter_item{
+ margin-bottom: 20px;
+ .title{
+ font-size: $font_size;
+ color: $color_font_one;
+ font-weight: 700;
+ padding: 20px 0;
+ }
+ .btn_list{
+ display: grid;
+ grid-template-columns: repeat(3, 165.75px);
+ justify-content: space-between;
+ .btn_item{
+ width: 165.75px;
+ height: 69.2px;
+ background: #f0f0f0;
+ border-radius: 34px;
+ text-align: center;
+ line-height: 69.2px;
+ font-size: $font_size_medium;
+ color: $color_font_one;
+ margin-bottom: 20px;
+ }
+ .select_btn_item{
+ color: $color_main;
+ background: #ecf5ff;
+ border: 2px solid #007aff;
+ width: 161.75px;
+ height: 65.2px;
+ }
+ }
+ .btn_list_input{
+ display: flex;
+ // justify-content: space-between;
+ align-items: center;
+ .btn_width {
+ width: 220px;
+ height: 70px;
+ background: #f0f0f0;
+ border-radius: 50px;
+ padding: 10px 20px;
+ box-sizing: border-box;
+ input{
+ width: 100%;
+ height: 100%;
+ font-size: $font_size_medium;
+ }
+ }
+ .unit{
+ color: $color_font_one;
+ font-size: $font_size;
+ margin-left: 20px;
+ }
+ text{
+ color: #ccc;
+ padding: 0 20px;
+ }
+ .width_main{
+
+ }
+ }
+ .btn_list_element{
+ background-color: #F0F0F0;
+ border-radius: 30px;
+ padding: 20px;
+ box-sizing: border-box;
+ textarea{
+ width: 100%;
+ height: 126px;
+ font-size: $font_size_medium;
+ }
+ }
+ }
+ .btns_con{
+ width: 100%;
+ position: fixed;
+ bottom:0;
+ padding-bottom: constant(safe-area-inset-bottom);
+ padding-bottom: env(safe-area-inset-bottom);
+ .btns_two{
+ display: flex;
+ width: 552px;
+ height: 82px;
+ border: 2px solid #cde5ff;
+ font-size: $font_size_big;
+ border-radius: 40px;
+ margin-bottom: 20px;
+ .rest_btn{
+ flex:1;
+ border-radius: 0px 40px 40px 0px;
+ text-align: center;
+ line-height: 82px;
+ color: $color_main;
+
+ }
+ .verify_btn{
+ flex:1;
+ border-radius: 0px 40px 40px 0px;
+ background: #007aff;
+ text-align: center;
+ line-height: 82px;
+ color: #fff;
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/pages/classList/components/filter/index.tsx b/src/pages/classList/components/filter/index.tsx
new file mode 100644
index 0000000..d64ab87
--- /dev/null
+++ b/src/pages/classList/components/filter/index.tsx
@@ -0,0 +1,115 @@
+import Popup, {Params as PopuParams} from "@/components/popup"
+import { Input, ScrollView, Text, Textarea, View } from "@tarojs/components"
+import classnames from "classnames";
+import { useEffect, useState } from "react";
+import styles from './index.module.scss'
+
+type params = {
+ onFiltr?: (val:object) => void
+} & PopuParams
+export default ({onClose, onFiltr, show = false}:params) => {
+ const [filterObj, setFilterObj] = useState({
+ series: '',
+ minWidth: '',
+ maxWidth: '',
+ minWeight: '',
+ maxWeight: '',
+ element: ''
+
+ })
+ const onCloseEven = () => {
+ onClose?.()
+ }
+ const onRest = () => {
+ console.log('12123')
+ setFilterObj({
+ series: '',
+ minWidth: '',
+ maxWidth: '',
+ minWeight: '',
+ maxWeight: '',
+ element: ''
+ })
+ }
+ useEffect(() => {
+ console.log(filterObj)
+ }, [filterObj])
+
+ const onVerify = () => {
+ console.log(filterObj)
+ onFiltr?.(filterObj)
+ }
+
+ const setNumber = (e, field) => {
+ console.log(e)
+ let num = parseFloat(e.detail.value)
+ if(isNaN(num)) {
+ filterObj[field] = null
+ } else {
+ filterObj[field] = parseFloat(num.toFixed(2))
+ }
+ setFilterObj({...filterObj})
+ }
+
+ const setElement = (e) => {
+ let res = e.detail.value
+ setFilterObj({...filterObj, element:res})
+ }
+ return (
+
+ onCloseEven()} showIconButton={true}>
+
+ 全部筛选
+
+
+
+
+ 系列
+
+ 不限
+ 不限
+ 不限
+ 不限
+ 不限
+ 不限
+
+
+
+ 幅宽
+
+ setNumber(e,'minWidth')} placeholder="自定义最低值" placeholderStyle="font-size: 26rpx"/>
+ —
+ setNumber(e,'maxWidth')} placeholder="自定义最高值" placeholderStyle="font-size: 26rpx"/>
+ cm
+
+
+
+ 克重
+
+ setNumber(e,'minWeight')} placeholder="自定义最低值" placeholderStyle="font-size: 26rpx"/>
+ —
+ setNumber(e,'maxWeight')} placeholder="自定义最高值" placeholderStyle="font-size: 26rpx"/>
+ g
+
+
+
+ 成分
+
+
+
+
+
+
+
+
+
+ onRest()}>重置
+ onVerify()}>确认
+
+
+
+
+
+ )
+}
\ No newline at end of file
diff --git a/src/pages/classList/index.config.ts b/src/pages/classList/index.config.ts
new file mode 100644
index 0000000..2cd10d3
--- /dev/null
+++ b/src/pages/classList/index.config.ts
@@ -0,0 +1,3 @@
+export default {
+ navigationBarTitleText: '分类标题'
+}
diff --git a/src/pages/classList/index.module.scss b/src/pages/classList/index.module.scss
new file mode 100644
index 0000000..b8028e4
--- /dev/null
+++ b/src/pages/classList/index.module.scss
@@ -0,0 +1,157 @@
+.main{
+ display: flex;
+ flex-direction: column;
+ height: 100vh;
+ background-color: $color_bg_one;
+ .search{
+ padding: 20px;
+ }
+ .filter{
+ .filter_all {
+ display: flex;
+ justify-content: space-between;
+ padding: 20px 50px;
+ font-size: $font_size_medium;
+ color: $color_font_three;
+ .text_one{
+ color: $color_main;
+ }
+ .text_two{
+ position: relative;
+ .miconfont{
+ font-size: 20px;
+ margin-left: 10px;
+ }
+ &::before{
+ content: '';
+ width: 2px;
+ height: 32px;
+ background-color: #C2C2C2;
+ position: absolute;
+ top: 0;
+ left: -50px;
+ }
+ }
+ }
+ .filter_btn{
+ display: flex;
+ justify-content: space-between;
+ padding: 20px;
+ view{
+ font-size: $font_size_medium;
+ background-color: #F0F0F0;
+ border-radius: 24px;
+ width: 126px;
+ height: 46.93px;
+ text-align: center;
+ line-height: 46.93px;
+ color: $color_font_three;
+ }
+ .selected{
+ background-color: #ecf5ff;
+ border: 2px solid #cde5ff;
+ color: $color_main;
+ width: 122px;
+ height: 42.93px;
+ }
+ }
+ }
+ .list{
+ flex:1;
+ height: 0;
+ }
+ .popup_main{
+ width: 608px;
+ height: 100vh;
+ padding: 20px;
+ box-sizing: border-box;
+ display: flex;
+ flex-direction: column;
+ .popup_title{
+ font-size: $font_size;
+ font-weight: 700;
+ text-align: center;
+ padding: 20px 0;
+ }
+ .scroll{
+ flex:1;
+ height: 0;
+ }
+ .popup_filter{
+
+ }
+ .popup_filter_item{
+ margin-bottom: 20px;
+ .title{
+ font-size: $font_size;
+ color: $color_font_one;
+ font-weight: 700;
+ padding: 20px 0;
+ }
+ .btn_list{
+ display: grid;
+ grid-template-columns: repeat(3, 165.75px);
+ justify-content: space-between;
+ .btn_item{
+ width: 165.75px;
+ height: 69.2px;
+ background: #f0f0f0;
+ border-radius: 34px;
+ text-align: center;
+ line-height: 69.2px;
+ font-size: $font_size_medium;
+ color: $color_font_one;
+ margin-bottom: 20px;
+ }
+ .select_btn_item{
+ color: $color_main;
+ background: #ecf5ff;
+ border: 2px solid #007aff;
+ width: 161.75px;
+ height: 65.2px;
+ }
+ }
+ .btn_list_input{
+ display: flex;
+ // justify-content: space-between;
+ align-items: center;
+ .btn_width {
+ width: 220px;
+ height: 70px;
+ background: #f0f0f0;
+ border-radius: 50px;
+ padding: 10px 20px;
+ box-sizing: border-box;
+ input{
+ width: 100%;
+ height: 100%;
+ font-size: $font_size_medium;
+ }
+ }
+ .unit{
+ color: $color_font_one;
+ font-size: $font_size;
+ margin-left: 20px;
+ }
+ text{
+ color: #ccc;
+ padding: 0 20px;
+ }
+ .width_main{
+
+ }
+ }
+ .btn_list_element{
+ background-color: #F0F0F0;
+ border-radius: 30px;
+ padding: 20px;
+ box-sizing: border-box;
+ textarea{
+ width: 100%;
+ height: 126px;
+ font-size: $font_size_medium;
+ }
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/pages/classList/index.tsx b/src/pages/classList/index.tsx
new file mode 100644
index 0000000..f9a60b7
--- /dev/null
+++ b/src/pages/classList/index.tsx
@@ -0,0 +1,41 @@
+import { Input, ScrollView, Text, Textarea, View } from "@tarojs/components"
+import classnames from "classnames";
+import Search from '@/components/search'
+import Product from '@/components/product'
+import InfiniteScroll from '@/components/infiniteScroll'
+import Popup from "@/components/popup";
+import styles from './index.module.scss'
+import { useState } from "react";
+import Filter from "./components/filter";
+
+export default () => {
+ const [showPopup, setShowPopup] = useState(false)
+ return (
+
+
+
+
+
+
+ 综合
+ setShowPopup(true)}>
+ 筛选
+
+
+
+
+ 系列
+ 幅宽
+ 克重
+ 成分
+
+
+
+ console.log('123123')}>
+
+
+
+ setShowPopup(false)} onFiltr={(e) => console.log('e:::',e)}/>
+
+ )
+}
\ No newline at end of file
diff --git a/src/pages/details/index.tsx b/src/pages/details/index.tsx
index aff6d1e..29ade99 100644
--- a/src/pages/details/index.tsx
+++ b/src/pages/details/index.tsx
@@ -3,7 +3,7 @@ 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/shopCart';
+import OrderCount from './components/orderCount';
import ShopCart from '@/components/shopCart';
import Preview,{colorItem} from './components/preview';
import styles from './index.module.scss'
diff --git a/src/styles/common.scss b/src/styles/common.scss
index ce72d4f..6c136a7 100644
--- a/src/styles/common.scss
+++ b/src/styles/common.scss
@@ -27,4 +27,7 @@ $font_size_min: 22px;
-webkit-line-clamp: $params;
text-overflow:ellipsis;
-}
\ No newline at end of file
+}
+
+//按钮样式,未选择
+
From 8291ab49d7045c7f451e141935b01e8acb366173 Mon Sep 17 00:00:00 2001
From: czm <2192718639@qq.com>
Date: Fri, 15 Apr 2022 13:50:38 +0800
Subject: [PATCH 07/10] =?UTF-8?q?=E5=88=86=E7=B1=BB=E7=AD=9B=E9=80=89?=
=?UTF-8?q?=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/components/infiniteScroll/index.tsx | 19 ++++++++++---------
src/components/shopCart/index.module.scss | 3 ++-
src/components/shopCart/index.tsx | 9 ++++++++-
src/components/swiper/index.tsx | 6 ++++++
.../details/components/orderCount/index.tsx | 7 +++++++
.../components/swiper/index.module.scss | 1 +
src/pages/details/components/swiper/index.tsx | 8 ++++----
src/pages/details/index.module.scss | 1 -
8 files changed, 38 insertions(+), 16 deletions(-)
diff --git a/src/components/infiniteScroll/index.tsx b/src/components/infiniteScroll/index.tsx
index bfb897e..b30d01b 100644
--- a/src/components/infiniteScroll/index.tsx
+++ b/src/components/infiniteScroll/index.tsx
@@ -9,9 +9,9 @@ type Params = {
hasMore?: false|true,
children?: ReactNode,
lowerThresholdNum?: number,
-
+ paddingBottom?: number
}
-export default memo(({styleObj, selfonScrollToLower, hasMore=true, children, lowerThresholdNum = 5}: Params) => {
+export default memo(({styleObj, selfonScrollToLower, hasMore=true, children, lowerThresholdNum = 5, paddingBottom = 0}: Params) => {
const scrollToLower = () => {
selfonScrollToLower?.()
}
@@ -24,15 +24,16 @@ export default memo(({styleObj, selfonScrollToLower, hasMore=true, children, low
onScrollToLower={() => scrollToLower()}
lowerThreshold={lowerThresholdNum}
>
-
+
{children}
+
+ {
+ hasMore&&加载中||
+ 没有更多了
+ }
+
-
- {
- hasMore&&加载中||
- 没有更多了
- }
-
+
diff --git a/src/components/shopCart/index.module.scss b/src/components/shopCart/index.module.scss
index 4d6405b..61142a4 100644
--- a/src/components/shopCart/index.module.scss
+++ b/src/components/shopCart/index.module.scss
@@ -40,7 +40,8 @@
}
}
.con{
- padding:30px 20px 100px 0;
+ padding:30px;
+ padding-bottom: 0;
box-sizing: border-box;
flex:1;
height: 0;
diff --git a/src/components/shopCart/index.tsx b/src/components/shopCart/index.tsx
index 739421d..8e22413 100644
--- a/src/components/shopCart/index.tsx
+++ b/src/components/shopCart/index.tsx
@@ -23,6 +23,7 @@ export default ({show = false, onClose}: param) => {
const [loading, setLoading] = useState(false)
useEffect(() => {
+ if(!show) return
let lists:any[] = []
for(let i = 0; i < 20; i++) {
lists = [...lists, {
@@ -33,6 +34,12 @@ export default ({show = false, onClose}: param) => {
}]
}
setList([...lists])
+ }, [show])
+
+ useEffect(() => {
+ return () => {
+ setList([])
+ }
}, [])
const [showPopup, setShowPopup] = useState(false)
@@ -104,7 +111,7 @@ export default ({show = false, onClose}: param) => {
{loading&&}
- {!loading&&list.length > 0&& {console.log('触底了')}}>
+ {!loading&&list.length > 0&& {console.log('触底了')}} paddingBottom={100}>
{list.map((item, index) => {
return
diff --git a/src/components/swiper/index.tsx b/src/components/swiper/index.tsx
index 2e49e14..af56652 100644
--- a/src/components/swiper/index.tsx
+++ b/src/components/swiper/index.tsx
@@ -18,6 +18,12 @@ export default (props:params) => {
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
}
]
diff --git a/src/pages/details/components/orderCount/index.tsx b/src/pages/details/components/orderCount/index.tsx
index c0a258f..eb5c0c4 100644
--- a/src/pages/details/components/orderCount/index.tsx
+++ b/src/pages/details/components/orderCount/index.tsx
@@ -30,6 +30,7 @@ export default memo(({show = false, onClose}: param) => {
console.log('执行执行')
useEffect(() => {
+ if(!show) return
let lists:any[] = []
for(let i = 0; i < 20; i++) {
lists = [...lists, {
@@ -41,6 +42,12 @@ export default memo(({show = false, onClose}: param) => {
}]
}
setList([...lists])
+ }, [show])
+
+ useEffect(() => {
+ return () => {
+ setList([])
+ }
}, [])
const [showPopup, setShowPopup] = useState(false)
diff --git a/src/pages/details/components/swiper/index.module.scss b/src/pages/details/components/swiper/index.module.scss
index 28a5df5..f65584e 100644
--- a/src/pages/details/components/swiper/index.module.scss
+++ b/src/pages/details/components/swiper/index.module.scss
@@ -12,6 +12,7 @@
image{
width: 100%;
height: 100%;
+ display: block;
}
}
.page{
diff --git a/src/pages/details/components/swiper/index.tsx b/src/pages/details/components/swiper/index.tsx
index ac52db5..c05ed1a 100644
--- a/src/pages/details/components/swiper/index.tsx
+++ b/src/pages/details/components/swiper/index.tsx
@@ -21,11 +21,11 @@ export default ({list = []}: params) => {
return (
- swiperChange(e)}>
- {list.map(item => {
- return
+ swiperChange(e)}>
+ {list.map((item) => {
+ return
-
+
})}
diff --git a/src/pages/details/index.module.scss b/src/pages/details/index.module.scss
index 371cbe5..1c1f42a 100644
--- a/src/pages/details/index.module.scss
+++ b/src/pages/details/index.module.scss
@@ -78,7 +78,6 @@
.item_color{
width:210px;
height: 210px;
- background-color: red;
border-radius: 20px;
image{
width: 100%;
From 1e0d58dda2ac752405dbbd2e4748446f80f27b16 Mon Sep 17 00:00:00 2001
From: czm <2192718639@qq.com>
Date: Fri, 15 Apr 2022 19:31:16 +0800
Subject: [PATCH 08/10] =?UTF-8?q?=E6=90=9C=E7=B4=A2=E5=88=97=E8=A1=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/components/filter/index.module.scss | 126 ++++++++++++++++++
src/components/filter/index.tsx | 115 +++++++++++++++++
src/components/sortBtn/index.module.scss | 36 ++++++
src/components/sortBtn/index.tsx | 17 +++
src/components/tabs/index.module.scss | 41 ++++++
src/components/tabs/index.tsx | 60 +++++++++
src/pages/searchList/index.module.scss | 157 ++++++++++++++++++++++-
src/pages/searchList/index.tsx | 78 ++++++++++-
src/styles/iconfont.scss | 22 +++-
src/styles/iconfont.ttf | Bin 4988 -> 5764 bytes
10 files changed, 644 insertions(+), 8 deletions(-)
create mode 100644 src/components/filter/index.module.scss
create mode 100644 src/components/filter/index.tsx
create mode 100644 src/components/sortBtn/index.module.scss
create mode 100644 src/components/sortBtn/index.tsx
create mode 100644 src/components/tabs/index.module.scss
create mode 100644 src/components/tabs/index.tsx
diff --git a/src/components/filter/index.module.scss b/src/components/filter/index.module.scss
new file mode 100644
index 0000000..599cdd0
--- /dev/null
+++ b/src/components/filter/index.module.scss
@@ -0,0 +1,126 @@
+.popup_main{
+ width: 608px;
+ height: 100vh;
+ padding: 20px;
+ box-sizing: border-box;
+ display: flex;
+ flex-direction: column;
+ .popup_title{
+ font-size: $font_size;
+ font-weight: 700;
+ text-align: center;
+ padding: 20px 0;
+ }
+ .scroll{
+ flex:1;
+ height: 0;
+ }
+ .popup_filter{
+ padding-bottom: 100px;
+ }
+ .popup_filter_item{
+ margin-bottom: 20px;
+ .title{
+ font-size: $font_size;
+ color: $color_font_one;
+ font-weight: 700;
+ padding: 20px 0;
+ }
+ .btn_list{
+ display: grid;
+ grid-template-columns: repeat(3, 165.75px);
+ justify-content: space-between;
+ .btn_item{
+ width: 165.75px;
+ height: 69.2px;
+ background: #f0f0f0;
+ border-radius: 34px;
+ text-align: center;
+ line-height: 69.2px;
+ font-size: $font_size_medium;
+ color: $color_font_one;
+ margin-bottom: 20px;
+ }
+ .select_btn_item{
+ color: $color_main;
+ background: #ecf5ff;
+ border: 2px solid #007aff;
+ width: 161.75px;
+ height: 65.2px;
+ }
+ }
+ .btn_list_input{
+ display: flex;
+ // justify-content: space-between;
+ align-items: center;
+ .btn_width {
+ width: 220px;
+ height: 70px;
+ background: #f0f0f0;
+ border-radius: 50px;
+ padding: 10px 20px;
+ box-sizing: border-box;
+ input{
+ width: 100%;
+ height: 100%;
+ font-size: $font_size_medium;
+ }
+ }
+ .unit{
+ color: $color_font_one;
+ font-size: $font_size;
+ margin-left: 20px;
+ }
+ text{
+ color: #ccc;
+ padding: 0 20px;
+ }
+ .width_main{
+
+ }
+ }
+ .btn_list_element{
+ background-color: #F0F0F0;
+ border-radius: 30px;
+ padding: 20px;
+ box-sizing: border-box;
+ textarea{
+ width: 100%;
+ height: 126px;
+ font-size: $font_size_medium;
+ }
+ }
+ }
+ .btns_con{
+ width: 100%;
+ position: fixed;
+ bottom:0;
+ padding-bottom: constant(safe-area-inset-bottom);
+ padding-bottom: env(safe-area-inset-bottom);
+ .btns_two{
+ display: flex;
+ width: 552px;
+ height: 82px;
+ border: 2px solid #cde5ff;
+ font-size: $font_size_big;
+ border-radius: 40px;
+ margin-bottom: 20px;
+ .rest_btn{
+ flex:1;
+ border-radius: 0px 40px 40px 0px;
+ text-align: center;
+ line-height: 82px;
+ color: $color_main;
+
+ }
+ .verify_btn{
+ flex:1;
+ border-radius: 0px 40px 40px 0px;
+ background: #007aff;
+ text-align: center;
+ line-height: 82px;
+ color: #fff;
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/components/filter/index.tsx b/src/components/filter/index.tsx
new file mode 100644
index 0000000..d64ab87
--- /dev/null
+++ b/src/components/filter/index.tsx
@@ -0,0 +1,115 @@
+import Popup, {Params as PopuParams} from "@/components/popup"
+import { Input, ScrollView, Text, Textarea, View } from "@tarojs/components"
+import classnames from "classnames";
+import { useEffect, useState } from "react";
+import styles from './index.module.scss'
+
+type params = {
+ onFiltr?: (val:object) => void
+} & PopuParams
+export default ({onClose, onFiltr, show = false}:params) => {
+ const [filterObj, setFilterObj] = useState({
+ series: '',
+ minWidth: '',
+ maxWidth: '',
+ minWeight: '',
+ maxWeight: '',
+ element: ''
+
+ })
+ const onCloseEven = () => {
+ onClose?.()
+ }
+ const onRest = () => {
+ console.log('12123')
+ setFilterObj({
+ series: '',
+ minWidth: '',
+ maxWidth: '',
+ minWeight: '',
+ maxWeight: '',
+ element: ''
+ })
+ }
+ useEffect(() => {
+ console.log(filterObj)
+ }, [filterObj])
+
+ const onVerify = () => {
+ console.log(filterObj)
+ onFiltr?.(filterObj)
+ }
+
+ const setNumber = (e, field) => {
+ console.log(e)
+ let num = parseFloat(e.detail.value)
+ if(isNaN(num)) {
+ filterObj[field] = null
+ } else {
+ filterObj[field] = parseFloat(num.toFixed(2))
+ }
+ setFilterObj({...filterObj})
+ }
+
+ const setElement = (e) => {
+ let res = e.detail.value
+ setFilterObj({...filterObj, element:res})
+ }
+ return (
+
+ onCloseEven()} showIconButton={true}>
+
+ 全部筛选
+
+
+
+
+ 系列
+
+ 不限
+ 不限
+ 不限
+ 不限
+ 不限
+ 不限
+
+
+
+ 幅宽
+
+ setNumber(e,'minWidth')} placeholder="自定义最低值" placeholderStyle="font-size: 26rpx"/>
+ —
+ setNumber(e,'maxWidth')} placeholder="自定义最高值" placeholderStyle="font-size: 26rpx"/>
+ cm
+
+
+
+ 克重
+
+ setNumber(e,'minWeight')} placeholder="自定义最低值" placeholderStyle="font-size: 26rpx"/>
+ —
+ setNumber(e,'maxWeight')} placeholder="自定义最高值" placeholderStyle="font-size: 26rpx"/>
+ g
+
+
+
+ 成分
+
+
+
+
+
+
+
+
+
+ onRest()}>重置
+ onVerify()}>确认
+
+
+
+
+
+ )
+}
\ No newline at end of file
diff --git a/src/components/sortBtn/index.module.scss b/src/components/sortBtn/index.module.scss
new file mode 100644
index 0000000..e734cf9
--- /dev/null
+++ b/src/components/sortBtn/index.module.scss
@@ -0,0 +1,36 @@
+.click {
+ height: 40px;
+ display: flex;
+ justify-content: center;
+ flex-direction: column;
+ position: relative;
+ }
+
+ .bottom {
+ width: 0;
+ height: 0;
+ border-style: solid;
+ border-width: 0 10px 10px;
+ border-color: transparent transparent #999999;
+ transform: rotate(180deg);
+ }
+ .top:hover {
+ cursor: pointer;
+ border-color: transparent transparent #333333;
+ }
+
+ .top {
+ width: 0;
+ height: 0;
+ border-style: solid;
+ border-width: 0 10px 10px;
+ border-color: transparent transparent #999999;
+ margin-bottom: 5px;
+ }
+ .bottom:hover {
+ cursor: pointer;
+ border-color: transparent transparent #333333;
+ }
+ .selected{
+ border-color: transparent transparent $color_main;
+ }
\ No newline at end of file
diff --git a/src/components/sortBtn/index.tsx b/src/components/sortBtn/index.tsx
new file mode 100644
index 0000000..68d6642
--- /dev/null
+++ b/src/components/sortBtn/index.tsx
@@ -0,0 +1,17 @@
+import { View } from "@tarojs/components"
+import classnames from "classnames";
+import styles from './index.module.scss'
+
+type params = {
+ status?: 'top'|'bottom'|'none'
+}
+export default ({status = 'none'}: params) => {
+ return (
+ <>
+
+
+
+
+ >
+ )
+}
\ No newline at end of file
diff --git a/src/components/tabs/index.module.scss b/src/components/tabs/index.module.scss
new file mode 100644
index 0000000..c04b80f
--- /dev/null
+++ b/src/components/tabs/index.module.scss
@@ -0,0 +1,41 @@
+.tabs_main{
+ display: flex;
+ .tabs_scroll{
+ width: 100%;
+ display: flex;
+ white-space: nowrap;
+ border-bottom: 1px solid $color_font_two;
+ border-top: 1px solid $color_font_two;
+ height: 102px;
+
+ .tabs_item{
+ flex:1;
+ display: inline-block;
+ padding: 10px 20px;
+ height: 100%;
+ box-sizing: border-box;
+ position: relative;
+ .tabs_item_con{
+ height: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: $font_size_medium;
+ }
+ .tabs_index{
+ height: 5px;
+ width: 100%;
+ background-color:$color_main;
+ position:absolute;
+ bottom: 0;
+ left:0;
+ border-radius: 50px;
+ }
+ .tabs_item_select{
+ color: $color_main;
+ }
+ }
+
+
+ }
+}
\ No newline at end of file
diff --git a/src/components/tabs/index.tsx b/src/components/tabs/index.tsx
new file mode 100644
index 0000000..71a1bc5
--- /dev/null
+++ b/src/components/tabs/index.tsx
@@ -0,0 +1,60 @@
+import { ScrollView, View } from "@tarojs/components";
+import { memo, useState, ReactNode, useEffect } from "react";
+import classnames from "classnames";
+import styles from './index.module.scss'
+
+
+type ListProps = {
+ title: string,
+ value: number
+}
+
+type Params = {
+ list?: ListProps[],
+ defaultValue?: number|string,
+ children?: ReactNode,
+ tabsOnClick?: (ListProps) => void
+}
+
+export default memo(({list = [], defaultValue = 0, tabsOnClick}: Params) => {
+
+ const [selected, setSelected] = useState(defaultValue)
+ const [tabId, setTabId] = useState('')
+
+ useEffect(() => {
+ const index = list?.findIndex(item => {
+ return item.value == defaultValue
+ })
+ if(index !== -1) {
+ const num = index > 0?( index - 1) : 0
+ setTabId(list[num].value.toString())
+ }
+ }, [])
+
+ const clickEvent = ({item, index}: {item:ListProps, index:number}) => {
+ setSelected(item.value)
+ tabsOnClick?.(item)
+ const num = index > 0?( index - 1) : 0
+ setTabId(list[num].value.toString())
+ }
+ return (
+ <>
+
+
+
+ {
+ list.map((item, index) => {
+ return (
+ clickEvent({item,index})}>
+ {item.title}
+ {(selected == item.value) && }
+
+ )
+ })
+ }
+
+
+
+ >
+ )
+})
\ No newline at end of file
diff --git a/src/pages/searchList/index.module.scss b/src/pages/searchList/index.module.scss
index 84455fd..bfd5e54 100644
--- a/src/pages/searchList/index.module.scss
+++ b/src/pages/searchList/index.module.scss
@@ -6,8 +6,163 @@
.search{
padding: 20px;
}
+ .filter{
+ .filter_all {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 20px 50px;
+ font-size: $font_size_medium;
+ color: $color_font_three;
+ .text_zh, .text_sc{
+ color: $color_main;
+ display: flex;
+ align-items: center;
+ .sortIcon{
+ display: flex;
+ flex-direction: column;
+ position: relative;
+ .icon_one{
+ font-size: $font_size_medium;
+ position: absolute;
+ margin:auto;
+ top:0;
+ }
+ }
+ }
+ .text_ss{
+ position: relative;
+ .miconfont{
+ font-size: 20px;
+ margin-left: 5px;
+ }
+ &::before{
+ content: '';
+ width: 2px;
+ height: 32px;
+ background-color: #C2C2C2;
+ position: absolute;
+ top: 0;
+ left: -30px;
+ }
+ }
+ }
+ .filter_btn_con{
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ height: 86px;
+
+ }
+ .filter_scroll{
+ flex:1;
+ width: 0;
+ }
+ .filter_btn{
+ display: flex;
+ justify-content: space-between;
+ padding: 20px;
+ flex:1;
+ view{
+ font-size: $font_size_medium;
+ background-color: #F0F0F0;
+ border-radius: 24px;
+ min-width: 126px;
+ height: 46.93px;
+ text-align: center;
+ line-height: 46.93px;
+ color: $color_font_three;
+ &:nth-last-child(n+2) {
+ margin-right: 10px;
+ }
+ }
+ .selected{
+ background-color: #ecf5ff;
+ border: 2px solid #cde5ff;
+ color: $color_main;
+ width: 122px;
+ height: 42.93px;
+ }
+ }
+ .filter_more{
+ font-size: $font_size_medium;
+ color: $color_font_three;
+ padding: 0 30px 0 20px;
+ position: relative;
+ height: 100%;
+ line-height: 86px;
+ &::before{
+ content: '';
+ opacity: 1;
+ width: 60px;
+ height: 100%;
+ position: absolute;
+ left: -15px;
+ background-color: red;
+ background: linear-gradient(270deg, #fff 30%, rgba(255,255,255, 0.3) );
+ // z-index: 99;
+ }
+ .miconfont{
+ font-size: 27px;
+ }
+ }
+ }
.list{
flex:1;
- height: 0;
+ display: flex;
+ flex-direction: column;
+ .list_num {
+ font-size: $font_size_min;
+ color:$color_font_two;
+ padding: 10px 38px;
+ }
+ .scroll{
+ flex:1;
+ height:0;
+ }
+ .product_list{
+ padding: 38px;
+ display: grid;
+ grid-template-columns: 321px 321px;
+ justify-content: space-between;
+ .product_item{
+ width: 321px;
+ background-color: #fff;
+ border-radius: 20px;
+ margin-bottom: 20px;
+ .product_img{
+ width: 100%;
+ height: 224px;
+ background: #e5ad3a;
+ border-radius: 20px 20px 0px 0px;
+ }
+ }
+ .product_info{
+ padding: 20px;
+ .title{
+ font-size: $font_size;
+ color: $color_font_three;
+ }
+ .tag_list{
+ display: flex;
+ margin-top: 16px;
+ .tag{
+ padding: 3px 10px;
+ background-color: #CDE5FF;
+ font-size: $font_size_min;
+ border-radius: 5px;
+ color: $color_main;
+ &:nth-child(2) {
+ margin-left: 10px;
+ }
+ }
+ }
+ .introduce{
+ font-size: $font_size_medium;
+ color: $color_font_two;
+ margin-top: 16px;
+ }
+ }
+ }
}
}
\ No newline at end of file
diff --git a/src/pages/searchList/index.tsx b/src/pages/searchList/index.tsx
index 63fe4d7..9fbd651 100644
--- a/src/pages/searchList/index.tsx
+++ b/src/pages/searchList/index.tsx
@@ -1,21 +1,87 @@
-import { View } from "@tarojs/components"
+import { ScrollView, Text, View } from "@tarojs/components"
import classnames from "classnames";
import Search from '@/components/search'
-import Product from '@/components/product'
+import Filter from "@/components/filter";
import InfiniteScroll from '@/components/infiniteScroll'
+import SortBtn from "@/components/sortBtn";
+import Tabs from "@/components/tabs";
import styles from './index.module.scss'
+import { useState } from "react";
export default () => {
+ const [showFilter, setShowFilter] = useState(false)
+ const [selectList, setSelectList] = useState([
+ {title: '系列', value:1},
+ {title: '系列', value:2},
+ {title: '系列', value:3},
+ {title: '系列', value:4},
+ {title: '系列', value:5},
+ {title: '系列', value:5},
+ {title: '系列', value:5},
+ {title: '系列', value:5},
+ {title: '系列', value:5},
+ ])
return (
-
+
+
+
+
+
+ 综合
+
+
+
+ 收藏
+
+
+
+ 高级搜索
+
+
+
+
+
+
+ 系列
+ 幅宽
+ 克重
+ 克重
+ 克重
+ 成分
+
+
+ setShowFilter(true)}>
+ 筛选
+
+
+
+
- console.log('123123')}>
-
-
+ 搜索结果 (2条记录)
+
+ console.log('123123')}>
+
+ {new Array(9).fill(' ').map(item => {
+ return
+
+
+ 0770#21S精棉平纹
+
+ 160cm
+ 110g
+
+ 67.6%棉24%涤纶6.4%氨纶
+
+
+ })}
+
+
+
+ setShowFilter(false)}/>
)
}
\ No newline at end of file
diff --git a/src/styles/iconfont.scss b/src/styles/iconfont.scss
index 3fc43f6..14c7f83 100644
--- a/src/styles/iconfont.scss
+++ b/src/styles/iconfont.scss
@@ -1,7 +1,7 @@
@font-face {
font-family: "iconfont"; /* Project id 2987621 */
src:
- url('iconfont.ttf?t=1649906813989') format('truetype');
+ url('iconfont.ttf?t=1650013104232') format('truetype');
}
.iconfont {
@@ -12,6 +12,18 @@
-moz-osx-font-smoothing: grayscale;
}
+.icon-shaixuan:before {
+ content: "\e689";
+}
+
+.icon-sort-up-full:before {
+ content: "\ea4c";
+}
+
+.icon-sort-down-full:before {
+ content: "\ea4d";
+}
+
.icon-shoucang:before {
content: "\e63e";
}
@@ -44,6 +56,14 @@
content: "\e633";
}
+.icon-wode-copy:before {
+ content: "\e6cb";
+}
+
+.icon-fenlei-copy:before {
+ content: "\e6ca";
+}
+
.icon-tick_gou:before {
content: "\e62e";
}
diff --git a/src/styles/iconfont.ttf b/src/styles/iconfont.ttf
index 08f4649a811dda082bac10e66fa552fa3f7f3aa6..01f5b132bd61f148e5965ca0f63578df6ec97f95 100644
GIT binary patch
delta 1413
zcmYjQ%WoS+82`RqzwOxTc)fN-c8Tp~X#;Um*N$nExHduxRTESt7fU^0lSduJiLE@;
zw1?W2dZ~m&kr79TME-!FAaaQ!!vPW6gM~QrkkCk2NC*j}3aFQFc0*uxfAc+NzUR#R
ztv?)j9B<630Qe37lor;?^?G4?9zb}Vuz$OHcX{aDUmpV4&ja**TUjbE4ywKt+WP}x
zyg~}+_u>b{9}&)1*0y$vX!OY6FC-VMwT1G~@Y&Ie^KS(v{{XLz6ae4d|7q-B
zY8Xb-h9a-R1p?R7;C4z&!+oJU+v;Gh)k9y)FGO3KFx1#HmjONm(d1qs>LHswu)ziy
z`b|d;mSkfr#~!gK-C4r`Fy$1vQ4HR!49*eB33PGcjQv(gL{#Mip~FfN07B1p#*10)+#Xwm^Y_
zWh_t%z{V|5GQhGHc**Ql3zQ(RD-AxK2EIx>fwBfRVS(}oHfez>0XAiUY66zCKpg}|
zhs?oy%T6p%!N9(@K&1nFVu6|f-5CqepwsKlTHu|bk%Bqcz+v3OWBf*_3ZII@;yv-H
zZOm4*?c2VzSMBdR`W^QjUD|724e^196d*|5J4YFa!ALNaiG@Q%MSCoK_6f~)zWtm}
z0_AC#XmCbo8_;X!v5k<=6Wh*X6QNzmU(4qy2)|e$%Hjil3>b?iF&oNZN{NINKMI{*
zDVlKkI&L+tx;s8s0(Z5fjOBnN1$w*Tq{i)yrbsH&Ui4#Je@WDHcsZ8R5-2+VGmYXd
z`9kRJN;I$}Cp9ez2m7|5qhU5j_)GYR`ge|+1W1YG1P#NoAH}#IWerm~OeZl!{*wY}
zoIF%EC!{otC=N6-#S8L{%G(p8H^=n6uIFb8x?cFg=|T6@t(99j7kVTwdfr&QSDp5t
z7q3o~D>uRyiv6
zd;%Ihj+Y?~87NT730X;vr}ela65})xi#rtOnR19kS)sPjlKo7ZB}Mqss!W?Rm(rLV
zpmU|aiPwF>ps#lrl%)An9iH?Kxzb$fO`mEPRJ^XLy+c)a(>cA&n?uLfx
z?q{;&(txTC92|QLCn~Mu{`eS%P{uGS7y;L2rM$AUU0(NX);6|Aw(BFy+tsSy6c%fD
i)=jbXV}DU`->EGwjV#pacfHF?>(!+dlW$!Kz4i}{VIQpk
delta 664
zcmXw#ziU%b6vw~!-j}2{)+R!KSW!!?ooorQR;@9G5ClON5h*VAk+#W@v;jNRK_VrE
zS{y8I5;cqeK&4BCPQ@h-(!p7sjvx*$E>ipa-goVNeC|E>+;hI?ywe&x7=4jx-g*hB
z=KyBQb-z*m-hKt>EO}6=Jzn_uzH%4vwt!@-I`7X7pZa7N`;AOi=}3Gvo3wYyNVUGa
zQc~d|^?veRsx6iMfty43m~Zt*>i$YYUBENG5Ar^|=-1~{r{Cr&o|<66N@MBK^7Na9
zap2@@27KAvJwKg>qDk5VA4VVc=6@sU(ZSazrN2jK7=}+hWo(r$XzS&&dFkM++S1Yq
z_EjMm(u2X2KGWQYo`4oiWL@Oh&G-#?m|;?PB%)A(oP*MkOAZ!+a99?W
zgIsp7Fl5rf79dv~YzA`G!L}gRBAOgIjVT9vgyFYH?+iN`s36&03`!Wi_
M=f0Vs*k4rm2RBTNb^rhX
From c9d6d1a063c5f8d92ff82d51bf4df8cef2811b84 Mon Sep 17 00:00:00 2001
From: czm <2192718639@qq.com>
Date: Mon, 18 Apr 2022 10:10:53 +0800
Subject: [PATCH 09/10] =?UTF-8?q?=E6=90=9C=E7=B4=A2=E5=88=97=E8=A1=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/pages/searchList/index.module.scss | 2 +-
src/styles/common.scss | 1 -
2 files changed, 1 insertion(+), 2 deletions(-)
diff --git a/src/pages/searchList/index.module.scss b/src/pages/searchList/index.module.scss
index bfd5e54..9d6d626 100644
--- a/src/pages/searchList/index.module.scss
+++ b/src/pages/searchList/index.module.scss
@@ -99,7 +99,7 @@
position: absolute;
left: -15px;
background-color: red;
- background: linear-gradient(270deg, #fff 30%, rgba(255,255,255, 0.3) );
+ background: linear-gradient(to right, #fff 30%, rgba(255,255,255, 0.3) );
// z-index: 99;
}
.miconfont{
diff --git a/src/styles/common.scss b/src/styles/common.scss
index 6c136a7..247c736 100644
--- a/src/styles/common.scss
+++ b/src/styles/common.scss
@@ -29,5 +29,4 @@ $font_size_min: 22px;
}
-//按钮样式,未选择
From 9653ad4990887dc2cf061bc00ead40daa009e7d2 Mon Sep 17 00:00:00 2001
From: czm <2192718639@qq.com>
Date: Mon, 18 Apr 2022 11:50:05 +0800
Subject: [PATCH 10/10] =?UTF-8?q?=E5=85=AC=E5=85=B1=E6=B7=BB=E5=8A=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/components/address/index.module.scss | 59 ++++++
src/components/address/index.tsx | 233 +++++++++++++++++++++++
src/components/infiniteScroll/index.tsx | 55 +++++-
src/pages/searchList/index.module.scss | 20 +-
src/pages/searchList/index.tsx | 17 +-
5 files changed, 376 insertions(+), 8 deletions(-)
create mode 100644 src/components/address/index.module.scss
create mode 100644 src/components/address/index.tsx
diff --git a/src/components/address/index.module.scss b/src/components/address/index.module.scss
new file mode 100644
index 0000000..a19253c
--- /dev/null
+++ b/src/components/address/index.module.scss
@@ -0,0 +1,59 @@
+.address_main{
+ width: 100%;
+ box-sizing: border-box;
+ .address_title{
+ display: flex;
+ justify-content: space-between;
+ color:$color_font_two;
+ font-size: $font_size;
+ padding: 20px;
+ padding-bottom: 0;
+ }
+ .address_select{
+ display: flex;
+ padding: 30px 0;
+ margin-top: 10px;
+ font-size: $font_size_medium;
+ border-bottom: 1px solid $color_font_two;
+ color: $common_title_font_color;
+ position: relative;
+ .address_item{
+ padding: 0 20px;
+ max-width: 200px;
+ @include common_ellipsis()
+ }
+ .bottom_index{
+ width: 100px;
+ height: 2px;
+ border-radius: 50px;
+ background-color:$color_font_two;
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ transition: left 0.1s;
+ }
+ }
+ .address_scroll{
+ height: 600px;
+ .address_scroll_list{
+ padding: 0 20px;
+ font-size: $common_main_font_size2;
+ .address_list_item{
+ padding: 20px 0;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ .address_list_item_name{
+ @include common_ellipsis()
+ }
+ .address_iconfont{
+ font-size: 30px !important;
+ }
+ }
+ }
+
+ }
+ .addresst_select{
+ color:$color_font_two;
+ }
+}
diff --git a/src/components/address/index.tsx b/src/components/address/index.tsx
new file mode 100644
index 0000000..ba44aa5
--- /dev/null
+++ b/src/components/address/index.tsx
@@ -0,0 +1,233 @@
+import { ScrollView, Text, View } from "@tarojs/components";
+import { memo, ReactHTMLElement, useEffect, useRef, useState } from "react";
+import Drawer from "@/components/popup";
+import styles from "./index.module.scss"
+import classnames from "classnames";
+import Taro from "@tarojs/taro";
+
+type Params = {
+ addressOnSelect?: ({}:{name: string, id:string|number}) => void,
+ addressOnClose?: () => void,
+ show?: true|false
+}
+
+export default memo(({
+ addressOnSelect,
+ addressOnClose,
+ show = false
+
+}: Params) => {
+ const list1 = [
+ {
+ name:'广东1',
+ id:1
+ },
+ {
+ name:'广东2',
+ id:2
+ },
+ {
+ name:'广东3',
+ id:3
+ },
+ {
+ name:'广东4',
+ id:4
+ },
+ {
+ name:'广东5',
+ id:5
+ },
+ {
+ name:'广东6',
+ id:6
+ }
+ ]
+
+ const list2 = [
+ {
+ name:'佛山1佛山1佛山1佛山1佛山1',
+ id:7
+ },
+ {
+ name:'佛山2',
+ id:8
+ },
+ {
+ name:'佛山3',
+ id:9
+ },
+ {
+ name:'佛山4',
+ id:10
+ },
+ {
+ name:'佛山5',
+ id:11
+ },
+ {
+ name:'佛山6',
+ id:12
+ }
+ ]
+
+ const list3 = [
+ {
+ name:'禅城区1',
+ id:13
+ },
+ {
+ name:'禅城区2',
+ id:14
+ },
+ {
+ name:'禅城区3',
+ id:15
+ },
+ {
+ name:'禅城区4',
+ id:16
+ },
+ {
+ name:'禅城区5',
+ id:17
+ },
+ {
+ name:'禅城区6',
+ id:18
+ }
+ ]
+
+ const [list, setList] = useState(list1)
+ const [selectIndex, setSelectIndex] = useState(0) //0 省, 1 市,2 区
+ const [selectId, setSelectId] = useState(0) //选中的id
+ const [selectArr, setSelectArr] = useState([]) //选中的省市区
+ const [cityStatus, setCityStatus] = useState(false) //城市是否存在
+ const [areaStatus, setAreaStatus] = useState(false) //区镇是否存在
+
+ const [bottomStyle, setBottomStyle] = useState({width:'100rpx',left:'0rpx'}) //底部滚动条样式
+
+ //选中内容
+ const selectItem = (item) => {
+ setSelectId(item.id)
+ if(selectIndex == 0) {
+ setSelectArr([item])
+ getCity()
+ setAreaStatus(false)
+ setCityStatus(false)
+ } else if(selectIndex == 1){
+ setSelectArr([selectArr[0], item])
+ area()
+ } else {
+ setSelectArr([selectArr[0], selectArr[1], item])
+ }
+ }
+
+ //选中标题
+ const onSelectIndex = (index) => {
+ setSelectIndex(index)
+ const selectid = selectArr[index]?selectArr[index].id:0
+ setSelectId(selectid)
+ }
+
+ useEffect(() => {
+ if(selectIndex == 0) {
+ setList(list1)
+ // getDomDes('#address_tab_0')
+ } else if (selectIndex == 1) {
+ getCity()
+ } else {
+ area()
+ }
+ }, [selectIndex])
+
+ //获取市
+ const getCity = () => {
+
+ setTimeout(() => {
+ if(list2.length > 0) {
+ setSelectIndex(1)
+ setList(() => { return list2 })
+ setCityStatus(true)
+ getDomDes('#address_tab_1')
+ } else {
+ setCityStatus(false)
+ }
+ },10)
+ }
+
+ //获取区
+ const area = () => {
+ // setAreaStatus(false)
+ setTimeout(() => {
+ if(list3.length > 0) {
+ setSelectIndex(2)
+ setList(() => { return list3 })
+ setAreaStatus(true)
+ getDomDes('#address_tab_2')
+ } else {
+ setAreaStatus(false)
+ }
+ },10)
+ }
+
+ //确定按钮
+ const submitSelect = () => {
+ addressOnClose?.()
+ addressOnSelect?.(selectArr)
+ }
+
+ //获取省市区宽度
+ const getDomDes = (id) => {
+ Taro.nextTick(() => {
+ let query = Taro.createSelectorQuery();
+ query.select(id).boundingClientRect(rect=>{
+ let left = rect.left;
+ let clientWidth = rect.width;
+ setBottomStyle({
+ width: clientWidth + 'px',
+ left: left + 'px'
+ })
+ }).exec();
+ })
+ }
+
+ //点击标题栏
+ const selectTab = (index) => {
+ onSelectIndex(index)
+ getDomDes('#address_tab_'+index)
+ }
+
+ return (
+ <>
+ addressOnClose?.()}>
+
+
+ addressOnClose?.()}>取消
+ submitSelect()}>确定
+
+
+ selectTab(0)} className={classnames(styles.address_item, {[styles.addresst_select]:(selectIndex == 0)})}>{selectArr[0]?selectArr[0].name:'请选择'}
+ {cityStatus&& selectTab(1)} className={classnames(styles.address_item, {[styles.addresst_select]:(selectIndex == 1)})}>{selectArr[1]?selectArr[1].name:'请选择'}}
+ {areaStatus&& selectTab(2)} className={classnames(styles.address_item, {[styles.addresst_select]:(selectIndex == 2)})}>{selectArr[2]?selectArr[2].name:'请选择'}}
+
+
+
+
+
+ {list.map(item => {
+ return (
+ selectItem(item)} className={classnames(styles.address_list_item, {[styles.addresst_select]:(selectId == item.id)})}>
+ {item.name}
+ {(selectId == item.id)&&}
+
+ )
+ })}
+
+
+
+
+
+ >
+ )
+})
\ No newline at end of file
diff --git a/src/components/infiniteScroll/index.tsx b/src/components/infiniteScroll/index.tsx
index b30d01b..1624ad8 100644
--- a/src/components/infiniteScroll/index.tsx
+++ b/src/components/infiniteScroll/index.tsx
@@ -9,12 +9,54 @@ type Params = {
hasMore?: false|true,
children?: ReactNode,
lowerThresholdNum?: number,
- paddingBottom?: number
+ selfOnScrollToUpper?:() => void
+ selfOnScroll?:(val:any) => void
+ selfOnRefresherPulling?: () => void
+ selfOnRefresherRefresh?: () => void
+ selfOnRefresherRestore?: () => void
+ selfOnRefresherAbort?: () => void
+ paddingBottom?: number,
+ refresherTriggered?: true|false,
+ refresherEnabled?: true|false
}
-export default memo(({styleObj, selfonScrollToLower, hasMore=true, children, lowerThresholdNum = 5, paddingBottom = 0}: Params) => {
+export default memo(({
+ styleObj,
+ selfonScrollToLower,
+ selfOnScrollToUpper,
+ selfOnScroll,
+ selfOnRefresherPulling,
+ selfOnRefresherRefresh,
+ selfOnRefresherRestore,
+ selfOnRefresherAbort,
+ hasMore=true,
+ children,
+ lowerThresholdNum = 5,
+ paddingBottom = 0,
+ refresherTriggered = false,
+ refresherEnabled = false
+}: Params) => {
const scrollToLower = () => {
selfonScrollToLower?.()
}
+ const scrollToUpper = () => {
+ selfOnScrollToUpper?.()
+ }
+ const scroll = (e) => {
+ selfOnScroll?.(e)
+ }
+ const refresherPulling = () => {
+ selfOnRefresherPulling?.()
+ }
+ const refresherRefresh = () => {
+ selfOnRefresherRefresh?.()
+ }
+ const refresherRestore = () => {
+ selfOnRefresherRestore?.()
+ }
+ const refresherAbort = () => {
+ selfOnRefresherAbort?.()
+ }
+
return (
<>
scrollToLower()}
+ onScrollToUpper={() => scrollToUpper()}
+ onScroll={(e) => scroll(e)}
lowerThreshold={lowerThresholdNum}
+ refresherEnabled = {refresherEnabled}
+ refresherTriggered = {refresherTriggered}
+ onRefresherPulling = {() => refresherPulling()}
+ onRefresherRefresh = {() => refresherRefresh()}
+ onRefresherRestore = {() => refresherRestore()}
+ onRefresherAbort = {() => refresherAbort()}
+ refresherBackground ='#ccc'
>
{children}
diff --git a/src/pages/searchList/index.module.scss b/src/pages/searchList/index.module.scss
index 9d6d626..fe0e4de 100644
--- a/src/pages/searchList/index.module.scss
+++ b/src/pages/searchList/index.module.scss
@@ -57,11 +57,18 @@
.filter_scroll{
flex:1;
width: 0;
+ ::-webkit-scrollbar {
+ display:none;
+ width:0;
+ height:0;
+ color:transparent;
+ }
}
.filter_btn{
display: flex;
justify-content: space-between;
padding: 20px;
+ margin-right: 20px;
flex:1;
view{
font-size: $font_size_medium;
@@ -75,6 +82,9 @@
&:nth-last-child(n+2) {
margin-right: 10px;
}
+ &:nth-last-child(1) {
+ margin-right: 30px;
+ }
}
.selected{
background-color: #ecf5ff;
@@ -94,12 +104,11 @@
&::before{
content: '';
opacity: 1;
- width: 60px;
+ width: 30px;
height: 100%;
position: absolute;
left: -15px;
- background-color: red;
- background: linear-gradient(to right, #fff 30%, rgba(255,255,255, 0.3) );
+ background-image: linear-gradient(to right, rgba(248, 248, 248, 0.3), rgba(248, 248, 248, 1) 60% );
// z-index: 99;
}
.miconfont{
@@ -115,10 +124,15 @@
font-size: $font_size_min;
color:$color_font_two;
padding: 10px 38px;
+
+ }
+ .list_num_shadow {
+ box-shadow: 0px 5px 5px #ccc;
}
.scroll{
flex:1;
height:0;
+ padding-top: 3px;
}
.product_list{
padding: 38px;
diff --git a/src/pages/searchList/index.tsx b/src/pages/searchList/index.tsx
index 9fbd651..762ee3a 100644
--- a/src/pages/searchList/index.tsx
+++ b/src/pages/searchList/index.tsx
@@ -6,7 +6,7 @@ import InfiniteScroll from '@/components/infiniteScroll'
import SortBtn from "@/components/sortBtn";
import Tabs from "@/components/tabs";
import styles from './index.module.scss'
-import { useState } from "react";
+import { useCallback, useState } from "react";
export default () => {
const [showFilter, setShowFilter] = useState(false)
@@ -21,6 +21,14 @@ export default () => {
{title: '系列', value:5},
{title: '系列', value:5},
])
+ const [scrollStatus, setScrollStatus] = useState(false)
+ const onscroll = useCallback((e) => {
+ if(e.detail.scrollTop > 20) {
+ setScrollStatus(true)
+ } else {
+ setScrollStatus(false)
+ }
+ },[])
return (
@@ -60,9 +68,12 @@ export default () => {
- 搜索结果 (2条记录)
+ 搜索结果 (2条记录)
- console.log('123123')}>
+ console.log('123123')}
+ selfOnScroll={(e) => onscroll(e)}
+ >
{new Array(9).fill(' ').map(item => {
return