页面交互

src/components/loadMore.vue

@@ -86,7 +86,7 @@ export default class extends Vue {
     margin-top: 2rem;
   }
   .noneData {
-    padding-top: 5rem;
+    padding: 5rem;
     text-align: center;
     img {
       width: 15rem;

src/components/tab.vue

@@ -3,7 +3,7 @@
     <span
       v-for="(item, i) in Items"
       :key="`tab-${i}`"
-      @click="e => click(e, i)"
+      @click="index = i"
       :class="{ curr: index === i }"
       ref="tab"
     >
@@ -11,7 +11,10 @@
     </span>
     <div
       class="bar"
-      :style="{ transform: `translateX(${barLeft}px)`, width: `${barWidth}px` }"
+      :style="{
+        transform: `translateX(${currTab.offsetLeft | 0}px)`,
+        width: `${currTab.offsetWidth | 0}px`
+      }"
     ></div>
   </div>
 </template>
@@ -31,24 +34,21 @@ export default class extends Vue {
   private index!: number;
   @Prop()
   private titles!: any;
-  private barLeft = 0;
-  private barWidth = 0;
+  private tabs: HTMLElement[] | null = null;
   mounted() {
-    (this.$refs.tab as HTMLElement[])[this.index].click();
+    this.tabs = this.$refs.tab as HTMLElement[];
   }
+
+  get currTab() {
+    return this.tabs ? this.tabs[this.index] : {};
+  }
+
   get Items() {
     if (this.titles instanceof Array) return this.titles;
     if (typeof this.titles === "string")
       return (this.titles as string).split(",");
     return [];
   }
-  click({ target }: MouseEvent, index: number) {
-    const {
-      offsetWidth: barWidth,
-      offsetLeft: barLeft
-    } = target as HTMLElement;
-    Object.assign(this, { barWidth, barLeft, index });
-  }
 }
 </script>
 <style lang="scss" scoped>

src/components/userInfo.vue

@@ -0,0 +1,91 @@
+<template>
+  <div class="userInfo">
+    <div class="avatar">
+      <img :src="require(`@assets/touxiang0${userName ? '2' : '1'}.png`)" />
+    </div>
+    <div class="username">{{ userName || "您还未登录哦！" }}</div>
+    <div class="btns">
+      <template v-if="userName">
+        <router-link to="/user/editPassword">
+          <el-button class="left btn">修改信息</el-button>
+        </router-link>
+        <el-button class="right btn" @click="logout">退出登陆</el-button>
+      </template>
+      <template v-else>
+        <router-link to="/login">
+          <el-button class="left btn">登录</el-button>
+        </router-link>
+        <router-link to="/register">
+          <el-button class="right btn">注册</el-button>
+        </router-link>
+      </template>
+    </div>
+  </div>
+</template>
+<script lang="ts">
+import {
+  Component,
+  Vue,
+  Prop,
+  Emit,
+  Model,
+  Watch,
+  PropSync
+} from "vue-property-decorator";
+import user from "@/store/modules/user";
+@Component
+export default class extends Vue {
+  get userName() {
+    return user.UserInfo && user.UserInfo.loginAccount;
+  }
+  async logout() {
+    if (!(await this.$confirm("是否退出登陆?").catch(x => false))) return;
+    await this.$router.push("/");
+    user.clear();
+  }
+}
+</script>
+<style lang="scss" scoped>
+.userInfo {
+  height: 16rem;
+  background: #fff;
+  border-radius: 0.4rem;
+  text-align: center;
+  padding: 2rem;
+  box-sizing: border-box;
+  .avatar {
+    img {
+      height: 5.8rem;
+      width: 5.8rem;
+      border-radius: 50%;
+    }
+  }
+  .username {
+    height: 2.4rem;
+    line-height: 2.4rem;
+    font-size: 1.2rem;
+    color: #666;
+  }
+  .btns {
+    padding-top: 1rem;
+    font-size: 1.4rem;
+    .btn {
+      width: 40%;
+      height: 2.8rem;
+      line-height: 2.8rem;
+      padding: 0;
+      border: 0;
+      margin: 0.5rem;
+      &.left {
+        color: #fff;
+        background: #fd5522;
+      }
+      &.right {
+        color: #fd5522;
+        border: 1px solid #fd5522;
+        background: #fff;
+      }
+    }
+  }
+}
+</style>

src/layout/components/header.vue

@@ -21,13 +21,13 @@
         <div class="rightDiv">
           <div class="sjrz">
             <router-link to="/shopEnter">
-              <img src="@assets/sjrz.png" alt="" />
-              商家入驻
+              <img src="@assets/sjrz.svg" alt="" />
+              <span>商家入驻</span>
             </router-link>
           </div>
           <div class="line"></div>
           <div class="spfb">
-            <img src="@assets/spfb.png" alt="" />
+            <img src="@assets/spfb.svg" alt="" />
             商品发布
           </div>
           <div class="line"></div>
@@ -43,19 +43,21 @@
       <div class="logoDiv  ">
         <div class="logoTitle">中国钢制家具产业聚集网</div>
         <div class="searchDiv">
-          <el-select class="searchFl" v-model="homeSearchOption" placeholder="">
-            <el-option label="产品" value="1"></el-option>
-            <el-option label="企业" value="2"></el-option>
+          <el-select class="searchFl" v-model="currTarget">
+            <el-option label="产品" value="/mall" />
+            <el-option label="企业" value="/shops" />
           </el-select>
           <span class="line"></span>
           <el-input
             placeholder="请输入内容"
-            v-model="homeSearchVal"
+            v-model="searchVal"
             class="input-with-select"
           >
             <i slot="prefix" class="el-input__icon el-icon-search"></i>
           </el-input>
-          <el-button class="searchBtn">搜索</el-button>
+          <router-link class="searchBtn" :to="`${currTarget}/${searchVal}`">
+            搜索
+          </router-link>
         </div>
       </div>
       <div class="navs">
@@ -79,8 +81,8 @@ import user from "@/store/modules/user";
   components: { langSelect }
 })
 export default class extends Vue {
-  private homeSearchVal = "";
-  private homeSearchOption = "1";
+  private searchVal = "";
+  private currTarget = "/mall";
   get nav() {
     return nav.map(({ path, meta: { title } }) => ({
       url: path.replace(/\/:\w+\??$/, ""), //去除动态路由(尾部)
@@ -197,6 +199,8 @@ export default class extends Vue {
           height: 100%;
         }
         .searchBtn {
+          display: inline-block;
+          text-align: center;
           width: 8rem;
           height: 100%;
           font-size: 1.6rem;

src/router/index.ts

@@ -114,13 +114,15 @@ const router = new VueRouter({
           meta: { title: "shopEnterAdd", auth: true }
         },
         {
-          path: "/info/buy",
+          path: "/info/buy/:id",
           component: () => import("../views/info/details/buy.vue"),
+          props: true,
           meta: { title: "infoBuy" }
         },
         {
-          path: "/info/sell",
+          path: "/info/sell/:id",
           component: () => import("../views/info/details/sell.vue"),
+          props: true,
           meta: { title: "infoSell" }
         },
         {
@@ -128,16 +130,6 @@ const router = new VueRouter({
           component: () => import("../views/info/add.vue"),
           meta: { title: "infoAdd", auth: true }
         },
-        {
-          path: "/info/supplyDetail",
-          component: () => import("../views/info/details/supplyDetail.vue"),
-          meta: { title: "supplyDetail" }
-        },
-        {
-          path: "/info/buyDetail",
-          component: () => import("../views/info/details/buyDetail.vue"),
-          meta: { title: "buyDetail" }
-        },
         {
           path: "/news",
           component: () => import("../views/news/index.vue"),

src/store/modules/dict.ts

@@ -14,11 +14,14 @@ import { getDict } from "@/api/dict";
 @Module({ dynamic: true, store, name: "dict" })
 class Dict extends VuexModule {
   public companyType = getDict("company_type");
+  public examineStatus = getDict("examine_status");
   @Mutation
   public add({ k, v }: IAdd) {
     switch (k) {
       case "company_type":
         return (this.companyType = v);
+      case "examine_status":
+        return (this.examineStatus = v);
     }
   }
 }

src/styles/index.scss

@@ -82,6 +82,9 @@ html {
     .mt2rem {
       margin-top: 2rem;
     }
+    .el-form-item__label {
+      color: #666;
+    }
     a {
       text-decoration: none;
       color: #333;

src/views/account/login.vue

@@ -163,6 +163,7 @@ export default class extends Vue {
   }
   .yzmDiv {
     overflow: hidden;
+    cursor: pointer;
     .yzm {
       height: 4rem;
       width: 28%;

src/views/account/user/editPassword.vue

@@ -2,8 +2,8 @@
   <div class="bg-F5">
     <div class="container">
       <el-breadcrumb class="breadcrumb" separator-class="el-icon-arrow-right">
-        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
-        <el-breadcrumb-item>个人中心</el-breadcrumb-item>
+        <el-breadcrumb-item to="/">首页</el-breadcrumb-item>
+        <el-breadcrumb-item to="/user">个人中心</el-breadcrumb-item>
         <el-breadcrumb-item>修改密码</el-breadcrumb-item>
       </el-breadcrumb>
       <div class="editPanel">

src/views/account/user/index.vue

@@ -2,286 +2,148 @@
   <div class="bg-F5">
     <div class="container">
       <el-breadcrumb class="breadcrumb" separator-class="el-icon-arrow-right">
-        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
+        <el-breadcrumb-item to="/">首页</el-breadcrumb-item>
         <el-breadcrumb-item>个人中心</el-breadcrumb-item>
       </el-breadcrumb>
       <el-row :gutter="20">
         <el-col :span="6">
-          <div class="userDiv">
-            <div class="txDiv">
-              <img
-                v-if="loginAccount == ''"
-                src="@assets/touxiang01.png"
-                alt=""
-              />
-              <img v-else src="@assets/touxiang02.png" alt="" />
-            </div>
-            <div class="welInfo">
-              <span class="user" v-if="loginAccount == ''">神码洛阳，</span>
-              <span class="user" v-else>{{ loginAccount }}，</span>
-              <span class="wel">欢迎您</span>
-            </div>
-            <div class="btnDiv">
-              <router-link to="/user/editPassword">
-                <el-button class="edit">修改信息</el-button>
-              </router-link>
-              <el-button class="logOut">退出登录</el-button>
-            </div>
-          </div>
+          <user-info />
         </el-col>
         <el-col :span="18">
           <img class="rightImg" src="@assets/userbg.png" alt="" />
         </el-col>
       </el-row>
-      <div class="infoTabDiv">
-        <el-tabs v-model="activeName">
-          <el-tab-pane label="我的关注" name="first">
-            <el-table class="qyrzgs" border :data="followListArr">
-              <el-table-column
-                type="index"
-                label="序号"
-                width="50"
-              ></el-table-column>
-              <el-table-column
-                prop="name"
-                label="商家名称"
-                width="180"
-              ></el-table-column>
-              <el-table-column
-                prop="address"
-                label="主营产品"
-              ></el-table-column>
-              <el-table-column
-                prop="address"
-                label="关注日期"
-              ></el-table-column>
-              <el-table-column label="操作">
-                <template slot-scope="scope">
-                  <el-button
-                    class="textBtn"
-                    @click="handleClick(scope.row)"
-                    type="text"
-                    size="small"
-                    >进入店铺</el-button
-                  >
-                  <span class="editline"></span>
-                  <el-button class="textBtn" type="text" size="small"
-                    >取消关注</el-button
-                  >
-                </template>
-              </el-table-column>
-            </el-table>
-            <el-pagination
-              class="pageDiv"
-              background
-              @current-change="followPageChange"
-              :page-size="pageSize1"
-              :current-page="currentPage1"
-              layout="prev, pager, next,total, jumper"
-              :total="total1"
-            ></el-pagination>
-          </el-tab-pane>
-          <el-tab-pane label="我的需求" name="second">
-            <el-table class="qyrzgs" border :data="demandListArr">
-              <el-table-column
-                type="index"
-                label="序号"
-                width="50"
-              ></el-table-column>
-              <el-table-column
-                prop="purchaseTitle"
-                label="需求标题"
-              ></el-table-column>
-              <el-table-column
-                prop="summaryOfNeeds"
-                label="概要"
-              ></el-table-column>
-              <el-table-column
-                prop="createTime"
-                label="发布时间"
-              ></el-table-column>
-              <el-table-column label="目前状态">
-                <template slot-scope="scope">
-                  <span v-if="scope.row.status == 0">征集中</span>
-                  <span v-else>已结束</span>
-                </template>
-              </el-table-column>
-              <el-table-column label="操作">
-                <template slot-scope="scope">
-                  <el-button
-                    class="textBtn"
-                    @click="cancelClick(scope.row)"
-                    type="text"
-                    size="small"
-                    >撤销</el-button
-                  >
-                  <span class="editline"></span>
-                  <router-link to="/info/buy">
-                    <el-button class="textBtn" type="text" size="small"
-                      >再次发布</el-button
-                    >
-                  </router-link>
-                </template>
-              </el-table-column>
-            </el-table>
-            <el-pagination
-              class="pageDiv"
-              background
-              @current-change="demandPageChange"
-              :page-size="pageSize2"
-              :current-page="currentPage2"
-              layout="prev, pager, next,total, jumper"
-              :total="total2"
-            ></el-pagination>
-          </el-tab-pane>
-        </el-tabs>
-      </div>
+      <tab
+        class="tab"
+        titles="我的关注,我的需求"
+        v-if="currIndex !== null"
+        :currIndex.sync="currIndex"
+      />
+
+      <el-table
+        empty-text="数据加载中..."
+        class="qyrzgs"
+        border
+        v-if="arr[currIndex].items"
+        :data="arr[currIndex].items"
+      >
+        <template v-if="currIndex">
+          <el-table-column type="index" label="序号" width="50" />
+          <el-table-column prop="purchaseTitle" label="需求标题" />
+          <el-table-column prop="summaryOfNeeds" label="概要" />
+          <el-table-column prop="createTime" label="发布时间" />
+          <el-table-column label="目前状态">
+            <template slot-scope="scope">
+              <span v-if="scope.row.status == 0">征集中</span>
+              <span v-else>已结束</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="操作">
+            <template slot-scope="{ row: { id } }">
+              <el-button
+                class="textBtn"
+                @click="revocation(id)"
+                type="text"
+                size="small"
+                >撤销</el-button
+              >
+              <span class="editline"></span>
+              <router-link class="textBtn" to="/info/add">
+                再次发布
+              </router-link>
+            </template>
+          </el-table-column>
+        </template>
+        <template v-else>
+          <el-table-column type="index" label="序号" width="50" />
+          <el-table-column prop="companyName" label="商家名称" width="180" />
+          <el-table-column prop="primaryBusiness" label="主营产品" />
+          <el-table-column prop="followDate" label="关注日期" />
+          <el-table-column label="操作">
+            <template slot-scope="{ row: { companyId } }">
+              <router-link class="textBtn" :to="`/shop/${companyId}`"
+                >进入店铺</router-link
+              >
+              <span class="editline"></span>
+              <el-button
+                class="textBtn"
+                type="text"
+                size="small"
+                @click="cancelGz(companyId)"
+                >取消关注</el-button
+              >
+            </template>
+          </el-table-column>
+        </template>
+      </el-table>
+
+      <load-more
+        v-for="({ url, params, items }, index) in arr"
+        :key="`table${index}`"
+        :url="url"
+        :params="params"
+        v-show="currIndex === index"
+        @getItems="items => setItems(items, index)"
+      />
     </div>
-    <!-- <router-view /> -->
   </div>
 </template>
-<script>
-import { Component, Vue, Watch } from "vue-property-decorator";
-export default {
-  name: "app",
-  components: {},
-  data() {
-    return {
-      activeName: "first",
-      followListArr: [],
-      demandListArr: [],
-      pageSize1: 10,
-      currentPage1: 1,
-      total1: 24,
-      pageSize2: 10,
-      currentPage2: 1,
-      total2: 24,
-      loginAccount: ""
-    };
-  },
-  methods: {
-    followPageChange(val) {
-      this.currentPage2 = val;
-      this.followList();
-    },
-    demandPageChange(val) {
-      this.currentPage2 = val;
-      this.demandList();
-    },
-    handleClick(row) {
-      console.log(row);
-    },
-    followList() {
-      var that = this;
-      that
-        .$post("/member/follow/getMemberFollowList", {
-          pageNum: that.currentPage1,
-          pageSize: that.pageSize1
-        })
-        .then(function(res) {
-          console.log(res);
-          if (!res[0]) {
-            that.memberData = res[1].noticeSupply;
-          }
-        });
-    },
-    demandList() {
-      var that = this;
-      that
-        .$post("demand/info/getMemberDemandList", {
-          pageNum: that.currentPage2,
-          pageSize: that.pageSize2
-        })
-        .then(function(res) {
-          console.log(res);
-          if (!res[0]) {
-            that.demandListArr = res[1].rows;
-            that.total2 = res[1].total;
-          }
-        });
-    },
-    cancelClick(row) {
-      console.log(row);
-      var that = this;
-      that
-        .$post("demand/info/cancleMemberDemandInfo", {
-          id: row.id
-        })
-        .then(function(res) {
-          console.log(res);
-          if (!res[0]) {
-            that.demandList();
-            that.$message({
-              message: "恭喜你，撤销成功！",
-              type: "success"
-            });
-          }
-        });
-    }
-  },
+<script lang="ts">
+import { Component, Vue, Watch, Prop } from "vue-property-decorator";
+@Component
+export default class extends Vue {
+  @Prop(String) private index!: string;
+  private currIndex: number = 0;
+  private arr: Array<{
+    url: string;
+    params: IAny | null;
+    items: any[];
+  }> = "/member/follow/getMemberFollowList,demand/info/getMemberDemandList"
+    .split(",")
+    .map(url => ({
+      url,
+      params: null,
+      items: []
+    }));
+  @Watch("currIndex")
+  currIndexChange() {
+    this.arr[this.currIndex].params = this.arr[this.currIndex].params || {};
+  }
+  setItems(items: any[], index: number) {
+    this.$set(this.arr[index], "items", items.length ? items : null);
+  }
   activated() {
-    if (this.$store.state.user.UserInfo) {
-      this.loginAccount = this.$store.state.user.UserInfo.loginAccount;
-    }
-  },
-  mounted() {
-    this.followList();
-    this.demandList();
+    this.currIndex = Number(this.$route.query.index) || 0;
+    this.reload();
+  }
+  reload() {
+    this.arr[this.currIndex].params = {};
   }
-};
+  async cancelGz(companyId: number) {
+    if (!(await this.$confirm("是否取消关注?").catch(x => false))) return;
+    const [err] = await this.$post("/member/follow/cancleMemberFollow", {
+      companyId
+    });
+    if (err) return;
+    this.$message.success("取消成功");
+    this.reload();
+  }
+  async revocation(id: number) {
+    if (!(await this.$confirm("是否撤销该需求?").catch(x => false))) return;
+    const [err] = await this.$post("demand/info/cancleMemberDemandInfo", {
+      id
+    });
+    if (err) return;
+    this.$message.success("撤销成功");
+    this.reload();
+  }
+}
 </script>
 <style scoped lang="scss">
 .breadcrumb {
   height: 4rem;
   line-height: 4rem;
 }
-.userDiv {
-  width: 100%;
-  height: 19rem;
-  background: #fff;
-  border-radius: 0.4rem;
-  text-align: center;
-  .txDiv {
-    img {
-      width: 5.8rem;
-      border-radius: 50%;
-      margin-top: 3rem;
-    }
-  }
-  .welInfo {
-    height: 3rem;
-    line-height: 3rem;
-    font-size: 1.2rem;
-    .user {
-      color: #fd5522;
-    }
-    .wel {
-      color: #333;
-    }
-  }
-  .btnDiv {
-    padding-top: 2rem;
-    .edit {
-      height: 3rem;
-      line-height: 3rem;
-      color: #fff;
-      background: #fd5522;
-      border: 0.1rem solid #fd5522;
-      padding-top: 0;
-      padding-bottom: 0;
-      margin-right: 1rem;
-    }
-    .logOut {
-      height: 3rem;
-      line-height: 3rem;
-      color: #fd5522;
-      background: #fff;
-      padding-top: 0;
-      padding-bottom: 0;
-      border: 0.1rem solid #fd5522;
-    }
-  }
-}
 .rightImg {
   width: 100%;
   height: 19rem;
@@ -302,27 +164,11 @@ export default {
   margin-top: 0.5rem;
   padding: 3rem 0;
 }
+.tab {
+  margin-bottom: 2rem;
+}
 </style>
 <style lang="scss">
-.infoTabDiv {
-  .el-tabs__nav-scroll {
-    padding: 0 1.6rem;
-    box-sizing: border-box;
-  }
-  .el-tabs__item {
-    height: 5rem;
-    line-height: 5rem;
-  }
-  .el-tabs__item:hover {
-    color: #fd5522;
-  }
-  .el-tabs__item.is-active {
-    color: #fd5522;
-  }
-  .el-tabs__active-bar {
-    background-color: #fd5522;
-  }
-}
 .qyrzgs th {
   background: #fd5522;
   color: #fff;

src/views/home/index.vue

@@ -13,22 +13,7 @@
           </el-carousel>
         </el-col>
         <el-col :span="6">
-          <div class="loginDiv">
-            <div class="txDiv">
-              <img
-                :src="require(`@assets/touxiang0${userName ? '2' : '1'}.png`)"
-              />
-            </div>
-            <div class="username">{{ userName || "您还未登录哦！" }}</div>
-            <div class="btnDiv" v-if="!userName">
-              <router-link to="/login">
-                <el-button class="leftBtn">登录</el-button>
-              </router-link>
-              <router-link to="/register">
-                <el-button class="rightBtn">注册</el-button>
-              </router-link>
-            </div>
-          </div>
+          <user-info />
           <div class="noticeDiv">
             <div class="noticeTitle">
               通知公告
@@ -216,15 +201,12 @@
 </template>
 <script lang="ts">
 import { Component, Vue, Watch, Prop } from "vue-property-decorator";
-import user from "@/store/modules/user";
 @Component
 export default class extends Vue {
   private notices: IAny[] = [];
   private infos: IAny[] = [];
   private products: IAny[] = [];
-  get userName() {
-    return user.UserInfo && user.UserInfo.loginAccount;
-  }
+
   async created() {
     const [
       [, { list: p }],
@@ -254,51 +236,6 @@ export default class extends Vue {
     height: 100%;
   }
 }
-.loginDiv {
-  height: 16rem;
-  background: #fff;
-  border-radius: 0.4rem;
-  text-align: center;
-  padding: 2rem;
-  box-sizing: border-box;
-  .txDiv {
-    img {
-      height: 5.8rem;
-      width: 5.8rem;
-      border-radius: 50%;
-    }
-  }
-  .username {
-    height: 2.4rem;
-    line-height: 2.4rem;
-    font-size: 1.2rem;
-    color: #666;
-  }
-  .btnDiv {
-    padding-top: 1rem;
-    font-size: 1.4rem;
-    .leftBtn {
-      width: 40%;
-      height: 2.8rem;
-      line-height: 2.8rem;
-      color: #fff;
-      background: #fd5522;
-      margin-right: 1rem;
-      padding: 0;
-      border: 0;
-    }
-    .rightBtn {
-      width: 40%;
-      height: 2.8rem;
-      line-height: 2.8rem;
-      color: #fd5522;
-      border-color: #fd5522;
-      background: #fff;
-      padding: 0;
-      // border: 0;
-    }
-  }
-}
 .noticeDiv {
   margin-top: 1rem;
   height: 22rem;

src/views/info/add.vue

@@ -1,10 +1,124 @@
+<!--我要买-->
 <template>
-  <div>
-    提交需求表单
+  <div class="bg-F5">
+    <div class="container">
+      <div class="partTitle"><span class="orangeLine"></span>服务能力</div>
+      <div class="formDiv">
+        <el-form
+          class="form"
+          :rules="rules"
+          ref="form"
+          :model="form"
+          label-width="110px"
+        >
+          <el-form-item label="需求标题：" prop="purchaseTitle">
+            <el-input v-model="form.purchaseTitle"></el-input>
+          </el-form-item>
+          <el-form-item label="需求概要：" prop="summaryOfNeeds">
+            <el-input v-model="form.summaryOfNeeds"></el-input>
+          </el-form-item>
+          <el-form-item label="需求详情：" prop="demandDetails">
+            <el-input v-model="form.demandDetails" type="textarea"></el-input>
+          </el-form-item>
+          <el-form-item label="联系人：" prop="contacts">
+            <el-input v-model="form.contacts"></el-input>
+          </el-form-item>
+          <el-form-item label="联系电话：" prop="contactNumber">
+            <el-input v-model="form.contactNumber"></el-input>
+          </el-form-item>
+        </el-form>
+        <div class="line"></div>
+        <div class="tc">
+          <el-button class="submitBtn" type="primary" @click="validate"
+            >提交</el-button
+          >
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 <script lang="ts">
 import { Component, Vue, Watch } from "vue-property-decorator";
+import { ElForm } from "element-ui/types/form";
 @Component
-export default class extends Vue {}
+export default class extends Vue {
+  private form = {
+    purchaseTitle: "",
+    summaryOfNeeds: "",
+    demandDetails: "",
+    contacts: "",
+    contactNumber: ""
+  };
+  private rules = {
+    purchaseTitle: [
+      { required: true, message: "请输入需求标题", trigger: "blur" }
+    ],
+    summaryOfNeeds: [
+      { required: true, message: "请输入需求概要", trigger: "blur" }
+    ],
+    demandDetails: [
+      { required: true, message: "请输入需求详情", trigger: "blur" }
+    ],
+    contacts: [{ required: true, message: "请输入联系人", trigger: "blur" }],
+    contactNumber: [
+      { required: true, message: "请输入联系电话", trigger: "blur" }
+    ]
+  };
+  get elForm() {
+    return this.$refs.form as ElForm;
+  }
+  private validate() {
+    this.elForm.validate(x => x && this.submit());
+  }
+  private async submit() {
+    const [err] = await this.$post("/demand/info/insertDemandInfo", this.form);
+    if (err) return;
+    this.elForm.resetFields();
+    this.$message.success("需求发布成功！");
+    this.$router.push("/user?index=1");
+  }
+}
 </script>
+<style lang="scss" scoped>
+.partTitle {
+  padding: 3rem 0 2rem 0;
+  font-size: 1.8rem;
+  color: #333;
+  .orangeLine {
+    display: inline-block;
+    height: 1.8rem;
+    width: 0.3rem;
+    background: #fd5522;
+    vertical-align: middle;
+    border-radius: 0.15rem;
+    margin-right: 1rem;
+  }
+}
+.formDiv {
+  background: #fff;
+  text-align: center;
+  padding: 4rem 0 3rem 0;
+  border-radius: 0.4rem;
+  .form {
+    width: 70%;
+    box-sizing: border-box;
+    display: inline-block;
+    text-align: left;
+    .line {
+      width: 100%;
+      height: 0.1rem;
+      background: #e5e5e5;
+      margin-top: 4rem;
+      margin-bottom: 3rem;
+    }
+  }
+  .submitBtn {
+    background: #fd5522;
+    color: #fff;
+    border: 0;
+  }
+}
+.tc {
+  text-align: center;
+}
+</style>

src/views/info/details/buy.vue

@@ -1,157 +1,108 @@
-<!--我要买-->
+<!-- 求购信息详情 -->
 <template>
   <div class="bg-F5">
     <div class="container">
-      <div class="partTitle"><span class="orangeLine"></span>服务能力</div>
-      <div class="formDiv">
-        <el-form
-          class="form"
-          :rules="rules"
-          ref="form"
-          :model="form"
-          label-width="110px"
-        >
-          <!--<el-form-item label="商品类别：">-->
-          <!--<el-select v-model="form.type" placeholder="请选择商品类别">-->
-          <!--<el-option label="区域一" value="shanghai"></el-option>-->
-          <!--<el-option label="区域二" value="beijing"></el-option>-->
-          <!--</el-select>-->
-          <!--</el-form-item>-->
-          <el-form-item label="需求标题：" prop="purchaseTitle">
-            <el-input v-model="form.purchaseTitle"></el-input>
-          </el-form-item>
-          <el-form-item label="需求概要：" prop="summaryOfNeeds">
-            <el-input v-model="form.summaryOfNeeds"></el-input>
-          </el-form-item>
-          <el-form-item label="需求详情：" prop="demandDetails">
-            <el-input v-model="form.demandDetails" type="textarea"></el-input>
-          </el-form-item>
-          <el-form-item label="联系人：" prop="contacts">
-            <el-input v-model="form.contacts"></el-input>
-          </el-form-item>
-          <el-form-item label="联系电话：" prop="contactNumber">
-            <el-input v-model="form.contactNumber"></el-input>
-          </el-form-item>
-        </el-form>
-        <div class="line"></div>
-        <div class="tc">
-          <el-button class="submitBtn" type="primary" @click="onSubmit('form')"
-            >提交</el-button
-          >
+      <div class="leftLine"></div>
+      <div class="title">
+        <span class="type">求购</span>
+        <span class="name">{{ demandInfo.purchaseTitle }}</span>
+      </div>
+      <div class="xqDiv mt5rem">
+        <div class="tit">需求概要：</div>
+        <div class="con">{{ demandInfo.summaryOfNeeds }}</div>
+      </div>
+      <div class="xqDiv">
+        <div class="tit">需求详情：</div>
+        <div class="con">
+          {{ demandInfo.demandDetails }}
         </div>
       </div>
+      <div class="xqDiv">
+        <div class="tit">联&nbsp;&nbsp;系&nbsp;&nbsp;人：</div>
+        <div class="con">{{ demandInfo.contacts }}</div>
+      </div>
+      <div class="xqDiv">
+        <div class="tit">联系电话：</div>
+        <div class="con">{{ demandInfo.contactNumber }}</div>
+      </div>
+      <div class="xqDiv">
+        <div class="tit">发布时间：</div>
+        <div class="con">{{ demandInfo.releaseTime }}</div>
+      </div>
     </div>
   </div>
 </template>
-<script>
-import { Component, Vue, Watch } from "vue-property-decorator";
-export default {
-  name: "app",
-  components: {},
-  data() {
-    return {
-      form: {
-        purchaseTitle: "",
-        summaryOfNeeds: "",
-        demandDetails: "",
-        contacts: "",
-        contactNumber: ""
-      },
-      rules: {
-        purchaseTitle: [
-          { required: true, message: "请输入需求标题", trigger: "blur" }
-        ],
-        summaryOfNeeds: [
-          { required: true, message: "请输入需求概要", trigger: "blur" }
-        ],
-        demandDetails: [
-          { required: true, message: "请输入需求详情", trigger: "blur" }
-        ],
-        contacts: [
-          { required: true, message: "请输入联系人", trigger: "blur" }
-        ],
-        contactNumber: [
-          { required: true, message: "请输入联系电话", trigger: "blur" }
-        ]
-      }
-    };
-  },
-  methods: {
-    onSubmit(formName) {
-      var that = this;
-      if (that.$store.state.user.UserInfo === null) {
-        that.$message("用户未登录，请登录之后提交！");
-      } else {
-        this.$refs[formName].validate(valid => {
-          if (valid) {
-            that
-              .$post("/demand/info/insertDemandInfo", that.form)
-              .then(function(res) {
-                console.log(res);
-                if (!res[0]) {
-                  that.$message({
-                    message: "恭喜你，需求发布成功！",
-                    type: "success"
-                  });
-                  // that.$message("需求发布成功！");
-                  that.$refs[formName].resetFields();
-                }
-              });
-          }
-        });
-      }
-    }
-  },
-  mounted() {}
-};
-</script>
-<style lang="scss" scoped>
-.partTitle {
-  padding: 3rem 0 2rem 0;
-  font-size: 1.8rem;
-  color: #333;
-  .orangeLine {
-    display: inline-block;
-    height: 1.8rem;
-    width: 0.3rem;
-    background: #fd5522;
-    vertical-align: middle;
-    border-radius: 0.15rem;
-    margin-right: 1rem;
+<script lang="ts">
+import { Component, Vue, Watch, Prop } from "vue-property-decorator";
+@Component
+export default class extends Vue {
+  private demandInfo = {};
+  @Prop(String) private id!: number;
+  @Watch("id", { immediate: true })
+  async load(id: string) {
+    const [err, { demandInfo }] = await this.$post<{ demandInfo: IAny }>(
+      "/demand/info/getDemandInfo",
+      { id }
+    );
+    this.demandInfo = demandInfo;
   }
 }
-.formDiv {
+</script>
+<style lang="scss" scoped>
+.container {
   background: #fff;
-  text-align: center;
-  padding: 4rem 0 3rem 0;
+  margin-top: 2rem;
+  margin-bottom: 4rem;
+  padding: 3rem 4rem 2rem 4rem;
+  position: relative;
+  box-sizing: border-box;
   border-radius: 0.4rem;
-  .form {
-    width: 70%;
-    box-sizing: border-box;
-    display: inline-block;
-    text-align: left;
-    .line {
-      width: 100%;
-      height: 0.1rem;
-      background: #e5e5e5;
-      margin-top: 4rem;
-      margin-bottom: 3rem;
+  .leftLine {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 1rem;
+    border-radius: 0.5rem;
+    background: #fccabb;
+  }
+  .title {
+    height: 4rem;
+    line-height: 4rem;
+    text-align: center;
+    .type {
+      display: inline-block;
+      height: 2.2rem;
+      line-height: 2.2rem;
+      font-size: 1.4rem;
+      color: #fff;
+      border-radius: 0.4rem;
+      padding: 0 0.6rem;
+      background: #fd5522;
+    }
+    .name {
+      font-size: 1.8rem;
+      color: #333;
+      margin-left: 1.6rem;
     }
   }
-  .submitBtn {
-    background: #fd5522;
-    color: #fff;
-    border: 0;
+  .xqDiv {
+    line-height: 2.4rem;
+    overflow: hidden;
+    font-size: 1.4rem;
+    .tit {
+      color: #333;
+      width: 10%;
+      float: left;
+    }
+    .con {
+      color: #666;
+      width: 90%;
+      float: left;
+    }
   }
 }
-.tc {
-  text-align: center;
-}
-</style>
-<style lang="scss">
-.formDiv {
-  .el-form-item__label {
-    color: #666;
-  }
+.mt5rem {
+  margin-top: 5rem;
 }
 </style>

src/views/info/details/buyDetail.vue

@@ -1,131 +0,0 @@
-<!-- 求购信息详情 -->
-<template>
-  <div class="bg-F5">
-    <div class="container">
-      <div class="leftLine"></div>
-      <div class="title">
-        <span class="type">求购</span>
-        <span class="name">{{ demandInfo.purchaseTitle }}</span>
-      </div>
-      <div class="xqDiv mt5rem">
-        <div class="tit">需求概要：</div>
-        <div class="con">{{ demandInfo.summaryOfNeeds }}</div>
-      </div>
-      <div class="xqDiv">
-        <div class="tit">需求详情：</div>
-        <div class="con">
-          {{ demandInfo.demandDetails }}
-        </div>
-      </div>
-      <div class="xqDiv">
-        <div class="tit">联&nbsp;&nbsp;系&nbsp;&nbsp;人：</div>
-        <div class="con">{{ demandInfo.contacts }}</div>
-      </div>
-      <div class="xqDiv">
-        <div class="tit">联系电话：</div>
-        <div class="con">{{ demandInfo.contactNumber }}</div>
-      </div>
-      <div class="xqDiv">
-        <div class="tit">发布时间：</div>
-        <div class="con">{{ demandInfo.releaseTime }}</div>
-      </div>
-    </div>
-  </div>
-</template>
-<script>
-import { Component, Vue, Watch } from "vue-property-decorator";
-export default {
-  name: "app",
-  components: {},
-  data() {
-    return {
-      id: null,
-      demandInfo: {}
-    };
-  },
-  methods: {
-    // 需求信息详情数据请求 liuqiwen
-    detailData() {
-      var that = this;
-      that
-        .$post("/demand/info/getDemandInfo", {
-          id: that.id
-        })
-        .then(function(res) {
-          console.log(res);
-          if (!res[0]) {
-            that.demandInfo = res[1].demandInfo;
-          }
-        });
-    }
-  },
-  activated() {
-    if (this.$route.query.id) {
-      this.id = parseInt(this.$route.query.id);
-      this.detailData();
-    }
-  },
-  mounted() {
-    this.id = parseInt(this.$route.query.id);
-    this.detailData();
-  }
-};
-</script>
-<style lang="scss" scoped>
-.container {
-  background: #fff;
-  margin-top: 2rem;
-  margin-bottom: 4rem;
-  padding: 3rem 4rem 2rem 4rem;
-  position: relative;
-  box-sizing: border-box;
-  border-radius: 0.4rem;
-  .leftLine {
-    position: absolute;
-    top: 0;
-    left: 0;
-    height: 100%;
-    width: 1rem;
-    border-radius: 0.5rem;
-    background: #fccabb;
-  }
-  .title {
-    height: 4rem;
-    line-height: 4rem;
-    text-align: center;
-    .type {
-      display: inline-block;
-      height: 2.2rem;
-      line-height: 2.2rem;
-      font-size: 1.4rem;
-      color: #fff;
-      border-radius: 0.4rem;
-      padding: 0 0.6rem;
-      background: #fd5522;
-    }
-    .name {
-      font-size: 1.8rem;
-      color: #333;
-      margin-left: 1.6rem;
-    }
-  }
-  .xqDiv {
-    line-height: 2.4rem;
-    overflow: hidden;
-    font-size: 1.4rem;
-    .tit {
-      color: #333;
-      width: 7%;
-      float: left;
-    }
-    .con {
-      color: #666;
-      width: 93%;
-      float: left;
-    }
-  }
-}
-.mt5rem {
-  margin-top: 5rem;
-}
-</style>

src/views/info/details/sell.vue

@@ -1,10 +1,152 @@
+<!-- 求购信息详情 -->
 <template>
-  <div>
-    供应详情
+  <div class="bg-F5">
+    <div class="container">
+      <el-row class="xqDiv" :gutter="20">
+        <el-col :span="10">
+          <div class="bigImgDiv">
+            <img src="@assets/productDetails.jpg" alt="" />
+          </div>
+          <div class="imgDetailDiv">
+            <el-carousel height="80px" :autoplay="false">
+              <el-carousel-item v-for="item in 3" :key="item">
+                <div class="imgDetail">
+                  <div class="imgDiv">
+                    <img src="@assets/productDetails.jpg" alt="" />
+                  </div>
+                  <div class="imgDiv">
+                    <img src="@assets/productDetails.jpg" alt="" />
+                  </div>
+                  <div class="imgDiv">
+                    <img src="@assets/productDetails.jpg" alt="" />
+                  </div>
+                  <div class="imgDiv">
+                    <img src="@assets/productDetails.jpg" alt="" />
+                  </div>
+                </div>
+              </el-carousel-item>
+            </el-carousel>
+          </div>
+        </el-col>
+        <el-col :span="14">
+          <div class="title">
+            <span class="type">供应</span>
+            <span class="name">{{ noticeSupply.supplyTitle }}</span>
+          </div>
+          <div class="info">生产厂家：{{ noticeSupply.manufacturer }}</div>
+          <div class="info">
+            联&nbsp;系&nbsp;人：{{ noticeSupply.contacts }}
+          </div>
+          <div class="info">发布时间：{{ noticeSupply.releaseTime }}</div>
+          <div class="info">联系电话：{{ noticeSupply.telephone }}</div>
+        </el-col>
+      </el-row>
+      <div class="infoDiv">
+        <div class="info">
+          <div class="tit">供应详情:</div>
+          <div class="con">
+            {{ noticeSupply.supplyDetails }}
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 <script lang="ts">
-import { Component, Vue, Watch } from "vue-property-decorator";
+import { Component, Vue, Watch, Prop } from "vue-property-decorator";
 @Component
-export default class extends Vue {}
+export default class extends Vue {
+  private noticeSupply = {};
+  @Prop(String) private id!: number;
+  @Watch("id", { immediate: true })
+  async load(id: string) {
+    const [err, { noticeSupply }] = await this.$post<{ noticeSupply: IAny }>(
+      "/supply/info/getSupplyInfo",
+      { id }
+    );
+    this.noticeSupply = noticeSupply;
+  }
+}
 </script>
+<style lang="scss" scoped>
+.container {
+  background: #fff;
+  margin-top: 2rem;
+  margin-bottom: 4rem;
+  border-radius: 0.4rem;
+  .xqDiv {
+    border-bottom: 0.1rem solid #e5e5e5;
+    padding: 3rem 3rem 2rem 2rem;
+    box-sizing: border-box;
+    .bigImgDiv {
+      img {
+        width: 100%;
+        border-radius: 0.5rem;
+      }
+    }
+    .imgDetailDiv {
+      margin-top: 2rem;
+      .imgDetail {
+        width: 100%;
+        overflow: hidden;
+        .imgDiv {
+          width: 22.7%;
+          float: left;
+          margin-right: 3%;
+          &:last-child {
+            margin-right: 0;
+          }
+          img {
+            width: 100%;
+          }
+        }
+      }
+    }
+    .title {
+      height: 4rem;
+      line-height: 4rem;
+      .type {
+        display: inline-block;
+        height: 2.2rem;
+        line-height: 2.2rem;
+        font-size: 1.4rem;
+        color: #fff;
+        border-radius: 0.4rem;
+        padding: 0 0.6rem;
+        background: #fd5522;
+      }
+      .name {
+        font-size: 1.8rem;
+        color: #333;
+        margin-left: 1.6rem;
+      }
+    }
+    .info {
+      height: 4rem;
+      line-height: 4rem;
+      font-size: 1.4rem;
+      color: #666;
+    }
+  }
+  .infoDiv {
+    padding: 3rem 3rem 4rem 3rem;
+    box-sizing: border-box;
+    .info {
+      font-size: 1.4rem;
+      overflow: hidden;
+      .tit {
+        width: 7%;
+        float: left;
+        line-height: 2.4rem;
+        color: #333;
+      }
+      .con {
+        width: 93%;
+        float: left;
+        line-height: 2.4rem;
+        color: #666;
+      }
+    }
+  }
+}
+</style>

src/views/info/details/supplyDetail.vue

@@ -1,177 +0,0 @@
-<!-- 供应信息详情 -->
-<template>
-  <div class="bg-F5">
-    <div class="container">
-      <el-row class="xqDiv" :gutter="20">
-        <el-col :span="10">
-          <div class="bigImgDiv">
-            <img src="@assets/productDetails.jpg" alt="" />
-          </div>
-          <div class="imgDetailDiv">
-            <el-carousel height="80px" :autoplay="false">
-              <el-carousel-item v-for="item in 3" :key="item">
-                <div class="imgDetail">
-                  <div class="imgDiv">
-                    <img src="@assets/productDetails.jpg" alt="" />
-                  </div>
-                  <div class="imgDiv">
-                    <img src="@assets/productDetails.jpg" alt="" />
-                  </div>
-                  <div class="imgDiv">
-                    <img src="@assets/productDetails.jpg" alt="" />
-                  </div>
-                  <div class="imgDiv">
-                    <img src="@assets/productDetails.jpg" alt="" />
-                  </div>
-                </div>
-              </el-carousel-item>
-            </el-carousel>
-          </div>
-        </el-col>
-        <el-col :span="14">
-          <div class="title">
-            <span class="type">供应</span>
-            <span class="name">{{ noticeSupply.supplyTitle }}</span>
-          </div>
-          <div class="info">生产厂家：{{ noticeSupply.manufacturer }}</div>
-          <div class="info">
-            联&nbsp;系&nbsp;人：{{ noticeSupply.contacts }}
-          </div>
-          <div class="info">发布时间：{{ noticeSupply.releaseTime }}</div>
-          <div class="info">联系电话：{{ noticeSupply.telephone }}</div>
-        </el-col>
-      </el-row>
-      <div class="infoDiv">
-        <!--<div class="info">-->
-        <!--<div class="tit">供应概要:</div>-->
-        <!--<div class="con">{{noticeSupply.telephone}}</div>-->
-        <!--</div>-->
-        <div class="info">
-          <div class="tit">供应详情:</div>
-          <div class="con">
-            {{ noticeSupply.supplyDetails }}
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-<script>
-import { Component, Vue, Watch } from "vue-property-decorator";
-export default {
-  name: "app",
-  components: {},
-  data() {
-    return {
-      id: null,
-      noticeSupply: {}
-    };
-  },
-  methods: {
-    // 需求信息详情数据请求 liuqiwen
-    detailData() {
-      var that = this;
-      that
-        .$post("/supply/info/getSupplyInfo", {
-          id: that.id
-        })
-        .then(function(res) {
-          console.log(res);
-          if (!res[0]) {
-            that.noticeSupply = res[1].noticeSupply;
-          }
-        });
-    }
-  },
-  activated() {
-    this.id = parseInt(this.$route.query.id);
-    this.detailData();
-  },
-  mounted() {
-    this.id = parseInt(this.$route.query.id);
-    this.detailData();
-  }
-};
-</script>
-<style lang="scss" scoped>
-.container {
-  background: #fff;
-  margin-top: 2rem;
-  margin-bottom: 4rem;
-  border-radius: 0.4rem;
-  .xqDiv {
-    border-bottom: 0.1rem solid #e5e5e5;
-    padding: 3rem 3rem 2rem 2rem;
-    box-sizing: border-box;
-    .bigImgDiv {
-      img {
-        width: 100%;
-        border-radius: 0.5rem;
-      }
-    }
-    .imgDetailDiv {
-      margin-top: 2rem;
-      .imgDetail {
-        width: 100%;
-        overflow: hidden;
-        .imgDiv {
-          width: 22.7%;
-          float: left;
-          margin-right: 3%;
-          &:last-child {
-            margin-right: 0;
-          }
-          img {
-            width: 100%;
-          }
-        }
-      }
-    }
-    .title {
-      height: 4rem;
-      line-height: 4rem;
-      .type {
-        display: inline-block;
-        height: 2.2rem;
-        line-height: 2.2rem;
-        font-size: 1.4rem;
-        color: #fff;
-        border-radius: 0.4rem;
-        padding: 0 0.6rem;
-        background: #fd5522;
-      }
-      .name {
-        font-size: 1.8rem;
-        color: #333;
-        margin-left: 1.6rem;
-      }
-    }
-    .info {
-      height: 4rem;
-      line-height: 4rem;
-      font-size: 1.4rem;
-      color: #666;
-    }
-  }
-  .infoDiv {
-    padding: 3rem 3rem 4rem 3rem;
-    box-sizing: border-box;
-    .info {
-      font-size: 1.4rem;
-      overflow: hidden;
-      .tit {
-        width: 7%;
-        float: left;
-        line-height: 2.4rem;
-        color: #333;
-      }
-      .con {
-        width: 93%;
-        float: left;
-        line-height: 2.4rem;
-        color: #666;
-      }
-    }
-  }
-}
-</style>

src/views/info/index.vue

@@ -9,7 +9,7 @@
           <div class="tab">
             <tab titles="求购信息,供应信息" :currIndex.sync="currIndex" />
             <div class="btnDiv">
-              <router-link to="/info/buy">
+              <router-link to="/info/add">
                 <el-button class="buyBtn" size="mini">我要买</el-button>
               </router-link>
               <el-button class="buyBtn" size="mini">我要卖</el-button>
@@ -24,7 +24,10 @@
             v-show="currIndex === index"
             v-slot="{ item: { id, purchaseTitle, supplyTitle, updateTime } }"
           >
-            <router-link class="info" :to="`/info/buyDetail?id=${id}`">
+            <router-link
+              class="info"
+              :to="`/info/${index ? 'sell' : 'buy'}/${id}`"
+            >
               <div class="name">{{ purchaseTitle || supplyTitle }}</div>
               <div class="date">{{ updateTime }}发布</div>
             </router-link>
@@ -35,88 +38,10 @@
   </div>
 </template>
 <script lang="ts">
-/*
-
-export default {
-  name: "app",
-  data() {
-    return {
-      activeName: "demand",
-      currentPage: 1,
-      pageSize: 10,
-      total: 0,
-      demandAllList: [],
-      supplyAllList: []
-    };
-  },
-  methods: {
-    tabChange() {
-      var that = this;
-      that.currentPage = 1;
-      if (that.activeName == "demand") {
-        that.demandInfoAllList();
-      } else if (that.activeName == "supply") {
-        that.supplyInfoAllList();
-      }
-    },
-    handleCurrentChange(val) {
-      this.currentPage = val;
-      if (that.activeName == "demand") {
-        that.demandInfoAllList();
-      } else if (that.activeName == "supply") {
-        that.supplyInfoAllList();
-      }
-    },
-    // 求购信息列表 liuqiwen
-    demandInfoAllList() {
-      var that = this;
-      that
-        .$post("/demand/info/getDemandInfoAllList", {
-          pageNum: that.currentPage,
-          pageSize: that.pageSize
-        })
-        .then(function(res) {
-          console.log(res);
-          if (!res[0]) {
-            that.demandAllList = res[1].rows;
-            that.total = res[1].total;
-          }
-        });
-    },
-    // 供应信息列表 liuqiwen
-    supplyInfoAllList() {
-      var that = this;
-      that
-        .$post("/supply/info/getSupplyInfoAllList", {
-          pageNum: that.currentPage,
-          pageSize: that.pageSize
-        })
-        .then(function(res) {
-          console.log(res);
-          if (!res[0]) {
-            that.supplyAllList = res[1].rows;
-            that.total = res[1].total;
-          }
-        });
-    }
-  },
-  activated() {
-    if (this.$route.query.active) {
-      this.activeName = this.$route.query.active;
-      this.tabChange();
-    }
-  },
-  mounted() {
-    this.demandInfoAllList();
-  }
-};
-
-*/
-
 import { Component, Vue, Watch } from "vue-property-decorator";
 @Component
 export default class extends Vue {
-  private currIndex = 1;
+  private currIndex = 0;
   private urls = [
     "/demand/info/getDemandInfoAllList",
     "/supply/info/getSupplyInfoAllList"

src/views/mall/index.vue

@@ -209,6 +209,7 @@ export default class extends Vue {
       .xiaolei {
         height: 160px;
         overflow: scroll;
+        box-sizing: border-box;
         .block {
           width: 337px;
           height: 80px;
@@ -219,7 +220,10 @@ export default class extends Vue {
 
           padding-top: 20px;
           box-sizing: border-box;
-
+          > span {
+            width: 6rem;
+            display: inline-block;
+          }
           .items {
             width: 260px;
 

src/views/shops/details/honor.vue

@@ -5,33 +5,78 @@
         资质荣誉
       </div>
       <div class="content">
-        <img src="@assets/zlzs.png" alt="" />
+        <img :src="`${$basePath}${curr.img}`" />
         <div class="desc">
-          <span>外观设计专利书(BBF)</span>
+          <span>{{ curr.title }}</span>
           <p>
-            外观设计专利书外观设计专利书外观设计专利书外观设计专利书外观设计专利书外观设计专利书外观设计专利书外观设计专利书
+            {{ curr.des }}
           </p>
         </div>
       </div>
-
       <div class="control">
-        <img class="left" src="@assets/left.png" alt="" />
-        <div class="imgs">
-          <img class="curr" src="@assets/zlzs.png" alt="" />
-          <img src="@assets/zlzs.png" alt="" />
-          <img src="@assets/zlzs.png" alt="" />
-          <img src="@assets/zlzs.png" alt="" />
-          <img src="@assets/zlzs.png" alt="" />
-        </div>
-        <img class="right" src="@assets/right.png" alt="" />
+        <img class="left" src="@assets/left.png" alt="" @click="prev" />
+        <el-carousel
+          :autoplay="false"
+          arrow="never"
+          indicator-position="none"
+          ref="carousel"
+          class="marquee"
+        >
+          <el-carousel-item
+            v-for="(imgs, index) in list"
+            :key="`carousel-list-${index}`"
+          >
+            <img
+              v-for="({ img }, i) in imgs"
+              :key="`imgs-${index}-${i}`"
+              :class="{ curr: currIndex === `${index}-${i}` }"
+              :src="`${$basePath}${img}`"
+              @click="currIndex = `${index}-${i}`"
+            />
+          </el-carousel-item>
+        </el-carousel>
+
+        <img class="right" src="@assets/right.png" alt="" @click="next" />
       </div>
     </div>
   </div>
 </template>
 <script lang="ts">
-import { Component, Vue, Watch } from "vue-property-decorator";
+import { Component, Vue, Watch, Prop } from "vue-property-decorator";
+import { ElCarousel } from "element-ui/types/carousel";
+import { chunk } from "lodash";
 @Component
-export default class extends Vue {}
+export default class extends Vue {
+  private pIndex = 0;
+  private index = 0;
+  @Prop() private shopInfo!: IAny;
+  get list() {
+    return chunk(this.shopInfo.companyHonours, 5);
+  }
+  get currIndex() {
+    return `${this.pIndex}-${this.index}`;
+  }
+  set currIndex(val) {
+    [this.pIndex, this.index] = val.split("-").map(x => Number(x));
+  }
+  get curr() {
+    return this.list[this.pIndex][this.index];
+  }
+  prev() {
+    if (this.index) return this.index--;
+    if (!this.pIndex) return;
+    this.pIndex--;
+    this.index = 4;
+    (this.$refs.carousel as ElCarousel).prev();
+  }
+  next() {
+    if (this.index < this.list[this.pIndex].length - 1) return this.index++;
+    if (!(this.pIndex < this.list.length - 1)) return;
+    this.pIndex++;
+    this.index = 0;
+    (this.$refs.carousel as ElCarousel).next();
+  }
+}
 </script>
 <style lang="scss" scoped>
 .container {
@@ -72,6 +117,8 @@ export default class extends Vue {}
       position: absolute;
       top: 50%;
       transform: translateY(-50%);
+      cursor: pointer;
+      z-index: 3;
       &.left {
         left: 0;
       }
@@ -79,18 +126,22 @@ export default class extends Vue {}
         right: 0;
       }
     }
-    .imgs {
-      margin-left: 56px;
+    .marquee {
+      padding-left: 56px;
       display: inline-block;
       box-sizing: border-box;
       height: 100%;
+      width: 100%;
+
       img {
+        display: inline-block;
         width: 188px;
         height: 100%;
         margin: 0 10px;
         border: 1px solid #e5e5e5;
         border-radius: 4px;
         box-sizing: border-box;
+        cursor: pointer;
         &.curr {
           border: 1px solid #fd5522;
         }

src/views/shops/details/index.vue

@@ -5,9 +5,13 @@
       <div class="desc fl">
         <h3>{{ shopInfo.companyName }}</h3>
         <span class="rz">已认证</span>
-        <div @click="gz">
+        <div v-if="shopInfo.isFollow">
+          <img src="@assets/guanzhu-2.png" />
+          <span class="gz">已关注</span>
+        </div>
+        <div v-else @click="gz">
           <img src="@assets/guanzhu.png" />
-          <span class="gz">关注商家</span>
+          <span class="gz t">关注商家</span>
         </div>
       </div>
       <div class="fr search">
@@ -53,6 +57,7 @@ export default class extends Vue {
   @Watch("sid", { immediate: true })
   async load(id: number) {
     this.searchVal = this.keyWord = "";
+    if (!id) return;
     const [err, data] = await this.$post("/company/details", { id });
     if (err) return;
     this.shopInfo = data;
@@ -65,7 +70,9 @@ export default class extends Vue {
     const [err, data] = await this.$post("/member/follow/addMemberFollow", {
       companyId: this.sid
     });
-    console.log(data);
+    if (err) return;
+    this.shopInfo.isFollow = 1;
+    this.$message.success("关注成功");
   }
 }
 </script>
@@ -97,13 +104,15 @@ export default class extends Vue {
         font-size: 12px;
       }
       .gz {
-        margin-left: 5px;
+        // margin-left: 5px;
         font-size: 12px;
         color: rgb(51, 51, 51);
+        &.t {
+          cursor: pointer;
+        }
       }
       div {
         display: inline-block;
-        cursor: pointer;
       }
     }
     .search {

src/views/shops/details/product.vue

@@ -56,7 +56,7 @@
     <div class="details">
       <div class="items">
         <div class="item">商品名称：{{ product.name }}</div>
-        <div class="item">商品材质：</div>
+        <div class="item">商品材质：{{ product.material }}</div>
         <div class="item">商品单重：{{ product.weight }}</div>
         <div class="item">商品颜色：{{ colors }}</div>
         <div class="item">商品规格：{{ sizes }}{{ sizes }}</div>

src/views/shops/enter/add.vue

@@ -424,9 +424,6 @@ export default {
 </style>
 <style lang="scss">
 .formPanel {
-  .el-form-item__label {
-    color: #666;
-  }
   .avatar-uploader .el-upload {
     border: 1px dashed #d9d9d9;
     border-radius: 6px;

src/views/shops/enter/index.vue

@@ -11,7 +11,7 @@
       <div class="cxtj">
         <span>企业名称：</span>
         <el-input
-          v-model="name"
+          v-model="companyName"
           clearable
           size="small"
           placeholder="请输入企业名称"
@@ -19,113 +19,85 @@
         ></el-input>
         <span class="ml2rem">审核状态：</span>
         <el-select
-          v-model="shStatus"
+          v-model="status"
           clearable
           size="small"
           placeholder="请选择"
           style="width:14rem;"
         >
           <el-option
-            v-for="item in statusArr"
-            :key="item.value"
-            :label="item.label"
-            :value="item.value"
+            v-for="{ key, value } in statusList"
+            :key="`status${key}`"
+            :label="key"
+            :value="value"
           ></el-option>
         </el-select>
-        <el-button class="searchBtn" size="small">查询</el-button>
+        <el-button class="searchBtn" size="small" @click="search"
+          >查询</el-button
+        >
       </div>
-      <el-table class="qyrzgs" stripe :data="tableData">
+      <el-table
+        empty-text="数据加载中..."
+        class="qyrzgs"
+        stripe
+        v-if="items"
+        :data="items"
+      >
         <el-table-column type="index" label="序号" width="50"></el-table-column>
-        <el-table-column prop="name" label="市" width="180"></el-table-column>
-        <el-table-column prop="address" label="区(县)"></el-table-column>
-        <el-table-column prop="address" label="企业名称"></el-table-column>
-        <el-table-column prop="address" label="申请日期"></el-table-column>
-        <el-table-column prop="address" label="审核状态"></el-table-column>
-        <el-table-column prop="address" label="审核日期"></el-table-column>
-        <el-table-column prop="address" label="驳回理由"></el-table-column>
+        <el-table-column prop="companyName" label="企业名称"></el-table-column>
         <el-table-column
-          prop="date"
-          label="审核日期"
-          width="180"
+          prop="detailAddress"
+          label="详细地址"
         ></el-table-column>
+        <el-table-column prop="createTime" label="申请日期"></el-table-column>
+        <el-table-column prop="address" label="审核状态">
+          <template slot-scope="{ row: { status } }">
+            {{ getStatusText(status) }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="address" label="审核日期">
+          <template slot-scope="{ row: { companyExamine } }">
+            {{ companyExamine && companyExamine.examineDate }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="address" label="驳回理由">
+          <template slot-scope="{ row: { companyExamine } }">
+            {{ companyExamine && companyExamine.rejectReason }}
+          </template>
+        </el-table-column>
       </el-table>
-      <el-pagination
-        class="pageDiv"
-        background
-        @current-change="handleCurrentChange"
-        :page-size="pageSize"
-        :current-page="currentPage"
-        layout="prev, pager, next,total, jumper"
-        :total="total"
-      ></el-pagination>
+      <load-more
+        url="/company/enterPublicity"
+        :params="params"
+        @getItems="setItems"
+      />
     </div>
   </div>
 </template>
-<script>
+<script lang="ts">
 import { Component, Vue } from "vue-property-decorator";
-export default {
-  name: "app",
-  components: {},
-  data() {
-    return {
-      name: "",
-      shStatus: "",
-      statusArr: [
-        {
-          value: "选项1",
-          label: "黄金糕"
-        },
-        {
-          value: "选项2",
-          label: "双皮奶"
-        },
-        {
-          value: "选项3",
-          label: "蚵仔煎"
-        },
-        {
-          value: "选项4",
-          label: "龙须面"
-        },
-        {
-          value: "选项5",
-          label: "北京烤鸭"
-        }
-      ],
-      tableData: [
-        {
-          date: "2016-05-02",
-          name: "王小虎",
-          address: "上海市普陀区金沙江路 1518 弄"
-        },
-        {
-          date: "2016-05-04",
-          name: "王小虎",
-          address: "上海市普陀区金沙江路 1517 弄"
-        },
-        {
-          date: "2016-05-01",
-          name: "王小虎",
-          address: "上海市普陀区金沙江路 1519 弄"
-        },
-        {
-          date: "2016-05-03",
-          name: "王小虎",
-          address: "上海市普陀区金沙江路 1516 弄"
-        }
-      ],
-      pageSize: 10,
-      currentPage: 1,
-      total: 24
-    };
-  },
-  methods: {
-    handleCurrentChange(val) {
-      this.currentPage = val;
-      this.requestData();
-    }
+import dict from "@/store/modules/dict";
+@Component
+export default class extends Vue {
+  private companyName = "";
+  private status = "";
+  private params = {};
+  private items: any[] | null = [];
+  get statusList() {
+    return dict.examineStatus;
+  }
+  getStatusText(status: number) {
+    const dict = this.statusList.find(({ value }) => value === status);
+    return dict && dict.key;
   }
-};
+  search() {
+    const { companyName, status } = this;
+    this.params = { companyName, status };
+  }
+  setItems(items: any[]) {
+    this.items = items.length ? items : null;
+  }
+}
 </script>
 <style scoped lang="scss">
 .bannerDiv {

src/views/shops/index.vue

@@ -4,34 +4,53 @@
       <img src="@assets/sccj-banner.png" alt="" />
     </div>
     <div class="container ">
-      <div class="shop" v-for="x in 5" :key="x">
-        <img class="logo fl" src="@assets/shopLogo.png" />
-        <div class="details fl">
-          <div class="name">洛阳钢具有限公司</div>
-          <div class="desc">主营:文件柜</div>
-          <div class="total">共计900件商品</div>
-          <router-link class="in" to="/shop/1">进入店铺</router-link>
-        </div>
-        <div class="img">
-          <img src="@assets/shangpin.png" alt="" />
-        </div>
-        <div class="img">
-          <img src="@assets/shangpin.png" alt="" />
-        </div>
-        <div class="img">
-          <img src="@assets/shangpin.png" alt="" />
-        </div>
-        <div class="img">
-          <img src="@assets/shangpin.png" alt="" />
-        </div>
-      </div>
+      <load-more
+        url="/company/list"
+        :params="params"
+        v-slot="{
+          item: {
+            id,
+            companyName,
+            primaryBusiness,
+            propagandaImgUrl,
+            defaultImgUrl
+          }
+        }"
+      >
+        <router-link class="shop" :to="`/shop/${id}`">
+          <img class="logo fl" :src="`${$basePath}${defaultImgUrl}`" />
+          <div class="details fl">
+            <div class="name">{{ companyName }}</div>
+            <div class="desc">主营:{{ primaryBusiness }}</div>
+            <div class="total">共计900件商品</div>
+            <span class="in">进入店铺</span>
+          </div>
+          <div
+            class="img"
+            v-for="(img, index) in getImgs(propagandaImgUrl)"
+            :key="`img${index}`"
+          >
+            <img :src="`${$basePath}${img}`" />
+          </div>
+        </router-link>
+      </load-more>
     </div>
   </div>
 </template>
 <script lang="ts">
-import { Component, Vue, Watch } from "vue-property-decorator";
+import { Component, Vue, Watch, Prop } from "vue-property-decorator";
 @Component
-export default class extends Vue {}
+export default class extends Vue {
+  private params: IAny | null = null;
+  @Prop(String) private kw!: string;
+  @Watch("kw", { immediate: true })
+  kwChange() {
+    this.params = { companyName: this.kw };
+  }
+  getImgs(imgs: string) {
+    return `${imgs}`.split(",");
+  }
+}
 </script>
 <style lang="scss" scoped>
 .shops {
@@ -56,6 +75,7 @@ export default class extends Vue {}
     height: 170px;
     box-sizing: border-box;
     padding: 30px 20px;
+    display: block;
     .logo {
       width: 145px;
       margin-right: 40px;