|
|
import classnames from "classnames";
|
|
|
import { Component, PropsWithChildren, useEffect, useState } from "react";
|
|
|
|
|
|
// import { InstrumentInfo } from "../../utils/Interface";
|
|
|
|
|
|
import Taro from "@tarojs/taro";
|
|
|
// 引入 Swiper, SwiperItem 组件
|
|
|
import {
|
|
|
Block,
|
|
|
View,
|
|
|
Text,
|
|
|
Image,
|
|
|
Input,
|
|
|
// Button,
|
|
|
Video,
|
|
|
ScrollView,
|
|
|
Canvas,
|
|
|
} from "@tarojs/components";
|
|
|
|
|
|
import { InstrumentInfo } from "../../utils/Interface";
|
|
|
import { go, back, loading, msg, showModal } from "../../utils/traoAPI";
|
|
|
import { isVideo } from "../../utils/util";
|
|
|
import utilHtml from "../../utils/utilhtml";
|
|
|
|
|
|
import { getImgInfo, contraction } from "../../utils/compressImage";
|
|
|
|
|
|
/* 自定义组件 */
|
|
|
import Navbar from "../../components/navbar/navbar";
|
|
|
import PopupAlert from "../../components/popup/popup-alert";
|
|
|
/* 组件 */
|
|
|
|
|
|
import "./instrument.less";
|
|
|
|
|
|
export default class Instrument extends Component<any, any> {
|
|
|
constructor(props) {
|
|
|
super(props);
|
|
|
this.state = {
|
|
|
name: "instrument",
|
|
|
isBindingError: false,
|
|
|
isBindingCheckError: false,
|
|
|
style: "font-size: 28rpx; color: #ccc;",
|
|
|
succeedShow: false,
|
|
|
tipShow: false,
|
|
|
loading: true,
|
|
|
channelList: [],
|
|
|
channelInfo: {
|
|
|
id: "",
|
|
|
image: "",
|
|
|
serial: "",
|
|
|
bind_intro_Video: "",
|
|
|
},
|
|
|
equipmentList: [
|
|
|
{
|
|
|
id: 1,
|
|
|
banner: "",
|
|
|
titile: "测试",
|
|
|
},
|
|
|
],
|
|
|
isVideo: false,
|
|
|
inputType: 1, //1.手写 2.扫码绑定
|
|
|
bindCode: "",
|
|
|
bindCodeInfo: null,
|
|
|
bindPopup: "",
|
|
|
userinfo: null,
|
|
|
showLoginPopup: "",
|
|
|
fromUrl: "",
|
|
|
};
|
|
|
}
|
|
|
|
|
|
async onLoad() {
|
|
|
this.unbindingInstrumentInfoList();
|
|
|
}
|
|
|
componentDidMount() {}
|
|
|
|
|
|
componentWillUnmount() {}
|
|
|
|
|
|
componentDidShow() {}
|
|
|
|
|
|
componentDidHide() {}
|
|
|
|
|
|
async initData() {}
|
|
|
|
|
|
onSerial = (event) => {
|
|
|
const { value } = event.detail;
|
|
|
let { channelInfo } = this.state;
|
|
|
channelInfo.serial = value;
|
|
|
|
|
|
this.setState({ channelInfo });
|
|
|
};
|
|
|
|
|
|
onScanCode() {
|
|
|
Taro.scanCode({
|
|
|
scanType: ["qrCode"],
|
|
|
success: (res) => {
|
|
|
let { channelInfo } = this.state;
|
|
|
channelInfo.serial = res.result;
|
|
|
|
|
|
this.setState({ channelInfo });
|
|
|
},
|
|
|
});
|
|
|
}
|
|
|
|
|
|
onTipShow = () => {
|
|
|
this.setState({ tipShow: true });
|
|
|
};
|
|
|
|
|
|
onTabTap = (type) => {
|
|
|
this.setState({
|
|
|
inputType: type,
|
|
|
});
|
|
|
};
|
|
|
|
|
|
onScanTap = () => {
|
|
|
/*
|
|
|
// 本地测试
|
|
|
const result = decodeURIComponent('https%3A%2F%2Fi.flossom.com%2Fa%3Ffr200test12');
|
|
|
const bindCode = result.split('?')[1];
|
|
|
that.setData({
|
|
|
bindCode
|
|
|
})
|
|
|
that.getBindCodeInfo();
|
|
|
return*/
|
|
|
Taro.scanCode({
|
|
|
scanType: ["barCode", "qrCode"],
|
|
|
success: (res) => {
|
|
|
const result = decodeURIComponent(res.result);
|
|
|
if (result.indexOf("?") > -1) {
|
|
|
const bindCode = result.split("?")[1];
|
|
|
console.log("bindCode", bindCode);
|
|
|
this.setState({
|
|
|
bindCode,
|
|
|
});
|
|
|
}
|
|
|
|
|
|
this.bindingInstrument();
|
|
|
// this.getBindCodeInfo();
|
|
|
},
|
|
|
fail(err) {},
|
|
|
complete(res) {},
|
|
|
});
|
|
|
};
|
|
|
|
|
|
// getBindCodeInfo = async () => {
|
|
|
// const { bindCode, instrumentList, channelInfo } = this.state;
|
|
|
// // // 1.查询资料
|
|
|
// // try {
|
|
|
// // const { data } = await InstrumentCodeCheck({
|
|
|
// // code: bindCode,
|
|
|
// // });
|
|
|
// // const bindCodeInfo = { ...data.data.bindCodeInfo };
|
|
|
// // // 2.判断是否是选中的仪器, 如果不是, 直接弹出scanErrorPopup
|
|
|
// // if (channelInfo.id != bindCodeInfo.instrument_id) {
|
|
|
// // this.setState({
|
|
|
// // bindPopup: "scanErrorPopup",
|
|
|
// // });
|
|
|
// // return;
|
|
|
// // }
|
|
|
// // const match = instrumentList.find((item) => {
|
|
|
// // if (item.id == bindCodeInfo.instrument_id && item.serial) {
|
|
|
// // // 找到同一个仪器
|
|
|
// // bindCodeInfo.hadBindSame = true;
|
|
|
// // if (item.serial == bindCodeInfo.antifakeCode) {
|
|
|
// // // 找到同一个序列号
|
|
|
// // bindCodeInfo.hadBindSameCode = true;
|
|
|
// // } else {
|
|
|
// // bindCodeInfo.hadBindSameCode = false;
|
|
|
// // }
|
|
|
// // return item;
|
|
|
// // }
|
|
|
// // if (item.id == bindCodeInfo.instrument_id) {
|
|
|
// // const { channelInfo } = this.state;
|
|
|
// // if (channelInfo.id === item.id) return;
|
|
|
// // this.setState({
|
|
|
// // channelInfo: item,
|
|
|
// // isVideo: isVideo(item.bind_intro_video),
|
|
|
// // });
|
|
|
// // }
|
|
|
// // });
|
|
|
// // if (match) {
|
|
|
// // bindCodeInfo.hadBind = true;
|
|
|
// // } else {
|
|
|
// // bindCodeInfo.hadBindSame = false;
|
|
|
// // }
|
|
|
// // this.setState({
|
|
|
// // bindCodeInfo,
|
|
|
// // });
|
|
|
// // this.judgeBindCode();
|
|
|
// // } catch (e) {
|
|
|
// // this.judgeBindCode();
|
|
|
// // }
|
|
|
// };
|
|
|
|
|
|
// judgeBindCode = () => {
|
|
|
// const { bindCode, bindCodeInfo } = this.state;
|
|
|
// const opts: any = {};
|
|
|
// if (bindCode && !bindCodeInfo) {
|
|
|
// // 有仪器码, 但是没有找到信息时
|
|
|
// opts.bindPopup = "noFoundPopup";
|
|
|
// } else if (bindCode && bindCodeInfo && bindCodeInfo.isLabelCode) {
|
|
|
// opts.bindPopup = "labelPopup";
|
|
|
// } else if (
|
|
|
// bindCode &&
|
|
|
// bindCodeInfo.hadBindSame &&
|
|
|
// bindCodeInfo.hadBindSameCode
|
|
|
// ) {
|
|
|
// // 有仪器码, 如果有登录, 判断是绑定了同样的仪器和仪器的序列号是一致 -- 不弹弹窗, 回到首页
|
|
|
// opts.bindCode = ""; // 重置bindCode
|
|
|
// opts.bindPopup = ""; // 隐藏bindPopup
|
|
|
// } else if (
|
|
|
// bindCode &&
|
|
|
// bindCodeInfo.hadBindSame &&
|
|
|
// !bindCodeInfo.hadBindSameCode
|
|
|
// ) {
|
|
|
// // 有仪器码, 如果有登录, 判断是绑定了同样的仪器, 但仪器的序列号不一致 -- 判断换绑
|
|
|
// opts.bindPopup = "switchBindCodePopup";
|
|
|
// } else if (bindCode && !bindCodeInfo.hadBindSame) {
|
|
|
// // 有仪器码, 如果有登录, 判断不是绑定了同样的仪器 -- 绑定
|
|
|
// opts.bindPopup = "toBindPopup";
|
|
|
// }
|
|
|
// if (Object.keys(opts).length) {
|
|
|
// this.setState(opts);
|
|
|
// }
|
|
|
// };
|
|
|
|
|
|
onCustomerTap = () => {
|
|
|
this.onCancelBind2Tap();
|
|
|
go("/pages/consultant/consultant");
|
|
|
};
|
|
|
|
|
|
onCancelBind2Tap = () => {
|
|
|
this.setState({
|
|
|
bindPopup: "",
|
|
|
bindCode: "",
|
|
|
});
|
|
|
};
|
|
|
|
|
|
onChangeImg = async () => {
|
|
|
Taro.chooseMedia({
|
|
|
count: 1,
|
|
|
mediaType: ["image"],
|
|
|
success: async (res) => {
|
|
|
const tempFilePath = res.tempFiles[0].tempFilePath;
|
|
|
let img = await getImgInfo(tempFilePath);
|
|
|
let compressImage = await contraction(img, "compressImage");
|
|
|
// 压缩后文件地址
|
|
|
let compressTempFilePath = compressImage.tempFilePath;
|
|
|
let { channelInfo } = this.state;
|
|
|
channelInfo.image = compressTempFilePath;
|
|
|
this.setState({ channelInfo });
|
|
|
},
|
|
|
});
|
|
|
};
|
|
|
|
|
|
onSubmit = () => {
|
|
|
const that = this;
|
|
|
const { serial, image, buy_id, id } = this.state.channelInfo;
|
|
|
if (!serial?.trim()) return msg("请输入设备序列号");
|
|
|
if (!image) return msg("请上传序列号照片");
|
|
|
// if (!buy_id) return msg('请选择购买渠道');
|
|
|
// loading("绑定中");
|
|
|
// InstrumentBindingAdd({ serial, image, buy_id, instrument_id: id })
|
|
|
// .then((res) => {
|
|
|
// this.setState({ succeedShow: true });
|
|
|
// })
|
|
|
// .catch((err) => {
|
|
|
// if (err.data.code != 400) {
|
|
|
// that.setState({
|
|
|
// errorMsg: err.data.msg,
|
|
|
// bindPopup: "errorMsg",
|
|
|
// });
|
|
|
// }
|
|
|
// });
|
|
|
};
|
|
|
|
|
|
onSelectChange(item) {
|
|
|
const { channelInfo } = this.state;
|
|
|
if (channelInfo.id === item.id) return;
|
|
|
this.setState({
|
|
|
channelInfo: item,
|
|
|
isVideo: isVideo(item.bind_intro_video),
|
|
|
});
|
|
|
}
|
|
|
|
|
|
public back = () => {
|
|
|
back();
|
|
|
};
|
|
|
|
|
|
closeDev = () => {
|
|
|
// go("/pages/user/user");
|
|
|
let isInstrumentJump = Taro.getStorageSync("isInstrumentJump");
|
|
|
if (isInstrumentJump === "true") {
|
|
|
Taro.reLaunch({
|
|
|
url: "/pages/user/user",
|
|
|
});
|
|
|
}
|
|
|
};
|
|
|
|
|
|
// 未绑定列表
|
|
|
unbindingInstrumentInfoList = async () => {
|
|
|
let { data } = await InstrumentInfo.unbindingInstrumentInfoList();
|
|
|
if (data.code === 200) {
|
|
|
console.log("data", data);
|
|
|
if (data.data.length) {
|
|
|
this.setState({ equipmentList: data.data, channelInfo: data.data[0] });
|
|
|
}
|
|
|
}
|
|
|
};
|
|
|
|
|
|
// 绑定仪器
|
|
|
bindingInstrument = async () => {
|
|
|
Taro.showLoading({
|
|
|
title: "请求中...",
|
|
|
mask: true,
|
|
|
});
|
|
|
let { instrumentInfo } = this.state;
|
|
|
let { data } = await InstrumentInfo.binding({
|
|
|
serial: instrumentInfo.serial,
|
|
|
});
|
|
|
console.log("bindingInstrument", data);
|
|
|
Taro.hideLoading();
|
|
|
if (data.code === 200) {
|
|
|
// this.setState({ isVisibleBinding: false });
|
|
|
msg("绑定成功");
|
|
|
} else {
|
|
|
this.setState({ isBindingError: true });
|
|
|
}
|
|
|
};
|
|
|
onBindErrorClose = () => {
|
|
|
this.setState({ isBindingError: false });
|
|
|
};
|
|
|
onBindErrorConfirm = () => {
|
|
|
this.onBindErrorClose();
|
|
|
go("/pages/consultant/consultant");
|
|
|
};
|
|
|
|
|
|
onBindCheckErrorClose = () => {
|
|
|
this.setState({ isBindingCheckError: false });
|
|
|
};
|
|
|
|
|
|
render() {
|
|
|
let {
|
|
|
isBindingError,
|
|
|
isBindingCheckError,
|
|
|
isVideo,
|
|
|
channelInfo,
|
|
|
inputType,
|
|
|
style,
|
|
|
equipmentList,
|
|
|
} = this.state;
|
|
|
return (
|
|
|
<Block>
|
|
|
<PopupAlert
|
|
|
isShow={true}
|
|
|
isClose={true}
|
|
|
title="提示"
|
|
|
content="页面正在开发中"
|
|
|
confirmButtonText="确定"
|
|
|
textAlgin="center"
|
|
|
close={this.closeDev}
|
|
|
confirm={this.closeDev}
|
|
|
/>
|
|
|
<Navbar titleSlot="仪器绑定" isBack={true} />
|
|
|
<PopupAlert
|
|
|
isShow={isBindingError}
|
|
|
title="提示"
|
|
|
content="序列号库仍在更新，请联系微信助手"
|
|
|
confirmButtonText="知道了"
|
|
|
textAlgin="center"
|
|
|
isClose={false}
|
|
|
close={this.onBindErrorClose}
|
|
|
confirm={this.onBindErrorClose}
|
|
|
></PopupAlert>
|
|
|
<PopupAlert
|
|
|
isShow={isBindingCheckError}
|
|
|
title="提示"
|
|
|
content="您选择的仪器有误，请重新选择确认"
|
|
|
confirmButtonText="知道了"
|
|
|
textAlgin="center"
|
|
|
isClose={false}
|
|
|
close={this.onBindCheckErrorClose}
|
|
|
confirm={this.onBindCheckErrorClose}
|
|
|
></PopupAlert>
|
|
|
<Canvas
|
|
|
style="height: 0"
|
|
|
id="compressImage"
|
|
|
canvasId="compressImage"
|
|
|
type="2d"
|
|
|
></Canvas>
|
|
|
|
|
|
<View></View>
|
|
|
<View className="main">
|
|
|
<View className="top">
|
|
|
<View className="top_title">仪器绑定</View>
|
|
|
<View className="top_tips">
|
|
|
请参考图片指引，扫描或输入产品序列号
|
|
|
</View>
|
|
|
<View className="top_tips">完成花至美容仪绑定</View>
|
|
|
</View>
|
|
|
<View className="banner_list">
|
|
|
{isVideo && channelInfo.bind_intro_Video ? (
|
|
|
<Video
|
|
|
className="banner_item"
|
|
|
autoplay
|
|
|
objectFit="cover"
|
|
|
enablePlayGesture
|
|
|
showFullscreenBtn={false}
|
|
|
playBtnPosition="center"
|
|
|
src={utilHtml.getHttpsUrl(channelInfo.bind_intro_Video)}
|
|
|
/>
|
|
|
) : (
|
|
|
<Image
|
|
|
className="banner_item"
|
|
|
src={utilHtml.getHttpsUrl(channelInfo.bind_intro_Video)}
|
|
|
mode="aspectFill"
|
|
|
></Image>
|
|
|
)}
|
|
|
</View>
|
|
|
<View className="form">
|
|
|
<View className="form_item is-instrument">
|
|
|
<View className="label_box">
|
|
|
<View
|
|
|
className="label"
|
|
|
style="font-size: 32rpx; margin: 0 0 0rpx 2rpx"
|
|
|
>
|
|
|
需要绑定的仪器
|
|
|
</View>
|
|
|
</View>
|
|
|
|
|
|
<ScrollView
|
|
|
scrollX={true}
|
|
|
className="instrument_list"
|
|
|
style="width: 100%; white-space: nowrap;"
|
|
|
scrollIntoView={"scroll" + channelInfo.id}
|
|
|
>
|
|
|
{equipmentList.map((item, index) => {
|
|
|
return (
|
|
|
<View
|
|
|
className={classnames("cover", {
|
|
|
active_cover: channelInfo.id === item.id,
|
|
|
})}
|
|
|
id={"scroll" + item.id}
|
|
|
key={index}
|
|
|
onClick={this.onSelectChange.bind(this, item)}
|
|
|
>
|
|
|
<Image
|
|
|
className="instrument_img"
|
|
|
src={utilHtml.getHttpsUrl(item.banner)}
|
|
|
mode="aspectFill"
|
|
|
// mode="aspectFit"
|
|
|
></Image>
|
|
|
<View className="desc">{item.name}</View>
|
|
|
</View>
|
|
|
);
|
|
|
})}
|
|
|
</ScrollView>
|
|
|
</View>
|
|
|
<View className="form_item is-tab">
|
|
|
<View className="tab_list">
|
|
|
<View
|
|
|
className={classnames("tab_item", {
|
|
|
"is-active": inputType === 1,
|
|
|
})}
|
|
|
onClick={this.onTabTap.bind(this, 1)}
|
|
|
>
|
|
|
<Text>手写输入绑定</Text>
|
|
|
<View className="tab_active_line"></View>
|
|
|
</View>
|
|
|
<View
|
|
|
className={classnames("tab_item", {
|
|
|
"is-active": inputType === 2,
|
|
|
})}
|
|
|
onClick={this.onTabTap.bind(this, 2)}
|
|
|
>
|
|
|
<Text>扫码绑定</Text>
|
|
|
<View className="tab_active_line"></View>
|
|
|
</View>
|
|
|
</View>
|
|
|
</View>
|
|
|
|
|
|
{inputType == 1 && (
|
|
|
<Block>
|
|
|
<View className="inputCode_box">
|
|
|
<View className="form_item is-inputCode">
|
|
|
<View className="label_box">
|
|
|
<View className="label">填写序列号</View>
|
|
|
<View className="label_text" onClick={this.onTipShow}>
|
|
|
<Text className="label-tips">查看序列号位置</Text>
|
|
|
<Image
|
|
|
className="right_icon"
|
|
|
src={require("../../img/index-right.png")}
|
|
|
mode="aspectFill"
|
|
|
/>
|
|
|
</View>
|
|
|
</View>
|
|
|
<View className="ipt_box">
|
|
|
<Input
|
|
|
maxlength={50}
|
|
|
className="ipt"
|
|
|
placeholder="例如：FR10*********1"
|
|
|
placeholder-style={style}
|
|
|
onInput={this.onSerial}
|
|
|
value={channelInfo.serial}
|
|
|
></Input>
|
|
|
</View>
|
|
|
</View>
|
|
|
<View className="form_item">
|
|
|
<View className="label_box">
|
|
|
<View className="label">上传序列号照片</View>
|
|
|
</View>
|
|
|
<View className="photo_box" onClick={this.onChangeImg}>
|
|
|
{channelInfo.image && (
|
|
|
<Image
|
|
|
src={channelInfo.image}
|
|
|
mode="aspectFill"
|
|
|
></Image>
|
|
|
)}
|
|
|
{!channelInfo.image && (
|
|
|
<Image
|
|
|
className="add"
|
|
|
src={require("../../img/welcome/add.png")}
|
|
|
mode="aspectFit"
|
|
|
></Image>
|
|
|
)}
|
|
|
</View>
|
|
|
</View>
|
|
|
</View>
|
|
|
</Block>
|
|
|
)}
|
|
|
</View>
|
|
|
</View>
|
|
|
<View className="footer">
|
|
|
{inputType == 1 && (
|
|
|
<View className="btn" onClick={this.onSubmit}>
|
|
|
确认绑定
|
|
|
</View>
|
|
|
)}
|
|
|
|
|
|
{inputType == 2 && (
|
|
|
<View className="btn footer-btn-scan" onClick={this.onScanTap}>
|
|
|
<Image
|
|
|
className="footer-btn-scan-img"
|
|
|
src={require("../../img/icon-scan.png")}
|
|
|
></Image>
|
|
|
扫码绑定
|
|
|
</View>
|
|
|
)}
|
|
|
</View>
|
|
|
</Block>
|
|
|
);
|
|
|
}
|
|
|
}
|