xuan/TestRestructureWechatLymarketDist
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

样品对比模块

Browse Source
This commit is contained in:
Haiyi 2022-06-28 10:31:14 +08:00
parent 376c87c3f6
commit 85c591d745
9 changed files with 353 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
project.config.json
View File

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

9
src/app.config.ts
View File

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

6
src/common/constant.js
View File

@ -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

90
src/pages/sampleComparison/compoents/bluetooth/LinkBlueTooth.tsx Normal file
View File

@ -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>
</>
);
})

73
src/pages/sampleComparison/compoents/bluetooth/Popup.tsx Normal file
View File

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

42
src/pages/sampleComparison/css/linkBlueTooth.module.scss Normal file
View File

@ -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;
}
}
}

90
src/pages/sampleComparison/css/popup.module.scss Normal file
View File

@ -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;
}
}
}

6
src/pages/sampleComparison/index.module.scss
View File

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

46
src/pages/sampleComparison/index.tsx
View File

@ -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}>
<View className={styles.clickFont}>点击取色</View>
</View>
<View className={styles.firstLeftName} >对比样品</View>
{
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>