订单详情页支持再次支付待付款订单

src/pages/buy/index.vue

@@ -210,7 +210,7 @@ export default {
         // window.sessionStorage.setItem('isBackFormH5Pay', 1)
         window.localStorage.setItem('payment_order_id', res.payment_order_id)
         window.localStorage.setItem('order_detail_id', res.order_detail_id)
-        window.location.href = res.payment_url + '&redirect_url=' + encodeURIComponent(window.location.href)
+        window.location.href = res.payment_url + '&redirect_url=' + encodeURIComponent(this.order_details_url)
       } else if (payType === '12') {
         // 支付宝网页支付
         // window.sessionStorage.setItem('isBackFormH5Pay', 1)

src/pages/order/index.vue

@@ -101,7 +101,6 @@ export default {
   },
   methods: {
     handlePay(item) {
-      console.log(item)
       const params = {
         shop_id: item.shop_id,
         spu_id: item.spu_id,
@@ -117,10 +116,14 @@ export default {
         redirect_url: encodeURIComponent(this.order_details_url)
       }
       if (this.isWxBrowser) {
-        params.payment_method = '3'
-        params.open_id = this.openId
-        this.payment_method = '3'
-        this.fetchPlaceOrder(params)
+        if (this.openId) {
+          params.payment_method = '3'
+          params.open_id = this.openId
+          this.payment_method = '3'
+          this.fetchPlaceOrder(params)
+        } else {
+          Toast.success('正在准备发起支付数据中，请稍后再试')
+        }
       } else if (this.isAliBrowser) {
         params.payment_method = '12'
         this.payment_method = '12'
@@ -204,7 +207,7 @@ export default {
         // 微信外微信h5支付
         window.localStorage.setItem('payment_order_id', res.payment_order_id)
         window.localStorage.setItem('order_detail_id', res.order_detail_id)
-        window.location.href = res.payment_url + '&redirect_url=' + encodeURIComponent(window.location.href)
+        window.location.href = res.payment_url + '&redirect_url=' + encodeURIComponent(this.order_details_url)
       } else if (payType === '12') {
         // 支付宝网页支付
         window.localStorage.setItem('payment_order_id', res.payment_order_id)

src/pages/order/order-details.vue

@@ -15,17 +15,25 @@
     <van-cell-group>
       <van-cell title="订单编号" :value="details.order_detail_id" />
       <van-cell title="下单时间" :value="details.pay_time" />
-      <van-cell title="支付方式" :value="payType" />
+      <van-cell title="支付方式" :value="payTypeText" />
       <van-cell title="商品总额" :value="`￥${details.payment_money}`" />
       <van-cell title="支付状态" :value="orderStatus" />
     </van-cell-group>
-    <div class="bottom-bar" v-if="false && orderStatus === '待付款'">
-      <van-button type="primary" round block color="#C01540" size="small" @click="handleBuy">立即购买</van-button>
+    <div class="bottom-bar" v-if="orderStatus === '待付款'">
+      <van-button type="primary" round block color="#C01540" size="small" @click="handlePay(details)">立即购买</van-button>
     </div>
+    <van-dialog v-model="dialogVisiable" title="请选择支付方式" show-cancel-button @confirm="handleDialogConfirm">
+      <van-radio-group v-model="payType">
+        <van-radio name="12">支付宝支付</van-radio>
+        <van-radio name="4">微信支付</van-radio>
+      </van-radio-group>
+    </van-dialog>
   </div>
 </template>
 <script>
-import { getOrderDetails } from '@/api/common'
+import { getOrderDetails, createOrder } from '@/api/common'
+import { getOpenId } from '@/api/account.js'
+import { mapGetters } from 'vuex'
 import { Toast } from 'vant'
 const payTypeMap = {
   0: '',
@@ -39,14 +47,21 @@ export default {
     return {
       details: {},
       orderDetailId: '',
-      isPayBack: false
+      isPayBack: false,
+      order_details_url: window.location.origin + '/order-details',
+      dialogVisiable: false,
+      payType: '12',
+      payParams: {},
+      payment_method: '12',
+      openId: '' // 'oF3a-t9pFpmL2gWuTmtWs5HlDGkU'
     }
   },
   computed: {
+    ...mapGetters(['user', 'isWxBrowser', 'isAliBrowser']),
     payOrderId() {
       return window.localStorage.getItem('payment_order_id') || '6806478305244479488'
     },
-    payType() {
+    payTypeText() {
       const payTypeCode = (this.details.payment_method) || 0
       return payTypeMap[payTypeCode]
     },
@@ -63,10 +78,56 @@ export default {
       this.orderDetailId = window.localStorage.getItem('order_detail_id') || '6806478305244479488'
       this.isPayBack = true
     }
+    let openId = window.localStorage.getItem('openId')
+    if (openId === 'undefined' || openId === 'null') openId = ''
+    this.openId = openId // 'oF3a-t9pFpmL2gWuTmtWs5HlDGkU'
+    if (this.isWxBrowser && !openId) {
+      const { code } = this.$route.query
+      if (code) this.fetchOpenId(code)
+      else this.getCode()
+    }
     this.fetchOrderDetails()
   },
   methods: {
-    handleBuy() {},
+    handlePay(item) {
+      console.log(item)
+      const params = {
+        shop_id: item.shop_id,
+        spu_id: item.spu_id,
+        sku_id: item.sku_id,
+        order_id: item.order_id,
+        order_detail_id: item.order_detail_id,
+        buy_count: item.buy_count,
+        product_price: item.product_price,
+        customer_id: item.customer_id,
+        customer_phone: item.customer_phone,
+        payment_money: item.payment_money,
+        app_button_text: item.app_button_text,
+        redirect_url: encodeURIComponent(this.order_details_url)
+      }
+      if (this.isWxBrowser) {
+        if (this.openId) {
+          params.payment_method = '3'
+          params.open_id = this.openId
+          this.payment_method = '3'
+          this.fetchPlaceOrder(params)
+        } else {
+          Toast.success('正在准备发起支付数据中，请稍后再试')
+        }
+      } else if (this.isAliBrowser) {
+        params.payment_method = '12'
+        this.payment_method = '12'
+        this.fetchPlaceOrder(params)
+      } else {
+        this.payParams = params
+        this.dialogVisiable = true
+      }
+    },
+    handleDialogConfirm() {
+      this.payment_method = this.payType
+      const params = Object.assign({ payment_method: this.payType }, this.payParams)
+      this.fetchPlaceOrder(params)
+    },
     imgJsonParse(val) {
       if (typeof val === 'string' && typeof JSON.parse(val) === 'object') {
         const [first = {}] = JSON.parse(val)
@@ -85,6 +146,58 @@ export default {
           }
         }
       })
+    },
+    getCode() {
+      const redirectURI = `https://pages.ezijing.com/given/auth.html?redirect_uri=${encodeURIComponent(window.location.href)}`
+      window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx451c01d40d090d7a&redirect_uri=${redirectURI}&response_type=code&scope=snsapi_base#wechat_redirect`
+    },
+    // 获取微信openid
+    fetchOpenId(code) {
+      getOpenId({ code, identity: 'ezijing' }).then(response => {
+        if (response.code === 0) {
+          if (response.openid) {
+            this.openId = response.openid || ''
+            window.localStorage.setItem('openId', response.openid || '')
+          } else window.localStorage.removeItem('openId')
+        } else {
+          this.getCode()
+        }
+      })
+    },
+    fetchPlaceOrder(params) {
+      createOrder(params).then(res => {
+        if (res.code === 0 && res.msg === '成功') {
+          this.placeOrderCallback(res)
+        } else {
+          Toast.fail(res.msg || '购买下单失败')
+        }
+      })
+    },
+    placeOrderCallback(res) {
+      const payType = this.payment_method
+      if (payType === '3') {
+        // 微信内支付
+        if (typeof res.payment_more_info === 'string') {
+          const payInfo = JSON.parse(res.payment_more_info)
+          if (payInfo.appId) {
+            WeixinJSBridge.invoke('getBrandWCPayRequest', payInfo, (res) => {
+              console.log(res)
+            })
+          } else {
+            console.log('下单失败')
+          }
+        }
+      } else if (payType === '4') {
+        // 微信外微信h5支付
+        window.localStorage.setItem('payment_order_id', res.payment_order_id)
+        window.localStorage.setItem('order_detail_id', res.order_detail_id)
+        window.location.href = res.payment_url + '&redirect_url=' + encodeURIComponent(this.order_details_url)
+      } else if (payType === '12') {
+        // 支付宝网页支付
+        window.localStorage.setItem('payment_order_id', res.payment_order_id)
+        window.localStorage.setItem('order_detail_id', res.order_detail_id)
+        window.location.href = res.payment_url
+      }
     }
   }
 }
@@ -162,4 +275,10 @@ export default {
     font-size:0.24rem;
   }
 }
+.van-radio-group{
+  padding:0.4rem;
+  .van-radio{
+    padding:0.2rem;
+  }
+}
 </style>
\ No newline at end of file

src/utils/axios.js

@@ -7,7 +7,7 @@ const httpRequest = axios.create({
   withCredentials: true,
   headers: {
     'Content-Type': 'application/json',
-    'spbill_create_ip': window.returnCitySN ? window.returnCitySN.cip : ''
+    spbill_create_ip: window.returnCitySN ? window.returnCitySN.cip : ''
   }
 })