yos_web/src/SDrpManagement/ProductGroup/index.vue

<template>
  <div class="group container normal-panel normal-margin">
    <div style="display:flex;align-items:center;margin-bottom:16px">
      <el-input
          placeholder="请输入搜索内容"
          suffix-icon="el-icon-search"
          v-model="params.content.where.condition"
          style="width:200px"
          size="mini"
          class="input-with-select inline-16"
          @keyup.native.enter="getProductGroup(params.content.pageNumber=1)"
          @clear="clearData"
          clearable>
      </el-input>
    </div>
    <selectClass @brandChange="brandChange" @onClassChange="onClassChange" @Search="Search" @clearSearch="clearSearch" @clickField="clickField" :default="true"></selectClass>
    <div v-if="Object.keys(productGroup).length > 0">
      <div class="group-list content">
        <div class="group-item" v-for="item in productGroup" :key="item.sa_itemgroupid" @click="itemClick(item)">
          <div class="top">
            <el-image style="width:100%" :src="item.attinfos[0].url" fit="cover" />
          </div>
          <div class="bottom">
            <p class="title">{{item.groupname}}</p>
            <p class="descript">{{item.groupnum}}</p>
            <p class="descript"><span v-for="(cls,index) in item.itemclass" :key="cls.index">{{index === item.itemclass.length -1 ?cls.itemclassfullname:cls.itemclassfullname + ','}}</span></p>
            <p class="price descript">价格：<span style="color:red;font-size:16px"><small>¥</small>{{item.minprice}}</span>&nbsp;~&nbsp;<span style="color:red;font-size:16px"><small>¥</small>{{item.maxprice}}</span></p>
          </div>
        </div>
      </div>
    </div>
    <el-empty description="暂无数据" v-else></el-empty>
     <div style="text-align:center;padding-top:36px">
      <el-pagination
        background
        small
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-size="params.content.pageSize"
        layout="total, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
  </div>
  </div>
</template>

<script>
import selectClass from './modules/Select.vue'
export default {
  name: 'productgroup',
  data() {
    return {
      brandList:'',
      brandId:0,
      tablecols:[],
      productGroup:'',
      params: {
        "id": "20220926142203",
        "content": {
          "pageSize":20,
          "pageNumber":1,
          "nocache":true,
          "brandids":[],

          "where":{
              "condition":"",
            "tradefield":'',
          }
        }
      },
      total:0,
      currentPage:0
    };
  },
  components:{selectClass},
  computed:{
  },
  watch:{
  },
  created() {
    this.getbrandList()
    this.tablecols = this.tool.tabelCol(this.$route.name).productGroupTable.tablecols
  },
  methods: {
    /* 获取品牌数据 */
    async getbrandList() {
      let res = await this.$api.requested({
        "id": "20220922085103",
        "content": {
          "nocache":true,
          "where":{
              "condition":""
          }
        }
      })
      this.brandList = res.data.map(item => {
        return {
          label:item.brandname,
          value:item.sa_brandid
        }
      })
      this.brandId = this.brandList ? [this.brandList[0].value] : [0]
      this.getProductGroup()
    },
    async getProductGroup() {
      this.params.content.brandids = this.brandId
      let res = await this.$api.requested(this.params)
      res.data = res.data.map(e=>{
        if (e.attinfos.length > 0) {
          return e
        } else {
          e.attinfos.push({
            url:e.cover
          })
          return e
        }
      })
      console.log(res.data,'--')
      this.productGroup = res.data
      this.total = res.total
      this.currentPage = res.pageNumber
    },
    itemClick(id) {
      this.$router.push({
        path:'/groupDetail',
        query: {
          id:id.sa_itemgroupid,
          brandid:id.sa_brandid
        }
      })
    },
    brandChange(id) {
      this.brandId = id
      this.getProductGroup()
    },
    onClassChange (n) {
      this.params.content.where.itemclassid = n.itemclassid
      this.getProductGroup()
    },
    pageChange(n) {
      this.params.content.pageNumber = n
      this.getProductGroup()
    },
    Search(data) {
      this.params.content.where.condition = data
      this.params.content.pageNumber = 1
      this.getProductGroup()
    },
    clearSearch() {
      this.params.content.where.condition = ''
      this.params.content.pageNumber = 1
      this.getProductGroup()
    },
    clickField (item) {
      console.log(item)
      this.params.content.where.tradefield = item.tradefield
      this.getProductGroup()
    },
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.params.content.pageSize = val
      this.getProductGroup()
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.params.content.pageNumber = val
      this.getProductGroup()
    },
    clearData(){
      this.params.content.pageNumber = 1
      this.getProductGroup()
    },
  },
  beforeRouteLeave (to, from,next) {
    if (to.name == 'groupDetail') {
      this.$store.commit('setPageCache',['productgroup'])
    } else {
      this.$store.commit('setPageCache',[])
    }
    console.log(this.$store.state.pageCache);
    
    next()
  }
};
</script>

<style scoped>
/* @media only screen and (max-width: 1200px) {
  .gtc {
    grid-template-columns: repeat(8, 1fr);
  }
} */
.content{
  height:calc(100vh - 400px);
  overflow-y: scroll;
}
.group .group-list {
  /* display: grid; */
  /* column-gap: 24px; */
  box-sizing: border-box;
  background-color: transparent;
  /* grid-template-columns: repeat(8, 1fr); */
  padding-top:36px;
  display: flex;
  flex-wrap: wrap;
}
.group .group-list .group-item {
  min-width: 261px;
  max-width: 357px;
  background: #ffffff;
  transition: all 0.1s ease-in;
  cursor: pointer;
  overflow: hidden;
  margin-bottom: 36px;
  margin-right: 16px;
}
.group .group-list .group-item .el-image {
  transition: transform 0.3s;
}
.group .group-list .group-item:hover .top .el-image {
  transform: scale(1.3);
}
.group .group-list .group-item .top {
  height: 150px;
  border-top-right-radius: 4px;
  border-top-left-radius: 4px;
  overflow: hidden;
  display: flex;
  justify-content: space-around;
}
.group .group-list .group-item .bottom {
  padding: 10px;
  border:1px solid #f1f2f3;
  border-top:none;
}
.group .group-list .group-item .bottom .title {
  font-size: 14px;
  font-family: PingFang SC-Bold, PingFang SC;
  font-weight: bold;
  color: #333333;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  -webkit-line-clamp: 1;
  width: 100%;
  margin-bottom: 5px;
}
.group .group-list .group-item .bottom .descript {
  font-size: 12px;
  font-family: PingFang SC-Regular, PingFang SC;
  font-weight: 400;
  color: #666666;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  -webkit-line-clamp: 1;
  width: 100%;
  margin-bottom: 4px;
}
.group .group-list .group-item .bottom .people {
  font-size: 10px;
  font-family: PingFang SC-Regular, PingFang SC;
  font-weight: 400;
  color: #999;
}
.page {
  display: flex;
  flex-direction: row-reverse;
}
</style>