xrk-components 0.1.0 → 0.3.2

package/src/packages/slide-verify/src/main.vue

@@ -1,479 +0,0 @@
-<!--
- * @Description:
- * @LastEditors: xinzeedu@163.com
- * @Date: 2021年2月20日12:03:16
--->
-<template>
-  <div class="v-box" style="display: inline-block">
-    <slot></slot>
-    <transition name="fade">
-      <div class="v-box_box" v-show="visible" :style="boxStyle">
-        <!--      <div class="v-box_box">-->
-        <i class="v-box_close" @click="close"></i>
-        <p class="v-box_title">安全验证</p>
-        <p class="v-box_sub">拖动下方滑块完成拼图</p>
-        <div class="v-box_img" ref="imgWrap">
-          <img class="v-box_img_bg" ref="imgBg" :src="defaultImg" />
-          <img class="v-box_img_icon" ref="imgIcon" :src="defaultImg" />
-        </div>
-        <div class="v-box_range" ref="range">
-          <div class="v-box_range_track"></div>
-          <button class="v-box_range_btn" ref="rangeBtn"></button>
-          <div class="v-box_range_mask" ref="rangeMask"></div>
-        </div>
-        <div class="v-box_foot">
-          <div>
-            <span style="color: #ff0000" v-if="error">
-              {{ options.errorText }}
-            </span>
-            <span style="color: #00ff5d" v-if="success">
-              {{ options.successText }}
-            </span>
-          </div>
-          <img
-            @click="refresh"
-            class="v-box_foot_refresh"
-            src="./static/refresh.png"
-            alt=""
-          />
-        </div>
-      </div>
-    </transition>
-  </div>
-</template>
-<script>
-import defaultImg from './static/placeholder.png';
-export default {
-  name: 'XrkSlideVerify',
-  props: {
-    options: {
-      type: [Object],
-      default: () => ({
-        remoteTimerInterval: 800,
-        errorText: '请控制拼图块对齐缺口',
-        successText: '验证成功',
-        remoteApi: {
-          // 获取图片，拼图Y轴
-          initImages: '',
-          // 验证接口
-          checkVerification: ''
-        },
-        errorAnimationDuration: 0
-      })
-    },
-    // position:{
-    //    validator: function (value) {
-    //     return !['top-right', 'top-left', 'bottom-right','bottom-left','auto'].indexOf(value)
-    //   }
-    // }
-    boxStyle: {
-      type: [Object],
-      default: () => ({})
-    },
-    hasMask: {
-      type: [Boolean],
-      default: false
-    }
-  },
-  data() {
-    return {
-      visible: false,
-      error: false,
-      success: false,
-      startBtnX: 0,
-      requestLock: false,
-      remoteTimerId: '',
-      remoteTimerInterval: 600,
-      animationDuration: 300,
-      y: '',
-      x: '',
-      defaultImg: defaultImg
-    };
-  },
-  watch: {
-    visible: {
-      handler: function(v) {
-        if (v) {
-          this.initImg();
-        }
-      },
-      immediate: true
-    }
-  },
-  methods: {
-    refresh() {
-      this.error = false;
-      this.initImg();
-    },
-    // 手动关闭
-    close() {
-      this.$refs['imgBg'].src = defaultImg;
-      this.$refs['imgIcon'].src = defaultImg;
-      Object.assign(this.$data, this.$options.data());
-      this.$emit('close');
-    },
-    // 初始化图片
-    initImg() {
-      this.startBtnX = 0;
-      // let rangeBtn = this.$refs['rangeBtn'];
-      let imgBg = this.$refs['imgBg'];
-      let imgIcon = this.$refs['imgIcon'];
-      return new Promise((resolve, reject) => {
-        this.options['remoteApi']
-          .initImages()
-          .then(res => {
-            const {
-              data: {
-                data: {
-                  shadeImage,
-                  cutoutImage,
-                  y,
-                  cutoutImageWeight,
-                  cutoutImageHeight,
-                  shadeImageWeight,
-                  shadeImageHeight
-                }
-              }
-            } = res;
-            let rangeBtn = this.$refs['rangeBtn'];
-            rangeBtn.style.left = '0px';
-            imgIcon.style.left = '0px';
-
-            imgIcon.style.width = cutoutImageWeight + 'px';
-            imgIcon.style.height = cutoutImageHeight + 'px';
-
-            imgBg.style.width = shadeImageWeight + 'px';
-            imgBg.style.height = shadeImageHeight + 'px';
-
-            imgBg.src = /data:image\/(jpg|png);base64,/.test(shadeImage)
-              ? shadeImage
-              : 'data:image/jpg;base64,' + shadeImage;
-
-            imgIcon.src = /data:image\/(jpg|png);base64,/.test(cutoutImage)
-              ? cutoutImage
-              : 'data:image/png;base64,' + cutoutImage;
-
-            imgIcon.style.top = y + 'px';
-            // FIXME
-            this.y = y;
-            resolve();
-          })
-          .catch(reject);
-      });
-    }
-  },
-  mounted() {
-    let rangeBtn = this.$refs['rangeBtn'];
-    let rangeMask = this.$refs['rangeMask'];
-    let imgBg = this.$refs['imgBg'];
-    let imgIcon = this.$refs['imgIcon'];
-
-    // 移动滑块
-    let moveRangeBtn = e => {
-      e.preventDefault();
-      if (e.type === 'mousemove') {
-        rangeBtn.style.left = `${Math.max(0, e.offsetX - this.startBtnX)}px`;
-        imgIcon.style.left = `${Math.max(0, e.offsetX - this.startBtnX)}px`;
-      }
-      if (e.type === 'touchmove') {
-        rangeBtn.style.left = `${Math.max(
-          0,
-          e.touches[0].pageX - this.startBtnX
-        )}px`;
-        imgIcon.style.left = `${Math.max(
-          0,
-          e.touches[0].pageX - this.startBtnX
-        )}px`;
-      }
-    };
-
-    // 按下鼠标 监听 move 和 leave
-    rangeMask.addEventListener(
-      'mousedown',
-      e => {
-        if (e.offsetX > rangeBtn.offsetWidth || e.offsetX < 0) return;
-
-        // 点击区域 是按钮的位置
-        this.startBtnX = e.offsetX;
-        rangeMask.addEventListener('mousemove', moveRangeBtn);
-        // 抬起或者离开，监听一种即可
-        rangeMask.addEventListener('mouseup', remoteVerification);
-        rangeMask.addEventListener('mouseup', () =>
-          rangeMask.removeEventListener('mouseleave', remoteVerification)
-        );
-        rangeMask.addEventListener('mouseup', () =>
-          rangeMask.removeEventListener('mousemove', moveRangeBtn)
-        );
-
-        rangeMask.addEventListener('mouseleave', remoteVerification);
-        rangeMask.addEventListener('mouseleave', () =>
-          rangeMask.removeEventListener('mouseup', remoteVerification)
-        );
-        rangeMask.addEventListener('mouseleave', () =>
-          rangeMask.removeEventListener('mousemove', moveRangeBtn)
-        );
-      },
-      false
-    );
-
-    rangeMask.addEventListener(
-      'touchstart',
-      e => {
-        // if (e.touches[0].pageX > rangeBtn.offsetWidth || e.touches[0].pageX < 0)
-        //   return;
-        e.preventDefault();
-        // 点击区域 是按钮的位置
-        this.startBtnX = e.touches[0].pageX;
-        rangeMask.addEventListener('touchmove', moveRangeBtn);
-        // 抬起或者离开，监听一种即可
-        rangeMask.addEventListener('touchend', remoteVerification);
-      },
-      false
-    );
-
-    // 服务器验证
-    const remoteVerification = e => {
-      let imgIcon = this.$refs['imgIcon'];
-
-      e.preventDefault();
-      if (this.requestLock) return;
-      this.requestLock = true;
-
-      let x;
-
-      if (~e.type.indexOf('touch')) {
-        x = imgIcon.style.left.replace('px', '');
-      } else {
-        x = e.offsetX - this.startBtnX;
-      }
-
-      this.options['remoteApi']
-        .checkVerification({ x: Math.floor(+x), y: this.y })
-        .then(() => {
-          // const { status } = res;
-          this.remoteTimerId = setTimeout(() => {
-            this.requestLock = false;
-            clearTimeout(this.remoteTimerId);
-          }, this.remoteTimerInterval);
-
-          // 验证通过
-          // if (+status === 1) {
-          console.log('验证通过。。。');
-          this.error = false;
-          this.success = true;
-          this.animationTimer = setTimeout(() => {
-            this.success = false;
-            // 初始化样式
-            imgBg.src = defaultImg;
-            imgIcon.src = defaultImg;
-            imgIcon.style.top = '0px';
-            rangeBtn.style.left = '0px';
-            imgIcon.style.left = '0px';
-
-            this.error = false;
-            this.visible = false;
-            this.requestLock = false;
-            this.$emit('success');
-          }, 1000);
-        })
-        .catch(() => {
-          console.log('err');
-          console.log('验证失败。。。');
-          imgIcon.style.animation = `jitter ${this.animationDuration}ms`;
-          rangeBtn.style.animation = `jitter ${this.animationDuration}ms`;
-
-          this.error = true;
-          this.animationTimer = setTimeout(() => {
-            //初始化图片信息
-            this.initImg().then(() => {
-              clearTimeout(this.animationTimer);
-              imgIcon.style.animation = '';
-              rangeBtn.style.animation = '';
-            });
-            this.requestLock = false;
-          }, this.animationDuration);
-        });
-    };
-  },
-  destroyed() {
-    clearTimeout(this.remoteTimerId);
-  }
-};
-</script>
-<style lang="scss">
-.fade-enter-active,
-.fade-leave-active {
-  transition: opacity 0.5s;
-}
-
-.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
-  opacity: 0;
-}
-
-@keyframes jitter {
-  0% {
-    transform: translateX(0px);
-  }
-  25% {
-    transform: translateX(-5px);
-  }
-  50% {
-    transform: translateX(5px);
-  }
-  75% {
-    transform: translateX(-5px);
-  }
-  100% {
-    transform: translateX(0px);
-  }
-}
-@media screen and (max-width: 500px) {
-  .v-box_box {
-    position: fixed;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    margin: auto;
-  }
-}
-
-@media screen and (min-width: 500px) {
-  .v-box_box {
-    position: absolute;
-    right: 0px;
-    bottom: 0;
-  }
-}
-.v-box {
-  position: relative;
-  user-select: none;
-
-  &_box {
-    width: 310px;
-    height: 348px;
-    background-color: #ffffff;
-    border-radius: 8px;
-    z-index: 2;
-    box-shadow: 2px 4px 20px #2e2f2f;
-    padding: 16px 12px;
-    box-sizing: border-box;
-  }
-
-  &_title {
-    font-size: 20px;
-    font-weight: normal;
-    font-stretch: normal;
-    line-height: 20px;
-    letter-spacing: 0;
-    color: #141413;
-    margin-top: 0;
-    margin-bottom: 16px;
-    text-align: center;
-  }
-
-  &_sub {
-    font-size: 14px;
-    font-weight: normal;
-    font-stretch: normal;
-    line-height: 14px;
-    letter-spacing: 0;
-    color: #141413;
-    padding-bottom: 12px;
-    margin: 0 !important;
-  }
-
-  &_close {
-    position: absolute;
-    right: 8px;
-    top: 8px;
-    width: 24px;
-    height: 24px;
-    border-radius: 14px;
-    background: url('./static/close.png');
-    cursor: pointer;
-  }
-
-  &_img {
-    width: 280px;
-    height: 171px;
-    //background-color: #ffffff;
-    border-radius: 6px;
-    position: relative;
-    overflow: hidden;
-
-    &_bg {
-      width: 280px;
-      height: 171px;
-    }
-
-    &_icon {
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 65px;
-      height: 65px;
-      //background-color: rgba(0, 0, 0, 0.2);
-      //box-shadow: inset 0px 0px 6px 0px #ffffff,
-      //0px 1px 4px 0px rgba(0, 0, 0, 0.56);
-      //border-radius: 2px;
-    }
-  }
-
-  &_range {
-    margin-top: 20px;
-    height: 40px;
-    position: relative;
-    box-sizing: border-box;
-    display: flex;
-    align-items: center;
-
-    &_track {
-      width: 286px;
-      height: 12px;
-      background-color: #f0f0ef;
-      border-radius: 6px;
-      position: relative;
-    }
-
-    &_btn {
-      width: 36px;
-      height: 28px;
-      //width: 54px;
-      //height: 42px;
-      box-shadow: 0 0 4px 0 #f7e00b;
-      border-radius: 14px;
-      border: none;
-      box-sizing: border-box;
-      outline: none;
-      position: absolute;
-      background: url('./static/range_btn.png');
-      background-size: 100% 100%;
-      left: 0;
-      //border: 1px solid #000;
-    }
-
-    &_mask {
-      position: absolute;
-      top: -190px;
-      left: 0;
-      width: 100%;
-      height: 230px;
-      z-index: 9999;
-      cursor: pointer;
-    }
-  }
-
-  &_foot {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-
-    &_refresh {
-      width: 28px;
-      height: 28px;
-      cursor: pointer;
-    }
-  }
-}
-</style>

package/src/packages/task-detail/index.js

@@ -1,12 +0,0 @@
-/*
- * @Description:
- * @LastEditors: jml
- * @Date: 2021-02-23 10:18:42
- */
-import TaskDetail from './src/main';
-
-TaskDetail.install = function(Vue) {
-  Vue.component(TaskDetail.name, TaskDetail);
-};
-
-export default TaskDetail;

package/src/packages/task-detail/src/components/formDetail.vue

@@ -1,79 +0,0 @@
-<!--
- * @Description: 
- * @Author: jml
- * @Date: 2021-02-23 14:20:59
- * @LastEditors: jml
- * @LastEditTime: 2021-03-02 17:55:15
--->
-<template>
-  <div class="detail">
-    <div
-      class="detail_item"
-      v-for="item in fieldsMap"
-      :key="String(item.prop)"
-      :style="item.style"
-    >
-      <span
-        class="detail_item_label"
-        :style="{ width: `${labelMaxWidth}px` }"
-        v-if="!hideLabel(item)"
-      >
-        {{ getLabel(item) }}：
-      </span>
-      <div class="detail_item_value">
-        <template v-if="isRenderField(item)" name="render渲染">
-          <CustomRender
-            :vnode="item.render(initData, item.prop)"
-          ></CustomRender>
-        </template>
-        <template v-else-if="isTableField(item)" name="签到table渲染">
-          <ul
-            class="detail_item_value_table"
-            v-for="(items, indexs) in dealTableList(item.prop)"
-            :key="indexs"
-          >
-            <li class="first">
-              <div>昵称</div>
-              <div>签到时间</div>
-            </li>
-            <li v-for="(item, index) in items" :key="index">
-              <div class="nickName">
-                <span>{{ item.nickName }}</span>
-              </div>
-              <div>
-                <span>{{ dealTime(item.createDt) }}</span>
-              </div>
-            </li>
-          </ul>
-        </template>
-        <template v-else>
-          <template v-if="isStringProp(item.prop)">
-            <span>{{ initData[item.prop] }}</span>
-          </template>
-          <template v-if="isArraryProp(item.prop)">
-            <span>{{ getValue(item.prop) }}</span>
-          </template>
-        </template>
-        <template v-if="item.slot">
-          <CustomRender :vnode="item.slot(initData)"></CustomRender>
-        </template>
-      </div>
-    </div>
-  </div>
-</template>
-<script>
-import mixin from './mixin';
-export default {
-  name: 'Detail',
-  mixins: [mixin],
-  data() {
-    return {};
-  },
-  computed: {},
-  methods: {}
-};
-</script>
-
-<style lang="scss" scoped>
-@import './styles/index.scss';
-</style>

package/src/packages/task-detail/src/components/mixin.js

@@ -1,105 +0,0 @@
-/*
- * @Description:
- * @Date: 2021-02-23 17:34:28
- * @LastEditors: jml
- */
-
-import { check, date } from '../tools/index';
-
-export default {
-  components: {
-    CustomRender: {
-      props: {
-        vnode: {
-          type: Object | String
-        }
-      },
-      render(h) {
-        if (check.isObject(this.vnode)) {
-          return this.vnode;
-        } else {
-          return h('span', this.vnode);
-        }
-      }
-    }
-  },
-  props: {
-    config: {
-      type: Object,
-      default: () => ({})
-    },
-    initData: {
-      type: Object,
-      default: () => ({})
-    }
-  },
-  computed: {
-    labelMaxWidth() {
-      const { getLabel } = this;
-      return this.fieldsMap.reduce((pre, cur) => {
-        const _str = `${getLabel(cur)}`;
-        const allCount = _str.length;
-        const wordCount = _str.replace(/[^0-9a-zA-Z]+/g, '').length;
-        return Math.max(pre, wordCount * 10 + (allCount - wordCount) * 20);
-      }, 0);
-    },
-    fieldsMap() {
-      return this.config.fieldsArr.filter(item => {
-        const { isHideField, hide } = item;
-        if (check.isFunction(hide)) {
-          return !hide(this.initData);
-        }
-        return !isHideField;
-      });
-    }
-  },
-  methods: {
-    isRenderField(field) {
-      return check.isFunction(field.render);
-    },
-    isTableField(field) {
-      return field.type === 'table';
-    },
-    isStringProp(prop) {
-      return check.isString(prop);
-    },
-    isArraryProp(prop) {
-      return Array.isArray(prop);
-    },
-    hideLabel(row) {
-      return row.hideLabel;
-    },
-    getLabel(row) {
-      const { label } = row;
-      if (check.isFunction(label)) {
-        return label(this.initData);
-      } else {
-        return label;
-      }
-    },
-    getValue(prop) {
-      const { initData } = this;
-      return initData[prop.find(item => initData[item])];
-    },
-    dealTableList(prop) {
-      const newArr = [];
-      const baseCount = 5;
-      (this.getValue(prop) || []).filter((item, index) => {
-        let count = index % baseCount;
-        let no = Math.floor(index / baseCount);
-        if (count === 0) {
-          newArr[no] = [];
-        }
-        newArr[no].push(item);
-      });
-      return newArr;
-    },
-    dealTime(value) {
-      return value ? date.dateFormat(value) : '-';
-    }
-  },
-  mounted() {
-    console.log('详情配置', this.config);
-    console.log('详情数据', this.initData);
-  }
-};