update

src/pages/index/index.jsx

@@ -11,7 +11,7 @@ import { AtImagePicker } from "taro-ui";
 import { AtButton } from "taro-ui";
 import { AtSearchBar } from "taro-ui";
 import { Picker } from "@tarojs/components";
-import { AtList, AtListItem, AtNavBar, AtTag } from "taro-ui";
+import { AtList, AtListItem, AtNavBar, AtTag, AtMessage } from "taro-ui";
 import {
   AtModal,
   AtModalHeader,
@@ -30,7 +30,10 @@ import phone from "../../images/phone.png";
 import robot from "../../images/robot.png";
 import nomad from "../../images/nomad.png";
 import book from "../../images/book.png";
+import qrcode from "../../images/qrcode.png";
+
 import meetup from "../../images/meetup.jpg";
+import bookqr from "../../images/bookqr.jpg";
 
 // export default class Index extends Component {
 const Index = () => {
@@ -43,6 +46,11 @@ const Index = () => {
   const [referer, setreferer] = useState(window.document.referrer);
 
   const [isOpened, setisOpened] = useState(false);
+  const [meetupQR, setmeetupQR] = useState(false);
+
+  const [bookToast, setbookToast] = useState(false);
+  const [meetupToast, setmeetupToast] = useState(false);
+
   const [joinMeetup, setjoinMeetup] = useState(false);
 
   // 获取openid
@@ -103,6 +111,26 @@ const Index = () => {
     }
   };
 
+  // 获取更新用户信息
+  const getUserinfo = (wxid) => {
+    Taro.request({
+      method: "GET",
+      url: `/api/user/${wxid}`, //仅为示例，并非真实的接口地址
+      // url: `/api/user/${window.localStorage.getItem("openid")}`, //仅为示例，并非真实的接口地址
+      success: function (res) {
+        if (res?.data?.userInfo) {
+          //判断wxid是否存在
+          if (res?.data?.userInfo?.openid) {
+            //  有完整的用户信息userInfo
+            setuserInfo(res?.data?.userInfo);
+            window.localStorage.setItem("userInfo", userInfo);
+          }
+        }
+      },
+      complete: function (finy) {},
+    });
+  };
+
   // 获取url中的wxid
   const getWxidFromUrl = () => {
     const urlParams = new URLSearchParams(window.location.search);
@@ -180,9 +208,6 @@ const Index = () => {
     });
   };
 
-
-
-
   // 网页查看通知
   const tgMessage = () => {
     Taro.request({
@@ -325,8 +350,60 @@ const Index = () => {
             5. 知识付费:如何出版一本书?
             <br />
           </View>
-          <View className="bookPrice">
-            <View className="join">预约</View>
+          <View
+            className="bookPrice"
+            onClick={() => {
+              if (!!wxid) {
+                // 修改接口数据
+                // 先判断用户字段
+                if (!!userInfo?.ebook) {
+                  // 已预约
+                  Taro.atMessage({
+                    message: "已预约成功",
+                    type: "warning",
+                  });
+                } else {
+                  // 发起预约
+                  const userUpdateData = {
+                    ebook: 1, // 只更新 openid 字段
+                  };
+                  Taro.request({
+                    method: "PUT",
+                    // url: `/api/user/${urlwxid}`, //仅为示例，并非真实的接口地址
+                    url: `/api/user/${wxid}`, //仅为示例，并非真实的接口地址
+                    data: userUpdateData,
+                    header: {
+                      "Content-Type": "application/json",
+                    },
+                    success: function (res) {
+                      // 预约成功
+                      // Taro.atMessage({
+                      //   message: "预约成功",
+                      //   type: "success",
+                      // });
+
+                      setbookToast(true);
+                    },
+                    fail: function (err) {},
+                    complete: function (finy) {
+                      // setTimeout(() => {
+                      //   window.location.reload();
+                      // }, 2000);
+                      // getUserinfo()
+                    },
+                  });
+                }
+              } else {
+                setmeetupQR(true);
+              }
+            }}
+          >
+            <View
+              className="join"
+              style={{ backgroundColor: !!userInfo?.ebook ? "#1890ff" : null }}
+            >
+              {!!userInfo?.ebook ? "已预约" : "预约"}
+            </View>
           </View>
         </View>
       </View>
@@ -387,7 +464,68 @@ const Index = () => {
                   <AtIcon value="clock" size="30" color="#F00"></AtIcon>
                   19:00--21:00
                 </View>
-                <View className="join">立即报名</View>
+                <View
+                  className="join"
+                  style={{
+                    backgroundColor: !!userInfo?.activity_status
+                      ? "#1890ff"
+                      : null,
+                  }}
+                  onClick={() => {
+                    if (!!wxid) {
+                      // window.alert(userInfo?.activity_status);
+                      // 修改接口数据
+                      // 先判断用户字段
+                      if (userInfo?.activity_status == "1") {
+                        // 已预约
+                        Taro.atMessage({
+                          message: "已预约成功",
+                          type: "warning",
+                        });
+                      } else if (userInfo?.activity_status == "2") {
+                        // 已预约
+                        Taro.atMessage({
+                          message: "审核中",
+                          type: "warning",
+                        });
+                      } else {
+                        // 发起预约
+                        const userUpdateData = {
+                          activity_status: "2", // 审核中
+                        };
+                        Taro.request({
+                          method: "PUT",
+                          // url: `/api/user/${urlwxid}`, //仅为示例，并非真实的接口地址
+                          url: `/api/user/${wxid}`, //仅为示例，并非真实的接口地址
+                          data: userUpdateData,
+                          header: {
+                            "Content-Type": "application/json",
+                          },
+                          success: function (res) {
+                            // 预约成功
+                            // Taro.atMessage({
+                            //   message: "预约成功",
+                            //   type: "success",
+                            // });
+                            setmeetupToast(true);
+                          },
+                          fail: function (err) {},
+                          complete: function (finy) {
+                            window.location.reload();
+                          },
+                        });
+                      }
+                    } else {
+                      setmeetupQR(true);
+                    }
+                  }}
+                >
+                  {userInfo?.activity_status == "2"
+                    ? "审核中"
+                    : userInfo?.activity_status == "1"
+                    ? "已报名"
+                    : "立即报名"}
+                </View>
               </View>
             </View>
           </View>
@@ -444,8 +582,58 @@ const Index = () => {
         </AtModal>
       </View>
 
+      <View className="meetupQR">
+        {/* 软件下载模态窗 */}
+        <AtModal isOpened={meetupQR}>
+          <AtModalHeader>电子书</AtModalHeader>
+          <AtModalContent>
+            <View className="modelText">
+              1.加微信好友
+              <br />
+              2.发送关键词: 数字游民
+            </View>
+            {/* 软件图片展示 */}
+            <View className="model-emoji">
+              <Image
+                // style="width: 100%;height: 240px;background: #fff;"
+                src={qrcode}
+              />
+            </View>
+          </AtModalContent>
+          <AtModalAction>
+            <Button
+              onClick={() => {
+                setmeetupQR(false);
+              }}
+            >
+              知道了
+            </Button>
+          </AtModalAction>
+        </AtModal>
+      </View>
+
       {/* 腾讯云推广: https://curl.qcloud.com/8bJ1d9U0 */}
       {/* <View></View> */}
+
+      <AtMessage />
+      <AtToast
+        isOpened={bookToast}
+        hasMask={true}
+        text={"预约成功"}
+        icon={"check"}
+        onClose={() => {
+          window.location.reload();
+        }}
+      ></AtToast>
+      <AtToast
+        isOpened={meetupToast}
+        text={"报名成功"}
+        icon={"check"}
+        hasMask={true}
+        onClose={() => {
+          window.location.reload();
+        }}
+      ></AtToast>
     </View>
   );
 };