✨ feat(ID1000800浮窗提示客户经理电话完成):

src/components/iconfont/iconfont.tsx

@@ -1,4 +1,3 @@
-<<<<<<< HEAD
 import React, { useState, useEffect, FC } from "react";
 import { Block, View } from "@tarojs/components";
 import "./iconfont.scss";
@@ -25,7 +24,7 @@ function hex2rgb(hex) {
   return "rgb(" + rgb.join(",") + ")";
 }
 
-export type IconNames = 'icon-rukou' | 'icon-renzhengchenggong' | 'icon-paixu' | 'icon-shaixuan' | 'icon-bodakehujingli' | 'icon-guanfangweixinkefu' | 'icon-tuijianbiaoqian' | 'icon-rukou' | 'icon-renzhengchenggong' | 'icon-wodekefu' | 'icon-yanseduibi' | 'icon-dizhiguanli' | 'icon-weixin' | 'icon-riqi' | 'icon-shuru' | 'icon-a-0tianzhangqi' | 'icon-huodaofukuan' | 'icon-huozhuziti' | 'icon-saomazhifu' | 'icon-xianxiahuikuan' | 'icon-yufukuan' | 'icon-xinzengshoucangjia' | 'icon-qingchusousuo' | 'icon-xuanzechenggong' | 'icon-gongnengtubiao-saomiao' | 'icon-bianjizidingyimadan' | 'icon-zidingyimadanyulan' | 'icon-yuanshimadanyulan' | 'icon-xiala' | 'icon-shangla' | 'icon-qingchuxinxi' | 'icon-sousuo' | 'icon-guanli' | 'icon-bianji' | 'icon-shoucangjia' | 'icon-shezhi' | 'icon-tishi' | 'icon-erweima' | 'icon-dianjishoucang' | 'icon-gouwuche' | 'icon-shoucangchenggong' | 'icon-fenxiangshangpin' | 'icon-kefu' | 'icon-xinzenganniu' | 'icon-jianshaoanniu' | 'icon-daifahuo2' | 'icon-daishouhuo2' | 'icon-tuikuan-shouhou' | 'icon-daipeibu2' | 'icon-daifukuan2';
+export type IconNames = 'icon-dianhua' | 'icon-rukou' | 'icon-renzhengchenggong' | 'icon-paixu' | 'icon-shaixuan' | 'icon-bodakehujingli' | 'icon-guanfangweixinkefu' | 'icon-tuijianbiaoqian' | 'icon-rukou' | 'icon-renzhengchenggong' | 'icon-wodekefu' | 'icon-yanseduibi' | 'icon-dizhiguanli' | 'icon-weixin' | 'icon-riqi' | 'icon-shuru' | 'icon-a-0tianzhangqi' | 'icon-huodaofukuan' | 'icon-huozhuziti' | 'icon-saomazhifu' | 'icon-xianxiahuikuan' | 'icon-yufukuan' | 'icon-xinzengshoucangjia' | 'icon-qingchusousuo' | 'icon-xuanzechenggong' | 'icon-gongnengtubiao-saomiao' | 'icon-bianjizidingyimadan' | 'icon-zidingyimadanyulan' | 'icon-yuanshimadanyulan' | 'icon-xiala' | 'icon-shangla' | 'icon-qingchuxinxi' | 'icon-sousuo' | 'icon-guanli' | 'icon-bianji' | 'icon-shoucangjia' | 'icon-shezhi' | 'icon-tishi' | 'icon-erweima' | 'icon-dianjishoucang' | 'icon-gouwuche' | 'icon-shoucangchenggong' | 'icon-fenxiangshangpin' | 'icon-kefu' | 'icon-xinzenganniu' | 'icon-jianshaoanniu' | 'icon-daifahuo2' | 'icon-daishouhuo2' | 'icon-tuikuan-shouhou' | 'icon-daipeibu2' | 'icon-daifukuan2';
 
 type PropsType = {
   name: IconNames;
@@ -83,7 +82,11 @@ const IconFont:FC<PropsType> = ({
           className={classnames(icon, customClassName)}
         />
       )} */}
-      {/* icon-paixu */}
+      {/* icon-dianhua */}
+
+      { name === 'icon-dianhua' && (<View style={{backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M880.384 820.768c31.552-54.72 14.08-96.736-41.792-138.784-65.664-49.44-129.856-82.688-176-29.44 0 0-48.992 58.112-193.152-77.856-167.584-159.232-97.28-215.68-97.28-215.68 58.336-58.432 21.28-101.984-27.616-168-48.896-65.952-98.272-86.848-169.184-30.08C38.72 270.272 231.36 527.04 328.8 626.88c0 0 148.096 152.672 241.28 203.52l49.888 27.776c71.52 36.576 151.84 53.312 208.384 19.36 0 0 27.264-13.984 52.032-56.8z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(51,127,255)'}' /%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle}} className={classnames("icon", customClassName)} />) }
+{/* icon-paixu */}
+>>>>>>> f0abc88 (✨ feat(ID1000800浮窗提示客户经理电话完成):)
 
       { name === 'icon-paixu' && (<View style={{backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M512 940l200-260H312zM512 84l200 260H312z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(0,0,0)'}' opacity='.5' /%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle}} className={classnames("icon", customClassName)} />) }
 {/* icon-shaixuan */}

src/components/moveBtn/index.module.scss

@@ -1,34 +1,54 @@
-.movableItem{
+.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;
 }
-.moveBtn{
-    width: 100px;
-    height: 100px;
-    border-radius: 50%;
-    border: 2px solid #cde5ff;
-    box-shadow: 0px 0px 20px 0px rgba(104,180,255,0.70);
-    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;
-    }
-}

src/components/moveBtn/index.tsx

@@ -1,4 +1,4 @@
-import { MovableArea, MovableView, View } from '@tarojs/components'
+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'
@@ -7,49 +7,96 @@ 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'
 
+type ShowStatus = 'shop'|'customer'|'order'
 interface param {
   children?: ReactElement | null
   onClick?: () => void
+  showList?: ShowStatus[]
+  orderInfo?: any
 }
-const MoveBtn = ({ children = null, onClick }: param) => {
+const MoveBtn = ({ children = null, onClick, showList = [], orderInfo }: param) => {
+  const userInfo = useSelector(state => state.userInfo)
   // 获取购物车数据数量
   const { getShopCount, commonData } = useCommonData()
 
-  const [screenHeight, setScreenHeight] = useState(0)
+  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)
-  useLayoutEffect(() => {
+  useEffect(() => {
     const res = Taro.getSystemInfoSync()
     if (res.screenHeight) {
       const ratio = 750 / res.screenWidth
-      setScreenHeight(res.screenHeight * ratio - 460)
+      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 dragEnd = (e) => {}
+  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,
+    })
+  }
 
   return (
     <MovableArea className={styles.movableItem}>
       {children}
-      <MovableView
+      {onShow('shop') && <MovableView
         onClick={onClick}
         className={styles.moveBtn}
         direction="all"
         inertia
         x="630rpx"
-        y={`${screenHeight}rpx`}
-        onTouchEnd={e => dragEnd(e)}
+        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>
+      </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>}
     </MovableArea>
   )
 }