|
@@ -0,0 +1,199 @@
|
|
|
+<template>
|
|
|
+ <div class="group container normal-panel 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>
|
|
|
+ <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">
|
|
|
+ <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>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import selectClass from './modules/Select'
|
|
|
+import Pagination from '@/components/pagination/Pagination'
|
|
|
+import { log } from '@antv/g2plot/lib/utils';
|
|
|
+export default {
|
|
|
+ name: '',
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ brandList:'',
|
|
|
+ brandId:0,
|
|
|
+ tablecols:[],
|
|
|
+ productGroup:'',
|
|
|
+ params: {
|
|
|
+ "id": "20220926142203",
|
|
|
+ "version":1,
|
|
|
+ "content": {
|
|
|
+ "pageSize":20,
|
|
|
+ "pageNumber":1,
|
|
|
+ "nocache":true,
|
|
|
+ "brandids":[],
|
|
|
+ "where":{
|
|
|
+ "condition":""
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ total:0,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ components:{selectClass,Pagination},
|
|
|
+ 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",
|
|
|
+ "version":1,
|
|
|
+ "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()
|
|
|
+ console.log(this.brandList,'品牌');
|
|
|
+ },
|
|
|
+ async getProductGroup() {
|
|
|
+ this.params.content.brandids = this.brandId
|
|
|
+ let res = await this.$api.requested(this.params)
|
|
|
+ this.productGroup = res.data
|
|
|
+ this.total = res.total
|
|
|
+ console.log(this.productGroup);
|
|
|
+ },
|
|
|
+ itemClick(id) {
|
|
|
+ this.$router.push({
|
|
|
+ path:'/groupDetail',
|
|
|
+ query: {
|
|
|
+ id:id.sa_itemgroupid,
|
|
|
+ brandid:id.sa_brandid
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ brandChange(id) {
|
|
|
+ this.brandId = id
|
|
|
+ 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()
|
|
|
+ }
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+*{
|
|
|
+ box-sizing: border-box;
|
|
|
+}
|
|
|
+.group .group-list {
|
|
|
+ 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);
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+.group .group-list .group-item:hover {
|
|
|
+ border-color: red;
|
|
|
+}
|
|
|
+.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 {
|
|
|
+ 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;
|
|
|
+}
|
|
|
+.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;
|
|
|
+ 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;
|
|
|
+ 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: #999999;
|
|
|
+}
|
|
|
+.page {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row-reverse;
|
|
|
+}
|
|
|
+</style>
|