mall-web-ssr/pages/mobile/center/user/doPay/_ids.vue

<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" @click="showRemind = true">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" @remindAction="setRemindText" :noReview="false"></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>
    <div class="mobile-modal" v-if="showRemind">
      <div class="consignment-modal">
        <div class="cm-content">货款将由优软商城在银行开立的第三方账户暂为保管，待您确定收货后，商城再和卖家结算。</div>
        <div class="cm-foot" @click="showRemind = false">我知道了</div>
      </div>
    </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,
        showRemind: false
      }
    },
    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;
            position: relative;
            .preview {
              position: relative;
              input {
                width: 1.09rem;
                height: 1.09rem;
                opacity: 0;
                position: absolute;
                top: -.3rem;
              }
            }
            .hover-show {
              position: absolute;
              top: 0;
              background: rgba(0,0,0,.4);
              bottom: 0;
              width: 100%;
              a {
                display: none;
              }
              .delete {
                display: block;
                width: 100%;
                text-align: center;
                height: 100%;
                line-height: 1rem;
                font-size: .4rem;
                color: #fff;
                i {
                  float: right;
                  margin: .1rem;
                }
              }
            }
          }
          .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;
        }
      }
    }
    .consignment-modal {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 6.3rem;
      margin-left: -3.15rem;
      margin-top: -1.36rem;
      background: #fff;
      border-radius: .15rem;
      font-size: .32rem;
      .cm-content {
        padding: .39rem .42rem .25rem;
        border-bottom: 1px solid #f4f4f4;
      }
      .cm-foot {
        padding: .27rem 0;
        color: #3f84f6;
        text-align: center;
      }
    }
  }
</style>