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

Merge branch 'dev' of http://git.online.zzfzyc.com/mp/EShop into dev

Browse Source
This commit is contained in:
li tong bao
2022-05-11 14:16:32 +08:00
parent 231423a03b d5622d5b0a
commit 72338bc637
94 changed files with 6491 additions and 324 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/classList/index.module.scss
+4 -11
View File
@@ -15,6 +15,8 @@
color: $color_font_three;
.text_one{
color: $color_main;
display: flex;
align-items: center;
}
.text_two{
position: relative;
@@ -33,20 +35,11 @@
}
}
}
.filter_btn{
.filter_btns{
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;
src/pages/classList/index.tsx
+19 -6
View File
@@ -7,9 +7,22 @@ import Popup from "@/components/popup";
import styles from './index.module.scss'
import { useState } from "react";
import Filter from "./components/filter";
import Tabs from "@/components/tabs";
import SortBtn from "@/components/sortBtn";
export default () => {
const [showPopup, setShowPopup] = useState(false)
const [selectList, setSelectList] = useState([
{title: '系列', value:1},
{title: '系列', value:2},
{title: '系列', value:3},
{title: '系列', value:4},
{title: '系列', value:6},
{title: '系列', value:7},
{title: '系列', value:8},
{title: '系列', value:9},
{title: '系列', value:10},
])
return (
<View className={styles.main}>
<View className={styles.search}>
@@ -17,17 +30,17 @@ export default () => {
</View>
<View className={styles.filter}>
<View className={styles.filter_all}>
<View className={styles.text_one}>综合</View>
<View className={styles.text_one}>
<Text>综合</Text>
<SortBtn status="top"/>
</View>
<View className={styles.text_two} onClick={() => setShowPopup(true)}>
<Text>筛选</Text>
<Text className={classnames('iconfont icon-bianji_bianji', styles.miconfont)}></Text>
</View>
</View>
<View className={styles.filter_btn}>
<View>系列</View>
<View>幅宽</View>
<View>克重</View>
<View className={styles.selected}>成分</View>
<View className={styles.filter_btns}>
<Tabs list={selectList} style={{}}/>
</View>
</View>
<View className={styles.list}>
src/pages/details/components/counter/index.tsx
+9 -8
View File
@@ -3,18 +3,19 @@ import { useEffect, useMemo, useRef, useState } from "react"
import Big from 'big.js'
import styles from "./index.module.scss"
type params = {
minNum?: number,
maxNum?: number,
step?: number,
defaultNum?: number,
minNum?: number, //最小值
maxNum?: number, //最大值
step?: number, //步长
defaultNum?: number, //默认值
digits?: number //多少位小数
onChange?:(val:number) => void,
onBlue?:(val:number) => void,
onClickBtn?:(val:number) => void,
onChange?:(val:number) => void,
onBlue?:(val:number) => void, //失去焦点触发
onClickBtn?:(val:number) => void,
unit?: string
}
export default ({minNum = 0, maxNum = 100, step=1, digits = 0, defaultNum = 0, onChange, onBlue, onClickBtn, unit = ''}: params) => {
const [value, setValue] = useState<any>({count:defaultNum})
const onPlus = () => {
let {count} = value
let num_res = Big(count).add(step).toNumber()
@@ -27,7 +28,7 @@ export default ({minNum = 0, maxNum = 100, step=1, digits = 0, defaultNum = 0, o
const minus = () => {
let {count} = value
let num_res = Big(count).minus(step).toNumber()
num_res = num_res <= minNum?minNum:num_res
num_res = num_res < minNum?0:num_res
setValue({...value, count:num_res})
onChange?.(parseFloat(num_res))
onClickBtn?.(parseFloat(num_res))
src/pages/details/components/orderCount/index.module.scss
+6
View File
@@ -102,6 +102,12 @@
font-size: $font_size;
color: $color_main;
}
.priceText{
font-size: $font_size_big;
Text{
font-size: $font_size_min;
}
}
}
.btn_con{
display: flex;
src/pages/details/components/orderCount/index.tsx
+83 -41
View File
@@ -1,4 +1,4 @@
import {Image, ScrollView, View } from "@tarojs/components"
import {Image, ScrollView, View, Text } from "@tarojs/components"
import Popup from "@/components/popup"
import LoadingCard from "@/components/loadingCard";
import Search from "@/components/search";
@@ -7,62 +7,65 @@ import Counter from "../counter";
import Big from 'big.js'
import classnames from "classnames";
import styles from "./index.module.scss"
import { memo, useEffect, useState } from "react";
import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
import {GetColorList} from "@/api/materialColor"
import { useRouter } from "@tarojs/taro";
import UseLogin from "@/use/useLogin"
import { formatHashTag, formatMillionYuan } from "@/common/fotmat";
import { getFilterData } from "@/common/util";
type param = {
show?: true|false,
onClose?: () => void
onClose?: () => void,
title?: string,
productId?: number
}
export default memo(({show = false, onClose}: param) => {
export default memo(({show = false, onClose, title = '', productId = 0}: param) => {
const selectList = [
{step:1, digits:2, title:'剪板', unit:'米'},
{step:1, digits:2, title:'散剪', unit:'米'},
{step:1, digits:0, title:'大货', unit:'件'}
{id: 0, step:1, digits:0, maxNum:100000, defaultNum:1, title:'大货', unit:'件', eunit:'kg'},
{id: 1, step:1, digits:2, maxNum:9.99, defaultNum:1, title:'剪板', unit:'米', eunit:'m'},
{id: 2, step:1, digits:2, minNum:10, maxNum:100000, defaultNum:10, title:'散剪', unit:'米', eunit:'kg'},
]
const [selectIndex, setSelectIndex] = useState(0)
const selectProduct = (index:number) => {
setSelectIndex(index)
}
//获取面料颜色列表
const {fetchData:colorFetchData} = GetColorList()
const [list, setList] = useState<any[]>([])
const [loading, setLoading] = useState(false)
console.log('执行执行')
const condition = useRef({physical_warehouse:1, sale_mode:selectIndex, product_id:0, code_or_name:null})
const getColorList = async () => {
setLoading(() => true)
console.log('数据:::',getFilterData(condition.current))
let {data} = await colorFetchData(getFilterData(condition.current))
setList([...data.list])
setLoading(() => false)
}
const [showPopup, setShowPopup] = useState(false)
//显示获取
useEffect(() => {
if(!show) return
let lists:any[] = []
for(let i = 0; i < 20; i++) {
lists = [...lists, {
title:`${i}#薄荷绿`,
subtitle: '0770# 21S单面平纹(食毛)',
tag: '剪板',
count:0,
show: false,
}]
if(show) {
condition.current.product_id = productId
getColorList()
}
setList([...lists])
setShowPopup(show)
}, [show])
//卸载清空
useEffect(() => {
return () => {
setList([])
}
}, [])
const [showPopup, setShowPopup] = useState(false)
useEffect(() => {
setShowPopup(show)
}, [show])
//popup关闭
const closePopup = () => {
onClose?.()
setShowPopup(false)
}
//计算总数量和总米/件数
const [selectCount, setSelectCount] = useState({
sumCount: 0,
@@ -88,8 +91,9 @@ export default memo(({show = false, onClose}: param) => {
}
const onAdd = (item) => {
item.show = true
item.count = item.count == 0?1:item.count
setList([...list])
item.count = selectList[selectIndex].defaultNum
console.log('aa:::',item.count)
setList((list) => [...list])
}
//搜索显示与隐藏
@@ -98,12 +102,47 @@ export default memo(({show = false, onClose}: param) => {
setSearchShow(true)
}
//添加购物车
const {getSelfUserInfo} = UseLogin()
const addShopCart = () => {
getSelfUserInfo()
}
//显示金额
const priceFormat = useCallback((item) => {
let price = 0
if(selectIndex == 0) {
price = formatMillionYuan(item.bulk_price, 100).num
} else if(selectIndex == 1) {
price = formatMillionYuan(item.length_cut_price, 100).num
} else {
price = formatMillionYuan(item.weight_cut_price, 100).num
}
return <View className={styles.priceText}><Text>¥</Text>{Number(price) }<Text>{' /' + selectList[selectIndex].eunit}</Text></View>
}, [list, selectIndex])
//重置数据
useEffect(() => {
const newList = list.map(item => {
item.count = 0
item.show = false
return item
})
setList([...newList])
}, [selectIndex])
//筛选数据
const searchInput = (e) => {
condition.current.code_or_name = e
getColorList()
}
return (
<View className={styles.shop_cart_main}>
<Popup showTitle={false} show={showPopup} onClose={() => closePopup()}>
<View className={styles.popup_con}>
<View className={styles.header}>0770# 21S单面平纹(食毛)</View>
<View className={styles.header}>{title}</View>
<View className={styles.search}>
<View className={styles.search_title}>下单类型:</View>
<View className={styles.search_list}>
@@ -114,25 +153,26 @@ export default memo(({show = false, onClose}: param) => {
</View>
{searchShow&&<View className={styles.colorFind}>
<View className={styles.search}>
<Search placeIcon="out" />
<Search placeIcon="out" changeOnSearch={(e) => searchInput(e)} debounceTime={400}/>
</View>
<View className={styles.text} onClick={() => setSearchShow(false)}>取消</View>
</View>}
<View className={styles.colorNum}>
<View className={styles.title}>颜色分类 (13)</View>
<View className={classnames('iconfont icon-sousuo', styles.miconfont)} onClick={() => changeSearchShow()}></View>
<View className={styles.title}>颜色分类 (13) {list.length}</View>
{!searchShow&&<View className={classnames('iconfont icon-sousuo', styles.miconfont)} onClick={() => changeSearchShow()}></View>}
</View>
<View className={styles.product_color_con}>
{list.length > 0&&<InfiniteScroll>
{list.length > 0&&<InfiniteScroll moreStatus={false}>
<View className={styles.color_con}>
{list.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'/>
<Image src={item.texture_url}/>
</View>
<View className={styles.item_con}>
<View className={styles.title}>{item.title}</View>
<View className={styles.num}>¥25.5/m</View>
<View className={styles.title}>{formatHashTag(item.code, item.name)}</View>
<View className={styles.num}>{priceFormat(item)}</View>
</View>
<View className={styles.btn_con}>
{!item.show&&<View className={styles.btn} onClick={() => onAdd(item)}>添加</View>
@@ -144,6 +184,8 @@ export default memo(({show = false, onClose}: param) => {
digits={selectList[selectIndex].digits}
onClickBtn={(e) => getInputValue(e, item)}
unit={selectList[selectIndex].unit}
minNum={selectList[selectIndex].minNum}
maxNum={selectList[selectIndex].maxNum}
/>
</View>}
</View>
@@ -156,7 +198,7 @@ export default memo(({show = false, onClose}: param) => {
<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={classnames(styles.add_cart, selectCount.kindCount&&styles.select_add_cart)}>加入购物车</View>
<View className={classnames(styles.add_cart, selectCount.kindCount&&styles.select_add_cart)} onClick={() => addShopCart()}>加入购物车</View>
</View>
</View>
</View>
src/pages/details/components/preview/index.module.scss
+1 -1
View File
@@ -30,7 +30,7 @@
margin-top: 10px;
background-color: rgba(0,0,0, 0.5);
padding: 0 10px;
@include common_ellipsis
@include common_ellipsis(1);
}
}
}
src/pages/details/components/swiper/index.tsx
+6 -3
View File
@@ -1,15 +1,16 @@
import { Image, Swiper, SwiperItem, View } from "@tarojs/components"
import { useMemo, useState } from "react"
import { useMemo, useRef, useState } from "react"
import styles from './index.module.scss'
type item = {title:string, img:string, url:string, id:number}
type params = {
list?: item[]
}
}
export default ({list = []}: params) => {
const [pageIndex, setPageIndex] = useState(1)
const pageRef = useRef<any>(null)
const pageCount = useMemo(() => {
return list.length
@@ -17,7 +18,9 @@ export default ({list = []}: params) => {
const swiperChange = (e) => {
setPageIndex(e.detail.current + 1)
pageRef.current.innerHTML = 2
}
return (
<View className={styles.swiper}>
@@ -30,7 +33,7 @@ export default ({list = []}: params) => {
</SwiperItem>
})}
</Swiper>
<View className={styles.page}>{pageIndex+'/'+pageCount}</View>
<View className={styles.page} ref={pageRef}>{pageIndex+'/'+pageCount}</View>
</View>
)
}
src/pages/details/index.config.ts
+3 -1
View File
@@ -1,3 +1,5 @@
export default {
navigationBarTitleText: '详情'
navigationBarTitleText: '详情',
enablePullDownRefresh: true,
backgroundTextStyle: 'dark'
}
src/pages/details/index.module.scss
+17 -1
View File
@@ -28,11 +28,20 @@
font-size: $font_size_min;
text-align: center;
color: $color_font_three;
position: relative;
.text{
margin-top: 10px;
font-size: $font_size_medium;
}
}
.shareBtn {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
}
.miconfont{
font-size: 36px;
}
@@ -53,9 +62,16 @@
.con{
display: grid;
grid-template-columns: 260px auto;
grid-template-rows: 50px 50px;
font-size: $font_size_medium;
color: $color_font_three;
.des_text{
display: flex;
margin-bottom: 16px;
text{
flex:1;
@include common_ellipsis(1);
}
}
}
}
.product_color{
src/pages/details/index.tsx
+69 -42
View File
@@ -1,13 +1,20 @@
import { Image, RichText, Swiper, SwiperItem, View } from '@tarojs/components'
import Taro from '@tarojs/taro';
import { Button, Image, RichText, ScrollView, Swiper, SwiperItem, Text, View } from '@tarojs/components'
import Taro, { useDidShow, useRouter, useShareAppMessage } from '@tarojs/taro';
import classnames from "classnames";
import DesSwiper from './components/swiper';
import OrderCount from './components/orderCount';
import ShopCart from '@/components/shopCart';
import Preview,{colorItem} from './components/preview';
import styles from './index.module.scss'
import { useMemo, useState } from 'react';
import { useEffect, useMemo, useState } from 'react';
import {formatHashTag} from '@/common/fotmat'
import useManualPullDownRefresh from '@/use/useManualPullDownRefresh';
import { goLink } from '@/common/common';
import useUserInfo from '@/use/useUserInfo';
import {GetProductDetailApi} from '@/api/material'
import useLogin from '@/use/useLogin';
type item = {title:string, img:string, url:string, id:number}
type params = {
@@ -16,6 +23,28 @@ type params = {
style?: Object
}
export default (props:params) => {
const {checkLogin} = useLogin()
useDidShow(() => {
checkLogin()
})
const router = useRouter()
//获取数据
const [productInfo, setProductInfo] = useState<any>({})
const {fetchData} = GetProductDetailApi()
useEffect(() => {
getProductDetail()
}, [])
const getProductDetail = async () => {
let {data} = await fetchData({id: router.params.id})
setProductInfo(data)
}
//面料名称
const productName = useMemo(() => {
return formatHashTag(productInfo.code, productInfo.name)
},[productInfo])
const list = [
{
@@ -34,39 +63,20 @@ export default (props:params) => {
const [showCart, setShowCart] = useState(false)
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,
title: item.code,
img: item.texture_url,
})
setShowPreview(true)
}
@@ -80,44 +90,61 @@ export default (props:params) => {
duration: 2000
})
}
useShareAppMessage(res => {
if (res.from === 'button') {
// 来自页面内转发按钮
console.log(res.target)
}
return {
title: '自定义转发标题',
path: '/pages/details/index?id=10',
imageUrl: list[0].img
}
})
return (
<View className={styles.main}>
<DesSwiper list={list}/>
<View className={styles.product_header}>
<View className={styles.title}>
<View className={styles.name}>0770# 21S单面平纹(食毛)</View>
<View className={styles.des}>面料描述，疯狂描述。。。</View>
<View className={styles.name}>{productName}</View>
<View className={styles.des}>{productInfo.describe}</View>
</View>
<View className={styles.share}>
<View className={classnames('iconfont icon-fenxiang', styles.miconfont)}></View>
<View className={styles.text}>分享</View>
<Button open-type="share" className={styles.shareBtn}></Button>
</View>
<View className={styles.collect}>
<View className={classnames('iconfont icon-shoucang', styles.miconfont, collectStatus&&styles.collected)} onClick={() => changeCollect()}></View>
<View className={styles.text}>收藏</View>
</View>
</View>
<View className={styles.des_data}>
<View className={styles.title}>详情参数</View>
<View className={styles.con}>
<View>编号:0770</View>
<View>幅宽:160cm</View>
<View>克重:160g</View>
<View>成分:67.6%棉24%涤纶6.4%氨纶%氨纶</View>
<View className={styles.des_text}>编号：<Text>{productInfo.code}</Text></View>
<View className={styles.des_text}>幅宽：<Text>{productInfo.width}</Text></View>
<View className={styles.des_text}>克重：<Text>{productInfo.weight_density}</Text></View>
<View className={styles.des_text}>成分：<Text>{productInfo.component}</Text></View>
</View>
</View>
<View className={styles.product_color}>
<View className={styles.title}>色号 (10)</View>
<View className={styles.list}>
{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}>{item.title}</View>
</View>
})}
</View>
<View className={styles.list}>
{productInfo?.product_color_list?.map(item => {
return <View className={styles.item} onClick={() => getColorItem(item)}>
<View className={styles.item_color}>
<Image src={item.texture_url}></Image>
</View>
<View className={styles.item_name}>{item.code}</View>
</View>
})}
</View>
</View>
<View className={styles.product_detail}>
<RichText nodes={html}></RichText>
@@ -129,7 +156,7 @@ export default (props:params) => {
</View>
<View className={styles.buy_btn} onClick={() => setShowOrderCount(true)}>开始下单</View>
</View>
<OrderCount show={showOrderCount} onClose={() => setShowOrderCount(false)}/>
<OrderCount show={showOrderCount} onClose={() => setShowOrderCount(false)} title={productName} productId={productInfo.id}/>
<ShopCart show={showCart} onClose={() => setShowCart(false)}/>
<Preview value={colorInfo} show={showPreview} onClose={() => setShowPreview(false)}/>
<View className='common_safe_area_y'></View>
src/pages/index/index.config.ts
+3 -1
View File
@@ -1,3 +1,5 @@
export default {
navigationBarTitleText: '电子商城'
navigationBarTitleText: '电子商城',
enablePullDownRefresh: true,
backgroundTextStyle: 'dark'
}
src/pages/index/index.module.scss
+3
View File
@@ -20,6 +20,9 @@
text-align: center;
line-height: 44px;
}
.search_input{
width: 300px;
}
}
.products{
flex:1;
src/pages/index/index.tsx
+89 -27
View File
@@ -1,51 +1,113 @@
import {View} from '@tarojs/components'
import Swiper from '@/components/swiper'
import Banner from '@/components/banner'
import Search from '@/components/search'
import SideBar from '@/components/sideBar'
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'
import styles from './index.module.scss'
import { useEffect, useRef, useState } from 'react'
import Taro, { Events, useDidShow, usePullDownRefresh, useRouter } from '@tarojs/taro'
import useManualPullDownRefresh from '@/use/useManualPullDownRefresh'
import {GetProductKindListApi, GetProductListApi} from '@/api/material'
import useLogin from '@/use/useLogin'
export default () => {
const tabs_list = [
{title:'平纹系列', value: 1},
{title:'平纹系列', value: 2},
{title:'平纹系列', value: 3},
{title:'平纹系列', value: 4},
{title:'平纹系列', value: 5},
{title:'平纹系列', value: 6},
{title:'平纹系列', value: 7},
{title:'平纹系列', value: 8},
{title:'平纹系列', value: 9},
{title:'平纹系列', value: 10},
{title:'平纹系列', value: 11},
{title:'平纹系列', value: 12},
{title:'平纹系列', value: 13},
{title:'平纹系列', value: 14},
{title:'平纹系列', value: 15},
{title:'平纹系列', value: 16},
{title:'平纹系列', value: 17},
]
const {checkLogin} = useLogin()
useDidShow(async () => {
await checkLogin()
})
useEffect(() => {
categoryList()
}, [])
//获取面料种类
const [kindData, setKindData] = useState<any>({list:[], defaultId:0})
const {fetchData} = GetProductKindListApi()
const categoryList = async () => {
const res = await fetchData()
if(res.data?.list) {
setKindData({...kindData, list:res.data.list, defaultId: res.data.list[0].id})
setFiltrate({...filtrate, product_kind_id:res.data.list[0].id})
}
}
//获取面料列表
const [productData, setProductData] = useState({list:[], total:0})
const [hasMore, setHasMore] = useState(true)
const [filtrate, setFiltrate] = useState({product_kind_id:0, size: 5,page: 1})
const pageNum = useRef(1)
const {fetchData: productFetchData, state: productState} = GetProductListApi()
//获取数据方法
const getProductList = async () => {
const {data,total} = await productFetchData(filtrate)
setProductData({...productData,list:data.list,total})
setRefresherTriggeredStatus(() => false)
}
//监听查询条件
useEffect(() => {
if(filtrate.product_kind_id)
getProductList()
}, [filtrate])
//点击面料类型
const getProductKindId = async (e) => {
pageNum.current = 1
setFiltrate({...filtrate, size:5, product_kind_id:e.id})
setHasMore(true)
}
//上拉加载数据
const getScrolltolower = () => {
if(productData.list.length >= productData.total) {
setHasMore(false)
} else {
pageNum.current++
const newSize = filtrate.size * pageNum.current
setFiltrate({...filtrate, size:newSize})
}
}
const [showShopCart, setShowShopCart] = useState(false)
//列表下拉刷新
const [refresherTriggeredStatus, setRefresherTriggeredStatus] = useState(false)
const getRefresherRefresh = async () => {
pageNum.current = 1
setFiltrate({...filtrate, size:5})
setHasMore(true)
setRefresherTriggeredStatus(true)
}
//页面下拉刷新
// const res = useManualPullDownRefresh()
usePullDownRefresh(() => {
console.log('123')
})
return (
<MoveBtn onClick={() => setShowShopCart(!showShopCart)}>
<View className={styles.main}>
<Swiper/>
<Banner/>
<View className={styles.search}>
<View className={styles.search_collect}>我的收藏</View>
<View className={styles.search_input}>
<Search disabled={true} style={{width: '263rpx'}} clickOnSearch={() => goLink('/pages/search/index')}/>
<Search disabled={true} style={{width: '263rpx'}} clickOnSearch={() => goLink('/pages/searchList/search')}/>
</View>
</View>
<View className={styles.products}>
<SideBar list={tabs_list} height="100%" heightItem={150}>
<Product/>
<SideBar list={kindData.list} height="100%" defaultValue={kindData.defaultId} hasMore={hasMore} selfOnScrolltolower={() => getScrolltolower()} sideBarOnClick={(e) => getProductKindId(e)} heightItem={150} refresherTriggered={refresherTriggeredStatus} selfOnRefresherRefresh={() => getRefresherRefresh()}>
<Product productList={productData.list}/>
</SideBar>
</View>
<View className='common_safe_area_y'></View>
src/pages/order/components/addressInfo/index.module.scss
+54
View File
@@ -0,0 +1,54 @@
.order_address{
height: 178px;
background: #ffffff;
border-radius: 20px;
display: flex;
align-items: center;
padding: 30px;
box-sizing: border-box;
margin-top: 20px;
.order_address_icon{
font-size: 60px;
}
.order_address_text_con{
flex:1;
padding: 0 30px;
box-sizing: border-box;
.order_address_text_title{
font-size: $font_size;
font-weight: 700;
@include common_ellipsis;
}
.order_address_text_name{
margin-top: 20px;
color: $color_font_three;
font-size: $font_size_medium;
text{
&:nth-child(1) {
margin-right: 40px;
}
}
}
}
.order_address_text_no{
flex: 1;
font-size: $font_size;
font-weight: 700;
margin-left: 30px;
}
.order_address_more_icon{
color: $color_font_three;
font-size: $font_size;
}
}
.order_address_list {
height: 900px;
.order_address_title{
font-size: $font_size;
font-weight: 700;
width: 100%;
text-align: center;
padding: 20px 0 30px 0;
}
}
src/pages/order/components/addressInfo/index.tsx
+32
View File
@@ -0,0 +1,32 @@
import AddressList from "@/components/AddressList";
import Popup from "@/components/popup";
import { Text, View } from "@tarojs/components"
import classnames from "classnames";
import { useState } from "react";
import styles from './index.module.scss'
export default () => {
const [showAddressList, setShowAddressList] = useState(false)
return (
<View>
<View className={styles.order_address} onClick={() => setShowAddressList(true)}>
<View className={classnames(styles.order_address_icon, 'iconfont icon-shaixuan')}></View>
{/* <View className={styles.order_address_text_no}>请选择收货地址及信息</View> */}
<View className={styles.order_address_text_con}>
<View className={styles.order_address_text_title}>**省**市**区**街道****仓库**省**市**区**街道****仓库</View>
<View className={styles.order_address_text_name}>
<Text>陈先生</Text>
<Text>1818877790</Text>
</View>
</View>
<View className={classnames(styles.order_address_more_icon, 'iconfont icon-jiantou')}></View>
</View>
<Popup show={showAddressList} showTitle={false} onClose={() => setShowAddressList(false)}>
<View className={styles.order_address_list}>
<View className={styles.order_address_title}>选择收货地址</View>
<AddressList onSelect={(item, index) => console.log(index, item)}/>
</View>
</Popup>
</View>
)
}
src/pages/order/components/estimatedAmount/index.module.scss
+23
View File
@@ -0,0 +1,23 @@
.order_price{
font-weight: 700;
display: flex;
align-items: center;
.order_price_text{
font-size: $font_size_medium;
margin-right: 10px;
}
.order_price_num{
text{
&:nth-child(1) {
font-size: $font_size_min;
}
&:nth-child(2) {
font-size: $font_size_big;
}
&:nth-child(3) {
font-size: $font_size_medium;
}
}
}
}
src/pages/order/components/estimatedAmount/index.tsx
+33
View File
@@ -0,0 +1,33 @@
import { Text, View } from "@tarojs/components"
import { useCallback, useEffect, useMemo } from "react"
import {formatKbPrice} from '@/common/common'
import styles from './index.module.scss'
type Param = {
style?: Object,
number?: number
}
export default ({style, number = 0}:Param) => {
const priceDom = useCallback(() => {
let res = number.toFixed(2).split('.')
let int_num = parseInt(res[0]) + ''
let decimals_num = res[1]
return (
<>
<Text>¥</Text>
<Text>{formatPrice(int_num)}</Text>
<Text>.{decimals_num}</Text>
</>
)
}, [number])
const formatPrice = useCallback((number: string) => {
return formatKbPrice(number)
}, [])
return (
<View className={styles.order_price}>
<Text className={styles.order_price_text}>预估金额</Text>
<View className={styles.order_price_num} style={style}>
{priceDom()}
</View>
</View>
)
}
src/pages/order/components/kindList/index.module.scss
+100
View File
@@ -0,0 +1,100 @@
.orders_list_con{
margin-top: 20px;
background-color: #fff;
border-radius: 20px;
padding: 20px;
.order_list{
&:nth-child(n+2) {
margin-top: 30px;
}
.order_list_title{
display: flex;
align-items: center;
.tag{
font-size: $font_size_min;
background-color: #CDE5FF;
padding: 5px 10px;
border-radius: 6px;
color: $color_main;
}
.title{
font-weight: 700;
font-size: $font_size;
margin-left: 20px;
flex:1;
}
.num{
color: $color_font_two;
font-size: $font_size_min;
}
}
}
.order_list_scroll{
margin-top: 30px;
.order_list_item {
display: flex;
&:nth-child(2) {
margin-top: 30px;
}
.order_list_item_img{
width: 126px;
height: 126px;
border-radius: 20px;
background-color: red;
}
.order_list_item_con{
display: flex;
width: 100%;
flex:1;
border-bottom: 1px solid #f0f0f0;
height: 150px;
padding-top: 20px;
box-sizing: border-box;
}
.order_list_item_des{
flex:1;
box-sizing: border-box;
padding-left: 30px;
.order_list_item_title{
font-weight: 700;
font-size: $font_size;
margin-bottom: 15px;
}
.order_list_item_price{
font-size: 26px;
color: $color_font_three;
}
}
.order_list_item_count{
.count_num{
color: $color_main;
font-size: $font_size;
margin-bottom: 15px;
font-weight: 400;
text{
font-size: $font_size_min;
}
}
.count_price {
font-size: $font_size;
font-weight: 700;
text{
font-size: $font_size_min;
}
}
}
}
}
.order_estimated_amount{
display: flex;
align-items: flex-end;
flex-direction: column;
padding: 30px 0;
.order_price_des{
font-size: $font_size_medium;
color: $color_font_two;
}
}
}
src/pages/order/components/kindList/index.tsx
+88
View File
@@ -0,0 +1,88 @@
import { View } from "@tarojs/components"
import { useState } from "react"
import EstimatedAmount from "../estimatedAmount"
import styles from './index.module.scss'
export default () => {
const [price, setPrice] = useState(123000.33)
return (
<>
<View className={styles.orders_list_con}>
<View className={styles.order_list}>
<View className={styles.order_list_title}>
<View className={styles.tag}>大货</View>
<View className={styles.title}>0770# 21S单面平纹(食毛)</View>
<View className={styles.num}>共3种</View>
</View>
<View className={styles.order_list_scroll}>
<View className={styles.order_list_item}>
<View className={styles.order_list_item_img}></View>
<View className={styles.order_list_item_con}>
<View className={styles.order_list_item_des}>
<View className={styles.order_list_item_title}>1# 薄荷绿</View>
<View className={styles.order_list_item_price}>¥40/kg</View>
</View>
<View className={styles.order_list_item_count}>
<View className={styles.count_num}>×1<text>条</text></View>
<View className={styles.count_price}><text>¥</text>1,000.5</View>
</View>
</View>
</View>
<View className={styles.order_list_item}>
<View className={styles.order_list_item_img}></View>
<View className={styles.order_list_item_con}>
<View className={styles.order_list_item_des}>
<View className={styles.order_list_item_title}>1# 薄荷绿</View>
<View className={styles.order_list_item_price}>¥40/kg</View>
</View>
<View className={styles.order_list_item_count}>
<View className={styles.count_num}>×1<text>条</text></View>
<View className={styles.count_price}><text>¥</text>1,000.5</View>
</View>
</View>
</View>
</View>
</View>
<View className={styles.order_list}>
<View className={styles.order_list_title}>
<View className={styles.tag}>大货</View>
<View className={styles.title}>0770# 21S单面平纹(食毛)</View>
<View className={styles.num}>共3种</View>
</View>
<View className={styles.order_list_scroll}>
<View className={styles.order_list_item}>
<View className={styles.order_list_item_img}></View>
<View className={styles.order_list_item_con}>
<View className={styles.order_list_item_des}>
<View className={styles.order_list_item_title}>1# 薄荷绿</View>
<View className={styles.order_list_item_price}>¥40/kg</View>
</View>
<View className={styles.order_list_item_count}>
<View className={styles.count_num}>×1<text>条</text></View>
<View className={styles.count_price}><text>¥</text>1,000.5</View>
</View>
</View>
</View>
<View className={styles.order_list_item}>
<View className={styles.order_list_item_img}></View>
<View className={styles.order_list_item_con}>
<View className={styles.order_list_item_des}>
<View className={styles.order_list_item_title}>1# 薄荷绿</View>
<View className={styles.order_list_item_price}>¥40/kg</View>
</View>
<View className={styles.order_list_item_count}>
<View className={styles.count_num}>×1<text>条</text></View>
<View className={styles.count_price}><text>¥</text>1,000.5</View>
</View>
</View>
</View>
</View>
</View>
<View className={styles.order_estimated_amount}>
<EstimatedAmount number={price}/>
<View className={styles.order_price_des}>（按照25kg/条, 预估金额）</View>
</View>
</View>
</>
)
}
src/pages/order/components/orderState/index.module.scss
+18
View File
@@ -0,0 +1,18 @@
.order_flow_state{
display: flex;
align-items: center;
padding: 0 30px;
height: 116px;
background-color: #fff;
border-radius: 20px;
.order_flow_state_text{
color: $color_main;
font-size:$font_size;
font-weight: 700;
}
.order_flow_state_desc{
color: $color_font_three;
font-size: $font_size_medium;
margin-left: 50px;
}
}
src/pages/order/components/orderState/index.tsx
+14
View File
@@ -0,0 +1,14 @@
import { View } from "@tarojs/components"
import styles from './index.module.scss'
export default ({
state = '',
desc = ''
}) => {
return (
<View className={styles.order_flow_state}>
<View className={styles.order_flow_state_text}>{state}</View>
<View className={styles.order_flow_state_desc}>{desc}</View>
</View>
)
}
src/pages/order/components/remark/index.module.scss
+48
View File
@@ -0,0 +1,48 @@
.order_popup{
display: flex;
flex-direction: column;
align-items: center;
padding: 20px 0;
.order_popup_title{
color: $font_size_big;
font-weight: 700;
color: #000000;
padding-bottom: 20px;
}
.order_popup_input{
width: 100%;
padding: 0 25px;
box-sizing: border-box;
margin-top: 43px;
position: relative;
.descDataNum{
position: absolute;
right: 40px;
bottom: 10px;
height: 39px;
font-size: $font_size_medium;
color: $color_font_two;
}
textarea{
background-color: #f3f3f3;
border-radius: 10px;
width: 100%;
height: 313px;
padding: 20px;
padding-bottom: 50px;
box-sizing: border-box;
font-size: $font_size;
border: 2px solid #e6e6e6;
}
}
.order_save_address{
height: 82px;
background: #007aff;
border-radius: 40px;
width: 668px;
text-align: center;
line-height: 82px;
color: #fff;
margin-top: 60px;
}
}
src/pages/order/components/remark/index.tsx
+38
View File
@@ -0,0 +1,38 @@
import Popup from "@/components/popup"
import { Textarea, View } from "@tarojs/components"
import { useCallback, useState } from "react"
import styles from './index.module.scss'
type Param = {
onBlur?: (val:any) => void
onSave?: (val: string) => void
}
export default ({onBlur, onSave}:Param) => {
const [descData, setDescData] = useState({
number: 0,
value: '',
count: 200
})
const getDesc = useCallback((e) => {
let value = e.detail.value
let res = value
if(value.length > descData.count) {
res = value.slice(0, descData.count)
}
setDescData({...descData, number:res.length, value: res})
},[])
const setSave = () => {
onSave?.(descData.value)
}
return (
<View className={styles.order_popup}>
<View className={styles.order_popup_title}>添加备注</View>
<View className={styles.order_popup_input}>
<Textarea placeholder="请添加备注" maxlength={descData.count} cursorSpacing={100} onInput={(e) => getDesc(e)} onBlur={(e) => onBlur?.(e)}></Textarea>
<View className={styles.descDataNum}>{descData.number}/{descData.count}</View>
</View>
<View className={styles.order_save_address} onClick={() => setSave()}>保存</View>
</View>
)
}
src/pages/order/index.config.ts
+3
View File
@@ -0,0 +1,3 @@
export default {
navigationBarTitleText: '确认订单'
}
src/pages/order/index.module.scss
+118
View File
@@ -0,0 +1,118 @@
.order_main{
min-height: 100%;
background-color:$color_bg_one;
padding: 20px;
padding-bottom: 190px;
box-sizing: border-box;
.order_title{
display: flex;
align-items: center;
padding: 20px 30px;
box-sizing: border-box;
background-color: #fff;
height: 116px;
border-radius: 20px;
margin-top: 20px;
text{
flex:1;
font-size: $font_size;
font-weight: 700;
}
.order_status{
background-color: #F0F0F0;
width: 148px;
height: 55px;
color: $color_font_three;
text-align: center;
line-height: 55px;
font-size: $font_size_medium;
border-radius: 30px;
&:nth-last-child(1) {
margin-left: 20px;
}
}
}
.order_desc{
display: flex;
align-items: center;
background-color: #fff;
padding: 0 20px;
height: 116px;
border-radius: 20px;
margin-top: 20px;
.order_desc_con{
flex:1;
font-size: $font_size;
font-weight: 700;
}
.order_desc_text{
font-size: $font_size_medium;
color: $color_font_two;
margin-right: 10px;
}
.miconfont{
font-size: 20px;
color: $color_font_two;
}
}
.submit_order{
display: flex;
position: fixed;
bottom: 0;
left: 0;
justify-content: space-between;
width: 100%;
height: 175px;
align-items: center;
background-color: #fff;
box-shadow: 6px 0px 12px 0px rgba(0,0,0,0.16);
padding: 20px 50px;
box-sizing: border-box;
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
.order_btn {
width: 250px;
height: 90px;
opacity: 0.6;
background: linear-gradient(38deg,#007aff, #4fa6ff 100%, #68b4ff 100%);
border-radius: 46px;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
}
.order_number_desc{
font-size: $font_size_medium;
color: $color_font_two;
}
}
.order_info{
background-color: #fff;
margin-top: 20px;
border-radius: 20px;
padding: 20px;
.order_info_title{
font-size: $font_size;
font-weight: 700;
margin-bottom: 20px;
}
.order_num{
display: flex;
justify-content: space-between;
align-items: center;
.order_num_btn{
font-size: $font_size_medium;
padding: 5px 10px;
border: 2px solid #007cf7;
border-radius: 10px;
color: $color_main;
}
}
text{
font-size: $font_size;
}
}
}
src/pages/order/index.tsx
+68
View File
@@ -0,0 +1,68 @@
import Popup from "@/components/popup";
import SearchInput from "@/components/searchInput";
import { Text, Textarea, View } from "@tarojs/components"
import Taro from "@tarojs/taro";
import classnames from "classnames";
import { useCallback, useEffect, useState } from "react";
import AddressInfo from "./components/addressInfo";
import EstimatedAmount from "./components/estimatedAmount";
import KindList from "./components/kindList";
import OrderState from "./components/orderState";
import Remark from "./components/remark";
import styles from './index.module.scss'
export default () => {
const [price, setPrice] = useState(123000.33)
const [showDesc, setShowDesc] = useState(false)
const clipboardData = () => {
Taro.setClipboardData({
data: '123123121321',
success: function (res) {
Taro.showToast({
icon: 'none',
title: '复制成功'
})
}
})
}
return (
<View className={styles.order_main}>
<OrderState state="预约中" desc="客服已接单，等待仓库配布出单..."/>
<View className={styles.order_title}>
<Text>收货方式</Text>
<View className={styles.order_status}>物流</View>
<View className={styles.order_status}>上门自提</View>
</View>
<AddressInfo/>
<KindList/>
<View className={styles.order_desc} onClick={() => setShowDesc(true)}>
<View className={styles.order_desc_con}>订单备注</View>
<View className={styles.order_desc_text}>点击填写</View>
<View className={classnames(styles.miconfont, 'iconfont icon-jiantou')}></View>
</View>
<View className={styles.order_info} >
<View className={styles.order_info_title}>订单备注</View>
<SearchInput showBorder={false} title='单号'>
<View className={styles.order_num}>
<Text>13535359535</Text>
<View className={styles.order_num_btn} onClick={() => clipboardData()}>复制</View>
</View>
</SearchInput>
<SearchInput showBorder={false} title='下单时间'>
<Text>2022-4-5 10:11:55</Text>
</SearchInput>
</View>
<View className={styles.submit_order}>
<View className={styles.submit_order_number}>
<EstimatedAmount style={{color:'#007AFF'}} number={price}/>
<View className={styles.order_number_desc}>2种面料，6种颜色，共6条</View>
</View>
<View className={styles.order_btn}>提交订单</View>
</View>
<Popup show={showDesc} showTitle={false} onClose={() => setShowDesc(false)} >
<Remark onSave={(e) => console.log(e)}/>
</Popup>
<View className="common_safe_area_y"></View>
</View>
)
}
src/pages/search/index.tsx
+2 -1
View File
@@ -4,12 +4,13 @@ import Search from '@/components/search'
import { goLink } from '@/common/common';
import classnames from "classnames";
import styles from './index.module.scss'
import { useEffect } from 'react';
export default () => {
return (
<View className={styles.main}>
<View className={styles.search}>
<Search style={{width: '100%'}} placeholder="请输入面料关键词" placeIcon="out" showBtn={true} clickOnSearch={() => goLink('/pages/searchList/index')}/>
<Search style={{width: '100%'}} debounceTime={300} changeOnSearch={(e) => console.log(e)} placeholder="请输入面料关键词" placeIcon="out" showBtn={true} />
</View>
<View className={styles.hot}>
<View className={styles.hot_header}>
src/pages/searchList/components/selectData/index.module.scss
+51
View File
@@ -0,0 +1,51 @@
.tabs_main{
display: flex;
width: 100%;
.tabs_scroll{
width: 100%;
display: flex;
white-space: nowrap;
::-webkit-scrollbar {
display:none;
width:0;
height:0;
color:transparent;
}
.tabs_item{
flex:1;
display: inline-block;
font-size: 24rpx;
background-color: #ecf5ff;
border-radius: 24rpx;
min-width: 126rpx;
height: 46.93rpx;
text-align: center;
line-height: 46.93rpx;
color: #707070;
margin-right: 20px;
border: 2px solid #cde5ff;
.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;
}
}
}
}
src/pages/searchList/components/selectData/index.tsx
+57
View File
@@ -0,0 +1,57 @@
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 [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}) => {
tabsOnClick?.(item)
setTabId(index.toString())
}
return (
<>
<View className={styles.tabs_main} id="tabs_main_ref">
<ScrollView className={styles.tabs_scroll} scrollX scrollWithAnimation={true} scrollIntoView={`tabs_${tabId}`}>
<View className={styles.tabs_scroll}>
{
list.map((item, index) => {
return (
<View key={index} id={`tabs_${index}`} className={styles.tabs_item} onClick={() => clickEvent({item,index})}>
<View className={classnames(styles.tabs_item_con)}>{item.title}</View>
</View>
)
})
}
</View>
</ScrollView>
</View>
</>
)
})
src/pages/searchList/hightSearchList.config.ts
+5
View File
@@ -0,0 +1,5 @@
export default {
navigationBarTitleText: '搜索',
enablePullDownRefresh: true,
backgroundTextStyle: 'dark'
}
src/pages/searchList/hightSearchList.module.scss
+216
View File
@@ -0,0 +1,216 @@
.main{
display: flex;
flex-direction: column;
height: 100vh;
background-color: $color_bg_one;
.search{
padding: 20px;
.SearchInput{
background-color: #fff;
padding: 10px 20px;
box-sizing: border-box;
border-radius: 10px;
}
.bluetooth_color{
.color_bock{
width: 100px;
height: 46px;
}
.color_bock_no{
font-size: $font_size_medium;
color: $color_font_three;
}
}
}
.filter{
.filter_all {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 130px;
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;
::-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;
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;
}
&:nth-last-child(1) {
margin-right: 30px;
}
}
.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: 30px;
height: 100%;
position: absolute;
left: -15px;
background-image: linear-gradient(to right, rgba(248, 248, 248, 0.3), rgba(248, 248, 248, 1) 60% );
// z-index: 99;
}
.miconfont{
font-size: 27px;
}
}
}
.list{
flex:1;
display: flex;
flex-direction: column;
.list_num {
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;
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;
position: relative;
image{
width: 100%;
height: 100%;
border-radius: 20px 20px 0px 0px;
}
.color_num {
background: rgba(0,0,0, 0.5);
border-radius: 0px 50px 0px 0px;
font-size: $font_size_min;
color: #fff;
position: absolute;
left:0;
bottom:0;
padding: 5px 20px;
box-sizing: border-box;
}
}
}
.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;
}
}
}
}
}
src/pages/searchList/hightSearchList.tsx
+132
View File
@@ -0,0 +1,132 @@
import { Image, ScrollView, Text, View } from "@tarojs/components"
import classnames from "classnames";
import Search from '@/components/search'
import Filter from "@/components/filter";
import InfiniteScroll from '@/components/infiniteScroll'
import SortBtn from "@/components/sortBtn";
import SearchInput from "@/components/searchInput";
import LinkBlueTooth from "@/components/bluetooth/LinkBlueTooth";
import {useBluetooth} from "@/use/contextBlueTooth"
import {toRgb} from '@/common/bluetooth/color/colorSpace'
import Tabs from "@/components/tabs";
import styles from './hightSearchList.module.scss'
import { useCallback, useEffect, useState } from "react";
import Taro, { useReady } from "@tarojs/taro";
import useManualPullDownRefresh from "@/use/useManualPullDownRefresh";
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},
])
const [scrollStatus, setScrollStatus] = useState(false)
const onscroll = useCallback((e) => {
if(e.detail.scrollTop > 20) {
setScrollStatus(true)
} else {
setScrollStatus(false)
}
},[])
const {state, measureAndGetLab} = useBluetooth()
const getLab = () => {
if(state.connected) {
measureAndGetLab()
} else {
Taro.showToast({
title: '请链接设备',
icon: 'none'
})
}
}
const [blueToothColor, setBlueToothColor] = useState('')
useEffect(() => {
if(state.deviceLab) {
console.log('颜色：',state.deviceLab)
const rgb = toRgb([state.deviceLab.L, state.deviceLab.a, state.deviceLab.b])
setBlueToothColor(`rgb(${rgb[0]}, ${rgb[1]}, ${rgb[2]})`)
}
}, [state.deviceLab])
//页面下拉刷新
const res = useManualPullDownRefresh()
return (
<View className={styles.main}>
<View className={styles.search}>
<View className={styles.SearchInput}>
<LinkBlueTooth/>
<SearchInput title="提取颜色" showBorder={false}>
<View className={styles.bluetooth_color} onClick={() => getLab()}>
{blueToothColor&&<View className={classnames(styles.color_bock)} style={{background:blueToothColor}}></View>||
<View className={classnames(styles.color_bock_no)} >请取色</View>
}
</View>
</SearchInput>
</View>
</View>
<View className={styles.filter}>
<View className={styles.filter_all}>
<View className={styles.text_zh}>
<Text>综合</Text>
<SortBtn status="top"/>
</View>
<View className={styles.text_sc} >
<Text>收藏</Text>
<SortBtn status="top"/>
</View>
</View>
<View className={styles.filter_btn_con}>
<ScrollView scrollX className={styles.filter_scroll}>
<View className={styles.filter_btn}>
<View>系列</View>
<View>幅宽</View>
<View>克重</View>
<View>克重</View>
<View>克重</View>
<View className={styles.selected}>成分</View>
</View>
</ScrollView>
<View className={styles.filter_more} onClick={() => setShowFilter(true)}>
<Text>筛选</Text>
<Text className={classnames('iconfont icon-shaixuan', styles.miconfont)}></Text>
</View>
</View>
</View>
<View className={styles.list}>
<View className={classnames(styles.list_num, scrollStatus&&styles.list_num_shadow)}>搜索结果 (2条记录)</View>
<View className={styles.scroll}>
<InfiniteScroll
selfonScrollToLower={() => console.log('123123')}
selfOnScroll={(e) => onscroll(e)}
>
<View className={styles.product_list}>
{new Array(9).fill(' ').map(item => {
return <View className={styles.product_item}>
<View className={styles.product_img}>
<Image mode="aspectFill" 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"></Image>
<View className={styles.color_num}>25色</View>
</View>
<View className={styles.product_info}>
<View className={styles.title}>0770#21S精棉平纹</View>
<View className={styles.introduce}>平纹系列</View>
</View>
</View>
})}
</View>
</InfiniteScroll>
</View>
</View>
<Filter show={showFilter} onClose={() => setShowFilter(false)}/>
</View>
)
}
src/pages/searchList/index.config.ts
-3
View File
@@ -1,3 +0,0 @@
export default {
navigationBarTitleText: '搜索'
}
src/pages/searchList/search.config.ts
+3
View File
@@ -0,0 +1,3 @@
export default {
navigationBarTitleText: '搜索',
}
src/pages/searchList/search.module.scss
+72
View File
@@ -0,0 +1,72 @@
.main{
.search{
display: flex;
justify-content: space-between;
padding: 20px;
padding-bottom: 50px;
}
.hot {
padding: 0 20px;
.hot_header {
width:100%;
display: flex;
justify-content: space-between;
font-size: $font_size_medium;
.hot_header_title {
font-size: $font_size;
color: $color_font_one;
font-weight: 700;
}
.hot_header_up{
color: $color_main;
}
}
.list{
display: flex;
font-size: $font_size_medium;
flex-wrap: wrap;
padding: 20px 0;
.item{
margin-right: 20px;
margin-bottom: 20px;
padding: 10px 20px;
background-color: #F0F0F0;
color: $color_font_three;
border-radius: 50px;
}
}
}
.history {
padding: 0 20px;
.history_header {
width:100%;
display: flex;
justify-content: space-between;
font-size: $font_size_medium;
.history_header_title {
font-size: $font_size;
color: $color_font_one;
font-weight: 700;
}
.miconfont{
font-size: 30px;
color: $color_font_three;
}
}
.list{
display: flex;
font-size: $font_size_medium;
flex-wrap: wrap;
padding: 20px 0;
.item{
margin-right: 20px;
margin-bottom: 20px;
padding: 10px 20px;
background-color: #F0F0F0;
color: $color_font_three;
border-radius: 50px;
}
}
}
}
src/pages/searchList/search.tsx
+44
View File
@@ -0,0 +1,44 @@
import { View } from '@tarojs/components'
import Search from '@/components/search'
import { goLink } from '@/common/common';
import classnames from "classnames";
import styles from './search.module.scss'
export default () => {
return (
<View className={styles.main}>
<View className={styles.search}>
<Search style={{width: '100%'}} placeholder="请输入面料关键词" placeIcon="out" showBtn={true} clickOnSearch={() => {}}/>
</View>
<View className={styles.hot}>
<View className={styles.hot_header}>
<View className={styles.hot_header_title}>热门面料</View>
<View className={styles.hot_header_up} onClick={() => goLink('/pages/searchList/searchList')}>高级搜索</View>
</View>
<View className={styles.list}>
<View className={styles.item}>9265</View>
<View className={styles.item}>全棉双卫衣</View>
<View className={styles.item}>全棉双卫衣</View>
<View className={styles.item}>全棉双卫衣</View>
<View className={styles.item}>全棉双卫衣</View>
<View className={styles.item}>26s</View>
</View>
</View>
<View className={styles.history}>
<View className={styles.history_header}>
<View className={styles.history_header_title}>历史搜索</View>
<View className={classnames('iconfont icon-lajixiang', styles.miconfont)}></View>
</View>
<View className={styles.list}>
<View className={styles.item}>9265</View>
<View className={styles.item}>全棉双卫衣</View>
<View className={styles.item}>全棉双卫衣</View>
<View className={styles.item}>全棉双卫衣</View>
<View className={styles.item}>全棉双卫衣</View>
<View className={styles.item}>26s</View>
</View>
</View>
</View>
)
}
src/pages/searchList/searchList.config.ts
+5
View File
@@ -0,0 +1,5 @@
export default {
navigationBarTitleText: '高级搜索',
enablePullDownRefresh: true,
backgroundTextStyle: 'dark'
}
src/pages/searchList/index.module.scss → src/pages/searchList/searchList.module.scss
+18
View File
@@ -57,6 +57,7 @@
.filter_scroll{
flex:1;
width: 0;
padding-left: 20px;
::-webkit-scrollbar {
display:none;
width:0;
@@ -149,6 +150,23 @@
height: 224px;
background: #e5ad3a;
border-radius: 20px 20px 0px 0px;
position: relative;
image{
width: 100%;
height: 100%;
border-radius: 20px 20px 0px 0px;
}
.color_num {
background: rgba(0,0,0, 0.5);
border-radius: 50px 0px 0px 0px;
font-size: $font_size_min;
color: #fff;
position: absolute;
right:0;
bottom:0;
padding: 5px 20px;
box-sizing: border-box;
}
}
}
.product_info{
src/pages/searchList/index.tsx → src/pages/searchList/searchList.tsx
+22 -21
View File
@@ -1,12 +1,14 @@
import { ScrollView, Text, View } from "@tarojs/components"
import { Image, ScrollView, Text, View } from "@tarojs/components"
import classnames from "classnames";
import Search from '@/components/search'
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 SelectData from "./components/selectData";
import { goLink } from "@/common/common";
import styles from './searchList.module.scss'
import { useCallback, useState } from "react";
import useManualPullDownRefresh from "@/use/useManualPullDownRefresh";
export default () => {
const [showFilter, setShowFilter] = useState(false)
@@ -15,11 +17,11 @@ export default () => {
{title: '系列', value:2},
{title: '系列', value:3},
{title: '系列', value:4},
{title: '系列', value:5},
{title: '系列', value:5},
{title: '系列', value:5},
{title: '系列', value:5},
{title: '系列', value:5},
{title: '系列', value:6},
{title: '系列', value:7},
{title: '系列', value:8},
{title: '系列', value:9},
{title: '系列', value:10},
])
const [scrollStatus, setScrollStatus] = useState(false)
const onscroll = useCallback((e) => {
@@ -29,6 +31,9 @@ export default () => {
setScrollStatus(false)
}
},[])
//页面下拉刷新
const res = useManualPullDownRefresh()
return (
<View className={styles.main}>
<View className={styles.search}>
@@ -44,28 +49,21 @@ export default () => {
<Text>收藏</Text>
<SortBtn status="top"/>
</View>
<View className={styles.text_ss} >
<View className={styles.text_ss} onClick={() => goLink('/pages/searchList/hightSearchList')}>
<Text>高级搜索</Text>
<Text className={classnames('iconfont icon-sousuo', styles.miconfont)}></Text>
</View>
</View>
<View className={styles.filter_btn_con}>
<ScrollView scrollX className={styles.filter_scroll}>
<View className={styles.filter_btn}>
<View>系列</View>
<View>幅宽</View>
<View>克重</View>
<View>克重</View>
<View>克重</View>
<View className={styles.selected}>成分</View>
</View>
</ScrollView>
<View className={styles.filter_scroll}>
<SelectData list={selectList}/>
</View>
<View className={styles.filter_more} onClick={() => setShowFilter(true)}>
<Text>筛选</Text>
<Text className={classnames('iconfont icon-shaixuan', styles.miconfont)}></Text>
</View>
</View>
</View>
<View className={styles.list}>
<View className={classnames(styles.list_num, scrollStatus&&styles.list_num_shadow)}>搜索结果 (2条记录)</View>
@@ -77,7 +75,10 @@ export default () => {
<View className={styles.product_list}>
{new Array(9).fill(' ').map(item => {
return <View className={styles.product_item}>
<View className={styles.product_img}></View>
<View className={styles.product_img}>
<Image mode="aspectFill" 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"></Image>
<View className={styles.color_num}>25色</View>
</View>
<View className={styles.product_info}>
<View className={styles.title}>0770#21S精棉平纹</View>
<View className={styles.tag_list}>