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>
)
}
src/pages/details/index.config.ts
+3
View File
@@ -0,0 +1,3 @@
export default {
navigationBarTitleText: '详情'
}
src/pages/details/index.module.scss
+127
View File
@@ -0,0 +1,127 @@
.main{
min-height: 100%;
background-color: $color_bg_one;
padding-bottom: 100px;
.product_header{
padding: 0 20px;
display: flex;
align-items: center;
height: 163.57px;
background-color: #fff;
.title{
flex:1;
.name{
font-size: 32px;
font-weight: 700;
color: $color_font_one;
@include common_ellipsis(1);
}
.des{
font-size: $font_size_medium;
color: $color_font_three;
@include common_ellipsis(1);
margin-top: 20px;
}
}
.share, .collect {
width: 76px;
font-size: $font_size_min;
text-align: center;
color: $color_font_three;
.text{
margin-top: 10px;
}
}
.miconfont{
font-size: 27px;
}
}
.des_data{
background-color: #fff;
padding: 20px;
margin-top: 16px;
.title{
font-size: $font_size;
font-weight: 700;
color: $color_font_one;
margin-bottom: 20px;
}
.con{
display: grid;
grid-template-columns: 260px auto;
grid-template-rows: 50px 50px;
font-size: $font_size_medium;
color: $color_font_three;
}
}
.product_color{
background-color: #fff;
margin-top: 16px;
padding: 30px 20px 0;
color: $color_font_one;
font-size: $font_size_medium;
.title{
}
.list{
margin-top: 30px;
display: grid;
grid-template-columns: auto auto auto ;
justify-content: space-between;
.item {
width:210px;
margin-bottom: 20px;
.item_color{
width:210px;
height: 210px;
background-color: red;
border-radius: 20px;
}
.item_name{
text-align: center;
margin-top: 10px;
}
}
}
}
.product_detail{
// padding: 20px;
background-color: #fff;
margin-top: 16px;
}
.product_buy{
display: flex;
justify-content: space-between;
align-items: center;
height:95px;
width: 100vw;
position: fixed;
bottom: 0;
left: 0;
background-color: #fff;
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
.buy_cart{
width: 150px;
color: $color_font_three;
text-align: center;
.text{
font-size: $font_size_min;
}
.miconfont{
font-size: 36px;
}
}
.buy_btn{
display: flex;
justify-content: center;
align-items: center;
width: 297px;
height: 100%;
background-color: $color_main;
font-size: $font_size;
color: #fff;
}
}
}
src/pages/details/index.tsx
+87
View File
@@ -0,0 +1,87 @@
import { Image, RichText, Swiper, SwiperItem, View } from '@tarojs/components'
import Taro from '@tarojs/taro';
import classnames from "classnames";
import DesSwiper from './components/swiper';
import ShopCart from './components/shopCart';
import styles from './index.module.scss'
type item = {title:string, img:string, url:string, id:number}
type params = {
list?: item[]
swiperOnClick?: (val: item) => void,
style?: Object
}
export default (props:params) => {
const 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
},
{
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
}
]
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">
`
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>
<View className={styles.share}>
<View className={classnames('iconfont icon-sousuo', styles.miconfont)}></View>
<View className={styles.text}>分享</View>
</View>
<View className={styles.collect}>
<View className={classnames('iconfont icon-sousuo', styles.miconfont)}></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>
</View>
<View className={styles.product_color}>
<View className={styles.title}>色号 (10)</View>
<View className={styles.list}>
{new Array(10).fill('').map(item => {
return <View className={styles.item}>
<View className={styles.item_color}></View>
<View className={styles.item_name}>1#</View>
</View>
})}
</View>
</View>
<View className={styles.product_detail}>
<RichText nodes={html}></RichText>
</View>
<View className={styles.product_buy}>
<View className={styles.buy_cart}>
<View className={classnames('iconfont icon-gouwuche', styles.miconfont)}></View>
<View className={styles.text}>购物车</View>
</View>
<View className={styles.buy_btn}>开始下单</View>
</View>
<ShopCart show={true}/>
<View className='common_safe_area_y'></View>
</View>
)
}