list.vue

<template>
  <view>
    <view id="header">
      <!--导航栏 navbar-->
      <u-navbar title="选款"
                :border-bottom="false"
                :background="{backgroundColor: 'whitesmoke'}">
      </u-navbar>
      <!--状态栏 tab-->
      <view>
        <u-tabs-swiper ref="uTabs" :list="status" :current="current" @change="tabsChange" :is-scroll="false"
                       name="label"
                       :bar-style="{display: 'none'}"
                       :active-item-style="{
                        fontSize: '32rpx',
                        color: '#AF8D66'
                      }"
                       swiperWidth="750"></u-tabs-swiper>
      </view>
      <!--状态栏 tab-->
      <view v-if="!status[current].close">
        <view class="list-tip u-flex u-p-r-30 u-p-l-30" >

          <text class="u-flex-1" v-if="current === 3">
            已选中{{ selectedLength}} 款
          </text>
          <text class="u-flex-1" v-if="current !== 3">
            {{status[current].label}}总共 {{totalNum}}款
          </text>
          <u-icon name="close" @click="closeTip"></u-icon>
        </view>
      </view>
    </view>
    <!-- 列表内容 -->
    <view class="u-p-r-30 u-p-l-30 body" :style="{ bottom: footerHeight+ 'px', top: headerHeight + 'px' }">
       <view v-for="(item,index) in data">
         <view class="u-flex u-p-t-12 u-p-b-12">
           <text class="u-flex-1">
             {{ item.label }}({{item.children.length}} 款)
           </text>
           <text class="" @click="collapse(index)">
             {{ activeIndex === index ? '收起': '展开' }}
           </text>
         </view>
         <view v-if="activeIndex === index">
           <view class="item bg-fff u-p-30" v-for="(children) in item.children">
             <view class="item-header u-m-b-22">
               <hs-tip-title title="夹克"></hs-tip-title>
             </view>
             <view class="item-body">
               <view>
                 风格 男装｜上装｜25～35岁｜时尚休闲
               </view>
               <view class="u-flex u-m-t-24 u-m-b-30 ">
                 <view class="item-img">
                   <u-image class="item-img" src="https://cdn.uviewui.com/uview/example/fade.jpg" width="100%" height="100%"></u-image>
                 </view>
                 <view class="item-img">
                   <u-image class="item-img" src="https://cdn.uviewui.com/uview/example/fade.jpg" width="100%" height="100%"></u-image>
                 </view>
               </view>
               <view class="bd_split_line"></view>
             </view>
             <view class="item-footer text-right" v-if="children.status !== 3">
               <view class="item-footer-button">
                 <u-button plain shape="circle">放弃</u-button>
               </view>
               <view class="item-footer-button">
                 <u-button type="primary" shape="circle" >选中</u-button>
               </view>
             </view>
           </view>
         </view>

       </view>
    </view>

    <!--底部按钮-->
    <view class="footer" id="footer" v-if="current === 3">
      <view class="footer-btn">
        <view class="custom-style-round-circle custom-style-btn custom-style">
          <view class="custom-style-right submit">
            <view class="title">提交选中</view>
            <view class="desc">提交数量:<text class="color">2款</text></view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import status from './mixins/status'
import dom from './mixins/dom'
import HsTipTitle from "../../components/hs-tip-title/hs-tip-title";
export default {
  name: "list",
  components: {HsTipTitle},
  mixins: [status,dom],
  data() {
    return {
      current: 0, // tabs组件的current值，表示当前活动的tab选项
      activeIndex: 0,
      // data: ,
      res: [
        {date: '12月11日', title: '立领夹克',status: 1},
        {date: '12月11日', title: '立领夹克',status: 1},
        {date: '12月10日', title: '立领夹克1',status: 1},
        {date: '12月10日', title: '立领夹克1',status: 1}
      ] , //列表数据源
    };
  },
  computed:{
    data(){
      function arr2Tree(data, id = "colourGroup") {
        const newList = [],
            map = Array.from(
                new Set(
                    data.map((item) => {
                      return item[id];
                    })
                )
            );
        for (let i = 0; i < data.length; i++) {
          let item = data[i],
              name = item[id],
              index = map.indexOf(name);
          if (newList[index]) {
            newList[index]["children"].push(item);
          } else {
            newList.push({
              label: name,
              children: [item]
            });
          }
        }
        return newList;
      }

      return arr2Tree(this.res,"date");
    },
    totalNum(){
      return this.res.length
    },
    selectedLength(){
      return this.res.filter((item) =>{
        return item.status == 1
      }).length;
    }
  },
  watch:{
    current(){
      this.getHeaderHeight();
      this.getFooterHeight();
    }
  },
  methods: {
    closeTip(){
      this.$set(this.status, this.current,{
        ...this.status[this.current],
        close: true
      })
      this.getHeaderHeight()
    },
    collapse(index){
      this.activeIndex = this.activeIndex === index ? null : index;
    },
    getList(){

    },
    // tabs通知swiper切换
    tabsChange(index) {
      this.current = index;
    },
  }
}
</script>

<style scoped lang="scss">
.list-tip{
  background: #AF8D66;
  line-height: 72rpx;
  color: rgba(0,0,0,0.60);
}
.item{
  background: #fff;
  border-radius: 8rpx;
  margin-bottom: 20rpx;
  &-img{
    width: 160rpx;
    height: 160rpx;
    margin-right: 20rpx;
    border-radius: 8rpx;
    overflow: hidden;
  }

  &-footer{
    &-button{
      width: 160rpx;
      height: 64rpx;
      margin-left: 20rpx;
      display: inline-block;
    }
  }
}
.bd_split_line {
  width: 100%;
  border-top: 1px solid #f6f6f6;
  margin: auto;
  position: relative;
  height: 30rpx;
  &::before {
    content: ' ';
    position: absolute;
    left: -45rpx;
    top: -15rpx;
    display: block;
    width: 30rpx;
    height: 30rpx;
    background: #f6f6f6;
    border-radius: 100rpx;
  }
  &::after {
    content: ' ';
    position: absolute;
    right: -45rpx;
    top: -15rpx;
    display: block;
    width: 30rpx;
    height: 30rpx;
    background: #f6f6f6;
    border-radius: 100rpx;
  }
}
@mixin vue-flex($direction: row) {
  /* #ifndef APP-NVUE */
  display: flex;
  flex-direction: $direction;
  /* #endif */
}
.custom-style{
  color: #fff; height: 88rpx; line-height: 88rpx;
  @include vue-flex;
  &-btn{
    overflow: hidden;
  }
  &-round-circle{
    border-radius: 100rpx;
  }
  /*background: #000;*/
  .custom-style-left{ width: 240rpx; background: #d6d6d6; text-align: center }
  .custom-style-right{ flex: 1; background: rgba(0,0,0,0.80);text-align: center}
  .save{
    font-size: 34rpx;
    color: #000000;
  }
  .submit{
    font-weight: 500;
    font-size: 34rpx;
    line-height: 100%;
    .title{
      margin: 8rpx 0;
    }
    .desc{

      font-size: 20rpx;
      .color{
        color: #DDA973;
      }
    }
  }
}
.body{
  position: absolute;
  width: 100%;
  height: auto;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  overflow-y: auto;

}
.footer {
  position: fixed;
  width: 100%;
  bottom: 0;

  z-index: 998;
  background: #fff;
  box-shadow: 0px -4rpx 6rpx 0px rgba(178,182,214,0.10);
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  .footer-btn{
    padding: 20rpx 60rpx;
  }
}
</style>