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(index)" @mouseleave="hiddenImg">示例</span>
            </td>
          </tr>
        </tbody>
        <td class="img" v-show="imgFlag">
          <img src="../../img/weChat.png" v-if="hoverImg === '微信订阅号'"/>
          <img src="../../img/weChat.png" v-if="hoverImg === '微信服务号'"/>
          <img src="../../img/toutiao.png" v-if="hoverImg === '抖音'" />
          <img src="../../img/douyin.png" v-if="hoverImg === '今日头条'"/>
          <img src="../../img/weChat_video.png" v-if="hoverImg === '微信视频号'"/>
        </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 {
  components: {
    Modal,
  },
  data() {
    return {
      showModal: false,
      imgFlag: false,
      tableHeader: ["平台名称", "平台账号", "是否认证", "粉丝数", "操作"],
      tableData: [],
      editData: {},
      accountId: "",
      hoverImg: ''
    };
  },
  methods: {
    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 === "是" ? true : false,
        
        // authentication: isAttesta === "是" ? true : false,
        
        fansCount: fansNum,
        accountCode: account,
      };
      this.updateMediaAccountInfo(data).then(() => {
        let req = {
          accountId: this.accountId,
        };
        this.selectMediaAccountPage(req);
      });
    },
    toggleModal: function (i) {
      this.editData = this.tableData[i];
      this.showModal = true;
    },
    closeme: function () {
      this.showModal = false;
    },
    showImg: function (i) {
      this.imgFlag = true;
      this.hoverImg = this.tableData[i].platformName || '微信视频号';
      console.log(this.hoverImg);
    },
    hiddenImg: function () {
      this.imgFlag = false;
    },
    // 获取列表数据  接口
    selectMediaAccountPage: function (data) {
      this.$http({
        method: "post",
        url: "/sys/mediaAccount/selectMediaAccountPage",
        data,
      })
        .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() {
    let userId = localStorage.getItem("userId");
    if (userId) {
      this.accountId = userId;
    } else {
      this.accountId = "";
    }
    let data = {
      accountId: this.accountId,
    };
    this.selectMediaAccountPage(data);
  },
};
</script>

<style scoped lang="less">
.accountTable {
  width: 1030px;
  border-collapse: collapse;
  position: relative;
  .img {
    position: absolute;
    top: 0;
    right: 206px;
    width: 267px;
    height: 555px;
    z-index: 999;
    border: none;
    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>