对接微信支付

src/pages/buy/components/h5Pay.vue

@@ -7,9 +7,6 @@ import * as api from '../api.js'
 
 export default {
   name: 'wxPay',
-  props: {
-    productId: { type: String, required: true }
-  },
   data() {
     return {
       openId: '',
@@ -29,7 +26,7 @@ export default {
   methods: {
     // 获取openid
     getOpenId() {
-      api.getOpenId({ id: this.user.id, identity: 'transport' }).then(response => {
+      api.getOpenId({ id: this.user.id, identity: 'transport-mini' }).then(response => {
         this.openId = response.data.openid
         // 生成订单
         this.genOrder()
@@ -38,14 +35,22 @@ export default {
     // 生成订单
     genOrder() {
       const params = {
-        product_id: this.productId,
         open_id: this.openId,
-        type: 'certs-h5'
+        buy_count: '1',
+        payment_method: '3',
+        shop_id: webConf.others.PAY_SHOP_ID,
+        spu_id: webConf.others.PAY_SPU_ID,
+        sku_id: webConf.others.PAY_SKU_ID
       }
-      api.genOrder(params).then(response => {
-        this.order = response.data
-        // 调起微信支付
-        this.wxPay()
+      api.createOrder(params).then(response => {
+        if (response.code === 0) {
+          const options = JSON.parse(response.payment_more_info)
+          this.order = Object.assign(response, { options })
+          // 调起微信支付
+          this.wxPay()
+        } else {
+          this.$toast(response.msg)
+        }
       })
     },
     // 微信支付
@@ -53,15 +58,16 @@ export default {
       const options = this.order.options
       WeixinJSBridge.invoke(
         'getBrandWCPayRequest',
-        {
-          appId: options.appId, // 公众号名称，由商户传入
-          timeStamp: options.timeStamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
-          nonceStr: options.nonceStr, // 支付签名随机串，不长于 32 位
-          package: `prepay_id=${this.order.prepay_id}`, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
-          signType: options.signType, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
-          paySign: options.paySign // 支付签名
-        },
-        function (res) {
+        options,
+        // {
+        //   appId: options.appId, // 公众号名称，由商户传入
+        //   timeStamp: options.timeStamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
+        //   nonceStr: options.nonceStr, // 支付签名随机串，不长于 32 位
+        //   package: `prepay_id=${this.order.prepay_id}`, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
+        //   signType: options.signType, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
+        //   paySign: options.paySign // 支付签名
+        // },
+        function(res) {
           if (res.err_msg === 'get_brand_wcpay_request:ok') {
             // 使用以上方式判断前端返回,微信团队郑重提示：
             // res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。

src/pages/buy/index.vue

@@ -18,7 +18,7 @@
           <div class="c">199.00</div>
           <div class="r">原价999.00</div>
         </div>
-        <div class="new-b" v-if="orderStatus === 0">课程有效期剩余{{expireDay}}天</div>
+        <div class="new-b" v-if="orderStatus === 0">课程有效期剩余{{ expireDay }}天</div>
       </div>
       <div class="btn" @click="goPay" v-if="orderStatus === 100">立即购买</div>
       <div class="btn" v-if="orderStatus === 1" @click="goHome">已购买</div>
@@ -37,7 +37,7 @@
         />
       </div>
     </div>
-    <h5-pay :productId="productId" ref="h5pay"></h5-pay>
+    <h5-pay ref="h5pay"></h5-pay>
   </div>
 </template>
 <script>
@@ -49,9 +49,7 @@ import h5Pay from './components/h5Pay.vue'
 export default {
   components: { h5Pay },
   data() {
-    const productId = webConf.isDev === 'production' ? '6684359515615264768' : '6682927830365372416'
     return {
-      productId,
       popVisible: false,
       expireDay: 0,
       orderStatusTimer: null,