Browse Source

买卖家页面

yangc 7 years ago
parent
commit
44fdf7b383

+ 91 - 0
assets/scss/mobileCenter.scss

@@ -0,0 +1,91 @@
+.mobile-center {
+  .block-wrap {
+    width: 7.1rem;
+    margin: .3rem auto 0;
+    background: #fff;
+    border-radius: .05rem;
+  }
+  .seek-banner {
+    height: 1.8rem;
+    line-height: 1.8rem;
+    img {
+      height: 1.22rem;
+      margin-left: .15rem;
+      margin-right: .52rem;
+    }
+    .s-title {
+      font-size: .42rem;
+      color: #3f84f6;
+      line-height: .38rem;
+      vertical-align: top;
+      margin-top: .5rem;
+      span {
+        color: #494949;
+      }
+      .s-text {
+        font-size: .28rem;
+        color: #999;
+      }
+    }
+  }
+  .seek-operation {
+    height: 2.09rem;
+    padding: 0 .24rem;
+    > p {
+      height: .55rem;
+      line-height: .55rem;
+      font-size: .28rem;
+      border-bottom: .01rem solid #d3d3d3;
+      i {
+        display: inline-block;
+        width: .05rem;
+        height: .18rem;
+        background: #3f84f6;
+        margin: 0 .05rem;
+      }
+    }
+    ul {
+      margin-top: .27rem;
+      li {
+        display: inline-block;
+        width: 1.48rem;
+        margin-right: 1.05rem;
+        text-align: center;
+        font-size: .28rem;
+        color: #666;
+        &:last-child {
+          margin-right: 0;
+        }
+        img {
+          width: .8rem;
+          margin-bottom: .05rem;
+        }
+      }
+    }
+  }
+  .collect-block {
+    height: 2.33rem;
+    padding: 0 .24rem;
+    .content-line {
+      height: 1.16rem;
+      line-height: 1.16rem;
+      &:first-child {
+        border-bottom: .01rem solid #d3d3d3;
+      }
+      img {
+        width: .8rem;
+        margin: 0 .28rem;
+      }
+      span {
+        font-size: .28rem;
+        .text {
+          color: #3f84f6;
+        }
+      }
+      i {
+        float: right;
+        color: #c1c1c6;
+      }
+    }
+  }
+}

+ 1 - 0
assets/scss/mobileCommon.scss

@@ -414,4 +414,5 @@ html {
   top: .88rem;
   bottom: .98rem;
   width: 100%;
+  background: #f1f3f6;
 }

+ 6 - 8
components/mobile/MobileFooter.vue

@@ -17,13 +17,13 @@
       </a>
     </span>-->
     <span :class="{'active': activeType == 'userCenter'}">
-      <a @click="goWithLogin('/mobile/center?type=buyer')">
+      <a @click="goWithLogin('/mobile/center/user')">
         <img :src="`/images/mobile/@2x/home/userCenter${activeType === 'userCenter' ? '-active' : ''}.png`" alt="">
         <p>买家中心</p>
       </a>
     </span>
     <span :class="{'active': activeType == 'vendorCenter'}">
-      <a @click="goWithLogin('/mobile/center?type=saler', true)">
+      <a @click="goWithLogin('/mobile/center/vendor', true)">
         <img :src="`/images/mobile/@2x/home/vendorCenter${activeType === 'vendorCenter' ? '-active' : ''}.png`" alt="">
         <p>卖家中心</p>
       </a>
@@ -71,12 +71,10 @@
           return 'shops'
         } else if (path === '/mobile/user') {
           return 'user'
-        } else if (path === '/mobile/center') {
-          if (this.$route.query.type === 'saler') {
-            return 'vendorCenter'
-          } else {
-            return 'userCenter'
-          }
+        } else if (path === '/mobile/center/user') {
+          return 'userCenter'
+        } else if (path === '/mobile/center/vendor') {
+          return 'vendorCenter'
         } else {
           return ''
         }

+ 1 - 1
components/mobile/applyPurchase/PublishSeek.vue

@@ -105,7 +105,7 @@
           document.body.style.left = '0'
           document.body.style.right = '0'
         } else {
-          document.body.style.position = 'relative'
+          document.body.style.position = 'static'
         }
       }
     },

+ 2 - 1
components/mobile/applyPurchase/index.js

@@ -2,5 +2,6 @@ import SayPriceInfo from './SayPriceInfo.vue'
 import SayPrice from './SayPrice.vue'
 import PublishSupplierSeek from './PublishSupplierSeek.vue'
 import PublishSeek from './PublishSeek.vue'
+import SeekList from './SeekList.vue'
 
-export { SayPriceInfo, SayPrice, PublishSupplierSeek, PublishSeek }
+export { SayPriceInfo, SayPrice, PublishSupplierSeek, PublishSeek, SeekList }

+ 53 - 0
components/mobile/common/PullUp.vue

@@ -0,0 +1,53 @@
+<template>
+  <!-- 移动端上拉加载更多 -->
+</template>
+<script>
+  export default {
+    data () {
+      return {
+        isSearchingMore: false
+      }
+    },
+    props: ['searchMore', 'allPage', 'page'],
+    watch: {
+      'searchMore': {
+        handler: function (val) {
+          this.isSearchingMore = val
+        }
+      }
+    },
+    mounted () {
+      let _this = this
+      _this.$nextTick(function () {
+        window.addEventListener('scroll', function () {
+          _this.scroll()
+        }, false)
+      })
+    },
+    methods: {
+      scroll: function () {
+        let scrolled = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop
+        if (Math.ceil(scrolled + window.screen.availHeight) >= document.body.scrollHeight && !this.isSearchingMore && this.page < this.allPage) {
+          this.getMore()
+        }
+      },
+      getMore: function () {
+        if (!this.isSearchingMore) {
+          this.isSearchingMore = true
+          this.$emit('pullUpAction')
+        }
+      }
+    }
+  }
+</script>
+<style lang="scss" scoped>
+  .loading {
+    text-align: center;
+    background: #fff;
+    >img {
+      width: .64rem;
+      height: .64rem;
+      margin: .2rem 0;
+    }
+  }
+</style>

+ 2 - 1
components/mobile/common/index.js

@@ -2,4 +2,5 @@ import Loading from './Loading.vue'
 import RemindBox from './RemindBox.vue'
 import LoginBox from './LoginBox.vue'
 import userHeader from './userHeader.vue'
-export { Loading, RemindBox, LoginBox, userHeader }
+import PullUp from './PullUp.vue'
+export { Loading, RemindBox, LoginBox, userHeader, PullUp }

+ 5 - 2
components/product/component/ComponentDetail.vue

@@ -22,7 +22,7 @@
             <div class="message-detail">
               <div class="message-item">类目(产品名称)</div>
               <div class="colon">:</div>
-              <div class="message-body">
+              <div class="message-body body-long">
                 {{list.kind.nameCn || ''}}
               </div>
             </div>
@@ -34,7 +34,7 @@
             <div class="message-detail">
               <div class="message-item">产品生命周期</div>
               <div class="colon">:</div>
-              <div class="message-body">
+              <div class="message-body body-long">
                 {{list.lifecycle | lifecycleFilter}}
               </div>
             </div>
@@ -313,6 +313,9 @@
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
+    width: 93px;
+  }
+  .componentDetail .container .component-message .message-body.body-long {
     width: 450px;
   }
   .componentDetail .container .component-message .message-body >img {

+ 1 - 1
nuxt.config.js

@@ -1,7 +1,7 @@
 const path = require('path')
 const isProdMode = Object.is(process.env.NODE_ENV, 'production')
 // b2c后台
-const baseUrl = process.env.BASE_URL || (isProdMode ? 'http://api.usoftmall.com/' : 'http://10.1.51.124:8080/platform-b2c')
+const baseUrl = process.env.BASE_URL || (isProdMode ? 'http://api.usoftmall.com/' : 'http://192.168.253.121:9090/platform-b2c')
 // 公共询价
 const commonUrl = process.env.COMMON_URL || (isProdMode ? 'https://api-inquiry.usoftmall.com/' : 'http://218.17.158.219:24000/')
 // 公共物料

+ 76 - 0
pages/mobile/center/user/index.vue

@@ -0,0 +1,76 @@
+<template>
+  <div class="mobile-center">
+    <div class="com-mobile-header">
+      <a @click="goLastPage"><i class="iconfont icon-fanhui"></i></a>
+      <p>买家中心</p>
+    </div>
+    <div class="mobile-fix-content">
+      <div class="seek-banner block-wrap">
+        <img src="/images/mobile/center/user/seek-banner.jpg" alt="">
+        <p class="s-title inline-block">我要求购&nbsp;&nbsp;<span>满足你所需</span>
+        <br/>
+        <span class="s-text">让订单飞起来</span>
+        </p>
+      </div>
+      <div class="block-wrap seek-operation">
+        <p><i></i>我的求购</p>
+        <ul>
+          <nuxt-link to="/mobile/center/user/seek?type=wait" tag="li">
+            <img src="/images/mobile/center/user/wait.png" alt="">
+            <p>待报价</p>
+          </nuxt-link>
+          <li>
+            <img src="/images/mobile/center/user/done.png" alt="">
+            <p>已报价</p>
+          </li>
+          <li @click="showPublishBox = true">
+            <img src="/images/mobile/center/user/pub.png" alt="">
+            <p>发布求购</p>
+          </li>
+        </ul>
+      </div>
+      <div class="block-wrap collect-block">
+        <div class="content-line">
+          <img src="/images/mobile/center/user/comp-collect.png" alt="">
+          <span>器件收藏<span class="text">(50)</span></span>
+          <i class="iconfont icon-xiangyou"></i>
+        </div>
+        <div class="content-line">
+          <img src="/images/mobile/center/user/store-focus.png" alt="">
+          <span>店铺关注<span class="text">(50)</span></span>
+          <i class="iconfont icon-xiangyou"></i>
+        </div>
+      </div>
+    </div>
+    <publish-seek :showSayPriceBox="showPublishBox" @cancelAction="showPublishBox = false" @remindAction="onRemind"></publish-seek>
+    <remind-box :title="remindText" :timeoutCount="timeoutCount"></remind-box>
+  </div>
+</template>
+<script>
+  import { RemindBox } from '~components/mobile/common'
+  import { PublishSeek } from '~components/mobile/applyPurchase'
+  export default {
+    layout: 'mobileNoHeader',
+    middleware: 'authenticated',
+    data () {
+      return {
+        showPublishBox: false,
+        remindText: '',
+        timeoutCount: 0
+      }
+    },
+    components: {
+      RemindBox,
+      PublishSeek
+    },
+    methods: {
+      onRemind: function (str) {
+        this.remindText = str
+        this.timeoutCount++
+      }
+    }
+  }
+</script>
+<style lang="scss" scoped>
+  @import '~assets/scss/mobileCenter';
+</style>

+ 105 - 0
pages/mobile/center/user/seek.vue

@@ -0,0 +1,105 @@
+<template>
+  <div class="seek">
+    <div class="com-mobile-header">
+      <a @click="goLastPage"><i class="iconfont icon-fanhui"></i></a>
+      <p>待报价</p>
+    </div>
+    <div class="mobile-content">
+      <div class="search-content">
+        <input type="text" v-model="seekKeyword" placeholder="型号/品牌/类目/规格/公司" @keyup.13="onSearch">
+        <span @click="onSearch"><i class="iconfont icon-sousuo"></i></span>
+      </div>
+      <seek-list v-show="purchaseManListData.length" :userType="userType" :seekType="seekType" :purchaseManList="purchaseManListData" :isDataChange="isDataChange"></seek-list>
+    </div>
+  </div>
+</template>
+<script>
+  import { SeekList } from '~components/mobile/applyPurchase'
+  export default {
+    layout: 'mobileNoHeader',
+    middleware: 'authenticated',
+    data () {
+      return {
+        seekKeyword: '',
+        purchaseManListData: [],
+        userType: 'saler',
+        isDataChange: false,
+        page: 1,
+        count: 10,
+        isChange: false
+      }
+    },
+    fetch ({ store }) {
+      let user = store.state.option.user.data
+      let params = {
+        pageNumber: 1,
+        pageSize: 10,
+        state: 'todo'
+      }
+      if (user.enterprise.uu) {
+        params.enUU = user.enterprise.uu
+      } else {
+        params.userUU = user.userUU
+      }
+      return Promise.all([
+        store.dispatch('applyPurchase/loadBuyerUnSayPricePurchaseManList', params)
+      ])
+    },
+    components: {
+      SeekList
+    },
+    watch: {
+      '$store.state.applyPurchase.purchaseManList.purchaseManList.data': {
+        handler: function (val) {
+          let list = val.content ? val.content.slice() : []
+          if (this.isChange) {
+            this.purchaseManListData = list
+            this.isChange = false
+          } else {
+            this.purchaseManListData = this.purchaseManListData.concat(list)
+          }
+        },
+        immediate: true
+      }
+    },
+    computed: {
+      seekType () {
+        return this.$route.query.seekType
+      }
+    },
+    methods: {
+      onSearch: function () {
+        this.page = 1
+        this.isChange = true
+        this.reloadData()
+      },
+      reloadData: function () {
+        let params = {
+          pageNumber: this.page,
+          pageSize: this.count,
+          state: 'todo',
+          keyword: this.seekKeyword
+        }
+        if (this.user.data.enterprise.uu) {
+          params.enUU = this.user.data.enterprise.uu
+        } else {
+          params.userUU = this.user.data.userUU
+        }
+        this.$store.dispatch('applyPurchase/loadBuyerUnSayPricePurchaseManList', params)
+      }
+    }
+  }
+</script>
+<style lang="scss" scoped>
+  .search-content {
+    text-align: center;
+    padding: .25rem 0 0 0;
+    input {
+      border: 1px solid #376ff3;
+    }
+    span {
+      height: .46rem;
+      line-height: .46rem;
+    }
+  }
+</style>

+ 70 - 0
pages/mobile/center/vendor/index.vue

@@ -0,0 +1,70 @@
+<template>
+  <div class="mobile-center">
+    <div class="com-mobile-header">
+      <a @click="goLastPage"><i class="iconfont icon-fanhui"></i></a>
+      <p>卖家中心</p>
+    </div>
+    <div class="mobile-fix-content">
+      <div class="seek-banner block-wrap">
+        <img src="/images/mobile/center/user/seek-banner.jpg" alt="">
+        <p class="s-title inline-block">我要求购&nbsp;&nbsp;<span>满足你所需</span>
+          <br/>
+          <span class="s-text">让订单飞起来</span>
+        </p>
+      </div>
+      <div class="block-wrap seek-operation">
+        <p><i></i>产品管理</p>
+        <ul>
+          <li>
+            <img src="/images/mobile/center/vendor/material.png" alt="">
+            <p>企业产品库</p>
+          </li>
+          <li>
+            <img src="/images/mobile/center/vendor/material-person.png" alt="">
+            <p>个人产品库</p>
+          </li>
+          <li>
+            <img src="/images/mobile/center/vendor/onsale.png" alt="">
+            <p>在售产品</p>
+          </li>
+        </ul>
+      </div>
+      <div class="block-wrap seek-operation">
+        <p><i></i>我的商机</p>
+        <ul>
+          <li>
+            <img src="/images/mobile/center/vendor/all.png" alt="">
+            <p>我的商机</p>
+          </li>
+          <li>
+            <img src="/images/mobile/center/vendor/seek-done.png" alt="">
+            <p>已报价</p>
+          </li>
+        </ul>
+      </div>
+      <div class="block-wrap collect-block">
+        <div class="content-line">
+          <img src="/images/mobile/center/user/comp-collect.png" alt="">
+          <span>我的店铺<span class="text">(50)</span></span>
+          <i class="iconfont icon-xiangyou"></i>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+  export default {
+    layout: 'mobileNoHeader'
+  }
+</script>
+<style lang="scss" scoped>
+  @import '~assets/scss/mobileCenter';
+  .mobile-center{
+    .collect-block {
+      height: 1.16rem;
+      .content-line {
+        border-bottom: none !important;
+      }
+    }
+  }
+</style>

+ 1 - 0
pages/mobile/user/index.vue

@@ -92,6 +92,7 @@
   import { RemindBox } from '~components/mobile/common'
   export default {
     layout: 'mobileNoHeader',
+    middleware: 'authenticated',
     data () {
       return {
         showLogout: false,

BIN
static/images/mobile/center/user/comp-collect.png


BIN
static/images/mobile/center/user/done.png


BIN
static/images/mobile/center/user/pub.png


BIN
static/images/mobile/center/user/seek-banner.jpg


BIN
static/images/mobile/center/user/store-focus.png


BIN
static/images/mobile/center/user/wait.png


BIN
static/images/mobile/center/vendor/all.png


BIN
static/images/mobile/center/vendor/material-person.png


BIN
static/images/mobile/center/vendor/material.png


BIN
static/images/mobile/center/vendor/onsale.png


BIN
static/images/mobile/center/vendor/seek-done.png


BIN
static/images/mobile/center/vendor/shop.png


+ 1 - 0
store/index.js

@@ -33,6 +33,7 @@ export const actions = {
     store.commit('option/SET_MOBILE_LAYOUT', isMobile)
     store.commit('option/SET_USER_AGENT', userAgent)
     store.commit('option/SET_COOKIES', cookie)
+    // console.log(req.headers.referer)
     if (cookie) {
       if (cookie && cookie.length) {
         for (let i = 0; i < cookie.length; i++) {