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

🐞 fix(ID1000708 首页购物车按钮问题):

Browse Source
This commit is contained in:
czm 2022-11-16 13:43:08 +08:00
parent 812971f6b2
commit 24773447e9
7 changed files with 403 additions and 378 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/common/constant.js
View File

@ -1,4 +1,4 @@
export const BASE_URL = CURRENT_BASE_URL // export const BASE_URL = CURRENT_BASE_URL
// export const BASE_URL = `http://192.168.0.75:50001/lymarket` // export const BASE_URL = `http://192.168.0.75:50001/lymarket`
// export const BASE_URL = `http://192.168.0.89:50001/lymarket` // export const BASE_URL = `http://192.168.0.89:50001/lymarket`
// export const BASE_URL = `http://10.0.0.5:50001/lymarket` // export const BASE_URL = `http://10.0.0.5:50001/lymarket`
@ -14,7 +14,7 @@ export const BASE_URL = CURRENT_BASE_URL
// export const BASE_URL = `http://192.168.1.5:40001/lymarket` // 王霞 // export const BASE_URL = `http://192.168.1.5:40001/lymarket` // 王霞
// export const BASE_URL = `http://192.168.1.7:50002/lymarket` // 添 // export const BASE_URL = `http://192.168.1.7:50002/lymarket` // 添
// export const BASE_URL = `http://192.168.1.22:50002/lymarket` // 婷 // export const BASE_URL = `http://192.168.1.22:50002/lymarket` // 婷
// export const BASE_URL = `http://192.168.1.42:50002/lymarket` // 杰 export const BASE_URL = `http://192.168.1.42:50002/lymarket` // 杰
// CDN // CDN
// 生成密钥 // 生成密钥

47
src/components/moveBtn/index.tsx
View File

@ -1,29 +1,29 @@
import { MovableArea, MovableView, View } from "@tarojs/components" import { MovableArea, MovableView, View } from '@tarojs/components'
import Taro, { useReady } from "@tarojs/taro" import Taro, { useReady } from '@tarojs/taro'
import { ReactElement, useEffect, useRef, useState } from "react" import { ReactElement, useEffect, useLayoutEffect, useRef, useState } from 'react'
import classnames from "classnames"; import classnames from 'classnames'
import styles from './index.module.scss' import styles from './index.module.scss'
import { GetShoppingCartApi } from "@/api/shopCart"; import { GetShoppingCartApi } from '@/api/shopCart'
import useCommonData from "@/use/useCommonData"; import useCommonData from '@/use/useCommonData'
import { useSelector } from "@/reducers/hooks"; import { useSelector } from '@/reducers/hooks'
type param = { type param = {
children?: ReactElement|null, children?: ReactElement | null
onClick?: () => void onClick?: () => void
} }
export default ({children = null, onClick}:param) => { export default ({ children = null, onClick }: param) => {
//获取购物车数据数量 //获取购物车数据数量
const {getShopCount, commonData} = useCommonData() const { getShopCount, commonData } = useCommonData()
const [screenHeight, setScreenHeight] = useState(0) const [screenHeight, setScreenHeight] = useState(0)
const [showMoveBtn, setShowMoveBtn] = useState(false) const [showMoveBtn, setShowMoveBtn] = useState(false)
const screenWidthRef = useRef(0) const screenWidthRef = useRef(0)
useReady(() => { useLayoutEffect(() => {
const res = Taro.getSystemInfoSync() const res = Taro.getSystemInfoSync()
if(res.screenHeight) { if (res.screenHeight) {
let ratio = 750 / res.screenWidth let ratio = 750 / res.screenWidth
setScreenHeight(res.screenHeight*ratio - 460) setScreenHeight(res.screenHeight * ratio - 460)
screenWidthRef.current = res.screenWidth/2 screenWidthRef.current = res.screenWidth / 2
} }
setShowMoveBtn(true) setShowMoveBtn(true)
}) })
@ -32,17 +32,22 @@ export default ({children = null, onClick}:param) => {
getShopCount() getShopCount()
}, []) }, [])
const dragEnd = (e) => { const dragEnd = (e) => {}
}
return ( return (
<MovableArea className={styles.movableItem}> <MovableArea className={styles.movableItem}>
{children} {children}
{showMoveBtn&&<MovableView onClick={onClick} className={styles.moveBtn} direction="all" inertia={true} x="630rpx" y={screenHeight+'rpx'} onTouchEnd={(e) => dragEnd(e)}> <MovableView
<View className={classnames('iconfont','icon-gouwuche', styles.shop_icon) } ></View> onClick={onClick}
{(commonData.shopCount > 0)&&<View className={styles.product_num}>{commonData.shopCount > 99?'99+':commonData.shopCount}</View>} className={styles.moveBtn}
</MovableView>} direction='all'
inertia={true}
x='630rpx'
y={screenHeight + 'rpx'}
onTouchEnd={(e) => dragEnd(e)}>
<View className={classnames('iconfont', 'icon-gouwuche', styles.shop_icon)}></View>
{commonData.shopCount > 0 && <View className={styles.product_num}>{commonData.shopCount > 99 ? '99+' : commonData.shopCount}</View>}
</MovableView>
</MovableArea> </MovableArea>
) )
} }

90
src/pages/details/components/orderCount/index.module.scss
View File

@ -1,42 +1,42 @@
.shop_cart_main{ .shop_cart_main {
.popup_con{ .popup_con {
height: 80vh; height: 80vh;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
.header{ .header {
color: $color_font_one; color: $color_font_one;
font-size: 32px; font-size: 32px;
font-weight: 700; font-weight: 700;
padding: 20px; padding: 20px;
} }
.colorFind{ .colorFind {
padding: 10px 20px; padding: 10px 20px;
display: flex; display: flex;
align-items: center; align-items: center;
.search{ .search {
flex:1; flex: 1;
} }
.text{ .text {
font-size: $font_size_medium; font-size: $font_size_medium;
color: $color_main; color: $color_main;
} }
} }
.search{ .search {
display: flex; display: flex;
align-items: center; align-items: center;
padding: 20px; padding: 20px;
.search_title{ .search_title {
font-size: $font_size; font-size: $font_size;
color: #000; color: #000;
width: 160px; width: 160px;
} }
.search_list{ .search_list {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
flex:1; flex: 1;
} }
.search_item{ .search_item {
width: 148px; width: 148px;
height: 55px; height: 55px;
text-align: center; text-align: center;
@ -46,7 +46,7 @@
background-color: #f0f0f0; background-color: #f0f0f0;
border-radius: 50px; border-radius: 50px;
} }
.search_item_select{ .search_item_select {
border: 2px solid $color_main; border: 2px solid $color_main;
background-color: #ecf5ff; background-color: #ecf5ff;
color: $color_main; color: $color_main;
@ -54,25 +54,25 @@
height: 51px; height: 51px;
} }
} }
.colorNum{ .colorNum {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
padding: 20px; padding: 20px;
.title{ .title {
font-size: 26px; font-size: 26px;
} }
.miconfont{ .miconfont {
font-size: 36px; font-size: 36px;
color: $color_font_two; color: $color_font_two;
} }
} }
.product_color_con{ .product_color_con {
flex:1; flex: 1;
height: 0; height: 0;
padding-bottom:151px; padding-bottom: 151px;
} }
.color_con{ .color_con {
.virtual_list{ .virtual_list {
padding-bottom: 300px; padding-bottom: 300px;
} }
.item { .item {
@ -80,37 +80,41 @@
justify-content: space-between; justify-content: space-between;
padding: 0 20px; padding: 0 20px;
margin-bottom: 40px; margin-bottom: 40px;
.item_color{ .item_color {
width: 156.5px; width: 156.5px;
height: 156.5px; height: 156.5px;
border-radius: 20px; border-radius: 20px;
} }
.item_con{ .item_con {
flex:1; flex: 1;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: space-between;
padding: 20px 0 20px 20px; padding: 20px 0 20px 20px;
.title{ .title {
font-size: $font_size_big; font-size: $font_size_big;
font-weight: 700; font-weight: 700;
} }
.num{ .num {
font-size: $font_size; font-size: $font_size;
color: $color_main; color: $color_main;
padding-top: 10px;
} }
.priceText{ .weight_error {
font-size: 28px;
color: #666666;
}
.priceText {
font-size: $font_size_big; font-size: $font_size_big;
Text{ Text {
font-size: $font_size_min; font-size: $font_size_min;
} }
} }
} }
.btn_con{ .btn_con {
display: flex; display: flex;
align-items: flex-end; align-items: flex-end;
.btn{ .btn {
width: 116px; width: 116px;
height: 64px; height: 64px;
background-color: $color_main; background-color: $color_main;
@ -120,10 +124,10 @@
line-height: 64px; line-height: 64px;
color: #fff; color: #fff;
} }
.btn_count{ .btn_count {
width: 235px; width: 235px;
height: 64px; height: 64px;
background-color: #ECF5FF; background-color: #ecf5ff;
border-radius: 40px 0px 16px 0px; border-radius: 40px 0px 16px 0px;
padding: 0 20px; padding: 0 20px;
display: flex; display: flex;
@ -132,8 +136,8 @@
} }
} }
} }
.noData{ .noData {
width:100%; width: 100%;
height: 100%; height: 100%;
display: flex; display: flex;
justify-content: center; justify-content: center;
@ -141,25 +145,25 @@
color: $color_font_three; color: $color_font_three;
font-size: $font_size_medium; font-size: $font_size_medium;
} }
.buy_btn{ .buy_btn {
width: 100%; width: 100%;
padding: 0 40px; padding: 0 40px;
padding-bottom: constant(safe-area-inset-bottom); padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom);
box-sizing: border-box; box-sizing: border-box;
position: fixed; position: fixed;
bottom:0; bottom: 0;
font-size: $font_size_medium; font-size: $font_size_medium;
color: $color_font_two; color: $color_font_two;
background-color: #fff; background-color: #fff;
box-shadow: 6px 0px 12px 0px rgba(0,0,0,0.16); box-shadow: 6px 0px 12px 0px rgba(0, 0, 0, 0.16);
.buy_btn_con{ .buy_btn_con {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
height: 151px; height: 151px;
} }
.add_cart{ .add_cart {
width: 260px; width: 260px;
height: 90px; height: 90px;
font-size: $font_size_big; font-size: $font_size_big;
@ -167,10 +171,10 @@
line-height: 90px; line-height: 90px;
border-radius: 50px; border-radius: 50px;
color: #fff; color: #fff;
background: linear-gradient(38deg,#5cabff, #7cbcfc 100%, #99ccff 100%); background: linear-gradient(38deg, #5cabff, #7cbcfc 100%, #99ccff 100%);
} }
.select_add_cart{ .select_add_cart {
background: linear-gradient(38deg,#007aff, #4fa6ff 100%, #68b4ff 100%); background: linear-gradient(38deg, #007aff, #4fa6ff 100%, #68b4ff 100%);
} }
} }
} }

3
src/pages/details/components/orderCount/index.tsx
View File

@ -12,7 +12,7 @@ import { GetColorList } from '@/api/materialColor'
import { AddShoppingCartApi } from '@/api/shopCart' import { AddShoppingCartApi } from '@/api/shopCart'
import Taro, { useRouter } from '@tarojs/taro' import Taro, { useRouter } from '@tarojs/taro'
import UseLogin from '@/use/useLogin' import UseLogin from '@/use/useLogin'
import { formatHashTag, formatPriceDiv } from '@/common/fotmat' import { formatHashTag, formatPriceDiv, formatWeightDiv } from '@/common/fotmat'
import { getFilterData } from '@/common/util' import { getFilterData } from '@/common/util'
import LabAndImg from '@/components/LabAndImg' import LabAndImg from '@/components/LabAndImg'
import VirtualList from '@tarojs/components/virtual-list' import VirtualList from '@tarojs/components/virtual-list'
@ -228,6 +228,7 @@ export default memo(({ show = false, onClose, title = '', productId = 0 }: param
</View> </View>
<View className={styles.item_con}> <View className={styles.item_con}>
<View className={styles.title}>{formatHashTag(item.code, item.name)}</View> <View className={styles.title}>{formatHashTag(item.code, item.name)}</View>
<View className={styles.weight_error}>空差：{formatWeightDiv(item.weight_error)}kg</View>
<View className={styles.num}>{formatPrice(item)}</View> <View className={styles.num}>{formatPrice(item)}</View>
</View> </View>
<View className={styles.btn_con}> <View className={styles.btn_con}>

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

@ -1,35 +1,36 @@
.main{ .main {
min-height: 100%; min-height: 100%;
background-color: $color_bg_one; background-color: $color_bg_one;
padding-bottom: 100px; padding-bottom: 100px;
.product_header{ .product_header {
padding: 0 20px; padding: 0 20px;
display: flex; display: flex;
align-items: center; align-items: center;
height: 163.57px; height: 163.57px;
background-color: #fff; background-color: #fff;
.title{ .title {
flex:1; flex: 1;
.name{ .name {
font-size: 32px; font-size: 32px;
font-weight: 700; font-weight: 700;
color: $color_font_one; color: $color_font_one;
@include common_ellipsis(1); @include common_ellipsis(1);
} }
.des{ .des {
font-size: $font_size_medium; font-size: $font_size_medium;
color: $color_font_three; color: $color_font_three;
@include common_ellipsis(1); @include common_ellipsis(1);
margin-top: 20px; margin-top: 20px;
} }
} }
.share, .collect { .share,
.collect {
width: 76px; width: 76px;
font-size: $font_size_min; font-size: $font_size_min;
text-align: center; text-align: center;
color: $color_font_three; color: $color_font_three;
position: relative; position: relative;
.text{ .text {
margin-top: 10px; margin-top: 10px;
font-size: $font_size_medium; font-size: $font_size_medium;
} }
@ -42,82 +43,87 @@
height: 100%; height: 100%;
opacity: 0; opacity: 0;
} }
.miconfont{ .miconfont {
font-size: 45px; font-size: 45px;
} }
.collected{ .collected {
color: #FFC300; color: #ffc300;
} }
} }
.des_data{ .des_data {
background-color: #fff; background-color: #fff;
padding: 20px; padding: 20px;
margin-top: 16px; margin-top: 16px;
.title{ .title {
font-size: $font_size; font-size: $font_size;
font-weight: 700; font-weight: 700;
color: $color_font_one; color: $color_font_one;
margin-bottom: 20px; margin-bottom: 20px;
} }
.con{ .con {
display: grid; display: grid;
grid-template-columns: 260px auto; grid-template-columns: 260px auto;
font-size: $font_size_medium; font-size: $font_size_medium;
color: $color_font_three; color: $color_font_three;
.des_text{ .des_text {
display: flex; display: flex;
margin-bottom: 16px; margin-bottom: 16px;
text{ text {
flex:1; flex: 1;
@include common_ellipsis(1); @include common_ellipsis(1);
} }
} }
} }
} }
.product_color{ .product_color {
background-color: #fff; background-color: #fff;
margin-top: 16px; margin-top: 16px;
padding: 30px 20px 0; padding: 30px 20px 0;
color: $color_font_one; color: $color_font_one;
font-size: $font_size_medium; font-size: $font_size_medium;
.title{ .title {
} }
.list{ .list {
margin-top: 30px; margin-top: 30px;
display: grid; display: grid;
grid-template-columns: 210px 210px 210px ; grid-template-columns: 210px 210px 210px;
justify-content: space-between; justify-content: space-between;
.item { .item {
width:210px; width: 210px;
margin-bottom: 20px; margin-bottom: 28px;
.item_color{ .item_color {
width:210px; width: 210px;
height: 210px; height: 210px;
border-radius: 20px; border-radius: 20px;
image{ image {
width: 100%; width: 100%;
height: 100%; height: 100%;
border-radius: 20px; border-radius: 20px;
} }
} }
.item_name{ .item_name {
text-align: center; text-align: center;
margin-top: 10px; margin-top: 10px;
@include common_ellipsis;
}
.bulk_price {
color: #8a8a8a;
font-size: 24px;
text-align: center;
} }
} }
} }
} }
.product_detail{ .product_detail {
// padding: 20px; // padding: 20px;
background-color: #fff; background-color: #fff;
margin-top: 16px; margin-top: 16px;
} }
.product_buy{ .product_buy {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
height:95px; height: 95px;
width: 100vw; width: 100vw;
position: fixed; position: fixed;
bottom: 0; bottom: 0;
@ -126,19 +132,18 @@
padding-bottom: constant(safe-area-inset-bottom); padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom);
.buy_cart {
.buy_cart{
width: 150px; width: 150px;
color: $color_font_three; color: $color_font_three;
text-align: center; text-align: center;
position: relative; position: relative;
.text{ .text {
font-size: $font_size_min; font-size: $font_size_min;
} }
.miconfont{ .miconfont {
font-size: 36px; font-size: 36px;
} }
.product_num{ .product_num {
position: absolute; position: absolute;
font-size: 23px; font-size: 23px;
background-color: red; background-color: red;
@ -153,7 +158,7 @@
right: 20px; right: 20px;
} }
} }
.buy_btn{ .buy_btn {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
@ -163,7 +168,7 @@
font-size: $font_size; font-size: $font_size;
color: #fff; color: #fff;
position: relative; position: relative;
.phoneBtn{ .phoneBtn {
background-color: rgba(0, 0, 0, 0); background-color: rgba(0, 0, 0, 0);
position: absolute; position: absolute;
width: 100%; width: 100%;

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

@ -6,7 +6,7 @@ import OrderCount from './components/orderCount'
import ShopCart from '@/components/shopCart' import ShopCart from '@/components/shopCart'
import styles from './index.module.scss' import styles from './index.module.scss'
import { useCallback, useEffect, useMemo, useState } from 'react' import { useCallback, useEffect, useMemo, useState } from 'react'
import { formatHashTag, formatImgUrl } from '@/common/fotmat' import { formatHashTag, formatImgUrl, formatPriceDiv } from '@/common/fotmat'
import { GetProductDetailApi } from '@/api/material' import { GetProductDetailApi } from '@/api/material'
import useLogin from '@/use/useLogin' import useLogin from '@/use/useLogin'
import { AnalysisShortCodeApi, GetShortCodeApi } from '@/api/share' import { AnalysisShortCodeApi, GetShortCodeApi } from '@/api/share'
@ -218,7 +218,8 @@ export default (props: Params) => {
<View className={styles.item_color}> <View className={styles.item_color}>
<LabAndImg value={{ lab: item.lab, rgb: item.rgb, texture_url: item.texture_url, title: item.code }} showStatus={true} /> <LabAndImg value={{ lab: item.lab, rgb: item.rgb, texture_url: item.texture_url, title: item.code }} showStatus={true} />
</View> </View>
<View className={styles.item_name}>{item.code}</View> <View className={styles.item_name}>{formatHashTag(item.code, item.name)}</View>
<View className={styles.bulk_price}>{formatPriceDiv(item.bulk_price)}/Kg</View>
</View> </View>
) )
})} })}

11
src/pages/user/index.tsx
View File

@ -341,7 +341,16 @@ const Main = memo(() => {
<View className={styles['card-main-list-content-item-right']}> <View className={styles['card-main-list-content-item-right']}>
<Text className='iconfont icon-a-moreback'></Text> <Text className='iconfont icon-a-moreback'></Text>
</View> </View>
{item.type === 'customer' && <Button openType='contact' className={styles.customer}></Button>} {item.type === 'customer' && (
<Button
openType='contact'
// sendMessageTitle='有个靓仔要询货:0770# 21S全棉平纹'
// showMessageCard={true}
// sendMessageImg='https://test.cdn.zzfzyc.com/mall/no_img.png'
// sendMessagePath='/pages/details/index?id=21'
// onContact={(e) => console.log('ee:::', e)}
className={styles.customer}></Button>
)}
</View> </View>
) )
})} })}