wl-design-mobile 0.0.1 → 0.0.2

package/search/lambo-date-range-page.vue

@@ -1,191 +1,191 @@
-<template>
-  <div class="time-div">
-    <div class="left" @click="onOpen">
-      <p class="time">{{ startDate }}</p>
-    </div>
-    <div class="middle" @click="replace">
-      <img class="img" :src="imgSrc"/>
-      <p class="nav"><img class="rest-img" :src="imgResetSrc">重置</p>
-    </div>
-    <div class="right" @click="onOpen">
-      <p class="time">{{ endDate }}</p>
-    </div>
-    <van-calendar v-model:show="showBottom" :default-date="defaultDateArr" :min-date="minDate" :max-date="maxDate"
-                  type="range" :style="{ maxHeight: '65%' }" color="#0070D2" @confirm="onConfirm"/>
-  </div>
-</template>
-<script>
-import time from '../assets/icon/interval/time.png'
-import reset from '../assets/icon/interval/reset.png'
-import moment from 'moment'
-import { deepCopy } from '@/libs/assist'
-
-export default {
-  name: "LamboDateRangePage",
-  props: {
-    defaultDate: {
-      type: Array,
-      default: () => []
-    },
-  },
-  data() {
-    return {
-      imgSrc: time,
-      imgResetSrc: reset,
-      showBottom: false,
-      selectItem: {
-        date: [],
-        date8: []
-      },
-      startDate: '',
-      endDate: '',
-      defaultDateArr: [],
-      minDate: new Date((new Date()).getFullYear() - 1, (new Date()).getMonth() + 1, (new Date()).getDate()),
-      maxDate: new Date((new Date()).getFullYear() + 1, (new Date()).getMonth() + 1, (new Date()).getDate()),
-      replaceDate: [],
-    }
-  },
-  created() {
-    this.initDefaultVal()
-  },
-  methods: {
-    initDefaultVal() {
-      if (this.defaultDate && Array.isArray(this.defaultDate) && this.defaultDate.length === 2) {
-        let defDateArr = this.defaultDate
-        this.replaceDate = this.defaultDate
-        if (defDateArr && defDateArr.length === 2 && defDateArr[0] && defDateArr[1]) {
-          this.selectItem.date8 = deepCopy(defDateArr)
-
-          let startDate8 = defDateArr[0]
-          let endDate8 = defDateArr[1]
-          let startDateFormat = moment(startDate8).format('yyyy-MM-DD') || ''
-          let endDateFormat = moment(endDate8).format('yyyy-MM-DD') || ''
-          this.selectItem.date[0] = startDateFormat
-          this.selectItem.date[1] = endDateFormat
-          this.startDate = startDateFormat
-          this.endDate = endDateFormat
-
-          let startDateObj = moment(startDate8).toDate()
-          let endDateObj = moment(endDate8).toDate()
-          this.defaultDateArr = [startDateObj, endDateObj]
-        }
-      }
-    },
-    onOpen() {
-      this.showBottom = true
-    },
-    onConfirm(time) {
-      console.log(" onConfirm time:", time)
-      if (Array.isArray(time)) {
-        if (time.length === 2) {
-          let startDate1 = moment(time[0]).format("yyyyMMDD") || ''
-          let endDate1 = moment(time[1]).format("yyyyMMDD") || ''
-          let startDateFormat = moment(time[0]).format('yyyy-MM-DD') || ''
-          let endDateFormat = moment(time[1]).format('yyyy-MM-DD') || ''
-
-          if (startDate1 && endDate1) {
-            this.selectItem.date8 = [startDate1, endDate1]
-            this.selectItem.date = [startDateFormat, endDateFormat]
-            this.startDate = startDateFormat
-            this.endDate = endDateFormat
-            this.$emit("on-ok", this.selectItem)
-          }
-        }
-      }
-      this.showBottom = false
-    },
-    replace() {
-      if (this.replaceDate && Array.isArray(this.replaceDate) && this.replaceDate.length === 2) {
-        let defDateArr = this.replaceDate
-        this.replaceDate = this.replaceDate
-        if (defDateArr && defDateArr.length === 2 && defDateArr[0] && defDateArr[1]) {
-          this.selectItem.date8 = deepCopy(defDateArr)
-
-          let startDate8 = defDateArr[0]
-          let endDate8 = defDateArr[1]
-          let startDateFormat = moment(startDate8).format("yyyy-MM-DD") || ''
-          let endDateFormat = moment(endDate8).format("yyyy-MM-DD") || ''
-          this.selectItem.date[0] = startDateFormat
-          this.selectItem.date[1] = endDateFormat
-          this.startDate = startDateFormat
-          this.endDate = endDateFormat
-
-          let startDateObj = moment(startDate8).toDate()
-          let endDateObj = moment(endDate8).toDate()
-          this.defaultDateArr = [startDateObj, endDateObj]
-
-          this.$emit("on-ok", this.selectItem)
-        }
-      }
-
-    }
-  }
-}
-</script>
-<style scoped>
-@import "../styles/index.less";
-
-.time-div {
-  height: 72px;
-  background-color: var(--scl-white-1);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 14px;
-}
-
-.left {
-  width: 37.5%;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  justify-content: center;
-  padding-left: 14px;
-  text-align: left;
-}
-
-.right {
-  width: 37.5%;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  align-items: flex-end;
-  justify-content: center;
-  padding-right: 14px;
-  text-align: right;
-}
-
-.middle {
-  width: 25%;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-}
-
-.time {
-  font-size: 14px;
-  color: var(--scl-gray-1);
-}
-
-.nav {
-  font-size: 11px;
-  color: var(--scl-blue);
-  margin-top: 3px;
-}
-
-.img {
-  width: 100%;
-  height: auto;
-  margin-top: 15px;
-}
-
-.rest-img {
-  width: 15%;
-  height: auto;
-  margin-left: 10px;
-  margin-right: 2px;
-}
-</style>
+<template>
+  <div class="time-div">
+    <div class="left" @click="onOpen">
+      <p class="time">{{ startDate }}</p>
+    </div>
+    <div class="middle" @click="replace">
+      <img class="img" :src="imgSrc"/>
+      <p class="nav"><img class="rest-img" :src="imgResetSrc">重置</p>
+    </div>
+    <div class="right" @click="onOpen">
+      <p class="time">{{ endDate }}</p>
+    </div>
+    <van-calendar v-model:show="showBottom" :default-date="defaultDateArr" :min-date="minDate" :max-date="maxDate"
+                  type="range" :style="{ maxHeight: '65%' }" color="#0070D2" @confirm="onConfirm"/>
+  </div>
+</template>
+<script>
+import time from '../assets/icon/interval/time.png'
+import reset from '../assets/icon/interval/reset.png'
+import moment from 'moment'
+import {deepCopy} from '../util/assist'
+
+export default {
+  name: "LamboDateRangePage",
+  props: {
+    defaultDate: {
+      type: Array,
+      default: () => []
+    },
+  },
+  data() {
+    return {
+      imgSrc: time,
+      imgResetSrc: reset,
+      showBottom: false,
+      selectItem: {
+        date: [],
+        date8: []
+      },
+      startDate: '',
+      endDate: '',
+      defaultDateArr: [],
+      minDate: new Date((new Date()).getFullYear() - 1, (new Date()).getMonth() + 1, (new Date()).getDate()),
+      maxDate: new Date((new Date()).getFullYear() + 1, (new Date()).getMonth() + 1, (new Date()).getDate()),
+      replaceDate: [],
+    }
+  },
+  created() {
+    this.initDefaultVal()
+  },
+  methods: {
+    initDefaultVal() {
+      if (this.defaultDate && Array.isArray(this.defaultDate) && this.defaultDate.length === 2) {
+        let defDateArr = this.defaultDate
+        this.replaceDate = this.defaultDate
+        if (defDateArr && defDateArr.length === 2 && defDateArr[0] && defDateArr[1]) {
+          this.selectItem.date8 = deepCopy(defDateArr)
+
+          let startDate8 = defDateArr[0]
+          let endDate8 = defDateArr[1]
+          let startDateFormat = moment(startDate8).format('yyyy-MM-DD') || ''
+          let endDateFormat = moment(endDate8).format('yyyy-MM-DD') || ''
+          this.selectItem.date[0] = startDateFormat
+          this.selectItem.date[1] = endDateFormat
+          this.startDate = startDateFormat
+          this.endDate = endDateFormat
+
+          let startDateObj = moment(startDate8).toDate()
+          let endDateObj = moment(endDate8).toDate()
+          this.defaultDateArr = [startDateObj, endDateObj]
+        }
+      }
+    },
+    onOpen() {
+      this.showBottom = true
+    },
+    onConfirm(time) {
+      console.log(" onConfirm time:", time)
+      if (Array.isArray(time)) {
+        if (time.length === 2) {
+          let startDate1 = moment(time[0]).format("yyyyMMDD") || ''
+          let endDate1 = moment(time[1]).format("yyyyMMDD") || ''
+          let startDateFormat = moment(time[0]).format('yyyy-MM-DD') || ''
+          let endDateFormat = moment(time[1]).format('yyyy-MM-DD') || ''
+
+          if (startDate1 && endDate1) {
+            this.selectItem.date8 = [startDate1, endDate1]
+            this.selectItem.date = [startDateFormat, endDateFormat]
+            this.startDate = startDateFormat
+            this.endDate = endDateFormat
+            this.$emit("on-ok", this.selectItem)
+          }
+        }
+      }
+      this.showBottom = false
+    },
+    replace() {
+      if (this.replaceDate && Array.isArray(this.replaceDate) && this.replaceDate.length === 2) {
+        let defDateArr = this.replaceDate
+        this.replaceDate = this.replaceDate
+        if (defDateArr && defDateArr.length === 2 && defDateArr[0] && defDateArr[1]) {
+          this.selectItem.date8 = deepCopy(defDateArr)
+
+          let startDate8 = defDateArr[0]
+          let endDate8 = defDateArr[1]
+          let startDateFormat = moment(startDate8).format("yyyy-MM-DD") || ''
+          let endDateFormat = moment(endDate8).format("yyyy-MM-DD") || ''
+          this.selectItem.date[0] = startDateFormat
+          this.selectItem.date[1] = endDateFormat
+          this.startDate = startDateFormat
+          this.endDate = endDateFormat
+
+          let startDateObj = moment(startDate8).toDate()
+          let endDateObj = moment(endDate8).toDate()
+          this.defaultDateArr = [startDateObj, endDateObj]
+
+          this.$emit("on-ok", this.selectItem)
+        }
+      }
+
+    }
+  }
+}
+</script>
+<style scoped>
+@import "../styles/index.less";
+
+.time-div {
+  height: 72px;
+  background-color: var(--scl-white-1);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 14px;
+}
+
+.left {
+  width: 37.5%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+  padding-left: 14px;
+  text-align: left;
+}
+
+.right {
+  width: 37.5%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  justify-content: center;
+  padding-right: 14px;
+  text-align: right;
+}
+
+.middle {
+  width: 25%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.time {
+  font-size: 14px;
+  color: var(--scl-gray-1);
+}
+
+.nav {
+  font-size: 11px;
+  color: var(--scl-blue);
+  margin-top: 3px;
+}
+
+.img {
+  width: 100%;
+  height: auto;
+  margin-top: 15px;
+}
+
+.rest-img {
+  width: 15%;
+  height: auto;
+  margin-left: 10px;
+  margin-right: 2px;
+}
+</style>

package/search/lambo-date-range.vue

@@ -1,107 +1,107 @@
-<template>
-  <div>
-    <div class="search-row">
-      <!-- 必选的红色星号 -->
-      <lambo-required-red-star :required="required"></lambo-required-red-star>
-      <!-- 时间框的名字段 -->
-      <div class="search-input-title">{{ title }}</div>
-      <div class="search-lambo-input">{{ dateStr }}</div>
-      <lambo-vector-icon :icon="icon" @click="onOpen"></lambo-vector-icon>
-    </div>
-    <div>
-      <van-calendar v-model:show="showBottom" :default-date="defaultDateArr" :min-date="minDate" :max-date="maxDate" type="range"
-                    :style="{ maxHeight: '65%' }" color="#0070D2" @confirm="onConfirm"/>
-    </div>
-  </div>
-</template>
-<script>
-import { deepCopy } from '@/libs/assist'
-import moment from 'moment'
-import LamboRequiredRedStar from '@/components/lambo/icon/lambo-required-red-star.vue'
-import LamboVectorIcon from '@/components/lambo/icon/lambo-vector-icon.vue'
-
-export default {
-  name: 'LamboDateRange',
-  components: {LamboVectorIcon, LamboRequiredRedStar},
-  props: {
-    required: {
-      type: Boolean,
-      default: false
-    },
-    title: {
-      type: String,
-      default: false
-    },
-    defaultDate: {
-      type: Array,
-      default: () => []
-    }
-  },
-  data() {
-    return {
-      icon: 'date.png',
-      showBottom: false,
-      dateStr: '',
-      selectItem: {
-        date: [],
-        date8: []
-      },
-      minDate: new Date((new Date()).getFullYear() - 1, (new Date()).getMonth() + 1, (new Date()).getDate()),
-      maxDate: new Date((new Date()).getFullYear() + 1, (new Date()).getMonth() + 1, (new Date()).getDate()),
-      defaultDateArr: []
-    }
-  },
-  methods: {
-    onOpen() {
-      this.showBottom = true
-    },
-    onConfirm(time) {
-      console.log(" onConfirm time:", time)
-      if (Array.isArray(time)) {
-        if (time.length === 2) {
-          let startDate1 = moment(time[0]).format("yyyyMMDD") || ''
-          let endDate1 = moment(time[1]).format("yyyyMMDD") || ''
-          let startDateFormat = moment(time[0]).format('yyyy-MM-DD') || ''
-          let endDateFormat = moment(time[1]).format('yyyy-MM-DD') || ''
-          if (startDate1 && endDate1) {
-            this.selectItem.date8 = [startDate1, endDate1]
-            this.selectItem.date = [startDateFormat, endDateFormat]
-            this.dateStr = startDateFormat + "~" + endDateFormat
-
-            this.$emit("on-ok", this.selectItem)
-          }
-        }
-      }
-      this.showBottom = false
-    },
-    initDefaultVal() {
-      // 默认值处理
-      if (this.defaultDate && Array.isArray(this.defaultDate) && this.defaultDate.length === 2) {
-        let defDateArr = this.defaultDate
-        if (defDateArr && defDateArr.length === 2 && defDateArr[0] && defDateArr[1]) {
-          this.selectItem.date8 = deepCopy(defDateArr)
-
-          let startDate8 = defDateArr[0]
-          let endDate8 = defDateArr[1]
-          let startDateFormat = moment(startDate8).format('yyyy-MM-DD') || ''
-          let endDateFormat = moment(endDate8).format('yyyy-MM-DD') || ''
-          this.selectItem.date[0] = startDateFormat
-          this.selectItem.date[1] = endDateFormat
-          this.dateStr = startDateFormat + " ~ " + endDateFormat
-
-          let startDateObj = moment(startDate8).toDate()
-          let endDateObj = moment(endDate8).toDate()
-          this.defaultDateArr = [startDateObj, endDateObj]
-        }
-      }
-    }
-  },
-  created() {
-    this.initDefaultVal()
-  }
-}
-</script>
-<style scoped>
-@import "../styles/index.less";
-@import "./styles/css/index.css";
-</style>
+<template>
+  <div>
+    <div class="search-row">
+      <!-- 必选的红色星号 -->
+      <lambo-required-red-star :required="required"></lambo-required-red-star>
+      <!-- 时间框的名字段 -->
+      <div class="search-input-title">{{ title }}</div>
+      <div class="search-lambo-input">{{ dateStr }}</div>
+      <lambo-vector-icon :icon="icon" @click="onOpen"></lambo-vector-icon>
+    </div>
+    <div>
+      <van-calendar v-model:show="showBottom" :default-date="defaultDateArr" :min-date="minDate" :max-date="maxDate" type="range"
+                    :style="{ maxHeight: '65%' }" color="#0070D2" @confirm="onConfirm"/>
+    </div>
+  </div>
+</template>
+<script>
+import {deepCopy} from '@/libs/assist'
+import moment from 'moment'
+import LamboRequiredRedStar from '../icon/lambo-required-red-star.vue'
+import LamboVectorIcon from '../icon/lambo-vector-icon.vue'
+
+export default {
+  name: 'LamboDateRange',
+  components: {LamboVectorIcon, LamboRequiredRedStar},
+  props: {
+    required: {
+      type: Boolean,
+      default: false
+    },
+    title: {
+      type: String,
+      default: false
+    },
+    defaultDate: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      icon: 'date.png',
+      showBottom: false,
+      dateStr: '',
+      selectItem: {
+        date: [],
+        date8: []
+      },
+      minDate: new Date((new Date()).getFullYear() - 1, (new Date()).getMonth() + 1, (new Date()).getDate()),
+      maxDate: new Date((new Date()).getFullYear() + 1, (new Date()).getMonth() + 1, (new Date()).getDate()),
+      defaultDateArr: []
+    }
+  },
+  methods: {
+    onOpen() {
+      this.showBottom = true
+    },
+    onConfirm(time) {
+      console.log(" onConfirm time:", time)
+      if (Array.isArray(time)) {
+        if (time.length === 2) {
+          let startDate1 = moment(time[0]).format("yyyyMMDD") || ''
+          let endDate1 = moment(time[1]).format("yyyyMMDD") || ''
+          let startDateFormat = moment(time[0]).format('yyyy-MM-DD') || ''
+          let endDateFormat = moment(time[1]).format('yyyy-MM-DD') || ''
+          if (startDate1 && endDate1) {
+            this.selectItem.date8 = [startDate1, endDate1]
+            this.selectItem.date = [startDateFormat, endDateFormat]
+            this.dateStr = startDateFormat + "~" + endDateFormat
+
+            this.$emit("on-ok", this.selectItem)
+          }
+        }
+      }
+      this.showBottom = false
+    },
+    initDefaultVal() {
+      // 默认值处理
+      if (this.defaultDate && Array.isArray(this.defaultDate) && this.defaultDate.length === 2) {
+        let defDateArr = this.defaultDate
+        if (defDateArr && defDateArr.length === 2 && defDateArr[0] && defDateArr[1]) {
+          this.selectItem.date8 = deepCopy(defDateArr)
+
+          let startDate8 = defDateArr[0]
+          let endDate8 = defDateArr[1]
+          let startDateFormat = moment(startDate8).format('yyyy-MM-DD') || ''
+          let endDateFormat = moment(endDate8).format('yyyy-MM-DD') || ''
+          this.selectItem.date[0] = startDateFormat
+          this.selectItem.date[1] = endDateFormat
+          this.dateStr = startDateFormat + " ~ " + endDateFormat
+
+          let startDateObj = moment(startDate8).toDate()
+          let endDateObj = moment(endDate8).toDate()
+          this.defaultDateArr = [startDateObj, endDateObj]
+        }
+      }
+    }
+  },
+  created() {
+    this.initDefaultVal()
+  }
+}
+</script>
+<style scoped>
+@import "../styles/index.less";
+@import "./styles/css/index.css";
+</style>