厂商账号管理

src/views/account/AccountIndex.vue

@@ -1,15 +1,198 @@
 <template>
-<!-- 厂商账号管理 -->
-  <div class="upload_record">
-    <h1>厂商账号管理</h1>
+  <!-- 厂商账号管理 -->
+  <div class="accounts_manage">
+    <div class="search">
+      <div class="input">
+        <img src="../../img/search.png" />
+        <input type="text" @focus="focusInput" v-model="inputValue" />
+      </div>
+      <div class="current_button" @click="search">搜索</div>
+    </div>
+    <div class="option">
+      <div class="selectArea">
+        <p>选择区域</p>
+        <select v-model="areaValue" @change="areaOption">
+          <option value="">请选择</option>
+          <option v-for="(item, index) in areaList" :key="index">
+            {{ item.area }}
+          </option>
+        </select>
+      </div>
+      <div class="selectPlate">
+        <p>媒体平台</p>
+        <select v-model="plateValue" @change="plateOption">
+          <option v-for="(item, index) in platesList" :key="index">
+            {{ item }}
+          </option>
+        </select>
+      </div>
+      <div class="current_button" @click="submit">确定</div>
+    </div>
+    <Table
+      :tableData='getDate'
+      @edit_data='editData'
+    > </Table>
   </div>
 </template>
 
 <script>
+import Table from "./components/AccountTable";
 export default {
-}
+  components: {
+    Table,
+  },
+  data() {
+    return {
+      inputValue: "请输入要搜索的经销商或DLR Code",
+      areaList: [
+        {
+          sign: "all",
+          area: "全区",
+          checked: false,
+        },
+        {
+          sign: "n",
+          area: "北区",
+          checked: false,
+        },
+        {
+          sign: "s",
+          area: "南区",
+          checked: false,
+        },
+        {
+          sign: "e",
+          area: "东区",
+          checked: false,
+        },
+        {
+          sign: "self",
+          area: "自定义分组",
+          checked: false,
+        },
+      ],
+      platesList: ["全部", "微信订阅号"],
+      areaValue: "",
+      plateValue: "",
+      tableData: [],
+      getDate: [
+        { num: "1", id: "123", dlr: 'L0201', area: '北区', distributor: '北京博瑞',plate:'微信公众号', account: '雷克萨斯北京博瑞4S店', isAttest: 0, fans: 118529},
+        { num: "1", id: "123", dlr: 'L0201', area: '北区', distributor: '北京博瑞',plate:'微信公众号', account: '雷克萨斯北京博瑞4S店', isAttest: 0, fans: 118529},
+        { num: "1", id: "123", dlr: 'L0201', area: '北区', distributor: '北京博瑞',plate:'微信公众号', account: '雷克萨斯北京博瑞4S店', isAttest: 0, fans: 118529},
+        { num: "1", id: "123", dlr: 'L0201', area: '北区', distributor: '北京博瑞',plate:'微信公众号', account: '雷克萨斯北京博瑞4S店', isAttest: 1, fans: 118529}
+      ],
+      functionData: [],
+    };
+  },
+  methods: {
+    focusInput: function () {
+      this.inputValue = "";
+    },
+    search: function () {
+      console.log(this.inputValue);
+      this.inputValue = "请输入要搜索的经销商或DLR Code";
+    },
+    areaOption: function () {
+      console.log(this.areaValue);
+    },
+    plateOption: function () {
+      console.log(this.plateValue);
+    },
+    submit: function () {
+      console.log(this.plateValue);
+      console.log(this.areaValue);
+    },
+    getData: function () {
+      this.tableData = [];
+      this.functionData = [];
+      this.getDate.forEach((element) => {
+        this.tableData.push({
+          num: element.num,
+          dlr: element.dlr,
+          area: element.area,
+          distributor: element.distributor,
+          plate: element.plate,
+          account: element.account,
+          isAttest: element.isAttest,
+          fans: element.fans
+          
+        });
+        this.functionData.push({
+          id: element.id,
+        });
+      });
+    },
+    editData: function (i, isAttesta, fansNum) {
+      console.log('完成编辑', i, isAttesta, fansNum);
+    }
+  },
+  mounted() {
+    this.plateValue = this.platesList[0];
+    this.getData();
+  },
+};
 </script>
 
 <style scoped lang="less">
-
+.accounts_manage {
+  .search {
+    border: 1px solid #ccc;
+    padding: 10px;
+    display: flex;
+    align-items: center;
+    .input {
+      background-color: #fff;
+      border: 1px solid #ccc;
+      padding: 2px;
+      display: flex;
+      img {
+        width: 28px;
+        height: 28px;
+        border: 1px solid #ccc;
+      }
+      input {
+        background-color: #fff;
+        border: 1px solid #ccc;
+        width: 220px;
+        margin-left: 3px;
+        color: #555;
+        font-size: 12px;
+      }
+    }
+  }
+  .option {
+    display: flex;
+    margin-top: 10px;
+    .selectArea {
+      display: flex;
+      height: 28px;
+      p {
+        height: 28px;
+        line-height: 28px;
+        margin-right: 20px;
+      }
+      select {
+        width: 144px;
+        height: 28px;
+        margin-right: 35px;
+        border: 1px solid #ccc;
+      }
+    }
+    .selectPlate {
+      display: flex;
+      height: 28px;
+      p {
+        height: 28px;
+        line-height: 28px;
+        margin-right: 20px;
+      }
+      select {
+        width: 144px;
+        height: 28px;
+        margin-right: 20px;
+        border: 1px solid #ccc;
+      }
+    }
+  }
+}
 </style>

src/views/account/components/AccountTable.vue

@@ -0,0 +1,137 @@
+<template>
+  <div class="table">
+    <table>
+      <thead>
+        <tr>
+          <td colspan="4">基础信息</td>
+          <td>媒体平台</td>
+          <td colspan="4">媒体账号信息</td>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>No.</td>
+          <td>DLR Code</td>
+          <td>所属区域</td>
+          <td>经销商店名</td>
+          <td>所属平台</td>
+          <td>账号</td>
+          <td>是否认证</td>
+          <td>粉丝数</td>
+          <td>操作</td>
+        </tr>
+        <tr
+          v-for="(obj, index) in tableData"
+          :key="index"
+          :class="{ table_gray: index % 2 === 0 }"
+        >
+          <td>{{ obj.num }}</td>
+          <td>{{ obj.dlr }}</td>
+          <td>{{ obj.area }}</td>
+          <td>{{ obj.distributor }}</td>
+          <td>{{ obj.plate }}</td>
+          <td>{{ obj.account }}</td>
+          <td>{{ obj.isAttest === 1 ? "是" : "否" }}</td>
+          <td>{{ obj.fans }}</td>
+          <td class="operation">
+            <span @click="edit(index)">编辑</span>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+    <EditModal
+      @edit_data="editData"
+      @hide_modal="closeModal"
+      :modalFlag="deleteModalFlag"
+      :dataObj="modalData"
+    ></EditModal>
+  </div>
+</template>
+
+<script>
+import EditModal from "./EditModal";
+export default {
+  props: {
+    // 表数据
+    tableData: {
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    //  表格一页共有多少数据
+    pageSize: {
+      type: Number,
+      default: 2,
+    },
+  },
+  components: {
+    EditModal,
+  },
+  data() {
+    return {
+      deleteModalFlag: false,
+      index: 0,
+      editFlag: [],
+      modalData: {},
+    };
+  },
+  methods: {
+    edit: function (i) {
+      this.index = i;
+      this.deleteModalFlag = true;
+      this.modalData = this.tableData[i];
+    },
+    // 模态框确认
+    editData: function (isAttesta, fansNum) {
+      this.deleteModalFlag = false;
+      this.$emit("edit_data", this.index, isAttesta, fansNum);
+    },
+    // 模态框取消
+    closeModal: function () {
+      this.deleteModalFlag = false;
+    },
+    mounted() {},
+  },
+};
+</script>
+
+<style scoped lang="less">
+.table {
+  background-color: #fff;
+  width: 100%;
+  margin-top: 10px;
+  text-align: center;
+  table {
+    width: 100%;
+    border-collapse: collapse;
+    border: none;
+    thead {
+      td {
+        background: #8d9092;
+        height: 36px;
+        color: #fff;
+        border: 1px solid #ccc;
+      }
+    }
+    tbody {
+      td {
+        height: 36px;
+        border: 1px solid #ccc;
+      }
+      .operation {
+        span {
+          color: #00f;
+          margin: 0 20px;
+          &:hover {
+            cursor: pointer;
+          }
+        }
+      }
+    }
+  }
+}
+.table_gray {
+  background: #f5f5f5;
+}
+</style>

src/views/account/components/EditModal.vue

@@ -0,0 +1,209 @@
+<template>
+  <div class="delete_modal" v-if="modalFlag">
+    <div class="modal_content">
+      <p class="edit">编辑</p>
+      <div class="content">
+        <div class="dlr">
+          <p style="width: 100px">DLR Code</p>
+          <p>{{ dataObj.dlr }}</p>
+        </div>
+        <div class="area">
+          <p style="width: 100px">所属区域</p>
+          <p>{{ dataObj.area }}</p>
+        </div>
+        <div class="distributor">
+          <p style="width: 100px">经销商店名</p>
+          <p>{{ dataObj.distributor }}</p>
+        </div>
+        <div class="plate">
+          <p style="width: 100px">所属平台</p>
+          <p>{{ dataObj.plate }}</p>
+        </div>
+        <div class="account">
+          <p style="width: 100px">平台账号</p>
+          <p>{{ dataObj.account }}</p>
+        </div>
+        <div class="isAttest">
+          <p style="width: 100px">是否认证</p>
+          <select ref="selectValue">
+            <!-- 原来列表展示什么，select默认展示 -->
+            <option>{{ dataObj.isAttest === 0 ? "否" : "是" }}</option>
+            <option>{{ dataObj.isAttest === 0 ? "是" : "否" }}</option>
+          </select>
+        </div>
+        <div class="fans">
+          <p style="width: 100px">粉丝数</p>
+          <input ref="inputValue" :value="dataObj.fans" />
+        </div>
+      </div>
+      <div class="btn">
+        <div class="current_button" @click="submit" style="margin: 0">确定</div>
+        <div class="current_button" style="margin: 0" @click="hideModal">
+          取消
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    modalFlag: {
+      type: Boolean,
+      default: true,
+    },
+    dataObj: {
+      type: Object,
+      default: () => {
+        return {};
+      },
+    },
+  },
+  data() {
+    return {};
+  },
+  methods: {
+    submit: function () {
+      let isAttesta = this.$refs.selectValue.value || "";
+      let fansNum = this.$refs.inputValue.value || 0;
+      fansNum = +fansNum;
+      if (fansNum <= 0) {
+        alert("请填写大于零的整数");
+      } else if (Math.ceil(fansNum) !== fansNum) {
+        alert("请填写大于零的整数");
+      } else {
+        this.$emit("edit_data", isAttesta, fansNum);
+      }
+    },
+    hideModal: function () {
+      this.$emit("hide_modal");
+    },
+  },
+  mounted() {},
+};
+</script>
+
+<style scoped lang="less">
+.delete_modal {
+  position: fixed;
+  left: 0;
+  top: 0;
+  height: 100vh;
+  width: 100vw;
+  background-color: rgba(127, 127, 127, 0.7);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-align: left;
+  .modal_content {
+    width: 700px;
+    height: 500px;
+    background-color: #eee;
+    transform: translateY(-50px);
+    .edit {
+      height: 40px;
+      line-height: 40px;
+      font-size: 20px;
+      text-align: left;
+      border-bottom: 1px solid #ccc;
+      padding-left: 20px;
+    }
+    .content {
+      padding-left: 220px;
+
+      .dlr {
+        display: flex;
+        margin-top: 20px;
+        p {
+          font-size: 14px;
+          height: 28px;
+          line-height: 28px;
+        }
+      }
+      .area {
+        display: flex;
+        margin-top: 15px;
+        p {
+          font-size: 14px;
+          height: 28px;
+          line-height: 28px;
+        }
+      }
+      .distributor {
+        margin-top: 15px;
+
+        display: flex;
+        height: 28px;
+        line-height: 28px;
+        p {
+          font-size: 14px;
+        }
+      }
+      .plate {
+        margin-top: 15px;
+
+        display: flex;
+        height: 28px;
+        line-height: 28px;
+        p {
+          font-size: 14px;
+        }
+      }
+      .account {
+        margin-top: 15px;
+
+        display: flex;
+        height: 28px;
+        line-height: 28px;
+        p {
+          font-size: 14px;
+        }
+      }
+      .isAttest {
+        margin-top: 15px;
+
+        display: flex;
+        p {
+          font-size: 14px;
+          height: 28px;
+          line-height: 28px;
+        }
+        select {
+          border: 1px solid #ccc;
+          width: 144px;
+          height: 28px;
+          font-size: 14px;
+          option {
+            color: #555;
+            font-size: 14px;
+          }
+        }
+      }
+      .fans {
+        margin-top: 15px;
+
+        display: flex;
+        height: 28px;
+        line-height: 28px;
+        p {
+          font-size: 14px;
+        }
+        input {
+          border: 1px solid #ccc;
+          width: 144px;
+          height: 28px;
+          font-size: 14px;
+        }
+      }
+    }
+    .btn {
+      margin: 0 auto;
+      width: 150px;
+      margin-top: 50px;
+      display: flex;
+      justify-content: space-between;
+    }
+  }
+}
+</style>