news

src/components/userInfo.vue

@@ -6,7 +6,7 @@
     <div class="username">{{ userName || "您还未登录哦！" }}</div>
     <div class="btns">
       <template v-if="userName">
-        <router-link to="/user/editPassword">
+        <router-link to="/editPassword">
           <el-button class="left btn">修改信息</el-button>
         </router-link>
         <el-button class="right btn" @click="logout">退出登陆</el-button>

src/router/index.ts

@@ -64,12 +64,13 @@ const router = new VueRouter({
           meta: { title: "findPassword", NoHeader: true }
         },
         {
-          path: "/user",
+          path: "/user/:index?",
           component: () => import("../views/account/user/index.vue"),
+          props: true,
           meta: { title: "user", auth: true }
         },
         {
-          path: "/user/editPassword",
+          path: "/editPassword",
           component: () => import("../views/account/user/editPassword.vue"),
           meta: { title: "editPassword", auth: true }
         },
@@ -131,13 +132,15 @@ const router = new VueRouter({
           meta: { title: "infoAdd", auth: true }
         },
         {
-          path: "/news",
+          path: "/news/:index?",
           component: () => import("../views/news/index.vue"),
+          props: true,
           meta: { title: "news" }
         },
         {
-          path: "/news/newsDetail",
+          path: "/newsDetail/:noticeId",
           component: () => import("../views/news/details.vue"),
+          props: true,
           meta: { title: "newsDetail" }
         }
       ]

src/utils/index.ts

@@ -34,3 +34,29 @@ export const getErrMsg = (errCode: number) => {
     : "system error".toUpperCase();
 };
 export const RegAccount = /^[a-zA-Z0-9]{9,16}$/;
+
+export const Dateformat = (t: string | Date, format: string) => {
+  console.log(t, format);
+  let fmt = format;
+  let ret;
+  const date = typeof t === "string" ? new Date(t) : t;
+  const opt: IAny = {
+    "Y+": date.getFullYear().toString(), // 年
+    "m+": (date.getMonth() + 1).toString(), // 月
+    "d+": date.getDate().toString(), // 日
+    "H+": date.getHours().toString(), // 时
+    "M+": date.getMinutes().toString(), // 分
+    "S+": date.getSeconds().toString() // 秒
+    // 有其他格式化字符需求可以继续添加，必须转化成字符串
+  };
+  for (let k in opt) {
+    ret = new RegExp("(" + k + ")").exec(fmt);
+    if (ret) {
+      fmt = fmt.replace(
+        ret[1],
+        ret[1].length == 1 ? opt[k] : opt[k].padStart(ret[1].length, "0")
+      );
+    }
+  }
+  return fmt;
+};

src/views/account/user/index.vue

@@ -100,6 +100,11 @@ export default class extends Vue {
       params: null,
       items: []
     }));
+  @Watch("index", { immediate: true })
+  indexChange(index: string) {
+    this.currIndex = Number(index) || 0;
+    this.reload();
+  }
   @Watch("currIndex")
   currIndexChange() {
     this.arr[this.currIndex].params = this.arr[this.currIndex].params || {};
@@ -107,10 +112,7 @@ export default class extends Vue {
   setItems(items: any[], index: number) {
     this.$set(this.arr[index], "items", items.length ? items : null);
   }
-  activated() {
-    this.currIndex = Number(this.$route.query.index) || 0;
-    this.reload();
-  }
+
   reload() {
     this.arr[this.currIndex].params = {};
   }

src/views/home/index.vue

@@ -17,14 +17,14 @@
           <div class="noticeDiv">
             <div class="noticeTitle">
               通知公告
-              <router-link to="/news?active=first">
+              <router-link to="/news">
                 <span class="more"
                   >more<i class="el-icon-d-arrow-right"></i
                 ></span>
               </router-link>
             </div>
             <div class="notice" v-for="item in notices[0]" :key="item.noticeId">
-              <router-link :to="`/news/newsDetail?noticeId=${item.noticeId}`">
+              <router-link :to="`/newsDetail/${item.noticeId}`">
                 {{ item.noticeTitle }}
               </router-link>
             </div>
@@ -88,26 +88,6 @@
           <span class="more">more<i class="el-icon-d-arrow-right"></i></span>
         </router-link>
       </div>
-      <!-- <div class="rmsp">
-        <router-link
-          :to="`/shop/${item.companyId}/${item.id}`"
-          class="product"
-          v-for="item in products"
-          :key="item.id"
-        >
-          <div class="rmspItem">
-            <div class="imgDiv">
-              <img :src="`${$basePath}${item.cover}`" />
-            </div>
-            <div class="name">{{ item.name }}</div>
-            <div class="money">
-              ¥
-              <span>{{ item.price }}</span>
-            </div>
-            <div class="company mt15px">{{ item.companyName }}</div>
-          </div>
-        </router-link>
-      </div> -->
       <div class="rmspList">
         <router-link
           :to="`/shop/${item.companyId}/${item.id}`"
@@ -118,7 +98,7 @@
           <div class="imgDiv">
             <img :src="`${$basePath}${item.cover}`" />
           </div>
-          <div class="name">{{ item.name }}</div>
+          <a :title="item.name" class="name">{{ item.name }}</a>
           <div class="money">
             ¥
             <span>{{ item.price }}</span>
@@ -132,12 +112,17 @@
         ></span>
       </div>
       <div class="ppsjList">
-        <div class="item" v-for="item in 5" :key="item">
+        <div
+          class="item"
+          v-for="({ defaultImgUrl, primaryBusiness, companyName },
+          index) in shops"
+          :key="`ppsjList${index}`"
+        >
           <div class="imgDiv2">
-            <img src="@assets/changjia.png" alt />
+            <img :src="`${$basePath}${defaultImgUrl}`" alt />
           </div>
-          <div class="name">洛阳科飞亚有限公司</div>
-          <div class="company">主营商品:文件柜，办公柜，文件柜，办公柜</div>
+          <div class="name">{{ companyName }}</div>
+          <div class="company">主营商品:{{ primaryBusiness }}</div>
         </div>
       </div>
       <div class="partTitle"><span class="orangeLine"></span>需求供应</div>
@@ -167,8 +152,14 @@
               :key="item.id"
             >
               <div class="xq">
-                <div class="con">【求购】{{ item.purchaseTitle }}</div>
-                <div class="date">{{ item.releaseTime }}</div>
+                <div class="con">
+                  【{{ index ? "供应" : "求购" }}】{{
+                    index ? item.supplyTitle : item.purchaseTitle
+                  }}
+                </div>
+                <div class="date">
+                  {{ `${item.releaseTime}`.split(" ")[0] }}
+                </div>
               </div>
             </router-link>
           </div>
@@ -187,14 +178,14 @@
           <div class="partTitle">
             <span class="orangeLine"></span
             >{{ index ? "家具保养" : "行业资讯" }}
-            <router-link to="/news?active=second">
+            <router-link :to="`/news/${index + 1}`">
               <span class="more"
                 >more<i class="el-icon-d-arrow-right"></i
               ></span>
             </router-link>
           </div>
           <div class="hyzxDiv" v-if="item">
-            <router-link :to="`/news/newsDetail?noticeId=${item.noticeId}`">
+            <router-link :to="`/newsDetail/${item.noticeId}`">
               <div class="topDiv">
                 <div class="leftDiv">
                   <div>
@@ -204,13 +195,15 @@
                 <div class="rightDiv">
                   <div class="title">{{ item.noticeTitle }}</div>
                   <div class="content" v-html="item.noticeContent"></div>
-                  <div class="date">{{ item.createTime }}</div>
+                  <div class="date">
+                    {{ `${item.createTime}`.split(" ")[0] }}
+                  </div>
                 </div>
               </div>
             </router-link>
             <ul class="bottomUl">
               <li v-for="item in items" :key="item.noticeId">
-                <router-link :to="`/news/newsDetail?noticeId=${item.noticeId}`">
+                <router-link :to="`/newsDetail/${item.noticeId}`">
                   {{ item.noticeTitle }}
                 </router-link>
               </li>
@@ -228,23 +221,27 @@ export default class extends Vue {
   private notices: IAny[] = [];
   private infos: IAny[] = [];
   private products: IAny[] = [];
+  private shops: IAny[] = [];
 
   async created() {
     const [
       { list: p },
       { demandList: d },
       { supplyList: s },
+      { list: shops },
       ...n
     ] = await Promise.all([
       this.$post("/goods/info/hotlist"),
       this.$post("/demand/info/getDemandInfoTenList"),
       this.$post("/supply/info/getSupplyInfoTenLsit"),
+      this.$post("/company/hotlist"),
       this.$post("/interface/notice/getNoticeListTop5", { noticeType: 1 }),
       this.$post("/interface/notice/getNoticeListTop5", { noticeType: 2 }),
       this.$post("/interface/notice/getNoticeListTop5", { noticeType: 3 })
     ]).then(x => x.map(([, data]) => data));
     this.products = p;
     this.infos = [d, s];
+    this.shops = shops;
     this.notices = n.map(({ list }) => list);
   }
 }
@@ -356,9 +353,10 @@ export default class extends Vue {
   width: 100%;
   overflow: hidden;
   .item {
-    width: 18%;
+    width: 216px;
+    height: 210px;
     float: left;
-    margin-right: 2.5%;
+    margin-right: 20px;
     background: #fff;
     border-radius: 0.4rem;
     box-sizing: border-box;
@@ -386,8 +384,13 @@ export default class extends Vue {
       padding: 0 2rem;
       box-sizing: border-box;
     }
-    img {
+    .imgDiv2 {
       width: 100%;
+      height: 115px;
+      img {
+        width: 100%;
+        max-height: 100%;
+      }
     }
   }
 }
@@ -426,6 +429,10 @@ export default class extends Vue {
       color: #333;
       font-weight: bold;
       margin-top: 15px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      display: block;
     }
     .money {
       font-size: 1.2rem;
@@ -443,7 +450,14 @@ export default class extends Vue {
   }
 }
 .xqgy {
+  height: 39rem;
+  overflow: hidden;
+  > div {
+    height: 100%;
+  }
   .xqDiv {
+    height: 100%;
+
     background: #fff;
     padding: 2rem;
     box-sizing: border-box;

src/views/info/add.vue

@@ -75,7 +75,7 @@ export default class extends Vue {
     if (err) return;
     this.elForm.resetFields();
     this.$message.success("需求发布成功！");
-    this.$router.push("/user?index=1");
+    this.$router.push("/user/1");
   }
 }
 </script>

src/views/news/details.vue

@@ -13,45 +13,62 @@
     </div>
   </div>
 </template>
-<script>
-import { Component, Vue, Watch } from "vue-property-decorator";
-export default {
-  name: "app",
-  components: {},
-  data() {
-    return {
-      noticeId: "",
-      detailObj: {}
-    };
-  },
-  methods: {
-    detail() {
-      var that = this;
-      that
-        .$post("/interface/notice/getNoticeListById", {
-          noticeId: that.noticeId
-        })
-        .then(function(res) {
-          console.log(res);
-          if (!res[0]) {
-            that.detailObj = res[1];
-          }
-        });
-    }
-  },
-  activated() {
-    if (this.$route.query.noticeId) {
-      this.noticeId = this.$route.query.noticeId;
-      this.detail();
-    }
-  },
-  mounted() {
-    if (this.$route.query.noticeId) {
-      this.noticeId = this.$route.query.noticeId;
-      this.detail();
-    }
+<script lang="ts">
+import { Component, Vue, Watch, Prop } from "vue-property-decorator";
+@Component
+export default class extends Vue {
+  @Prop(String) private noticeId!: string;
+  private detailObj: IAny = {};
+  @Watch("noticeId", { immediate: true })
+  async load(noticeId: string) {
+    if (!noticeId) return;
+    const [err, { sysNotice }] = await this.$post(
+      "/interface/notice/getNoticeListById",
+      {
+        noticeId
+      }
+    );
+    if (err) return;
+    this.detailObj = sysNotice;
   }
-};
+}
+// export default {
+//   name: "app",
+//   components: {},
+//   data() {
+//     return {
+//       noticeId: "",
+//       detailObj: {}
+//     };
+//   },
+//   methods: {
+//     detail() {
+//       var that = this;
+//       that
+//         .$post("/interface/notice/getNoticeListById", {
+//           noticeId: that.noticeId
+//         })
+//         .then(function(res) {
+//           console.log(res);
+//           if (!res[0]) {
+//             that.detailObj = res[1].sysNotice;
+//           }
+//         });
+//     }
+//   },
+//   activated() {
+//     if (this.$route.query.noticeId) {
+//       this.noticeId = this.$route.query.noticeId;
+//       this.detail();
+//     }
+//   },
+//   mounted() {
+//     if (this.$route.query.noticeId) {
+//       this.noticeId = this.$route.query.noticeId;
+//       this.detail();
+//     }
+//   }
+// };
 </script>
 <style lang="scss" scoped>
 .container {

src/views/news/index.vue

@@ -1,17 +1,22 @@
 <template>
   <div class="bg-F5">
     <div class="container">
-      <tab class="tab" titles="我的关注,我的需求" :currIndex.sync="currIndex" />
-      <load-more url="/interface/notice/getNoticeListAll" :params="params">
+      <tab
+        class="tab"
+        titles="通知公告,行业资讯,家具保养"
+        :currIndex.sync="currIndex"
+      />
+      <load-more
+        url="/interface/notice/getNoticeListAll"
+        :params="params"
+        v-slot="{ item }"
+      >
         <div class="item">
           <div class="dateDiv">
-            <div class="day">{{ item.createDay }}</div>
-            <div>{{ item.createMonth }}</div>
+            <div class="day">{{ getDateformat(item.createTime, "dd") }}</div>
+            <div>{{ getDateformat(item.createTime, "YYYY-mm") }}</div>
           </div>
-          <router-link
-            class="conDiv"
-            :to="`/news/newsDetail?noticeId=${item.noticeId}`"
-          >
+          <router-link class="conDiv" :to="`/newsDetail/${item.noticeId}`">
             <div class="tit">{{ item.noticeTitle }}</div>
             <div class="detail">
               <div v-html="item.noticeContent"></div>
@@ -20,278 +25,31 @@
           </router-link>
         </div>
       </load-more>
-      <!-- <div class="infoTabDiv">
-        <el-tabs v-model="activeName" @tab-click="tabChange">
-          <el-tab-pane label="通知公告" name="first">
-            <div class="listDiv">
-              <ul class="listUl">
-                <li v-for="item in tzggArr" :key="item.noticeId">
-                  <div class="dateDiv">
-                    <div class="day">{{ item.createDay }}</div>
-                    <div>{{ item.createMonth }}</div>
-                  </div>
-                  <router-link
-                    class="conDiv"
-                    :to="`/news/newsDetail?noticeId=${item.noticeId}`"
-                  >
-                    <div class="tit">{{ item.noticeTitle }}</div>
-                    <div class="detail">
-                      <div v-html="item.noticeContent"></div>
-                      <span class="xq"
-                        >详情<i class="el-icon-d-arrow-right"></i
-                      ></span>
-                    </div>
-                  </router-link>
-                </li>
-              </ul>
-            </div>
-          </el-tab-pane>
-          <el-tab-pane label="行业资讯" name="second">
-            <div class="listDiv">
-              <ul class="listUl">
-                <li v-for="item in hyzxArr" :key="item.noticeId">
-                  <div class="dateDiv">
-                    <div class="day">{{ item.createDay }}</div>
-                    <div>{{ item.createMonth }}</div>
-                  </div>
-                  <router-link
-                    class="conDiv"
-                    :to="`/news/newsDetail?noticeId=${item.noticeId}`"
-                  >
-                    <div class="tit">{{ item.noticeTitle }}</div>
-                    <div class="detail">
-                      <div v-html="item.noticeContent"></div>
-                      <span class="xq"
-                        >详情<i class="el-icon-d-arrow-right"></i
-                      ></span>
-                    </div>
-                  </router-link>
-                </li>
-              </ul>
-            </div>
-          </el-tab-pane>
-          <el-tab-pane label="家具保养" name="third">
-            <div class="listDiv">
-              <ul class="listUl">
-                <li v-for="item in jjbyArr" :key="item.noticeId">
-                  <div class="dateDiv">
-                    <div class="day">{{ item.createDay }}</div>
-                    <div>{{ item.createMonth }}</div>
-                  </div>
-                  <router-link
-                    class="conDiv"
-                    :to="`/news/newsDetail?noticeId=${item.noticeId}`"
-                  >
-                    <div class="tit">{{ item.noticeTitle }}</div>
-                    <div class="detail">
-                      <div v-html="item.noticeContent"></div>
-                      <span class="xq"
-                        >详情<i class="el-icon-d-arrow-right"></i
-                      ></span>
-                    </div>
-                  </router-link>
-                </li>
-              </ul>
-            </div>
-          </el-tab-pane>
-        </el-tabs>
-      </div>
-      <el-pagination
-        class="pageDiv"
-        background
-        @current-change="handleCurrentChange"
-        :page-size="pageSize"
-        :current-page="currentPage"
-        layout="prev, pager, next,total, jumper"
-        :total="total"
-      ></el-pagination> -->
     </div>
   </div>
 </template>
 <script lang="ts">
 import { Component, Vue, Watch, Prop } from "vue-property-decorator";
+import { Dateformat } from "@/utils";
 @Component
 export default class extends Vue {
   @Prop(String) private index!: string;
   private currIndex: number = 0;
   private params: IAny | null = null;
-  @Watch("currIndex", { immediate: true })
+  @Watch("index", { immediate: true })
+  indexChange(index: string) {
+    this.currIndex = Number(index) || 0;
+    this.currIndexChange();
+  }
+  @Watch("currIndex")
   currIndexChange() {
     this.params = { noticeType: this.currIndex + 1 };
   }
-}
-// export default {
-//   name: "app",
-//   components: {},
-//   data() {
-//     return {
-//       activeName: "first",
-//       tzggArr: [],
-//       hyzxArr: [],
-//       jjbyArr: [],
-//       currentPage: 1,
-//       pageSize: 10,
-//       total: 0
-//     };
-//   },
-//   methods: {
-//     tabChange() {
-//       var that = this;
-//       that.currentPage = 1;
-//       if (that.activeName == "first") {
-//         that.listAll(1);
-//       } else if (that.activeName == "second") {
-//         that.listAll(2);
-//       } else if (that.activeName == "third") {
-//         that.listAll(3);
-//       }
-//     },
-//     handleCurrentChange(val) {
-//       this.currentPage = val;
-//       if (that.activeName == "first") {
-//         that.listAll(1);
-//       } else if (that.activeName == "second") {
-//         that.listAll(2);
-//       } else {
-//         that.listAll(3);
-//       }
-//     },
-//     listAll(noticeType) {
-//       var that = this;
-//       that
-//         .$post("interface/notice/getNoticeListAll", {
-//           pageNum: that.currentPage1,
-//           pageSize: that.pageSize1,
-//           noticeType: noticeType
-//         })
-//         .then(function(res) {
-//           console.log(res);
-//           if (!res[0]) {
-//             res[1].rows.forEach(function(item, index) {
-//               let date = [];
-//               let dateTime = [];
-//               if (item.createTime) {
-//                 dateTime = item.createTime.split(" ");
-//                 date = dateTime[0].split("-");
-//                 item.createDay = date[2];
-//                 item.createMonth = date[0] + "-" + date[1];
-//               }
-//             });
-//             that.total = res[1].total;
-//             if (noticeType == 1) {
-//               that.tzggArr = res[1].rows;
-//             } else if (noticeType == 2) {
-//               that.hyzxArr = res[1].rows;
-//             } else {
-//               that.jjbyArr = res[1].rows;
-//             }
-//           }
-//         });
-//     }
-//   },
-//   activated() {
-//     if (this.$route.query.active) {
-//       this.activeName = this.$route.query.active;
-//       this.tabChange();
-//     }
-//   },
-//   mounted() {
-//     this.listAll(1);
-//     this.listAll(2);
-//     this.listAll(3);
-//   }
-// };
-</script>
-<style scoped lang="scss">
-.listDiv {
-  width: 100%;
-  padding-left: 4rem;
-  box-sizing: border-box;
-}
-.listUl {
-  list-style: none;
-  width: 100%;
-  border-left: 0.1rem solid #e5e5e5;
-}
-.listUl li {
-  width: 100%;
-  min-height: 7rem;
-  position: relative;
-  padding-left: 7rem;
-  margin-top: 2rem;
-  box-sizing: border-box;
-
-  .dateDiv {
-    height: 8rem;
-    width: 8rem;
-    color: #fff;
-    text-align: center;
-    background: #fd5522;
-    border-radius: 0.5rem;
-    position: absolute;
-    left: -3.5rem;
-    top: 0;
-
-    > div {
-      font-size: 1.6rem;
-      height: 2.8rem;
-      line-height: 2.8rem;
-    }
-
-    .day {
-      height: 5rem;
-      line-height: 5rem;
-      font-size: 2.5em;
-      font-weight: bolder;
-      border-bottom: 0.1rem solid #fff;
-    }
-  }
-  .conDiv {
-    width: 100%;
-    display: block;
-    height: 100%;
-    padding: 0 1rem;
-    background: #fff;
-    box-shadow: 2px 2px 12px #ddd;
-    box-sizing: border-box;
-    border-radius: 0.3rem;
-
-    .tit {
-      height: 3rem;
-      line-height: 3rem;
-      font-size: 1.6rem;
-      font-weight: bolder;
-    }
-
-    .detail {
-      height: 5rem;
-      line-height: 1.6rem;
-      div {
-        height: 3.2rem;
-        line-height: 1.6rem;
-        font-size: 1.2rem;
-        color: #666;
-        word-break: break-all;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: normal;
-        display: -webkit-box;
-        -webkit-line-clamp: 2;
-        -webkit-box-orient: vertical;
-      }
-      .xq {
-        color: #fd5522;
-        margin-left: 1rem;
-      }
-    }
+  getDateformat(date: string, fmt: string) {
+    return Dateformat(date, fmt);
   }
 }
-.pageDiv {
-  text-align: right;
-  margin-top: 0.5rem;
-  padding: 3rem 0;
-}
-</style>
+</script>
 <style lang="scss" scoped>
 .item {
   width: 100%;
@@ -309,7 +67,7 @@ export default class extends Vue {
     background: #fd5522;
     border-radius: 0.5rem;
     position: absolute;
-    left: -3.5rem;
+    left: 0;
     top: 0;
 
     > div {
@@ -335,7 +93,7 @@ export default class extends Vue {
     box-shadow: 2px 2px 12px #ddd;
     box-sizing: border-box;
     border-radius: 0.3rem;
-
+    margin-left: 3.5rem;
     .tit {
       height: 3rem;
       line-height: 3rem;
@@ -362,6 +120,7 @@ export default class extends Vue {
       .xq {
         color: #fd5522;
         margin-left: 1rem;
+        font-size: 14px;
       }
     }
   }