经销商账号管理

src/App.vue

@@ -36,7 +36,7 @@ export default {
     return {
       navTitle1: ' > 数据管理',
       navTitle2: '',
-      isManufacturer: 'manufacturer', // distributor 经销商 manufacturer 厂商
+      isManufacturer: 'distributor', // distributor 经销商 manufacturer 厂商
     }
   },
   methods: {

src/views/account/AccountManage.vue

@@ -12,95 +12,36 @@
           </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">
-              <span @click="toggleModal">编辑</span>
-              <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">
-              <span @click="toggleModal">编辑</span>
-              <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">
-              <span @click="toggleModal">编辑</span>
-              <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">
-              <span @click="toggleModal">编辑</span>
-              <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>
+          <tr class="tbodyStyle" v-for="(obj, index) in tableData" :key="index" :class="{table_gray: index%2===0}">
+            <td>{{ obj.dlrName }}</td>
+            <td>{{ obj.accountId }}</td>
+            <td>{{ "是否认证" }}</td>
+            <td>{{ obj.fansCount }}</td>
             <td class="operationStyle">
-              <span @click="toggleModal">编辑</span>
-              <span>示例</span>
+              <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>
-      <Modal v-if="showModal" v-on:closeme="closeme"></Modal>
+      <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";
+import Modal from "./components/Modal2";
 export default {
   props: {},
   components: {
@@ -109,33 +50,82 @@ export default {
   data() {
     return {
       showModal: false,
-      discolor: false, // false是隔行变色
+      imgFlag: false,
       tableHeader: ["平台名称", "平台账号", "是否认证", "粉丝数", "操作"],
       tableData: [
         {
-          platformName: "",
-          dataName: "",
-          carSeries: "",
-          carType: "",
-          releaseMedia: "",
-          projectClass: "",
-          draftGenre: "",
-          contentClass: "",
-          articleTitle: "",
-          articleLink: "",
+          accountCode: "北京博瑞",
+          accountId: "334453732",
+          dlrCode: "L2000",
+          dlrName: "dlrName",
+          fansCount: 100000,
+          id: "主键id",
+          localArea: "东区",
+          platformId: "所属平台",
+          flag: 1,
+        },
+        {
+          accountCode: "北京博瑞",
+          accountId: "334453732",
+          dlrCode: "L2000",
+          dlrName: "dlrName",
+          fansCount: 100000,
+          id: "主键id",
+          localArea: "东区",
+          platformId: "所属平台",
+          flag: 0,
+        },
+        {
+          accountCode: "北京博瑞",
+          accountId: "334453732",
+          dlrCode: "L2000",
+          dlrName: "dlrName",
+          fansCount: 100000,
+          id: "主键id",
+          localArea: "东区",
+          platformId: "所属平台",
+        },
+        {
+          accountCode: "北京博瑞",
+          accountId: "334453732",
+          dlrCode: "L2000",
+          dlrName: "dlrName",
+          fansCount: 100000,
+          id: "主键id",
+          localArea: "东区",
+          platformId: "所属平台",
+        },
+        {
+          accountCode: "北京博瑞",
+          accountId: "334453732",
+          dlrCode: "L2000",
+          dlrName: "dlrName",
+          fansCount: 100000,
+          id: "主键id",
+          localArea: "东区",
+          platformId: "所属平台",
         },
       ],
+      editData: {},
     };
   },
   methods: {
-    EditForm: () => {
+    editForm: (account, fansNum, flag, editData) => {
+      console.log(account, fansNum, flag, editData);
       alert("编辑");
     },
-    toggleModal: function () {
-      this.showModal = !this.showModal;
+    toggleModal: function (i) {
+      this.editData = this.tableData[i];
+      this.showModal = true;
     },
     closeme: function () {
-      this.showModal = !this.showModal;
+      this.showModal = false;
+    },
+    showImg: function () {
+      this.imgFlag = true;
+    },
+    hiddenImg: function () {
+      this.imgFlag = false;
     },
     //获取资料列表--分页查询每个经销商账号信息
     getDataList: function () {
@@ -165,26 +155,43 @@ export default {
 .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 #818181;
+  border: 1px solid #ccc;
 }
 .theadStyle {
-  background-color: grey;
+  background-color: #8d9092;
   border: 1px 1px 0px 0px;
   text-align: center;
 }
 .theadStyle td {
-  color: black;
+  color: #fff;
   padding: 7px 5px;
-  border: 1px solid #797979;
+  // border: 1px solid #797979;
+  border: 1px solid #fff;
 }
 .operationStyle span {
-  color: #027db4;
+  color: #0056a0;
   width: 100%;
+  &:hover {
+    cursor: pointer;
+  }
 }
 .operationStyle span:nth-child(1) {
   margin-right: 32px;
@@ -193,4 +200,13 @@ export default {
   margin: 16px;
   margin-left: 0px;
 }
+.footerTip{
+  p{
+    color: red;
+    text-align: right;
+  }
+}
+.table_gray {
+    background: #f5f5f5
+}
 </style>

src/components/Modal2.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="modal-backdrop">
+  <div class="modal-backdrop" @mousewheel="mousewheel">
     <div class="modal">
       <div class="modal-header">
         <span>编辑</span>
@@ -8,36 +8,34 @@
         <div class="bodyRow">
           <div class="contentCol1">
             <span>平台名称</span>
-            <div>{{ 1 }}</div>
+            <div>{{ editData.platformId }}</div>
           </div>
         </div>
         <div class="bodyRow">
           <div class="contentCol1">
             <span>平台账号</span>
-            <input type="text" placeholder="输入平台账号" v-model="a"/>
+            <input type="text" v-model="accountValue" />
           </div>
         </div>
         <div class="bodyRow">
           <div class="contentCol1">
-            <span>是否认证</span
-            ><select name="identify" id="">
-              <option value="">请选择</option>
+            <span>是否认证</span>
+            <select name="identify" v-model="flag" >
+              <option>请选择</option>
+              <option>是</option>
+              <option>否</option>
             </select>
           </div>
         </div>
         <div class="bodyRow">
           <div class="contentCol1">
             <span>粉丝数</span>
-            <input type="number" placeholder="输入整数" v-model="a" />
+            <input type="number" v-model="fansNum" />
           </div>
         </div>
       </div>
       <div class="modal-footer">
-        <button
-          type="button"
-          class="btn-confirm"
-          @click="confirm('form')"
-        >
+        <button type="button" class="btn-confirm" @click="confirm()">
           确认
         </button>
         <button type="button" class="btn-close" @click="closeSelf">取消</button>
@@ -50,10 +48,19 @@
 export default {
   name: "Modal",
   props: {
+    editData: {
+      type: Object,
+      default: () => {
+        return {};
+      },
+    },
   },
   data() {
     return {
       formData: new FormData(),
+      accountValue: this.editData["accountCode"],
+      fansNum: this.editData["fansCount"],
+      flag: '请选择',
     };
   },
   methods: {
@@ -88,10 +95,27 @@ export default {
             message: "创建数据集失败",
           });
         }); */
-        this.$emit("closeme");
+      if (!this.accountValue) {
+        alert('请填写平台账号');
+        return
+      } 
+      if (this.fansNum <= 0) {
+        alert('粉丝数必须大于0!');
+        return
+      } 
+      if (this.flag === '请选择') {
+        alert('请选择是否认证');
+        return
+      }
+      this.$emit("submit", this.accountValue, this.fansNum, this.flag, this.editData);
+    },
+    mousewheel: function (e) {
+      e.preventDefault();
     },
   },
-  computed: {},
+  created() {
+    console.log(this.editData);
+  },
 };
 </script>
 
@@ -115,6 +139,7 @@ export default {
   flex-direction: column;
   border-radius: 0px;
   width: 663px;
+  transform: translateY(-100px);
 }
 .modal-header {
   border-bottom: 1px solid #eee;
@@ -167,7 +192,7 @@ div {
 }
 .btn-confirm {
   color: #fff;
-  background-color: #2d8cf0;
+  background-color: #0056a0;
 }
 .bodyRow {
   display: flex;