@kyfe/ks-query-table 0.0.21 → 0.0.22

package/kuasheng-ui/components/ks-area-single-select/index.vue

@@ -0,0 +1,324 @@
+<template>
+  <van-action-sheet v-model="show" title="请选择省市区街道" get-container="body" class="ks-area-action-select">
+    <div class="ks-area-select">
+      <h4>热门城市</h4>
+      <div class="hot-city">
+        <div class="hot-city__item" v-for="city of cities" :key="city.id">
+          <div>
+            <van-button @click="handleSelectHot(city)" :class="{ active: selectHotCity === city.id }">
+              {{ city.title }}
+            </van-button>
+          </div>
+        </div>
+      </div>
+      <!-- <h4>省市区街道选择</h4> -->
+      <div class="city-select">
+        <div class="select-tab">
+          <van-grid :border="false">
+            <van-grid-item v-for="(item, index) of titles" :key="index" @click="handleChangeTab(index)">
+              <div class="select-tab-item__title" :style="{ color: item === '请选择' ? '#165DFF' : '#333', width: `${tabItemWidth}px` }">
+                {{ item }}
+                <div v-show="item === '请选择'" class="select-tab-item__line"></div>
+              </div>
+            </van-grid-item>
+          </van-grid>
+        </div>
+        <div class="select-gray"></div>
+        <div class="select-list" ref="list">
+          <ks-loading class="select-list-loading" v-show="loading" size="24px" vertical></ks-loading>
+          <ul v-show="!loading">
+            <li v-for="(item, index) of list" :key="item.districtID">
+              <div :class="{ active: selectedArea[currentLevel] && item.districtID === selectedArea[currentLevel].id }" @click="handleSelect(item, index)">
+                {{ item.districtName || (currentLevel === 1 ? '其他市县' : '') }}
+              </div>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </van-action-sheet>
+</template>
+
+<script>
+import { hotCity, createTitles } from './hot-city'
+
+const levels = ['province', 'city', 'zone', 'street', 'village']
+const debounce = (fn, wait) => {
+  let timeout = null
+  return function () {
+    const t = this
+    const args = arguments
+    if (timeout) {
+      clearTimeout(timeout)
+    }
+    timeout = setTimeout(() => fn.apply(t, args), wait)
+  }
+}
+export default {
+  name: 'area-select',
+  props: {
+    level: {
+      type: Number,
+      default: 4
+    },
+    showGAT: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      cities: hotCity(),
+      show: false,
+      titles: createTitles(this.level),
+      list: [],
+      selectHotCity: null,
+      selectedArea: [],
+      currentLevel: 0,
+      loading: false
+    }
+  },
+  computed: {
+    tabItemWidth() {
+      return document.body.clientWidth / this.level - 16
+    },
+    method() {
+      if (this.showGAT) {
+        // 支持港澳台数据
+        return 'address.regionInfo.getMultiLevelSubListGat'
+      }
+      return 'system.address.addressBgTerritory.getMultiLevelSubList'
+    }
+  },
+  methods: {
+    open(area) {
+      this.list = []
+      this.selectHotCity = null
+      if (area && area.length) {
+        this.getAreaList(area.length - 1, area[area.length - 2].id)
+        area.forEach((item, index) => {
+          if (index === this.titles.length - 1) {
+            this.titles[index] = '请选择'
+          } else {
+            this.titles[index] = item.name
+          }
+        })
+        this.selectedArea = area
+        this.currentLevel = 3
+      } else {
+        this.selectedArea = []
+        this.currentLevel = 0
+        this.getAreaList(0)
+      }
+      this.show = true
+    },
+    getAreaList(level, id) {
+      try {
+        if (level === 0 && this.province) {
+          this.list = this.province
+        } else {
+          this.loading = true
+          const params = {
+            districtLevel: levels[level],
+            special:'1'
+          }
+          if (level !== 0) {
+            params.commonDistrID = id
+          }
+          const data = {
+            method: this.method,
+            id: Math.random()
+              .toString()
+              .substring(4),
+            jsonrpc: '2.0',
+            params
+          }
+          this.$http(this.method, 10124, data).then(res => {
+            if (level === 0) {
+              this.province = res.districtList
+            }
+            this.list = res.districtList
+            this.$refs.list.scrollTop = 0
+            this.loading = false
+          })
+        }
+      } catch (e) {
+        console.error(e)
+        this.loading = false
+      }
+    },
+    handleChangeTab(index) {
+      if (index === 0) {
+        this.getAreaList(0)
+        this.selectedArea = []
+      } else {
+        this.getAreaList(index, this.selectedArea[index - 1].id)
+        this.selectedArea = this.selectedArea.slice(0, index)
+      }
+      for (let i = this.titles.length; i--; ) {
+        if (i > index) {
+          this.titles[i] = ''
+        } else if (i === index) {
+          this.titles[i] = '请选择'
+        }
+      }
+      this.currentLevel = index
+    },
+    handleSelect: debounce(function (area) {
+      // 优化兼容东莞、中山没有区的数据，选到街道即可完成
+      const isStreet = area.districtID.startsWith('XZ4')
+      if (this.currentLevel + 1 === this.level || isStreet) {
+        if (this.selectedArea.length === this.level) {
+          this.selectedArea[this.currentLevel] = {
+            id: area.districtID,
+            name: area.districtName,
+            level: levels[this.currentLevel]
+          }
+        } else {
+          this.selectedArea.push({
+            id: area.districtID,
+            name: area.districtName,
+            level: levels[this.currentLevel]
+          })
+        }
+        this.$emit('select', this.selectedArea)
+        this.show = false
+      } else if (this.currentLevel + 1 < this.level) {
+        let currentLevel = this.currentLevel + 1
+        this.getAreaList(currentLevel, area.districtID)
+        this.selectedArea.push({
+          id: area.districtID,
+          name: area.districtName,
+          level: levels[this.currentLevel]
+        })
+        this.titles[this.currentLevel] = area.districtName || '其他市县'
+        this.titles[currentLevel] = '请选择'
+        this.currentLevel = currentLevel
+      }
+    }, 300),
+    handleSelectHot(city) {
+      this.getAreaList(1, city.id)
+      this.selectHotCity = city.id
+      this.selectedArea = city.value
+      this.currentLevel = 2
+      for (let i = this.titles.length; i--; ) {
+        if (i > 2) {
+          this.titles[i] = ''
+        } else if (i === 2) {
+          this.titles[i] = '请选择'
+        } else {
+          this.titles[i] = city.value[i].name
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style lang="less">
+.ks-area-action-select {
+  overflow: hidden;
+  max-height: 464px;
+  .van-action-sheet__header {
+    border-bottom: 1px solid #ebedf5;
+    background-color: #ffffff;
+  }
+}
+.ks-area-select {
+  height: 420px;
+  overflow: hidden;
+  h4 {
+    font-size: 12px;
+    color: #9f9f9f;
+    line-height: 20px;
+    padding: 0 0 0 20px;
+    margin: 16px 0 0 0;
+  }
+  .hot-city {
+    height: 76px;
+    padding: 10px;
+    display: flex;
+    flex-wrap: wrap;
+    &__item {
+      width: 25%;
+      > div {
+        padding: 0 10px;
+        height: 42px;
+      }
+      .van-button {
+        top: -14px;
+        border-width: 0;
+        width: 100%;
+        height: 30px;
+        border-radius: 4px;
+        line-height: 28px;
+        // background-color: #f3f4f6;
+        background-color: #f7f8fa;
+        &.active {
+          .van-button__text {
+            color: #fff;
+          }
+          background-color: #165DFF;
+        }
+      }
+      .van-button--normal {
+        padding: 0 !important;
+      }
+      .van-button__text {
+        font-size: 14px;
+        color: #232323;
+      }
+    }
+  }
+  background-color: #fff;
+  .select-tab {
+    // height: 40px;
+    .van-grid-item__content {
+      padding: 8px 8px 2px;
+    }
+    &-item {
+      &__title {
+        // color: #b0b3bf;
+        font-size: 14px;
+        font-weight: bold;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        text-align: center;
+      }
+      &__line {
+        margin: 0 auto;
+        width: 20px;
+        height: 2px;
+        background-color: #165DFF;
+        border-radius: 2px;
+      }
+    }
+  }
+  .select-gray {
+    width: 100%;
+    height: 4px;
+    background: #f3f4f6;
+  }
+  .select-list {
+    height: 235px;
+    -webkit-overflow-scrolling: touch;
+    overflow-y: scroll;
+    &-loading {
+      height: 100%;
+      justify-content: center;
+    }
+    li {
+      font-size: 14px;
+      line-height: 40px;
+      > div {
+        padding-left: 24px;
+        &.active {
+          color: #165DFF;
+          background-color: #f1f0fe;
+        }
+      }
+    }
+  }
+}
+</style>

package/kuasheng-ui/components/ks-calendar/index.vue

@@ -0,0 +1,269 @@
+<template>
+  <van-popup
+    :value="value"
+    position="bottom"
+    get-container="body"
+    round
+    close-icon-position="top-left"
+    close-icon="arrow-left"
+    class="ks-calendar-popup"
+    :closeable="true"
+    @input="handleClosePopup"
+  >
+    <van-calendar
+      :poppable="false"
+      :default-date="currentDate"
+      :min-date="currentMinDate"
+      :class="['ks-calendar', { 'ks-calendar-horizontal': horizontal }]"
+      :type="type"
+      v-bind="$attrs"
+      v-on="$listeners"
+      :allow-same-day="true"
+      @select="handleSelect"
+    >
+      <template #title>
+        <div class="ks-calendar-header">
+          <span class="ks-calendar-header__title">{{ type === 'range' ? '选择范围' : '选择日期' }}</span>
+          <span class="ks-calendar-header__daterange">
+            {{ dateRangeStr }}
+          </span>
+        </div>
+      </template>
+    </van-calendar>
+  </van-popup>
+</template>
+
+<script>
+const formatDate = date => {
+  if (!date) {
+    return ''
+  }
+  let _date = new Date(date)
+  let y = _date.getFullYear()
+  let m = _date.getMonth() + 1
+  m = m < 10 ? '0' + m : m
+  let d = _date.getDate()
+  d = d < 10 ? '0' + d : d
+  return `${y}/${m}/${d}`
+}
+
+export default {
+  name: 'ks-calendar-range',
+  props: {
+    value: Boolean,
+    minDate: [Object, Date],
+    defaultDate: [Array, Date],
+    type: {
+      type: String,
+      default: 'range'
+    },
+    horizontal: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      currentDate: this.defaultDate
+    }
+  },
+  watch: {
+    defaultDate: function() {
+      this.currentDate = this.defaultDate
+    }
+  },
+  computed: {
+    dateRangeStr() {
+      let defaultDate = this.currentDate
+      if (this.type === 'range' && Array.isArray(defaultDate) && defaultDate.length === 2) {
+        if (defaultDate[1]) {
+          return `${formatDate(defaultDate[0])} - ${formatDate(defaultDate[1])}`
+        } else {
+          return `${formatDate(defaultDate[0])}`
+        }
+      } else if (this.type === 'single' && defaultDate) {
+        return `${formatDate(defaultDate)}`
+      }
+      return ''
+    },
+    currentMinDate() {
+      if (!this.minDate) {
+        let d = new Date()
+        let m = d.getMonth() + 1
+        let y = d.getFullYear()
+        if (m - 6 < 1) {
+          return new Date(`${y - 1}/${12 + m - 6}/01`)
+        } else {
+          return new Date(`${y}/${m - 6}/01`)
+        }
+      }
+      return this.minDate
+    }
+  },
+  methods: {
+    handleClosePopup(e) {
+      this.$emit('input', e)
+    },
+    handleSelect(e) {
+      this.currentDate = e
+      this.$emit('select', e)
+    }
+  }
+}
+</script>
+
+<style lang="less">
+.ks-calendar .van-calendar__day--start::after {
+  position: absolute;
+  left: 50%;
+  top: 0;
+  bottom: 0;
+  width: 0.71333333rem;
+  content: ' ';
+  background-color: rgba(0, 108, 219, 0.1);
+}
+
+.ks-calendar .van-calendar__day--end::after {
+  position: absolute;
+  right: 50%;
+  top: 0;
+  bottom: 0;
+  width: 0.71333333rem;
+  content: ' ';
+  background-color: rgba(0, 108, 219, 0.1);
+}
+
+.ks-calendar .van-calendar__day {
+  margin-bottom: 6px;
+  font-size: 14px;
+}
+
+.ks-calendar .van-calendar__selected-day {
+  color: #fff;
+  background-color: #165DFF;
+  border-radius: 50%;
+  width: 48px;
+  height: 48px;
+  // height: calc(100vw / 7);
+  margin-bottom: 6px;
+}
+
+.ios .ks-calendar-header {
+  padding-top: 20px;
+}
+
+.ios .ks-calendar-popup .van-calendar__header-title {
+  box-sizing: content-box !important;
+  padding-bottom: 20px;
+}
+
+.ipx .ks-calendar-header {
+  padding-top: 44px;
+}
+
+.ipx .ks-calendar-popup .van-calendar__header-title {
+  box-sizing: content-box !important;
+  padding-bottom: 44px;
+}
+
+.afc .ks-calendar-header {
+  padding-top: var(--status-bar-height, 0px);
+}
+
+.afc .ks-calendar-popup .van-calendar__header-title {
+  box-sizing: content-box !important;
+  padding-bottom: var(--status-bar-height, 0px);
+}
+
+.ks-calendar-popup {
+  height: 100%;
+  .van-popup__close-icon--top-left {
+    top: 12px;
+  }
+}
+
+.ios .ks-calendar-popup .van-popup__close-icon--top-left {
+  top: 32px;
+}
+
+.ipx .ks-calendar-popup .van-popup__close-icon--top-left {
+  top: 56px;
+}
+
+.afc .ks-calendar-popup .van-popup__close-icon--top-left {
+  top: calc(12px + var(--status-bar-height, 0px));
+}
+
+.ks-calendar {
+  &-header {
+    padding-left: 44px;
+    text-align: left;
+    &__daterange {
+      margin-left: 20px;
+      color: #165DFF;
+      font-size: 14px;
+    }
+  }
+  .van-calendar {
+    &__confirm {
+      border-radius: 8px;
+      background-color: #165DFF;
+      border: 1px solid #165DFF;
+    }
+    &__day {
+      height: calc(100vw / 7);
+      &--start,
+      &--end {
+        border-radius: 50%;
+      }
+      &--start-end {
+        border-radius: 6px;
+      }
+    }
+    &__bottom-info {
+      line-height: 10px;
+    }
+  }
+}
+.ks-calendar-horizontal {
+  .van-calendar__day {
+    height: 46px;
+  }
+  .ks-calendar .van-calendar__selected-day {
+    height: 46px;
+  }
+  .van-calendar__selected-day {
+    border-radius: 50%;
+    height: 46px;
+    width: 46px;
+  }
+  .van-calendar__bottom-info {
+    bottom: 4px;
+  }
+  .van-calendar__header-subtitle {
+    height: 20px;
+    line-height: 20px;
+    margin-top: -16px;
+  }
+  .van-calendar__weekday {
+    line-height: 20px;
+  }
+  .van-calendar__day {
+    margin-bottom: 2px;
+  }
+  .van-calendar__day--start,
+  .van-calendar__day--end {
+    background-color: transparent;
+    background-size: 46px 46px;
+    background-repeat: no-repeat;
+    background-image: radial-gradient(closest-side, #165DFF 100%, transparent 100%);
+    background-position: 50%;
+  }
+}
+.ios .ks-calendar-horizontal {
+  .van-calendar__day--start,
+  .van-calendar__day--end {
+    background-image: -webkit-gradient(radial, 50% 50%, 22, 23 23, 23, from(#165DFF), to(transparent));
+  }
+}
+</style>

package/kuasheng-ui/components/ks-call-phone/call-tips.vue

@@ -0,0 +1,70 @@
+<template>
+  <div class="ks-call-tips">
+    <div class="ks-call-tips_title">提示</div>
+    <div class="ks-call-tips_content">对方目前<span class="ks-call-tips_status"> {{ statusText }} </span>可先留言,如有紧急事项可点击“继续联系”拨打电话</div>
+    <div class="ks-call-tips_btn">
+      <ks-button type="primary" plain @click="confirmCall">继续联系</ks-button>
+      <ks-button type="primary" @click="cancel">取消</ks-button>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: 'KsCallTips',
+  props: {
+    statusText: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+    }
+  },
+  methods: {
+    cancel () {
+      this.$emit('cancel')
+    },
+    confirmCall() {
+      this.$emit('changeCall')
+    }
+  },
+}
+</script>
+<style lang="less">
+  .ks-call-tips {
+    padding: 0 18px;
+    display: flex;
+    justify-items: center;
+    align-items: center;
+    flex-direction: column;
+    font-size: 16px;
+    &_title {
+      font-size: 18px;
+      margin-top: 30px;
+      color: #181818;
+      font-weight: 500;
+    }
+    &_status {
+      color: #165DFF;
+    }
+    &_content {
+      margin-top: 28px;
+      line-height: 28px;
+      color: #03050d;
+    }
+    &_btn {
+      width: 100%;
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      margin-top: 26px;
+      margin-bottom: 30px;
+      .van-button {
+        width: 44%;
+        height: 40px;
+        border-radius: 8px;
+      }
+    }
+  }
+</style>