temu-plugin/src/view/selection/indextrack/components/Detail.vue

<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>