4dkankan_mobile/src/pages/account/manage/submit/index.vue

<template>
  <div class="submit-layout">
    <form id="formid" class="form-con" :action="`${$serverName}api/order/pay/paypalH5`" method="post">
        <input v-model="orderId" type="text" name='orderId'>
        <input v-model="orderType" type="text" name='orderType'>
        <input type="submit" value="提交">
    </form>
    <div class="time-line">
      <div class="line"></div>
      <div class="auth">
        <img :src="`${$cdn}images/hasLogin.png`"  alt="" class="timeline-icon">
        <div class="timeline-text">登录信息</div>
      </div>
      <div class="shipping">
        <img :src="`${$cdn}images/hasLogin.png`" alt="" class="timeline-icon">
        <div class="timeline-text">配送信息</div>
      </div>
      <div class="payment">
        <img :src="`${$cdn}images/hasLogin.png`" alt="" class="timeline-icon">
        <div class="timeline-text">支付信息</div>
        </div>
      <div class="review">
        <img :src="`${$cdn}images/spot.png`" alt="" class="timeline-icon">
        <div class="timeline-text">订单提交</div>
      </div>
    </div>
    <div class="box-con">
      <div class="bc-title">收货信息</div>
      <div class="bc-item">
        <div class="bc-ct">
          <div class="bc-contact">
            {{payinfo.receiver.shipName}}
            <div>{{payinfo.receiver.shipMobile}}</div>
          </div>
          <div class="bc-locotion">
            {{payinfo.receiver.shipAreaPath}}{{payinfo.receiver.shipAddress}}
          </div>
        </div>
        <div class="bc-express">顺丰速运</div>
      </div>
    </div>
    <div class="box-con">
      <div class="bc-title">
        <span>支付信息</span>
        <span @click="$router.back()">修改</span>
      </div>
      <div class="bc-item pay-item">
        <div class="item-method">{{payinfo.payTypeName}}</div>
        <div class="item-time">提交订单后，请您在新打开的页面完成支付</div>
      </div>
    </div>
    <div class="box-con">
      <div class="bc-title">订单概览</div>
      <div class="confirm-products">
        <div class="confirm-products-item" v-for="(item,i) in payinfo.goods" :key="i">
          <div class="product-thumb">
            <img :src="item.goodsId===4?`${$cdn}images/banner_pro.png`:`${$cdn}images/t_product.png`" alt="">
          </div>
          <div class="product-info">
            <div class="product-name">
                <img class="img-txt" :src="item.goodsId===4?`${$cdn}images/download-pro.png`:`${$cdn}images/download-lite.png`" alt="">
            </div>
            <div class="product-name">标准套餐</div>
            <div class="product-count">
              <span class="product-price">CNY ￥{{item.price}} x {{item.goodsCount}}</span>
              <span class="product-sum">CNY ￥{{item.price}}</span>
            </div>
          </div>
        </div>
        <div class="cart-table-count">
          <div class="cart-table-count-item">
            <span class="title">商品总价:</span>
            <span class="price">CNY ￥{{getSum()[1]}}</span>
          </div>
          <div class="cart-table-count-item">
            <span class="title">税费及其他费用:</span>
            <span class="price">
              <span class="free-shipping">
                <img :src="`${$cdn}images/free@2x.png`" alt="" class="free-shipping-img">
                <span class="free-shipping-text">包含</span>
              </span>
            </span>
          </div>
          <div class="cart-table-count-item">
            <span class="title">运费:</span>
            <span class="price">
              <span class="free-shipping">
                <img :src="`${$cdn}images/free@2x.png`" alt="" class="free-shipping-img">
                <span class="free-shipping-text">免费</span>
              </span>
            </span>
          </div>
         <div class="cart-table-total cart-table-count-item">
           <span class="total-title">合计:</span>
           <span class="total-price">CNY ￥{{getSum()[1]}}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="btn-submit" @click="pay">提交订单</div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import browser from '@/util/browser'

var cloneObj = function (obj) {
  var newObj = {}
  if (obj instanceof Array) {
    newObj = []
  }
  for (var key in obj) {
    var val = obj[key] || ''
    newObj[key] = typeof val === 'object' ? cloneObj(val) : val
  }
  return newObj
}

let paytypes = {
  0: 'wechatMobilePay',
  1: 'aliMobilePay'
}
export default {
  computed: {
    ...mapState({
      token: state => state.user.token || '',
      language: state => state.language.current,
      payinfo: state => {
        let type = Object.prototype.toString.call(state.user.payinfo)
        if (type === '[object Object]') {
          return state.user.payinfo
        }
        let condition = state.user.payinfo && state.user.payinfo !== 'null' && type !== '[object Array]'
        return condition ? JSON.parse(state.user.payinfo) : {}
      }
    })
  },
  data () {
    return {
      selected: false,
      isWeixin: browser.weixin,
      orderId: '',
      orderType: 0
    }
  },
  methods: {
    async pay () {
      let {invoice, goods, payType, receiver} = this.payinfo
      let params = {
        goods,
        receiver,
        invoice,
        payType,
        abroad: this.language === 'en' ? 1 : 0

      }
      let res = await this.$http
        .post('user/order/placeOrder', params, {
          headers: {
            token: this.token
          }
        })

      this.$store.commit('ORDERINFO', {
        orderSn: res.data.data.orderSn,
        price: res.data.data.goodsAmount
      })
      this.$store.dispatch('getCart')
      let data = {
        orderId: res.data.data.id,
        orderType: 0
      }

      this.orderId = res.data.data.id
      this.orderType = 0

      if (Number(payType) !== 2) {
        if (this.isWeixin) {
          return location.replace(`https://open.weixin.qq.com/connect/oauth2/authorize?redirect_uri=http%3a%2f%2fpro.4dkankan.com%2fapi%2forder%2fpay%2fwechatPreJsPay%3forderId=${this.orderId}&appid=wx779dbafb46bab697&response_type=code&scope=snsapi_base&state=1&connect_redirect=1#wechat_redirect`)
        }
        let response = await this.$http
          .post(`order/pay/${paytypes[payType]}`, data, {
            headers: {
              token: this.token
            }
          })
        let url = payType === 1 ? response.data.data.form : response.data.data.mweb_url
        location.replace(url)
      } else {
        document.getElementById('formid').submit()
        this.$toast.show('warn', '正在跳转至paypal支付链接，请稍等')
      }
    },

    getSum () {
      let sum = 0
      let count = 0
      this.payinfo.goods.forEach(item => {
        sum += item.goodsCount * item.price
        count += item.goodsCount
      })
      return [count, sum]
    }
  }
}
</script>

<style lang="scss" scoped>
@import './style.scss';
</style>