diff --git a/src/app.config.ts b/src/app.config.ts index 99f3446..698fd9c 100644 --- 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', diff --git a/src/app.less b/src/app.less index e69de29..e5bcf95 100644 --- 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; +} diff --git a/src/pages/entry/entry.config.js b/src/pages/entry/entry.config.js new file mode 100644 index 0000000..ace1e46 --- /dev/null +++ b/src/pages/entry/entry.config.js @@ -0,0 +1,3 @@ +export default definePageConfig({ + navigationBarTitleText: "介绍页", +}); diff --git a/src/pages/entry/entry.less b/src/pages/entry/entry.less new file mode 100644 index 0000000..7129292 --- /dev/null +++ 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; +} diff --git a/src/pages/entry/entry.tsx b/src/pages/entry/entry.tsx new file mode 100644 index 0000000..9ae3a45 --- /dev/null +++ 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 { + 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 ( + + + + + + + {welcomeList.map((item, index) => { + return ( + + + + + {item.title} + {item.desc} + + + + ); + })} + + + + 前往主页 + + + + + + + + ); + } +} diff --git a/src/pages/initiate/initiate.tsx b/src/pages/initiate/initiate.tsx index e5b8357..10983c7 100644 --- a/src/pages/initiate/initiate.tsx +++ b/src/pages/initiate/initiate.tsx @@ -34,7 +34,7 @@ export default class Index extends Component { 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 { } } - 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 { 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); }; } diff --git a/src/pages/template/template.config.js b/src/pages/template/template.config.js new file mode 100644 index 0000000..04e6a32 --- /dev/null +++ b/src/pages/template/template.config.js @@ -0,0 +1,3 @@ +export default definePageConfig({ + navigationBarTitleText: "模板页", +}); diff --git a/src/pages/template/template.less b/src/pages/template/template.less new file mode 100644 index 0000000..e69de29 diff --git a/src/pages/template/template.tsx b/src/pages/template/template.tsx new file mode 100644 index 0000000..664eada --- /dev/null +++ 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 { + 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 {name}; + } +}