xuan/TestRestructureWechatLymarketDist
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

✨ feat:新增日历组件

Browse Source
This commit is contained in:
Haiyi
2022-09-20 11:21:45 +08:00
parent b0d0791fcc
commit 4822150647
19 changed files with 2415 additions and 178 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/refundPage/components/pickerTime/index.scss
+182
View File
@@ -0,0 +1,182 @@
@import '../variables/default.scss';
@import '../mixins/index.scss';
.at-calendar {
overflow: hidden;
/* elements */
&__header {
.header__flex {
@include display-flex;
@include align-items(center);
height: 72px;
color: $at-calendar-header-color;
text-align: center;
&-item {
@include flex(0 0 calc(100% / 7));
font-size: 30px;
}
}
}
&__list {
&.flex {
@include display-flex;
@include align-items();
@include flex-wrap(wrap);
color: $at-calendar-day-color;
.flex__item {
@include flex(0 0 calc(100% / 7));
font-size: 30px;
text-align: center;
position: relative;
margin: 5px 0;
&-container {
@include align-items(center);
@include display-flex;
width: $at-calendar-day-size;
height: $at-calendar-day-size;
margin-left: auto;
margin-right: auto;
border-radius: 50%;
.container-text {
@include flex;
}
}
&-extra {
.extra-marks {
position: absolute;
bottom: 5px;
line-height: 0;
left: 50%;
transform: translateX(-50%);
.mark {
width: $at-calendar-mark-size;
height: $at-calendar-mark-size;
margin-right: 4px;
display: inline-block;
background-color: $at-calendar-main-color;
border-radius: 50%;
overflow: hidden;
&:last-child {
margin-right: 0;
}
}
}
}
&--today {
color: $at-calendar-main-color;
font-weight: bolder;
}
&--blur {
color: #e1e4e7;
}
&--selected {
color: white;
background-color: rgba($color: $at-calendar-main-color, $alpha: 0.7);
&-head {
border-top-left-radius: 40px;
border-bottom-left-radius: 40px;
}
&-tail {
border-top-right-radius: 40px;
border-bottom-right-radius: 40px;
}
/* stylelint-disable-next-line */
.extra-marks .mark {
background-color: white;
}
&-head.flex__item--selected-tail {
background-color: transparent;
.flex__item-container {
background-color: rgba(
$color: $at-calendar-main-color,
$alpha: 0.7
);
}
}
}
}
}
}
&__controller {
@include display-flex;
@include align-items(center);
@include justify-content(center);
margin-bottom: 20px;
.controller__arrow {
@include flex(0 0 40px);
height: 40px;
border-radius: 12px;
display: inline-block;
background-size: 16px 24px;
background-position: center;
background-color: #f7f8fc;
background-repeat: no-repeat;
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAYCAYAAADzoH0MAAAAAXNSR0IArs4c6QAAAnFJREFUOBGVVF1rE0EUnXt3tzFtWmqjKYKfqIhVa1L8FQVRWtwnXwRhidXGDwQf81oCUQMioZRCHwNSgiD4lD9QSYVKsA8KbaW1jbamX8adnWsmMnESbYz7cs6ee8/ZnZm7y9h/Xk/Gs70TE9lOZQNFWsGx1IvDJoozxNDttNpmHOfyTssBj59PHxceP6keREDlYPvBGUMJzTD5LHuKhHtC70EEQe72atMAIoLu0MWzRPxInZnEdxZib2I37L2XEI/HsSvYd44AQrqZIW5b3J8fHR0sS/2ve5DJZIzFFexnSD262QAs+c1js45zyVU6KqIwnU5bS58x0mhGhusbaz153Sw9dW+QSr3yCdwJe4wCKlCigbAWiw7PAYDQdclrAclkxk8+iDBifr3JMq3lO86VQsVMuq549RQSU687mOcNANE+VfiFxuLd6NX3e5llD8qjskqb54E8n24mk5Yf3B6ab2auBsgGC8Q7QOJ1AS6ExrSZ12s6r57CyIi99cNgswywtkkIzDB2eSSdftmuGxp57RgfOfY38HlvRWVNqgmYsDb57sDkZK5hb1RHZQ9+U8bu37S/MtOc0zUg8G2U1yOV4WrTdcXrAqT4MDq0yokXVINEwb32pS9WOJfLmboueW0OGgtP05mj3IXTum6iuXHogDtr27an9D/eQBVijr2AiB/VvUQuePenNXZBfmhKrxEl6Hjv1vAHA2lJ1wRBcH9vf5+cH6k3DZANsei1eWCwIrm6uOf1Jsenq8v7Z4ActFJxrsBMo6gC0GAebPHq/Z6bqJoVyn/EQpGFK08MmF2B/Oj1wZKqtYzxeM5MJKY6dMNPQnnePR8FubkAAAAASUVORK5CYII=");
&--right {
transform: rotate(180deg);
}
&--disabled {
opacity: 0.5;
}
}
.controller__info {
@include flex(0 0 auto);
font-size: 30px;
margin-left: 40px;
margin-right: 40px;
}
}
}
.at-calendar-slider__main {
.main__body {
@include display-flex;
width: 100%;
&--animate {
transition: transform 300ms cubic-bezier(0.36, 0.66, 0.04, 1);
}
.body__slider {
@include flex(0 0 100%);
}
}
&--weapp,
&--swan {
.main__body {
height: 480px;
}
}
}
src/pages/refundPage/components/pickerTime/index.tsx
+146
View File
@@ -0,0 +1,146 @@
import Popup from '@/components/popup'
import React, { useState, memo, useEffect } from "react";
import Taro from "@tarojs/taro";
import { View } from "@tarojs/components";
// import { AtIcon } from 'taro-ui'
import './index.scss'
interface Props {
showTime: true | false,
closePopup?: () => void
}
export default memo((props: Props) => {
const {
showTime = false,
closePopup
} = props
//每月多少天
let MONTH_DAYS = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
const WEEK_NAMES = ['日', '一', '二', '三', '四', '五', '六'];
const LINES = [1, 2, 3, 4, 5, 6];
const [year, setLoinsYear] = useState(0);
let nowTime = new Date(Date.parse(new Date().toString()));
const [month, seLoinstMonth] = useState(nowTime.getMonth());
const [currentDate, setcurrentDate] = useState(new Date());
const [tag, setTag] = useState(false);
//获取当前月份
const getMonth = (date: Date): number => {
return date.getMonth();
}
//获取当前年份
const getFullYear = (date: Date): number => {
// console.log(date.getFullYear())
return date.getFullYear();
}
const getCurrentMonthDays = (month: number, year: number): number => {
let _year = year + currentDate.getFullYear();
if (_year % 100 != 0 && _year % 4 == 0 || _year % 400 == 0) {
MONTH_DAYS = [31, 29, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
}
return MONTH_DAYS[month]
}
//当前月第一天是周几
const getDateByYearMonth = (year: number, month: number, day: number = 1): Date => {
var date = new Date()
date.setFullYear(year)
date.setMonth(month, day)
return date
}
const getWeeksByFirstDay = (year: number, month: number): number => {
var date = getDateByYearMonth(year, month)
return date.getDay()
}
const getDayText = (line: number, weekIndex: number, weekDay: number, monthDays: number): any => {
var number = line * 7 + weekIndex - weekDay + 1
if (number <= 0 || number > monthDays) {
return <View className="day-c" key={weekIndex}>&nbsp;</View>
}
return <View className="day-c" key={weekIndex}>
<View className="day" onClick={() => clickItem(line)}>{number}</View>
</View>
}
const setCurrentYearMonth = (date) => {
var month = getMonth(date)
var year = getFullYear(date)
setLoinsYear(year);
seLoinstMonth(month)
setTag(false)
}
const monthChange = (monthChanged: number) => {
if (tag) {
return;
} else {
setTag(true)
}
var monthAfter = month + monthChanged
var date = getDateByYearMonth(year, monthAfter)
setCurrentYearMonth(date)
}
const formatNumber = (num: number): string => {
var _num = num + 1
return _num < 10 ? `0${_num}` : `${_num}`
}
// let monthDays = getCurrentMonthDays(month);
let weekDay = getWeeksByFirstDay(year, month);
let _startX = 0;
const clickItem = (item) => {
console.log(item, 666)
}
return (
<Popup title={'选择时间'} show={showTime} onClose={() => closePopup?.()}>
<View className="loins-calendar"
onTouchEnd={(val) => {
if (_startX > val.changedTouches[0]['clientX'] + 30) {
monthChange(1);
}
if (_startX < val.changedTouches[0]['clientX'] - 30) {
monthChange(-1);
}
}} onTouchStart={(val) => {
_startX = val.changedTouches[0]['clientX']
}}
>
<View className="loins-calendar-tabbar">
<View>
{/* <AtIcon value='chevron-left' size='30' color='#297AF8' onClick={() => {
monthChange(-1);
}}>
</AtIcon> */}
</View>
<View className="loins-calendar-title">{year + currentDate.getFullYear()} 年 {formatNumber(month)}月</View>
<View>
{/* <AtIcon value='chevron-right' size='30' color='#297AF8' onClick={() => {
monthChange(1);
}}></AtIcon> */}
</View>
</View>
{
WEEK_NAMES.map((week, key) => {
return <View className="title-c" key={key}>{week}</View>
})
}
{
LINES.map((l, key) => {
return <View key={key} className="day-content" >
{
WEEK_NAMES.map((week, index) => {
return getDayText(key, index, weekDay, getCurrentMonthDays(month, year))
})
}
</View>
})
}
</View>
</Popup>
)
})
src/pages/refundPage/components/timePicker/index.scss
+168 -50
View File
@@ -1,64 +1,182 @@
.loins-calendar {
@import '../../../../styles/variables/default.scss';
@import '../../../../styles/mixins/index.scss';
background-color: #ffffff;
.at-calendar {
overflow: hidden;
&-tabbar {
padding: 43px 100px 30px 100px;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
/* elements */
&__header {
.header__flex {
@include display-flex;
@include align-items(center);
&-title {
font-size: 36px;
font-family: Helvetica;
color: #333333;
line-height: 48px;
}
height: 72px;
color: $at-calendar-header-color;
text-align: center;
&-item {
@include flex(0 0 calc(100% / 7));
.title-c {
display: inline-block;
width: calc(100% / 7);
text-align: center;
font-size: 30px;
font-weight: 400;
color: #606060;
line-height: 40px;
margin-bottom: 25px;
}
}
}
width: 662rpx;
margin-left: 44rpx;
&__list {
&.flex {
@include display-flex;
@include align-items();
@include flex-wrap(wrap);
.day-content {
color: $at-calendar-day-color;
.flex__item {
@include flex(0 0 calc(100% / 7));
font-size: 30px;
text-align: center;
position: relative;
margin: 5px 0;
.day-c {
display: inline-block;
width: calc(100% / 7);
text-align: center;
margin-bottom: 30px;
&-container {
@include align-items(center);
@include display-flex;
.day {
width: 80px;
height: 80px;
// background: #337FFF;
// border-radius: 16px;
line-height: 80px;
font-size: 32px;
font-weight: 500;
color: #000;
text-align: center;
}
width: $at-calendar-day-size;
height: $at-calendar-day-size;
margin-left: auto;
margin-right: auto;
border-radius: 50%;
.desc {
height: 28px;
font-size: 20px;
font-weight: 400;
color: #202020;
text-align: center;
}
.container-text {
@include flex;
}
}
&-extra {
.extra-marks {
position: absolute;
bottom: 5px;
line-height: 0;
left: 50%;
transform: translateX(-50%);
.mark {
width: $at-calendar-mark-size;
height: $at-calendar-mark-size;
margin-right: 4px;
display: inline-block;
background-color: $at-calendar-main-color;
border-radius: 50%;
overflow: hidden;
&:last-child {
margin-right: 0;
}
}
}
}
&--today {
color: $at-calendar-main-color;
font-weight: bolder;
}
&--blur {
color: #e1e4e7;
}
&--selected {
color: white;
background-color: rgba($color: $at-calendar-main-color, $alpha: 0.7);
&-head {
border-top-left-radius: 40px;
border-bottom-left-radius: 40px;
}
&-tail {
border-top-right-radius: 40px;
border-bottom-right-radius: 40px;
}
/* stylelint-disable-next-line */
.extra-marks .mark {
background-color: white;
}
&-head.flex__item--selected-tail {
background-color: transparent;
.flex__item-container {
background-color: rgba(
$color: $at-calendar-main-color,
$alpha: 0.7
);
}
}
}
}
}
}
}
&__controller {
@include display-flex;
@include align-items(center);
@include justify-content(center);
margin-bottom: 20px;
.controller__arrow {
@include flex(0 0 40px);
height: 40px;
border-radius: 12px;
display: inline-block;
background-size: 16px 24px;
background-position: center;
background-color: #f7f8fc;
background-repeat: no-repeat;
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAYCAYAAADzoH0MAAAAAXNSR0IArs4c6QAAAnFJREFUOBGVVF1rE0EUnXt3tzFtWmqjKYKfqIhVa1L8FQVRWtwnXwRhidXGDwQf81oCUQMioZRCHwNSgiD4lD9QSYVKsA8KbaW1jbamX8adnWsmMnESbYz7cs6ee8/ZnZm7y9h/Xk/Gs70TE9lOZQNFWsGx1IvDJoozxNDttNpmHOfyTssBj59PHxceP6keREDlYPvBGUMJzTD5LHuKhHtC70EEQe72atMAIoLu0MWzRPxInZnEdxZib2I37L2XEI/HsSvYd44AQrqZIW5b3J8fHR0sS/2ve5DJZIzFFexnSD262QAs+c1js45zyVU6KqIwnU5bS58x0mhGhusbaz153Sw9dW+QSr3yCdwJe4wCKlCigbAWiw7PAYDQdclrAclkxk8+iDBifr3JMq3lO86VQsVMuq549RQSU687mOcNANE+VfiFxuLd6NX3e5llD8qjskqb54E8n24mk5Yf3B6ab2auBsgGC8Q7QOJ1AS6ExrSZ12s6r57CyIi99cNgswywtkkIzDB2eSSdftmuGxp57RgfOfY38HlvRWVNqgmYsDb57sDkZK5hb1RHZQ9+U8bu37S/MtOc0zUg8G2U1yOV4WrTdcXrAqT4MDq0yokXVINEwb32pS9WOJfLmboueW0OGgtP05mj3IXTum6iuXHogDtr27an9D/eQBVijr2AiB/VvUQuePenNXZBfmhKrxEl6Hjv1vAHA2lJ1wRBcH9vf5+cH6k3DZANsei1eWCwIrm6uOf1Jsenq8v7Z4ActFJxrsBMo6gC0GAebPHq/Z6bqJoVyn/EQpGFK08MmF2B/Oj1wZKqtYzxeM5MJKY6dMNPQnnePR8FubkAAAAASUVORK5CYII=");
&--right {
transform: rotate(180deg);
}
&--disabled {
opacity: 0.5;
}
}
.controller__info {
@include flex(0 0 auto);
font-size: 30px;
margin-left: 40px;
margin-right: 40px;
}
}
}
.at-calendar-slider__main {
.main__body {
@include display-flex;
width: 100%;
&--animate {
transition: transform 300ms cubic-bezier(0.36, 0.66, 0.04, 1);
}
.body__slider {
@include flex(0 0 100%);
}
}
&--weapp,
&--swan {
.main__body {
height: 480px;
}
}
}
src/pages/refundPage/components/timePicker/index.tsx
+7 -126
View File
@@ -1,11 +1,11 @@
import Popup from '@/components/popup'
import React, { useState, memo, useEffect } from "react";
import Taro from "@tarojs/taro";
import { View } from "@tarojs/components";
import Taro, { getCurrentInstance } from "@tarojs/taro";
import { View, Swiper, SwiperItem, Text } from "@tarojs/components";
// import { AtIcon } from 'taro-ui'
import './index.scss'
import classnames from "classnames";
import AtCalendar from "@/components/calendar/index"
interface Props {
@@ -13,134 +13,15 @@ interface Props {
closePopup?: () => void
}
export default memo((props: Props) => {
const {
let {
showTime = false,
closePopup
} = props
//每月多少天
let MONTH_DAYS = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
const WEEK_NAMES = ['日', '一', '二', '三', '四', '五', '六'];
const LINES = [1, 2, 3, 4, 5, 6];
const [year, setLoinsYear] = useState(0);
let nowTime = new Date(Date.parse(new Date().toString()));
const [month, seLoinstMonth] = useState(nowTime.getMonth());
const [currentDate, setcurrentDate] = useState(new Date());
const [tag, setTag] = useState(false);
//获取当前月份
const getMonth = (date: Date): number => {
return date.getMonth();
}
//获取当前年份
const getFullYear = (date: Date): number => {
// console.log(date.getFullYear())
return date.getFullYear();
}
const getCurrentMonthDays = (month: number, year: number): number => {
let _year = year + currentDate.getFullYear();
if (_year % 100 != 0 && _year % 4 == 0 || _year % 400 == 0) {
MONTH_DAYS = [31, 29, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
}
return MONTH_DAYS[month]
}
//当前月第一天是周几
const getDateByYearMonth = (year: number, month: number, day: number = 1): Date => {
var date = new Date()
date.setFullYear(year)
date.setMonth(month, day)
return date
}
const getWeeksByFirstDay = (year: number, month: number): number => {
var date = getDateByYearMonth(year, month)
return date.getDay()
}
const getDayText = (line: number, weekIndex: number, weekDay: number, monthDays: number): any => {
var number = line * 7 + weekIndex - weekDay + 1
if (number <= 0 || number > monthDays) {
return <View className="day-c" key={weekIndex}>&nbsp;</View>
}
return <View className="day-c" key={weekIndex}>
<View className="day" onClick={() => clickItem(line)}>{number}</View>
</View>
}
const setCurrentYearMonth = (date) => {
var month = getMonth(date)
var year = getFullYear(date)
setLoinsYear(year);
seLoinstMonth(month)
setTag(false)
}
const monthChange = (monthChanged: number) => {
if (tag) {
return;
} else {
setTag(true)
}
var monthAfter = month + monthChanged
var date = getDateByYearMonth(year, monthAfter)
setCurrentYearMonth(date)
}
const formatNumber = (num: number): string => {
var _num = num + 1
return _num < 10 ? `0${_num}` : `${_num}`
}
// let monthDays = getCurrentMonthDays(month);
let weekDay = getWeeksByFirstDay(year, month);
let _startX = 0;
const clickItem = (item) => {
console.log(item, 666)
}
return (
<Popup title={'选择时间'} show={showTime} onClose={() => closePopup?.()}>
<View className="loins-calendar"
onTouchEnd={(val) => {
if (_startX > val.changedTouches[0]['clientX'] + 30) {
monthChange(1);
}
if (_startX < val.changedTouches[0]['clientX'] - 30) {
monthChange(-1);
}
}} onTouchStart={(val) => {
_startX = val.changedTouches[0]['clientX']
}}
>
<View className="loins-calendar-tabbar">
<View>
{/* <AtIcon value='chevron-left' size='30' color='#297AF8' onClick={() => {
monthChange(-1);
}}>
</AtIcon> */}
</View>
<View className="loins-calendar-title">{year + currentDate.getFullYear()} 年 {formatNumber(month)}月</View>
<View>
{/* <AtIcon value='chevron-right' size='30' color='#297AF8' onClick={() => {
monthChange(1);
}}></AtIcon> */}
</View>
</View>
{
WEEK_NAMES.map((week, key) => {
return <View className="title-c" key={key}>{week}</View>
})
}
{
LINES.map((l, key) => {
return <View key={key} className="day-content" >
{
WEEK_NAMES.map((week, index) => {
return getDayText(key, index, weekDay, getCurrentMonthDays(month, year))
})
}
</View>
})
}
</View>
</Popup>
<AtCalendar />
</Popup >
)
})