🎈 perf(优化浮窗弹窗):

src/common/constant.ts

@@ -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`
@@ -12,7 +12,7 @@ export const BASE_URL = CURRENT_BASE_URL
 // 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.28:50002/lymarket' // 婷
 // export const BASE_URL = `http://192.168.1.42:50002/lymarket` //  杰
 

src/components/customer/index.module.scss

@@ -0,0 +1,65 @@
+.customer_service_list {
+  .customer_service_title {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    padding: 24px;
+    box-sizing: border-box;
+    text {
+      &:nth-child(1) {
+        font-size: 32px;
+        font-weight: 500;
+        color: #000000;
+      }
+      &:nth-child(2) {
+        font-size: 24px;
+        font-weight: 400;
+        color: rgba(0, 0, 0, 0.4);
+      }
+    }
+  }
+  .customer_service_con {
+    padding: 0 32px;
+    .customer_service_item {
+      display: flex;
+      align-items: center;
+      padding: 32px 40px;
+      box-sizing: border-box;
+      width: 686px;
+      height: 136px;
+      background: #ffffff;
+      box-shadow: 0px 0px 28px -3px rgba(0, 0, 0, 0.06);
+      border-radius: 16px;
+      margin-bottom: 16px;
+      position: relative;
+      button {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        top: 0;
+        left: 0;
+        opacity: 0;
+      }
+      .customer_service_item_con {
+        display: flex;
+        flex-direction: column;
+        flex: 1;
+        margin-left: 24px;
+        text {
+          &:nth-child(1) {
+            font-size: 28px;
+          }
+          &:nth-child(2) {
+            font-size: 24px;
+            color: rgba(0, 0, 0, 0.4);
+          }
+        }
+      }
+      .customer_service_item_icon {
+        transform: rotate(-90deg);
+      }
+    }
+  }
+}

src/components/customer/index.tsx

@@ -0,0 +1,66 @@
+import { Button, Text, View } from '@tarojs/components'
+import Taro from '@tarojs/taro'
+import { useState } from 'react'
+import styles from './index.module.scss'
+import IconFont from '@/components/iconfont/iconfont'
+import Popup from '@/components/popup'
+import { useSelector } from '@/reducers/hooks'
+import { alert } from '@/common/common'
+
+interface Param {
+  onClose?: () => void
+  show: boolean,
+  messageTitle?: string,
+  messagePath?: string
+  showCard?: true|false
+}
+export default (props: Param) => {
+  const userInfo = useSelector(state => state.userInfo)
+  const makePhoneCall = () => {
+    if (!userInfo?.adminUserInfo?.sale_user_phone) { return alert.error('手机号不能为空') }
+    Taro.makePhoneCall({
+      phoneNumber: userInfo?.adminUserInfo?.sale_user_phone,
+    })
+  }
+  const onClose = () => {
+    props.onClose?.()
+  }
+
+  return <Popup show={props.show} showTitle={false} onClose={onClose}>
+    <View className={styles.customer_service_list}>
+      <View className={styles.customer_service_title}>
+        <Text>请选择您要的服务</Text>
+        {/* <Text>我们根据选择为您提供服务</Text> */}
+      </View>
+      <View className={styles.customer_service_con}>
+        <View className={styles.customer_service_item}>
+          <IconFont name="icon-guanfangweixinkefu" size={60} />
+          <View className={styles.customer_service_item_con}>
+            <Text>在线官方客服</Text>
+            <Text>竭诚为您服务！</Text>
+          </View>
+          <View className={styles.customer_service_item_icon}>
+            <IconFont name="icon-xiala" size={40} />
+          </View>
+          <Button
+            className={styles.customer}
+            openType="contact"
+            sendMessageTitle={props.messageTitle}
+            showMessageCard = {props.showCard}
+            sendMessagePath={props.messagePath}
+          ></Button>
+        </View>
+        {!!userInfo?.adminUserInfo?.sale_user_phone && <View onClick={makePhoneCall} className={styles.customer_service_item}>
+          <IconFont name="icon-bodakehujingli" size={60} />
+          <View className={styles.customer_service_item_con}>
+            <Text>客户经理</Text>
+            <Text>点击拨打{userInfo?.adminUserInfo?.sale_user_phone}</Text>
+          </View>
+          <View className={styles.customer_service_item_icon} >
+            <IconFont name="icon-xiala" size={40} />
+          </View>
+        </View>}
+      </View>
+    </View>
+  </Popup>
+}

src/components/moveBtn copy/index.module.scss

@@ -0,0 +1,54 @@
+.movableItem {
+  width: 100%;
+  height: 100%;
+}
+.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;
+  position: fixed;
+  image {
+    width: 100%;
+    height: 100%;
+  }
+  .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;
+  }
+}
+.no_bg_moveBtn {
+  box-shadow: none;
+  background-color: transparent;
+  border: none;
+  width: 130px;
+  height: 130px;
+}

src/components/moveBtn copy/index.tsx

@@ -0,0 +1,113 @@
+import { Button, Image, MovableArea, MovableView, View } from '@tarojs/components'
+import Taro, { useDidShow, useReady, useRouter } from '@tarojs/taro'
+import type { ReactElement } from 'react'
+import { 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'
+import { alert } from '@/common/common'
+import { formatImgUrl } from '@/common/fotmat'
+import Customer from '../customer'
+
+type ShowStatus = 'shop'|'customer'|'order'
+interface param {
+  children?: ReactElement | null
+  onClick?: () => void
+  showList?: ShowStatus[]
+  orderInfo?: any
+}
+const MoveBtn = ({ children = null, onClick, showList = [], orderInfo }: param) => {
+  const userInfo = useSelector(state => state.userInfo)
+  // 获取购物车数据数量
+  const { getShopCount, commonData } = useCommonData()
+
+  const [screenHeight, setScreenHeight] = useState<{ shop?: number; customer?: number; order?: number }>({
+    shop: 0,
+    customer: 0,
+    order: 0,
+  })
+  const [showMoveBtn, setShowMoveBtn] = useState(false)
+  const screenWidthRef = useRef(0)
+  useEffect(() => {
+    Taro.nextTick(() => {
+      const res = Taro.getSystemInfoSync()
+      if (res.screenHeight) {
+        const ratio = 750 / res.screenWidth
+        const num = res.screenHeight * ratio
+        setScreenHeight(() => ({ shop: num - 460, customer: num - 580, order: num - 700 }))
+        screenWidthRef.current = res.screenWidth / 2
+      }
+      setShowMoveBtn(true)
+    })
+  }, [])
+
+  useDidShow(() => {
+    getShopCount()
+  })
+
+  const onShow = (val: ShowStatus) => {
+    if (showList.length <= 0) { return true }
+    return showList.includes(val)
+  }
+
+  const onPhone = () => {
+    if (!userInfo?.adminUserInfo?.sale_user_phone) { return alert.error('手机号不能为空') }
+    Taro.makePhoneCall({
+      phoneNumber: userInfo?.adminUserInfo?.sale_user_phone,
+    })
+  }
+
+  const [customer_service_show, set_customer_service_show] = useState(false)
+  const customerClose = () => {
+    set_customer_service_show(false)
+  }
+
+  return (
+    <MovableArea className={styles.movableItem}>
+      {children}
+      {onShow('shop') && <MovableView
+        onClick={onClick}
+        className={styles.moveBtn}
+        direction="all"
+        inertia
+        x="630rpx"
+        y={`${screenHeight.shop}rpx`}
+      >
+        <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>}
+      {onShow('order') && <MovableView
+        className={styles.moveBtn}
+        direction="all"
+        inertia
+        x="630rpx"
+        y={`${screenHeight.order}rpx`}
+      >
+        <View className={classnames('iconfont', 'icon-kefu', styles.shop_icon)}>
+          <Button
+            className={styles.wxBtn}
+            openType="contact"
+            sendMessageTitle={orderInfo?.order_no}
+            showMessageCard
+            sendMessagePath={`/pages/order/index?id=${orderInfo?.id}`}
+          ></Button>
+        </View>
+      </MovableView>}
+      {onShow('customer') && <MovableView
+        className={classnames(styles.moveBtn, styles.no_bg_moveBtn)}
+        direction="all"
+        inertia
+        x="630rpx"
+        onClick={onPhone}
+        y={`${screenHeight.customer}rpx`}
+      >
+        <Image mode="aspectFit" src={formatImgUrl('/mall/float_button_customer_service.png')} />
+      </MovableView>}
+      <Customer show={customer_service_show} onClose={customerClose} />
+    </MovableArea>
+  )
+}
+
+export default MoveBtn

src/components/moveBtn/index.tsx

@@ -9,15 +9,18 @@ import useCommonData from '@/use/useCommonData'
 import { useSelector } from '@/reducers/hooks'
 import { alert } from '@/common/common'
 import { formatImgUrl } from '@/common/fotmat'
+import Customer from '../customer'
 
 type ShowStatus = 'shop'|'customer'|'order'
 interface param {
   children?: ReactElement | null
-  onClick?: () => void
+  onShopClick?: () => void
   showList?: ShowStatus[]
-  orderInfo?: any
+  messageTitle: string
+  messagePath: string
+  showCart: false|true
 }
-const MoveBtn = ({ children = null, onClick, showList = [], orderInfo }: param) => {
+const MoveBtn = ({ children = null, onShopClick, showList = [], messageTitle = '', messagePath = '', showCart }: param) => {
   const userInfo = useSelector(state => state.userInfo)
   // 获取购物车数据数量
   const { getShopCount, commonData } = useCommonData()
@@ -58,11 +61,16 @@ const MoveBtn = ({ children = null, onClick, showList = [], orderInfo }: param)
     })
   }
 
+  const [customer_service_show, set_customer_service_show] = useState(false)
+  const customerClose = () => {
+    set_customer_service_show(false)
+  }
+
   return (
     <MovableArea className={styles.movableItem}>
       {children}
       {onShow('shop') && <MovableView
-        onClick={onClick}
+        onClick={onShopClick}
         className={styles.moveBtn}
         direction="all"
         inertia
@@ -73,32 +81,16 @@ const MoveBtn = ({ children = null, onClick, showList = [], orderInfo }: param)
         {commonData.shopCount > 0 && <View className={styles.product_num}>{commonData.shopCount > 99 ? '99+' : commonData.shopCount}</View>}
       </MovableView>}
       {onShow('order') && <MovableView
+        onClick={() => set_customer_service_show(true) }
         className={styles.moveBtn}
         direction="all"
         inertia
         x="630rpx"
         y={`${screenHeight.order}rpx`}
-      >
-        <View className={classnames('iconfont', 'icon-kefu', styles.shop_icon)}>
-          <Button
-            className={styles.wxBtn}
-            openType="contact"
-            sendMessageTitle={orderInfo?.order_no}
-            showMessageCard
-            sendMessagePath={`/pages/order/index?id=${orderInfo?.id}`}
-          ></Button>
-        </View>
-      </MovableView>}
-      {onShow('customer') && <MovableView
-        className={classnames(styles.moveBtn, styles.no_bg_moveBtn)}
-        direction="all"
-        inertia
-        x="630rpx"
-        onClick={onPhone}
-        y={`${screenHeight.customer}rpx`}
       >
         <Image mode="aspectFit" src={formatImgUrl('/mall/float_button_customer_service.png')} />
       </MovableView>}
+      <Customer messageTitle={messageTitle} messagePath={messageTitle} show={customer_service_show} onClose={customerClose} />
     </MovableArea>
   )
 }