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

首页开发

Browse Source
This commit is contained in:
czm 2022-04-06 18:42:14 +08:00
parent e983ba05ea
commit fc3e9885d3
18 changed files with 654 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/app.config.ts
View File

@ -7,5 +7,21 @@ export default {
navigationBarBackgroundColor: '#fff',
navigationBarTitleText: 'WeChat',
navigationBarTextStyle: 'black'
}
},
tabBar: {
list: [
{
pagePath: 'pages/index/index',
text: '首页'
},
{
pagePath: 'pages/index/index',
text: '我的'
}
],
'color': '#707070',
'selectedColor': '#2680EB',
'backgroundColor': '#fff',
'borderStyle': 'white'
},
}

6
src/app.scss
View File

@ -1 +1,5 @@
@import './styles/common.scss'
@import './styles/common.scss';
@import './styles/iconfont.scss';
page{
height: 100%;
}

12
src/components/closeBtn/index.module.scss Normal file
View File

@ -0,0 +1,12 @@
.icon_a_cuowuwrong_self {
height: 20px;
width: 20px;
font-size: 27px;
padding: 10px;
border-radius: 50%;
border: #ccc 1px solid;
color: #ccc;
display: flex;
justify-content: center;
align-items: center;
}

18
src/components/closeBtn/index.tsx Normal file
View File

@ -0,0 +1,18 @@
import { View } from "@tarojs/components"
import { memo } from "react"
import style from "./index.module.scss"
type Params = {
onClose?: () => void,
styleObj?: Object
}
export default memo(({onClose, styleObj = {}}:Params) => {
return (
<View
style={styleObj}
className={`iconfont icon-a-cuowuwrong ${style.icon_a_cuowuwrong_self}`}
onClick={onClose}
></View>
)
})

47
src/components/search/index.module.scss Normal file
View File

@ -0,0 +1,47 @@
.search_main{
display: flex;
align-items: center;
position: relative;
.icon_a_sousuo1_self{
font-size: 37px;
color: $color_font_two;
margin-right: 20px;
position: absolute;
left: 10px;
}
.search_con{
position: relative;
display: flex;
align-items: center;
width: 100%;
input{
font-size: 27px;
background: #eee;
width: 100%;
height: 60px;
border-radius: 50px;
padding: 0 60px 0 60px;
box-sizing: border-box;
&::-webkit-input-placeholder { /* WebKit browsers */
color: #999;
font-size: 16px;
}
&::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #999;
font-size: 16px;
}
&::-ms-input-placeholder { /* Internet Explorer 10+ */
color: #999;
font-size: 16px;
}
}
.search_closeBtn{
position: absolute;
right: 10px;
}
}
}

48
src/components/search/index.tsx Normal file
View File

@ -0,0 +1,48 @@
import { Input, View } from "@tarojs/components";
import styles from "./index.module.scss"
import CloseBtn from "@/components/closeBtn"
import { memo, useState } from "react";
type Params = {
clickOnSearch?: () => void
disabled?: false|true,
placeholder?: string,
changeOnSearch?:(any) => void,
showIcon?: false|true,
style?: Object
}
export default memo(({
clickOnSearch,
changeOnSearch,
disabled = false,
placeholder = '输入搜索内容',
showIcon = true,
style = {}
}:Params) => {
const [inputCon , setInputCon] = useState('')
const onInputEven = (e) => {
const value = e.detail.value
setInputCon(value)
changeOnSearch?.(value)
}
const clearInput = () => {
setInputCon('')
changeOnSearch?.('')
}
return (
<>
<View className={styles.search_main} onClick={() => clickOnSearch?.()} style={style}>
<View className={styles.search_con}>
{showIcon&&<View className={`iconfont icon-sousuo ${styles.icon_a_sousuo1_self}`}></View>}
<Input placeholderStyle='color:#ABABAB; font-size:26rpx' disabled={disabled} value={inputCon} placeholder={placeholder} onInput={(e) => onInputEven(e)}></Input>
{!!inputCon&&<View className={styles.search_closeBtn}>
<CloseBtn onClose={() => clearInput()} styleObj={{width: '20rpx', height:'20rpx', backgroundColor:'#fff', border:'0'}}/>
</View>}
</View>
</View>
</>
)
})

43
src/components/sideBar/index.module.scss Normal file
View File

@ -0,0 +1,43 @@
.sideBar_main{
display: flex;
height: 100%;
.sideBar_select{
width: 150px;
height: 100%;
background-color: #eaeaea;
border-radius: 0 10px 10px 0;
::-webkit-scrollbar {
display:none;
width:0;
height:0;
color:transparent;
}
.sideBar_select_title{
height: 100px;
width: 100%;
font-size: $font_size;
color: #727272;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-weight: 400;
.title_con{
width: 74px;
@include common_ellipsis($params:4);
}
}
.sideBar_select_title_select{
background-color: $color_bg_one;
color: $color_font_one;
}
}
.sideBar_con{
flex: 1;
.sideBar_con_scroll{
width: 100%;
height: 100%;
}
}
}

113
src/components/sideBar/index.tsx Normal file
View File

@ -0,0 +1,113 @@
import { ScrollView, View } from "@tarojs/components"
import { memo, ReactNode, useRef, useState } from "react"
import styles from "./index.module.scss"
import classnames from "classnames";
import Taro, { useReady } from "@tarojs/taro";
import { useCallback } from "react";
type ListProps = {
title: string,
value: number
}
type Params = {
list?: ListProps[],
defaultValue?: number|string,
children?: ReactNode,
height?: string,
heightItem?: number,
sideBarOnClick?: (ListProps) => void
}
export default memo(({list = [], defaultValue = 0, height='100vh', sideBarOnClick, children, heightItem = 100}: Params) => {
let num_half = useRef(0)
const [selected, setSelected] = useState(defaultValue)
const [tabId, setTabId] = useState('')
const init = () => {
const index = list?.findIndex(item => {
return item.value == defaultValue
})
if(index !== -1) {
computeSelectTab(index)
}
}
const clickEvent = ({item, index}: {item:ListProps, index:number}) => {
setSelected(item.value)
sideBarOnClick?.(item)
computeSelectTab(index)
}
const computeSelectTab = (index) => {
if((index + 1) > num_half.current) {
let num = index + 1 - num_half.current
setTabId(list[num].value.toString())
} else {
setTabId(list[0].value.toString())
}
}
useReady(() => {
let query = Taro.createSelectorQuery();
query.select('.side_bar_select').boundingClientRect(rect=>{
let clientHeight = rect.height;
let clientWidth = rect.width;
let ratio = 750 / clientWidth;
let height = clientHeight * ratio;
num_half.current = Math.ceil(height/2/heightItem)
init()
}).exec();
})
const formatTitle = useCallback((title = '') => {
let arr: ReactNode[]= []
let str = ''
for (let i = 1; i <= title.length; i++) {
str += title[i-1]
if(i == title.length|| i%2 == 0) {
const node = <View className={styles.title_list}>{str}</View>
arr.push(node)
str = ''
}
}
return arr
}, [])
return (
<>
<View className={classnames(styles.sideBar_main,'side_bar_select')}>
<ScrollView scrollWithAnimation={true} style={{height}} className={styles.sideBar_select} scrollY scrollIntoView={`tab_${tabId}`}>
{
list?.map((item, index) => {
return(
<View
className={classnames(styles.sideBar_select_title, {[styles.sideBar_select_title_select]:(selected == item.value)})}
onClick={() => clickEvent({item, index})}
id={`tab_${item.value}`}
key={item.value}
style={{height:heightItem+'rpx'}}
>
{/* {formatTitle(item.title)} */}
<View className={styles.title_con}>
{item.title}
</View>
</View>
)
})
}
<View className="common_safe_area_y"></View>
</ScrollView>
<View className={styles.sideBar_con}>
<ScrollView className={styles.sideBar_con_scroll} style={{height}} scrollY>
{children}
<View className="common_safe_area_y"></View>
</ScrollView>
</View>
</View>
</>
)
})

18
src/components/swiper/index.module.scss Normal file
View File

@ -0,0 +1,18 @@
.swiper_con{
padding:0 20px;
height: 178px;
.xswiper {
height: 100% !important;
border-radius: 20px;
.image_item{
width: 100%;
height: 100%;
image{
width: 100%;
height: 100%;
border-radius: 20px;
}
}
}
}

45
src/components/swiper/index.tsx Normal file
View File

@ -0,0 +1,45 @@
import { Image, Swiper, SwiperItem, View } from "@tarojs/components"
import styles from './index.module.scss'
type item = {title:string, img:string, url:string, id:number}
type params = {
list?: item[]
swiperOnClick?: (val: item) => void
}
export default (props:params) => {
let {list = [], swiperOnClick} = props
list = [
{
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:1
}
]
const goLink = (item) => {
swiperOnClick?.(item)
}
return (
<View className={styles.swiper_con}>
<Swiper
className={styles.xswiper}
indicatorColor='#ccc'
indicatorActiveColor='#fff'
circular
indicatorDots
autoplay>
{
list.map(item => {
return <SwiperItem key={item.id}>
<View className={styles.image_item} onClick={() => goLink(item)}>
<Image mode="aspectFill" src={item.img}></Image>
</View>
</SwiperItem>
})
}
</Swiper>
</View>
)
}

65
src/pages/index/components/product/index.module.scss Normal file
View File

@ -0,0 +1,65 @@
.products_list{
padding: 0 20px 20px 20px;
box-sizing: border-box;
}
.products_item{
width: 100%;
background-color: #fff;
border-radius: 20px;
padding: 20px;
box-sizing: border-box;
display: flex;
justify-content: space-between;
&:nth-child(n+2){
margin-top: 16px;
}
.item_img{
width: 198px;
height: 198px;
image{
width: 100%;
height: 100%;
border-radius: 10px;
}
}
.item_con{
padding-left: 15px;
font-size: $font_size;
flex:1;
.title{
font-size: $font_size;
color: #707070;
text{
color: $color_font_one;
font-weight: bold;
}
}
.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;
}
.des{
font-size:$font_size_medium;
color: #707070;
margin-top: 16px;
@include common_ellipsis($params:2);
}
}
}

79
src/pages/index/components/product/index.tsx Normal file
View File

@ -0,0 +1,79 @@
import { Image, View } from "@tarojs/components"
import styles from './index.module.scss'
export default () => {
return (
<View className={styles.products_list}>
<View className={styles.products_item}>
<View className={styles.item_img}>
<Image src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2Ftp01%2F1ZZQ214233446-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1651827249&t=b2fc2a3672dc8ced9e0f37ce7e2ff901"/>
</View>
<View className={styles.item_con}>
<View className={styles.title}><text>0770#</text>21S单面平纹(食毛)</View>
<View className={styles.tag_list}>
<View className={styles.tag}>160cm</View>
<View className={styles.tag}>110g</View>
</View>
<View className={styles.introduce}>67.6%棉24%涤纶6.4%氨纶</View>
<View className={styles.des}>产品描述产品描述产品描述产品描述产品描述</View>
</View>
</View>
<View className={styles.products_item}>
<View className={styles.item_img}>
<Image src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2Ftp01%2F1ZZQ214233446-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1651827249&t=b2fc2a3672dc8ced9e0f37ce7e2ff901"/>
</View>
<View className={styles.item_con}>
<View className={styles.title}><text>0770#</text>21S单面平纹(食毛)</View>
<View className={styles.tag_list}>
<View className={styles.tag}>160cm</View>
<View className={styles.tag}>110g</View>
</View>
<View className={styles.introduce}>67.6%棉24%涤纶6.4%氨纶</View>
<View className={styles.des}>产品描述产品描述产品描述产品描述产品描述</View>
</View>
</View>
<View className={styles.products_item}>
<View className={styles.item_img}>
<Image src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2Ftp01%2F1ZZQ214233446-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1651827249&t=b2fc2a3672dc8ced9e0f37ce7e2ff901"/>
</View>
<View className={styles.item_con}>
<View className={styles.title}><text>0770#</text>21S单面平纹(食毛)</View>
<View className={styles.tag_list}>
<View className={styles.tag}>160cm</View>
<View className={styles.tag}>110g</View>
</View>
<View className={styles.introduce}>67.6%棉24%涤纶6.4%氨纶</View>
<View className={styles.des}>产品描述产品描述产品描述产品描述产品描述</View>
</View>
</View>
<View className={styles.products_item}>
<View className={styles.item_img}>
<Image src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2Ftp01%2F1ZZQ214233446-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1651827249&t=b2fc2a3672dc8ced9e0f37ce7e2ff901"/>
</View>
<View className={styles.item_con}>
<View className={styles.title}><text>0770#</text>21S单面平纹(食毛)</View>
<View className={styles.tag_list}>
<View className={styles.tag}>160cm</View>
<View className={styles.tag}>110g</View>
</View>
<View className={styles.introduce}>67.6%棉24%涤纶6.4%氨纶</View>
<View className={styles.des}>产品描述产品描述产品描述产品描述产品描述</View>
</View>
</View>
<View className={styles.products_item}>
<View className={styles.item_img}>
<Image src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2Ftp01%2F1ZZQ214233446-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1651827249&t=b2fc2a3672dc8ced9e0f37ce7e2ff901"/>
</View>
<View className={styles.item_con}>
<View className={styles.title}><text>0770#</text>21S单面平纹(食毛)</View>
<View className={styles.tag_list}>
<View className={styles.tag}>160cm</View>
<View className={styles.tag}>110g</View>
</View>
<View className={styles.introduce}>67.6%棉24%涤纶6.4%氨纶</View>
<View className={styles.des}>产品描述产品描述产品描述产品描述产品描述</View>
</View>
</View>
</View>
)
}

2
src/pages/index/index.config.ts
View File

@ -1,3 +1,3 @@
export default {
navigationBarTitleText: '首页'
navigationBarTitleText: '电子商城'
}

30
src/pages/index/index.module.scss
View File

@ -1,3 +1,29 @@
.index{
color: $color;
.main{
background-color: $color_bg_one;
min-height: 100%;
display: flex;
flex-direction: column;
.search{
width: 100%;
display: flex;
justify-content: space-between;
padding: 20px 20px 30px 20px;
box-sizing: border-box;
align-items: center;
.search_collect{
font-size: 26px;
border: 2px solid #007AFF;
color: #007AFF;
border-radius: 50px;
width: 132px;
height: 44px;
text-align: center;
line-height: 44px;
}
}
.products{
flex:1;
height: 0;
}
}

44
src/pages/index/index.tsx
View File

@ -1,13 +1,45 @@
import { View, Text } from '@tarojs/components'
import Test from '@/components/test'
import { Image, View} from '@tarojs/components'
import Swiper from '@/components/swiper'
import Search from '@/components/search'
import SideBar from '@/components/sideBar'
import Product from './components/product'
import styles from './index.module.scss'
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},
]
return (
<View className={styles.index}>
<Text>Hello world123!</Text>
<Test/>
<View className={styles.main}>
<Swiper/>
<View className={styles.search}>
<View className={styles.search_collect}>我的收藏</View>
<View className={styles.search_input}>
<Search disabled={true} style={{width: '263rpx'}}/>
</View>
</View>
<View className={styles.products}>
<SideBar list={tabs_list} height="100%" heightItem={150}>
<Product/>
</SideBar>
</View>
<View className='common_safe_area_y'></View>
</View>
)
}

28
src/styles/common.scss
View File

@ -1,2 +1,28 @@
$color: #ccc;
$color_bg_one: #F8F8F8;
$color_font_one: #3C3C3C;
$color_font_two: #ABABAB;
$color_main: #007AFF;
$font_size: 28px;
$font_size_medium: 24px;
$font_size_min: 22px;
//安全底部距离
.common_safe_area_y {
width: 100%;
height: constant(safe-area-inset-bottom); /* 兼容 iOS < 11.2 */
height: env(safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */
}
//省略号
@mixin common_ellipsis($params:1) {
overflow: hidden;
display: -webkit-box;
white-space:normal;
word-break:break-all;
-webkit-box-orient: vertical;
-webkit-line-clamp: $params;
text-overflow:ellipsis;
}

50
src/styles/iconfont.scss Normal file
View File

@ -0,0 +1,50 @@
@font-face {
font-family: "iconfont"; /* Project id 2987621 */
src:
url('iconfont.ttf?t=1649229905782') format('truetype');
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-sousuo:before {
content: "\e633";
}
.icon-tick_gou:before {
content: "\e62e";
}
.icon-bianji_bianji:before {
content: "\e630";
}
.icon-jian:before {
content: "\e632";
}
.icon-lajixiang:before {
content: "\e634";
}
.icon-jia:before {
content: "\e635";
}
.icon-gouwuche:before {
content: "\e636";
}
.icon-fenlei:before {
content: "\e638";
}
.icon-wode:before {
content: "\e639";
}

BIN
src/styles/iconfont.ttf Normal file
View File

Binary file not shown.