增加微信网页支付

project.config.json

+{
+	"description": "项目配置文件",
+	"packOptions": {
+		"ignore": []
+	},
+	"setting": {
+		"urlCheck": true,
+		"scopeDataCheck": false,
+		"coverView": true,
+		"es6": true,
+		"postcss": true,
+		"compileHotReLoad": false,
+		"preloadBackgroundData": false,
+		"minified": true,
+		"autoAudits": false,
+		"newFeature": false,
+		"uglifyFileName": false,
+		"uploadWithSourceMap": true,
+		"useIsolateContext": true,
+		"nodeModules": false,
+		"enhance": false,
+		"useCompilerModule": false,
+		"userConfirmedUseCompilerModuleSwitch": false,
+		"showShadowRootInWxmlPanel": true
+	},
+	"compileType": "miniprogram",
+	"libVersion": "2.17.0",
+	"appid": "touristappid",
+	"projectname": "shop-h5",
+	"debugOptions": {
+		"hidedInDevtools": []
+	},
+	"scripts": {},
+	"simulatorType": "wechat",
+	"simulatorPluginLibVersion": {},
+	"condition": {
+		"search": {
+			"current": -1,
+			"list": []
+		},
+		"conversation": {
+			"current": -1,
+			"list": []
+		},
+		"game": {
+			"current": -1,
+			"list": []
+		},
+		"plugin": {
+			"current": -1,
+			"list": []
+		},
+		"gamePlugin": {
+			"current": -1,
+			"list": []
+		},
+		"miniprogram": {
+			"current": -1,
+			"list": []
+		}
+	}
+}
\ No newline at end of file

src/api/account.js

@@ -26,3 +26,14 @@ export function phoneCodeLogin(data) {
     data
   })
 }
+/**
+ * 修改用户信息
+ */
+export function getOpenId(data) {
+  return httpRequest({
+    url: '/api/usercenter/v1/wechat/get-openid',
+    method: 'post',
+    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+    data
+  })
+}
\ No newline at end of file

src/components/PhoneCodeLoginPopup.vue

@@ -9,6 +9,7 @@
         </template>
       </van-field>
       <div style="margin: 16px;">
+        <p class="account-login" @click="goLogin">账号密码登录</p>
         <van-button type="primary" round block color="#C01540" size="small" :disabled="payBtnDisabled">登录</van-button>
       </div>
     </van-form>
@@ -50,6 +51,9 @@ export default {
     }
   },
   methods: {
+    goLogin() {
+      window.location.href = `${webConf.others.loginUrl}?rd=${encodeURIComponent(window.location.href)}`
+    },
     handleSuccess(val) {
       this.fetchPhoneCodeLogin()
     },
@@ -125,6 +129,11 @@ h5{
     line-height:33px;
   }
 }
+.account-login{
+  color:#C01540;
+  font-size:12px;
+  margin-bottom:15px;
+}
 .code-btn{
   .van-button__text{
     color:#C01540;

src/pages/buy/components/BuyPopup.vue

@@ -132,7 +132,7 @@ export default {
         spu_id: this.spu_id,
         sku_id: this.spec,
         buy_count: this.form.count,
-        payment_method: '4',
+        product_price: this.price,
         app_button_text: JSON.stringify(fields)
       }
       this.$emit('placeOrder', params)

src/pages/buy/index.vue

@@ -39,7 +39,7 @@
       </van-cell>
     </div>
     <div class="bottom-bar">
-      <van-button type="primary" round block color="#C01540" size="small" @click="popupVisiable = true">立即购买</van-button>
+      <van-button type="primary" round block color="#C01540" size="small" @click="handleBuy">立即购买</van-button>
     </div>
     <buy-popup v-model="popupVisiable" :options="popupOptions" @placeOrder="handlePlaceOrder"/>
     <phone-code-login-popup v-model="loginPopupVisiable" @loginSuccess="handleHasLogin"/>
@@ -49,9 +49,10 @@
 import BuyPopup from './components/BuyPopup.vue'
 import PhoneCodeLoginPopup from '@/components/PhoneCodeLoginPopup.vue'
 import { getGoodsList, getShopList, createOrder, checkPayStatus } from '@/api/common.js'
+import { getOpenId } from '@/api/account.js'
 import store from '@/store'
 import { mapGetters } from 'vuex'
-import { Dialog } from 'vant'
+import { Dialog, Toast } from 'vant'
 export default {
   components: { BuyPopup, PhoneCodeLoginPopup },
   data() {
@@ -63,12 +64,14 @@ export default {
       imgList: [],
       shopInfo: {},
       popupOptions: {},
-      orderInfo: {},
-      payment_order_id: ''
+      payment_order_id: '',
+      payment_method: '4',
+      order_params: '',
+      openId: ''
     }
   },
   computed: {
-    ...mapGetters(['user']),
+    ...mapGetters(['user', 'isWxBrowser']),
     query() {
       return this.$route.query
     },
@@ -85,7 +88,7 @@ export default {
   beforeMount() {
     this.fetchGoodsDetails()
     this.fetchShopDetails()
-    if (this.isBackFormWxPay) {
+    if (this.isBackFormWxH5Pay) {
       Dialog.alert({
         title: '支付确认',
         message: '确认已经完成微信支付',
@@ -93,7 +96,11 @@ export default {
       }).then(() => {
         this.fetchCheckPayStatus()
       })
-      window.sessionStorage.removeItem('isBackFormWxPay')
+      window.sessionStorage.removeItem('isBackFormWxH5Pay')
+    }
+    if (!this.openId) {
+      const { code } = this.$route.query
+      if (code) this.fetchOpenId(code)
     }
   },
   methods: {
@@ -109,9 +116,7 @@ export default {
     navShop(id) {
       this.$router.push({ path: '/shop', query: { shop_id: id } })
     },
-    async handlePlaceOrder(val) {
-      this.orderInfo = val
-      this.popupVisiable = false
+    async handleBuy() {
       const isLogin = store.state.isLogin || (await store.dispatch('checkLogin'))
       if (isLogin) {
         this.handleHasLogin()
@@ -119,14 +124,44 @@ export default {
         this.loginPopupVisiable = true
       }
     },
-    handleHasLogin() {
-      const params = Object.assign({}, this.orderInfo)
+    handlePlaceOrder(val) {
+      this.popupVisiable = false
+      const params = Object.assign({}, val)
       params.customer_id = this.user.id
       params.customer_phone = this.user.phone || ''
       params.buy_count = (params.buy_count).toString()
-      console.log(params)
+      params.payment_method = this.payment_method
+      if (this.payment_method === '3') {
+        params.open_id = this.openId
+      }
       this.fetchPlaceOrder(params)
     },
+    handleHasLogin() {
+      console.log(navigator.userAgent)
+      if (this.isWxBrowser) {
+        this.payment_method = '3'
+        this.getCode()
+      } else {
+        this.payment_method = '4'
+        this.popupVisiable = true
+        // this.fetchPlaceOrder(params)
+      }
+    },
+    getCode() {
+      const redirectURI = 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) {
+          this.openId = response.openid
+          window.localStorage.setItem('open_id', this.openId)
+        } else {
+          this.getCode()
+        }
+      })
+    },
     fetchGoodsDetails() {
       const params = {
         shop_id: this.shop_id,
@@ -159,12 +194,21 @@ export default {
         }
       })
     },
+    placeOrderParams() {
+      const params = Object.assign({ payment_method: this.payment_method }, this.order_params)
+      if (this.payment_method === '3') {
+        params.open_id = this.openId
+      }
+      return params
+    },
     fetchPlaceOrder(params) {
       createOrder(params).then(res => {
-        if (res.code === 0 && res.payment_url) {
-          window.sessionStorage.setItem('isBackFormWxPay', 1)
+        if (res.code === 0 && res.msg === '成功') {
+          window.sessionStorage.setItem('isBackFormWxH5Pay', 1)
           window.sessionStorage.setItem('payment_order_id', res.payment_order_id)
           window.location.href = res.payment_url
+        } else {
+          Toast.fail(res.msg || '购买下单失败')
         }
       })
     },

src/store/getters.js

 const getters = {
-  user: state => state.user.user
+  user: state => state.user.user,
+  isWxBrowser: state => state.user.isWxBrowser
 }
 export default getters

src/store/modules/user.js

@@ -3,7 +3,7 @@ const user = {
   state: {
     user: {},
     isLogin: false,
-    isWxBrowser: /micromessenger/.test(navigator.userAgent)
+    isWxBrowser: /micromessenger/i.test(navigator.userAgent) && /android|iphone|ipad|ipod/i.test(navigator.userAgent)
   },
 
   mutations: {