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
// 生成密钥 // 生成密钥

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

@ -1,48 +1,53 @@
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 [showMoveBtn, setShowMoveBtn] = useState(false)
const screenWidthRef = useRef(0)
useReady(() => {
const res = Taro.getSystemInfoSync()
if(res.screenHeight) {
let ratio = 750 / res.screenWidth
setScreenHeight(res.screenHeight*ratio - 460)
screenWidthRef.current = res.screenWidth/2
}
setShowMoveBtn(true)
})
useEffect(() => {
getShopCount()
}, [])
const dragEnd = (e) => {
const [screenHeight, setScreenHeight] = useState(0)
const [showMoveBtn, setShowMoveBtn] = useState(false)
const screenWidthRef = useRef(0)
useLayoutEffect(() => {
const res = Taro.getSystemInfoSync()
if (res.screenHeight) {
let ratio = 750 / res.screenWidth
setScreenHeight(res.screenHeight * ratio - 460)
screenWidthRef.current = res.screenWidth / 2
} }
setShowMoveBtn(true)
})
return ( useEffect(() => {
<MovableArea className={styles.movableItem}> getShopCount()
{children} }, [])
{showMoveBtn&&<MovableView onClick={onClick} className={styles.moveBtn} direction="all" inertia={true} x="630rpx" y={screenHeight+'rpx'} onTouchEnd={(e) => dragEnd(e)}>
<View className={classnames('iconfont','icon-gouwuche', styles.shop_icon) } ></View> const dragEnd = (e) => {}
{(commonData.shopCount > 0)&&<View className={styles.product_num}>{commonData.shopCount > 99?'99+':commonData.shopCount}</View>}
</MovableView>} return (
</MovableArea> <MovableArea className={styles.movableItem}>
) {children}
<MovableView
onClick={onClick}
className={styles.moveBtn}
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>
)
} }

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

@ -1,176 +1,180 @@
.shop_cart_main{ .shop_cart_main {
.popup_con{ .popup_con {
height: 80vh; height: 80vh;
display: flex;
flex-direction: column;
}
.header {
color: $color_font_one;
font-size: 32px;
font-weight: 700;
padding: 20px;
}
.colorFind {
padding: 10px 20px;
display: flex;
align-items: center;
.search {
flex: 1;
}
.text {
font-size: $font_size_medium;
color: $color_main;
}
}
.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;
}
}
.colorNum {
display: flex;
justify-content: space-between;
padding: 20px;
.title {
font-size: 26px;
}
.miconfont {
font-size: 36px;
color: $color_font_two;
}
}
.product_color_con {
flex: 1;
height: 0;
padding-bottom: 151px;
}
.color_con {
.virtual_list {
padding-bottom: 300px;
}
.item {
display: flex;
justify-content: space-between;
padding: 0 20px;
margin-bottom: 40px;
.item_color {
width: 156.5px;
height: 156.5px;
border-radius: 20px;
}
.item_con {
flex: 1;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
}
.header{
color: $color_font_one;
font-size: 32px;
font-weight: 700;
padding: 20px;
}
.colorFind{
padding: 10px 20px;
display: flex;
align-items: center;
.search{
flex:1;
}
.text{
font-size: $font_size_medium;
color: $color_main;
}
}
.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;
}
}
.colorNum{
display: flex;
justify-content: space-between; justify-content: space-between;
padding: 20px; padding: 20px 0 20px 20px;
.title{ .title {
font-size: 26px; font-size: $font_size_big;
font-weight: 700;
} }
.miconfont{ .num {
font-size: 36px; font-size: $font_size;
color: $color_font_two; color: $color_main;
padding-top: 10px;
} }
} .weight_error {
.product_color_con{ font-size: 28px;
flex:1; color: #666666;
height: 0;
padding-bottom:151px;
}
.color_con{
.virtual_list{
padding-bottom: 300px;
} }
.item { .priceText {
display: flex; font-size: $font_size_big;
justify-content: space-between; Text {
padding: 0 20px; font-size: $font_size_min;
margin-bottom: 40px; }
.item_color{
width: 156.5px;
height: 156.5px;
border-radius: 20px;
}
.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;
}
.priceText{
font-size: $font_size_big;
Text{
font-size: $font_size_min;
}
}
}
.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;
}
.btn_count{
width: 235px;
height: 64px;
background-color: #ECF5FF;
border-radius: 40px 0px 16px 0px;
padding: 0 20px;
display: flex;
align-items: center;
}
}
} }
} }
.noData{ .btn_con {
width:100%;
height: 100%;
display: flex; display: flex;
justify-content: center; align-items: flex-end;
align-items: center; .btn {
color: $color_font_three; width: 116px;
font-size: $font_size_medium; 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;
}
.btn_count {
width: 235px;
height: 64px;
background-color: #ecf5ff;
border-radius: 40px 0px 16px 0px;
padding: 0 20px;
display: flex;
align-items: center;
}
}
} }
.buy_btn{ }
width: 100%; .noData {
padding: 0 40px; width: 100%;
padding-bottom: constant(safe-area-inset-bottom); height: 100%;
padding-bottom: env(safe-area-inset-bottom); display: flex;
box-sizing: border-box; justify-content: center;
position: fixed; align-items: center;
bottom:0; color: $color_font_three;
font-size: $font_size_medium; font-size: $font_size_medium;
color: $color_font_two; }
background-color: #fff; .buy_btn {
box-shadow: 6px 0px 12px 0px rgba(0,0,0,0.16); width: 100%;
.buy_btn_con{ padding: 0 40px;
display: flex; padding-bottom: constant(safe-area-inset-bottom);
justify-content: space-between; padding-bottom: env(safe-area-inset-bottom);
align-items: center; box-sizing: border-box;
height: 151px; position: fixed;
} bottom: 0;
.add_cart{ font-size: $font_size_medium;
width: 260px; color: $color_font_two;
height: 90px; background-color: #fff;
font-size: $font_size_big; box-shadow: 6px 0px 12px 0px rgba(0, 0, 0, 0.16);
text-align: center; .buy_btn_con {
line-height: 90px; display: flex;
border-radius: 50px; justify-content: space-between;
color: #fff; align-items: center;
background: linear-gradient(38deg,#5cabff, #7cbcfc 100%, #99ccff 100%); height: 151px;
}
.select_add_cart{
background: linear-gradient(38deg,#007aff, #4fa6ff 100%, #68b4ff 100%);
}
} }
.add_cart {
width: 260px;
height: 90px;
font-size: $font_size_big;
text-align: center;
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%);
}
}
} }

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}>

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

@ -1,174 +1,179 @@
.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;
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;
position: relative;
.text {
margin-top: 10px;
font-size: $font_size_medium;
}
}
.shareBtn {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
}
.miconfont {
font-size: 45px;
}
.collected {
color: #ffc300;
}
}
.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;
font-size: $font_size_medium;
color: $color_font_three;
.des_text {
display: flex; display: flex;
align-items: center; margin-bottom: 16px;
height: 163.57px; text {
background-color: #fff; flex: 1;
.title{ @include common_ellipsis(1);
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; .product_color {
color: $color_font_three; background-color: #fff;
position: relative; margin-top: 16px;
.text{ padding: 30px 20px 0;
margin-top: 10px; color: $color_font_one;
font-size: $font_size_medium; font-size: $font_size_medium;
} .title {
} }
.shareBtn { .list {
position: absolute; margin-top: 30px;
top: 0; display: grid;
left: 0; grid-template-columns: 210px 210px 210px;
justify-content: space-between;
.item {
width: 210px;
margin-bottom: 28px;
.item_color {
width: 210px;
height: 210px;
border-radius: 20px;
image {
width: 100%; width: 100%;
height: 100%; height: 100%;
opacity: 0; border-radius: 20px;
}
} }
.miconfont{ .item_name {
font-size: 45px; text-align: center;
margin-top: 10px;
@include common_ellipsis;
} }
.collected{ .bulk_price {
color: #FFC300; color: #8a8a8a;
font-size: 24px;
text-align: center;
} }
}
} }
.des_data{ }
background-color: #fff; .product_detail {
padding: 20px; // padding: 20px;
margin-top: 16px; background-color: #fff;
.title{ margin-top: 16px;
font-size: $font_size; }
font-weight: 700; .product_buy {
color: $color_font_one; display: flex;
margin-bottom: 20px; justify-content: space-between;
} align-items: center;
.con{ height: 95px;
display: grid; width: 100vw;
grid-template-columns: 260px auto; position: fixed;
font-size: $font_size_medium; bottom: 0;
color: $color_font_three; left: 0;
.des_text{ background-color: #fff;
display: flex; padding-bottom: constant(safe-area-inset-bottom);
margin-bottom: 16px; padding-bottom: env(safe-area-inset-bottom);
text{
flex:1;
@include common_ellipsis(1);
}
}
}
}
.product_color{
background-color: #fff;
margin-top: 16px;
padding: 30px 20px 0;
color: $color_font_one;
font-size: $font_size_medium;
.title{
} .buy_cart {
.list{ width: 150px;
margin-top: 30px; color: $color_font_three;
display: grid; text-align: center;
grid-template-columns: 210px 210px 210px ; position: relative;
justify-content: space-between; .text {
.item { font-size: $font_size_min;
width:210px; }
margin-bottom: 20px; .miconfont {
.item_color{ font-size: 36px;
width:210px; }
height: 210px; .product_num {
border-radius: 20px; position: absolute;
image{ font-size: 23px;
width: 100%; background-color: red;
height: 100%; color: #fff;
border-radius: 20px; height: 36px;
} line-height: 36px;
} padding: 0 6px;
.item_name{ border-radius: 72px;
text-align: center; min-width: 25px;
margin-top: 10px; text-align: center;
} top: 0;
} right: 20px;
} }
} }
.product_detail{ .buy_btn {
// padding: 20px; display: flex;
background-color: #fff; justify-content: center;
margin-top: 16px; align-items: center;
} width: 297px;
.product_buy{ height: 100%;
display: flex; background-color: $color_main;
justify-content: space-between; font-size: $font_size;
align-items: center; color: #fff;
height:95px; position: relative;
width: 100vw; .phoneBtn {
position: fixed; background-color: rgba(0, 0, 0, 0);
bottom: 0; position: absolute;
left: 0; width: 100%;
background-color: #fff; height: 100%;
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;
position: relative;
.text{
font-size: $font_size_min;
}
.miconfont{
font-size: 36px;
}
.product_num{
position: absolute;
font-size: 23px;
background-color: red;
color: #fff;
height: 36px;
line-height: 36px;
padding: 0 6px;
border-radius: 72px;
min-width: 25px;
text-align: center;
top: 0;
right: 20px;
}
}
.buy_btn{
display: flex;
justify-content: center;
align-items: center;
width: 297px;
height: 100%;
background-color: $color_main;
font-size: $font_size;
color: #fff;
position: relative;
.phoneBtn{
background-color: rgba(0, 0, 0, 0);
position: absolute;
width: 100%;
height: 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>
) )
})} })}