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

🎈 perf(ID1000721【订单进度咨询】):

Browse Source
This commit is contained in:
czm 2022-11-24 14:39:26 +08:00
parent 566f429051
commit cb7a1df5b2
5 changed files with 143 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -254,7 +254,7 @@ export default (props: Params) => {
sendMessageImg={shareImg}
sendMessageTitle={productName}
showMessageCard={true}
sendMessagePath={`pages/details/index?id=${productInfo.id}`}></Button>
sendMessagePath={`/pages/details/index?id=${productInfo.id}`}></Button>
</View>
</View>
<View className={styles.buy_cart} onClick={() => setShowCart(true)}>

43
src/pages/order/components/movableAreaBtn/index.module.scss Normal file
View File

@ -0,0 +1,43 @@
.movableItem {
width: 100%;
height: 100%;
position: relative;
}
.moveBtn {
width: 100px;
height: 100px;
border-radius: 50%;
border: 2px solid #cde5ff;
box-shadow: 0px 0px 20px 0px rgba(104, 180, 255, 0.7);
background-color: #fff;
display: flex;
justify-content: center;
align-items: center;
z-index: 999;
.shop_icon {
font-size: 70px;
color: $color_main;
}
.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: 0;
}
.wxBtn {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
opacity: 0;
}
}

38
src/pages/order/components/movableAreaBtn/index.tsx Normal file
View File

@ -0,0 +1,38 @@
import { Button, 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'
type param = {
children?: ReactElement | null
orderInfo?: any
}
export default ({ children = null, orderInfo }: param) => {
const [screenHeight, setScreenHeight] = useState(0)
const screenWidthRef = useRef(0)
useLayoutEffect(() => {
const res = Taro.getSystemInfoSync()
if (res.screenHeight) {
let ratio = 750 / res.screenWidth
setScreenHeight(res.screenHeight * ratio - 600)
screenWidthRef.current = res.screenWidth / 2
}
})
return (
<MovableArea className={styles.movableItem}>
{children}
<MovableView className={styles.moveBtn} direction='all' inertia={true} x='630rpx' y={screenHeight + 'rpx'}>
<View className={classnames('iconfont', 'icon-kefu', styles.shop_icon)}>
<Button
className={styles.wxBtn}
openType='contact'
sendMessageTitle={orderInfo?.order_no}
showMessageCard={true}
sendMessagePath={`/pages/order/index?id=${orderInfo?.id}`}></Button>
</View>
</MovableView>
</MovableArea>
)
}

3
src/pages/order/index.module.scss
View File

@ -1,3 +1,6 @@
.movable_area {
width: 100%;
}
.order_main {
min-height: 100%;
background-color: $color_bg_one;

113
src/pages/order/index.tsx
View File

@ -9,7 +9,7 @@ import Popup from '@/components/popup'
import SearchInput from '@/components/searchInput'
import ShopCart from '@/components/shopCart'
import useLogin from '@/use/useLogin'
import { Text, View } from '@tarojs/components'
import { MovableArea, Text, View } from '@tarojs/components'
import Taro, { useDidShow, usePullDownRefresh, useRouter } from '@tarojs/taro'
import classnames from 'classnames'
import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
@ -17,6 +17,7 @@ import AddressInfoDetail from './components/addressInfoDetail'
import AdvanceOrderState from './components/advanceOrderState'
import ApplyRefund from './components/applyRefund'
import KindList from './components/kindList'
import MovableAreaBtn from './components/movableAreaBtn'
import OrderState from './components/orderState'
import Payment from './components/payment'
import Remark from './components/remark'
@ -283,61 +284,63 @@ export default () => {
const [showScanPayCheck, setShowScanPayCheck] = useState(false)
return (
<View className={styles.order_main}>
{(orderDetail?.status != SaleorderstatusWaitingPrePayment.value && <OrderState orderInfo={orderDetail} />) || (
<AdvanceOrderState orderInfo={orderDetail} onRefresh={refresh} />
)}
<View>
<AddressInfoDetail
orderInfo={defaultAddress}
onLogistics={getLogistics}
onSelect={getAddress}
onChangeShipmentMode={getShipmentMode}
ref={addressRef}
/>
</View>
<KindList order={formatPreViewOrderMemo} />
<View className={styles.order_info}>
<View className={styles.order_info_title}>订单信息</View>
<SearchInput showBorder={false} title='单号' height='50rpx'>
<View className={styles.order_num}>
<Text>{orderDetail?.order_no}</Text>
<View className={styles.order_num_btn} onClick={() => clipboardData()}>
复制
</View>
</View>
</SearchInput>
<SearchInput showBorder={false} title='下单时间' height='50rpx'>
<Text>{formatDateTime(orderDetail?.create_time)}</Text>
</SearchInput>
{orderDetail?.payment_time && (
<SearchInput showBorder={false} title='付款时间' height='50rpx'>
<Text>{formatDateTime(orderDetail?.payment_time)}</Text>
</SearchInput>
<MovableAreaBtn orderInfo={orderDetail}>
<View className={styles.order_main}>
{(orderDetail?.status != SaleorderstatusWaitingPrePayment.value && <OrderState orderInfo={orderDetail} />) || (
<AdvanceOrderState orderInfo={orderDetail} onRefresh={refresh} />
)}
</View>
<View className={styles.order_desc} onClick={descOpen}>
<View className={styles.order_desc_con}>订单备注</View>
{(orderRemark && <View className={styles.order_desc_text}>{orderDetail?.remark}</View>) || (
<View className={styles.order_desc_text_hint}>填写备注</View>
)}
<View className={classnames(styles.miconfont, 'iconfont icon-a-moreback')}></View>
</View>
{orderDetail?.status != SaleOrderStatusCancel.value && (
<View className={styles.submit_order_con}>
<OrderBtns orderInfo={orderInfo} onClick={orderStateClick} />
<View className='common_safe_area_y'></View>
<View>
<AddressInfoDetail
orderInfo={defaultAddress}
onLogistics={getLogistics}
onSelect={getAddress}
onChangeShipmentMode={getShipmentMode}
ref={addressRef}
/>
</View>
)}
<Popup show={showDesc} showTitle={false} onClose={() => setShowDesc(false)}>
<Remark onSave={(e) => getRemark(e)} defaultValue={orderDetail?.remark} />
</Popup>
<Payment onSubmitSuccess={onPaySuccess} show={payMentShow} onClose={closePayShow} orderInfo={orderDetail} />
<ScanPayCheck show={showScanPayCheck} onClose={() => setShowScanPayCheck(false)} orderInfo={orderDetail} />
<ApplyRefund show={refundShow} onSuccess={applyRefundSuccess} onClose={applyRefundClose} orderId={orderDetail?.id} />
<ShopCart intoStatus='again' show={showCart} onClose={() => setShowCart(false)} />
<ReturnRecord show={returnRecordShow} onClose={closeReturnRecord} id={orderDetail?.id} />
<View className='common_safe_area_y'></View>
</View>
<KindList order={formatPreViewOrderMemo} />
<View className={styles.order_info}>
<View className={styles.order_info_title}>订单信息</View>
<SearchInput showBorder={false} title='单号' height='50rpx'>
<View className={styles.order_num}>
<Text>{orderDetail?.order_no}</Text>
<View className={styles.order_num_btn} onClick={() => clipboardData()}>
复制
</View>
</View>
</SearchInput>
<SearchInput showBorder={false} title='下单时间' height='50rpx'>
<Text>{formatDateTime(orderDetail?.create_time)}</Text>
</SearchInput>
{orderDetail?.payment_time && (
<SearchInput showBorder={false} title='付款时间' height='50rpx'>
<Text>{formatDateTime(orderDetail?.payment_time)}</Text>
</SearchInput>
)}
</View>
<View className={styles.order_desc} onClick={descOpen}>
<View className={styles.order_desc_con}>订单备注</View>
{(orderRemark && <View className={styles.order_desc_text}>{orderDetail?.remark}</View>) || (
<View className={styles.order_desc_text_hint}>填写备注</View>
)}
<View className={classnames(styles.miconfont, 'iconfont icon-a-moreback')}></View>
</View>
{orderDetail?.status != SaleOrderStatusCancel.value && (
<View className={styles.submit_order_con}>
<OrderBtns orderInfo={orderInfo} onClick={orderStateClick} />
<View className='common_safe_area_y'></View>
</View>
)}
<Popup show={showDesc} showTitle={false} onClose={() => setShowDesc(false)}>
<Remark onSave={(e) => getRemark(e)} defaultValue={orderDetail?.remark} />
</Popup>
<Payment onSubmitSuccess={onPaySuccess} show={payMentShow} onClose={closePayShow} orderInfo={orderDetail} />
<ScanPayCheck show={showScanPayCheck} onClose={() => setShowScanPayCheck(false)} orderInfo={orderDetail} />
<ApplyRefund show={refundShow} onSuccess={applyRefundSuccess} onClose={applyRefundClose} orderId={orderDetail?.id} />
<ShopCart intoStatus='again' show={showCart} onClose={() => setShowCart(false)} />
<ReturnRecord show={returnRecordShow} onClose={closeReturnRecord} id={orderDetail?.id} />
<View className='common_safe_area_y'></View>
</View>
</MovableAreaBtn>
)
}