测试支付

src/main.js

@@ -82,7 +82,7 @@ function fliterRoute(query, path) {
 }
 
 router.beforeEach((to, from, next) => {
-  console.log('_____href_____', location.href)
+  // 商品页授权登录路由处理
   if (to.path === '/goods-detail') {
     let searchQuery = querystring(location.search);
     if (searchQuery.code) {

src/store/modules/user.js

@@ -77,14 +77,12 @@ const user = {
     },
 
     getWxUserInfo({ state, commit }, code) {
-      console.log('_______getWxUserInfo__________', code)
       const type = 15;
       fetch({
         url: getBaseUrl(`wechats/users/info/${type}/${code}`),
         method: 'get',
         headers: { token: state.token }
       }).then(res => {
-        console.log('____wx res_____', res.data)
         sessionStorage.setItem('wxInfo', JSON.stringify(res.data));
         commit('SET_WX_INFO', res.data)
       });

src/style/common.less

@@ -96,6 +96,11 @@ html,body{
     zoom:1;
 }
 
+.deep-img-w100 img{
+  display: block;
+  width: 100%;
+}
+
 .back_img{
     background-repeat: no-repeat;
     background-size: 100% 100%;

src/utils/wxShare.js

@@ -122,6 +122,12 @@ export const wechatShare = (option = {}, successCB = () => {}, hideMenu) => {
   }
 };
 
+export function chooseWXPay(params) {
+  wx.ready(() => {
+    wx.chooseWXPay(params);
+  })
+}
+
 Vue.prototype.wechatShare = wechatShare;
 Vue.prototype.wxDisabledShare = wxDisabledShare;
 

src/views/goods-detail.vue

@@ -54,7 +54,7 @@
       <div class="tab-line" :style="{left: `${tabLeft}px`}"></div>
     </div>
     <!-- 详情 -->
-    <div class="detail-box" v-html="tabs[curtTabIdx] && tabs[curtTabIdx]['detail']"></div>
+    <div class="detail-box deep-img-w100" v-html="tabs[curtTabIdx] && tabs[curtTabIdx]['detail']"></div>
     <!-- 底部购买 -->
     <div class="btn-box">
       <div class="money">
@@ -73,8 +73,10 @@
 
 <script>
 import { Swipe, SwipeItem } from 'vant';
+import { wxConfig, chooseWXPay } from '@/utils/wxShare';
 import { getAPPID, getWebPageUrl, isWeiXin, wxOauth, debounce } from '@/utils';
 const isWechat = isWeiXin();
+wxConfig(location.href);
 
 export default {
   components: {
@@ -109,7 +111,7 @@ export default {
   },
   mounted() {
     this.projectId = this.$route.query.projectId;
-    this.goodsId = this.$route.query.goodsId || 10077;
+    this.goodsId = this.$route.query.goodsId || 74;
     this.returnUrl = this.$route.query.returnUrl;
     this.getGoodsInfo();
     this.getTabW();
@@ -294,14 +296,34 @@ export default {
     // 微信内支付
     goWxPayInner(orderId) {
       const data = {
-        openId: getAPPID(),
+        openId: this.wxInfo.openid,
         orderId,
         payChannel: 1,
         tradeType: 1,
       }
       this.POST('trade/center/jsapi_prepay', data).then(res => {
         if (res.code == "000000") {
-
+          console.log('______prepay_____', res.data);
+          const that = this;
+          const payData = {
+            ...res.data,
+            success: function() {
+              let query = { orderId };
+              if (that.projectId) {
+                query.projectId = that.projectId
+              }
+              if (that.returnUrl) {
+                query.returnUrl = that.returnUrl
+              }
+              that.$router.push('prezult', query);
+            },
+            fail: function() {
+              that.$toast('支付失败，请重试~');
+            },
+            cancel: function() {},
+            complete: function() {},
+          };
+          chooseWXPay(payData);
         } else {
           this.$toast(res.message);
         }
@@ -526,10 +548,6 @@ export default {
     font-size: 14px;
     text-align: justify;
     padding: 15px 15px 75px;
-    img{
-      display: block;
-      width: 100%;
-    }
   }
   .btn-box{
     display: flex;
@@ -541,6 +559,7 @@ export default {
     height: 60px;
     padding: 10px 15px;
     box-shadow: 0 -4px 4px rgba(240, 240, 240, 0.5);
+    background-color: #fff;
     .money{
       flex: 1;
       width: 100px;