@10yun/cv-mobile-ui 0.5.62 → 0.5.63

package/ui-fireui/components/u-calendar/u-calendar.vue

@@ -1,8 +1,8 @@
 <template>
-  <view>
-    <view :class="{ 'up-bottom-popup': isFixed, 'up-popup-show': isShow && isFixed }">
-      <view class="up-calendar-header" :class="{ 'up-calendar-radius': radius }" @touchmove.stop.prevent="stop" v-if="isFixed">
-        <view>日期选择</view>
+  <view @touchmove.stop.prevent="stop" v-if="isFixed">
+    <view class="up-bottom-popup" :class="{ 'up-popup-show': isShow }">
+      <view class="up-calendar-header" :class="{ 'up-calendar-radius': radius }">
+        <view>{{ title }}</view>
         <view class="up-iconfont up-font-close" hover-class="up-opacity" :hover-stay-time="150" @tap="hide"></view>
       </view>
 
@@ -100,35 +100,123 @@
         <view class="up-bg-month">{{ month }}</view>
       </view>
 
-      <view class="up-calendar-op" v-if="isFixed" @touchmove.stop.prevent="stop">
+      <view class="up-calendar-op">
         <view class="up-calendar-result">
           <text>{{ type == 1 ? activeDate : startDate }}</text>
           <text v-if="endDate">至{{ endDate }}</text>
         </view>
         <view class="up-calendar-btn_box">
-          <up-button :type="btnType" height="72rpx" shape="circle" :size="28" @click="btnFix(false)">确定</up-button>
+          <view
+            :style="{ background: getBtnBgColor }"
+            @tap.stop="btnFix(false)"
+            class="up-btn__confirm"
+            :class="{ 'up-btn__disabled': disabled, 'up-btn__confirm-hover': !disabled }"
+          >
+            确定
+          </view>
         </view>
       </view>
     </view>
 
-    <view
-      class="up-popup-mask"
-      :class="[isShow ? 'up-mask-show' : '']"
-      @touchmove.stop.prevent="stop"
-      v-if="isFixed"
-      @tap="hide"
-    ></view>
+    <view class="up-popup-mask" :class="[isShow ? 'up-mask-show' : '']" @tap="hide"></view>
+  </view>
+  <view v-else>
+    <view class="up-date-box">
+      <view
+        class="up-iconfont up-font-arrowleft"
+        :style="{ color: yearArrowColor }"
+        hover-class="up-opacity"
+        :hover-stay-time="150"
+        v-if="arrowType == 1"
+        @tap="changeYear(0)"
+      ></view>
+      <view
+        class="up-iconfont up-font-arrowleft"
+        :style="{ color: monthArrowColor }"
+        hover-class="up-opacity"
+        :hover-stay-time="150"
+        @tap="changeMonth(0)"
+      ></view>
+      <view class="up-date_time">{{ showTitle }}</view>
+      <view
+        class="up-iconfont up-font-arrowright"
+        :style="{ color: monthArrowColor }"
+        hover-class="up-opacity"
+        :hover-stay-time="150"
+        @tap="changeMonth(1)"
+      ></view>
+      <view
+        class="up-iconfont up-font-arrowright"
+        :style="{ color: yearArrowColor }"
+        hover-class="up-opacity"
+        :hover-stay-time="150"
+        v-if="arrowType == 1"
+        @tap="changeYear(1)"
+      ></view>
+    </view>
+    <view class="up-date-header">
+      <view class="up-date">日</view>
+      <view class="up-date">一</view>
+      <view class="up-date">二</view>
+      <view class="up-date">三</view>
+      <view class="up-date">四</view>
+      <view class="up-date">五</view>
+      <view class="up-date">六</view>
+    </view>
+    <view class="up-date-content" :style="{ height: isFixed && fixedHeight ? dateHeight * 6 + 'px' : 'auto' }">
+      <block v-for="(item, index) in weekdayArr" :key="index">
+        <view class="up-date"></view>
+      </block>
+      <view
+        class="up-date"
+        :class="{
+          'up-date-pd_0': isFixed && fixedHeight,
+          'up-opacity': openDisAbled(year, month, index + 1),
+          'up-start-date': (type == 2 && startDate == `${year}-${month}-${index + 1}`) || type == 1,
+          'up-end-date': (type == 2 && endDate == `${year}-${month}-${index + 1}`) || type == 1
+        }"
+        :style="{
+          backgroundColor: isFixed ? getColor(index, 1) : 'transparent',
+          height: isFixed && fixedHeight ? dateHeight + 'px' : 'auto'
+        }"
+        v-for="(item, index) in daysArr"
+        :key="index"
+        @tap="dateClick(index)"
+      >
+        <view
+          class="up-date-text"
+          :style="{ color: isFixed ? getColor(index, 2) : getStatusData(3, index), backgroundColor: getStatusData(2, index) }"
+        >
+          <view v-if="isFixed || !getStatusData(4, index)">{{ index + 1 }}</view>
+          <view v-if="!getStatusData(4, index)" class="up-custom-desc" :class="{ 'up-lunar-unshow': !lunar && isFixed }">
+            {{ getDescText(index, startDate, endDate) }}
+          </view>
+          <text class="up-iconfont up-font-check" v-if="getStatusData(4, index)"></text>
+        </view>
+        <view
+          class="up-date-desc"
+          :style="{ color: activeColor }"
+          v-if="!lunar && type == 2 && startDate == `${year}-${month}-${index + 1}` && startDate != endDate"
+        >
+          {{ startText }}
+        </view>
+        <view
+          class="up-date-desc"
+          :style="{ color: activeColor }"
+          v-if="!lunar && type == 2 && endDate == `${year}-${month}-${index + 1}`"
+        >
+          {{ endText }}
+        </view>
+      </view>
+      <view class="up-bg-month">{{ month }}</view>
+    </view>
   </view>
 </template>
 <script>
-//easycom组件模式 无需手动引入
-// import fuiButton from "../up-button/up-button"
 import calendar from './up-calendar.js';
 export default {
-  name: 'fuiCalendar',
-  // components:{
-  // 	fuiButton
-  // },
+  name: 'tuiCalendar',
+  emits: ['hide', 'change'],
   props: {
     //1-切换月份和年份 2-切换月份
     arrowType: {
@@ -164,6 +252,10 @@ export default {
       type: String,
       default: ''
     },
+    title: {
+      type: String,
+      default: '日期选择'
+    },
     //显示圆角
     radius: {
       type: Boolean,
@@ -171,16 +263,16 @@ export default {
     },
     //状态 数据顺序与当月天数一致，index=>day
     /**
-				 * [{
-					 * text:"", 描述：2字以内
-					 * value:"",状态值 
-					 * bgColor:"",背景色
-					 * color:""  文字颜色,
-					 * check:false //是否显示对勾
-					 * 
-				 }]
-				 * 
-				 * **/
+					 * [{
+						 * text:"", 描述：2字以内
+						 * value:"",状态值
+						 * bgColor:"",背景色
+						 * color:""  文字颜色,
+						 * check:false //是否显示对勾
+						 *
+					 }]
+					 *
+					 * **/
     status: {
       type: Array,
       default() {
@@ -205,7 +297,7 @@ export default {
     //选中|起始结束日期背景色
     activeBgColor: {
       type: String,
-      default: '#5677fc'
+      default: ''
     },
     //选中|起始结束日期字体颜色
     activeColor: {
@@ -220,7 +312,7 @@ export default {
     //范围内日期字体颜色
     rangeColor: {
       type: String,
-      default: '#5677fc'
+      default: ''
     },
     //type=2时生效，起始日期自定义文案
     startText: {
@@ -232,10 +324,10 @@ export default {
       type: String,
       default: '结束'
     },
-    //按钮样式类型
-    btnType: {
+    //按钮背景色 V2.3.0+
+    btnBgColor: {
       type: String,
-      default: 'primary'
+      default: ''
     },
     //固定在底部
     isFixed: {
@@ -261,6 +353,16 @@ export default {
     lunar: {
       type: Boolean,
       default: false
+    },
+    //初始化起始选中日期 格式： 2020-06-06 或 2020/06/06 【type=1 or 2】
+    initStartDate: {
+      type: [String, Array],
+      default: ''
+    },
+    //初始化结束日期 格式： 2020-06-06 或 2020/06/06【type=2】
+    initEndDate: {
+      type: String,
+      default: ''
     }
   },
   data() {
@@ -292,7 +394,19 @@ export default {
   },
   computed: {
     dataChange() {
-      return `${this.type}-${this.minDate}-${this.maxDate}`;
+      return `${this.type}-${this.minDate}-${this.maxDate}-${this.initStartDate}-${this.initEndDate}`;
+    },
+    disabled() {
+      return this.type == 2 && (!this.startDate || !this.endDate);
+    },
+    getActiveBgColor() {
+      return this.activeBgColor || (uni && uni.$tui && uni.$tui.color.primary) || '#5677fc';
+    },
+    getBtnBgColor() {
+      return this.btnBgColor || (uni && uni.$tui && uni.$tui.color.primary) || '#5677fc';
+    },
+    getRangeColor() {
+      return this.rangeColor || (uni && uni.$tui && uni.$tui.color.primary) || '#5677fc';
     }
   },
   watch: {
@@ -317,9 +431,9 @@ export default {
       let start = this.startDate.replace(/\-/g, '/');
       let end = this.endDate.replace(/\-/g, '/');
       if ((this.isActiveCurrent && this.activeDate == date) || this.startDate == date || this.endDate == date) {
-        color = type == 1 ? this.activeBgColor : this.activeColor;
+        color = type == 1 ? this.getActiveBgColor : this.activeColor;
       } else if (this.endDate && timestamp > new Date(start).getTime() && timestamp < new Date(end).getTime()) {
-        color = type == 1 ? this.rangeBgColor : this.rangeColor;
+        color = type == 1 ? this.rangeBgColor : this.getRangeColor;
       }
       return color;
     },
@@ -387,14 +501,47 @@ export default {
       this.activeDate = this.today;
       this.min = this.initDate(this.minDate);
       this.max = this.initDate(this.maxDate || this.today);
+      if (this.openDisAbled(this.year, this.month, this.day)) {
+        this.year = this.max.year;
+        this.month = this.max.month;
+        this.day = this.max.day;
+        this.activeDate = `${this.max.year}-${this.max.month}-${this.max.day}`;
+        this.max = this.initDate(this.maxDate || this.minDate);
+      }
       this.startDate = '';
       this.startYear = 0;
       this.startMonth = 0;
       this.startDay = 0;
+      if (this.initStartDate) {
+        let start = new Date(this.initStartDate.replace(/\-/g, '/'));
+        if (this.type == 1) {
+          this.year = start.getFullYear();
+          this.month = start.getMonth() + 1;
+          this.day = start.getDate();
+          this.activeDate = `${start.getFullYear()}-${start.getMonth() + 1}-${start.getDate()}`;
+        } else {
+          this.startDate = `${start.getFullYear()}-${start.getMonth() + 1}-${start.getDate()}`;
+          this.startYear = start.getFullYear();
+          this.startMonth = start.getMonth() + 1;
+          this.startDay = start.getDate();
+          this.activeDate = '';
+        }
+      }
       this.endYear = 0;
       this.endMonth = 0;
       this.endDay = 0;
       this.endDate = '';
+      if (this.initEndDate && this.type == 2) {
+        let end = new Date(this.initEndDate.replace(/\-/g, '/'));
+        this.endDate = `${end.getFullYear()}-${end.getMonth() + 1}-${end.getDate()}`;
+        this.endYear = end.getFullYear();
+        this.endMonth = end.getMonth() + 1;
+        this.endDay = end.getDate();
+        this.activeDate = '';
+        this.year = end.getFullYear();
+        this.month = end.getMonth() + 1;
+        this.day = end.getDate();
+      }
       this.isStart = true;
       this.changeData();
     },
@@ -407,7 +554,7 @@ export default {
         day: Number(fdate[2] || 1)
       };
     },
-    openDisAbled(year, month, day) {
+    openDisAbled: function (year, month, day) {
       let bool = true;
       let date = `${year}/${month}/${day}`;
       // let today = this.today.replace(/\-/g, '/');
@@ -419,14 +566,14 @@ export default {
       }
       return bool;
     },
-    generateArray(start, end) {
+    generateArray: function (start, end) {
       return Array.from(new Array(end + 1).keys()).slice(start);
     },
-    formatNum(num) {
+    formatNum: function (num) {
       return num < 10 ? '0' + num : num + '';
     },
     stop() {
-      return !this.isFixed;
+      return false;
     },
     //一个月有多少天
     getMonthDay(year, month) {
@@ -484,7 +631,7 @@ export default {
         this.btnFix(true);
       }
     },
-    dateClick(day) {
+    dateClick: function (day) {
       day += 1;
       if (!this.openDisAbled(this.year, this.month, day)) {
         this.day = day;
@@ -522,6 +669,7 @@ export default {
     },
     hide() {
       this.isShow = false;
+      this.$emit('hide', {});
     },
     getWeekText(date) {
       date = new Date(`${date.replace(/\-/g, '/')} 00:00:00`);
@@ -530,6 +678,7 @@ export default {
     },
     btnFix(show) {
       if (!show) {
+        if (this.disabled) return;
         this.hide();
       }
       if (this.type == 1) {
@@ -593,7 +742,7 @@ export default {
 
 <style scoped>
 @font-face {
-  font-family: 'fuiDateFont';
+  font-family: 'tuiDateFont';
   src: url(data:application/font-woff;charset=utf-8;base64,d09GRgABAAAAAAVgAA0AAAAACAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAFRAAAABoAAAAci0/w50dERUYAAAUkAAAAHgAAAB4AKQANT1MvMgAAAaAAAABDAAAAVjxuSNNjbWFwAAAB+AAAAEoAAAFS5iPQt2dhc3AAAAUcAAAACAAAAAj//wADZ2x5ZgAAAlQAAAFHAAABvPf29TBoZWFkAAABMAAAADAAAAA2GMsN3WhoZWEAAAFgAAAAHQAAACQHjAOFaG10eAAAAeQAAAATAAAAFgzQAPJsb2NhAAACRAAAABAAAAAQAOoBSG1heHAAAAGAAAAAHgAAACABEwA3bmFtZQAAA5wAAAFJAAACiCnmEVVwb3N0AAAE6AAAADQAAABLUwjqHHjaY2BkYGAAYp5Gj5/x/DZfGbhZGEDg1tUn7+F00P/LzOuY9YFcDgYmkCgAa0gNlHjaY2BkYGBu+N/AEMPCAALM6xgYGVABCwBT4AMaAAAAeNpjYGRgYGBn0GZgYgABEMkFhAwM/8F8BgANaAFLAAB42mNgZGFgnMDAysDA1Ml0hoGBoR9CM75mMGLkAIoysDIzYAUBaa4pDA7PGJ49ZG7438AQw9zA0AAUZgTJAQDrcAy8AHjaY2GAABYIDgLCBQx1AAcEAc8AeNpjYGBgZoBgGQZGBhDwAfIYwXwWBgMgzQGETAwMzxifcTx7+P8/kMUAYUkxS/6VVIXqAgNGNgY4lxGoB6QPBTAyDHsAADDkDYkAAAAAAAAAAAAAADQAagC2AN542m2QsU7DMBCG/Tt1bNPUiUnkSgiVtqKpxJAgVLVbeAa6MaK+B4JXgJWBjY21UtW5gpkdMTFX7dzApaJLhXU6n8+n//ttxtn458N79XJWZ8eMxS00C4wy9A1EP8PQncAlIQzS4WgsVtPpSmwzV3OFRqLetH5TSQMK939X61ptPZ2p2EAttNMLBRMrtschQblDeS34aY50cIkCzg/B2Y5C+VpyQxhFkRgu515O8jvU5mmPM2O0wJ5Z27vhX+yMsV437WvCdTM+GI40MgwKfuGammC0uURqeqFMfe9cxaJclkt5GMaB1hIR1VobOgpEiKq+sLZcIrJWhO3/Jw7qWlYj1Jf21FaCtmd5bevrlk28O/7A4spXTl4KTh9MTlqQ8PESBRstReic+sRj0Dni9fIqmNS/pXNWCvWOeYBmx5S9Bsn9Ah+5WtAAeNp9kD1OAzEQhZ/zByQSQiCoXVEA2vyUKRMp9Ailo0g23pBo1155nUg5AS0VB6DlGByAGyDRcgpelkmTImvt6PObmeexAZzjGwr/3yXuhBWO8ShcwREy4Sr1F+Ea+V24jhY+hRvUf4SbuFUD4RYu1BsdVO2Eu5vSbcsKZxgIV3CKJ+Eq9ZVwjfwqXMcVPoQb1L+EmxjjV7iFa2WpDOFhMEFgnEFjig3jAjEcLJIyBtahOfRmEsxMTzd6ETubOBso71dilwMeaDnngCntPbdmvkon/mDLgdSYbh4FS7YpjS4idCgbXyyc1d2oc7D9nu22tNi/a4E1x+xRDWzU/D3bM9JIbAyvkJI18jK3pBJTj2hrrPG7ZynW814IiU68y/SIx5o0dTr3bmniwOLn8owcfbS5kj33qBw+Y1kIeb/dTsQgil2GP5PYcRkAAAB42mNgYoAALjDJyIAO2MGiTIxMjMyMLIys7GmJeRmlmWZQ2pQ5OSORLaU0Mz2/FACDfwlbAAAAAf//AAIAAQAAAAwAAAAWAAAAAgABAAMABgABAAQAAAACAAAAAHjaY2BgYGQAgqtL1DlA9K2rT97DaABNlwiuAAA=)
     format('woff');
   font-weight: normal;
@@ -601,7 +750,7 @@ export default {
 }
 
 .up-iconfont {
-  font-family: 'fuiDateFont' !important;
+  font-family: 'tuiDateFont' !important;
   font-size: 36rpx;
   font-style: normal;
   -webkit-font-smoothing: antialiased;
@@ -865,4 +1014,38 @@ export default {
 .up-calendar-btn_box {
   width: 100%;
 }
+
+.up-btn__confirm {
+  width: 100%;
+  height: 72rpx;
+  border-radius: 72rpx;
+  font-size: 28rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  /* #ifdef H5 */
+  cursor: pointer;
+  /* #endif */
+  color: #fff;
+  position: relative;
+}
+
+.up-btn__confirm-hover:active::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 72rpx;
+  background: rgba(0, 0, 0, 0.2);
+  border-radius: 72rpx;
+  pointer-events: none;
+}
+
+.up-btn__disabled {
+  opacity: 0.5;
+  /* #ifdef H5 */
+  cursor: not-allowed;
+  /* #endif */
+}
 </style>