tnbapp/src/views/mall/Order.vue

<template>
  <el-row class="movie-list">
    <el-col>
      <el-row>
        <el-table
          ref="multipleTable"
          :data="dataList"
          :show-header="true"
          border
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column
            type="selection"
          />
          <el-table-column
            fixed="left"
            label="商品信息"
          >
            <template slot-scope="scope">
              <el-row>
                <el-col :md="4">
                  <el-image :src="scope.row.picUrl" min-width="30" height="20" />
                </el-col>
                <el-col :md="20">
                  <router-link target="_blank" style="text-decoration-line: none" :to="`/mall/item?id=${scope.row.itemId}`">
                    <span>{{scope.row.title}}</span>
                  </router-link>
                </el-col>
              </el-row>
            </template>
          </el-table-column>
          <el-table-column
            prop="sku"
            label="sku"
          />
          <el-table-column
            label="单价"
          >
            <template slot-scope="scope">
              <span style="color: red">￥{{scope.row.price}}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="数量"
          >
            <template slot-scope="scope">
              <el-input-number v-model="scope.row.num" @change="handleChange" :min="1" :max="10" label="描述文字"></el-input-number>
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
          >
            <template slot-scope="scope">
              <el-button
                size="mini"
                @click="collect(scope.row)"
              >移入关注</el-button>
              <el-button
                size="mini"
                @click="deleteOne(scope.row)"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          background
          :small="screenWidth <= 768"
          layout="prev, pager, next"
          :page-size="pageSize"
          :current-page="currentPage"
          :total="totalSize"
          @current-change="handleCurrentChange"
          @prev-click="handleCurrentChange"
          @next-click="handleCurrentChange"
        />
      </el-row>
    </el-col>
  </el-row>
</template>

<script>
import {getOrders} from "@/api/mall";

export default {
  name: 'Order',
  data() {
    return {
      // 屏幕宽度, 为了控制分页条的大小
      screenWidth: document.body.clientWidth,
      currentPage: 1,
      pageSize: 10,
      totalSize: 0,
      dataList: [],
      checked: false,
      searchForm: {
        page: 1,
        path: '/',
        fileType: '0',
        filename: null
      },
      multipleSelection: [],
      totalSelected: 0,
      totalPrice: '0.00',
      productId: null
    }
  },
  created() {
    const path = this.$route.query.productId
    if (path !== undefined && path !== null) {
      this.searchForm.path = path
    }

    document.title = '我的订单'
    this.getData(this.searchForm)
  },
  methods: {
    handleCurrentChange(pageNumber) {
      this.currentPage = pageNumber
      this.searchForm.page = this.currentPage
      this.getData(this.searchForm)
    },
    getData() {
      getOrders(1).then(resp => {
        if (resp.code === 0) {
          this.dataList = resp.data
        } else {
          this.$notify({
            title: '提示',
            message: resp.msg,
            type: 'warning',
            duration: 3000
          })
        }
      }).catch(error => {
        this.$notify({
          title: '提示',
          message: error.message,
          type: 'error',
          duration: 3000
        })
      })
    },
    getDetail(fileId) {
    },
    cache(row) {
    },
    search() {
      this.currentPage = 1
      this.searchForm.page = this.currentPage
      this.getData(this.searchForm)
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    deleteMultiple() {
      if (this.multipleSelection.length === 0) {
        this.$notify({
          message: '至少应选中一行',
          type: 'warning',
          duration: 3000
        })
        return
      }

      var fileIds = []
      for (const item of this.multipleSelection) {
        fileIds.push(item.fileId)
      }

      this.$confirm('确定要删除文件?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        console.log('')
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        })
      })
    },
    handleChange(value) {
      console.log(value);
    }
  }
}
</script>

<style scoped>
/*处于手机屏幕时*/
@media screen and (max-width: 768px) {
  .movie-list {
    padding-top: 8px;
    padding-left: 0.5%;
    padding-right: 0.5%;
  }
}

.movie-list {
  padding-top: 15px;
  padding-left: 6%;
  padding-right: 6%;
}
</style>