gxd-uni-library-editx 1.0.0

package/src/components/XdDate/XdDateItem.vue

@@ -0,0 +1,316 @@
+<template>
+	<view
+    class="xd-calendar-item__weeks-box"
+    v-if="uiWeeks"
+    :class="{
+      'xd-calendar-item--disable':uiWeeks.disable,
+      'xd-calendar-item--isDay':calendar.fullDate === uiWeeks.fullDate && uiWeeks.isDay,
+      'xd-calendar-item--checked':(calendar.fullDate === uiWeeks.fullDate && !uiWeeks.isDay) ,
+      'xd-calendar-item--before-checked':uiWeeks.beforeMultiple,
+      'xd-calendar-item--multiple': uiWeeks.multiple,
+      'xd-calendar-item--after-checked':uiWeeks.afterMultiple,
+      'xd-calendar-item__ext': isExt
+		}"
+    :style="{
+      borderRadius: borderRadius + 'rpx',
+      background: (
+        (calendar.fullDate === uiWeeks.fullDate  && uiWeeks.isDay) ||
+        (calendar.fullDate === uiWeeks.fullDate && !uiWeeks.isDay) ||
+        uiWeeks.multiple
+       )
+       ? $mainColor: 'none'
+
+    }"
+	  @click="choiceDate(uiWeeks)"
+    @dblclick="dblChoiceDate(uiWeeks)"
+  >
+		<view
+      class="xd-calendar-item__weeks-box-item"
+      :class="{
+        'xd-calendar-item__ext-item': isExt
+      }"
+    >
+			<text v-if="selectedCircle && selected && uiWeeks.extraInfo" class="xd-calendar-item__weeks-box-circle"></text>
+      <!--日历-->
+      <view
+        class="xd-calendar-item__weeks-box-text"
+        :class="{
+          'xd-calendar-item--isDay-text': uiWeeks.isDay,
+          'xd-calendar-item--isDay':calendar.fullDate === uiWeeks.fullDate && uiWeeks.isDay,
+          'xd-calendar-item--checked':calendar.fullDate === uiWeeks.fullDate && !uiWeeks.isDay,
+          'xd-calendar-item--before-checked':uiWeeks.beforeMultiple,
+          'xd-calendar-item--multiple': uiWeeks.multiple,
+          'xd-calendar-item--after-checked':uiWeeks.afterMultiple,
+          'xd-calendar-item--disable':uiWeeks.disable,
+          'xd-calendar-item__ext-item-text': isExt
+				}"
+      >
+        <template v-if="currentIsShowOtherMonth">
+          {{uiWeeks.date}}
+        </template>
+        <template v-else>
+          {{nd.month === uiWeeks.month ? uiWeeks.date: ''}}
+        </template>
+      </view>
+      <!--日历 结束-->
+
+      <!--扩展信息-->
+      <template>
+        <!--无扩展信息-->
+        <view
+          v-if="!lunar&&!uiWeeks.extraInfo && uiWeeks.isDay"
+          class="xd-calendar-item__weeks-lunar-text"
+          :class="{
+            'xd-calendar-item--isDay-text':uiWeeks.isDay,
+            'xd-calendar-item--isDay':calendar.fullDate === uiWeeks.fullDate && uiWeeks.isDay,
+            'xd-calendar-item--checked':calendar.fullDate === uiWeeks.fullDate && !uiWeeks.isDay,
+            'xd-calendar-item--before-checked':uiWeeks.beforeMultiple,
+            'xd-calendar-item--multiple': uiWeeks.multiple,
+            'xd-calendar-item--after-checked':uiWeeks.afterMultiple,
+          }"
+        >今天</view>
+        <!--无扩展信息 结束-->
+        <!--显示农历-->
+        <view
+          v-if="lunar && !uiWeeks.extraInfo"
+          class="xd-calendar-item__weeks-lunar-text"
+          :class="{
+            'xd-calendar-item--isDay-text':uiWeeks.isDay,
+            'xd-calendar-item--isDay':calendar.fullDate === uiWeeks.fullDate && uiWeeks.isDay,
+            'xd-calendar-item--checked':calendar.fullDate === uiWeeks.fullDate && !uiWeeks.isDay,
+            'xd-calendar-item--before-checked':uiWeeks.beforeMultiple,
+            'xd-calendar-item--multiple': uiWeeks.multiple,
+            'xd-calendar-item--after-checked':uiWeeks.afterMultiple,
+            'xd-calendar-item--disable':uiWeeks.disable,
+           }"
+        >{{uiWeeks.isDay?'今天': (uiWeeks.lunar.IDayCn === '初一'?uiWeeks.lunar.IMonthCn:uiWeeks.lunar.IDayCn)}}
+        </view>
+        <!--显示农历 结束-->
+        <!--有扩展信息-->
+        <view
+          v-if="uiWeeks.extraInfo&&uiWeeks.extraInfo.info"
+          class="xd-calendar-item__weeks-lunar-text"
+          :class="{
+            'xd-calendar-item--extra':uiWeeks.extraInfo.info,
+            'xd-calendar-item--isDay-text':uiWeeks.isDay,
+            'xd-calendar-item--isDay':calendar.fullDate === uiWeeks.fullDate && uiWeeks.isDay,
+            'xd-calendar-item--checked':calendar.fullDate === uiWeeks.fullDate && !uiWeeks.isDay,
+            'xd-calendar-item--before-checked':uiWeeks.beforeMultiple,
+            'xd-calendar-item--multiple': uiWeeks.multiple,
+            'xd-calendar-item--after-checked':uiWeeks.afterMultiple,
+            'xd-calendar-item--disable':uiWeeks.disable,
+				  }"
+        >
+          <template v-if="uiWeeks.extraInfo.showType=== 'unit'">
+            <xd-unit
+              :price="uiWeeks.extraInfo.info"
+              :font-size="26"
+              :font-weight="(calendar.fullDate === uiWeeks.fullDate) ? 'bold': 'normal'"
+              :icon-size=".25"
+              :color="
+              (calendar.fullDate === uiWeeks.fullDate && !uiWeeks.isDay
+              || calendar.fullDate === uiWeeks.fullDate && uiWeeks.isDay)
+               ? '#fff': 'red'"
+            ></xd-unit>
+          </template>
+          <template v-else>{{uiWeeks.extraInfo.info}}</template>
+         </view>
+        <!--有扩展信息 结束-->
+      </template>
+      <!--扩展信息 结束-->
+		</view>
+	</view>
+</template>
+
+<script>
+  import XdUnit from "@/components/XdUnit/XdUnit";
+	export default {
+	  name: 'XdDateItem',
+    components:{
+	    XdUnit
+    },
+		props: {
+			weeks: {
+				type: Object,
+				default () {
+					return {}
+				}
+			},
+      borderRadius:{
+			  type: Number|String,
+        default: 15, //rpx
+      },
+
+			calendar: {
+				type: Object,
+				default: () => {
+					return {}
+				}
+			},
+      selectedCircle: {
+        ype: Boolean,
+        default: true
+      },
+			selected: {
+				type: Array,
+				default: () => {
+					return []
+				}
+			},
+			lunar: {
+				type: Boolean,
+				default: false
+			},
+      nowDate: {
+        type: Object | String | null,
+        default: ''
+      },
+      //是否补全当月以外的其他月时间
+      currentIsShowOtherMonth: {
+        type: Boolean,
+        default: true
+      },
+
+		},
+    data(){
+	    return {
+	      uiWeeks: null,
+        isExt: false,
+        nd: {},
+      }
+    },
+    created(){
+      if (this.nowDate) this.nd = this.nowDate;
+      this.initDate();
+    },
+    watch:{
+      weeks(value){
+        this.initDate();
+      },
+      nowDate(val) {
+        if (val) this.nd = val;
+        console.log('nowDate', val, this.uiWeeks);
+      }
+    },
+		methods: {
+	    initDate(){
+	      if(this.weeks.extraInfo)console.log('extraInfo',this.weeks)
+	      if(!this.weeks.extraInfo) this.uiWeeks = this.$xdUniHelper.cloneDeep(this.weeks);
+	      else {
+	        let weeks = this.$xdUniHelper.cloneDeep(this.weeks);
+          if(weeks.extraInfo.disable) {
+            weeks.disable = true;
+          }
+          this.uiWeeks = weeks;
+        }
+      },
+
+			choiceDate(weeks) {
+				this.$emit('change', weeks, false)
+			},
+
+      dblChoiceDate(weeks){
+	      console.log('dblChoiceDate')
+        this.$emit('dblchange', weeks, true)
+      }
+		},
+	}
+</script>
+
+<style lang="less">
+  @xd-calendar-item : xd-calendar-item;
+
+	.@{xd-calendar-item}__weeks-box {
+		flex: 1;
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: column;
+		justify-content: flex-start;
+		align-items: center;
+    width: 100%;
+    height: unit(100, rpx);
+	}
+
+	.@{xd-calendar-item}__weeks-box-text {
+		font-size: @xd-font-size-base;
+    color: #111;
+	}
+
+
+	.@{xd-calendar-item}__weeks-lunar-text {
+		font-size: @xd-font-size-sm;
+		color: #111;
+	}
+
+	.@{xd-calendar-item}__weeks-box-item {
+		position: relative;
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: column;
+    justify-content: center;
+		align-items: center;
+    height: 100%;
+
+	}
+
+	.@{xd-calendar-item}__weeks-box-circle {
+		position: absolute;
+		top: unit(10, rpx);
+		right: unit(10, rpx);
+		width: unit(16, rpx);
+		height: unit(16, rpx);
+		border-radius: unit(16, rpx);
+	}
+
+	.@{xd-calendar-item}--disable {
+		background-color: rgba(249, 249, 249, @xd-opacity-disabled);
+		color: @xd-text-color-disable;
+	}
+
+	.@{xd-calendar-item}--isDay-text {
+		color: @xd-color-primary;
+	}
+
+	.@{xd-calendar-item}--isDay {
+		opacity: 0.8;
+		color: #fff;
+	}
+
+	.@{xd-calendar-item}--extra {
+		opacity: 0.8;
+	}
+
+	.@{xd-calendar-item}--checked {
+		color: #fff;
+		opacity: 0.8;
+    border-radius: unit(15,rpx);
+	}
+
+	.@{xd-calendar-item}--multiple {
+		color: #fff;
+		opacity: 0.8;
+	}
+	.@{xd-calendar-item}--before-checked {
+		background-color: #ff5a5f;
+		color: #fff;
+	}
+	.@{xd-calendar-item}--after-checked {
+		background-color: #ff5a5f;
+		color: #fff;
+	}
+
+  .xd-calendar-item {
+    &__ext {
+      justify-content: flex-start;
+      &-item {
+        justify-content: flex-start;
+        &-text {
+          padding-top: unit(10,rpx);
+        }
+      }
+    }
+  }
+
+</style>