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"
            v-for="(obj, index) in tableData"
            :key="index"
            :class="{ table_gray: index % 2 === 0 }"
          >
            <td>{{ obj.platformName }}</td>
            <td>{{ obj.accountCode }}</td>
            <td>{{ obj.authorizationName }}</td>
            <td>{{ obj.fansCount }}</td>
            <td class="operationStyle">
              <span @click="toggleModal(index)">编辑</span>
              <span @mouseenter="showImg" @mouseleave="hiddenImg">示例</span>
            </td>
          </tr>
        </tbody>
        <td class="img" v-show="imgFlag">
          <img src="" alt="aa" />
        </td>
      </table>
      <div class="footerTip">
        <p>*编辑平台账号信息时，请按照示例提示填写账号ID</p>
      </div>
    </div>
    <Modal
      v-if="showModal"
      @closeme="closeme"
      @submit="editForm"
      :editData="editData"
    ></Modal>
  </div>
</template>

<script>
import Modal from "./components/Modal2";
export default {
  props: {},
  components: {
    Modal,
  },
  data() {
    return {
      showModal: false,
      imgFlag: false,
      tableHeader: ["平台名称", "平台账号", "是否认证", "粉丝数", "操作"],
      tableData: [],
      editData: {},
      // dictList: [],
      // mediaPlatName: [],
    };
  },
  methods: {
    // addDataList: function (account, fansNum, flag, editData) {
    //   console.log(account, fansNum, flag, editData);
    //   this.$http({
    //     url: "/sys/mediaAccount/addMediaAccountInfo",
    //     method: "post",
    //     data: {
    //       accountId: account,
    //       fansCount: fansNum,
    //     },
    //   })
    //     .then((res) => {
    //       console.log(res);
    //       if (res.data.code === 200) {
    //         //  this.tableData = res.data.data;
    //       }
    //     })
    //     .catch((err) => {
    //       console.log(err);
    //     });
    // },
    editForm: function (account, fansNum, flag, editData) {
      console.log(account, fansNum, flag, editData);
      //alert("编辑");
      //this.addDataList(account, fansNum, flag, editData);
      let data = {
        id: editData["id"],
        authentication: flag === "是" ? "1" : "0",
        fansCount: fansNum,
        accountCode: account
      };
      this.updateMediaAccountInfo(data).then(() => {
        this.selectMediaAccountPage();
      });
    },
    toggleModal: function (i) {
      this.editData = this.tableData[i];
      this.showModal = true;
    },
    closeme: function () {
      this.showModal = false;
    },
    showImg: function () {
      this.imgFlag = true;
    },
    hiddenImg: function () {
      this.imgFlag = false;
    },
    //
    /*    getDataList: function () {
      this.$http({
        //url: "/sys/mediaAccount/selectMediaAccountPage",
        url: "/sys/mediaAccount/addMediaAccountInfo",
        method: "post",
        data: {},
      })
        .then((res) => {
          console.log(res);
          if (res.data.code === 200) {
            //  this.tableData = res.data.data;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    }, */

    // 获取内容分类、媒体平台、常用参数接口的标识，再调接口时需要用到
    // selectSysDataDictList: function () {
    //   return new Promise((resolve, reject) => {
    //     this.$http({
    //       method: "post",
    //       url: "/sys/dataDict/selectSysDataDictList",
    //       data: {},
    //     })
    //       .then((res) => {
    //         if (res.data && res.data.code === 200) {
    //           this.dictList = res.data.data;
    //           resolve();
    //         } else {
    //           console.log(res);
    //           reject();
    //         }
    //       })
    //       .catch((err) => {
    //         console.log(err);
    //         reject();
    //       });
    //   });
    // },
    // 获取列表数据   接口
    // getDateList: function () {
    //   this.$http({
    //     method: "post",
    //     url: "/sys/dataDict/selectSysDataDictPage",
    //     data: {
    //       dictCode: this.dictList[3]["dictCode"],
    //       parentId: this.dictList[3]["id"],
    //     },
    //   })
    //     .then((res) => {
    //       if (res.data && res.data.code === 200) {
    //         this.mediaPlatName = res.data.data;
    //         //console.log(this.mediaPlatName);
    //         //取媒体平台名称
    //         let arr = [];
    //         let len1 = this.mediaPlatName.length;
    //         let len2 = this.tableData.length;
    //         for (let i = 0; i < len1; i++) {
    //           arr.push(this.mediaPlatName[i].dictName);
    //         }
    //         //console.log(arr);
    //         while(len1 > len2){
    //           this.tableData.push({})
    //         }
    //         //渲染，传递到页面数组
    //         for (let i = 0; i < this.tableData.length; i++) {
    //           this.tableData[i].dlrName=arr[i];
    //         }
    //       } else {
    //         console.log(res);
    //       }
    //     })
    //     .catch((err) => {
    //       console.log(err);
    //     });
    // },
    //
    // 获取列表数据  接口
    selectMediaAccountPage: function () {
      this.$http({
        method: "post",
        url: "/sys/mediaAccount/selectMediaAccountPage",
      })
        .then((res) => {
          if (res.data && res.data.code === 200) {
            this.tableData = res.data.data;
            console.log(res, "res");
          } else {
            console.log(res);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    updateMediaAccountInfo: function (data = {}) {
      return new Promise((resolve, reject) => {
        this.$http({
          method: "post",
          url: "sys/mediaAccount/updateMediaAccountInfo",
          data: data,
        })
          .then((res) => {
            console.log(res);
            if (res.data && res.data.code === 200) {
              console.log(res, "修改");
              resolve();
            } else {
              console.log(res);
              reject();
            }
          })
          .catch((err) => {
            console.log(err);
            reject();
          });
      });
    },
  },
  mounted() {
    this.selectMediaAccountPage();
    // this.selectSysDataDictList()
    //   .then(() => {
    //     this.getDateList();
    //     console.log(this.dictList);
    //   })
    //   .catch((err) => {
    //     console.log(err);
    //   });
  },
};
</script>

<style scoped lang="less">
.accountTable {
  width: 1030px;
  border-collapse: collapse;
  position: relative;
  .img {
    position: absolute;
    top: 0;
    right: 206px;
    width: 200px;
    height: 300px;
    z-index: 999;
    img {
      height: 100%;
      width: 100%;
    }
  }
}
.accountTable td {
  width: 20%;
  height: 35px;
  text-align: center;
  border: 1px solid #ccc;
}
.theadStyle {
  background-color: #8d9092;
  border: 1px 1px 0px 0px;
  text-align: center;
}
.theadStyle td {
  color: #fff;
  padding: 7px 5px;
  // border: 1px solid #797979;
  border: 1px solid #fff;
}
.operationStyle span {
  color: #0056a0;
  width: 100%;
  &:hover {
    cursor: pointer;
  }
}
.operationStyle span:nth-child(1) {
  margin-right: 32px;
}
.upload_record div:nth-child(1) {
  margin: 16px;
  margin-left: 0px;
}
.footerTip {
  p {
    color: red;
    text-align: right;
  }
}
.table_gray {
  background: #f5f5f5;
}
</style>