增加订单列表支付

src/pages/home/index.vue

@@ -148,7 +148,7 @@ export default {
         font-size:0.24rem;
         flex:1;
         span{
-          font-size:0.4rem;
+          font-size:0.36rem;
         }
       }
       .right-tag{

src/pages/order/index.vue

@@ -40,16 +40,24 @@
         </div>
         <div class="pay_bar" v-if="item.order_status === '1'">
           <p><span>更多</span></p>
-          <van-button plain round type="primary" size="mini" color="#C01540">付款</van-button>
+          <van-button plain round type="primary" size="mini" color="#C01540" @click.stop="handlePay(item)">付款</van-button>
         </div>
       </li>
     </ul>
     <van-empty description="暂无订单" v-if="list.length === 0"/>
+    <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 { getOrderList } from '@/api/common'
+import { getOrderList, createOrder } from '@/api/common'
+import { getOpenId } from '@/api/account.js'
 import { mapGetters } from 'vuex'
+import { Toast } from 'vant'
 const statusMap = {
   1: '等待买家付款',
   2: '等待卖家发货',
@@ -62,11 +70,16 @@ export default {
     return {
       search: '',
       active: '1',
-      list: []
+      list: [],
+      order_details_url: window.location.origin + '/order-details',
+      dialogVisiable: false,
+      payType: '12',
+      payParams: {},
+      openId: '' // 'oF3a-t9pFpmL2gWuTmtWs5HlDGkU'
     }
   },
   computed: {
-    ...mapGetters(['user'])
+    ...mapGetters(['user', 'isWxBrowser', 'isAliBrowser'])
   },
   filters: {
     statusFilter(val) {
@@ -76,11 +89,53 @@ export default {
   created() {
     const query = this.$route.query
     this.active = query.type || ''
+    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.fetchOrderList()
   },
   methods: {
-    navOrderDetails(item) {
+    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) {
+        params.payment_method = '3'
+        params.open_id = this.openId
+        this.payment_method = '3'
+        this.fetchPlaceOrder(params)
+      } 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)
+    },
+    navOrderDetails(item) {
       this.$router.push({ path: '/order-details', query: { od_id: item.order_detail_id } })
     },
     imgJsonParse(val) {
@@ -104,6 +159,58 @@ export default {
           this.list = []
         }
       })
+    },
+    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(window.location.href)
+      } 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
+      }
     }
   }
 }
@@ -229,4 +336,10 @@ export default {
     }
   }
 }
+.van-radio-group{
+  padding:0.4rem;
+  .van-radio{
+    padding:0.2rem;
+  }
+}
 </style>
\ No newline at end of file