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) {
    let bindid = item.id;
    go("/pages/introduce/introduce?id=" + bindid);
  }
  goBind(item) {
    let bindid = item.id;
    go("/pages/instrument/instrument?id=" + bindid);
  }

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

  async lesgobuy(item) {
    console.log(item);
    // 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("暂无购买链接");
    // }
  }

  render() {
    let { bindList, unBindList, current } = this.state;
    return (
      <Block>
        <Navbar titleSlot="设备管理" background="#fff" isBack={true} />
        <View className="instrument_box">
          {bindList.length > 0 &&
            <Block>
              <View className="title">我的设备</View>
              <View className="scroll">
                <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}>
                            <Image
                              className="Image"
                              src={item.banner}
                              mode="aspectFill"
                            ></Image>
                            <View className="bind_status">已绑定</View>
                            <View className="intro">
                              <View className="tips" onClick={this.goIntro}>
                                仪器介绍
                              </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>
                {/* <ScrollView scroll-x="true" className="bind_list">
                  {bindList.map((item, index) => {
                    if (item.status === 0) {
                      return (
                        <View className="wrapper" key={"bind_" + index}>
                          <View className="cover" onClick={this.goIntro}>
                            <Image
                              className="Image"
                              src={item.banner}
                              mode="aspectFill"
                            ></Image>
                            <View className="bind_status">已绑定</View>
                            <View className="intro">
                              <View className="tips" onClick={this.goIntro}>
                                仪器介绍
                              </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>
                      );
                    }
                  })}
                </ScrollView> */}
              </View>
            </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"
                        onClick={this.lesgobuy.bind(this, item)}
                      >
                        <Image
                          className="image"
                          src={item.banner}
                          mode="aspectFill"
                        ></Image>
                        <View className="name">{item.name}</View>
                        <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>
        </View>
      </Block>
    );
  }
}