商城优化

src/common/constant.js

@@ -4,14 +4,14 @@
 // export const BASE_URL = `http://10.0.0.5:50001/lymarket`
 // export const BASE_URL = `http://192.168.0.89:40001/lymarket`
 // export const BASE_URL = `http://192.168.1.165:40001/lymarket` // 王霞
-export const BASE_URL = `https://test.zzfzyc.com/lymarket` // 测试环境
+// export const BASE_URL = `https://test.zzfzyc.com/lymarket` // 测试环境
 // export const BASE_URL = `http://192.168.1.9:40001/lymarket` // 发
 // export const BASE_URL = `http://192.168.1.9:50005/lymarket` // 发
 // export const BASE_URL = `http://192.168.1.30:50001/lymarket` // 发
 // export const BASE_URL = `https://dev.zzfzyc.com/lymarket`  // 开发环境
 // export const BASE_URL = `https://www.zzfzyc.com/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.42:50001/lymarket` // 杰
 
 // CDN

src/components/estimatedAmount/index.module.scss

@@ -0,0 +1,85 @@
+.order_price{
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    .close{
+        width: 100vw;
+        height: 100vh;
+        position: fixed;
+        z-index: 999;
+        top: 0;
+        left: 0;
+        
+    }
+    &:nth-last-child(n+2) {
+        margin-bottom: 30px;
+    }
+    .order_price_text{  
+        font-size: $font_size_medium;
+        // margin-right: 10px;
+        display: flex;
+        .iconfont_msg{
+            position: relative;
+            
+        }
+        .miconfont{
+            font-size: 26px;
+            font-weight: normal;
+            margin-left: 5px;
+        }
+        .message{
+            position: absolute;
+            top: 0;
+            background: rgba(168, 179, 189, 0.8);
+            z-index: 9;
+            min-height: 0;
+            padding: 20px;
+            box-sizing: border-box;
+            border-radius: 10px;
+            box-sizing: border-box;
+            word-break: break-all;
+            color: #fff;
+            // transition: top 0.2s ease-in-out;
+            transition: opacity 0.5s ease-in-out;
+            opacity: 0;
+            &::after{
+                z-index: 99;
+                position: absolute;
+                width: 0;
+                height: 0;
+                content: " ";
+                left: 10px;
+                bottom: -28px;
+                border: 15px solid transparent;
+                border-top-color: rgba(168, 179, 189, 0.8);
+            }
+        }
+    }
+    .emphasis{
+        font-weight: 700;
+    }
+    .order_price_num{
+        color: $color_main;
+        font-weight: 700;
+        text{
+            &:nth-child(1) {
+                font-size: $font_size_min;
+            }
+            &:nth-child(2) {
+                font-size: 26px;
+            }
+            &:nth-child(3) {
+                font-size: $font_size_medium;
+            }
+        }
+    }
+    .emphasis_num{
+        text{
+            &:nth-child(2) {
+                font-size: $font_size_big;
+            }
+        }
+    }
+    
+}

src/components/estimatedAmount/index.tsx

@@ -0,0 +1,62 @@
+import { Text, View } from "@tarojs/components"
+import { memo, useCallback, useEffect, useLayoutEffect, useMemo, useState } from "react"
+import {formatKbPrice} from '@/common/common'
+import classnames from "classnames";
+import styles  from './index.module.scss'
+import AmountShow from "../amountShow";
+import Taro from "@tarojs/taro";
+
+type Param = {
+    style?: Object,
+    number?: number,
+    title?: string,
+    titleStatus?: true|false, //true 标题加大加深
+    numberStatus?: 0|1|2, //数字尺寸
+    messageTitle?: string,
+    messageWidth?: number,
+    messageShow?: true|false,
+}
+export default memo(({number = 0, titleStatus = true, title = '', messageTitle = '', numberStatus = 1,  messageWidth = 430, messageShow = false}:Param) => {
+    const [show, setShow] = useState(messageShow)
+    const onClose = () => {
+        setShow(false)
+    }
+    const openShow = () => [
+        setShow(true)
+    ]
+
+    const [style, setStyle] = useState<{top: string}>()
+
+    useEffect(() => {
+        if(show) {
+            getDomDes('#message')
+        } else {
+            setStyle(() => ({top: '0'}))
+        }
+    }, [show])
+    //设置弹出层高度
+    const getDomDes = (id) => {
+        setTimeout(() => {
+            let query = Taro.createSelectorQuery();
+            query.select(id).boundingClientRect(rect=>{
+                let height = rect.height * 2 + 15;
+                setStyle((e) => ({...e, top: `-${height}rpx`, opacity: 1}))
+            }).exec();
+        }, 0)
+    }
+    return (
+        <>  
+            <View className={styles.order_price}>
+                <View className={classnames(styles.order_price_text, titleStatus&&styles.emphasis)} onClick={() => openShow()}>
+                    <Text>{title}</Text>
+                    <View className={styles.iconfont_msg}>
+                        {show&&<View style={{...style, width: `${messageWidth}rpx`}} id='message' className={classnames(styles.message)}>{messageTitle}</View>}
+                        <Text className={classnames(styles.miconfont, 'iconfont icon-zhushi')}></Text>
+                    </View>
+                </View>
+                <AmountShow status={numberStatus} number={number}/>
+                {show&&<View className={styles.close} catchMove onClick={onClose}></View>}
+            </View>
+        </>
+    )
+})

src/pages/order/components/estimatedAmount/index.module.scss

@@ -10,7 +10,7 @@
         z-index: 999;
         top: 0;
         left: 0;
-        word-break: break-all;
+        
     }
     &:nth-last-child(n+2) {
         margin-bottom: 30px;
@@ -30,23 +30,29 @@
         }
         .message{
             position: absolute;
-            top: -50px;
+            top: 0;
-            background: #A8B3BD;
+            background: rgba(168, 179, 189, 0.8);
             z-index: 9;
-            min-height: 50px;
+            min-height: 0;
-            border-radius: 10px;
+            padding: 20px;
-            padding: 10px;
             box-sizing: border-box;
-            &::before{
+            border-radius: 10px;
+            box-sizing: border-box;
+            word-break: break-all;
+            color: #fff;
+            // transition: top 0.2s ease-in-out;
+            transition: opacity 0.5s ease-in-out;
+            opacity: 0;
+            &::after{
                 z-index: 99;
                 position: absolute;
                 width: 0;
                 height: 0;
                 content: " ";
                 left: 10px;
-                bottom: -20px;
+                bottom: -28px;
-                border: 10px solid transparent;
+                border: 15px solid transparent;
-                border-top-color: #A8B3BD;
+                border-top-color: rgba(168, 179, 189, 0.8);
             }
         }
     }

src/pages/order/components/estimatedAmount/index.tsx

@@ -1,32 +1,62 @@
 import { Text, View } from "@tarojs/components"
-import { memo, useCallback, useEffect, useMemo } from "react"
+import { memo, useCallback, useEffect, useLayoutEffect, useMemo, useState } from "react"
 import {formatKbPrice} from '@/common/common'
 import classnames from "classnames";
 import styles  from './index.module.scss'
 import AmountShow from "../amountShow";
+import Taro from "@tarojs/taro";
+
 type Param = {
     style?: Object,
     number?: number,
     title?: string,
     titleStatus?: true|false, //true 标题加大加深
     numberStatus?: 0|1|2, //数字尺寸
-    messageTitle: string,
+    messageTitle?: string,
-    messageHeight: number,
+    messageHeight?: number,
-    messageWidth: number
+    messageWidth?: number,
+    messageShow?: true|false,
 }
-export default memo(({style, number = 0, titleStatus = true, title = '', numberStatus = 1, messageHeight = 100, messageWidth = 260}:Param) => {
+export default memo(({number = 0, titleStatus = true, title = '', messageTitle = '', numberStatus = 1, messageHeight = 70, messageWidth = 430, messageShow = false}:Param) => {
+    const [show, setShow] = useState(messageShow)
+    const onClose = () => {
+        setShow(false)
+    }
+    const openShow = () => [
+        setShow(true)
+    ]
+
+    const [style, setStyle] = useState<{top: string}>()
+
+    useEffect(() => {
+        if(show) {
+            getDomDes('#message')
+        } else {
+            setStyle(() => ({top: '0'}))
+        }
+    }, [show])
+    //设置弹出层高度
+    const getDomDes = (id) => {
+        setTimeout(() => {
+            let query = Taro.createSelectorQuery();
+            query.select(id).boundingClientRect(rect=>{
+                let height = rect.height * 2 + 15;
+                setStyle((e) => ({...e, top: `-${height}rpx`, opacity: 1}))
+            }).exec();
+        }, 0)
+    }
     return (
         <>  
             <View className={styles.order_price}>
-                <View className={classnames(styles.order_price_text, titleStatus&&styles.emphasis)}>
+                <View className={classnames(styles.order_price_text, titleStatus&&styles.emphasis)} onClick={() => openShow()}>
                     <Text>{title}</Text>
                     <View className={styles.iconfont_msg}>
-                        {/* <View style={{height:`${messageHeight}rpx`, top:`${-messageHeight}rpx`, width: `${messageWidth}rpx`}} className={classnames(styles.message)}>1231231231212123123123lll12312123123lll12312123123lll12312</View> */}
+                        {show&&<View style={{...style, width: `${messageWidth}rpx`}} id='message' className={classnames(styles.message)}>{messageTitle}</View>}
                         <Text className={classnames(styles.miconfont, 'iconfont icon-zhushi')}></Text>
                     </View>
                 </View>
                 <AmountShow status={numberStatus} number={number}/>
-                {/* <View className={styles.close} catchMove></View> */}
+                {show&&<View className={styles.close} catchMove onClick={onClose}></View>}
             </View>
         </>
     )

src/pages/order/components/kindList/index.tsx

@@ -2,7 +2,7 @@ import { ORDER_STATUS } from "@/common/enum"
 import { formatHashTag, formatPriceDiv, formatWeightDiv } from "@/common/fotmat"
 import LabAndImg from "@/components/LabAndImg"
 import { Text, View } from "@tarojs/components"
-import { memo, useCallback, useMemo } from "react"
+import { memo, useCallback, useMemo, useState } from "react"
 import EstimatedAmount from "../estimatedAmount"
 import styles  from './index.module.scss'
 
@@ -67,31 +67,41 @@ export default memo(({order, comfirm = false}:Param) => {
             id:1,
             value:[SaleorderstatusWaitingPrePayment.value, SaleOrderStatusBooking.value, SaleOrderStatusArranging.value],
             label:'预估金额',
-            field: 'estimate_amount'
+            field: 'estimate_amount',
+            message: '预估金额按生产商定义的标准匹重计算，仅供参考。详细交易金额以出单为准！',
+            messageShow: false,
         },
         {
             id:2,
             value:[SaleOrderStatusTaking.value, SaleOrderStatusArranged.value, SaleOrderStatusWaitingPayment.value, SaleOrderStatusWaitingDelivery.value, SaleOrderStatusWaitingReceipt.value, SaleOrderStatusAlreadyReceipt.value, SaleOrderStatusComplete.value, SaleOrderStatusRefund.value, SaleOrderStatusCancel.value],
             label:'合计金额',
-            field: 'total_sale_price'
+            field: 'total_sale_price',
+            message: '包含空差的货款金额',
+            messageShow: false,
         },
         {
             id:3,
             value:[SaleOrderStatusWaitingPayment.value, SaleOrderStatusWaitingDelivery.value, SaleOrderStatusWaitingReceipt.value, SaleOrderStatusAlreadyReceipt.value, SaleOrderStatusComplete.value, SaleOrderStatusRefund.value, SaleOrderStatusCancel.value],
             label:'空差优惠',
-            field: 'total_weight_error_discount'
+            field: 'total_weight_error_discount',
+            message: '扣除空差金额',
+            messageShow: false,
         },
         {
             id:4,
             value:[ SaleOrderStatusWaitingPayment.value],
             label:'应付金额',
-            field: 'total_should_collect_money'
+            field: 'total_should_collect_money',
+            message: '扣除空差后的货款金额',
+            messageShow: false,
         },
         {
             id:5,
             value:[SaleOrderStatusTaking.value, SaleOrderStatusWaitingDelivery.value, SaleOrderStatusWaitingReceipt.value, SaleOrderStatusAlreadyReceipt.value, SaleOrderStatusComplete.value, SaleOrderStatusRefund.value, SaleOrderStatusCancel.value],
             label:'实付金额',
-            field: 'actual_amount'
+            field: 'actual_amount',
+            message: '本单实付总金额',
+            messageShow: false,
         }
     ]
 
@@ -116,7 +126,7 @@ export default memo(({order, comfirm = false}:Param) => {
             <>
                 {
                     priceList.map(item => {
-                      return <>{showPrice(item)&&<EstimatedAmount key={item.id} number={formatPriceDiv(order[item.field])} title={item.label} />}</>
+                      return <>{showPrice(item)&&<EstimatedAmount messageShow={item.messageShow} key={item.id} number={formatPriceDiv(order[item.field])} title={item.label} messageTitle={item.message} />}</>
                     })
                 }
             </>

src/pages/salesAfter/components/kindList/index.tsx

@@ -94,7 +94,8 @@ export default memo(({order, comfirm = false}:Param) => {
                 ReturnStageCancel.value
             ],
             label:'合计金额',
-            field: 'total_refund_amount'
+            field: 'total_refund_amount',
+            message: '按原单价*退货重量的金额'
         },
         {
             id:1,
@@ -102,7 +103,8 @@ export default memo(({order, comfirm = false}:Param) => {
             cut_value: [ReturnStageServiceOrderPendingRefund.value, ReturnStageReturned.value],
             model_value: [],
             label:'扣款金额',
-            field: 'other_deduction_amount'
+            field: 'other_deduction_amount',
+            message: '本次售后扣款金额'
         },
         {
             id:3,
@@ -110,7 +112,8 @@ export default memo(({order, comfirm = false}:Param) => {
             cut_value: [ReturnStageReturned.value],
             model_value: [ReturnStageReturned.value],
             label:'退款金额',
-            field: 'refund_amount'
+            field: 'refund_amount',
+            message: '本次售后应退款金额'
         },
         {
             id:4,
@@ -118,7 +121,8 @@ export default memo(({order, comfirm = false}:Param) => {
             cut_value: [ReturnStageReturned.value],
             model_value: [ReturnStageReturned.value],
             label:'退款去向',
-            field: 'refund_flow_name'
+            field: 'refund_flow_name',
+            message: '本次售后应退款金额'
         },
        
     ]