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

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

@ -1,48 +1,53 @@
import { MovableArea, MovableView, View } from "@tarojs/components"
import Taro, { useReady } from "@tarojs/taro"
import { ReactElement, useEffect, useRef, useState } from "react"
import classnames from "classnames";
import styles from './index.module.scss'
import { GetShoppingCartApi } from "@/api/shopCart";
import useCommonData from "@/use/useCommonData";
import { useSelector } from "@/reducers/hooks";
import { MovableArea, MovableView, View } from '@tarojs/components'
import Taro, { useReady } from '@tarojs/taro'
import { ReactElement, useEffect, useLayoutEffect, useRef, useState } from 'react'
import classnames from 'classnames'
import styles from './index.module.scss'
import { GetShoppingCartApi } from '@/api/shopCart'
import useCommonData from '@/use/useCommonData'
import { useSelector } from '@/reducers/hooks'
type param = {
children?: ReactElement|null,
onClick?: () => void
children?: ReactElement | null
onClick?: () => void
}
export default ({children = null, onClick}:param) => {
//获取购物车数据数量
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) => {
export default ({ children = null, onClick }: param) => {
//获取购物车数据数量
const { getShopCount, commonData } = useCommonData()
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 (
<MovableArea className={styles.movableItem}>
{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>
{(commonData.shopCount > 0)&&<View className={styles.product_num}>{commonData.shopCount > 99?'99+':commonData.shopCount}</View>}
</MovableView>}
</MovableArea>
)
}
useEffect(() => {
getShopCount()
}, [])
const dragEnd = (e) => {}
return (
<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>
)
}

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

@ -1,176 +1,180 @@
.shop_cart_main{
.popup_con{
height: 80vh;
.shop_cart_main {
.popup_con {
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;
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;
padding: 20px 0 20px 20px;
.title {
font-size: $font_size_big;
font-weight: 700;
}
.miconfont{
font-size: 36px;
color: $color_font_two;
.num {
font-size: $font_size;
color: $color_main;
padding-top: 10px;
}
}
.product_color_con{
flex:1;
height: 0;
padding-bottom:151px;
}
.color_con{
.virtual_list{
padding-bottom: 300px;
.weight_error {
font-size: 28px;
color: #666666;
}
.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;
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;
}
}
.priceText {
font-size: $font_size_big;
Text {
font-size: $font_size_min;
}
}
}
.noData{
width:100%;
height: 100%;
}
.btn_con {
display: flex;
justify-content: center;
align-items: center;
color: $color_font_three;
font-size: $font_size_medium;
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;
}
}
}
.buy_btn{
width: 100%;
padding: 0 40px;
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
box-sizing: border-box;
position: fixed;
bottom:0;
font-size: $font_size_medium;
color: $color_font_two;
background-color: #fff;
box-shadow: 6px 0px 12px 0px rgba(0,0,0,0.16);
.buy_btn_con{
display: flex;
justify-content: space-between;
align-items: center;
height: 151px;
}
.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%);
}
}
.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;
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
box-sizing: border-box;
position: fixed;
bottom: 0;
font-size: $font_size_medium;
color: $color_font_two;
background-color: #fff;
box-shadow: 6px 0px 12px 0px rgba(0, 0, 0, 0.16);
.buy_btn_con {
display: flex;
justify-content: space-between;
align-items: center;
height: 151px;
}
}
.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 Taro, { useRouter } from '@tarojs/taro'
import UseLogin from '@/use/useLogin'
import { formatHashTag, formatPriceDiv } from '@/common/fotmat'
import { formatHashTag, formatPriceDiv, formatWeightDiv } from '@/common/fotmat'
import { getFilterData } from '@/common/util'
import LabAndImg from '@/components/LabAndImg'
import VirtualList from '@tarojs/components/virtual-list'
@ -228,6 +228,7 @@ export default memo(({ show = false, onClose, title = '', productId = 0 }: param
</View>
<View className={styles.item_con}>
<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>
<View className={styles.btn_con}>

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

@ -1,174 +1,179 @@
.main{
min-height: 100%;
background-color: $color_bg_one;
padding-bottom: 100px;
.product_header{
padding: 0 20px;
.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;
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;
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;
}
margin-bottom: 16px;
text {
flex: 1;
@include common_ellipsis(1);
}
.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;
}
}
}
.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: 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%;
height: 100%;
opacity: 0;
border-radius: 20px;
}
}
.miconfont{
font-size: 45px;
.item_name {
text-align: center;
margin-top: 10px;
@include common_ellipsis;
}
.collected{
color: #FFC300;
.bulk_price {
color: #8a8a8a;
font-size: 24px;
text-align: center;
}
}
}
.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;
margin-bottom: 16px;
text{
flex:1;
@include common_ellipsis(1);
}
}
}
}
.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;
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;
}
}
.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: 210px 210px 210px ;
justify-content: space-between;
.item {
width:210px;
margin-bottom: 20px;
.item_color{
width:210px;
height: 210px;
border-radius: 20px;
image{
width: 100%;
height: 100%;
border-radius: 20px;
}
}
.item_name{
text-align: center;
margin-top: 10px;
}
}
}
.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%;
}
}
.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;
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 styles from './index.module.scss'
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 useLogin from '@/use/useLogin'
import { AnalysisShortCodeApi, GetShortCodeApi } from '@/api/share'
@ -218,7 +218,8 @@ export default (props: Params) => {
<View className={styles.item_color}>
<LabAndImg value={{ lab: item.lab, rgb: item.rgb, texture_url: item.texture_url, title: item.code }} showStatus={true} />
</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>
)
})}

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

@ -341,7 +341,16 @@ const Main = memo(() => {
<View className={styles['card-main-list-content-item-right']}>
<Text className='iconfont icon-a-moreback'></Text>
</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>
)
})}