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-14 14:14:09 +08:00
parent 63e1e66a63
commit 9350978491
17 changed files with 185 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/app.config.ts
View File

@ -16,11 +16,15 @@ export default {
list: [
{
pagePath: 'pages/index/index',
text: '首页'
text: '首页',
iconPath: './styles/tabbar/home.png',
selectedIconPath: './styles/tabbar/home_selected.png',
},
{
pagePath: 'pages/user/index',
text: '我的'
text: '我的',
iconPath: './styles/tabbar/my.png',
selectedIconPath: './styles/tabbar/my_selected.png',
}
],
'color': '#707070',

8
src/common/common.ts Normal file
View File

@ -0,0 +1,8 @@
import Taro from "@tarojs/taro"
export const goLink = (path?:string, params?:Object) => {
Taro.navigateTo({
url: '/pages/search/index'
})
}

9
src/components/product/index.tsx
View File

@ -1,15 +1,20 @@
import { Image, View } from "@tarojs/components"
import Taro from "@tarojs/taro"
import styles from './index.module.scss'
type params = {
desStatus?: true|false
}
export default ({desStatus = true}: params) => {
const goLink = () => {
Taro.navigateTo({
url: '/pages/details/index?id=1'
})
}
return (
<View className={styles.products_list}>
{new Array(10).fill('').map(item => {
return <View className={styles.products_item}>
return <View className={styles.products_item} onClick={() => goLink()}>
<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 className={styles.num}>230色</View>

2
src/components/shopCart/index.module.scss
View File

@ -144,6 +144,8 @@
bottom: 0;
display: flex;
justify-content: center;
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
.buy_con{
width: 702px;
height: 95px;

36
src/pages/details/components/preview/index.module.scss Normal file
View File

@ -0,0 +1,36 @@
.main{
position: fixed;
width: 100vw;
height: 100vh;
top: 0;
left: 0;
background-color: rgba(0,0,0, 0.8);
display: flex;
justify-content: center;
align-items: flex-start;
.con{
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
width: 100%;
margin-top: 200px;
image{
width:100%;
border-radius: 10px;
}
.name {
width: 488px;
height: 72px;
color: #fff;
text-align: center;
font-size: 26px;
border-radius: 20px;
line-height: 72px;
margin-top: 10px;
background-color: rgba(0,0,0, 0.5);
padding: 0 10px;
@include common_ellipsis
}
}
}

24
src/pages/details/components/preview/index.tsx Normal file
View File

@ -0,0 +1,24 @@
import { Image, View } from "@tarojs/components"
import styles from './index.module.scss'
export type colorItem = {
title: string,
img: string
}
export type colorParams = {
value?: colorItem,
show?: false|true
onClose?: () => void
}
export default ({value, show = false, onClose}: colorParams) => {
return (
<>
{show&&<View className={styles.main} catch-move="true" onClick={() => onClose?.()}>
<View className={styles.con}>
<Image mode="aspectFill" src={value?.img as string}/>
<View className={styles.name}>{value?.title}</View>
</View>
</View>}
</>
)
}

14
src/pages/details/components/shopCart/index.module.scss
View File

@ -67,13 +67,11 @@
}
}
.product_color_con{
flex:1;
height: 0;
padding-bottom:151px;
}
.color_con{
.item {
display: flex;
justify-content: space-between;
@ -130,6 +128,15 @@
}
}
}
.noData{
width:100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
color: $color_font_three;
font-size: $font_size_medium;
}
.buy_btn{
width: 100%;
padding: 0 40px;
@ -156,6 +163,9 @@
line-height: 90px;
border-radius: 50px;
color: #fff;
background: linear-gradient(38deg,#5cabff, #7cbcfc 100%, #99ccff 100%);
}
.select_add_cart{
background: linear-gradient(38deg,#007aff, #4fa6ff 100%, #68b4ff 100%);
}
}

15
src/pages/details/components/shopCart/index.tsx
View File

@ -7,13 +7,13 @@ import Counter from "../counter";
import Big from 'big.js'
import classnames from "classnames";
import styles from "./index.module.scss"
import { useEffect, useState } from "react";
import { memo, useEffect, useState } from "react";
type param = {
show?: true|false,
onClose?: () => void
}
export default ({show = false, onClose}: param) => {
export default memo(({show = false, onClose}: param) => {
const selectList = [
{step:1, digits:2, title:'剪板', unit:'米'},
{step:1, digits:2, title:'散剪', unit:'米'},
@ -27,6 +27,8 @@ export default ({show = false, onClose}: param) => {
const [list, setList] = useState<any[]>([])
const [loading, setLoading] = useState(false)
console.log('执行执行')
useEffect(() => {
let lists:any[] = []
for(let i = 0; i < 20; i++) {
@ -114,7 +116,7 @@ export default ({show = false, onClose}: param) => {
<View className={classnames('iconfont icon-sousuo', styles.miconfont)} onClick={() => changeSearchShow()}></View>
</View>
<View className={styles.product_color_con}>
<InfiniteScroll>
{list.length > 0&&<InfiniteScroll>
<View className={styles.color_con}>
{list.map(item => {
return <View className={styles.item}>
@ -141,12 +143,13 @@ export default ({show = false, onClose}: param) => {
</View>
})}
</View>
</InfiniteScroll>
</InfiniteScroll>||
<View className={styles.noData}>暂无此商品</View>}
</View>
<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={styles.add_cart}>加入购物车</View>
<View className={classnames(styles.add_cart, selectCount.kindCount&&styles.select_add_cart)}>加入购物车</View>
</View>
</View>
</View>
@ -154,4 +157,4 @@ export default ({show = false, onClose}: param) => {
</Popup>
</View>
)
}
})

13
src/pages/details/index.module.scss
View File

@ -30,10 +30,14 @@
color: $color_font_three;
.text{
margin-top: 10px;
font-size: $font_size_medium;
}
}
.miconfont{
font-size: 27px;
font-size: 36px;
}
.collected{
color: #FFC300;
}
}
.des_data{
@ -66,7 +70,7 @@
.list{
margin-top: 30px;
display: grid;
grid-template-columns: auto auto auto ;
grid-template-columns: 210px 210px 210px ;
justify-content: space-between;
.item {
width:210px;
@ -76,6 +80,11 @@
height: 210px;
background-color: red;
border-radius: 20px;
image{
width: 100%;
height: 100%;
border-radius: 20px;
}
}
.item_name{
text-align: center;

63
src/pages/details/index.tsx
View File

@ -5,8 +5,9 @@ import classnames from "classnames";
import DesSwiper from './components/swiper';
import OrderCount from './components/shopCart';
import ShopCart from '@/components/shopCart';
import Preview,{colorItem} from './components/preview';
import styles from './index.module.scss'
import { useState } from 'react';
import { useMemo, useState } from 'react';
type item = {title:string, img:string, url:string, id:number}
type params = {
@ -32,12 +33,53 @@ export default (props:params) => {
]
const [showCart, setShowCart] = useState(false)
const [showOrderCount, setShowOrderCount] = useState(true)
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,
})
setShowPreview(true)
}
const [collectStatus, setCollectStatus] = useState(false)
const changeCollect = () => {
setCollectStatus(!collectStatus)
Taro.showToast({
title: '收藏成功',
icon: 'success',
duration: 2000
})
}
return (
<View className={styles.main}>
<DesSwiper list={list}/>
@ -47,11 +89,11 @@ export default (props:params) => {
<View className={styles.des}>面料描述，疯狂描述。。。</View>
</View>
<View className={styles.share}>
<View className={classnames('iconfont icon-sousuo', styles.miconfont)}></View>
<View className={classnames('iconfont icon-fenxiang', styles.miconfont)}></View>
<View className={styles.text}>分享</View>
</View>
<View className={styles.collect}>
<View className={classnames('iconfont icon-sousuo', styles.miconfont)}></View>
<View className={classnames('iconfont icon-shoucang', styles.miconfont, collectStatus&&styles.collected)} onClick={() => changeCollect()}></View>
<View className={styles.text}>收藏</View>
</View>
</View>
@ -67,12 +109,12 @@ export default (props:params) => {
<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}>
{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}>1#</View>
<View className={styles.item_name}>{item.title}</View>
</View>
})}
</View>
@ -81,14 +123,15 @@ export default (props:params) => {
<RichText nodes={html}></RichText>
</View>
<View className={styles.product_buy}>
<View className={styles.buy_cart}>
<View className={styles.buy_cart} onClick={() => setShowCart(true)}>
<View className={classnames('iconfont icon-gouwuche', styles.miconfont)}></View>
<View className={styles.text} onClick={() => setShowCart(true)}>购物车</View>
<View className={styles.text}>购物车</View>
</View>
<View className={styles.buy_btn} onClick={() => setShowOrderCount(true)}>开始下单</View>
</View>
<OrderCount show={showOrderCount} onClose={() => setShowOrderCount(false)}/>
<ShopCart show={showCart} onClose={() => setShowCart(false)}/>
<Preview value={colorInfo} show={showPreview} onClose={() => setShowPreview(false)}/>
<View className='common_safe_area_y'></View>
</View>
)

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

@ -7,6 +7,7 @@ import MoveBtn from '@/components/moveBtn'
import ShopCart from '@/components/shopCart'
import styles from './index.module.scss'
import { useState } from 'react'
import Taro from '@tarojs/taro'
export default () => {
const tabs_list = [
@ -31,6 +32,12 @@ export default () => {
const [showShopCart, setShowShopCart] = useState(false)
const goLink = () => {
Taro.navigateTo({
url: '/pages/search/index'
})
}
return (
<MoveBtn onClick={() => setShowShopCart(!showShopCart)}>
<View className={styles.main}>
@ -38,7 +45,7 @@ export default () => {
<View className={styles.search}>
<View className={styles.search_collect}>我的收藏</View>
<View className={styles.search_input}>
<Search disabled={true} style={{width: '263rpx'}}/>
<Search disabled={true} style={{width: '263rpx'}} clickOnSearch={() => goLink()}/>
</View>
</View>
<View className={styles.products}>

10
src/styles/iconfont.scss
View File

@ -1,7 +1,7 @@
@font-face {
font-family: "iconfont"; /* Project id 2987621 */
src:
url('iconfont.ttf?t=1649647915734') format('truetype');
url('iconfont.ttf?t=1649906813989') format('truetype');
}
.iconfont {
@ -12,6 +12,14 @@
-moz-osx-font-smoothing: grayscale;
}
.icon-shoucang:before {
content: "\e63e";
}
.icon-fenxiang:before {
content: "\e63d";
}
.icon-cuo:before {
content: "\e6c9";
}

BIN
src/styles/iconfont.ttf
View File

Binary file not shown.

BIN
src/styles/tabbar/home.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.9 KiB

BIN
src/styles/tabbar/home_selected.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.4 KiB

BIN
src/styles/tabbar/my.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.5 KiB

BIN
src/styles/tabbar/my_selected.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.5 KiB