gitlab-instance-0a899031_nomadcna/src/pages/meetup/Detail/index.jsx

import { Component } from "react";
import { View, Text, Image } from "@tarojs/components";
import "./index.scss";
import { AtTabBar } from "taro-ui";
import React, { useCallback, useEffect, useState } from "react";
import { AtGrid } from "taro-ui";
import { Swiper, SwiperItem } from "@tarojs/components";
import { AtCard } from "taro-ui";
import { AtImagePicker } from "taro-ui";
import Taro from "@tarojs/taro";
import { AtAvatar } from "taro-ui";
import { AtButton } from "taro-ui";
// import Taro from "@tarojs/taro";

import { AtList, AtListItem } from "taro-ui";

// export default class Index extends Component {
const Detail = () => {
  const [current, setcurrent] = useState(2);
  const [id, setid] = useState(null);
  const [openid, setopenid] = useState(null);
  const [joinMeetup, setjoinMeetup] = useState(false);

  useEffect(() => {
    let newparams = Taro.getCurrentInstance().router.params;
    let newId = newparams.id;
    if (newId) {
      setid(newId);
    }
    let newjoinMeetup=window.localStorage.getItem('joinMeetup')
    setjoinMeetup(newjoinMeetup)
  }, []);

  // const handleClick = (value) => {
  //   console.log("value", value);
  //   setcurrent(value);
  //   if (value == 2) {
  //     // 跳转到目的页面，在当前页面打开
  //     Taro.navigateTo({
  //       url: "/pages/my/index",
  //     });
  //   } else if (value == 0) {
  //     Taro.navigateTo({
  //       url: "/pages/index/index",
  //     });
  //   } else {
  //     Taro.navigateTo({
  //       url: "/pages/meetup/index",
  //     });
  //   }
  // };

  const onBridgeReady = () => {
    WeixinJSBridge.call("hideOptionMenu");
  };

  useEffect(() => {
    let $instance = Taro.getCurrentInstance();
    // console.log("11");
    console.log($instance.router.params);
    // if (typeof WeixinJSBridge == "undefined") {
    //   if (document.addEventListener) {
    //     document.addEventListener("WeixinJSBridgeReady", onBridgeReady, false);
    //   } else if (document.attachEvent) {
    //     document.attachEvent("WeixinJSBridgeReady", onBridgeReady);
    //     document.attachEvent("onWeixinJSBridgeReady", onBridgeReady);
    //   }
    // }
  }, []);

  const joinmeet = () => {
    // console.log("111");
    Taro.request({
      method:'POST',
      url: "/api/payh5", //仅为示例，并非真实的接口地址
      // url: "https://pay.hackrobot.cn/api/payh5", //仅为示例，并非真实的接口地址

      data: {
        callback_url:window.location.href,
        openid:window.localStorage.getItem('openid')
      },
      header: {
        "content-type": "application/json", // 默认值
      },
      success: function (res) {
        console.log(res.data);
        // window.alert(res.data.jsapi);
        WeixinJSBridge.invoke(
          "getBrandWCPayRequest",
          {
            // 以下6个支付参数通过payjs的jsapi接口获取
            // appId: "wxc5205a653b0259bf",
            // timeStamp: "1701401644",
            // nonceStr: "KhOYB0wFV6j9qyQK",
            // package: "prepay_id=wx01113404850024729b35f4d69b73500000",
            // signType: "MD5",
            // paySign: "2A823C8D47CCF871C6C65A56DC228CF8",
            ...res?.data?.jsapi??{},
          },
          function (res) {
            if (res.err_msg == "get_brand_wcpay_request:ok") {
              setjoinMeetup(true)
              window.localStorage.setItem('joinMeetup',true)
              WeixinJSBridge.call("closeWindow");
            }
          }
        );
      },
    });
  };
  return (
    <View className="Detail">
      {/* <Text>Hello world!</Text> */}
      {/* <AtAvatar image='https://cdn.huodongxing.com/logo/202312/8732019012100/promoteMini.png'></AtAvatar> */}
      <View>
        <Image
          style="width:100%;height: 200px;background: #fff;"
          src={
            "https://7084298024874.huodongxing.com/file/ue/20211008/115427740E13BBD5BD7B56940467DC03B4/30435083489707317.jpeg"
          }
        />
      </View>
      <AtList>
        <AtListItem title="[副业交流] 沙龙茶话会" onClick={() => {}} />
        <AtListItem title="日期" extraText="2023/12/06" arrow="" />
        <AtListItem title="报名人数" extraText="4/10" arrow="" />
        <AtListItem
          title="地点"
          note="广东省深圳市福田区石厦地铁站C口"
          extraText=""
        />
        {/* <AtListItem title='禁用状态' disabled extraText='详细信息' /> */}
      </AtList>

      {/* <AtList>
        <AtListItem
          title="联系我们"
          note=""
          arrow="right"
          iconInfo={{ size: 25, color: "#78A4FA", value: "calendar" }}
        />
        <AtListItem
          title="版本日志"
          note=""
          extraText=""
          arrow="right"
          iconInfo={{ size: 25, color: "#FF4949", value: "bookmark" }}
        />
      </AtList> */}

      <View>
        <AtButton
          className="bottomBtn"
          type="primary"
          onClick={() => joinmeet()}
          disabled={joinMeetup}
        >
          {!!joinMeetup?'已报名':'立即报名'}
        </AtButton>
      </View>

      {/* <View className="indexTablebar">
        <AtTabBar
          tabList={[
            { title: "首页", text: "" },
            { title: "活动" },
            { title: "我的" },
          ]}
          onClick={(value) => handleClick(value)}
          current={current}
        />
      </View> */}
    </View>
  );
};

export default Detail;