add:介绍页

2 years ago · 2a78e35d93
parent 9abd582a86
commit 2a78e35d93
9 changed files with 500 additions and 12 deletions
--- a/src/app.config.ts
+++ b/src/app.config.ts
@ -2,8 +2,7 @@ export default defineAppConfig({
  pages: [
    'pages/index/index',
    'pages/initiate/initiate',
-
-
+    'pages/entry/entry'
  ],
  window: {
    backgroundTextStyle: 'light',
--- a/src/app.less
+++ b/src/app.less
@ -0,0 +1,154 @@
+// .van-tabs__scroll--line{
+//   background: transparent !important;
+// }
+
+image {
+  width: 100%;
+  height: 100%;
+  display: flex;
+}
+
+/* .color{
+  color: #F1AB15;
+} */
+
+.ellipsis1 {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  /* display: inline-block; */
+  white-space: nowrap;
+}
+
+.ellipsis2 {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
+
+.nodata {
+  color: #666666;
+  text-align: center;
+  margin-top: 50rpx;
+  font-size: 28rpx;
+}
+
+.MT30 {
+  margin-top: 30rpx;
+}
+
+.submitbtn {
+  position: absolute;
+  bottom: 100rpx;
+  width: 400rpx;
+  left: 50%;
+  margin-left: -200rpx;
+}
+.submitbtn .btn {
+  position: absolute;
+  top: 20rpx;
+  color: #fff;
+  font-weight: bold;
+  font-size: 32rpx;
+  text-align: center;
+  width: 100%;
+  bottom: 0;
+}
+
+.avatar-wrapper {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  right: 0;
+  top: 0;
+  z-index: 99;
+  opacity: 0;
+}
+
+::-webkit-scrollbar {
+  display: none;
+  width: 0;
+  height: 0;
+  color: transparent;
+}
+
+.flex {
+  display: flex;
+}
+.aitems {
+  align-items: center;
+}
+.jcenter {
+  justify-content: center;
+}
+.sb {
+  justify-content: space-between;
+}
+.sa {
+  justify-content: space-around;
+}
+.wrap {
+  flex-wrap: wrap;
+}
+.ab {
+  align-items: baseline;
+}
+.se {
+  justify-content: space-evenly;
+}
+.fc {
+  flex-direction: column;
+}
+
+.privacy-popup-title {
+  font-size: 36rpx;
+  font-weight: 500;
+  text-align: center;
+}
+
+.privacy-popup-content-box {
+  margin-top: 79rpx;
+  padding: 0 30rpx;
+}
+
+.privacy-popup-content {
+  font-size: 30rpx;
+  margin-bottom: 20rpx;
+}
+
+.privacy-popup-content.is-privacy {
+  color: #41a9fc;
+  text-decoration: underline;
+}
+
+.privacy-popup-content.is-last {
+  margin-bottom: 0;
+}
+
+.privacy-popup-btns {
+  display: flex;
+  margin-top: 76rpx;
+}
+
+.privacy-popup-btn {
+  width: 270rpx;
+  height: 90rpx;
+  line-height: 90rpx;
+  font-size: 32rpx;
+  text-align: center;
+  border: 1rpx solid #000;
+  border-radius: 45rpx;
+}
+
+.privacy-popup-btn:first-child {
+  margin-left: 22rpx;
+  background-color: transparent;
+}
+
+.privacy-popup-btn:last-child {
+  color: #fff;
+  background-color: #000;
+}
--- a/src/pages/entry/entry.config.js
+++ b/src/pages/entry/entry.config.js
@ -0,0 +1,3 @@
+export default definePageConfig({
+  navigationBarTitleText: "介绍页",
+});
--- a/src/pages/entry/entry.less
+++ b/src/pages/entry/entry.less
@ -0,0 +1,137 @@
+.main {
+  position: fixed;
+  top: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.absolutely {
+  width: 100%;
+  height: 100%;
+}
+
+.main .logo {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  background: #fff;
+}
+
+.main .logo image {
+  width: 218rpx;
+  border-radius: 0;
+}
+
+.main .middle {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.main .logo_middle {
+  width: 453rpx;
+  height: 182rpx;
+  /*box-shadow: 6rpx 8rpx 40rpx 6rpx rgba(0, 0, 0, 0.41);*/
+  margin-bottom: 76rpx;
+}
+
+.main .middle .title {
+  width: 100%;
+  height: 38rpx;
+  font-size: 40rpx;
+  font-weight: 500;
+  color: #ffffff;
+  line-height: 60rpx;
+  text-align: center;
+}
+
+.main .bg {
+  position: absolute;
+  top: 0;
+  z-index: -1;
+  width: 100%;
+  height: 100%;
+}
+
+.main .bg .bg_item {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+.body {
+  position: relative;
+  background: #f8f8f8;
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.body .cover {
+  display: inline-block;
+  width: 660rpx;
+  height: 920rpx;
+  border-radius: 50rpx;
+  margin-top: 48rpx;
+  margin-bottom: 7rpx;
+}
+
+.body .bottom {
+  width: 660rpx;
+  height: 474rpx;
+  background: linear-gradient(0deg, #f8f8f8 0%, #efefef 100%);
+  border-radius: 50rpx;
+}
+
+.bottom .text {
+  height: 45rpx;
+  font-size: 48rpx;
+  font-weight: 500;
+  color: #000;
+  line-height: 60rpx;
+  margin-top: 80rpx;
+  margin-bottom: 48rpx;
+}
+
+.bottom .txt {
+  height: 27rpx;
+  font-size: 26rpx;
+  font-weight: 500;
+  color: #666;
+}
+
+.footer {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  flex-direction: column;
+  padding-bottom: calc(44rpx + env(safe-area-inset-bottom));
+}
+
+.main .indicator {
+  width: 360rpx;
+  height: 1rpx;
+  background: #ccc;
+}
+
+.main .indicator .dot {
+  height: 100%;
+  background: #fff;
+  transition-duration: 0.5s;
+}
+
+.btn {
+  width: 270rpx;
+  height: 90rpx;
+  background: #000000;
+  border-radius: 45rpx;
+  color: #fff;
+  line-height: 90rpx;
+  text-align: center;
+  margin-bottom: 80rpx;
+}
--- a/src/pages/entry/entry.tsx
+++ b/src/pages/entry/entry.tsx
@ -0,0 +1,151 @@
+import { MpSplashDetail, WCUserLogin } from "../../utils/Interface";
+import { Component, PropsWithChildren, useEffect, useState } from "react";
+import Taro from "@tarojs/taro";
+// 引入 Swiper, SwiperItem 组件
+import {
+  View,
+  Text,
+  Image,
+  Video,
+  Swiper,
+  SwiperItem,
+} from "@tarojs/components";
+
+import "taro-ui/dist/style/components/button.scss"; // 按需引入
+import "./entry.less";
+
+const app = Taro.getApp();
+
+export default class Entry extends Component<any, any> {
+  constructor(props) {
+    super(props);
+    this.state = {
+      name: "entry",
+      menu: {
+        top: 0,
+        height: 0,
+      },
+      current: 0,
+      toRight: false,
+      isClick: false,
+      welcomeList: [],
+    };
+  }
+
+  async onLoad() {
+    console.log("app", app);
+    const menu = Taro.getMenuButtonBoundingClientRect();
+    this.setState({ menu });
+  }
+  componentDidMount() {}
+
+  componentWillUnmount() {}
+
+  componentDidShow() {}
+
+  componentDidHide() {}
+
+  async initData() {}
+
+  onChange(event) {
+    const current = event.detail.current;
+    const { current: curCurrent, welcomeList } = this.state;
+    if (
+      curCurrent + 2 === welcomeList.length &&
+      current + 1 === welcomeList.length
+    ) {
+      this.setState({ toRight: true });
+    }
+    this.setState({ current });
+  }
+  onClickSwiperItem() {
+    const { current, welcomeList } = this.state;
+    if (current < welcomeList.length - 1) {
+      this.setState({
+        current: current + 1,
+        isClick: true,
+      });
+    } else {
+      this.toHomePage();
+    }
+  }
+  toHomePage() {
+    Taro.switchTab({
+      url: "/pages/index/index",
+    });
+  }
+
+  onFinish(event) {
+    const { current } = event.detail;
+    const { toRight, isClick, welcomeList } = this.state;
+    if (current === welcomeList.length - 1) {
+      if (toRight || isClick) {
+        this.setState({ toRight: false, isClick: false });
+      } else {
+        // this.toHomePage();
+      }
+    }
+  }
+
+  render() {
+    let { name, menu, current, welcomeList } = this.state;
+    return (
+      <View>
+        <View className="main">
+          <View
+            className="logo"
+            style="top: {{menu.top}}px; height: {{menu.height}}px"
+          >
+            <Image src="https://oss.flossom.com/logo2.png" mode="widthFix" />
+          </View>
+          <Swiper
+            className="absolutely"
+            current={current}
+            onChange={this.onChange.bind(this)}
+            onAnimationFinish={this.onFinish.bind(this)}
+            duration={800}
+          >
+            {welcomeList.map((item, index) => {
+              return (
+                <SwiperItem
+                  className="absolutely"
+                  onClick={this.onClickSwiperItem.bind(this)}
+                  key={"swiper_" + index}
+                >
+                  <View
+                    className="body"
+                    style={{
+                      top: menu.top + "px",
+                      height: "calc(" + (100 % -menu.height) + "px)",
+                    }}
+                  >
+                    <Image
+                      className="cover"
+                      src="{{item.image}}"
+                      mode="aspectFill"
+                    ></Image>
+                    <View className="bottom">
+                      <View className="text">{item.title}</View>
+                      <View className="txt">{item.desc}</View>
+                    </View>
+                  </View>
+                </SwiperItem>
+              );
+            })}
+          </Swiper>
+          <View className="footer flex aitems jcenter">
+            <View className="btn" onClick={this.toHomePage.bind(this)}>
+              前往主页
+            </View>
+            <View className="indicator">
+              <View
+                className="dot"
+                style="transform: translateX({{ current * 360 / (welcomeList.length)}}rpx); width: calc(100% / {{welcomeList.length}})"
+              ></View>
+            </View>
+          </View>
+        </View>
+      </View>
+    );
+  }
+}
--- a/src/pages/initiate/initiate.tsx
+++ b/src/pages/initiate/initiate.tsx
@ -34,7 +34,7 @@ export default class Index extends Component<any, any> {

  async onLoad() {
    console.log("app", app);
-    if (!app.globalData?.token) await this.WCUserLogin();
+    // if (!app.globalData?.token) await this.WCUserLogin();
    const menu = Taro.getMenuButtonBoundingClientRect();
    this.setState({ menu });
    console.log("menu", menu);
@ -66,13 +66,6 @@ export default class Index extends Component<any, any> {
    }
  }

-  handleClick() {
-    console.log("this.state.title", this.state);
-    this.setState({
-      title: "hello react",
-    });
-  }
-
  touchstart(event) {
    console.log("touchstart", event);
    const { clientX, clientY } = event.changedTouches[0];
@ -81,14 +74,18 @@ export default class Index extends Component<any, any> {
  touchend(event) {
    console.log("touchstart", event);
    const { clientX, clientY } = event.changedTouches[0];
-    this.setState({ touchX: clientX, touchY: clientY });
+    const { touchX, touchY } = this.state;
+
+    if (clientX - touchX < -50 && Math.abs(clientY - touchY) < 50) {
+      this.onEnded();
+    }
  }
  onEnded() {
    let timeOut: any = null;
    return () => {
      clearTimeout(timeOut);
      timeOut = setTimeout(() => {
-        go("/pages/index/index");
+        go("/pages/entry/entry");
      }, 300);
    };
  }
--- a/src/pages/template/template.config.js
+++ b/src/pages/template/template.config.js
@ -0,0 +1,3 @@
+export default definePageConfig({
+  navigationBarTitleText: "模板页",
+});
--- a/src/pages/template/template.less
+++ b/src/pages/template/template.less
--- a/src/pages/template/template.tsx
+++ b/src/pages/template/template.tsx
@ -0,0 +1,44 @@
+import { MpSplashDetail, WCUserLogin } from "../../utils/Interface";
+import { Component, PropsWithChildren, useEffect, useState } from "react";
+import Taro from "@tarojs/taro";
+// 引入 Swiper, SwiperItem 组件
+import {
+  View,
+  Text,
+  Image,
+  Video,
+  Swiper,
+  SwiperItem,
+} from "@tarojs/components";
+
+import "taro-ui/dist/style/components/button.scss"; // 按需引入
+import "./template.less";
+
+const app = Taro.getApp();
+
+export default class Index extends Component<any, any> {
+  constructor(props) {
+    super(props);
+    this.state = {
+      name: "template模板页",
+    };
+  }
+
+  async onLoad() {
+    console.log("app", app);
+  }
+  componentDidMount() {}
+
+  componentWillUnmount() {}
+
+  componentDidShow() {}
+
+  componentDidHide() {}
+
+  async initData() {}
+
+  render() {
+    let { name } = this.state;
+    return <View>{name}</View>;
+  }
+}