liebao-web/src/components/shopCompoents/shopList.vue

<template>
  <div class="shopList" v-loading="loading" element-loading-text="数据加载中">
    <div class="header" v-if="shopList.length">
      <div class="left">
        <div class="line">
          <div class="b_line"></div>
          <div class="triangle"></div>
        </div>
        <div class="label">门店管理</div>
      </div>
      <div class="right">
        <el-button class="btn" v-if="$store.state.userInfo.memberType === 2" @click.stop="addShop(1)">新增门店</el-button>
      </div>
    </div>
    <el-table v-if="shopList.length" :data="shopList" stripe header-row-class-name="table_h" style="width: 100%; margin-top: 10px">
      <el-table-column prop="code" label="门店编号" width="170"></el-table-column>
      <el-table-column prop="name" label="门店名称" width="172" align="center"></el-table-column>
      <el-table-column prop="address" label="门店地址" width="321" align="center"></el-table-column>
      <el-table-column prop="contactName" label="联系人" width="164" align="center"></el-table-column>
      <el-table-column prop="mobile" label="联系电话" width="176" align="center"></el-table-column>
      <el-table-column label="已获运力" align="center" width="350">
        <template slot-scope="scope">
          <div class="imgs">
            <img class="img" :src="item.logo" v-for="(item, i) in scope.row.deliveries" :key="i" alt="">
          </div>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="200" align="center">
        <template slot-scope="scope">
          <el-button class="btn" size="mini" @click.stop="addShop(2, scope.row)">修改</el-button>
          <!-- <el-button type="danger" size="mini" @click.stop="deleteItem(scope.row)">删除</el-button> -->
        </template>
      </el-table-column>
    </el-table>
    <el-empty v-if="!shopList.length && !loading" description="暂无门店数据！"></el-empty>
    <shop-add @getData="getData" ref="shopAdd" :products="productList"></shop-add>
  </div>
</template>

<script>
import shopAdd from "./shopAdd";
import { getShopList, getProductList, shopDelete } from "../../api/shop";
export default {
  components: {
    shopAdd,
  },
  data() {
    return {
      loading: false,
      shopList: [],
      productList: [],
      memberType: this.$store.state.userInfo.memberType,
    };
  },
  mounted() {
    if (this.memberType !== 1) {
      this.getData();
    }
    this.getProductList();
    // this.$refs.map.setDialogStatus()
  },

  methods: {
    addShop(val, e) {
      if (val == 1) {
        this.$refs.shopAdd.init();
      } else {
        this.$refs.shopAdd.init(JSON.parse(JSON.stringify(e)));
      }
    },

    getData() {
      this.loading = true;
      getShopList().then((res) => {
        if (res.code === 200) {
          this.shopList = res.data;
        } else {
          this.$message({
            type: "error",
            message: res.msg,
          });
        }
        this.loading = false;
      });
    },

    getProductList() {
      getProductList().then((res) => {
        if (res.code === 200) {
          this.productList = res.data;
        } else {
          this.$message({
            type: "error",
            message: res.msg,
          });
        }
      });
    },

    deleteItem(e) {
      this.$confirm("此操作将永久删除该门店, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        shopDelete({
          shopId: e.id,
        }).then((res) => {
          if (res.code === 200) {
            this.$message({
              type: "success",
              message: "删除成功!",
            });
            this.getData();
          } else {
            this.$message({
              type: "error",
              message: res.msg,
            });
          }
        });
      });
    },
  },
};
</script>

<style lang="scss">
.shopList {
  width: 100%;
  background: #ffffff;
  min-height: calc(100vh - 184px);
  padding: 20px;
  box-sizing: border-box;

  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .left {
      display: flex;
      align-items: center;

      .line {
        position: relative;
        width: 4px;
        height: 15px;
        background: #fc7200;
        border-radius: 4px;
        overflow: hidden;
        margin-right: 10px;

        .b_line {
          width: 100px;
          height: 6px;
          background: #462bf7;
        }

        .triangle {
          width: 0;
          height: 0;
          border-top: 100px solid #462bf7;
          border-left: 100px solid transparent;
        }
      }

      .label {
        font-size: 16px;
        font-weight: 500;
        color: #0d1e40;
      }
    }
  }

  .btn {
    background: #fc7200;
    border-color: #fc7200;
    color: #fff;

    &.black {
      background: #0d1e40;
      border-color: #0d1e40;
    }
  }

  .el-table th.el-table__cell {
    height: 38px;
    background: #fafafa;
    padding: 0;
    font-size: 12px;
    color: #666666;
  }

  .el-table .el-table__cell {
    font-size: 14px;
    color: #222222;
  }

  .imgs {
    display: flex;
    align-items: center;
    padding-left: 36px;

    .img {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      margin-right: 10px;
    }
  }
}
</style>