index.vue

<template>
  <d2-container class="pRelative">
    <template slot="header">全部商品（ 共5个 ）</template>

    <div class="searchs">
      <div class="buttons">
        <!-- <el-button class="button buttonlight" size="small" @click="handleAdd">添加商品</el-button> -->
        <!-- <el-button class="button buttondark" size="small">批量删除</el-button> -->
      </div>
      <!-- 搜索区 -->
      <el-form class="searchzone" :inline="true" :model="formData" label-width="auto">
        <el-form-item label="状态">
          <el-select
            size="small"
            v-model="formData.status"
            placeholder="请选择状态"
            style="width:160px;"
          >
            <el-option
              v-for="item in  statusList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label>
          <el-input size="small" v-model="formData.keys" style="width:160px" placeholder="请输入关键词" />
        </el-form-item>
        <el-button class="button buttondark" size="small">搜索</el-button>
      </el-form>
    </div>

    <el-table
      :data="data"
      class="list"
      style="width: 100%"
      empty-text="暂无商品信息"
      height="calc(100% - 120px)"
    >
      <!-- <el-table-column type="selection" width="55"> </el-table-column> -->
      <el-table-column prop="name" label="商品图片" align="center">
        <template slot-scope="scope">
          <span>
            <img :src="scope.row.imgUrl" alt style="height: 60px; width: 60px;" />
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="goodName" label="商品名称" align="center"></el-table-column>
      <el-table-column prop="goodPrice" label="商品价格" align="center"></el-table-column>
      <el-table-column prop="goodNum" label="库存" align="center"></el-table-column>
      <el-table-column prop="goodBackMoney" label="佣金" align="center"></el-table-column>
      <!-- <el-table-column prop="goodStatus" label="状态" align="center"></el-table-column> -->
      <el-table-column prop="goodStatus" label="状态" align="center">
        <template slot-scope="scope">
          <span>{{scope.row.goodStatus === 'up' ? '上线' : '下线'}}</span>
        </template>
      </el-table-column>
      <!-- 查看详情 -->
      <el-table-column
        fixed="right"
        align="center"
        label="操作"
        width="140"
        @selection-change="listPick"
      >
        <template slot-scope="scope">
          <!-- <el-button type="text"  @click="">详情</el-button> -->
          <!-- <el-button type="text"  @click="">编辑</el-button> -->

          <el-button type="text" @click="handleAdd">佣金配置</el-button>
          <el-button type="text" @click="handleAdd">{{scope.row.goodStatus === 'up' ? '下线' : '上线'}}</el-button>
          <!-- <el-button type="text"  @click="" class="listButtonRed">删除</el-button> -->
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @current-change="handleCurrentChange"
      :current-page="page.currentPage"
      :page-size="page.size"
      layout="total, prev, pager, next, jumper"
      :total="page.total"
    ></el-pagination>
    <add-goods ref="addGoods"></add-goods>
  </d2-container>
</template>
<script>
import addGoods from "./components/add_goods";
export default {
  data() {
    return {
      formData: {
        status: "",
        keys: ""
      },
      statusList: [],
      data: [
        {
          imgUrl:
            "http://wework.qpic.cn/bizmail/FLjpJB8Od58W5ULAIYTRstTvFOJEFUnKQ3tRCdkicxorh6dEHcpNqVw/100",
          goodName: "膳魔师",
          goodPrice: "200元",
          goodNum: "44",
          goodBackMoney: "20元",
          goodStatus: "up"
        },
        {
          imgUrl:
            "http://wework.qpic.cn/bizmail/FLjpJB8Od58W5ULAIYTRstTvFOJEFUnKQ3tRCdkicxorh6dEHcpNqVw/100",
          goodName: "象印",
          goodPrice: "180元",
          goodNum: "14",
          goodBackMoney: "18元",
          goodStatus: "down"
        },
        {
          imgUrl:
            "http://wework.qpic.cn/bizmail/FLjpJB8Od58W5ULAIYTRstTvFOJEFUnKQ3tRCdkicxorh6dEHcpNqVw/100",
          goodName: "Dior",
          goodPrice: "240元",
          goodNum: "60",
          goodBackMoney: "40元",
          goodStatus: "down"
        },
        {
          imgUrl:
            "http://wework.qpic.cn/bizmail/FLjpJB8Od58W5ULAIYTRstTvFOJEFUnKQ3tRCdkicxorh6dEHcpNqVw/100",
          goodName: "ASICS",
          goodPrice: "450元",
          goodNum: "120",
          goodBackMoney: "20元",
          goodStatus: "up"
        },
        {
          imgUrl:
            "http://wework.qpic.cn/bizmail/FLjpJB8Od58W5ULAIYTRstTvFOJEFUnKQ3tRCdkicxorh6dEHcpNqVw/100",
          goodName: "NIKE",
          goodPrice: "200元",
          goodNum: "44",
          goodBackMoney: "20元",
          goodStatus: "up"
        },
        {
          imgUrl:
            "http://wework.qpic.cn/bizmail/FLjpJB8Od58W5ULAIYTRstTvFOJEFUnKQ3tRCdkicxorh6dEHcpNqVw/100",
          goodName: "Adidas",
          goodPrice: "540元",
          goodNum: "210",
          goodBackMoney: "30元",
          goodStatus: "down"
        },
        {
          imgUrl:
            "http://wework.qpic.cn/bizmail/FLjpJB8Od58W5ULAIYTRstTvFOJEFUnKQ3tRCdkicxorh6dEHcpNqVw/100",
          goodName: "膳魔师",
          goodPrice: "200元",
          goodNum: "44",
          goodBackMoney: "20元",
          goodStatus: "up"
        },
        {
          imgUrl:
            "http://wework.qpic.cn/bizmail/FLjpJB8Od58W5ULAIYTRstTvFOJEFUnKQ3tRCdkicxorh6dEHcpNqVw/100",
          goodName: "膳魔师",
          goodPrice: "200元",
          goodNum: "44",
          goodBackMoney: "20元",
          goodStatus: "up"
        },
        {
          imgUrl:
            "http://wework.qpic.cn/bizmail/FLjpJB8Od58W5ULAIYTRstTvFOJEFUnKQ3tRCdkicxorh6dEHcpNqVw/100",
          goodName: "膳魔师",
          goodPrice: "200元",
          goodNum: "44",
          goodBackMoney: "20元",
          goodStatus: "down"
        },
        {
          imgUrl:
            "http://wework.qpic.cn/bizmail/FLjpJB8Od58W5ULAIYTRstTvFOJEFUnKQ3tRCdkicxorh6dEHcpNqVw/100",
          goodName: "膳魔师",
          goodPrice: "200元",
          goodNum: "44",
          goodBackMoney: "20元",
          goodStatus: "up"
        }
      ],
      page: {
        currentPage: 1,
        size: 20,
        total: 100
      }
    };
  },
  components: { addGoods },
  methods: {
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    listPick() {},
    handleAdd() {
      this.$refs.addGoods.dialogVisible = true;
    }
  }
};
</script>
<style lang="scss">
</style>