my_loan/htmldev/TBTools/src/views/modules/mall/index.vue

<template>
  <div>
    <el-form :model="dataForm">
      <el-form-item label="快递："
                    prop="expressActiveIndex">
        <el-radio-group v-model="dataForm.expressActiveIndex">
          <el-radio :label="index" v-for="(item, index) in expressList"
                    :key="index">{{ item.expressName }}
          </el-radio>
        </el-radio-group>
        <el-button class="TT-btn-clear"
                   type="primary"
                   size="mini"
                   @click="resetFormData">清空筛选条件
        </el-button>
      </el-form-item>
      <el-form-item label="仓库："
                    prop="warehouseId"
                    v-if="dataForm.expressActiveIndex >= 0 && dataForm.expressActiveIndex !== ''">
        <el-radio-group v-model="dataForm.warehouseId"
                        @change="getDataList">
          <el-radio
            :label="item.id"
            v-for="(item, index) in expressList[dataForm.expressActiveIndex].warehouse"
            :key="index">{{item.warehouseName }}
          </el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="排序：">
        <p class="TT-rank-options"
           :class="{'active': activeRankIndex === index}"
           v-for="(item, index) in rankList"
           :key="index"
           @click="handleSortList(index)">
          <span>{{ item.label === '综合排序' ? item.label : item.label + (item.value ? '从低到高' : '从高到低') }}</span>
          <template v-if="item.icon">
            <i class="el-icon-arrow-up" v-show="item.value === true"></i>
            <i class="el-icon-arrow-down" v-show="item.value === false"></i>
          </template>
        </p>
      </el-form-item>
    </el-form>
    <el-row v-loading="dataListLoading">
      <el-col class="mt-20"
              :span="4"
              :offset="index % 5 === 0 ? 0 : 1"
              v-for="(item, index) in dataList"
              :key="item.id">
        <el-card class="TT-goods-info" shadow="hover">
          <div @mouseenter="activeGoodsInedex = index"
               @mouseleave="activeGoodsInedex = -1">
            <div class="top">
              <div class="photo">
                <img :src="item.productImgUrl" alt="">
              </div>
              <div class="mask"
                   :class="{'active': activeGoodsInedex === index}">
                <el-button @click="funJumpGoodsOrder(item)">立即购买</el-button>
                <el-button @click="funJumpGoodsDetail(item)">查看详情</el-button>
              </div>
            </div>
            <div class="middle">
              <p class="name">{{ item.productName }}</p>
              <p class="store">{{ item.warehouseName }}</p>
              <div class="price-wrap">
                <p class="price">
                  <span>¥</span>
                  <span>{{ item.productPrice.toFixed(2) }}</span>
                </p>
              </div>
            </div>
            <div class="bottom">
              <p class="stock">
                <span>库存</span>
                <span>{{ item.productStorageNum }}件</span>
              </p>
              <p class="sales">
                <span>销量</span>
                <span>{{ item.productSaleNum }}件</span>
              </p>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-pagination
      @size-change="sizeChangeHandle"
      @current-change="currentChangeHandle"
      :current-page="pageIndex"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="pageSize"
      :total="totalPage"
      layout="total, sizes, prev, pager, next, jumper">
    </el-pagination>
  </div>
</template>

<script>
import Crypto from '@/utils/crypto'

export default {
  name: 'index',
  data () {
    return {
      dataListLoading: false,
      dataForm: {
        expressActiveIndex: '',
        warehouseId: ''
      },
      expressList: [],
      rankList: [
        {
          type: '',
          label: '综合排序',
          value: true,
          icon: false
        },
        {
          type: 'productPrice',
          label: '价格',
          value: false,
          icon: true
        }
      ],
      activeRankIndex: 0,
      dataList: [],
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      activeGoodsInedex: -1
    }
  },
  created () {
    this.fetchExpressList()
    this.getDataList()
  },
  methods: {
    resetFormData () {
      this.$set(this.dataForm, 'expressActiveIndex', '')
      this.$set(this.dataForm, 'warehouseId', '')
      this.activeRankIndex = 0
      this.getDataList()
    },
    handleSortList (index) {
      const _value = this.rankList[index].value
      this.$set(this.rankList[index], 'value', !_value)
      this.activeRankIndex = index
      const { value, type } = this.rankList[this.activeRankIndex]
      this.dataList = this.dataList.sort((a, b) => {
        const val1 = a[type]
        const val2 = b[type]
        return value ? val1 - val2 : val2 - val1
      })
    },
    funJumpGoodsOrder (item = {}) {
      const { id } = item
      this.$router.push({ name: 'goodsOrder', params: { goodsId: Crypto.encrypt(id.toString()) } })
    },
    funJumpGoodsDetail (item = {}) {
      const { id } = item
      this.$router.push({ name: 'goodsDetail', params: { goodsId: Crypto.encrypt(id.toString()) } })
    },
    fetchExpressList () {
      this.$http({
        url: this.$http.adornUrl('/gift/express/list'),
        method: 'get',
        params: this.$http.adornParams({})
      }).then(({ data }) => {
        if (data.status) {
          this.expressList = data.data
        } else {
          this.$message.error(data.msg)
        }
      })
    },
    // 获取数据列表
    getDataList () {
      this.dataListLoading = true
      this.$http({
        url: this.$http.adornUrl('/gift/product/list'),
        method: 'get',
        params: this.$http.adornParams({
          'page': this.pageIndex,
          'pageSize': this.pageSize,
          'warehouseId': this.dataForm.warehouseId
        })
      }).then(({ data }) => {
        if (data.status) {
          const { total, list } = data.data
          this.dataList = list
          this.totalPage = total
        } else {
          this.dataList = []
          this.totalPage = 0
        }
        this.dataListLoading = false
      })
    },
    // 每页数
    sizeChangeHandle (val) {
      this.pageSize = val
      this.pageIndex = 1
      this.getDataList()
    },
    // 当前页
    currentChangeHandle (val) {
      this.pageIndex = val
      this.getDataList()
    }
  }
}
</script>

<style lang="scss" scoped>
.mt-20 {
  margin-top: 20px;
}

.TT-btn-clear {
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1;
}

.TT-rank-options {
  display: inline-block;
  vertical-align: middle;
  margin-left: 10px;
  cursor: pointer;

  &.active {
    color: #409EFF;
  }

  &:nth-of-type(1) {
    margin-left: 0;
  }
}

.TT-goods-info {
  /deep/ .el-card__body {
    padding: 0;
  }

  .top {
    position: relative;
    cursor: pointer;
  }

  .photo {
    img {
      display: block;
      width: 100%;
    }
  }

  .mask {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    opacity: 0;
    background: rgba(0, 0, 0, 0.5);

    &.active {
      opacity: 1;
    }

    .el-button + .el-button {
      margin-left: 0;
      margin-top: 20px;
    }
  }

  .middle {
    padding: 0 10px;
    margin-top: 10px;

    .name {
      font-size: 16px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .store {
      margin-top: 30px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }

  .price-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 6px;

    .price {
      display: flex;
      align-items: flex-end;

      span {
        color: #f64f6f;

        &:nth-of-type(2) {
          font-size: 22px;
          margin-left: 4px;
        }
      }
    }

    .unit {
      padding: 0 10px;
      line-height: 22px;
      font-size: 10px;
      color: #f64f6f;
      background: #f4f4f5;
    }
  }

  .bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 10px;
    margin-top: 10px;
    border-top: 1px solid #ccc;

    p {
      display: flex;
      align-items: center;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    span {
      font-size: 10px;

      &:nth-of-type(2) {
        color: #f64f6f;
        margin-left: 6px;
      }
    }
  }
}
</style>