订单付款流程及入口

components/common/upload/upload.vue

@@ -4,7 +4,7 @@
       <img :src="qualifications.url==''? uploadImgTemp : isPdf?'/images/all/timg.png':qualifications.url" class="previewImage" :class="{'mobile-previewImage': isMobile}"/>
       <input type="file" v-if="!qualifications.url" class="com-input" @change="update" accept="image/jpeg,image/jpg,image/gif,image/bmp,image/png,.pdf" />
     </div>
-    <div class="hover-show" v-if="qualifications.url">
+    <div class="hover-show" v-if="qualifications.url && !noReview">
       <span class="delete" title="删除" @click="deleteImg(qualifications.url)"><i class="fa fa-trash"></i></span>
       <a @click="showImg(qualifications.url)"><i class="fa fa-search"></i>查看</a>
     </div>
@@ -21,7 +21,7 @@
 </template>
 <script>
   export default {
-    props: ['typeData', 'url', 'NopassThree'],
+    props: ['typeData', 'url', 'NopassThree', 'noReview'],
     data () {
       return {
         qualifications: {

components/mobile/MobileHeader.vue

@@ -202,6 +202,9 @@
         } else if (this.startWith(val, '/mobile/center/user/pay')) {
           this.showSearchIcon = false
           title = '填写订单'
+        } else if (this.startWith(val, '/mobile/center/user/doPay')) {
+          this.showSearchIcon = false
+          title = '待付款订单'
         } else {
           this.showSearchIcon = true
           title = '优软商城'

components/mobile/common/StatisticsMobile.vue

@@ -137,7 +137,7 @@
             num += ''
           }
         }
-        return num
+        return num || 0
       },
       formatDouble (num) {
         if (num === '' || !num) return false
@@ -152,7 +152,7 @@
         } else {
           num += ''
         }
-        return num
+        return num || 0
       }
     },
     computed: {

pages/mobile/center/user/doPay/_ids.vue

@@ -0,0 +1,313 @@
+<template>
+  <div class="mobile-fix-content mobile-centerfix-content mobile-dopay">
+    <p class="md-remain-time">
+      请您在 <span class="red-text">{{baseUtils.filterDate(remainTime, 'day')}}天{{baseUtils.filterDate(remainTime, 'hour')}}时{{baseUtils.filterDate(remainTime, 'minute')}}分</span> 内完成支付，否则订单会被自动取消!
+    </p>
+    <div class="content-line md-pay">
+      <h1>收款账户</h1>
+      <div class="info-line clearfix">
+        <div class="fl">平台代收&nbsp;<i class="inline-block">i</i></div>
+        <div class="fr"><span class="inline-block text-ellipse">{{accountData.branchname}}</span></div>
+      </div>
+      <div class="info-line clearfix">
+        <div class="fl">{{accountData.bankname}}</div>
+        <div class="fr"><span class="inline-block text-ellipse">{{accountData.number}}</span></div>
+      </div>
+      <div class="info-line clearfix">
+        <div class="fl">上传付款凭证：</div>
+        <div class="fr">
+          <div class="img inline-block">
+            <upload @uploadAction="onUpload" :noReview="true"></upload>
+          </div>
+          <div class="inline-block text">仅支持jpg、gif、pdf格式的文件，大小不超过3M</div>
+        </div>
+      </div>
+      <div class="remind clearfix">
+        <span class="fl">注意：</span>
+        <p class="fr">1、移动端仅支持线下转账，如需网银转账，可在pc端进行操作。<br/>2、优软商城及销售商不会以订单异常、系统升级为由要求您点击任何网址链接进行退款操作。</p>
+      </div>
+    </div>
+    <div class="content-line md-pay md-info">
+      <div class="info-line clearfix">
+        <div class="fl">付款方式：</div>
+        <div class="fr"><span class="inline-block text-ellipse red-text">线下付款</span></div>
+      </div>
+      <div class="info-line clearfix">
+        <div class="fl">需支付：</div>
+        <div class="fr">
+          <span class="inline-block text-ellipse">
+          <span class="red-text"><span>{{orderData[0].currency | currencyFilter}}</span>{{totalPrice}}</span>
+            （包含以下订单号）
+          </span>
+        </div>
+      </div>
+      <ul class="order-list" :class="{'more-list': showMore}">
+        <li class="clearfix" v-for="(item, index) in orderData">
+          <div class="fl"><i>{{index + 1}}</i></div>
+          <div class="fr">{{item.orderid}}</div>
+        </li>
+      </ul>
+      <div class="more" v-if="orderData.length > 3" @click="showMore = !showMore">{{showMore ? '收起' : '查看更多'}}
+        <i class="iconfont icon-arrow-down" v-if="!showMore"></i>
+        <i class="iconfont icon-arrow-up" v-else></i>
+      </div>
+    </div>
+    <div class="operate-line">
+      <nuxt-link to="/mobile/order?type=buyer" class="operate inline-block">前往订单中心</nuxt-link>
+      <a class="operate inline-block active" @click="submit">提交</a>
+    </div>
+    <remind-box :title="remindText" :timeoutCount="timeoutCount"></remind-box>
+  </div>
+</template>
+<script>
+  import { RemindBox } from '~components/mobile/common'
+  import Upload from '~components/common/upload/upload.vue'
+  export default {
+    layout: 'mobile',
+    middleware: 'authenticated',
+    data () {
+      return {
+        remindText: '',
+        timeoutCount: '',
+        showMore: false,
+        imgUrl: null
+      }
+    },
+    components: {
+      RemindBox,
+      Upload
+    },
+    fetch ({ store, params }) {
+      return Promise.all([
+        store.dispatch('userCenter/loadOrderData', {ids: params.ids}),
+        store.dispatch('userCenter/loadAccount', {status: 104, type: 'mall'})
+      ])
+    },
+    computed: {
+      orderData () {
+        return this.$store.state.userCenter.list.order.data
+      },
+      remainTime () {
+        return this.orderData[0].availabletime - Date.now()
+      },
+      accountData () {
+        return this.$store.state.userCenter.list.account.data[0] || {}
+      },
+      totalPrice () {
+        let price = 0
+        this.orderData.forEach(item => {
+          price += item.ensurePrice
+        })
+        return price
+      }
+    },
+    methods: {
+      setRemindText: function (str) {
+        this.remindText = str
+        this.timeoutCount++
+      },
+      onUpload (obj) {
+        this.imgUrl = obj.url
+      },
+      submit () {
+        console.log(this.imgUrl)
+        if (this.imgUrl) {
+          let arr = []
+          this.orderData.forEach(item => {
+            arr.push(item.orderid)
+          })
+          this.$http.post(`/trade/transfer?order=${arr.join('-')}`, {
+            imgUrl: this.imgUrl,
+            total: this.totalPrice,
+            type: 'PAIDTOPLATFORM'
+          }).then(res => {
+            if (res.data === 'success') {
+              this.$router.push('/mobile/order?type=buyer')
+            } else {
+              this.setRemindText(res.data || '付款失败')
+            }
+          }, err => {
+            this.setRemindText(err.response.data || '付款失败')
+          })
+        } else {
+          this.setRemindText('请上传付款凭证')
+        }
+      }
+    }
+  }
+</script>
+<style lang="scss">
+  $red-text: #f43938;
+  .mobile-dopay {
+    .red-text {
+      color: $red-text;
+    }
+    .md-remain-time {
+      font-size: .28rem;
+      color: #666;
+      padding: .14rem 0 .1rem;
+      text-align: center;
+    }
+    .content-line {
+      background: #fff;
+      margin-bottom: .19rem;
+    }
+    .md-pay {
+      padding-bottom: .45rem;
+      h1 {
+        height: .8rem;
+        line-height: .8rem;
+        text-align: center;
+        font-size: .35rem;
+        border-bottom: 1px solid #e4e4e4;
+      }
+      .info-line {
+        padding: 0 .45rem;
+        margin-top: .28rem;
+        font-size: .28rem;
+        color: #666;
+        .fl {
+          i {
+            width: .36rem;
+            height: .36rem;
+            color: #fff;
+            font-weight: bold;
+            font-size: .28rem;
+            text-align: center;
+            line-height: .36rem;
+            background: $red-text;
+            border-radius: 100%;
+            font-style: normal;
+          }
+        }
+        .fr {
+          span {
+            width: 4.5rem;
+            text-align: right;
+          }
+          .img {
+            width: 1.09rem;
+            height: 1.09rem;
+            border: 2px dashed #9c9c9c;
+            .preview {
+              position: relative;
+              input {
+                width: 1.09rem;
+                height: 1.09rem;
+                opacity: 0;
+                position: absolute;
+                top: -.3rem;
+              }
+            }
+          }
+          .text {
+            color: #999;
+            font-size: .24rem;
+            max-width: 3rem;
+            margin-left: .26rem;
+          }
+        }
+      }
+      .remind {
+        color: #999;
+        font-size: .24rem;
+        padding: 0 .45rem;
+        margin-top: .44rem;
+        .fr {
+          line-height: .36rem;
+          max-width: 5.8rem;
+        }
+      }
+    }
+    .md-info {
+      padding: .33rem 0 0 0;
+      .info-line {
+        margin-top: .14rem;
+        &:first-child {
+          margin-top: 0;
+        }
+        .fl {
+          width: 1.57rem;
+          text-align: right;
+        }
+        .fr {
+          > span {
+            width: 4.7rem;
+            text-align: left;
+            word-break: break-all;
+            white-space: initial;
+            .red-text {
+              span {
+                font-size: .24rem;
+              }
+            }
+          }
+        }
+      }
+      .order-list {
+        max-height: 1.56rem;
+        overflow: hidden;
+        margin-top: .31rem;
+        &.more-list {
+          max-height: unset;
+        }
+        li {
+          margin-bottom: .19rem;
+          .fl {
+            text-align: right;
+            width: 35%;
+            i {
+              font-size: .24rem;
+              color: #fff;
+              font-style: normal;
+              background: #3f84f6;
+              padding: .03rem .06rem;
+              border-radius: .04rem;
+            }
+          }
+          .fr {
+            padding-left: .07rem;
+            text-align: left;
+            width: 65%;
+            font-size: .24rem;
+            color: #666;
+            padding-top: .04rem;
+          }
+        }
+      }
+      .more {
+        height: .67rem;
+        line-height: .67rem;
+        border-top: 1px solid #e4e4e4;
+        font-size: .28rem;
+        text-align: center;
+        i {
+          font-size: .24rem;
+          margin-left: .1rem;
+        }
+      }
+    }
+    .operate-line {
+      margin-bottom: .63rem;
+      margin-top: .51rem;
+      text-align: center;
+      .operate {
+        width: 5.96rem;
+        height: .77rem;
+        line-height: .77rem;
+        font-size: .32rem;
+        color: #666;
+        text-align: center;
+        background: #fff;
+        border: 2px solid #b5b5b6;
+        border-radius: .08rem;
+        &.active {
+          color: #fff;
+          background: #3f84f6;
+          border-color: #3f84f6;
+          margin-top: .28rem;
+        }
+      }
+    }
+  }
+</style>

pages/mobile/center/user/index.vue

@@ -27,8 +27,13 @@
         </ul>
       </div>
       <div class="block-wrap collect-block">
+        <nuxt-link tag="div" to="/mobile/order?type=buyer" class="content-line">
+          <img src="/images/mobile/center/user/order.jpg" alt="">
+          <span>采购订单</span>
+          <i class="iconfont icon-xiangyou"></i>
+        </nuxt-link>
         <nuxt-link tag="div" to="/mobile/center/user/cart" class="content-line">
-          <img src="/images/mobile/center/user/comp-collect.png" alt="">
+          <img src="/images/mobile/center/user/cart.jpg" alt="">
           <span>购物车<span class="text">(0)</span></span>
           <i class="iconfont icon-xiangyou"></i>
         </nuxt-link>

pages/mobile/center/user/pay/_orderId.vue

@@ -722,7 +722,7 @@
                 }
                 // 跳转至订单提交完成页面
                 console.log('订单提交完成，跳转至结果页')
-                this.$router.push(`/mobile/center/user/pay/result/${this.baseUtils.enidfilter(orderids.join('-'))}`)
+                this.$router.push(`/mobile/center/user/doPay/${encodeURIComponent(this.baseUtils.enidfilter(orderids.join('-')))}`)
               }
             } else {
               if (res.data.data.code === 6) {

pages/mobile/center/user/pay/result/_ids.vue

@@ -1,30 +0,0 @@
-<template>
-  <remind-box :title="remindText" :timeoutCount="timeoutCount"></remind-box>
-</template>
-<script>
-  import { RemindBox } from '~components/mobile/common'
-  export default {
-    layout: 'mobile',
-    middleware: 'authenticated',
-    data () {
-      return {
-        remindText: '',
-        timeoutCount: ''
-      }
-    },
-    components: {
-      RemindBox
-    },
-    fetch ({ store, params }) {
-      return Promise.all([])
-    },
-    methods: {
-      setRemindText: function (str) {
-        this.remindText = str
-        this.timeoutCount++
-      }
-    }
-  }
-</script>
-<style lang="scss" scoped>
-</style>

pages/mobile/center/vendor/index.vue

@@ -49,6 +49,11 @@
           <span>我的店铺</span>
           <i class="iconfont icon-xiangyou"></i>
         </div>-->
+        <nuxt-link tag="div" to="/mobile/order?type=saler" class="content-line">
+          <img src="/images/mobile/center/user/order.jpg" alt="">
+          <span>采购订单</span>
+          <i class="iconfont icon-xiangyou"></i>
+        </nuxt-link>
         <nuxt-link tag="div" to="/mobile/center/vendor/message"  class="content-line" v-if="user.data.enterprise.uu">
           <img src="/images/mobile/center/user/message.png" alt="">
           <span>消息中心<span class="text">({{messageCount.count || 0}})</span></span>

store/userCenter.js

@@ -40,6 +40,26 @@ export const actions = {
       }, err => {
         commit('list/GET_INVOICE_FAILURE', err)
       })
+  },
+  // 根据订单号获取订单信息
+  loadOrderData ({ commit }, params = {}) {
+    commit('list/REQUEST_ORDER')
+    return axios.get(`/trade/order/${params.ids}`)
+      .then(response => {
+        commit('list/GET_ORDER_SUCCESS', response.data)
+      }, err => {
+        commit('list/GET_ORDER_FAILURE', err)
+      })
+  },
+  // 获取企业收款账户
+  loadAccount ({ commit }, params = {}) {
+    commit('list/REQUEST_ACCOUNT')
+    return axios.get(`/trade/bankInfo/b2c/enterprise`, {params: params})
+      .then(response => {
+        commit('list/GET_ACCOUNT_SUCCESS', response.data)
+      }, err => {
+        commit('list/GET_ACCOUNT_FAILURE', err)
+      })
   }
   // // app获取结算页配送规则
   // loadPayFareRule ({ commit }, params = {}) {

store/userCenter/list.js

@@ -1,19 +1,33 @@
 export const state = () => ({
+  // 购物车信息
   cart: {
     fetching: false,
     data: []
   },
+  // 结算页信息
   pay: {
     fetching: false,
     data: []
   },
+  // 收货地址
   address: {
     fetching: false,
     data: []
   },
+  // 发票
   invoice: {
     fetching: false,
     data: []
+  },
+  // 订单
+  order: {
+    fetching: false,
+    data: []
+  },
+  // 账户
+  account: {
+    fetching: false,
+    data: []
   }
 })
 
@@ -57,5 +71,25 @@ export const mutations = {
   GET_INVOICE_SUCCESS (state, result) {
     state.invoice.fetching = false
     state.invoice.data = result
+  },
+  REQUEST_ORDER (state) {
+    state.order.fetching = true
+  },
+  GET_ORDER_FAILURE (state) {
+    state.order.fetching = false
+  },
+  GET_ORDER_SUCCESS (state, result) {
+    state.order.fetching = false
+    state.order.data = result
+  },
+  REQUEST_ACCOUNT (state) {
+    state.account.fetching = true
+  },
+  GET_ACCOUNT_FAILURE (state) {
+    state.account.fetching = false
+  },
+  GET_ACCOUNT_SUCCESS (state, result) {
+    state.account.fetching = false
+    state.account.data = result
   }
 }

utils/baseUtils.js

@@ -414,6 +414,16 @@ const _exchangeArr = (arr, x, y) => {
   arr[y] = tmp
 }
 
+const _filterDate = (timeStamp, type) => {
+  if (type === 'day') {
+    return Math.floor(timeStamp / (1000 * 60 * 60 * 24))
+  } else if (type === 'hour') {
+    return Math.floor((timeStamp / (1000 * 60 * 60)) % 24)
+  } else if (type === 'minute') {
+    return Math.floor((timeStamp / (1000 * 60)) % 60)
+  }
+}
+
 export default {
   // 获取字符串字符长度
   getRealLen: _getRealLen,
@@ -447,5 +457,7 @@ export default {
   // 通过分段数量获取分段价格
   getPriceByLevel: _getPriceByLevel,
   // 交换数组元素位置
-  exchangeArr: _exchangeArr
+  exchangeArr: _exchangeArr,
+  // 根据时间戳提取天数、时、分
+  filterDate: _filterDate
 }