Merge branch 'master' of http://121.40.40.223:3000/zizhong.wang/Lexus-media

src/views/account/AccountManage.vue

@@ -1,15 +1,91 @@
 <template>
-<!-- 经销商账号管理 -->
+  <!-- 经销商账号管理 -->
   <div class="upload_record">
-    <h1>经销商账号管理</h1>
+    <h1>自媒体/社交媒体账号开通情况</h1>
+    <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: !discolor && index % 2 === 0 }"
+          >
+            <td>
+              {{ obj.releaseTime }}
+            </td>
+            <td>
+              {{ obj.dataName }}
+            </td>
+            <td>
+              {{ obj.carSeries }}
+            </td>
+            <td>
+              {{ obj.carType }}
+            </td>
+            <td class="operationStyle">
+              <span>编辑</span>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
   </div>
 </template>
 
 <script>
 export default {
-}
+  props: {},
+  components: {},
+  data() {
+    return {
+      discolor: false, // false是隔行变色
+      tableHeader: ["平台名称", "平台账号", "是否认证", "粉丝数", "操作"],
+      tableData: [
+        {
+          releaseTime: "",
+          dataName: "",
+          carSeries: "",
+          carType: "",
+          releaseMedia: "",
+          projectClass: "",
+          draftGenre: "",
+          contentClass: "",
+          articleTitle: "",
+          articleLink: "",
+        },
+      ],
+    };
+  },
+  methods: {
+    EditForm: () => {
+      alert("编辑");
+    },
+  },
+};
 </script>
 
 <style scoped lang="less">
-
+.accountTable {
+  width: 1030px;
+}
+.accountTable td{
+  width: 20%;
+}
+.theadStyle{
+  background-color: grey;
+  border: 1px 1px 0px 0px;
+  text-align: center;
+}
+.theadStyle td{
+  color: black;
+  padding: 7px 5px;
+}
 </style>

src/views/data/InforList.vue

@@ -51,7 +51,6 @@
                 :key="index"
                 :class="{ table_gray: !discolor && index % 2 === 0 }"
               >
-                <!--  <td :style="trStyle" v-if="flag">{{ index + 1 }}</td> -->
                 <td v-for="(item, index) in obj" :key="index" :style="trStyle">
                   {{ item }}
                 </td>
@@ -59,7 +58,7 @@
                   <span
                     v-for="(operationObj, i) in operation"
                     :key="i"
-                    @click="operationObj.function(obj)"
+                    @click="operationObj.function(obj);nowIndex=index"
                     >{{ operationObj.name }}
                   </span>
                 </td>
@@ -78,29 +77,16 @@
       </div>
     </div>
     <div v-else>
-      <Detail></Detail>
+      <Detail
+      :detailData="tableData"
+      :nowIndex="nowIndex"></Detail>
     </div>
-    <!-- <div v-show="!initialPage">
-      详情页面
-      <div><span>资料名称</span><span>{{}}</span></div>
-      <div><span>上传时间</span><span>{{}}</span></div>
-      <div>
-        <div><span>车系</span><span>{{}}</span></div>
-        <div><span>车型</span><span>{{}}</span></div>
-      </div>
-      <div>
-        <div><span>素材时间</span><span>{{}}</span></div>
-        <div><span>经销商范围</span><span>{{}}</span></div>
-      </div>
-      <div><span>资料描述</span><span>{{}}</span></div>
-      <span>附件</span>
-    </div> -->
   </div>
 </template>
 
 <script>
 import TablePage from "../../components/TablePage";
-import Detail from './components/UploadLinkDetail';
+import Detail from './components/InfoListItemDetail';
 export default {
   props: {
     isManufacturer: {
@@ -151,20 +137,20 @@ export default {
         }, */
         {
           name: "查看详情>",
-          function: () => {
-            this.showDetail();
+          function: (i) => {
+            this.showDetail(i);
           },
         },
       ],
       // 表格配置
       sum: 240, // 一共有多少条数据
       pageSize: 20, // 每页展示的数据
-      discolor: false, // 是否隔行变色
+      discolor: false, // flase是隔行变色
       currentPage: 1,
       tableData: [
         {
           informationName: "北京博瑞",
-          time: "2021/04",
+          time: "2021/02",
           spread: "传播类型1",
           uploadTime: "",
           down: "已下载",
@@ -172,7 +158,7 @@ export default {
         },
         {
           informationName: "雷克萨斯纯电动SUV",
-          time: "2021/04",
+          time: "2021/03",
           spread: "传播类型1",
           uploadTime: "",
           down: "已下载",
@@ -252,7 +238,7 @@ export default {
     },
     //下载文件
     downloadPost: function (config) {
-      console.log(config);
+      console.log("下载文件:",config);
       return new Promise((resolve, reject) => {
         this.$http({
           url: config.url,
@@ -338,9 +324,15 @@ export default {
   }
 }
 .table_gray {
-  background: #f5f5f5;
+  background-color: #EEEEEE;
 }
 .operationStyle span {
   color: #0000ff;
 }
+.operationStyle  {
+  color: #0000ff;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+}
 </style>

src/views/data/UploadLink.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="upload_Link">
-    <span><b>链接上传</b></span>
+    <span><b>经销商</b></span>
     <span><b>针对论坛及其他平台链接上传</b></span>
     <div class="contentHead">
       <span>上传平台</span>
@@ -23,7 +23,7 @@
         </thead>
         <tbody class="bodyStyle">
           <tr
-            class="tableHeadStyle2 bodyContent"
+            class="bodyContent tableHeadStyle2"
             v-for="(obj, index) in tableData"
             :key="index"
             :class="{ table_gray: !discolor && index % 2 === 0 }"
@@ -65,7 +65,8 @@
               <span
                 @click="
                   toggleModal2();
-                  getIndex(index);nowIndex=index
+                  getIndex(index);
+                  nowIndex = index;
                 "
                 >删除</span
               >
@@ -81,7 +82,14 @@
                     <div class="bodyRow">确认删除？</div>
                   </div>
                   <div class="modal-footer">
-                    <button type="button" class="btn-confirm" @click="toDel(nowIndex);closeme2()">
+                    <button
+                      type="button"
+                      class="btn-confirm"
+                      @click="
+                        toDel(nowIndex);
+                        closeme2();
+                      "
+                    >
                       确认
                     </button>
                     <button type="button" class="btn-close" @click="closeme2">
@@ -135,20 +143,8 @@ export default {
       // 表格配置
       sum: 240, // 一共有多少条数据
       pageSize: 20, // 每页展示的数据
-      discolor: false, // 是否隔行变色
+      discolor: false, // false是隔行变色
       currentPage: 1,
-      /* tableHeader: [
-        "NO.",
-        "DLR Code",
-        "经销商名称",
-        "所属区域",
-        "发布日期",
-        "资料名称",
-        "反馈日期",
-        "发布平台",
-        "发布版块",
-        "项目分类",
-      ], */
       tableHeader: [
         "NO.",
         "发布日期",
@@ -250,7 +246,7 @@ export default {
     toggleModal2: function () {
       this.showModal2 = !this.showModal2;
     },
-     closeme2: function () {
+    closeme2: function () {
       this.showModal2 = !this.showModal2;
     },
     editTitle: function (val) {
@@ -266,21 +262,21 @@ export default {
     }, */
     toDel: function (n) {
       console.log("inToDel:", n, this.sonConsfirmFlag);
-     // if (this.sonConsfirmFlag) {
-        //清空数据
-        if (n == -2) {
-          this.tableData = "";
-        }
-        //清空某一项数据
-        {
-          let obj = this.tableData[n];
-          console.log(obj);
-          Object.keys(obj).forEach((key) => {
-            obj[key] = "";
-          });
-        }
-     // }
-    //  this.sonConsfirmFlag = false;
+      // if (this.sonConsfirmFlag) {
+      //清空数据
+      if (n == -2) {
+        this.tableData = "";
+      }
+      //清空某一项数据
+      {
+        let obj = this.tableData[n];
+        console.log(obj);
+        Object.keys(obj).forEach((key) => {
+          obj[key] = "";
+        });
+      }
+      // }
+      //  this.sonConsfirmFlag = false;
     },
     /*    toDel2: function (flag) {
       this.sonConsfirmFlag = flag;
@@ -324,7 +320,7 @@ export default {
   }
 }
 .table_gray {
-  background: #f5f5f5;
+  background-color: #00549f;
 }
 
 .tableBox table td {
@@ -385,7 +381,7 @@ export default {
 }
 .bodyContent td {
   background-color: #fff;
-  height: 17px;
+  height: 20px;
 }
 .operationStyle {
   color: #0000ff;
@@ -422,15 +418,7 @@ export default {
   overflow-x: auto;
   display: flex;
   flex-direction: column;
-  border-radius: 16px;
-  width: 1030px;
-}
-.modal-header {
-  border-bottom: 1px solid #eee;
-  color: #313131;
-  justify-content: space-between;
-  padding: 15px;
-  display: flex;
+  width: 500px;
 }
 .modal-footer {
   border-top: 1px solid #eee;
@@ -441,10 +429,12 @@ export default {
 .modal-body {
   position: relative;
   padding: 20px 150px 20px 150px;
+  /* display: flex;
+  justify-content: flex-start; */
 }
 .btn-close,
 .btn-confirm {
-  border-radius: 8px;
+  /*  border-radius: 8px; */
   margin-left: 16px;
   width: 56px;
   height: 36px;
@@ -459,9 +449,9 @@ export default {
   color: #fff;
   background-color: #2d8cf0;
 }
-.bodyRow {
+/* .bodyRow {
   display: flex;
   justify-content: flex-start;
   align-items: center;
-}
+} */
 </style>

src/views/data/UploadLinks.vue

@@ -1,20 +1,320 @@
 <template>
-  <div class="">
-      厂商链接上传
+  <div class="upload_Link_Distributor">
+    <span><b>厂商链接上传</b></span>
+    <div class="Head">
+      <div class="search HeadLeft">
+        <div class="input">
+          <img src="../../img/search.png" />
+          <input
+            type="text"
+            @focus="focusInput"
+            v-model="inputValue"
+            placeholder="DLR Code / 经销商"
+          />
+        </div>
+      </div>
+      <div class="HeadCenter">
+        <span>所属区域</span>
+        <select name="" id="">
+          <option value="">请选择</option>
+          <option value="">汽车之家</option>
+        </select>
+      </div>
+      <div class="HeadRight">
+        <span>选择时间段</span>
+        <input type="datetimeNew" name="beginTime" placeholder="开始时间" />
+        <span>至</span>
+        <input type="datetimeNew" name="endTime" placeholder="结束时间" />
+      </div>
+      <div class="current_button" @click="search">确定</div>
+    </div>
+    <div class="tableTitle"><b>针对论坛及其他平台链接上传</b></div>
+    <div class="tableBox">
+      <table class="distributorLinkTable">
+        <thead class="theadStyle">
+          <tr class="tableHeadStyle1">
+            <td>基础信息</td>
+            <td>论坛传播情况汇总</td>
+          </tr>
+          <tr class="tableHeadStyle2">
+            <td v-for="(item, index) in tableHeader" :key="index">
+              {{ item }}
+            </td>
+          </tr>
+        </thead>
+        <tbody class="bodyStyle">
+          <tr
+            class="bodyContent tableHeadStyle2"
+            v-for="(obj, index) in tableData"
+            :key="index"
+            :class="{ table_gray: !discolor && index % 2 === 0 }"
+          >
+            <td v-if="flag">{{ index + 1 }}</td>
+            <td v-for="(item, i) in obj" :key="i">{{item}}</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
   </div>
 </template>
 
 <script>
 export default {
+  props: {
+    isManufacturer: {
+      type: String,
+      default: "distributor",
+    },
+  },
+  components: {},
   data() {
     return {
-    }
+      inputValue: '请输入要搜索的资料名',
+      // 表格配置
+      sum: 240, // 一共有多少条数据
+      pageSize: 20, // 每页展示的数据
+      discolor: false, // false是隔行变色
+      currentPage: 1,
+      tableHeader: [
+        "NO.",
+        "DLR Code",
+        "经销商名称",
+        "所属区域",
+        "发布日期",
+        "资料名称",
+        "反馈日期",
+        "车系",
+        "车型",
+        "发布平台",
+        "发布版块",
+        "项目分类",
+        "内容分类1",
+        "内容分类2",
+        "标题",
+      ],
+      tableData: [
+        {
+          code: "L2021",
+          name: "雷克萨斯ES上市",
+          area: "雷克萨斯ES",
+          date: "2021/03/04",
+          dataName: "雷克萨斯ES",
+          feedbackTime: "2021/03/04",
+          carSeries: "雷克萨斯ES",
+          carType: "ES雷克萨斯",
+          releaseMedia: "S雷克萨斯",
+          releasePlate: "东区",
+          projectClass: "东区",
+          contentClass1: "ES雷克萨斯",
+          contentClass2: "ES雷克萨斯",
+          articleTitle: "S雷克萨斯",
+        },
+        {
+          code: "L2021",
+          name: "雷克萨斯ES上市",
+          area: "雷克萨斯ES",
+          date: "2021/03/04",
+          dataName: "雷克萨斯ES",
+          feedbackTime: "2021/03/04",
+          carSeries: "雷克萨斯ES",
+          carType: "ES雷克萨斯",
+          releaseMedia: "S雷克萨斯",
+          releasePlate: "东区",
+          projectClass: "东区",
+          contentClass1: "ES雷克萨斯",
+          contentClass2: "ES雷克萨斯",
+          articleTitle: "S雷克萨斯",
+        },
+        {
+          code: "L2021",
+          name: "雷克萨斯ES上市",
+          area: "雷克萨斯ES",
+          date: "2021/03/04",
+          dataName: "雷克萨斯ES",
+          feedbackTime: "2021/03/04",
+          carSeries: "雷克萨斯ES",
+          carType: "ES雷克萨斯",
+          releaseMedia: "S雷克萨斯",
+          releasePlate: "东区",
+          projectClass: "东区",
+          contentClass1: "ES雷克萨斯",
+          contentClass2: "ES雷克萨斯",
+          articleTitle: "S雷克萨斯",
+        },
+      ],
+      flag: true,
+    };
   },
-  mounted() {
-  }
-}
+  methods: {
+    focusInput: function () {
+      this.inputValue = "";
+    },
+    search: function () {
+      console.log(this.inputValue);
+      this.inputValue = "请输入要搜索的资料名";
+    },
+    getIndex: function (index) {
+      console.log("inGetIndex", index);
+    },
+  },
+};
 </script>
 
 <style scoped lang="less">
+.Head {
+  height: 55px;
+  display: flex;
+  align-items: center;
+}
+.Head span {
+  margin-right: 15px;
+}
+.tableBox {
+  width: 1030px;
+  overflow: auto;
+}
+.tableBox {
+  text-align: center;
+  .table {
+    table-layout: fixed;
+    background-color: #fff;
+    border-collapse: collapse;
+    border: none;
+    td {
+      border: 1px solid #ccc;
+    }
+    span {
+      &:hover {
+        cursor: pointer;
+      }
+    }
+  }
+}
+.table_gray {
+  background-color: #00549f;
+}
+
+.tableBox table td {
+  border: 1px solid #ccc;
+  border-right: 0px;
+  border-bottom: 0px;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}
+// 表头样式
+.theadStyle tr td {
+  color: white;
+}
+.tableHeadStyle1 {
+  background: #848484;
+  height: 30px;
+  color: #fff;
+  display: flex;
+  align-items: center;
+}
+.tableHeadStyle1 td {
+  width: 100%;
+  padding: 7px 5px;
+}
+.tableHeadStyle1 td:nth-child(1) {
+  border-right: 0px;
+  border-bottom: 0px;
+}
+.tableHeadStyle1 td:nth-child(2) {
+  border-right: 0px;
+  border-bottom: 0px;
+}
+.tableHeadStyle2 {
+  background: #848484;
+  height: 30px;
+  color: #fff;
+  display: flex;
+  align-items: center;
+}
+.tableHeadStyle2 td {
+  width: 60px;
+  padding: 7px 5px;
+}
+.tableHeadStyle2 td:nth-child(10) {
+  width: 100px;
+  padding: 7px 5px;
+}
+.tableHeadStyle2 td:nth-child(11) {
+  width: 100px;
+  padding: 7px 5px;
+}
+.tableHeadStyle2 td:nth-child(12) {
+  width: 100px;
+  padding: 7px 5px;
+}
+.tableHeadStyle2 td:nth-child(2) {
+  width: 100px;
+  padding: 7px 5px;
+}
+.tableHeadStyle2 td:nth-child(3) {
+  width: 100px;
+  padding: 7px 5px;
+}
+.bodyStyle {
+  display: block;
+  background-color: #fff;
+}
+.bodyContent td {
+  background-color: #fff;
+  height: 20px;
+}
 
+/* 搜索栏 */
+.search {
+  padding: 10px 15px 10px 10px;
+  display: flex;
+  align-items: center;
+  .input {
+    background-color: #fff;
+    padding: 2px;
+    display: flex;
+    img {
+      width: 16px;
+      height: 16px;
+      border: 1px solid #ccc;
+      border-radius: 4px;
+    }
+    input {
+      background-color: #fff;
+      border: 0px solid #ccc;
+      padding-left: 4px;
+      color: #555;
+      font-size: 12px;
+    }
+  }
+}
+.current_button {
+  width: 58px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+}
+.HeadCenter span {
+  padding: 10px;
+}
+.HeadCenter select {
+  width: 80px;
+  margin-right: 15px;
+}
+.HeadRight span {
+  padding: 10px;
+}
+.HeadRight input {
+  margin-right: 15px;
+  padding-left: 4px;
+}
+.tableTitle {
+  margin-bottom: 4px;
+}
+.distributorLinkTable{
+  height: 800px;
+}
 </style>

src/views/data/components/UploadLinkDetail.vue

@@ -6,43 +6,48 @@
     <div class="content">
       <div class="content_datail">
         <div class="detail">
-          <p style="width: 65px">资料名称：</p>
-          <p>{{ dataObj.name }}</p>
+          <p style="width: 80px">资料名称：</p>
+          <p>{{ detailData[nowIndex].informationName }}</p>
         </div>
         <div class="detail">
-          <p style="width: 65px">上传时间：</p>
-          <p>{{ dataObj.time2 }}</p>
+          <p style="width: 80px">上传时间：</p>
+          <p>{{ detailData[nowIndex].time }}</p>
         </div>
         <div class="multiDetail">
           <div class="time">
-            <span style="width: 65px">车系：</span>
-            <span>{{ dataObj.time1 }}</span>
+            <span style="width: 80px">车系：</span>
+            <span>{{ detailData[nowIndex].carSeries }}</span>
           </div>
           <div class="range">
-            <p style="width: 75px">车型：</p>
-            <p style="margin-right: 10px">雷克萨斯</p>
+            <p style="width: 80px">车型：</p>
+            <p style="margin-right: 10px">
+              {{ detailData[nowIndex].carSeries }}
+            </p>
           </div>
         </div>
         <div class="multiDetail">
           <div class="time">
-            <span style="width: 65px">素材时间：</span>
-            <span>{{ dataObj.time1 }}</span>
+            <span style="width: 80px">素材时间：</span>
+            <span>{{ detailData[nowIndex].carSeries }}</span>
           </div>
           <div class="range">
-            <p style="width: 75px">经销商范围：</p>
-            <p style="margin-right: 10px">{{ dataObj.range }}</p>
+            <p style="width: 80px">经销商范围：</p>
+            <p style="margin-right: 10px">
+              {{ detailData[nowIndex].carSeries }}
+            </p>
           </div>
         </div>
         <div class="detail">
-          <p style="width: 65px">资料描述：</p>
-          <p>{{ dataObj.desc }}</p>
+          <p style="width: 80px">资料描述：</p>
+          <p>{{ detailData[nowIndex].carSeries }}</p>
         </div>
         <div class="files">
-          <p style="width: 65px">附件：</p>
+          <p style="width: 80px">附件：</p>
           <div class="filesName">
             <p
-                v-for="(item, index) in dataObj.files" :key="index"
-                @click="downloadFile(index)"
+              v-for="(item, index) in dataObj.files"
+              :key="index"
+              @click="downloadFile(index)"
             >
               {{ item.name }}
             </p>
@@ -55,27 +60,23 @@
 
 <script>
 export default {
-  props: {},
-  components: {
+  props: {
+    detailData: {
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    nowIndex: {
+      type: Number,
+      default: -1,
+    },
   },
+  components: {},
   mounted() {},
   data() {
     return {
-      dataObj: {
-        name: "雷克萨斯ES上市",
-        time1: "2021/04",
-        range: "共通",
-        time2: "2021/03/10 18:19",
-        sum: 200,
-        desc: "资料包内海报，主要针对此次新款车型上市卖点进行宣传。",
-        files: [
-          {
-            id: "111",
-            name: "宣传活动海报合集",
-          }
-        ],
-      },
-      
+      dataObj: {},
     };
   },
   computed: {
@@ -86,8 +87,8 @@ export default {
   },
   methods: {
     // 下载附件
-    downloadFile: function(i) {
-        console.log(i);
+    downloadFile: function (i) {
+      console.log(i);
     },
   },
 };
@@ -96,14 +97,15 @@ export default {
 <style scoped lang="less">
 .record_detail {
   .title {
-    border-top: 1px solid #ccc;
+    border: 1px solid #ccc;
+    border-bottom: 0px;
     .data_detail {
-      padding-left: 10px;
+      padding-left: 22px;
       font-size: 14px;
       font-weight: bolder;
-      height: 30.8px;
-      vertical-align: bottom;
-      display: table-cell;
+      height: 46.8px;
+      display: flex;
+      align-items: center;
     }
   }
   .content {
@@ -114,7 +116,7 @@ export default {
     .content_datail {
       width: 420px;
       height: 390px;
-      padding: 20px 30px 0;
+      padding: 20px 50px 0;
       .detail {
         width: 100%;
         min-height: 50px;