TBtools-商品列表

htmldev/TBTools/src/router/index.js

@@ -187,7 +187,7 @@ const mallRoutes = [
   {
     path: '/mall/goods-order/:goodsId',
     component: _import('modules/mall/goods-order'),
-    name: 'goodsDetail',
+    name: 'goodsOrder',
     meta: {
       title: '确认订单',
       isUseCache: false

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

@@ -1,33 +1,88 @@
 <template>
-  <div v-loading="dataListLoading">
-    <el-form :model="dataForm" @keyup.enter.native="getDataList()">
-      <el-form-item label="快递" prop="expressActiveIndex">
-        <el-radio v-model="dataForm.expressActiveIndex" :label="index" v-for="(item, index) in expressList"
-                  :key="index">
-          {{ item.expressName }}
-        </el-radio>
+  <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">
-        <el-radio v-model="dataForm.warehouseId" :label="item.id"
-                  v-for="(item, index) in expressList[dataForm.expressActiveIndex].warehouse" :key="index">{{
-            item.warehouseName
-          }}
-        </el-radio>
+      <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" v-for="(item, index) in rankList" :key="index"
-           @click="rankList[index].value = !rankList[index].value">
-          <span>{{ item.label }}从{{ item.value ? '低到高' : '高到低'}}</span>
+      <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-item>
-        <el-button size="mini" @click="getDataList()">清空</el-button>
-      </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"
@@ -41,34 +96,70 @@
 </template>
 
 <script>
+import Crypto from '@/utils/crypto'
+
 export default {
   name: 'index',
   data () {
     return {
       dataListLoading: false,
       dataForm: {
-        expressActiveIndex: -1,
-        warehouseId: '',
-        rank: []
+        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
+      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'),
@@ -121,14 +212,145 @@ export default {
 </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>