realtorEasier-webSite/mobile/src/pages/account/manage/payselect/index.vue

<template>
  <div class="paytype-layout">
    <div class="paytype">
      <div class="pay-item" v-for="(item,i) in data" :key="i" @click="goPay(item)">
        <span>{{language==='en'?item.En:item.name}}</span>
        <img :src="item.img" alt="">
        <form v-if="item.name === 'PayPal'" id="formid1" class="form-con" :action="`${$serverName}api/order/pay/paypalH5`" method="post">
            <input  v-model="$route.params.orderId" type="text" name='orderId'>
            <input  v-model="$route.params.orderType" type="text" name='orderType'>
            <input type="submit" value="提交">
        </form>
      </div>
    </div>
    <div class="btn-back" @click="$router.back()">{{language==='en'?'Back':'返回'}}</div>
  </div>
</template>

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

let PAYS = {
  0: 'wechatMobilePay',
  1: 'aliMobilePay',
  2: 'paypal'
}

// let to = {
//   0: {path: '/order'},
//   1: {path: '/order'},
//   2: {path: '/order'}
// }

export default {
  computed: {
    ...mapState({
      language: state => state.language.current,
      langToast: state => state.language.home.toast,
      token: state => state.user.token || ''
    })
  },
  data () {
    let country = this.$route.query.country || ''
    let data = Number(country) ? [{
      id: 2,
      name: 'PayPal',
      img: this.$cdn + `images/ic_paypal_mb@2x.png`
    }] : [{
      name: '支付宝',
      En: 'Alipay',
      img: this.$cdn + `images/ic_alipay_mb@2x.png`,
      id: 1
    }, {
      id: 0,
      name: '微信支付',
      En: 'Wechat',
      img: this.$cdn + `images/ic_weixin@2x.png`
    }]
    let weichtdata = [{
      id: 0,
      name: '微信支付',
      En: 'Wechat',
      img: this.$cdn + `images/ic_weixin@2x.png`
    }]
    return {
      data: browser.weixin ? weichtdata : data,
      isWeixin: browser.weixin
    }
  },
  mounted () {
  },
  methods: {
    async goPay (item) {
      let {orderId, orderType} = this.$route.params
      let {spaceId} = this.$route.query
      let params = {
        orderId: orderId,
        orderType: Number(orderType),
        spaceId: spaceId || null
      }

      if (PAYS[item.id] !== 'paypal') {
        if (this.isWeixin) {
          let href = spaceId ? `https://open.weixin.qq.com/connect/oauth2/authorize?redirect_uri=http%3a%2f%2ftest.4dkankan.com%2fapi%2forder%2fpay%2fwechatPreJsPay%3forderId=${orderId}%26spaceId=${spaceId || null}%26orderType=${Number(orderType)}&appid=wx779dbafb46bab697&response_type=code&scope=snsapi_base&state=1&connect_redirect=1#wechat_redirect`
            : `https://open.weixin.qq.com/connect/oauth2/authorize?redirect_uri=http%3a%2f%2ftest.4dkankan.com%2fapi%2forder%2fpay%2fwechatPreJsPay%3forderId=${orderId}%26orderType=${Number(orderType)}&appid=wx779dbafb46bab697&response_type=code&scope=snsapi_base&state=1&connect_redirect=1#wechat_redirect`
          return location.replace(href)
        }
        let response = await this.$http
          .post(`/order/pay/${PAYS[item.id]}`, params, {
            headers: {
              token: this.token
            }
          })
        if (response.data.code !== 0) {
          return this.$toast.show('warn', this.langToast['41'])
        }
        let url = item.id === 1 ? response.data.data.form : response.data.data.mweb_url
        location.replace(url)
      } else {
        this.$toast.show('warn', this.langToast['3'])
      }
    }
  }
}
</script>

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