aaa-ui-test 1.0.0

package/src/components/date-selecter/index.scss

@@ -0,0 +1,190 @@
+@charset "utf-8";
+@import "~@/assets/css/common/var";
+@import "~@/assets/css/common/mixin";
+
+.jdd-date-mask{
+	position: fixed;
+	left: 0;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	z-index: $z-index-mask;
+	background: rgba(0,0,0,0.5);
+}
+.jdd-dateselecter{
+
+	background: #fff;
+	position: absolute;
+	bottom: 0;
+	width: 100%;
+	left: 0;
+	z-index: $z-index-popup;
+	border-top-right-radius:8px;
+	border-top-left-radius:8px;
+
+}
+.jdd-select-value{
+	height: 50px;
+	@include jdd-border-bottom();
+	@include jdd-border-top();
+}
+.jdd-dateselecter-title{
+
+	height: 60px;
+	
+	span{
+		padding: 19px 16px 18px;
+		display: inline-block;
+		font-family: PingFangSC-Medium;
+		font-size: 16px;
+		color: #666;
+		
+	}
+	.cancel{
+		float: left;
+	}
+	.confirm{
+		float: right;
+		color: #4D7BFE;
+	}
+}
+
+.jdd-select-date {
+	position: fixed;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	left: 0;
+	z-index: 1000;
+	font-size: 16px
+}
+
+.jdd-select-date:after {
+	content: '';
+	position: fixed;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	left: 0;
+	z-index: 100;
+	background-color: transparent;
+	-webkit-transition: background-color 300ms cubic-bezier(0.4,0,.2,1);
+	transition: background-color 300ms cubic-bezier(0.4,0,.2,1)
+}
+
+.jdd-select-date.jdd-select-date-in:after {
+	background-color: rgba(0,0,0,.6)
+}
+
+.jdd-select-date.jdd-select-date-in .jdd-select-date-con {
+	opacity: 1;
+	-webkit-transform: translate3d(-50%,-50%,0) scale(1);
+	transform: translate3d(-50%,-50%,0) scale(1)
+}
+
+.jdd-select-date.jdd-select-date-in .jdd-select-date-con-n {
+	opacity: 1;
+	-webkit-transform: translate3d(0,0,0);
+	transform: translate3d(0,0,0)
+}
+
+.jdd-select-date-con {
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	width: 280px;
+	height: 206px;
+	z-index: 1000;
+	opacity: 0;
+	-webkit-transform: translate3d(-50%,-50%,0) scale(1.185);
+	transform: translate3d(-50%,-50%,0) scale(1.185);
+	-webkit-transition: all 300ms cubic-bezier(0.4,0,.2,1);
+	transition: all 300ms cubic-bezier(0.4,0,.2,1)
+}
+
+.jdd-select-date-scroller,.jdd-select-date-scrollerbox {
+	position: relative;
+	width: 100%;
+	height: 156px;
+	overflow: hidden
+}
+
+.jdd-select-date-scrollerbox .jdd-select-value {
+	position: absolute;
+	top: 125px;
+	left: 0;
+	width: 100%;
+	-webkit-transform: translate3d(0,-50%,0);
+	transform: translate3d(0,-50%,0)
+}
+
+.jdd-select-date-scroller div {
+	position: relative;
+	float: left;
+	box-sizing: border-box;
+	padding: 10px 0;
+	height: 100%;
+	text-align: center;
+	z-index: 100
+}
+
+.jdd-select-date-con-n {
+	position: absolute;
+	bottom: 0;
+	left: 0;
+	width: 100%;
+	z-index: 1000;
+	opacity: 0;
+	-webkit-transform: translate3d(0,100%,0);
+	transform: translate3d(0,100%,0);
+	-webkit-transition: all 300ms cubic-bezier(0.4,0,.2,1);
+	transition: all 300ms cubic-bezier(0.4,0,.2,1)
+}
+
+.jdd-select-date-scroller-n,.jdd-select-date-scrollerbox-n {
+	position: relative;
+	width: 100%;
+	height: 269px;
+	overflow: hidden;
+	display: flex;
+	justify-content: center;
+}
+
+.jdd-select-date-scrollerbox-n {
+	-webkit-mask: -webkit-gradient(linear,0 55%,0 0,from(#fff),to(rgba(255,255,255,0)))
+}
+
+.jdd-select-date-scrollerbox-n .jdd-select-value {
+	position: absolute;
+	top: 125px;
+	left: 0;
+	width: 100%;
+	-webkit-transform: translate3d(0,-50%,0);
+	transform: translate3d(0,-50%,0);
+	z-index: -1
+}
+
+.jdd-select-date-scroller-n {
+	-webkit-mask: -webkit-gradient(linear,0 55%,0 100%,from(#fff),to(rgba(255,255,255,0)))
+}
+
+.jdd-select-date-scroller-n div {
+	position: relative;
+	float: left;
+	box-sizing: border-box;
+	// -webkit-box-sizing: border-box;
+	// width: 33.33333333%;
+	
+	height: 100%;
+	text-align: center;
+	z-index: 100
+}
+.jdd-select-date-ymd div{
+	width: 110px;
+}
+.jdd-select-date-hms div{
+	width: 80px;
+}
+.jdd-select-date-hms .split{
+	width: auto;
+}

package/src/components/date-selecter/src/dateselecter.vue

@@ -0,0 +1,387 @@
+<template>
+  <!-- <transition name="fold"> -->
+  <!-- <div v-show="visible">
+  <jdd-mask v-show="visible"></jdd-mask>-->
+
+  <!-- <div class="jdd-dateselecter"> -->
+  <jdd-popup :visible.sync="isVisible">
+    <div class="jdd-dateselecter-title">
+      <span class="cancel" @click.stop="cancelFn">取消</span>
+      <span class="confirm" @click.stop="confirmFn">确定</span>
+    </div>
+    <div class="jdd-dateselecter-content">
+      <div class="jdd-select-date-scrollerbox-n jdd-fs36">
+        <div
+          :class="[type==='Hm'?'jdd-select-date-hms':'jdd-select-date-ymd','jdd-select-date-scroller-n']"
+        >
+         <jdd-picker
+            type="day"
+            :data="upDown"
+            :outindex.sync="dayIndex"
+            v-if="type.indexOf('Hm') !== -1"
+          ></jdd-picker>
+          <jdd-picker
+            v-if="type.indexOf('Y') !== -1"
+            :data="filterYear"
+            :outindex.sync="yearIndex"
+            @change="changeYear"
+          ></jdd-picker>
+
+          <jdd-picker
+            v-if="type.indexOf('M') !== -1"
+            type="month"
+            :data="filterMonth"
+            :outindex.sync="monthIndex"
+            @change="changeMonth"
+          ></jdd-picker>
+
+          <jdd-picker
+            v-if="type.indexOf('D') !== -1"
+            type="day"
+            :data="filterDay"
+            :outindex.sync="dayIndex"
+            @change="changeday"
+          ></jdd-picker>
+
+          <jdd-picker
+            v-if="type.indexOf('H') !== -1"
+            type="day"
+            :data="hours"
+            :outindex.sync="hIndex"
+          ></jdd-picker>
+          <jdd-picker
+            type="day"
+            :data="splits"
+            :outindex.sync="hIndex"
+            v-if="type.indexOf('H') !== -1"
+            class="split"
+          ></jdd-picker>
+         
+          <jdd-picker
+            type="day"
+            :data="minutes"
+            :outindex.sync="mIndex"
+            v-if="type.indexOf('m') !== -1"
+          ></jdd-picker>
+        </div>
+        <p class="jdd-select-value"></p>
+      </div>
+    </div>
+    <!-- </div> -->
+  </jdd-popup>
+  <!-- </div> -->
+  <!-- </transition> -->
+</template>
+<script>
+import JddPopup from "../../popup";
+import JddPicker from "../../picker";
+import visibleMixin from '@/mixins/visible';
+
+const TIME_INTERVAL = 5 * 365 * 24 * 60 * 60 * 1000;
+
+export default {
+  name: "JddDateSelecter",
+  mixins: [visibleMixin],
+  props: {
+    type: {
+      type: String,
+      default: "YMD"
+    },
+    startDate: {
+      type: Date,
+      default() {
+        return new Date(new Date().getTime() - TIME_INTERVAL);
+      }
+    },
+    endDate: {
+      type: Date,
+      default() {
+        return new Date(new Date().getTime() + TIME_INTERVAL);
+      }
+    },
+    value: {
+      type: Date,
+      default() {
+        return new Date();
+      }
+    }
+  },
+  data() {
+    return {
+      year: [],
+      month: [],
+      splits: [],
+      hours: [],
+      minutes: [],
+      yearIndex: 0,
+      monthIndex: 0,
+      dayIndex: 0,
+      hIndex: 0,
+      mIndex: 0,
+      sIndex: 0,
+      selfDay: [],
+      upDown:["上午","下午"]
+    };
+  },
+  components: {
+    JddPicker,
+    JddPopup
+  },
+  created() {
+
+    let beginYear = this.startDate.getFullYear();
+    let endYear = this.endDate.getFullYear();
+    let currentYear = this.yearValue =  this.value.getFullYear();
+    let currentMonth = this.value.getMonth() + 1;
+    let currentDay = this.value.getDate();
+
+    if (this.type.indexOf("Y") !== -1) {
+      let years = [];
+      for (let i = beginYear; i <= endYear; i++) {
+        years.push(i);
+      }
+      this.year = years;
+    }
+    if (this.type.indexOf("M") !== -1) {
+      this.setMonths(currentYear,currentMonth);
+    }
+
+    if (this.type.indexOf("D") !== -1) {
+      this.setDays(currentYear, currentMonth);
+    }
+
+    if (this.type === "Hm") {
+      let years = ["上午","下午"];
+      let hours = [];
+      for (let i = 1; i <= 12; i++) {
+        hours.push(i);
+      }
+      let minutes = [];
+      for (let i = 0; i < 60; i++) {
+        minutes.push(i);
+      }
+      this.hours = hours;
+      this.minutes = minutes;
+      this.years = years;
+     // this.splits = [":"];
+    }
+
+    if (this.year.length > 0) {
+      for (let i = 0; i < this.year.length; i++) {
+        if (this.year[i] == currentYear) {
+          this.yearIndex = i;
+        }
+      }
+    }
+    if (this.month.length > 0) {
+      for (let i = 0; i < this.month.length; i++) {
+        if (this.month[i] == currentMonth) {
+          this.monthIndex = i;
+        }
+      }
+    }
+
+    if (this.selfDay.length > 0) {
+      for (let i = 0; i < this.selfDay.length; i++) {
+        if (this.selfDay[i] == currentDay) {
+          this.dayIndex = i;
+        }
+      }
+    }
+  },
+  computed: {
+    filterYear() {
+      return this.year.map(item => {
+        return item + "年";
+      });
+    },
+    filterMonth() {
+      return this.month.map(item => {
+        return item + "月";
+      });
+    },
+    filterDay() {
+      return this.selfDay.map(item => {
+        return item + "日";
+      });
+    }
+  },
+  methods: {
+    setMonths(year,month) {
+      let startYear = this.startDate.getFullYear();
+      let endYear = this.endDate.getFullYear();
+      let startMonth = this.startDate.getMonth() + 1;
+      let endMonth = this.endDate.getMonth() + 1;
+      let begin = 1;
+      let end = 12;
+      if (year == startYear) {
+        begin = Math.max(1, startMonth);
+      }
+      if (year == endYear) {
+        end = Math.min(12, endMonth);
+      }
+      var months = [];
+      for (let i = begin; i <= end; i++) {
+        months.push(i);
+      }
+      this.month = months;
+      let curIndex = month || this.monthIndex+1;
+      if(curIndex > end){
+        curIndex = end;
+      }
+      if(curIndex < begin){
+        curIndex = begin;
+      }
+      if (this.type.indexOf('D') !== -1) {       
+        this.setDays(year,curIndex);
+      }
+    },
+    setDays(year, month) {
+      const { begin, end } = this.getDaysByYearAndMonth(year, month);
+      var dayArray = [];
+
+      for (var i = begin; i <= end; i++) {
+        dayArray.push(i);
+      }
+
+      this.selfDay = dayArray;
+    },
+    getDaysByYearAndMonth: function(year, month) {
+      let startYear = this.startDate.getFullYear();
+      let endYear = this.endDate.getFullYear();
+      let startMonth = this.startDate.getMonth() + 1;
+      let endMonth = this.endDate.getMonth() + 1;
+      let startDay = this.startDate.getDate();
+      let endDay = this.endDate.getDate();
+
+      year = parseInt(year);
+      month = parseInt(month);
+      let begin = 1;
+      let end = 30;
+      if (year == startYear && month == startMonth) {
+        begin = Math.max(1, startDay);
+      }
+
+      if (month == 2) {
+        if ((year % 4 == 0 && year % 100 != 0) || year % 400 == 0) {
+          end = 29;
+        } else {
+          end = 28;
+        }
+      } else if (month == 4 || month == 6 || month == 9 || month == 11) {
+        end = 30;
+      } else {
+        end = 31;
+      }
+      if (year == endYear && month == endMonth) {
+        end = endDay;
+      }
+      return {
+        begin: begin,
+        end: end
+      };
+    },
+    changeYear: function(changeObj) {
+      // this.yearIndex = changeObj.index;
+      if(this.type.indexOf('M') !== -1){
+      this.setMonths(this.year[changeObj.index]);
+      }
+      
+    },
+    changeMonth(changeObj) {
+      //this.monthIndex = changeObj.index;
+      if (this.type == "MD" || this.type == "YMD") {
+        this.changeday(changeObj);
+      }
+    },
+    changeday: function(changeObj) {
+      // if (changeObj.type == "year") {
+      //   this.yearIndex = changeObj.index;
+      // }
+      // if (changeObj.type == "month") {
+      //   this.monthIndex = changeObj.index;
+      // }
+      // if (changeObj.type == "day") {
+      //   this.dayIndex = changeObj.index;
+      // }
+
+      // console.log(this.year[this.yearIndex]);
+      // console.log(this.month[this.monthIndex]);
+      // console.log(this.day[this.dayIndex]);
+      // this.selfDay = [1,2,3,4,5]
+      if (this.type == "YMD" || this.type == "MD") {
+        var curYear = this.value.getFullYear();
+
+        if (this.type == "YMD") {
+          curYear = this.year[this.yearIndex];
+        }
+        this.setDays(curYear, this.month[this.monthIndex]);
+        // const { begin, end } = this.getDaysByYearAndMonth(
+        //   curYear,
+        //   this.month[this.monthIndex]
+        // );
+        // var dayArray = [];
+
+        // for (var i = begin; i <= end; i++) {
+        //   dayArray.push(i);
+        // }
+
+        // this.selfDay = dayArray;
+        // this.dayIndex = 0;
+        // debugger;
+      }
+    },
+    cancelFn: function() {
+      this.$emit("update:visible", false);
+      this.$emit("cancel");
+    },
+    confirmFn: function() {
+     
+      var str = "";
+
+      if (this.year.length > 0) {
+        str = this.year[this.yearIndex];
+      }
+      if (this.month.length > 0) {
+        str = this.month[this.monthIndex];
+      }
+      if (this.selfDay.length > 0) {
+        str = this.selfDay[this.dayIndex];
+      }
+      if (this.minutes.length > 0) {
+        str = this.minutes[this.mIndex];
+      }
+      if (this.hours.length > 0) {
+        str = this.hours[this.hIndex];
+      }
+      if (this.year.length > 0 && this.month.length > 0) {
+        str = this.year[this.yearIndex] + "-" + this.month[this.monthIndex];
+      }
+
+      if (this.month.length > 0 && this.selfDay.length > 0) {
+        str = this.month[this.monthIndex] + "-" + this.selfDay[this.dayIndex];
+      }
+
+      if (
+        this.year.length > 0 &&
+        this.month.length > 0 &&
+        this.selfDay.length > 0
+      ) {
+        str =
+          this.year[this.yearIndex] +
+          "-" +
+          this.month[this.monthIndex] +
+          "-" +
+          this.selfDay[this.dayIndex];
+      }
+      if (this.minutes.length > 0) {
+        let day = this.upDown[this.dayIndex];
+        str = day+"-"+this.hours[this.hIndex] + "-" + this.minutes[this.mIndex];
+      }
+      this.$emit("input", new Date(str));
+      this.$emit("confirm", str);
+      this.$emit("update:visible", false);
+    }
+  }
+};
+</script>

package/src/components/default/index.js

@@ -0,0 +1,6 @@
+import Default from './src/default.vue';
+import "./index.scss";
+Default.install = function(Vue){
+    Vue.component(Default.name, Default);
+}
+export default Default;

package/src/components/default/index.scss

@@ -0,0 +1,25 @@
+.jdd-default {
+    
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding-top: 100px;
+    .jdd-default-img {
+        text-align: center;
+        margin-bottom: 10px;
+        img {
+            width: 110px;
+            height: 110px;
+        }
+       
+    }
+    p {
+        margin-bottom: 20px;
+        font-size: 14px;
+        font-family: PingFangSC-Regular, PingFang SC;
+        font-weight: 400;
+        color: rgba(102, 102, 102, 1);
+        line-height: 20px;
+        text-align: center;
+    }
+}

package/src/components/default/src/default.vue

@@ -0,0 +1,23 @@
+<template>
+  <div class="jdd-default">
+    <div class="jdd-default-img">
+      <img :src="imgUrl" alt="">
+    </div>
+    <p>{{text}}</p>
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "JddDefault",
+  props: {
+    imgUrl:{
+      type:String
+    },
+    text:{
+      type:String
+    }
+  }
+};
+</script>