样品对比模块

project.config.json

@@ -30,7 +30,8 @@
       "outputPath": ""
     },
     "disableUseStrict": false,
-    "useCompilerPlugins": false
+    "useCompilerPlugins": false,
+    "minifyWXML": true
   },
   "compileType": "miniprogram",
   "libVersion": "2.24.5",

src/app.config.ts

@@ -177,6 +177,13 @@ export default {
       pages: [
         "index",
       ]
-    }
+    },
+    {
+      root: "pages/sampleComparison",
+      pages: [
+        "index",
+      ]
+    },
+
   ]
 }

src/common/constant.js

@@ -1,16 +1,16 @@
-// export const BASE_URL = CURRENT_ENV.includes('development') ? `https://test.zzfzyc.com/lymarket` : `https://www.zzfzyc.com/lymarket`
+export const BASE_URL = CURRENT_ENV.includes('development') ? `https://test.zzfzyc.com/lymarket` : `https://www.zzfzyc.com/lymarket`
 // 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`
 // 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 = `http://192.168.1.30:40001/lymarket` // 发
+// export const BASE_URL = `http://192.168.1.9:40001/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.4:40001/lymarket` // 王霞
-export const BASE_URL = `http://192.168.1.7:50001/lymarket` // 添
+// export const BASE_URL = `http://192.168.1.7:50001/lymarket` // 添
 // export const BASE_URL = `http://192.168.1.15:50001/lymarket` // 杰
 
 // CDN

src/pages/sampleComparison/compoents/bluetooth/LinkBlueTooth.tsx

@@ -0,0 +1,90 @@
+import { View } from "@tarojs/components";
+import { memo, useEffect, useMemo, useState } from "react";
+import Taro from "@tarojs/taro";
+import { useBluetooth } from "@/use/contextBlueTooth"
+import SearchInput from "@/components/searchInput";
+import Popup from "./Popup"
+import classnames from "classnames";
+import styles from "../../css/linkBlueTooth.module.scss"
+
+export default memo(() => {
+    const { state, init, startScan, connect, disconnect } = useBluetooth()
+
+    useEffect(() => {
+        init()
+    }, [])
+
+    const [linkStatus, setLinkStatus] = useState(1)
+    useEffect(() => {
+        if (!state.available) {
+            setLinkStatus(1)
+        } else if (state.available && state.connected?.name) {
+            setLinkStatus(3)
+        } else {
+            setLinkStatus(2)
+        }
+        console.log('aaa:::', state.connected)
+    }, [state.available, state.connected])
+
+    const linkName = useMemo(() => {
+        return state.connected?.localName || ''
+    }, [state.connected])
+
+    //链接设备
+    const onLinkListen = (item) => {
+        if (!state.connected && !state.connecting)
+            connect(item)
+    }
+
+    const [popupShow, setPopupShow] = useState(false)
+    //显示设备列表
+    const onFindDevice = () => {
+        if (linkStatus == 1) {
+            Taro.showToast({
+                title: '请打开蓝牙',
+                icon: 'none'
+            })
+        } else {
+            setPopupShow(true)
+            onFindEven()
+        }
+
+    }
+    const onFindEven = () => {
+        if (!state.discovering && !state.connected && !state.connecting)
+            startScan()
+    }
+
+    //断开链接
+    const onDisconnect = () => {
+        disconnect()
+        setPopupShow(false)
+    }
+
+    return (
+        <>
+            <View className={styles.main}>
+                <SearchInput title="蓝牙设备" showIcon={true} showBorder={false}>
+                    <View className={styles.bluetooth_link} onClick={onFindDevice}>
+                        <View className={classnames(styles.link_status, linkStatus == 3 && styles.link_statused, linkStatus == 2 && styles.link_statused_no)}></View>
+                        {
+                            linkStatus == 1 && <View className={classnames(styles.link_name, styles.link_name_no)}>请开启蓝牙</View> ||
+                            linkStatus == 2 && <View className={classnames(styles.link_name, styles.link_name_no_link)}>未连接设备</View> ||
+                            linkStatus == 3 && <View className={classnames(styles.link_name)}>{linkName}</View>
+                        }
+                    </View>
+                </SearchInput>
+                <Popup
+                    state={state}
+                    show={popupShow}
+                    onClose={() => setPopupShow(false)}
+                    onLink={item => onLinkListen(item)}
+                    onOff={onDisconnect}
+                    onFind={onFindEven}
+                />
+            </View>
+        </>
+
+    );
+
+})

src/pages/sampleComparison/compoents/bluetooth/Popup.tsx

@@ -0,0 +1,73 @@
+import { ScrollView, View } from "@tarojs/components"
+import { memo, useEffect, useState } from "react"
+import Loading from "@/components/loading"
+import style from "../../css/popup.module.scss"
+
+interface params {
+    state: any,
+    show: Boolean,
+    onClose: (Boolean) => void,
+    onLink: (any) => void,
+    children?: React.ReactNode
+    onOff: () => void,
+    onFind: () => void,
+}
+
+export default memo(({state, show=false, onClose, onLink, onOff, onFind}:params) => {
+    const [popupShow, setPopupShow] = useState(show)
+    useEffect(() => {
+        setPopupShow(show)
+    }, [show])
+    const onCloseListener = () => {
+        onClose(false)
+    }
+    
+    return (
+        <>
+            {
+                popupShow&&<View className={style.popup}>
+                    <View className={style.content}>
+                        <View className={style.title}>搜索设备</View>
+                        <View className={style.list}>
+                            <ScrollView scrollY className={style.scroll}>
+                                {
+                                    (state.devices&&state.devices.length > 0)&&state?.devices.map(item => {
+                                        return (
+                                            <View className={style.item} onClick={() => onLink(item)}>
+                                                <View>{item.name}</View>
+                                                {
+                                                    (!state.connecting&&!state.connected)&&<View >链接</View>||
+                                                    (state.connecting&&item.deviceId == state.connecting.deviceId)&&<View className={style.link_ing}>正在链接...</View>||
+                                                    (state.connected&&item.deviceId == state.connected.deviceId)&&<View className={style.link_success}>链接成功</View>
+                                                }
+                                            </View>
+                                        )
+                                    })||
+                                    <View className={style.noDevice}>
+                                        {
+                                            (!state.discovering)&& <>
+                                                <View>暂无设备,请按以下条件检查</View>
+                                                <View className={style.n_item}>1.请确保取色仪处于激活状态</View>
+                                                <View className={style.n_item}>2.请确保取色仪没有链接其他设备</View>
+                                                <View className={style.n_item}>3.请打开手机定位</View>
+                                            </>||
+                                            <View>设备搜索中</View>
+                                        }
+                                        
+                                    </View>
+                                    
+                                }
+                            </ScrollView>
+                        </View>
+                        {
+                            state.connected&&<View className={`${style.footer} ${style.footer_off}`} onClick={onOff}>断开链接</View>||
+                            (!state.connected&&state.discovering)&&<View className={`${style.footer} ${style.finding}`}>搜索中<Loading width={30} color='orange'/></View>||
+                            <View className={style.footer} onClick={onFind}>重新搜索</View>
+                        }
+                    </View>
+                    <View className={style.mask} onClick={onCloseListener}></View>
+                </View>
+            }
+        </>
+    )
+})

src/pages/sampleComparison/css/linkBlueTooth.module.scss

@@ -0,0 +1,42 @@
+.main {
+    width: 690px;
+    height: 86px;
+    background: #ffffff;
+    border-radius: 10px;
+    margin-top: 24px;
+    margin-left: 30px;
+
+    .bluetooth_link {
+        display: flex;
+        align-items: center;
+
+        .link_status {
+            width: 12px;
+            height: 12px;
+            background: #f02409;
+            border-radius: 50%;
+        }
+
+        .link_statused {
+            background: #07C160;
+        }
+
+        .link_statused_no {
+            background: #f0ec09;
+        }
+
+        .link_name {
+            font-size: $font_size;
+            margin-left: 20px;
+
+        }
+
+        .link_name_no {
+            color: #f02409;
+        }
+
+        .link_name_no_link {
+            color: #f0ec09;
+        }
+    }
+}

src/pages/sampleComparison/css/popup.module.scss

@@ -0,0 +1,90 @@
+.popup{
+    width: 100vw;
+    height: 100vh;
+    position: absolute;
+    top: 0;
+    left: 0;
+    .mask{
+        width: 100%;
+        height: 100%;
+        background-color: rgba(0,0,0,0.5);
+        position: fixed;
+        top:0;
+        left:0;
+        z-index: 9;
+    }
+    .content{
+        z-index: 99;
+        background-color: #fff;
+        width: 75vw;
+        height: 600px;
+        position: fixed;
+        top: 50%;
+        left: 50%;
+        border-radius: 20px;
+        transform: translateX(-50%) translateY(-50%);
+        display: flex;
+        flex-direction: column;
+        font-size: 28px;
+        .title{
+            text-align: center;
+            margin: 20px;
+        }
+        .list{
+            height: 480px;
+            padding: 0 20px;
+            .scroll{
+               height: 100%; 
+            }
+            .item{
+                margin-bottom: 20px;
+                display: flex;
+                justify-content: space-between;
+                border-bottom: 1px dashed #ccc;
+                padding: 15px 0;
+                color: #3b3b3b;
+                @mixin link{
+                    font-size: 25px;
+                }
+                .link_success{
+                    @include link;
+                    color: green;
+                }
+                .link_ing {
+                    color: orange;
+                }
+            }
+            .noDevice{
+                height: 100%;
+                display: flex;
+                flex-direction: column;
+                justify-content: center;
+                align-items: center;
+                color: #a8a8a8;
+                .n_item{
+                    width: 100%;
+                    text-align: left;
+                    margin-top: 20px;
+                    padding: 0 30px;
+                    box-sizing: border-box;
+                }
+            }
+            
+        }
+        .footer{
+            text-align: center;
+            padding: 20px 0;
+            background-color: #f1f1f1;
+            border-radius: 0 0 10px 10px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+        .finding{
+            color: orange;
+        }
+        .footer_off{
+            color: red;
+        }
+    }
+}

src/pages/sampleComparison/index.module.scss

@@ -95,6 +95,12 @@ page {
                     font-weight: 400;
                     color: #707070;
                 }
+
+            }
+
+            .color_bock {
+                width: 290px;
+                height: 290px;
             }
 
             .nameColor {

src/pages/sampleComparison/index.tsx

@@ -1,10 +1,26 @@
 
 import { Image, Text, Textarea, View } from "@tarojs/components"
 import Taro, { useDidShow, usePullDownRefresh, useRouter } from "@tarojs/taro";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useBluetooth } from "@/use/contextBlueTooth"
 import classnames from "classnames";
+import LinkBlueTooth from "./compoents/bluetooth/LinkBlueTooth";
+import { toRgb } from '@/common/bluetooth/color/colorSpace'
 import styles from './index.module.scss'
+
 export default () => {
+    //搜索参数
+    const [searchField, setSearchField] = useState({
+        l: '',
+        a: '',
+        b: '',
+        page: 1,
+        size: 10,
+        width: '',
+        weight_density: '',
+        product_kind_id: '',
+        component: ''
+    })
     const { state: colorState, measureAndGetLab } = useBluetooth()
     const getLab = () => {
         if (colorState.connected) {
@@ -16,9 +32,18 @@ export default () => {
             })
         }
     }
+    //监听lab数据变化
+    const [blueToothColor, setBlueToothColor] = useState('')
+    useEffect(() => {
+        if (colorState.deviceLab) {
+            const rgb = toRgb([colorState.deviceLab.L, colorState.deviceLab.a, colorState.deviceLab.b])
+            setBlueToothColor(`rgb(${rgb[0]}, ${rgb[1]}, ${rgb[2]})`)
+            setSearchField({ ...searchField, l: rgb[0], a: rgb[1], b: rgb[2], size: 10 })
+        }
+    }, [colorState.deviceLab])
     return (
         <View className={styles.body}>
-            <View className={styles.topBox}>
+            {/* <View className={styles.topBox}>
                 <View className={styles.leftBox}>
                     <View className={styles.leftFont}>蓝牙设备</View>
                     <View className={styles.borderBox}></View>
@@ -26,19 +51,26 @@ export default () => {
                     <View className={styles.notNet}></View>
                 </View>
                 <Text className={classnames("iconfont icon-a-moreback", styles.iconMore)}></Text>
-            </View>
+            </View> */}
+            <LinkBlueTooth />
             <View className={styles.contBox} >
                 <View className={styles.firstBox} style="margin-right:27px">
                     <View className={styles.firstLeftName} >对比样品</View>
-                    <View className={styles.firstLeftbox}>
+                    {
+                        blueToothColor === '' &&
+                        <View className={styles.firstLeftbox} onClick={() => getLab()}>
                             <View className={styles.clickFont} >点击取色</View>
                         </View>
+                    }
+                    {blueToothColor && <View className={classnames(styles.color_bock)} style={{ background: blueToothColor }}></View>
+
+                    }
                     <View className={styles.nameColor}>--</View>
                 </View>
                 <View className={styles.firstBox}>
                     <View className={styles.firstLeftName}>对比样品</View>
                     <View className={styles.firstLeftbox}>
-                        <View className={styles.clickFont}>点击取色</View>
+                        <View className={styles.clickFont} onClick={() => getLab()}>点击取色</View>
                     </View>
                     <View className={styles.nameColor}>--</View>
                 </View>