新增微信绑定页面

components/common/scroll/scroll.vue

@@ -0,0 +1,101 @@
+<template>
+  <div ref="wrapper">
+    <slot></slot>
+  </div>
+</template>
+
+<script type="text/ecmascript-6">
+import BScroll from 'better-scroll'
+
+export default {
+  props: {
+    probeType: {
+      type: Number,
+      default: 3
+    },
+    click: {
+      type: Boolean,
+      default: true
+    },
+    data: {
+      type: Array,
+      default: null
+    },
+    listenScroll: {
+      type: Boolean,
+      default: false
+    },
+    pullup: {
+      type: Boolean,
+      default: false
+    },
+    scrollEnd: {
+      type: Boolean,
+      default: false
+    }
+  },
+  mounted() {
+    setTimeout(() => {
+      this._initScroll()
+    }, 20)
+  },
+  methods: {
+    _initScroll() {
+      if (!this.$refs.wrapper) {
+        return
+      }
+      this.scroll = new BScroll(this.$refs.wrapper, {
+        probeType: this.probeType,
+        click: this.click
+      })
+
+      if (this.listenScroll) {
+        let me = this
+        this.scroll.on('scroll', pos => {
+          me.$emit('scroll', pos)
+        })
+      }
+
+      if (this.pullup) {
+        this.scroll.on('scrollEnd', () => {
+          if (this.scroll.y <= this.scroll.maxScrollY + 50) {
+            this.$emit('scrollToEnd')
+          }
+        })
+      }
+
+      if (this.scrollEnd) {
+        this.scroll.on('scrollEnd', () => {
+          this.$emit('scrollToEnd')
+        })
+      }
+    },
+    enable() {
+      this.scroll && this.scroll.enable()
+    },
+    disable() {
+      this.scroll && this.scroll.disable()
+    },
+    refresh() {
+      this.scroll && this.scroll.refresh()
+    },
+    scrollTo() {
+      this.scroll && this.scroll.scrollTo.apply(this.scroll, arguments)
+    },
+    scrollToElement() {
+      this.scroll && this.scroll.scrollToElement.apply(this.scroll, arguments)
+    }
+  },
+  watch: {
+    data() {
+      setTimeout(() => {
+        this.refresh()
+      }, 20)
+    }
+  }
+}
+</script>
+
+<style lang="sass" type="text/sass">
+
+</style>

components/mobile/Home.vue

@@ -1,60 +1,63 @@
 <template>
   <div>
-    <div class="home" v-if="!showMainSearch">
-      <div class="header">
-        <div v-swiper:mySwiper="swiperOption">
-          <div class="swiper-wrapper">
-            <div class="swiper-slide">
-              <img class="home-bg" src="/images/mobile/@2x/applyPurchase/home/app-banner_01.jpg" alt="">
-            </div>
-            <div class="swiper-slide">
-              <img class="home-bg" src="/images/mobile/@2x/applyPurchase/home/app-banner_02.jpg" alt="">
+    <scroll :data="purchaseManListData" class="home" :pullup="true" @scrollToEnd="scrollToEnd">
+      <div v-if="!showMainSearch">
+        <div class="header">
+          <div v-swiper:mySwiper="swiperOption">
+            <div class="swiper-wrapper">
+              <div class="swiper-slide">
+                <img class="home-bg" src="/images/mobile/@2x/applyPurchase/home/app-banner_01.jpg" alt="">
+              </div>
+              <div class="swiper-slide">
+                <img class="home-bg" src="/images/mobile/@2x/applyPurchase/home/app-banner_02.jpg" alt="">
+              </div>
             </div>
+            <div class="swiper-pagination swiper-pagination-bullets"></div>
+          </div>
+          <div class="search-content">
+            <input type="text" placeholder="请输入您要查找的型号、品牌或店铺" @click="onHomeSearchClick()">
+            <span>
+          <i class="iconfont icon-sousuo"></i>
+        </span>
+            <img src="/images/mobile/@2x/applyPurchase/home/phone.png" alt="" @click="showStoreInfo = true">
           </div>
-          <div class="swiper-pagination swiper-pagination-bullets"></div>
         </div>
-        <div class="search-content">
-          <input type="text" placeholder="请输入您要查找的型号、品牌或店铺" @click="onHomeSearchClick()">
-          <span>
-        <i class="iconfont icon-sousuo"></i>
-      </span>
-          <img src="/images/mobile/@2x/applyPurchase/home/phone.png" alt="" @click="showStoreInfo = true">
+        <ul class="link-list">
+          <li>
+            <nuxt-link to="/mobile/supplier">
+              <img src="/images/mobile/@2x/home/supplier.png" alt="">
+              <span>供应商</span>
+            </nuxt-link>
+          </li>
+          <li>
+            <a @click="goOpportunity">
+              <img src="/images/mobile/@2x/home/seek.png" alt="">
+              <span>我的商机</span>
+            </a>
+          </li>
+          <li>
+            <nuxt-link to="/mobile/shop">
+              <img src="/images/mobile/@2x/home/store.png" alt="">
+              <span>店铺列表</span>
+             <!-- <i></i>-->
+            </nuxt-link>
+          </li>
+          <li>
+            <nuxt-link to="/mobile/brand/brandCenter/A">
+              <img src="/images/mobile/@2x/home/brand.png" alt="">
+              <span>品牌墙</span>
+            </nuxt-link>
+          </li>
+        </ul>
+        <div class="seek-title">
+          <img src="/images/mobile/@2x/applyPurchase/home/seek-title.png" alt="">
+          <span>最新求购信息</span>
+          <nuxt-link to="/mobile/applyPurchase/list">查看更多 <img src="/images/mobile/@2x/applyPurchase/home/arrow-right.png" alt=""></nuxt-link>
         </div>
+        <seek-list :purchaseManList="purchaseManListData" :isDataChange="isDataChange"></seek-list>
+        <Loading v-show="this.page < this.allPage"></Loading>
       </div>
-      <ul class="link-list">
-        <li>
-          <nuxt-link to="/mobile/supplier">
-            <img src="/images/mobile/@2x/home/supplier.png" alt="">
-            <span>供应商</span>
-          </nuxt-link>
-        </li>
-        <li>
-          <a @click="goOpportunity">
-            <img src="/images/mobile/@2x/home/seek.png" alt="">
-            <span>我的商机</span>
-          </a>
-        </li>
-        <li>
-          <nuxt-link to="/mobile/shop">
-            <img src="/images/mobile/@2x/home/store.png" alt="">
-            <span>店铺列表</span>
-           <!-- <i></i>-->
-          </nuxt-link>
-        </li>
-        <li>
-          <nuxt-link to="/mobile/brand/brandCenter/A">
-            <img src="/images/mobile/@2x/home/brand.png" alt="">
-            <span>品牌墙</span>
-          </nuxt-link>
-        </li>
-      </ul>
-      <div class="seek-title">
-        <img src="/images/mobile/@2x/applyPurchase/home/seek-title.png" alt="">
-        <span>最新求购信息</span>
-        <nuxt-link to="/mobile/applyPurchase/list">查看更多 <img src="/images/mobile/@2x/applyPurchase/home/arrow-right.png" alt=""></nuxt-link>
-      </div>
-      <seek-list :purchaseManList="purchaseManListData" :isDataChange="isDataChange"></seek-list>
-    </div>
+    </scroll>
     <div class="mobile-modal" v-if="showStoreInfo">
       <div class="mobile-modal-box">
         <div class="mobile-modal-header">联系方式<i @click="showStoreInfo = false" class="icon-guanbi iconfont"></i></div>
@@ -74,7 +77,8 @@
 <script>
   import SeekList from './applyPurchase/SeekList.vue'
   import MainSearch from '~/components/mobile/search/MainSearch.vue'
-  import { RemindBox, LoginBox } from '~components/mobile/common'
+  import { RemindBox, LoginBox, Loading } from '~components/mobile/common'
+  import Scroll from '~components/common/scroll/scroll'
   export default {
     data () {
       return {
@@ -109,7 +113,9 @@
       SeekList,
       MainSearch,
       RemindBox,
-      LoginBox
+      LoginBox,
+      Scroll,
+      Loading
     },
     mounted: function () {
       this.$nextTick(() => {
@@ -147,11 +153,14 @@
       }
     },
     methods: {
+      scrollToEnd() {
+        this.getMoreSearch()
+      },
       scroll: function () {
-        let scrolled = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop
-        if (Math.ceil(scrolled + window.screen.availHeight) >= document.body.scrollHeight && !this.isSearchSearchingMore && this.page < this.allPage) {
-          this.getMoreSearch()
-        }
+        // let scrolled = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop
+        // if (Math.ceil(scrolled + window.screen.availHeight) >= document.body.scrollHeight && !this.isSearchSearchingMore && this.page < this.allPage) {
+        //   this.getMoreSearch()
+        // }
       },
       onHomeSearchClick () {
         this.showMainSearch = true
@@ -188,8 +197,15 @@
 </script>
 <style lang="scss">
   .home {
-    padding-bottom: 1rem;
+    /*padding-bottom: 1rem;*/
     background: #f3f3f7;
+    position: absolute;
+    bottom: 1rem;
+    width: 100%;
+    left: 0;
+    right: 0;
+    top: 0;
+    overflow: hidden;
     .header {
       height: 3.26rem;
       position: relative;

components/mobile/MobileFooter.vue

@@ -108,7 +108,17 @@
             this.$router.push(url)
           }
         } else {
-          this.showLoginBox = true
+          let ua = window.navigator.userAgent.toLowerCase()
+          if (ua.match(/micromessenger/i) && ua.match(/micromessenger/i)[0] === 'micromessenger') {
+            if (this.$store.state.option.wechatInfo.data.status === 0) {
+              this.$router.push('/mobile/wechat')
+            } else {
+              // 发送请求
+              console.log('发送请求')
+            }
+          } else {
+            this.showLoginBox = true
+          }
         }
       },
 //      onReload: function () {

pages/index.vue

@@ -116,6 +116,20 @@
         return this.$store.state.option.isMobile
       }
     },
+    mounted() {
+      this.$nextTick(() => {
+        if (this.$route.query.code) {
+          let ua = window.navigator.userAgent.toLowerCase()
+          if (ua.match(/micromessenger/i)[0] === 'micromessenger') {
+            let info = localStorage.getItem('USOFTMALLWECHATINFO')
+            if (info) {
+              this.$store.commit('option/REQUEST_WECHATINFO_STATUS_SUCCESS', JSON.parse(info))
+            }
+            this.$store.dispatch('GerWechatInfo', {code: this.$route.query.code})
+          }
+        }
+      })
+    },
     methods: {
       listenOpen () {
         this.isOpen = false

pages/mobile/wechat/index.vue

@@ -3,11 +3,11 @@
     <div class="header-view">
       <div class="hearder-kuang">
         <div class="header-img">
-          <img src="/images/mobile/@2x/wechat/header-img.png"/>
+          <img src="/images/mobile/@2x/wechat/header-img.png" :src="headerImg"/>
         </div>
       </div>
       <div class="header-name">
-        这是一个名字
+        {{userName}}
       </div>
       <img src="/images/mobile/@2x/wechat/headerbg.png" class="headerbg"/>
     </div>
@@ -45,7 +45,7 @@
   export default {
     name: 'wechatView',
     layout: 'mobileNoHeader',
-    middleware: 'authenticated',
+    // middleware: 'authenticated',
     data() {
        return {
          collectResult: '',
@@ -55,6 +55,10 @@
          passwordNum: ''
        }
     },
+    mounted() {
+      let info = localStorage.getItem('USOFTMALLWECHATINFO')
+      this.$store.commit('option/REQUEST_WECHATINFO_STATUS_SUCCESS', JSON.parse(info))
+    },
     methods: {
       telphoneBlur() {
         this.telerror = false
@@ -66,8 +70,9 @@
         if (this.telerror === true) {
           return false
         }
-        this.$http.post('', {}).then(res => {
-
+        let openid = this.$store.state.option.wechatInfo.data.openid
+        this.$http.post('/wx/bindUser', {userTel: this.telphoneNum, userPwd: this.passwordNum, openId: openid}).then(res => {
+          console.log(res)
         })
       },
       resgiter() {
@@ -80,6 +85,14 @@
     },
     components: {
       RemindBox
+    },
+    computed: {
+      userName() {
+        return this.$store.state.option.wechatInfo.data.nickname
+      },
+      headerImg() {
+        return this.$store.state.option.wechatInfo.data.headimgurl
+      }
     }
   }
 </script>

pages/mobile/wechat/toggle.vue

@@ -0,0 +1,15 @@
+<template>
+  <div></div>
+</template>
+
+<script>
+  export default {
+    // name: 'wechattoggle',
+    // layout: 'mobileNoHeader',
+    mounted() {
+      this.$nextTick(() => {
+        window.open('https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxd29bbca61728b189&redirect_uri=http://wwpszp.natappfree.cc&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect')
+      })
+    }
+  }
+</script>

store/index.js

@@ -436,6 +436,18 @@ export const actions = {
       }, err => {
         commit('option/REQUEST_STORE_STATUS_FAILURE', err)
       })
+  },
+
+  // 保存微信信息
+  GerWechatInfo({ commit }, params = {}) {
+    commit('option/REQUEST_WECHATINFO_STATUS')
+    return axios.get('/wx/getWxUserInfo', { params: params })
+      .then(response => {
+        commit('option/REQUEST_WECHATINFO_STATUS_SUCCESS', response.data)
+        localStorage.setItem('USOFTMALLWECHATINFO', JSON.stringify(response.data))
+      }, err => {
+        commit('option/REQUEST_WECHATINFO_STATUS_FAILURE', err)
+      })
   }
 }
 

store/option.js

@@ -30,6 +30,11 @@ export const state = () => ({
   infoWithAdmin: {
     fetching: false,
     data: {}
+  },
+  // 微信用户信息
+  wechatInfo: {
+    fetching: false,
+    data: {}
   }
 })
 
@@ -99,5 +104,16 @@ export const mutations = {
   REQUEST_STORE_STATUS_FAILURE (state) {
     state.storeStatus.fetching = false
     state.storeStatus.data = {}
+  },
+
+  REQUEST_WECHATINFO_STATUS (state) {
+    state.wechatInfo.fetching = true
+  },
+  REQUEST_WECHATINFO_STATUS_SUCCESS(state, result) {
+    state.wechatInfo.fetching = false
+    state.wechatInfo.data = result
+  },
+  REQUEST_WECHATINFO_STATUS_FAILURE (state) {
+    state.wechatInfo.fetching = false
   }
 }