gxd-uni-library-editx 1.0.0

package/src/components/XdFilter/XdFilter.vue

@@ -0,0 +1,541 @@
+<template>
+  <view>
+    <xd-right-to-left
+      :show.sync="uiShow"
+      min-width="90vw"
+      :bar-height="100"
+      :z-index="2001"
+      :click-mash-close="true"
+    >
+      <view class="xd-filter__dailog">
+        <view class="xd-filter__dailog-item" v-for="(item,index) in filterList" :key="item.id">
+          <view class="xd-filter__dailog-show-more">
+            <view>{{item.title}}</view>
+            <view
+              style="display: flex"
+              v-if="item.showMore"
+              @click="handleShowMore(item,index,item.close)"
+            >
+              <text style="margin-right: 5px">{{ item.showMoreText }}</text>
+              <xd-font-icon
+                :icon="
+                    item.close ? 'iconjiantouxia' : 'iconicon_arrow_top'
+                  "
+                size="22"
+              ></xd-font-icon>
+            </view>
+          </view>
+          <view class="xd-filter__dailog-item-buttons">
+            <view v-for="(BItem,BIndex) in item.options" :key="BItem.id">
+              <xd-tag
+                :selected="BItem.selected"
+                :inverted="!BItem.selected"
+                width="150"
+                type="primary"
+                radius="10rpx"
+                @click="handleSelect(item,BItem,BIndex,index)"
+              >{{ BItem.label }}
+              </xd-tag
+              >
+            </view>
+          </view>
+        </view>
+
+        <view class="xd-filter__dailog-btn">
+          <view>
+            <xd-button
+              @click="handleClear"
+              radius="10rpx"
+              type="default"
+              size="mini"
+            >重置
+            </xd-button
+            >
+          </view>
+          <view>
+            <xd-button
+              @click="handleConfirm"
+              radius="10rpx"
+              type="primary"
+              size="mini"
+            >确认
+            </xd-button
+            >
+          </view>
+        </view>
+      </view>
+    </xd-right-to-left>
+
+  </view>
+</template>
+
+<script>
+  import XdRightToLeft from "../XdRightToLeft/XdRightToLeft";
+  import XdTag from "../XdTag/XdTag";
+  import XdFontIcon from "../XdFontIcon/XdFontIcon";
+  import XdButton from "../XdButton/XdButton";
+
+  /**
+   * XdTabScroll 全局Ui
+   * @description 左右滚动项目路径
+   * @property list {String} 父组件传进来的数据 默认：null
+   * @property show {Boolean} 弹框是否展示
+   * @property max {Number} 单个区块最大展示tag数
+   *
+   * @event {Function} confirm    改变事件
+   */
+  export default {
+    name: 'XdFilter',
+    components: {
+      XdRightToLeft,
+      XdTag,
+      XdFontIcon,
+      XdButton
+    },
+    props: {
+      list: {
+        type: Array | null,
+        default() {
+          return []
+        }
+      },
+      show: {
+        type: Boolean,
+        default: false
+      },
+      max: {
+        type: Number,
+        default: 9
+      }
+    },
+    data() {
+      return {
+        uiShow: false,
+        selectList: {}, //选中列表
+        uiList: [],
+
+        testList: [
+          {
+            title: '国产/进口',
+            key: 'import',
+            top_show: 1,
+            multiple: true,
+            options: [
+              {
+                label: '国产',
+                key: 'attr-6-国产',
+                selected: true,
+              },
+              {
+                label: '进口',
+                key: 'attr-6-进口',
+                selected: false
+              }, {
+                label: '进口',
+                key: 'attr-6-进口',
+                selected: false
+              },
+              {
+                label: '进口',
+                key: 'attr-6-进口',
+                selected: false
+              },
+              {
+                label: '进口',
+                key: 'attr-6-进口',
+                selected: false
+              },
+              {
+                label: '进口',
+                key: 'attr-6-进口',
+                selected: false
+              },
+              {
+                label: '进口',
+                key: 'attr-6-进口',
+                selected: false
+              },
+              {
+                label: '进口',
+                key: 'attr-6-进口',
+                selected: false
+              },
+              {
+                label: '进口',
+                key: 'attr-6-进口',
+                selected: false
+              },
+              {
+                label: '进口',
+                key: 'attr-6-进口',
+                selected: false
+              },
+              {
+                label: '进口',
+                key: 'attr-6-进口',
+                selected: true
+              }
+            ]
+          },
+          {
+            title: '尺寸(英寸)',
+            key: 'size',
+            multiple: true,
+            top_show: 1,
+            options: [
+              {
+                label: '1英寸',
+                key: 'attr-5-1英寸',
+                selected: false
+              },
+              {
+                label: '2英寸',
+                key: 'attr-5-2英寸',
+                selected: false
+              },
+              {
+                label: '10寸',
+                key: 'attr-5-10寸',
+                selected: false
+              }
+            ]
+          },
+          {
+            title: '口味',
+            key: 'taste',
+            top_show: 1,
+            multiple: false,
+            options: [
+              {
+                label: '原味',
+                key: 'attr-2-原味',
+                selected: false
+              },
+              {
+                label: '奶油',
+                key: 'attr-2-奶油',
+                selected: false
+              },
+              {
+                label: '巧克力',
+                key: 'attr-2-巧克力',
+                selected: false
+              }
+            ]
+          },
+          {
+            title: '人群',
+            key: 'people',
+            top_show: 1,
+            multiple: false,
+            options: [
+              {
+                label: '小朋友',
+                key: 'attr-1-小朋友',
+                selected: false
+              },
+              {
+                label: '爱人',
+                key: 'attr-1-爱人',
+                selected: false
+              },
+              {
+                label: '长辈',
+                key: 'attr-1-长辈',
+                selected: false
+              }
+            ]
+          },
+          {
+            title: '使用人数',
+            key: 'number',
+            top_show: 1,
+            multiple: false,
+            options: [
+              {
+                label: '2人',
+                key: 'attr-7-2人',
+                selected: false
+              },
+              {
+                label: '3-6人',
+                key: 'attr-7-3-6人',
+                selected: false
+              },
+              {
+                label: '6-10人',
+                key: 'attr-7-6-10人',
+                selected: false
+              }
+            ]
+          }
+        ],
+        filterList: [], //展示的数组
+        all: [], //完整的筛选选项
+        spliceList: [], //截取后的数组
+      };
+    },
+
+    watch: {
+      show(val) {
+        this.uiShow = val;
+      },
+
+      uiShow(value) {
+        this.$emit('update:show', value);
+      }
+    },
+
+    computed: {},
+
+    created() {
+      if (this.list === null) {
+        this.uiList = this.$xdUniHelper.cloneDeep(this.testList);
+      } else {
+        this.uiList = this.$xdUniHelper.cloneDeep(this.list);
+      }
+      this.uiShow = this.show;
+      this.init()
+    },
+
+    mounted() {
+
+    },
+
+    methods: {
+      init() {
+        //1、将请求数据处理为两个数组：（1）、包含全部过滤选项的数组 （2）、截取后的数组
+        this.uiList.map((item, index) => {
+          //(1) 检查是否有默认选中项
+          let flag = item.options.some(item => item.selected)
+          if (flag) {
+            this.selectList[item.key] = []
+          }
+          item.options.map((SItem, SIndex) => {
+            SItem.id = SIndex;
+            SItem.parent_id = index
+            if (SItem.selected) {
+              //(2) 添加默认选中项
+              this.selectList[item.key].push(SItem)
+            }
+          })
+          this.all.push(item.options)
+          if (item.options.length > this.max) {
+            this.spliceList.push(this.$xdUniHelper.cloneDeep(item.options).splice(0, this.max))
+          } else {
+            this.spliceList.push(item.options)
+          }
+        })
+
+        //2、对最终展示的数组的options进行默认赋值
+        this.filterList = this.uiList.map((item, index) => {
+          if (item.options.length > this.max) {
+            item['showMore'] = true
+            item['showMoreText'] = '展开'
+            item['close'] = true
+          }
+          item.options = this.spliceList[index]
+          item.id = index
+          return item
+        })
+      },
+
+      // 展示更多列表
+      handleShowMore(item, index, val) {
+        //1、val为true时，需要展开列表，文本为'关闭 2、val为false时，需要关闭列表，文本为展开
+        if (val) {
+          let temp = this.$xdUniHelper.cloneDeep(this.all[index])
+          for (let key in this.selectList) {
+            if (key === item.key) {
+              temp.map(MItem => {
+                MItem.selected = false
+                this.selectList[key].map(SItem => {
+                  if (SItem.key === MItem.key && SItem.id === MItem.id) {
+                    MItem.selected = SItem.selected
+                  }
+                })
+              })
+            }
+          }
+          this.filterList[index]['close'] = !val
+          this.filterList[index]['showMoreText'] = '关闭'
+          this.filterList[index]['options'] = temp
+        } else {
+          let temp = this.$xdUniHelper.cloneDeep(this.spliceList[index])
+          for (let key in this.selectList) {
+            if (key === item.key) {
+              temp.map(MItem => {
+                MItem.selected = false
+                this.selectList[key].map(SItem => {
+                  if (SItem.key === MItem.key && SItem.id === MItem.id) {
+                    MItem.selected = SItem.selected
+                  }
+                })
+              })
+            }
+          }
+          this.filterList[index]['close'] = !val
+          this.filterList[index]['showMoreText'] = '展开'
+          this.filterList[index]['options'] = temp
+        }
+
+      },
+
+      // 选中过滤项
+      handleSelect(item, BItem, BIndex, index) {
+        //1、获取selectList的key集合
+        let keys = Object.keys(this.selectList)
+        //2、判断当前区块是否操作过，如果操作过直接进行添加或者删除，如果没有在selectList中添加对应的数组
+        if (!keys.find(KItem => item.key === KItem)) {
+          this.selectList[item.key] = []
+        }
+        //3、判断是多选区块还是但选区块
+        if (item.multiple) {
+          BItem.selected = !BItem.selected
+          BItem.multiple = item.multiple
+          //4、多选状态下判断是选中还是取消选中
+          if (BItem.selected) {
+            //5、处理多选下选择不限的情况
+            if(BItem.value === 0) {
+              this.selectList[item.key] = []
+                this.filterList.map((SItem, index, arr) => {
+                  if (SItem.key === item.key) {
+                    SItem.options.map(MItem => {
+                      if (MItem.value !== 0) {
+                        MItem.selected = false
+                      }
+                    })
+                  }
+                })
+              this.selectList[item.key].push(BItem)
+            } else {
+              this.selectList[item.key].map((SItem, index, arr) => {
+                if (SItem.value === 0) {
+                  arr.splice(index, 1)
+                }
+              })
+
+              this.filterList.map((SItem, index, arr) => {
+                if (SItem.key === item.key) {
+                  SItem.options.map(MItem => {
+                    if (MItem.value === 0) {
+                      MItem.selected = false
+                    }
+                  })
+                }
+              })
+              this.selectList[item.key].push(BItem)
+            }
+
+          } else {
+            this.selectList[item.key].map((SItem, index, arr) => {
+              if (SItem.id === BItem.id && SItem.parent_id === BItem.parent_id) {
+                arr.splice(index, 1)
+              }
+            })
+          }
+        } else {
+          BItem.selected = true
+          BItem.multiple = item.multiple
+          //4、单选状态下替换
+          this.selectList[item.key].splice(0, 1, BItem)
+          this.filterList.map((SItem, index, arr) => {
+            if (SItem.key === item.key) {
+              SItem.options.map(MItem => {
+                if (MItem.id !== BItem.id) {
+                  MItem.selected = false
+                }
+              })
+            }
+          })
+        }
+        // }
+        this.$emit('onChange', this.selectList)
+      },
+
+      /**
+       * @description 重置
+       */
+      handleClear() {
+        if(Object.keys(this.selectList).length > 0) {
+          for (let key in this.selectList) {
+            this.selectList[key] = []
+          }
+
+          this.filterList.map(item => {
+            item.options.map(SItem => {
+              if (SItem.value === 0) {
+                SItem.selected = true
+                this.selectList[item.key] = []
+                this.selectList[item.key].push(SItem)
+              } else {
+                SItem.selected = false
+              }
+            })
+          })
+        }
+        this.$emit('clear')
+      },
+
+      /**
+       * @description 确认
+       */
+      handleConfirm() {
+        this.$emit('confirm', this.selectList)
+      }
+    }
+  }
+</script>
+
+<style lang="less">
+  .xd-filter {
+    &__dailog {
+      padding: unit(70, rpx) unit(10, rpx) 0;
+
+      &-item {
+        padding: 0 unit(12, rpx);
+        margin-top: unit(20, rpx);
+
+        &-buttons {
+          display: flex;
+          justify-content: flex-start;
+          flex-wrap: wrap;
+
+          & > view {
+            flex-shrink: 0;
+            margin-left: unit(20, rpx);
+            margin-top: unit(20, rpx);
+          }
+
+        }
+
+        & > view:first-child {
+          height: unit(40, rpx);
+          line-height: unit(40, rpx);
+          font-size: @xd-font-size-base;
+          font-weight: bold;
+        }
+      }
+
+      &-btn {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding-top: unit(80, rpx);
+        padding-bottom: unit(20, rpx);
+
+        & > view {
+          width: 46%;
+          margin: 0 unit(12, rpx);
+        }
+      }
+
+      &-show-more {
+        display: flex;
+        justify-content: space-between;
+      }
+    }
+
+  }
+
+</style>

package/src/components/XdFontIcon/XdFontIcon.vue

@@ -0,0 +1,165 @@
+<template>
+  <view :class="getIconName" :style="getStyle" @click="handleClick"></view>
+</template>
+<script>
+  import helper from "@/utils/helper";
+  /**
+   * XdFontIcon 全局Ui
+   * @description 兼容iconfont图标功能
+   * @tutorial
+   * @property {Number} size          图标大小（可选） 默认：40rpx
+   * @property {Number|String} width  图标宽度（可选）
+   * @property {Number|String} height 图标高度（可选）
+   * @property {String} icon          图标样式名字  默认为 : xxxiconfont xxx
+   * @property {String} textShadow    启动文字阴影功能，其值与css原生属性保存一直，例如：0,0,10px rgba(0,0,0,0.5)
+   * @property {String} gradualColor  启动ICON线性渐变 其值与css原生属性保存一直, 例如：rgba(30,87,153,1) 0%,rgba(41,137,216,1) 50%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%
+   * @property {String} isGradual     是否启用线性渐变 默认值：false
+   * @property {String} gradualType   线性渐变类型  默认值：to right （to right 左右），（to right 左右），（135deg  左上到右下），（45deg 左下到右上（角度））
+   * @event {Function} click          点击是事件
+   */
+  export default {
+    name: "XdFontIcon",
+    props:{
+      size: {
+        type: Number|String,
+        default: 40
+      },
+      width: {
+        type: Number | String,
+        default: '',
+      },
+      height: {
+        type: Number | String,
+        default: '',
+      },
+      color: {
+        type: String,
+        default: '',
+      },
+      icon: {
+        type:String,
+        required: true
+      },
+
+      /**仅支持线性渐变******/
+      textShadow: {
+        type: String,
+        default: ''
+      },
+      //rgba(30,87,153,1) 0%,rgba(41,137,216,1) 50%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%
+      gradualColor: {
+        type: String,
+        default: '',
+      },
+      isGradual: {
+        type: Boolean,
+        default: false,
+      },
+      //63deg
+      gradualType: {
+        type: String,
+        //to right 左右
+        //to bottom 上下
+        //135deg  左上到右下（角度）
+        //45deg 左下到右上（角度）
+        default: 'to right',
+      }
+      /**仅支持线性渐变******/
+    },
+    data(){
+      return {
+        isLandScape: false, //false=>竖屏 true=>横屏
+        rpxNum: null,
+        pxNum: null,
+      }
+    },
+    created() {},
+
+    computed: {
+      /**
+       * @description 线性渐变 与 阴影
+       * @returns {string}
+       */
+      getBGGradient(){
+        let temp = '';
+        if(this.textShadow) {
+          temp += `;text-shadow:${this.textShadow}`
+        }
+        if(this.isGradual && this.gradualColor && this.gradualType) {
+          temp += `;background: linear-gradient(${this.gradualType}, ${this.gradualColor})`;
+          temp += ';-webkit-background-clip: text';
+          temp+= ';-webkit-text-fill-color: transparent'
+        }
+        return temp;
+      },
+
+      /**
+       * @description 宽高 与 文字大小
+       * @returns {string}
+       */
+      getWidthAndHeightAndSize(){
+        let temp = '';
+        if (this.size) {
+          let size = this.size;
+          if (helper.checkVarType(this.size) === 'string') {
+            size = Number(this.size);
+          }
+          size = this.$isPortrait ? size : size / this.$portrait;
+          temp += `font-size:${size}rpx`;
+        }
+        if(this.width) {
+          let width = this.width;
+          if(helper.checkVarType(this.width) === 'string') {
+            width = Number(this.width);
+          }
+          temp += `;width:${width}rpx`;
+        }
+        if (this.height) {
+          let height = this.width;
+          if (helper.checkVarType(this.height) === 'string') {
+            height = Number(this.height);
+          }
+          temp += `;height:${height}rpx`;
+        }
+
+        return temp;
+      },
+
+      getStyle(){
+        let style = this.getWidthAndHeightAndSize;
+        if (this.color) style += `;color:${this.color}`;
+        style += `${this.getBGGradient}`;
+        return style
+      },
+
+      getIconName(){
+        let icon = this.icon.split(' ');
+        let iconClass = `xd-iconfont xduniiconfont ${this.icon}`;
+        if(icon.length > 1) {
+          iconClass = `xd-iconfont ${this.icon}`
+        }
+        return iconClass;
+      }
+    },
+
+    methods:{
+      handleClick(e){
+        this.$emit('click',e)
+      }
+    }
+
+  }
+</script>
+
+<style lang="less">
+ @import "css/icon.less";
+
+ .xd-iconfont {
+   text-align: center;
+   display: flex;
+   justify-content: center;
+   align-items: center;
+   font-weight: normal;
+   box-sizing: border-box;
+ }
+</style>