jufubao-base 1.0.289-beta2 → 1.0.290-beta1

package/src/components/JfbBaseTfkSearch/XdQueryFilter.vue

@@ -1,354 +0,0 @@
-<template>
-  <view class="xd-query-filter">
-    <view class="filter_wrap" :style="[boxListComp]">
-      <view
-        class="filter_item"
-        v-for="tab in filterTabs"
-        :key="tab.title"
-        :style="[contStyleComp]"
-      >
-        <view class="filter_title">
-          <view>{{tab.title}}</view>
-          <view v-if="isFitler && tab.options.length > collapseNum" class="_ext" @click="switchOpen(tab)">
-            <text>{{tab.open ? '收起' : '展开'}}</text>
-            <xd-font-icon v-if="tab.open" icon="iconshang_up" :size="20"></xd-font-icon>
-            <xd-font-icon v-else icon="iconxia_down" :size="20"></xd-font-icon>
-          </view>
-        </view>
-        <view class="filter_tab">
-          <template v-for="(item,i) in tab.options">
-            <view
-              class="_tag"
-              :style="[itemStyleComp,(isActive(tab, item.value)?labelActColor:labelColor)]"
-              v-if="(!tab.open && i < collapseNum) || tab.open || !isFitler"
-              :key="item.value"
-              :class="{active: isActive(tab, item.value)}"
-              @click="setChooseTag(tab, item)"
-            >{{item.label}}</view>
-          </template>
-        </view>
-      </view>
-    </view>
-    <view class="bottom_btn" v-if="isShowBtn">
-      <xd-button class="xd-button" type="info" width="248rpx" size="small" @click="onReset">重置</xd-button>
-      <xd-button class="xd-button" type="primary" width="248rpx" size="small" @click="onConfirm">确定</xd-button>
-    </view>
-  </view>
-</template>
-
-<script>
-import XdButton from "@/components/XdButton/XdButton"
-import XdFontIcon from "@/components/XdFontIcon/XdFontIcon"
-import Color from "color";
-
-export default {
-  components: {
-    XdButton,
-    XdFontIcon
-  },
-  props: {
-    list: {
-      type: Array,
-      default: function(){
-        return [
-
-        ]
-      }
-    },
-    filterStyle:{
-      type: Object,
-      default(){
-        return {}
-      }
-    },
-    collapseNum: {
-      type: Number,
-      default: 3
-    },
-    filterType:{
-      type: String,
-      default: ""
-    },
-    filterSelected:{
-      type: Object,
-      default(){
-        return {}
-      }
-    },
-  },
-  computed:{
-    itemStyleComp(){
-      let column = 3,columnSpacing = 24;
-
-      let outWidth = uni.getSystemInfoSync().safeArea.width;
-      let columnSpacingWidth = columnSpacing * (column-1) * this.$rpxNum;
-      let marginRL = 96 * this.$rpxNum; //左右默认48rpx
-      let paddingRL = 16  * this.$rpxNum
-
-      return {
-        width: (outWidth - (columnSpacingWidth + marginRL + paddingRL))/column + 'px',
-        padding: `0 ${paddingRL}px`,
-        marginRight: columnSpacing + 'rpx',
-        marginTop: columnSpacing + 'rpx',
-      };
-    },
-    boxListComp(){
-      let maxHeight = this.$root.layoutInfo['bodyMinHeightRpx'] - 500;
-      if(this.$configProject.isPreview) maxHeight = 800;
-      return {
-        backgroundColor: this.filterStyle['filterListColor'] || '#f8f8f8',
-        maxHeight: maxHeight + 'rpx',
-        borderTop: this.filterStyle.filterTopBorder|| '2rpx solid #f8f8f8'
-      }
-    },
-    contStyleComp(){
-      return {
-        backgroundColor: '#fff',
-        marginBottom: (this.filterStyle['filterRowSpacing'] || 16) + 'rpx',
-        padding: (this.filterStyle['filterRowPadding'] || '32rpx 48rpx'),
-      }
-    },
-    labelColor(){
-      let fontStyle = this.filterStyle.filterFontStyle || {}
-      return {
-        color: fontStyle.color ||'#666',
-        borderColor: Color(fontStyle.color || '#666').alpha(0.2).toString(),
-        backgroundColor: fontStyle.backgroundColor || '#f8f8f8',
-      }
-    },
-    labelActColor(){
-      let fontStyle = this.filterStyle.filterActFontStyle || {}
-      let mainColor = fontStyle.color || this.$root.gThemeStyle['--g-theme-mainColor'];
-      return {
-        color: mainColor,
-        borderColor: Color(mainColor).alpha(0.5).toString(),
-        backgroundColor: fontStyle.backgroundColor || Color(mainColor).alpha(0.1).toString(),
-      }
-    },
-  },
-  data(){
-    return {
-      isFitler: true, //是筛选OR快捷方式
-      isShowBtn: false,
-      selectedItems:{},
-      selectedLabels:{},
-      selectedIds:{},
-      filterTabs: [],
-    }
-  },
-  watch: {
-    list(){
-      this.initData();
-    },
-    filterType(){
-      this.initData();
-    },
-  },
-  created() {
-    console.log(this.list,'aaajaj');
-    this.initData();
-  },
-  methods: {
-    initData(){
-      let filterTabs = [];
-      if(this.filterType === 'filter') {
-        filterTabs = this.$xdUniHelper.cloneDeep(this.list);
-        this.isShowBtn = true;
-        this.isFitler = true;
-      }
-      else {
-        this.isFitler = false;
-        filterTabs = this.$xdUniHelper.cloneDeep(this.list).filter(item=>{
-          if( this.filterType === item.value) {
-            this.isShowBtn = item.multiple === true;
-          }
-          return this.filterType === item.value;
-        });
-      }
-
-      filterTabs.map(item=>{
-        //未选择
-        let ids = !item.multiple?'':[];
-        let lables = !item.multiple ?'':[];
-        let items = !item.multiple?'':[];
-
-        //已选中
-        if(this.filterSelected[item.value]) {
-          ids = this.filterSelected[item.value];
-          if(!item.multiple) {
-            item.options.map(item=>{
-              if(ids === item.value) {
-                lables = item.label;
-                items = this.$xdUniHelper.cloneDeep(item);
-              }
-            })
-          }
-          else {
-            item.options.map(item=>{
-              ids.map(it=>{
-                if(it === item.value) {
-                  lables.push(item.label)
-                  items.push(this.$xdUniHelper.cloneDeep(item))
-                }
-              })
-
-            })
-          }
-        }
-
-        this.$set(this.selectedItems, item.value, items);
-        this.$set(this.selectedLabels, item.value, lables);
-        this.$set(this.selectedIds, item.value, ids);
-      });
-
-      this.filterTabs = filterTabs
-    },
-    isActive(tab, value){
-      if(!this.selectedIds[tab.value]) return false
-      return this.selectedIds[tab.value].includes(value);
-    },
-    setSelectData(type,ids, items, labels){
-      this.$set(this.selectedIds, type, ids);
-      this.$set(this.selectedItems, type, items);
-      this.$set(this.selectedLabels, type, labels);
-    },
-
-    setChooseTag(tab, item){
-      //单选
-      if(!tab.multiple) {
-        //取消
-        if(this.selectedIds[tab.value] && this.selectedIds[tab.value].includes(item.value)) {
-          this.setSelectData(tab.value, '', '', '')
-        }
-        //新增
-        else {
-          this.setSelectData(tab.value, item.value, item, item.label);
-          //单选直接触发返回数据
-          if(this.isShowBtn === false) this.onConfirm();
-        }
-      }
-      //多选
-      else {
-        let index =  this.selectedIds[tab.value].indexOf(item.value);
-        //新增
-        if(index === -1) {
-          //选中
-          let ids = this.$xdUniHelper.cloneDeep(this.selectedIds[tab.value] || []),
-            items = this.$xdUniHelper.cloneDeep(this.selectedItems[tab.value] || []),
-            labels = this.$xdUniHelper.cloneDeep(this.selectedLabels[tab.value] || []);
-          ids.push(item.value);
-          items.push(item);
-          labels.push(item.label);
-          this.$set(this.selectedIds, tab.value,ids);
-          this.$set(this.selectedItems, tab.value,items);
-          this.$set(this.selectedLabels, tab.value,labels);
-        }
-        //取消
-        else {
-          this.selectedIds[tab.value].splice(index,1);
-          this.selectedLabels[tab.value].splice(index,1);
-          this.selectedItems[tab.value].splice(index,1);
-        }
-      }
-
-    },
-    switchOpen(tab){
-      this.filterTabs = this.filterTabs.map(item => {
-        if(JSON.stringify(item) === JSON.stringify(tab)) item['open'] = !item['open'];
-        return item;
-      })
-    },
-
-    //重置
-    onReset(){
-      Object.keys(this.selectedIds).map(key=>{
-        let multiple = this.$xdUniHelper.checkVarType(this.selectedIds[key]) === 'array';
-        let value = multiple ?'':[];
-        this.setSelectData(key, value, value,value)
-      })
-
-
-    },
-    onConfirm(){
-      this.$emit("onConfirm", {
-        items: this.$xdUniHelper.cloneDeep(this.selectedItems),
-        labels: this.$xdUniHelper.cloneDeep(this.selectedLabels),
-        ids: this.$xdUniHelper.cloneDeep(this.selectedIds)
-      });
-    }
-  }
-}
-</script>
-
-<style lang="less" scoped>
-  .filter_wrap{
-    overflow: auto;
-    max-height: 50vh;
-
-    .filter_item{
-      &:last-child {
-        margin-bottom: 0!important;
-      }
-    }
-    .filter_title{
-      color: #333333;
-      font-size: 28rpx;
-      margin-bottom: 1.2rem;
-      font-weight: bold;
-      display: flex;
-      justify-content: space-between;
-
-      ._ext{
-        display: flex;
-        align-items: center;
-        font-size: 24rpx;
-        color: #BBBBBB;
-        font-weight: normal;
-
-        & > text {
-          padding-right: unit(10, rpx);
-        }
-      }
-    }
-
-    .filter_tab{
-      display: flex;
-      flex-wrap: wrap;
-      justify-content: flex-start;
-      align-items: center;
-      max-height: 50vh;
-
-      & > ._tag{
-        text-align: center;
-        line-height: 66rpx;
-        border-radius: 4rpx;
-        font-size: 24rpx;
-        color: #666;
-        text-overflow: ellipsis;
-        overflow: hidden;
-        white-space: nowrap;
-        box-sizing: border-box;
-        background-color: #f8f8f8;
-
-        &:nth-child(3n){
-          margin-right: 0!important;
-        }
-        &:nth-child(1),&:nth-child(2),&:nth-child(3) {
-          margin-top: 0!important;
-        }
-      }
-    }
-
-  }
-
-  .bottom_btn{
-    display: flex;
-    justify-content: center;
-    padding: 16rpx 32rpx;
-    border-top: 2rpx solid #f8f8f8;
-
-    .xd-button{
-      margin: 0 32rpx;
-    }
-  }
-</style>

package/src/components/JfbBaseTfkSearch/XdQuerySort.vue

@@ -1,192 +0,0 @@
-<template>
-  <view class="xd-query-sort" :style="[boxStyleComp]">
-    <view
-      v-for="item in sortList"
-      :key="item.key"
-      class="cell_wrap"
-      :style="[{borderBottom:lineBorder}]"
-    >
-      <view class="cell_label">{{item.label}}</view>
-      <view class="sub_value" v-if="item.children && item.children.length">
-        <view
-          class="sub_tag"
-          :class="{active: (item.checked && sub.value === item.value)}"
-          v-for="sub in item.children" :key="sub.value"
-          @click="handleSubClick(item, sub.value)"
-          :style="[(item.checked && sub.value === item.value)?labelActColor:labelColor]"
-        >{{sub.label}}</view>
-      </view>
-      <view v-else :key="renderRadio">
-        <xd-radio
-          @change="e => handleChange(e, item)"
-          size="mini"
-          :value="item.checked"
-          :color="labelActColor.color"
-        ></xd-radio>
-      </view>
-    </view>
-  </view>
-</template>
-
-<script>
-import XdRadio from "@/components/XdRadio/XdRadio"
-import Color from "color"
-
-export default {
-  components: {
-    XdRadio
-  },
-  props: {
-    list: {
-      type: Array,
-      default: () => {
-        return [
-          {
-            label: "综合",
-            key: "default",
-            value: "default"
-          },
-          {
-            label: "销量",
-            key: "sale_num",
-            children: [
-              {label: "由高到低", value: 'sale_num_desc'},
-              {label: "由低到高", value: 'sale_num_asc'}
-            ]
-          },
-          {
-            label: "价格",
-            key: "price",
-            children: [
-              {label: "由高到低", value: 'price_desc'},
-              {label: "由低到高", value: 'price_asc'}
-            ]
-          }
-        ]
-      }
-    },
-    sort: {
-      type: String,
-      default: "default"
-    },
-    filterStyle:{
-      type: Object,
-      default(){
-        return {}
-      }
-    }
-  },
-  watch: {
-    sortList(n){
-      this.renderRadio = Date.now();
-      let cur = this.sortList.find(item => item.checked);
-      if(cur) this.$emit("onConfirm", cur)
-    }
-  },
-  computed:{
-    lineBorder(){
-      if(['rgba(255, 255, 255, 1)','#fff','#ffffff','#FFF', '#FFFFFF'].includes(this.filterStyle.filterListColor)) {
-        return '1px solid #F5F5F5';
-      }
-      return `1px solid ${Color(this.filterStyle.filterListColor).lighten(.2).hex().toString()}`
-    },
-    labelColor(){
-      return {
-        color: this.filterStyle.filterFontStyle.color,
-        borderColor: Color(this.filterStyle.filterFontStyle.color).alpha(0.2).toString(),
-        backgroundColor:  this.filterStyle.filterFontStyle.backgroundColor,
-      }
-    },
-    labelActColor(){
-      return {
-        color: this.filterStyle.filterActFontStyle.color,
-        borderColor: this.filterStyle.filterActFontStyle.color,
-        backgroundColor:  this.filterStyle.filterActFontStyle.backgroundColor,
-      }
-    },
-    boxStyleComp(){
-      return {
-        backgroundColor: this.filterStyle.filterListColor,
-      }
-    },
-  },
-  data(){
-    return {
-      sortList: [],
-      renderRadio: "renderRadio"
-    }
-  },
-  created(){
-    this.sortList = this.list.map(item => {
-      if(this.sort.startsWith(item.key)) {
-        item.checked = true;
-        item.value = this.sort;
-      }else{
-        item.value = "";
-        item.checked = false;
-      }
-      return item;
-    });
-
-  },
-  methods: {
-    handleSubClick(item, value){
-      this.sortList = this.sortList.map(tt => {
-        tt['checked'] = false;
-        if(tt.key == item.key){
-          tt.value = value;
-          tt['checked'] = true;
-        }
-        return tt;
-      })
-    },
-    handleChange(flat, item){
-      if(flat) {
-        this.sortList = this.sortList.map(tt => {
-          tt['checked'] = false;
-          if(tt.key == item.key){
-            tt['checked'] = true;
-            tt['value'] = tt.key;
-          }
-          return tt;
-        })
-      }
-    }
-  }
-}
-</script>
-
-<style lang="less" scoped>
-  .xd-query-sort{
-    box-shadow: 20rpx 20rpx 20rpx 0 rgba(0,0,0, .29);
-  }
-  .cell_wrap{
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    border-bottom: 1px solid #F5F5F5;
-    padding: 20rpx 48rpx 20rpx 88rpx;
-    .cell_label{
-      font-size: 28rpx;
-      color: #333333;
-    }
-    .sub_value{
-      display: flex;
-      .sub_tag{
-        font-size: 24rpx;
-        color: #AAAAAA;
-        border: 1px solid #F2F2F2;
-        line-height: 60rpx;
-        width: 160rpx;
-        text-align: center;
-        border-radius: 80rpx;
-        margin-left: 24rpx;
-
-        &.active{
-          color: #A5D63F;
-          border-color: #A5D63F;
-        }
-      }
-    }
-  }
-</style>