TBtools-礼品商城

htmldev/TBTools/src/router/index.js

@@ -154,7 +154,8 @@ const mallRoutes = [
     name: 'mall',
     meta: {
       title: '礼品商城',
-      isUseCache: false
+      isUseCache: false,
+      keepAlive: true
     }
   },
   {

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

@@ -1,13 +1,134 @@
 <template>
-  <div>index</div>
+  <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>
+      </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>
+      <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>
+          <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-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>
 export default {
-  name: 'index'
+  name: 'index',
+  data () {
+    return {
+      dataListLoading: false,
+      dataForm: {
+        expressActiveIndex: -1,
+        warehouseId: '',
+        rank: []
+      },
+      expressList: [],
+      rankList: [
+        {
+          label: '价格',
+          value: false,
+          icon: true
+        }
+      ],
+      dataList: [],
+      pageIndex: 1,
+      pageSize: 10,
+      totalPage: 0
+    }
+  },
+  created () {
+    this.fetchExpressList()
+  },
+  methods: {
+    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>
+.TT-rank-options {
+  display: inline-block;
+  vertical-align: middle;
+  margin-left: 10px;
+  cursor: pointer;
 
+  &:nth-of-type(1) {
+    margin-left: 0;
+  }
+}
 </style>