|
|
@@ -4,62 +4,26 @@
|
|
|
<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' }"
|
|
|
+ <text class="fenjie">/</text>
|
|
|
+ <picker-view
|
|
|
+ :indicator-style="indicatorStyle"
|
|
|
+ :value="value"
|
|
|
+ @change="bindChange"
|
|
|
+ >
|
|
|
+ <picker-view-column>
|
|
|
+ <view class="item" v-for="(item, index) in years" :key="index"
|
|
|
+ >{{ item }}年</view
|
|
|
>
|
|
|
- {{ 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' }"
|
|
|
+ </picker-view-column>
|
|
|
+ <picker-view-column>
|
|
|
+ <view class="item" v-for="(item, index) in months" :key="index"
|
|
|
+ >{{ item }}月</view
|
|
|
>
|
|
|
- {{ 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>
|
|
|
+ </picker-view-column>
|
|
|
+ <!-- <picker-view-column>
|
|
|
+ <view class="item" v-for="(item,index) in days" :key="index">{{item}}日</view>
|
|
|
+ </picker-view-column> -->
|
|
|
+ </picker-view>
|
|
|
</view>
|
|
|
<view class="change">
|
|
|
<view class="cancel" @click="cancelCC">取消</view>
|
|
|
@@ -78,179 +42,62 @@ export default {
|
|
|
},
|
|
|
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,
|
|
|
+ title: "picker-view",
|
|
|
+ years: [],
|
|
|
+ year: "",
|
|
|
+ months: [],
|
|
|
+ month: "",
|
|
|
+ days: [],
|
|
|
+ day: "",
|
|
|
+ value: [],
|
|
|
+ visible: true,
|
|
|
+ // indicatorStyle: `height: ${Math.round(uni.getSystemInfoSync().screenWidth/(750/100))}px;`
|
|
|
+ indicatorStyle: `height: 80rpx;`,
|
|
|
};
|
|
|
},
|
|
|
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;
|
|
|
- }
|
|
|
+ this.year = this.changedYear;
|
|
|
+ this.month = this.changedMonth;
|
|
|
+
|
|
|
+ let date = new Date();
|
|
|
+ let years = [];
|
|
|
+ let year = date.getFullYear();
|
|
|
+ let months = [
|
|
|
+ "01",
|
|
|
+ "02",
|
|
|
+ "03",
|
|
|
+ "04",
|
|
|
+ "05",
|
|
|
+ "06",
|
|
|
+ "07",
|
|
|
+ "08",
|
|
|
+ "09",
|
|
|
+ "10",
|
|
|
+ "11",
|
|
|
+ "12",
|
|
|
+ ];
|
|
|
+ let month = date.getMonth() + 1;
|
|
|
+ let days = [];
|
|
|
+ let day = date.getDate();
|
|
|
+
|
|
|
+ for (let i = 1990; i <= date.getFullYear() + 100; i++) {
|
|
|
+ years.push(i);
|
|
|
}
|
|
|
+ this.years = years;
|
|
|
+ this.months = months;
|
|
|
+ this.value = [this.changedYear - 1990, this.changedMonth - 1];
|
|
|
},
|
|
|
methods: {
|
|
|
+ bindChange(e) {
|
|
|
+ const val = e.detail.value;
|
|
|
+ this.year = this.years[val[0]];
|
|
|
+ this.month = this.months[val[1]];
|
|
|
+ },
|
|
|
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
|
|
|
+ this.$emit("sureCC", false, this.year, this.month);
|
|
|
},
|
|
|
},
|
|
|
};
|
|
|
@@ -267,6 +114,19 @@ export default {
|
|
|
// left: 0rpx;
|
|
|
// top: 0rpx;
|
|
|
// z-index: 3;
|
|
|
+ .picker-view {
|
|
|
+ width: 100%;
|
|
|
+ height: 400rpx;
|
|
|
+ // margin-top: 20rpx;
|
|
|
+ }
|
|
|
+ .item {
|
|
|
+ height: 80rpx;
|
|
|
+ line-height: 80rpx;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 40rpx;
|
|
|
+ }
|
|
|
.zheZhao {
|
|
|
width: 100%;
|
|
|
height: calc(100% - 575rpx);
|
|
|
@@ -297,56 +157,14 @@ export default {
|
|
|
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;
|
|
|
- // }
|
|
|
+ position: relative;
|
|
|
+ .fenjie{
|
|
|
+ position: absolute;
|
|
|
+ left: 391.87rpx;
|
|
|
+ top: 187.5rpx;
|
|
|
+ font-size: 25rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
}
|
|
|
.change {
|
|
|
text-align: center;
|
|
|
@@ -365,6 +183,28 @@ export default {
|
|
|
background-color: #3377ff;
|
|
|
}
|
|
|
}
|
|
|
+ uni-picker-view {
|
|
|
+ display: block;
|
|
|
+ height: 400rpx !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ uni-picker-view .uni-picker-view-wrapper {
|
|
|
+ display: flex;
|
|
|
+ position: relative;
|
|
|
+ overflow: hidden;
|
|
|
+ height: 100%;
|
|
|
+ background-color: white;
|
|
|
+ }
|
|
|
+
|
|
|
+ uni-picker-view[hidden] {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ picker-view {
|
|
|
+ width: 100%;
|
|
|
+ height: 600upx;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
</style>
|
jiangniuniu