gxd-uni-library-editx 1.0.0

package/src/components/XdRadio/XdRadio.vue

@@ -0,0 +1,151 @@
+<template>
+  <view class="xd-radio" @click="handleClick">
+    <view
+      :class="'xd-radio__' + size"
+      v-if="!$isIpad"
+    >
+      <radio
+        :checked="checked"
+        :disabled="disabled"
+        :color="uiColor"
+        :class="'xd-radio__' + size + '-body'"
+      ></radio>
+    </view>
+    <view class="xd-radio__ipad" v-else>
+      <radio
+        :checked="checked"
+        :disabled="disabled"
+        :color="uiColor"
+      ></radio>
+    </view>
+  </view>
+</template>
+
+<script>
+  import {
+    getParentsStyle, //获取页面风格单个键值值
+    getParentsStyles //获取页面风格列表
+  } from '@/utils/xd.base';
+  export default {
+    name: "XdRadio",
+    props: {
+      size: {
+        type: String,
+        default: 'default' , //small mini default
+      },
+      value: {
+        type: Boolean,
+        default: false
+      },
+      disabled: {
+        type: Boolean,
+        default: false
+      },
+      color: {
+        type: String,
+        default: ''
+      }
+    },
+    data(){
+      return {
+        uiColor: '',
+        checked: false,
+      }
+    },
+    watch:{
+      value(val){
+        this.checked = val;
+      },
+    },
+   async created() {
+      this.uiColor = await getParentsStyle(this.$parent, '$mainColor');
+      if(this.color) this.uiColor = this.color;
+      this.checked = this.value;
+    },
+    methods:{
+      handleClick(){
+        if(this.disabled) return;
+        this.checked = !this.checked;
+        this.$emit('input',this.checked);
+        this.$emit('change', this.checked);
+      }
+    }
+  }
+</script>
+
+<style scoped lang="less">
+  .xd-radio {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    &__default {
+      position: relative;
+      overflow: hidden;
+      height: unit(60, rpx);
+      width: unit(60, rpx);
+
+      &-body {
+        width: 100%;
+        height: 100%;
+        position: absolute;
+        transform: scale(1);
+        top: 0;
+        left: 0;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        /deep/ .uni-radio-input {
+          margin-right: 0;
+        }
+      }
+    }
+
+    &__small {
+      position: relative;
+      overflow: hidden;
+      height: unit(36, rpx);
+      width: unit(36, rpx);
+
+      &-body {
+        width: 100%;
+        height: 100%;
+        position: absolute;
+        transform: scale(0.6);
+        top: 0;
+        left: 0;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        /deep/ .uni-radio-input {
+          margin-right: 0;
+        }
+      }
+    }
+
+    &__mini {
+      position: relative;
+      overflow: hidden;
+      height: unit(50, rpx);
+      width: unit(50, rpx);
+
+      &-body {
+        width: 100%;
+        height: 100%;
+        position: absolute;
+        transform: scale(0.8);
+        top: 0;
+        left: 0;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        /deep/ .uni-radio-input {
+          margin-right: 0;
+        }
+      }
+    }
+  }
+</style>

package/src/components/XdRangeSlider/XdRangeSlider.vue

@@ -0,0 +1,355 @@
+<template>
+  <view class="fj-slider-box" :style="{opacity:lading?1:0}">
+    <view class="fj-slider">
+      <view class="fj-value">
+        <view class="fj-v-l">{{sMinValue}}</view>
+        <view class="fj-v-r">{{sMaxValue}}</view>
+      </view>
+      <view
+              class="fj-touch-left"
+              @touchstart.stop="touchstart($event, 'min')"
+              @touchmove.stop="touchmove($event, 'min')"
+              @touchend.stop="touchend($event, 'min')"
+              :style="{
+        left:`${minLeft}px`,
+        background: $mainColor
+      }"
+      ></view>
+      <view
+              class="fj-touch-right"
+              @touchstart.stop="touchstart($event, 'max')"
+              @touchmove.stop="touchmove($event, 'max')"
+              @touchend.stop="touchend($event, 'max')"
+              :style="{
+        left:`${maxLeft}px`,
+        background: $mainColor
+      }"
+      ></view>
+      <view
+              class="tip"
+              :style="{
+        left:`${tipLeft}px`,
+        transform: `translateX(${(type === 'min'?'-': '')}24%)`,
+        display: tipShow ? 'block' : 'none'
+      }"
+      >{{curValue + fillMinValue}}
+      </view>
+      <view
+              class="fj-line-pull"
+              :style="{
+        left: `${minLeft + touchWidth}px`,
+        width:`${maxLeft - (minLeft + touchWidth)}px`,
+        background: $mainColor
+      }"
+      ></view>
+      <view class="fj-line" id="fj-line">
+        <view v-if="lading" class="fj-line-left-b" style="left: -30rpx"></view>
+        <view v-if="lading" class="fj-line-right-b" style="right: -30rpx"></view>
+      </view>
+    </view>
+  </view>
+</template>
+
+
+<script type="javascript">
+
+  /**
+   * XdRangeSlider 范围滑动选中值
+   * @description 带加减按钮的数字输入框
+   * @property {Number} fillValue 填充的值
+   * @property {Number} fillMaxValue 填充的最大值
+   * @property {Number} fillMinValue 填充的最小值
+   * @property {Number} minValue 选中最小值
+   * @property {Number} maxValue 选中最大值
+   * @property {Number} step 每次滑动1%对应的增加减少的间隔值
+   * @event {Function} start 触发touchstart方法 返回了原有的event信息, 并添加了custom对象
+   * @event {Function} move 触发touchmove方法 返回了原有的event信息, 并添加了custom对象
+   * @event {Function} end 触发touchend方法 返回了原有的event信息, 并添加了custom对象 获取值
+   */
+
+  export default {
+  name:'XdRangeSlider',
+  props: {
+    fillMaxValue: {
+      type: Number,
+      default: 1000,
+    },
+    fillMinValue: {
+      type: Number,
+      default: 18,
+    },
+    minValue: {
+      type: Number,
+      default: 30,
+    },
+    maxValue: {
+      type: Number,
+      default: 888,
+    },
+    step: {
+      type: Number,
+      default: 1,
+    },
+  },
+  watch: {
+    minValue(newVal){
+      this.sMinValue = (newVal < this.fillMinValue ? this.fillMinValue: newVal);
+      this.minLeft = this.sMinValue / this.percentage;
+    },
+    maxValue(newVal){
+      this.sMaxValue = (newVal > this.fillMaxValue ? this.fillMaxValue : newVal);
+      this.maxLeft = this.sMaxValue / this.percentage;
+    }
+  },
+  data() {
+    return {
+      type: null,
+      lading: false,
+      fillValue: null, //区间之间最大值
+      fillLeftMarginValue: null, //区间距离左边距占比
+      tipShow:false, //显示提示框
+      tipLeft:0, //提示框距离左侧距离
+
+      minLeft: 0, //左滑动块距离左侧距离
+      maxLeft: 0, //右滑动块距离左侧距离
+
+      touchWidth:50, //点击图表宽度
+
+      lineWidth:0, //线宽度
+      lineLeft:0, //线距离左边框的距离
+
+      curValue:0, //当前选中值
+      sMinValue:0, //对应范围最小值
+      sMaxValue:0, //对应范围最大值
+      percentage: 0, //百分百比重
+      movedisX: 0,
+
+    };
+  },
+
+
+  mounted(){
+    setTimeout(()=>{
+        this.fillValue = this.fillMaxValue - this.fillMinValue;
+        this.touchWidth = this.touchWidth * this.$rpxNum;
+        this.$xdUniHelper.getWindowHeight(['#fj-line'], this)
+          .then((res) => {
+            //fj-line
+            let line = res['#fj-line'];
+            this.lineWidth = line.width;
+            this.lineLeft = line.left;
+            this.maxLeft = this.lineWidth;
+            this.percentage = this.fillValue / this.lineWidth;
+
+            //输入选中值边界处理
+            this.sMinValue = this.minValue < this.fillMinValue ? this.fillMinValue : this.minValue;
+            this.sMaxValue = this.maxValue > this.fillMaxValue ? this.fillMaxValue : this.maxValue;
+
+            this.minLeft = (this.sMinValue - this.fillMinValue) / this.percentage;
+            this.maxLeft = (this.sMaxValue - this.fillMinValue) / this.percentage + this.touchWidth;
+            this.lading = true
+          }).catch()
+    }, 500)
+
+  },
+
+  methods: {
+    touchstart(e, type) {
+      this.type = type;
+      this.$emit('start', {
+        ...e,
+        custom:{
+          type,
+          minValue: this.sMinValue,
+          maxValue: this.sMaxValue
+        }
+      })
+    },
+    touchmove(e, type) {
+      const disX = this.movedisX =  e.touches[0].clientX - this.lineLeft;
+
+      //左滑块
+      if(type === 'min'){
+        this.minLeft = Math.floor(disX);
+        //计算相关数值
+        if(this.minCount()) return;
+      }
+
+      //右滑块
+      if(type === 'max'){
+        this.maxLeft =  Math.ceil(disX);
+        //计算相关数值
+        if(this.maxCount()) return;
+      }
+
+      this.tipShow = true;
+      this.tipLeft = Math[type === 'min' ? 'floor': 'ceil'](this.curValue / this.percentage);
+
+
+
+      this.$emit('move', {
+        ...e,
+        custom:{
+          type,
+          minValue: this.sMinValue,
+          maxValue: this.sMaxValue,
+          curValue: this.curValue,
+        }
+      })
+    },
+    touchend(e, type) {
+      console.log(e,'dadsadweweqw')
+      //const disX = e.changedTouches[0].clientX - this.lineLeft;
+      const disX = this.movedisX;
+      if(type === 'min') {
+        this.minCount(); //计算相关数值
+
+        /**
+         * @description 计算对应的最小值
+         */
+        const stepnum = Math.floor(((this.minLeft) * this.percentage) / this.step);
+        this.sMinValue = stepnum * this.step + this.fillMinValue;
+
+      }
+
+      //右滑块
+      if(type === 'max') {
+        this.maxLeft = Math.ceil(disX);
+        this.maxCount(); //计算相关数值
+        this.tipShow = true;
+        this.tipLeft = Math.ceil(this.curValue / this.percentage);
+
+        /**
+         * @description 计算对应的最大值
+         */
+        const stepnum = Math.ceil(((this.maxLeft - this.touchWidth) * this.percentage) / this.step);
+        let sMaxValue = stepnum * this.step;
+        if (this.fillValue - sMaxValue < this.step) {
+          sMaxValue = this.fillValue
+        }
+        this.sMaxValue = sMaxValue + this.fillMinValue;
+      }
+
+      this.tipShow = false;
+
+      let value = [this.sMinValue, this.sMaxValue];
+      this.$emit('end', {
+        ...e,
+        value: value,
+        custom:{
+          type,
+          minValue: this.sMinValue,
+          maxValue: this.sMaxValue
+        }
+      });
+
+      this.$emit('input', value);
+    },
+
+    /**
+     * @description 左滑块计算位置
+     */
+    minCount() {
+      if (this.minLeft < 0) {
+        this.minLeft = 0;
+        this.curValue = Math.floor(this.minLeft * this.percentage);
+        return true;
+      }
+      if (this.maxLeft - this.minLeft <= this.touchWidth) {
+        this.minLeft = this.maxLeft - this.touchWidth;
+        this.curValue = Math.floor(this.minLeft * this.percentage);
+        return true;
+      }
+      this.curValue = Math.floor(this.minLeft * this.percentage);
+      return  false
+    },
+
+    /**
+     * @description 右滑块计算位置
+     */
+    maxCount(){
+      //右滑块滑到右边界
+      if (this.maxLeft > (this.lineWidth + this.touchWidth)) {
+        this.maxLeft = this.lineWidth + this.touchWidth;
+        this.curValue = Math.ceil((this.maxLeft - this.touchWidth) * this.percentage);
+        return true;
+      }
+
+      //右滑块滑到左边界
+      if (this.maxLeft - this.minLeft <= this.touchWidth) {
+        this.maxLeft = this.minLeft + this.touchWidth;
+        this.curValue = Math.ceil((this.maxLeft - this.touchWidth) * this.percentage);
+        return true;
+      }
+      this.curValue = Math.ceil((this.maxLeft - this.touchWidth) * this.percentage);
+      return false
+    }
+  },
+};
+</script>
+
+
+<style lang="scss" scoped>
+$touchWidth: 50rpx; /** circle的宽度 */
+view {
+  box-sizing: border-box;
+}
+.fj-slider-box{
+  padding-top:40rpx;
+
+
+  .fj-v-l,.fj-v-r{position: absolute;font-size: 24rpx;top:-40rpx;}
+  .fj-v-l{left:0}
+  .fj-v-r{right:0}
+}
+.fj-slider {
+  position: relative;
+  height: $touchWidth;
+  .fj-touch-left,
+  .fj-touch-right {
+    opacity: 1;
+    position: absolute;
+    height: $touchWidth;
+    width: $touchWidth;
+    border-radius: 25rpx;
+    z-index: 201;
+  }
+  .tip{
+    display: block;
+    position: absolute;
+    padding:10rpx 20rpx;
+    background: rgba(0,0,0,0.6);
+    color:#fff;
+    top:-80rpx;
+    border-radius: 10rpx;
+    min-width:100rpx;
+    text-align: center;
+  }
+
+  .fj-line ,.fj-line-pull {
+    height: 6rpx;
+    background: #999;
+    margin-top: -5rpx;
+    position: absolute;
+    top: 50%;
+    left: $touchWidth;
+    right: $touchWidth;
+    z-index:200;
+  }
+  .fj-line-pull{
+    z-index: 202;
+  }
+
+  .fj-line-left-b, .fj-line-right-b {
+    height: 100%;
+    background: #999;
+    position: absolute;
+    top: 0;
+    width: 100rpx;
+  }
+}
+</style>
+
+
+
+

package/src/components/XdRedName/XdRedName.vue

@@ -0,0 +1,35 @@
+<template>
+  <view
+    class="user-red-name"
+    :style="{
+      fontSize: size + 'rpx',
+      fontWeight: weight,
+      color: isVip ? 'red': '#333'
+    }"
+  >
+    <slot>用户名称</slot>
+  </view>
+</template>
+
+<script>
+  export default {
+    name: "XdRedName",
+    props: {
+      size: {
+        type: String | Number, //rpx
+        default: 32
+      },
+      weight: {
+        type: String,
+        default: 'normal', //bold,normal, 1xx;
+      },
+      isVip: {
+        type: Boolean,
+        default: false
+      }
+    }
+  }
+</script>
+
+<style scoped lang="less">
+</style>