flossom-miniapp/src/pages/instrument_detail/index.tsx

import Taro from "@tarojs/taro";
import classnames from "classnames";

import dayjs from "dayjs";

import { Component, PropsWithChildren, useEffect, useState } from "react";
import { Block, View, Text, Image, Input, Button } from "@tarojs/components";
import Navbar from "../../components/navbar/navbar";

import "./index.less";
import { getStorageSync } from "@/utils/traoAPI";

import { InstrumentInfo } from "@/utils/Interface";

export default class InstrumentDetail extends Component<any, any> {
  constructor(props) {
    super(props);
    this.state = {
      name: "InstrumentDetail",
      info: {},
    };
  }

  async onLoad() {
    this.initData();
  }
  componentDidMount() {}

  componentWillUnmount() {}

  componentDidShow() {}

  componentDidHide() {}

  async initData() {
    let objStr = getStorageSync("instrument_detail");
    if (objStr) {
      let info = JSON.parse(objStr);
      this.bindingInstrumentInfo(info.id);
    }
  }

  bindingInstrumentInfo = async (id: string | number = "") => {
    let res = await InstrumentInfo.bindingInstrumentInfo({
      instrumentId: id,
    });
    if (res.data.code === 200) {
      let info = res.data.data;
      info.bindingDateTime = dayjs(info.bindingDateTime).format(
        "YYYY-MM-DD hh:mm:ss"
      );
      this.setState({ info: info });
    }
  };

  render() {
    let { info } = this.state;
    return (
      <Block>
        <Navbar titleSlot="设备信息" background="#fff" isBack={true} />
        <Block>
          <View className="list">
            <View className="instrument_img">
              <Image src={info.instrumentBanner} />
              <View className="bind_status">已绑定</View>
              <View className="titile">{info.instrumentName}</View>
              {/* {info.iot == 2 && (
                <View className="iot_versions">
                  当前软件版本号：{info.iot_versions}
                </View>
              )} */}
            </View>
          </View>
        </Block>

        <View className="infobox1">
          <View className="box">
            <View className="tip2">序列号</View>
            <View className="inputbox">
              <Input
                type="text"
                disabled={true}
                placeholder-style="color:#000000;font-size:28rpx;font-weight: 500;"
                placeholder={info.bindingSerial}
              />
            </View>
          </View>

          <View className="box">
            <View className="tip2">序列号照片</View>
            <Image
              className="serial_img"
              src={info.bindingSerialImage}
              mode="aspectFill"
            />
          </View>

          <View className="box">
            <View className="tip2">绑定时间</View>
            <View className="inputbox">
              <Input
                type="text"
                disabled={true}
                placeholder-style="color:#000000;font-size:28rpx;font-weight: 500;"
                placeholder={info.bindingDateTime}
              />
            </View>
          </View>

          <View className="box">
            <View className="tip2">保修时间</View>
            <View className="inputbox">
              <Input
                type="text"
                disabled={true}
                placeholder-style="color:#000000;font-size:28rpx;font-weight: 500;"
                placeholder={info.instrumentGuarantee + "年"}
              />
            </View>
          </View>

          {info.id == 74 ||
            (info.id == 73 && (
              <View className="box">
                <View className="tip2">软件完整版本号</View>
                <View className="inputbox">
                  <Input
                    type="text"
                    disabled={true}
                    placeholder-style="color:#000000;font-size:28rpx;font-weight: 500;"
                    placeholder="花至FLOSSOM.V01.00.00.230316"
                  />
                </View>
              </View>
            ))}
        </View>
      </Block>
    );
  }
}