更新

2023-10-28 12:28:12 +08:00
parent eb518c412f
commit 9909a938ca
13 changed files with 680 additions and 31 deletions
--- a/src/view/selection/indextrack/components/Detail.vue
+++ b/src/view/selection/indextrack/components/Detail.vue
@@ -0,0 +1,212 @@
+<template>
+  <div>
+    <ai-list class="list">
+      <ai-title
+        slot="title"
+        title="商品列表"
+        isShowBottomBorder isShowBack @onBackClick="cancel(false)">
+      </ai-title>
+      <template slot="content">
+        <ai-search-bar>
+          <template #left>
+              <label style="width:80px">排序方式：</label>
+              <el-select v-model="search.orderBy" :clearable="true" @change="search.current =1, getList()" placeholder="请选择排序方式" size="small">
+                <el-option
+                  v-for="item in orderBys"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value">
+                </el-option>
+              </el-select>
+              <label style="width:80px">价格区间：</label>
+              <el-input :clearable="true" size="small" style="width: 80px" v-model="search.priceBegin" ></el-input>
+              ~
+              <el-input :clearable="true" size="small" style="width: 80px" v-model="search.priceEnd" ></el-input>
+              <label style="width:80px">销量区间：</label>
+              <el-input :clearable="true" size="small" style="width: 80px" v-model="search.saleBegin" ></el-input>
+              ~
+              <el-input :clearable="true" size="small" style="width: 80px" v-model="search.saleEnd" ></el-input>
+            
+          </template>
+          <template #right>
+            <el-button type="primary" @click="search.current =1, getList()">查询</el-button>
+          </template>
+        </ai-search-bar>
+          
+        <div style="margin-right: 0px; margin-bottom: 10px;">
+          
+        </div>
+        <div style="display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; gap: 16px;">
+          <el-card v-for="item in tableData" :key="item.id" :body-style="{ padding: '0px', margin: '5px' }">
+            <img :src="item.imgUrl" class="image">
+            <div style="padding: 14px;">
+              <div class="bottom clearfix">
+                <div style="margin-bottom: 5px;">
+                  <div style="display: inline; margin-left: 5px;">${{ item.price }}<sub style="margin-left: 2px;" v-html="getPricePercent(item.priceChange)"></sub></div>
+                  <div style="display: inline; margin-right: 5px; float: right;">{{ item.saleTotal }}<sub style="margin-left: 2px;" v-html="getSalePercent(item.saleChange)"></sub></div>
+                </div>
+                <ai-product-drop-down :params="item" :isShowDetail="true" @onGoDetail="goDetail(item.goodsId, item.categoryId)" style="float: right;"></ai-product-drop-down>
+              </div>
+            </div>
+          </el-card>
+          <el-pagination
+            layout="prev, pager, next"
+            style="position: absolute; bottom: 0px; right: 40px;"
+            :total="total"
+            :page-size.sync="search.size"
+            :current-page.sync="search.current"
+            @current-change="getList">
+          </el-pagination>
+        </div>
+      </template>
+    </ai-list>
+
+    <div class="productDetail">
+      <el-dialog
+        title="商品详情"
+        :visible="isShowDetailDlg"
+        :close-on-click-modal="false"
+        width="80%"
+        :before-close="handleClose">
+        <ai-special-product-detail v-if="isShowDetailDlg" :params="detailParams"/>
+      </el-dialog>
+    </div>
+  </div>
+</template>
+
+<script>
+import AiSpecialProductDetail from "@/components/AiSpecialProductDetail.vue";
+import AiProductDropDown from '@/components/AiProductDropDown.vue';
+
+  export default {
+    name: 'DetailPage',
+    props: ['params'],
+    components: {AiSpecialProductDetail, AiProductDropDown},
+    data () {
+      return {
+        categoryId: '',
+        search: {
+          current: 1,
+          type: '1',
+          size: 120,
+          orderBy: '',
+          priceBegin: '',
+          priceEnd: '',
+          saleBegin: '',
+          saleEnd: ''
+        },
+        orderBys: [{
+          value: '0',
+          label: '按销量涨辐排序'
+        },{
+          value: '1',
+          label: '按价格涨辐排序'
+        },{
+          value: '2',
+          label: '按销量排序'
+        },{
+          value: '3',
+          label: '按价格排序'
+        }],
+        tableData: [],
+        total: 0,
+        isShowDetailDlg: false,
+        detailParams: {}
+      }
+    },
+
+    created () {
+      this.categoryId = this.params.id
+      this.getList()
+    },
+
+    methods: {
+      getList () {
+        this.$http.post('/api/specialDetail/myPageNew',null,{
+          params: {
+            categoryId: this.categoryId,
+            ...this.search
+          }
+        }).then(res => {
+          this.tableData = res.data.records
+          this.total = res.data.total
+        })
+      },
+      cancel (isRefresh) {
+        this.$emit('change', {
+          type: 'List',
+          isRefresh: !!isRefresh
+        })
+      },
+      getPricePercent(data) {
+        if (data < 0) {
+          return '<div style="display: inline; color: green">↓' + data + '%</div>'
+        } else if (data > 0) {
+          return '<div style="display: inline; color: red">↑' + data + '%</div>'
+        }
+        return ''
+      },
+      getSalePercent(data) {
+        if (data < 0) {
+          return '<div style="display: inline; color: green">↓' + data + '%</div>'
+        } else if (data > 0) {
+          return '<div style="display: inline; color: red">↑' + data + '%</div>'
+        }
+        return ''
+      },
+      handleClose() {
+        this.isShowDetailDlg = false
+      },
+      goDetail (goodsId, categoryId) {
+        this.detailParams = {goodsId: goodsId, categoryId: categoryId}
+        this.isShowDetailDlg = true
+      }
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+.productDetail {
+  :deep(.el-dialog) {
+      height: 78vh;
+      overflow: auto;
+  }
+
+}
+.time {
+    font-size: 13px;
+    color: #999;
+  }
+  
+  .bottom {
+    margin-top: 13px;
+    line-height: 12px;
+  }
+
+  .button {
+    padding: 0;
+    float: right;
+  }
+
+  .image {
+    width: 100%;
+    display: block;
+  }
+
+  .clearfix:before,
+  .clearfix:after {
+      display: table;
+      content: "";
+  }
+  
+  .clearfix:after {
+      clear: both
+  }
+  .el-dropdown-link {
+    cursor: pointer;
+    color: #409EFF;
+  }
+  .el-icon-arrow-down {
+    font-size: 12px;
+  }
+</style>