求购频道添加“相关宣传和个人产品维护快速入口

components/applyPurchase/BusinessOpportunities.vue

@@ -0,0 +1,168 @@
+<template>
+  <div class="business-opportunities">
+    <div class="apply-info">
+      <p class="title">如何获取商机<span></span></p>
+      <p> <img src="/images/applyPurchase/title1.png" alt="">怎么样才能坐拥<span>商机</span>，<span style="color: #3c7df5; font-size: 18px;">客似云来？</span></p>
+      <p> <img src="/images/applyPurchase/title2.png" alt="">优软云月均<span>三万多张采购询价单</span>，大数据将为你匹配推送<span>商机</span></p>
+      <p> <img src="/images/applyPurchase/title1.png" alt="">为什么我没收到<span>推送</span>的<span>信息</span>呢？</p>
+      <p> <img src="/images/applyPurchase/title2.png" alt="">您需维护您的<span>个人产品库</span>，越丰富商机越多</p>
+
+      <img class="process" src="/images/applyPurchase/business11.png" alt="">
+      <img class="process" src="/images/applyPurchase/business22.png" alt="">
+      <p class="process-info">买家发出的<span>公共采购询价单</span>将会通过<span>“优软云数据中心”</span>自动匹配和精准推送给<span>个人产品库</span>的有该产品的卖家。</p>
+
+      <img src="/images/applyPurchase/business33.png" alt="">
+      <div class="case-info"><img id="case" src="/images/applyPurchase/case.png" alt=""><p class="case">买方发布“型号RHU002N06T106”的公共采购询价，“云数据中心”将匹配卖家用户的个人产品库是否有该型号，如果个人产品库有该型号即可以收到该商机推送，如果个人产品库没有该型号即收不到该商机推送。</p></div>
+      <a class="last" @click="Maintenance()">去维护个人产品&nbsp;<i class="iconfont icon-arrow-right"></i></a>
+    </div>
+  </div>
+</template>
+<script>
+  export default {
+    computed: {
+      user () {
+        return this.$store.state.option.user
+      }
+    },
+    methods: {
+      Maintenance: function (data) {
+        if (!this.user.logged) {
+          this.$message.error('请先登录')
+        } else {
+          let isSelf = true
+          let tempEnterprise = {}
+          let ens = this.user.data.enterprises
+          if (ens && ens.length) {
+            ens.forEach(function (item) {
+              if (item.current) {
+                isSelf = false
+                tempEnterprise = item
+              }
+            })
+          } else {
+            isSelf = true
+          }
+          if (isSelf) {
+            this.$message.error('请先点击【卖家中心】升级成为卖家')
+          } else {
+            if (tempEnterprise.isVendor === 313) {
+              window.location.href = '/vendor#/vendor_upload?type=self'
+            } else {
+              this.$message.error('请先点击【卖家中心】升级成为卖家')
+            }
+          }
+        }
+      }
+    }
+  }
+</script>
+<style lang="scss" scoped>
+  .business-opportunities{
+    width: 100%;
+    min-width: 1190px;
+    padding: 0px;
+    margin: 0;
+    .apply-info{
+      width: 1190px;
+      margin: 0 auto;
+      text-align: center;
+      .title {
+        width: 100%;
+        font-size: 34px;
+        color: #333;
+        text-align: center;
+        padding: 20px 0px;
+        border-bottom: 1px solid #9dbbdb;
+        span{
+          display: block;
+          width: 32px;
+          height: 10px;
+          margin: 0 auto;
+          border-bottom: 3px solid #f35178;
+          position: relative;
+          top: 22px;
+        }
+      }
+      p {
+        text-align: left;
+        color: #3e7cf5;
+        font-size: 18px;
+        padding-left: 78px;
+        line-height: 24px;
+        img{
+         margin-right: 29px;
+        }
+        span{
+          color: #ff0013;
+          font-size: 24px;
+        }
+        &:nth-child(3), &:nth-child(5){
+          color: #666;
+          padding-top: 8px;
+        }
+        &:nth-child(2){
+          padding-top: 8px;
+        }
+        &:nth-child(4){
+          padding-top: 18px;
+        }
+      }
+      .process-info{
+        padding: 34px 0px 40px 0px;
+        width: 900px;
+        margin: 0 auto;
+        font-size: 16px;
+        span{
+          font-size: 20px;
+          font-weight: bold;
+        }
+      }
+      .case-info{
+        width: 1099px;
+        margin: 0 auto;
+        height: 101px;
+        border-radius: 15px;
+        border: dashed 1px #317be9;
+        margin-top: 52px;
+        padding-top: 5px;
+        position: relative;
+        .case{
+          padding: 16px 45px 0px 100px;
+          color: #fff;
+          margin: 0 auto;
+          font-size: 18px;
+          width: 1089px;
+          height: 90px;
+          background-color: #317be9;
+          border-radius: 10px;
+          line-height: 30px;
+        }
+        #case{
+          position: absolute;
+          left: 15px;
+          top: -50px;
+        }
+      }
+      .process{
+        margin-top: 8px;
+      }
+      .last {
+        margin: 12px 0px 48px 0px;
+        display: inline-block;
+        width: 198px;
+        height: 40px;
+        background: #317be9;
+        border-radius: 20px;
+        line-height: 40px;
+        color: #fff;
+        font-size: 18px;
+        text-align: center;
+        .iconfont{
+          color: #fff;
+          font-size: 24px;
+          vertical-align: middle;
+        }
+      }
+    }
+  }
+</style>

components/applyPurchase/index.js

@@ -1,6 +1,7 @@
 import ApplyInfo from './ApplyInfo.vue'
 import PublishApply from './PublishApply.vue'
 import ApplyFooter from './ApplyFooter.vue'
+import BusinessOpportunities from './BusinessOpportunities.vue'
 import BatchPublish from './BatchPublish.vue'
 
-export { ApplyInfo, PublishApply, ApplyFooter, BatchPublish }
+export { ApplyInfo, PublishApply, ApplyFooter, BusinessOpportunities, BatchPublish }

components/default/Header.vue

@@ -1,5 +1,11 @@
 <template>
   <header class="header">
+    <div class="apply-adv" v-if="isShowApplyAdv">
+      <a href="/applyPurchase#opportunities">
+        <img src="/images/applyPurchase/apply-ad.png" alt="">
+      </a>
+      <i @click="isShowApplyAdv = false"></i>
+    </div>
     <nav class="navbar">
       <div class="navbar-container container">
         <div class="navbar-header">
@@ -73,6 +79,9 @@
       }
     },
     computed: {
+      isShowApplyAdv () {
+        return this.$route.path.indexOf('/applyPurchase') !== -1
+      },
       user () {
         // console.log(this.$store.state.option.user)
         return this.$store.state.option.user

pages/applyPurchase/index.vue

@@ -3,17 +3,19 @@
     <publish-apply></publish-apply>
     <apply-info></apply-info>
     <!--<apply-footer></apply-footer>-->
+    <business-opportunities id="opportunities"></business-opportunities>
     <div class="footer"><img  class="img" src="/images/applyPurchase/apply-footer.png"></div>
   </div>
 </template>
 <script>
-  import { ApplyInfo, PublishApply, ApplyFooter } from '~components/applyPurchase'
+  import { ApplyInfo, PublishApply, ApplyFooter, BusinessOpportunities } from '~components/applyPurchase'
   export default {
     layout: 'main',
     components: {
       ApplyInfo,
       PublishApply,
-      ApplyFooter
+      ApplyFooter,
+      BusinessOpportunities
     },
     fetch ({store}) {
       return Promise.all([