314637581
/
flossom-miniapp
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add:介绍页

Browse Source
master
blak-kong 2 years ago
parent 9abd582a86
commit 2a78e35d93
9 changed files with 500 additions and 12 deletions
Show Stats Download Patch File Download Diff File

3
src/app.config.ts
Unescape Escape View File

@ -2,8 +2,7 @@ export default defineAppConfig({
pages: [ pages: [
'pages/index/index', 'pages/index/index',
'pages/initiate/initiate', 'pages/initiate/initiate',
'pages/entry/entry'
], ],
window: { window: {
backgroundTextStyle: 'light', backgroundTextStyle: 'light',

154
src/app.less
Unescape Escape View File

@ -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;
}

3
src/pages/entry/entry.config.js
Unescape Escape View File

@ -0,0 +1,3 @@
export default definePageConfig({
navigationBarTitleText: "介绍页",
});

137
src/pages/entry/entry.less
Unescape Escape View File

@ -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;
}

151
src/pages/entry/entry.tsx
Unescape Escape View File

@ -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>
);
}
}

17
src/pages/initiate/initiate.tsx
Unescape Escape View File

@ -34,7 +34,7 @@ export default class Index extends Component<any, any> {
async onLoad() { async onLoad() {
console.log("app", app); console.log("app", app);
if (!app.globalData?.token) await this.WCUserLogin(); // if (!app.globalData?.token) await this.WCUserLogin();
const menu = Taro.getMenuButtonBoundingClientRect(); const menu = Taro.getMenuButtonBoundingClientRect();
this.setState({ menu }); this.setState({ menu });
console.log("menu", 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) { touchstart(event) {
console.log("touchstart", event); console.log("touchstart", event);
const { clientX, clientY } = event.changedTouches[0]; const { clientX, clientY } = event.changedTouches[0];
@ -81,14 +74,18 @@ export default class Index extends Component<any, any> {
touchend(event) { touchend(event) {
console.log("touchstart", event); console.log("touchstart", event);
const { clientX, clientY } = event.changedTouches[0]; 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() { onEnded() {
let timeOut: any = null; let timeOut: any = null;
return () => { return () => {
clearTimeout(timeOut); clearTimeout(timeOut);
timeOut = setTimeout(() => { timeOut = setTimeout(() => {
go("/pages/index/index"); go("/pages/entry/entry");
}, 300); }, 300);
}; };
} }

3
src/pages/template/template.config.js
Unescape Escape View File

@ -0,0 +1,3 @@
export default definePageConfig({
navigationBarTitleText: "模板页",
});

0
src/pages/template/template.less
Unescape Escape View File

44
src/pages/template/template.tsx
Unescape Escape View File

@ -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>;
}
}
Write Preview
Loading…
Cancel
Save