商城优化

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>
+        </>
+    )
+})