tjshop/shop/static/manager/src.b/components/page/GoodsManager.vue

<template>
  <div>
    <div class="operation">
      <el-input v-model="search" placeholder="请输入商品名称" size="mini"></el-input>
      <el-select v-model="status" size="mini">
        <el-option value="-1" label="全部"></el-option>
        <el-option value="1" label="在线"></el-option>
        <el-option value="0" label="离线"></el-option>
      </el-select>
      <div class="btn">
        <el-button type="primary" @click="getItems" size="mini">查询</el-button>
        <el-button type="primary" @click="goAdd" size="mini">添加</el-button>
      </div>
    </div>
    <el-table :data="items">
      <el-table-column label="商品ID" prop="gid"></el-table-column>
      <el-table-column label="商品图标" width="110px">
        图标
        <template slot-scope="scope">
          <img :src="scope.row.icon" style="width:100px;" />
        </template>
      </el-table-column>
      <el-table-column label="商品名称" prop="name"></el-table-column>
      <el-table-column label="简介" prop="describe" width="300px"></el-table-column>
      <el-table-column label="原价" prop="price.price"></el-table-column>
      <el-table-column label="折扣价" prop="price.discountPrice"></el-table-column>
      <el-table-column label="详细">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="goEditGoodsDescribe(scope.row)">编辑详细</el-button>
        </template>
      </el-table-column>
      <el-table-column label="状态">
        <template slot-scope="scope">
          <template v-if="scope.row.status === 1">
            <p class="online">启用</p>
          </template>
          <template v-else>
            <p class="offline">禁用</p>
          </template>
        </template>
      </el-table-column>
      <el-table-column label="绑定套餐" prop="packageName">
        <template slot-scope="scope">
          <template v-if="scope.row.packageid === '0'">
            <el-button type="text" size="small" @click="goBindPackage(scope.row)">去绑定</el-button>
          </template>
          <template v-else>
            <el-button
              type="text"
              size="small"
              @click="goBindPackage(scope.row)"
            >{{scope.row.packageName}}</el-button>
          </template>
        </template>
      </el-table-column>
      <el-table-column label="推荐商品">
        <template slot-scope="scope">
          <template v-if="scope.row.isRecommend">
            <p v-on:click="setRecommand(scope.row)" class="online">是</p>
          </template>
          <template v-else>
            <p v-on:click="setRecommand(scope.row)" class="offline">否</p>
          </template>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="250px" fixed="right">
        <template slot-scope="scope">
          <template v-if="scope.row.status == 0">
            <el-button type="success" @click="setStatus(scope.row)" size="mini">启用</el-button>
          </template>
          <template v-else>
            <el-button type="danger" @click="setStatus(scope.row)" size="mini">禁用</el-button>
          </template>
          <el-button type="text" size="small" @click="goEdit(scope.row)">编辑</el-button>
          <el-button type="text" size="small" @click="goEditLabel(scope.row)">标签</el-button>
          <el-button type="text" size="small" @click="goExchangeCode(scope.row)">兑换码</el-button>
          <a :href="serverPath + 'good/detail/' + scope.row.gid" target="_black">
            <el-button type="text" size="small">预览</el-button>
          </a>
        </template>
      </el-table-column>
    </el-table>
    <div class="page">
      <el-pagination
        background
        layout="total, prev, pager, next,jumper"
        @current-change="nextPage"
        :page-size="pageSize"
        :total="totalCount"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      page: 1,
      pageSize: 20,
      items: [],
      totalCount: 0,
      status: "-1",
      search: "",

      serverPath: process.env.SERVER_PATH
    };
  },
  methods: {
    getItems: function() {
      this.$http
        .getGoods(
          {
            page: this.page,
            pageSize: this.pageSize,
            status: this.status,
            search: this.search
          },
          this
        )
        .then(data => {
          this.items = data.obj.list;
          this.totalCount = data.obj.totalCount;
        });
    },
    nextPage: function(currentPage) {
      this.page = currentPage;
      this.getItems();
    },
    statusFormater: function(row) {
      if (row.status === 1) {
        return "在线";
      } else {
        return "离线";
      }
    },
    setStatus: function(row) {
      let msg = row.status === 1 ? "禁用" : "启用";

      this.$confirm(
        '您确定要将此商品设置为 "' + msg + '" , 是否继续?',
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }
      )
        .then(() => {
          this.$http
            .setGoodStatus(
              { gid: row.gid, status: row.status === 1 ? false : true },
              this
            )
            .then(res => {
              if (res.code === 0) {
                row.status = row.status === 1 ? 0 : 1;
                this.$message({
                  message: "操作成功",
                  type: "success"
                });
              }
            });
        })
        .catch(() => {});
    },
    goEdit: function(row) {
      this.$router.push({ path: "/editGoods", query: { gid: row.gid } });
    },
    goEditGoodsDescribe: function(row) {
      this.$router.push({
        path: "/editGoodsDescribe",
        query: { gid: row.gid }
      });
    },
    goEditLabel: function(row) {
      this.$router.push({ path: "/goodLabelManage", query: { gid: row.gid } });
    },
    goBindPackage: function(row) {
      this.$router.push({ path: "/bindPackage", query: { gid: row.gid } });
    },
    goAdd: function() {
      this.$router.push({ path: "/editGoods", query: { gid: 0 } });
    },
    goExchangeCode: function(row) {
      this.$router.push({ path: "/exchangeCodeList", query: { gid: row.gid } });
    },
    setRecommand: function(row) {
      var msg = row.isRecommend
        ? "您是否要停止推荐此商品吗？"
        : "您是否要推荐此商品？";
      this.$confirm(msg, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(res => {
        this.$http
          .setRecommand(
            { gid: row.gid, isrecommand: row.isRecommend ? false : true },
            this
          )
          .then(res => {
            row.isRecommend = !row.isRecommend;
          });
      });
    }
  },
  mounted: function() {
    this.getItems();
  }
};
</script>

<style scoped>
.page {
  margin-top: 10px;
}
.online {
  color: #67c23a;
}
.offline {
  color: #f56c6c;
}
.operation {
  display: flex;
  height: 50px;
  border-bottom: 1px solid #e6e6e6;
  margin-bottom: 10px;
}
.operation .btn {
  display: flex;
  height: 28px;
}
.operation .btn,
.operation .el-input,
.operation .el-select {
  width: 150px;
  margin-right: 8px;
}
</style>