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

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

import { Component, PropsWithChildren, useEffect, useState } from "react";
import {
  Block,
  View,
  Text,
  Image,
  Input,
  Button,
  ScrollView,
  Swiper,
  SwiperItem,
} from "@tarojs/components";

import "./index.less";
import Navbar from "../../components/navbar/navbar";

import { InstrumentInfo } from "../../utils/Interface";
import { go, msg, setStorageSync } from "../../utils/traoAPI";

export default class InstrumentManage extends Component<any, any> {
  constructor(props) {
    super(props);
    this.state = {
      name: "InstrumentManage",
      userinfo: {},
      imgUrl: "",
      imgUrl2: "",
      list: [],
      bindList: [],
      unBindList: [],
      page: 1,
      isback: false,
      //全局参数
      appdata: {},
      tipshow: false,
      FR200LIST: [],
      devinfo: {},
      current: 0,
    };
  }

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

  componentWillUnmount() {}

  componentDidShow() {}

  componentDidHide() {}

  async initData() {
    this.bindingInstrumentList();
    this.unbindingInstrumentInfoList();
  }

  // 获取已绑定仪器列表
  bindingInstrumentList = async () => {
    Taro.showLoading({
      title: "请求中...",
      mask: true,
    });
    let { data: res } = await InstrumentInfo.bindingInstrumentList();
    Taro.hideLoading();
    if (res.code === 200) {
      this.setState({ bindList: res.data });
    } else {
      // 仪器列表失败todo
    }
  };
  // 获取未绑定仪器列表
  unbindingInstrumentInfoList = async () => {
    Taro.showLoading({
      title: "请求中...",
      mask: true,
    });
    let { data: res } = await InstrumentInfo.unbindingInstrumentInfoList();
    Taro.hideLoading();
    if (res.code === 200) {
      this.setState({ unBindList: res.data });
    } else {
      // 仪器列表失败todo
    }
  };

  goIntro = (item) => {
    console.log("item", item);
    setStorageSync("instrument_detail", item);

    let bindid = item.id;
    go("/pages/instrument/intro?id=" + bindid);
  };
  goBind = (item) => {
    let bindid = item.id;
    go("/pages/instrument/instrument?isOnly=true&id=" + bindid); // 只显示当前仪器内容
  };

  goBindInfo = (item) => {
    // let bindid = item.id;
    setStorageSync("instrument_detail", item);
    go("/pages/instrument_detail/index");
  };

  lesgobuy = (item) => {
    console.log(item);
    if (item.isPurchase === 1) {
      if (item.programs_json) {
        item.programs_json = JSON.parse(item.programs_json);
        // console.log(item.programs_json)
        Taro.navigateToMiniProgram({
          appId: item.programs_json.buylink,
          path: item.programs_json.buypath,
          envVersion: "release",
          success(res) {
            // 打开成功
          },
          fail() {},
        });
      } else {
        msg("暂无购买链接");
      }
    } else {
      msg("暂无购买链接");
    }
  };

  customBack = () => {
    Taro.switchTab({ url: "/pages/user/user" });
  };

  render() {
    let { bindList, unBindList, current } = this.state;
    return (
      <Block>
        <Navbar
          titleSlot="设备管理"
          background="#fff"
          isBack={true}
          isCustomBack
          customBack={this.customBack}
        />
        <View className="instrument_box">
          {bindList.length > 0 && (
            <Block>
              <View className="title">我的设备</View>
              <View className="scroll">
                {bindList.length > 0 && (
                  <Swiper
                    className="bind_list"
                    current={current}
                    duration={800}
                    indicatorDots={false}
                    indicatorColor="#999"
                    indicatorActiveColor="#333"
                    previousMargin="32rpx"
                    nextMargin="32rpx"
                  >
                    {bindList.map((item: any, index: number) => {
                      return (
                        <SwiperItem key={index}>
                          <View className="wrapper" key={"bind_" + index}>
                            <View
                              className="cover"
                              onClick={this.goIntro.bind(this, item)}
                            >
                              <Image
                                className="Image"
                                src={item.banner}
                                mode="aspectFill"
                              ></Image>
                              <View className="bind_status">已绑定</View>
                              <View className="intro">
                                <View
                                  className="tips"
                                  onClick={this.goIntro.bind(this, item)}
                                >
                                  仪器介绍
                                </View>
                                <View className="right">
                                  <Image
                                    src={require("../../img/index/right.png")}
                                    mode="widthFix"
                                    style="height: 20rpx;"
                                  />
                                </View>
                              </View>
                            </View>
                            <View className="bind_cont">
                              <View className="title">{item.name}</View>
                              <View
                                className="bindinfo"
                                onClick={this.goBindInfo.bind(this, item)}
                              >
                                查看绑定信息
                              </View>
                            </View>
                          </View>
                        </SwiperItem>
                      );
                    })}
                  </Swiper>
                )}
              </View>
            </Block>
          )}

          {/* 当且仅当未绑定仪器存在时显示 */}
          {unBindList.length > 0 && (
            <Block>
              <View className="title">未绑定的仪器</View>
              <View className="scroll">
                <ScrollView scroll-x="true" className="un_bind_list">
                  {unBindList.map((item, index) => {
                    if (item.status === 0) {
                      return (
                        <View className="wrapper" key={index}>
                          <View className="cover">
                            <Image
                              className="image"
                              src={item.banner}
                              mode="aspectFill"
                            ></Image>
                            <View className="name">{item.name}</View>

                            {item.isPurchase === 1 && (
                              <View
                                className="buy"
                                onClick={this.lesgobuy.bind(this, item)}
                              >
                                <View className="tips">立即购买</View>
                                <View className="right">
                                  <Image
                                    src={require("../../img/index/right.png")}
                                    mode="widthFix"
                                    style="height: 20rpx;"
                                  />
                                </View>
                              </View>
                            )}
                          </View>
                          <View className="bind_cont">
                            <View
                              className="tobind"
                              onClick={this.goBind.bind(this, item)}
                            >
                              前往绑定
                            </View>
                          </View>
                        </View>
                      );
                    }
                  })}
                </ScrollView>
              </View>
            </Block>
          )}
        </View>
      </Block>
    );
  }
}