Lexus-media/src/views/account/AccountManage.vue

<template>
  <!-- 经销商账号管理 -->
  <div class="upload_record">
    <div>自媒体/社交媒体账号开通情况</div>
    <div class="tableBox">
      <table class="accountTable">
        <thead>
          <tr class="theadStyle">
            <td v-for="(item, index) in tableHeader" :key="index">
              {{ item }}
            </td>
          </tr>
        </thead>
        <tbody>
          <tr class="tbodyStyle">
            <td>微信订阅号</td>
            <td v-for="(obj, i) in tableData" :key="i">
              {{ obj.dataName }}
            </td>
            <td v-for="(obj, i) in tableData" :key="i">
              {{ obj.dataName }}
            </td>
            <td v-for="(obj, i) in tableData" :key="i">
              {{ obj.dataName }}
            </td>
            <td class="operationStyle" @click="toggleModal">
              <span>编辑</span>
            </td>
          </tr>
          <tr class="tbodyStyle">
            <td>微信服务号</td>
            <td v-for="(obj, i) in tableData" :key="i">
              {{ obj.dataName }}
            </td>
            <td v-for="(obj, i) in tableData" :key="i">
              {{ obj.dataName }}
            </td>
            <td v-for="(obj, i) in tableData" :key="i">
              {{ obj.dataName }}
            </td>
            <td class="operationStyle" @click="toggleModal">
              <span>编辑</span>
            </td>
          </tr>
          <tr class="tbodyStyle">
            <td>今日头条</td>
            <td v-for="(obj, i) in tableData" :key="i">
              {{ obj.dataName }}
            </td>
            <td v-for="(obj, i) in tableData" :key="i">
              {{ obj.dataName }}
            </td>
            <td v-for="(obj, i) in tableData" :key="i">
              {{ obj.dataName }}
            </td>
            <td class="operationStyle" @click="toggleModal">
              <span>编辑</span>
            </td>
          </tr>
          <tr class="tbodyStyle">
            <td>抖音</td>
            <td v-for="(obj, i) in tableData" :key="i">
              {{ obj.dataName }}
            </td>
            <td v-for="(obj, i) in tableData" :key="i">
              {{ obj.dataName }}
            </td>
            <td v-for="(obj, i) in tableData" :key="i">
              {{ obj.dataName }}
            </td>
            <td class="operationStyle" @click="toggleModal">
              <span>编辑</span>
            </td>
          </tr>
          <tr class="tbodyStyle">
            <td>微信视频号</td>
            <td v-for="(obj, i) in tableData" :key="i">
              {{ obj.dataName }}
            </td>
            <td v-for="(obj, i) in tableData" :key="i">
              {{ obj.dataName }}
            </td>
            <td v-for="(obj, i) in tableData" :key="i">
              {{ obj.dataName }}
            </td>
            <td class="operationStyle" @click="toggleModal">
              <span>编辑</span>
            </td>
          </tr>
        </tbody>
      </table>
      <Modal v-if="showModal" v-on:closeme="closeme"></Modal>
    </div>
  </div>
</template>

<script>
import Modal from "../../components/Modal2";
export default {
  props: {},
  components: {
    Modal,
  },
  data() {
    return {
      showModal: false,
      discolor: false, // false是隔行变色
      tableHeader: ["平台名称", "平台账号", "是否认证", "粉丝数", "操作"],
      tableData: [
        {
          platformName: "",
          dataName: "",
          carSeries: "",
          carType: "",
          releaseMedia: "",
          projectClass: "",
          draftGenre: "",
          contentClass: "",
          articleTitle: "",
          articleLink: "",
        },
      ],
    };
  },
  methods: {
    EditForm: () => {
      alert("编辑");
    },
    toggleModal: function () {
      this.showModal = !this.showModal;
    },
    closeme: function () {
      this.showModal = !this.showModal;
    },
    //获取资料列表--分页查询每个经销商账号信息
    getDataList: function () {
      this.$http({
        url: "/sys/mediaAccount/selectMediaAccountPage",
        method: "post",
        data: {},
      })
        .then((res) => {
          console.log(res);
          if (res.data.code === 200) {
          //  this.tableData = res.data.data;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
  mounted() {
    this.getDataList();
  },
};
</script>

<style scoped lang="less">
.accountTable {
  width: 1030px;
  border-collapse: collapse;
}
.accountTable td {
  width: 20%;
  height: 35px;
  text-align: center;
  border: 1px solid #818181;
}
.theadStyle {
  background-color: grey;
  border: 1px 1px 0px 0px;
  text-align: center;
}
.theadStyle td {
  color: black;
  padding: 7px 5px;
  border: 1px solid #797979;
}
.operationStyle span {
  color: #027db4;
}
.upload_record div:nth-child(1) {
  margin: 16px;
  margin-left: 0px;
}
</style>