|
@@ -1,27 +1,36 @@
|
|
|
<template>
|
|
|
- <div class="group container normal-panel normal-margin">
|
|
|
+ <div class="group normal-margin">
|
|
|
<selectClass @brandChange="brandChange" @Search="Search" @clearSearch="clearSearch" :default="true"></selectClass>
|
|
|
- <div class="content" v-if="Object.keys(productGroup).length > 0">
|
|
|
- <div class="group-list">
|
|
|
- <div class="group-item" v-for="item in productGroup" :key="item.sa_itemgroupid" @click="itemClick(item)">
|
|
|
- <div class="top">
|
|
|
- <el-image :src="Object.keys(item.attinfos).length > 0 ? item.attinfos[0].url : ''" fit="fill" />
|
|
|
+ <div class="container" v-if="productGroup.length > 0">
|
|
|
+ <el-row style="height:calc(100vh - 300px);overflow-y:scroll" :gutter="20">
|
|
|
+ <el-col @click.native="itemClick(item)" :span="6" v-for="item in productGroup" :key="item.index">
|
|
|
+ <div class="product-card">
|
|
|
+ <div class="product-image">
|
|
|
+ <img style="width:100%" :src="item.attinfos[0]?item.attinfos[0].url:''" alt="">
|
|
|
+ </div>
|
|
|
+ <div class="product-info">
|
|
|
+ <p>{{item.groupname}}</p>
|
|
|
+ <p class="product-itemno">商品组编号:{{item.groupnum}}</p>
|
|
|
+ <p class="product-itemno">所属营销分类:{{item.itemclassname}}</p>
|
|
|
+ <!-- <div class="flex-align-center flex-between">
|
|
|
+ <p><span class="product-price">¥{{item.gradeprice}}</span> <span class="text-throughline">¥{{item.oldprice}}</span></p>
|
|
|
+ <div class="shopcart-btn">
|
|
|
+ <i @click.stop="insertToShopCart(item)" style="font-size:1.5rem;color:#666" class="el-icon-shopping-cart-2"></i>
|
|
|
+ </div>
|
|
|
+ </div> -->
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <div class="bottom">
|
|
|
- <p class="title">商品组名称:{{item.groupname}}</p>
|
|
|
- <p class="descript">商品组编号:{{item.groupnum}}</p>
|
|
|
- <p class="descript">所属营销分类:{{item.itemclassname}}</p>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="page">
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <div style="text-align:center">
|
|
|
<pagination style="padding-bottom:0" :total="total" :pageSize="params.content.pageSize" :currentPage="params.content.pageNumber"
|
|
|
@pageChange="pageChange">
|
|
|
</pagination>
|
|
|
</div>
|
|
|
-
|
|
|
</div>
|
|
|
- <el-empty description="暂无数据" v-else></el-empty>
|
|
|
+ <div style="height:calc(100vh - 300px)" class="flex-align-center flex-around" v-else>
|
|
|
+ <el-empty :image="emptyUrl" description="暂无商品"></el-empty>
|
|
|
+ </div>
|
|
|
|
|
|
</div>
|
|
|
</template>
|
|
@@ -52,6 +61,8 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
total:0,
|
|
|
+ currentPage:0,
|
|
|
+ emptyUrl:require('../../assets/Empty.png'),
|
|
|
};
|
|
|
},
|
|
|
components:{selectClass,Pagination},
|
|
@@ -91,7 +102,7 @@ export default {
|
|
|
let res = await this.$api.requested(this.params)
|
|
|
this.productGroup = res.data
|
|
|
this.total = res.total
|
|
|
- console.log(this.productGroup);
|
|
|
+ this.currentPage = res.pageNumber
|
|
|
},
|
|
|
itemClick(id) {
|
|
|
this.$router.push({
|
|
@@ -125,75 +136,43 @@ export default {
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
|
-*{
|
|
|
- box-sizing: border-box;
|
|
|
+.product-card{
|
|
|
+ padding: 10px;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ background: #fff;
|
|
|
+ transition: all .2s linear;
|
|
|
+ cursor: pointer;
|
|
|
}
|
|
|
-.group .group-list {
|
|
|
+.product-image{
|
|
|
display: flex;
|
|
|
- flex-wrap: wrap;
|
|
|
- margin-top: 16px;
|
|
|
-}
|
|
|
-.group .group-list .group-item {
|
|
|
- width: 212px;
|
|
|
- height: 250px;
|
|
|
- background: #ffffff;
|
|
|
- transition: all 0.1s ease-in;
|
|
|
- margin: 0 16px 16px 0;
|
|
|
- cursor: pointer;
|
|
|
- border: 1px solid rgb(0,0,0,0.5);
|
|
|
+ align-items: center;
|
|
|
+ height: 150px;
|
|
|
overflow: hidden;
|
|
|
}
|
|
|
-.group .group-list .group-item:hover {
|
|
|
- border-color: red;
|
|
|
+.product-info{
|
|
|
+ padding:10px
|
|
|
}
|
|
|
-.group .group-list .group-item .el-image {
|
|
|
- transition: transform 0.3s;
|
|
|
+.product-card:hover{
|
|
|
+ box-shadow: 0 15px 30px rgb(0 0 0 / 10%);
|
|
|
+ transform: translate3d(0,-2px,0);
|
|
|
}
|
|
|
-.group .group-list .group-item:hover .top .el-image {
|
|
|
- transform: scale(1.3);
|
|
|
+.product-price {
|
|
|
+ color: red;
|
|
|
}
|
|
|
-.group .group-list .group-item .top {
|
|
|
- width: 212px;
|
|
|
- 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 18px 10px 16px;
|
|
|
+.product-itemno{
|
|
|
+ font-size: 12px;
|
|
|
+ color:#888;
|
|
|
+ margin: 10px 0;
|
|
|
}
|
|
|
-.group .group-list .group-item .bottom .title {
|
|
|
+.text-throughline{
|
|
|
font-size: 14px;
|
|
|
- font-family: PingFang SC-Bold, PingFang SC;
|
|
|
- font-weight: bold;
|
|
|
- color: #333333;
|
|
|
- overflow: hidden;
|
|
|
- text-overflow: ellipsis;
|
|
|
- white-space: nowrap;
|
|
|
- width: 100%;
|
|
|
- margin-bottom: 5px;
|
|
|
+ text-decoration: line-through;
|
|
|
+ color:#999
|
|
|
}
|
|
|
-.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;
|
|
|
- width: 100%;
|
|
|
- margin-bottom: 4px;
|
|
|
+.shopcart-btn{
|
|
|
+ height:40px;width:40px;text-align:right;line-height:45px
|
|
|
}
|
|
|
-.group .group-list .group-item .bottom .people {
|
|
|
- font-size: 10px;
|
|
|
- font-family: PingFang SC-Regular, PingFang SC;
|
|
|
- font-weight: 400;
|
|
|
- color: #999999;
|
|
|
-}
|
|
|
-.page {
|
|
|
- display: flex;
|
|
|
- flex-direction: row-reverse;
|
|
|
+.shopcart-btn:hover i{
|
|
|
+ color:#4F7BFD !important;
|
|
|
}
|
|
|
</style>
|