|
@@ -0,0 +1,370 @@
|
|
|
+<template>
|
|
|
+ <view class="changeCalendar">
|
|
|
+ <view class="zheZhao"></view>
|
|
|
+ <view class="content">
|
|
|
+ <view class="title">选择日期</view>
|
|
|
+ <view class="cont">
|
|
|
+ <view class="highLight" v-if="pcOrYd">
|
|
|
+ <view
|
|
|
+ class="left"
|
|
|
+ :style="{ marginTop: top }"
|
|
|
+ @touchstart="touchstart1"
|
|
|
+ @touchmove="touchmove1"
|
|
|
+ >
|
|
|
+ <view
|
|
|
+ v-for="(item, i) in yearList"
|
|
|
+ :style="index1 == i ? { color: '#292C33' } : { color: '#DADEE6' }"
|
|
|
+ >
|
|
|
+ {{ item }}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="diagonalLine"> / </view>
|
|
|
+ <view
|
|
|
+ class="right"
|
|
|
+ :style="{ marginTop: top2 }"
|
|
|
+ @touchstart="touchstart2"
|
|
|
+ @touchmove="touchmove2"
|
|
|
+ >
|
|
|
+ <view
|
|
|
+ v-for="(item, i) in monthList"
|
|
|
+ :style="index2 == i ? { color: '#292C33' } : { color: '#DADEE6' }"
|
|
|
+ >
|
|
|
+ {{ item }}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="highLight" v-else>
|
|
|
+ <view
|
|
|
+ class="left"
|
|
|
+ :style="{ marginTop: top }"
|
|
|
+ @mousedown="mousedown1"
|
|
|
+ >
|
|
|
+ <view
|
|
|
+ v-for="(item, i) in yearList"
|
|
|
+ :style="index1 == i ? { color: '#292C33' } : { color: '#DADEE6' }"
|
|
|
+ >
|
|
|
+ {{ item }}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="diagonalLine"> / </view>
|
|
|
+ <view
|
|
|
+ class="right"
|
|
|
+ :style="{ marginTop: top2 }"
|
|
|
+ @mousedown="mousedown2"
|
|
|
+ >
|
|
|
+ <view
|
|
|
+ v-for="(item, i) in monthList"
|
|
|
+ :style="index2 == i ? { color: '#292C33' } : { color: '#DADEE6' }"
|
|
|
+ >
|
|
|
+ {{ item }}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="change">
|
|
|
+ <view class="cancel" @click="cancelCC">取消</view>
|
|
|
+ <view class="sure" @click="sureCC">确定</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import moment from "moment";
|
|
|
+export default {
|
|
|
+ props: {
|
|
|
+ changedYear: {},
|
|
|
+ changedMonth: {},
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ startYear: 1990,
|
|
|
+ nowYear: moment().format("YYYY"),
|
|
|
+ undYear: parseInt(moment().format("YYYY")) + 100,
|
|
|
+ yearList: [],
|
|
|
+ monthList: [
|
|
|
+ "01",
|
|
|
+ "02",
|
|
|
+ "03",
|
|
|
+ "04",
|
|
|
+ "05",
|
|
|
+ "06",
|
|
|
+ "07",
|
|
|
+ "08",
|
|
|
+ "09",
|
|
|
+ "10",
|
|
|
+ "11",
|
|
|
+ "12",
|
|
|
+ ],
|
|
|
+ top: "0rpx",
|
|
|
+ top2: "0rpx",
|
|
|
+ pageY: 0,
|
|
|
+ pageY2: 0,
|
|
|
+ index1: 0,
|
|
|
+ index2: 0,
|
|
|
+ pcOrYd: false,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ if (/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) {
|
|
|
+ this.pcOrYd = true;
|
|
|
+ } else {
|
|
|
+ this.pcOrYd = false;
|
|
|
+ }
|
|
|
+ let list = [];
|
|
|
+ for (let i = this.startYear; i < this.undYear; i++) {
|
|
|
+ list.push(i);
|
|
|
+ }
|
|
|
+ this.yearList = list;
|
|
|
+ for (let i = 0; i < this.yearList.length; i++) {
|
|
|
+ if (this.yearList[i] == this.changedYear) {
|
|
|
+ this.top = -i * 80 + "rpx";
|
|
|
+ this.index1 = i;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ for (let i = 0; i < this.monthList.length; i++) {
|
|
|
+ if (this.monthList[i] == this.changedMonth) {
|
|
|
+ this.top2 = -i * 80 + "rpx";
|
|
|
+ this.index2 = i;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ cancelCC() {
|
|
|
+ this.$emit("cancelCC", false);
|
|
|
+ },
|
|
|
+ sureCC() {
|
|
|
+ this.$emit(
|
|
|
+ "sureCC",
|
|
|
+ false,
|
|
|
+ this.yearList[this.index1],
|
|
|
+ this.monthList[this.index2]
|
|
|
+ );
|
|
|
+ },
|
|
|
+ touchstart1() {
|
|
|
+ this.pageY = event.touches[0].pageY;
|
|
|
+ },
|
|
|
+ touchmove1() {
|
|
|
+ if (this.pageY < event.touches[0].pageY) {
|
|
|
+ let dif = event.touches[0].pageY - this.pageY;
|
|
|
+ this.index1 = this.index1 - Math.round(dif / 2);
|
|
|
+ if (this.index1 <= 0) {
|
|
|
+ this.index1 = 0;
|
|
|
+ this.top = "0rpx";
|
|
|
+ } else {
|
|
|
+ this.top = -this.index1 * 80 + "rpx";
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ let dif = this.pageY - event.touches[0].pageY;
|
|
|
+ this.index1 = this.index1 + Math.round(dif / 2);
|
|
|
+ if (this.index1 >= this.yearList.length - 1) {
|
|
|
+ this.index1 = this.yearList.length - 1;
|
|
|
+ this.top = -(this.yearList.length - 1) * 80 + "rpx";
|
|
|
+ } else {
|
|
|
+ this.top = -this.index1 * 80 + "rpx";
|
|
|
+ }
|
|
|
+ this.top = -this.index1 * 80 + "rpx";
|
|
|
+ }
|
|
|
+ this.pageY = event.touches[0].pageY;
|
|
|
+ },
|
|
|
+ touchstart2() {
|
|
|
+ this.pageY2 = event.touches[0].pageY;
|
|
|
+ },
|
|
|
+ touchmove2() {
|
|
|
+ if (this.pageY2 < event.touches[0].pageY) {
|
|
|
+ let dif = event.touches[0].pageY - this.pageY2;
|
|
|
+ this.index2 = this.index2 - Math.round(dif / 2);
|
|
|
+ if (this.index2 <= 0) {
|
|
|
+ this.index2 = 0;
|
|
|
+ this.top2 = "0rpx";
|
|
|
+ } else {
|
|
|
+ this.top2 = -this.index2 * 80 + "rpx";
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ let dif = this.pageY2 - event.touches[0].pageY;
|
|
|
+ this.index2 = this.index2 + Math.round(dif / 2);
|
|
|
+ if (this.index2 >= this.monthList.length - 1) {
|
|
|
+ this.index2 = this.monthList.length - 1;
|
|
|
+ this.top2 = -(this.monthList.length - 1) * 80 + "rpx";
|
|
|
+ } else {
|
|
|
+ this.top2 = -this.index2 * 80 + "rpx";
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.pageY2 = event.touches[0].pageY;
|
|
|
+ },
|
|
|
+ mousedown1() {
|
|
|
+ this.pageY = event.pageY;
|
|
|
+ document.onmousemove = (e) => {
|
|
|
+ if (this.pageY < e.pageY) {
|
|
|
+ let dif = e.pageY - this.pageY;
|
|
|
+ this.index1 = this.index1 - Math.round(dif / 2);
|
|
|
+ if (this.index1 <= 0) {
|
|
|
+ this.index1 = 0;
|
|
|
+ this.top = "0rpx";
|
|
|
+ } else {
|
|
|
+ this.top = -this.index1 * 80 + "rpx";
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ let dif = this.pageY - e.pageY;
|
|
|
+ this.index1 = this.index1 + Math.round(dif / 2);
|
|
|
+ if (this.index1 >= this.yearList.length - 1) {
|
|
|
+ this.index1 = this.yearList.length - 1;
|
|
|
+ this.top = -(this.yearList.length - 1) * 80 + "rpx";
|
|
|
+ } else {
|
|
|
+ this.top = -this.index1 * 80 + "rpx";
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.pageY = e.pageY;
|
|
|
+ };
|
|
|
+ document.onmouseup = (e) => {
|
|
|
+ document.onmousemove = null;
|
|
|
+ document.onmouseup = null;
|
|
|
+ };
|
|
|
+ return false; //兼容firefox
|
|
|
+ },
|
|
|
+ mousedown2() {
|
|
|
+ this.pageY2 = event.pageY;
|
|
|
+ document.onmousemove = (e) => {
|
|
|
+ if (this.pageY2 < e.pageY) {
|
|
|
+ let dif = e.pageY - this.pageY2;
|
|
|
+ this.index2 = this.index2 - Math.round(dif / 2);
|
|
|
+ if (this.index2 <= 0) {
|
|
|
+ this.index2 = 0;
|
|
|
+ this.top2 = "0rpx";
|
|
|
+ } else {
|
|
|
+ this.top2 = -this.index2 * 80 + "rpx";
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ let dif = this.pageY2 - e.pageY;
|
|
|
+ this.index2 = this.index2 + Math.round(dif / 2);
|
|
|
+ if (this.index2 >= this.monthList.length - 1) {
|
|
|
+ this.index2 = this.monthList.length - 1;
|
|
|
+ this.top2 = -(this.monthList.length - 1) * 80 + "rpx";
|
|
|
+ } else {
|
|
|
+ this.top2 = -this.index2 * 80 + "rpx";
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.pageY2 = e.pageY;
|
|
|
+ };
|
|
|
+ document.onmouseup = (e) => {
|
|
|
+ document.onmousemove = null;
|
|
|
+ document.onmouseup = null;
|
|
|
+ };
|
|
|
+ return false; //兼容firefox
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less">
|
|
|
+.changeCalendar {
|
|
|
+ // margin-top: -105rpx;
|
|
|
+ // width: 100%;
|
|
|
+ // height: 100vh;
|
|
|
+ // background: #12141A;
|
|
|
+ // opacity: 0.5;
|
|
|
+ // position: absolute;
|
|
|
+ // left: 0rpx;
|
|
|
+ // top: 0rpx;
|
|
|
+ // z-index: 3;
|
|
|
+ .zheZhao {
|
|
|
+ width: 100%;
|
|
|
+ height: calc(100% - 575rpx);
|
|
|
+ background: #12141a;
|
|
|
+ opacity: 0.5;
|
|
|
+ position: absolute;
|
|
|
+ left: 0rpx;
|
|
|
+ top: 0rpx;
|
|
|
+ z-index: 3;
|
|
|
+ }
|
|
|
+ .content {
|
|
|
+ width: 100%;
|
|
|
+ height: 600rpx;
|
|
|
+ background-color: #fff;
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0rpx;
|
|
|
+ opacity: 1;
|
|
|
+ z-index: 4;
|
|
|
+ border-radius: 25rpx 25rpx 0rpx 0px;
|
|
|
+ // height: 575rpx;
|
|
|
+ .title {
|
|
|
+ margin-top: 35rpx;
|
|
|
+ margin-left: 40rpx;
|
|
|
+ font-size: 30rpx;
|
|
|
+ color: #292c33;
|
|
|
+ }
|
|
|
+ .cont {
|
|
|
+ margin: 42.5rpx 0rpx 17.5rpx 0rpx;
|
|
|
+ height: 400rpx;
|
|
|
+ overflow: hidden;
|
|
|
+ // .top{
|
|
|
+ // height: 190rpx;
|
|
|
+ // opacity: .3;
|
|
|
+ // z-index: 4;
|
|
|
+ // }
|
|
|
+ .highLight {
|
|
|
+ height: 80rpx;
|
|
|
+ // z-index: 3;
|
|
|
+ position: relative;
|
|
|
+ // top: 222.5rpx;
|
|
|
+ top: 160rpx;
|
|
|
+ .left {
|
|
|
+ padding-right: 62.5rpx;
|
|
|
+ width: 49%;
|
|
|
+ float: left;
|
|
|
+ text-align: right;
|
|
|
+ color: #dadee6;
|
|
|
+ font-size: 40rpx;
|
|
|
+ font-weight: bold;
|
|
|
+
|
|
|
+ uni-view {
|
|
|
+ line-height: 80rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .diagonalLine {
|
|
|
+ width: 2%;
|
|
|
+ float: left;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 25rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ line-height: 80rpx;
|
|
|
+ }
|
|
|
+ .right {
|
|
|
+ padding-left: 62.5rpx;
|
|
|
+ float: left;
|
|
|
+ width: 49%;
|
|
|
+ text-align: left;
|
|
|
+ color: #dadee6;
|
|
|
+ font-size: 40rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ uni-view {
|
|
|
+ line-height: 80rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // .bottom{
|
|
|
+ // height: 190rpx;
|
|
|
+ // opacity: .3;
|
|
|
+ // z-index: 4;
|
|
|
+ // }
|
|
|
+ }
|
|
|
+ .change {
|
|
|
+ text-align: center;
|
|
|
+ border-top: 0.62rpx solid #dadee6;
|
|
|
+ .cancel {
|
|
|
+ padding: 26.25rpx 0rpx;
|
|
|
+ display: inline-block;
|
|
|
+ width: 50%;
|
|
|
+ color: #3377ff;
|
|
|
+ }
|
|
|
+ .sure {
|
|
|
+ padding: 26.25rpx 0rpx;
|
|
|
+ display: inline-block;
|
|
|
+ width: 50%;
|
|
|
+ color: #fff;
|
|
|
+ background-color: #3377ff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|