add:注册页

2 years ago · db7336cd5a
parent 9ca194b3a0
commit db7336cd5a
4 changed files with 292 additions and 95 deletions
--- a/src/app.config.ts
+++ b/src/app.config.ts
@ -7,6 +7,7 @@ export default defineAppConfig({
    "pages/detect/detect",
    "pages/shop/shop",
    "pages/user/user",
+    "pages/register/register",
    'pages/template/template'
  ],
  "tabBar": {
--- a/src/app.tsx
+++ b/src/app.tsx
@ -72,10 +72,7 @@ class App extends Component<PropsWithChildren> {
    if (!isFirst) {
      go("/pages/initiate/initiate");
    }
-
-    setTimeout(() => {
-      throw new Error("test error");
-    }, 5000);
+    go("/pages/register/register");
  }

  onError(error) {
--- a/src/pages/register/register.less
+++ b/src/pages/register/register.less
@ -0,0 +1,181 @@
+/* pages/register/register.wxss */
+page {
+  background: #f8f8f8;
+}
+
+.nav {
+  position: fixed;
+  z-index: 99;
+  width: 100%;
+  top: 0;
+}
+
+.nav .logo {
+  width: 223rpx;
+}
+
+.nav .nav_box {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 32rpx;
+}
+
+.bg {
+  display: inline-block;
+  width: 100%;
+  height: 943rpx;
+}
+
+.footer {
+  position: relative;
+  margin-top: -60rpx;
+  z-index: 1;
+  width: 100%;
+  height: 570rpx;
+  background: #f8f8f8;
+  border-radius: 50rpx 50rpx 0rpx 0rpx;
+  text-align: center;
+  padding-bottom: env(safe-area-inset-bottom);
+}
+
+.title {
+  font-size: 48rpx;
+  font-weight: 500;
+  color: #000;
+  padding-top: 61rpx;
+  padding-bottom: 48rpx;
+}
+
+.content {
+  width: 440rpx;
+  height: 73rpx;
+  font-size: 26rpx;
+  font-weight: 500;
+  color: #666;
+  margin: auto;
+}
+
+.content text {
+  text-decoration: underline;
+}
+
+.btn_login {
+  width: 690rpx;
+  height: 90rpx;
+  background: #000000 !important;
+  border-radius: 45rpx;
+  color: #fff;
+  line-height: 90rpx;
+  font-size: 32rpx;
+  font-weight: bold;
+  margin: 131rpx auto 47rpx;
+}
+
+.checked_box {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 26rpx;
+  font-weight: 500;
+  color: #666;
+  height: 46rpx;
+  line-height: 46rpx;
+}
+
+.close {
+  position: absolute;
+  top: 35rpx;
+  right: 35rpx;
+  display: inline-block;
+  width: 48rpx;
+  height: 48rpx;
+}
+
+.icon {
+  display: block;
+  width: 30rpx;
+  height: 30rpx;
+  margin-right: 25rpx;
+}
+
+.info {
+  width: 640rpx;
+  height: 400rpx;
+  background: #ffffff;
+  border-radius: 30rpx;
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.success_icon {
+  width: 120rpx;
+  height: 120rpx;
+  background: #8ee2b1;
+  border-radius: 50%;
+  margin: 48rpx 0 27rpx;
+}
+
+.text {
+  height: 28rpx;
+  font-size: 30rpx;
+  font-weight: 500;
+  color: #030000;
+  line-height: 60rpx;
+  margin-bottom: 40rpx;
+}
+
+.btn_ok {
+  width: 270rpx;
+  height: 90rpx;
+  line-height: 90rpx;
+  background: #000000;
+  border-radius: 45rpx;
+  color: #fff;
+}
+
+.rich {
+  word-break: break-all;
+  white-space: pre-warp;
+}
+
+.skip_footer_box {
+  position: fixed;
+  bottom: 0;
+  z-index: 99;
+  width: 100%;
+}
+
+.skip_footer_box .checked_box {
+  height: 80rpx;
+}
+
+.skip_footer {
+  display: flex;
+  /*align-items: baseline;*/
+  width: 100%;
+  height: 153rpx;
+  background: #ffffff;
+  box-shadow: 0rpx -3rpx 7rpx 1rpx rgba(173, 191, 207, 0.21);
+}
+
+.skip_foorer_autoBtn {
+  width: 540rpx;
+  height: 90rpx;
+  background: #000000 !important;
+  border-radius: 45rpx;
+  color: #fff;
+  line-height: 90rpx;
+  text-align: center;
+  margin: 21rpx 49rpx 42rpx 30rpx;
+}
+
+.skip_foorer_btn {
+  margin-top: 49rpx;
+  font-size: 32rpx;
+  font-weight: bold;
+  color: #000;
+}
--- a/src/pages/register/register.tsx
+++ b/src/pages/register/register.tsx
@ -1,5 +1,5 @@
-import { MpSplashDetail, WCUserLogin } from "../../utils/Interface";
 import { Component, PropsWithChildren, useEffect, useState } from "react";
+
 import Taro from "@tarojs/taro";
 // 引入 Swiper, SwiperItem 组件
 import {
@ -13,7 +13,18 @@ import {
 } from "@tarojs/components";

 import "taro-ui/dist/style/components/button.scss"; // 按需引入
-import "./template.less";
+import "./register.less";
+
+import {
+  UserAgreement,
+  WCUserLogin,
+  UserPrivacyAgreement,
+  GetUserMobile,
+  UserInfoRegister,
+  MpLoginDetail,
+} from "../../utils/Interface";
+import { compareVersion, formatRichText } from "../../utils/util";
+import { go, loading, msg } from "../../utils/traoAPI";

 const app = Taro.getApp();

@ -65,129 +76,136 @@ export default class Register extends Component<any, any> {
  }

  onSkip() {
-    // wx.switchTab({
-    //     url: '/pages/index/index'
-    // })
+    Taro.switchTab({
+      url: "/pages/index/index",
+    });
  }

  onSkipTap() {
-    // app.globalData.bindCodeSkipRegister = true;
-    // this.onSkip();
+    app.globalData.bindCodeSkipRegister = true;
+    this.onSkip();
  }

  checkPrivacy() {
-    // const res = compareVersion('2.32.3');
-    // const that = this;
-    // if (res >= 0) {
-    //     // 弹出弹窗
-    //     wx.getPrivacySetting({
-    //         success: res => {
-    //             if (res.needAuthorization) {
-    //                 that.setData({
-    //                     showPrivacyPopup: true
-    //                 });
-    //                 app.globalData.needAuthorization = true;
-    //             }
-    //         },
-    //         fail: err => {},
-    //         complete: res => {},
-    //     });
-    // }
+    const res = compareVersion("2.32.3");
+    const that = this;
+    if (res >= 0) {
+      // 弹出弹窗
+      Taro.getPrivacySetting({
+        success: (res) => {
+          if (res.needAuthorization) {
+            that.setState({
+              showPrivacyPopup: true,
+            });
+            app.globalData.needAuthorization = true;
+          }
+        },
+        fail: (err) => {},
+        complete: (res) => {},
+      });
+    }
  }

  onDisagreeTap() {
-    // // 关闭小程序
-    // wx.exitMiniProgram({
-    //     success: res=>{},
-    //     fail: err=>{},
-    //     complete: res=>{}
-    // })
+    // 关闭小程序
+    Taro.exitMiniProgram({
+      success: (res) => {},
+      fail: (err) => {},
+      complete: (res) => {},
+    });
  }
  async onPrivacyTap() {
-    // // 打开隐私协议
-    // go('/pages/xieyi1/xieyi1');
+    // 打开隐私协议
+    go("/pages/xieyi1/xieyi1");
  }
  onClosePrivacyContentPopup() {
-    // this.setData({
-    //     showPrivacyContent: false
-    // });
+    this.setState({
+      showPrivacyContent: false,
+    });
  }
  handleAgreePrivacyAuthorization() {
-    // this.setData({
-    //     showPrivacyPopup: false
-    // });
-    // app.globalData.needAuthorization = false;
+    this.setState({
+      showPrivacyPopup: false,
+    });
+    app.globalData.needAuthorization = false;
  }

  async getBg() {
-    // const {data} = await MpLoginDetail();
-    // if (data.code === 200) {
-    //     this.setData({bg: data.data.data.image});
-    // }
+    const { data } = await MpLoginDetail();
+    if (data.code === 200) {
+      this.setState({ bg: data.data.data.image });
+    }
  }

  onCheck() {
-    // const {isChecked} = this.data;
-    // this.setData({isChecked: !isChecked});
+    const { isChecked } = this.state;
+    this.setState({ isChecked: !isChecked });
  }

  onSubmit(event) {
    // if (event.detail.errMsg !== 'getPhoneNumber:ok') return msg('获取失败');
-    // const {encryptedData, iv} = event.detail;
-    // wx.login({
-    //     success: ({code}) =>  {
-    //         this.onUpdateMobile({encryptedData, iv, code})
-    //     }
-    // })
+    const { encryptedData, iv } = event.detail;
+    Taro.login({
+      success: ({ code }) => {
+        this.onUpdateMobile({ encryptedData, iv, code });
+      },
+    });
  }

  onUpdateMobile(data) {
    // GetUserMobile(data).then((res) => {
-    //     msg('授权成功');
-    //     const mobile = res.data.data.list.phoneNumber;
-    //     loading('注册中');
-    //     UserInfoRegister({mobile}).then((res) => {
-    //         if (res.data.code === 200) {
-    //             this.setData({isRegister: true});
-    //             setTimeout(() => {
-    //                 this.onCloseRegister()
-    //             }, 2000)
-    //         }
-    //     });
-    // })
+    //   msg("授权成功");
+    //   const mobile = res.data.data.list.phoneNumber;
+    //   loading("注册中");
+    //   UserInfoRegister({ mobile }).then((res) => {
+    //     if (res.data.code === 200) {
+    //       this.setState({ isRegister: true });
+    //       setTimeout(() => {
+    //         this.onCloseRegister();
+    //       }, 2000);
+    //     }
+    //   });
+    // });
  }

  onCloseRegister() {
-    // if (!this.data.isRegister) return;
-    // this.setData({isRegister: false});
-    // if(this.data.fromUrl) {
-    //     const url = this.data.fromUrl
-    //     this.setData({
-    //         fromUrl: '',
-    //     })
-    //     wx.redirectTo({
-    //       url: decodeURIComponent(url),
-    //     })
-    // } else {
-    //     go('/pages/userInfo/userInfo')
-    // }
+    if (!this.state.isRegister) return;
+    this.setState({ isRegister: false });
+    if (this.state.fromUrl) {
+      const url = this.state.fromUrl;
+      this.setState({
+        fromUrl: "",
+      });
+      Taro.redirectTo({
+        url: decodeURIComponent(url),
+      });
+    } else {
+      go("/pages/userInfo/userInfo");
+    }
  }

  onClosePopup() {
-    // this.setData({isShow: false, userAgreement: null, policy: null});
+    this.setState({ isShow: false, userAgreement: null, policy: null });
  }

  async onPopup(event) {
-    // const {type} = event.target.dataset
-    // const request = type === 'agreement' ? await UserAgreement() : await UserPrivacyAgreement();
-    // const {data} = request;
-    // if (data.code === 200) {
-    //     this.setData({
-    //         userAgreement: data.data.data?.user_agreement?.value ? formatRichText(data.data.data?.user_agreement?.value) : null,
-    //         policy: data.data.data?.user_privacy_agreement?.value ? formatRichText(data.data.data?.user_privacy_agreement?.value) : null,
-    //         isShow: true
-    //     })
-    // }
+    const { type } = event.target.dataset;
+    const request =
+      type === "agreement"
+        ? await UserAgreement()
+        : await UserPrivacyAgreement();
+    const { data } = request;
+    if (data.code === 200) {
+      this.setState({
+        userAgreement: data.data.data?.user_agreement?.value
+          ? formatRichText(data.data.data?.user_agreement?.value)
+          : null,
+        policy: data.data.data?.user_privacy_agreement?.value
+          ? formatRichText(data.data.data?.user_privacy_agreement?.value)
+          : null,
+        isShow: true,
+      });
+    }
  }

  componentDidMount() {}
@ -246,7 +264,7 @@ export default class Register extends Component<any, any> {
              <Image
                onClick={this.onCheck}
                className="icon"
-                src="/img/welcome/checked.png"
+                src={require("../../img/welcome/checked.png")}
              ></Image>
              <View className="tips">
                我已阅读并同意《用户协议》和《隐私政策》
@ -259,7 +277,7 @@ export default class Register extends Component<any, any> {
          <Image
            className="close"
            mode="widthFix"
-            src="/img/close.png"
+            src={require("../../img/close.png")}
            onClick={this.onSkip}
          ></Image>
        </View>
@ -271,13 +289,13 @@ export default class Register extends Component<any, any> {
                <Image
                  onClick={this.onCheck}
                  className="icon"
-                  src="/img/welcome/checked.png"
+                  src={require("../../img/welcome/checked.png")}
                ></Image>
              ) : (
                <Image
                  onClick={this.onCheck}
                  className="icon"
-                  src="/img/welcome/unchecked.png"
+                  src={require("../../img/welcome/unchecked.png")}
                ></Image>
              )}