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

<template>
    <div>
        <el-row>
            <el-col :span="3">
                <el-input v-model="search" placeholder="请输入商品名称"></el-input>
            </el-col>
            <el-col :span="1">
                &nbsp;
            </el-col>
            <el-col :span="3">
                <el-select v-model="status">
                    <el-option value="-1" label="全部"></el-option>
                    <el-option value="1" label="在线"></el-option>
                    <el-option value="0" label="离线"></el-option>
                </el-select>
            </el-col>
            <el-col :span="1">
                &nbsp;
            </el-col>
            <el-col :span="4">
                <el-button type="primary" @click="getItems">查询</el-button>

                <el-button type="primary" @click="goAdd">添加</el-button>
            </el-col>
        </el-row>
        <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"></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">
                <template slot-scope="scope">
                    <template v-if="scope.row.status == 0">
                        <el-button type="success" @click="setStatus(scope.row)">启用</el-button>
                    </template>
                    <template v-else>
                        <el-button type="danger" @click="setStatus(scope.row)">禁用</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>
.page {
  margin-top: 10px;
  text-align: center;
}
.online {
  color: #67c23a;
}
.offline {
  color: #f56c6c;
}
</style>