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

页面

Browse Source
This commit is contained in:
cheng
2022-04-11 18:37:36 +08:00
parent ec682e2aea
commit dc0129402c
43 changed files with 1244 additions and 128 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/details/components/shopCart/index.module.scss
+104
View File
@@ -0,0 +1,104 @@
.shop_cart_main{
.popup_con{
display: flex;
flex-direction: column;
height: 80vh;
}
.header{
color: $color_font_one;
font-size: 32px;
font-weight: 700;
padding: 20px;
}
.search{
display: flex;
align-items: center;
padding: 20px;
.search_title{
font-size: $font_size;
color: #000;
width: 160px;
}
.search_list{
display: flex;
justify-content: space-between;
flex:1;
}
.search_item{
width: 148px;
height: 55px;
text-align: center;
line-height: 55px;
color: $color_font_two;
font-size: $font_size_medium;
background-color: #f0f0f0;
border-radius: 50px;
}
.search_item_select{
border: 2px solid $color_main;
background-color: #ecf5ff;
color: $color_main;
width: 144px;
height: 51px;
}
}
.colorFind{
display: flex;
justify-content: space-between;
padding: 20px;
.title{
font-size: 26px;
}
.miconfont{
font-size: 36px;
color: $color_font_two;
}
}
.color_con{
.item {
display: flex;
justify-content: space-between;
padding: 0 20px;
margin-bottom: 40px;
.item_color{
width: 156.5px;
height: 156.5px;
border-radius: 20px;
background-color: red;
}
.item_con{
flex:1;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 20px 0 20px 20px;
.title{
font-size: $font_size_big;
font-weight: 700;
}
.num{
font-size: $font_size;
color: $color_main;
}
}
.btn_con{
display: flex;
align-items: flex-end;
.btn{
width: 116px;
height: 64px;
background-color: $color_main;
border-radius: 40px 0px 16px 0px;
font-size: $font_size_medium;
text-align: center;
line-height: 64px;
color: #fff;
}
}
}
}
.buy_btn{
height: 151px;
width: 100%;
}
}
src/pages/details/components/shopCart/index.tsx
+149
View File
@@ -0,0 +1,149 @@
import {Image, ScrollView, View } from "@tarojs/components"
import Popup from "@/components/popup"
import classnames from "classnames";
import MCheckbox from "@/components/checkbox";
import LoadingCard from "@/components/loadingCard";
import InfiniteScroll from "@/components/infiniteScroll";
import styles from "./index.module.scss"
import { useEffect, useState } from "react";
import Taro from "@tarojs/taro";
type param = {
show?: true|false,
onClose?: () => void
}
export default ({show = false, onClose}: param) => {
const selectList = ['剪板', '散剪', '大货']
const [selectIndex, setSelectIndex] = useState(0)
const selectProduct = (index:number) => {
setSelectIndex(index)
}
const [list, setList] = useState<any[]>([])
const [loading, setLoading] = useState(false)
useEffect(() => {
let lists:any[] = []
for(let i = 0; i < 20; i++) {
lists = [...lists, {
title:`${i}#薄荷绿`,
subtitle: '0770# 21S单面平纹(食毛)',
tag: '剪板',
select: i%2?true: false
}]
}
setList([...lists])
}, [])
const [showPopup, setShowPopup] = useState(false)
useEffect(() => {
setShowPopup(show)
}, [show])
const [selectStatus, setSelectStatus] = useState(false)
const selectAll = () => {
list.map(item => {
item.select = !selectStatus
})
setSelectStatus(!selectStatus)
setList([...list])
}
//checkbox选中回调
const selectCallBack = (item) => {
item.select = true
setList([...list])
}
//checkbox关闭回调
const colseCallBack = (item) => {
item.select = false
setList([...list])
}
//popup关闭
const closePopup = () => {
onClose?.()
setShowPopup(false)
}
const delSelect = () => {
Taro.showModal({
content: '删除所选商品？',
success: function (res) {
if (res.confirm) {
Taro.showToast({
title: '成功',
icon: 'success',
duration: 2000
})
} else if (res.cancel) {
console.log('用户点击取消')
}
}
})
}
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.search}>
<View className={styles.search_title}>下单类型:</View>
<View className={styles.search_list}>
{selectList.map((item, index) => {
return <View key={index} onClick={() => selectProduct(index)} className={classnames(styles.search_item, (selectIndex==index)&&styles.search_item_select)}>{item}</View>
})}
</View>
</View>
<View className={styles.colorFind}>
<View className={styles.title}>颜色分类 (13)</View>
<View className={classnames('iconfont icon-sousuo', styles.miconfont)}></View>
</View>
<View className={styles.color_con}>
<View className={styles.item}>
<View className={styles.item_color}></View>
<View className={styles.item_con}>
<View className={styles.title}>1#薄荷绿</View>
<View className={styles.num}>¥25.5/m</View>
</View>
<View className={styles.btn_con}>
<View className={styles.btn}>添加</View>
</View>
</View>
<View className={styles.item}>
<View className={styles.item_color}></View>
<View className={styles.item_con}>
<View className={styles.title}>1#薄荷绿</View>
<View className={styles.num}>¥25.5/m</View>
</View>
<View className={styles.btn_con}>
<View className={styles.btn}>添加</View>
</View>
</View>
<View className={styles.item}>
<View className={styles.item_color}></View>
<View className={styles.item_con}>
<View className={styles.title}>1#薄荷绿</View>
<View className={styles.num}>¥25.5/m</View>
</View>
<View className={styles.btn_con}>
<View className={styles.btn}>添加</View>
</View>
</View>
</View>
<View className={styles.buy_btn}>
<View className={styles.icon}>
<View className={classnames('iconfont', 'icon-gouwuche', styles.miconfont)}></View>
</View>
<View className={styles.goPay}>
去结算
</View>
</View>
</View>
</Popup>
</View>
)
}
src/pages/details/components/swiper/index.module.scss
+27
View File
@@ -0,0 +1,27 @@
.swiper{
height: 450px;
width: 100%;
position: relative;
.swiper_item{
height: 100%;
width: 100%;
}
.image_item{
width: 100%;
height: 100%;
image{
width: 100%;
height: 100%;
}
}
.page{
font-size: $font_size_min;
padding: 5px 20px;
background-color: rgba(0,0,0,0.3);
color: #fff;
border-radius: 50px;
position: absolute;
bottom: 20px;
right: 20px;
}
}
src/pages/details/components/swiper/index.tsx
+36
View File
@@ -0,0 +1,36 @@
import { Image, Swiper, SwiperItem, View } from "@tarojs/components"
import { useMemo, 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 pageCount = useMemo(() => {
return list.length
},[list])
const swiperChange = (e) => {
setPageIndex(e.detail.current + 1)
}
return (
<View className={styles.swiper}>
<Swiper className={styles.swiper_item} circular={true} onChange={(e) => swiperChange(e)}>
{list.map(item => {
return <SwiperItem>
<View className={styles.image_item} >
<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>
</View>
</SwiperItem>
})}
</Swiper>
<View className={styles.page}>{pageIndex+'/'+pageCount}</View>
</View>
)
}