提交 支付模块

.config.dev.js

@@ -9,6 +9,7 @@ module.exports = {
       'md5': 'window.md5',
       'regeneratorRuntime': 'window.regeneratorRuntime',
       'wx': 'window.wx',
+      'WeixinJSBridge': 'window.WeixinJSBridge'
     },
     devServer: {
       proxy: {

.config.pro.js

@@ -8,7 +8,9 @@ module.exports = {
       'CKEDITOR': 'window.CKEDITOR',
       'Base64': 'window.Base64',
       'md5': 'window.md5',
-      'regeneratorRuntime': 'window.regeneratorRuntime'
+      'regeneratorRuntime': 'window.regeneratorRuntime',
+      'wx': 'window.wx',
+      'WeixinJSBridge': 'window.WeixinJSBridge'
     }
   },
   ProvidePlugin: {

.config.test.js

@@ -8,7 +8,9 @@ module.exports = {
       'CKEDITOR': 'window.CKEDITOR',
       'Base64': 'window.Base64',
       'md5': 'window.md5',
-      'regeneratorRuntime': 'window.regeneratorRuntime'
+      'regeneratorRuntime': 'window.regeneratorRuntime',
+      'wx': 'window.wx',
+      'WeixinJSBridge': 'window.WeixinJSBridge'
     }
   },
   ProvidePlugin: {

.eslintrc

@@ -18,6 +18,7 @@
     "$": false,
     "window": false,
     "webConf": false,
-    "wx": false
+    "wx": false,
+    "WeixinJSBridge": false
   }
 }

package-lock.json

@@ -1045,14 +1045,6 @@
       "integrity": "sha512-csOlWGAcRFJaI6m+F2WKdnMKr4HhdhFVBk0H/QbJFMCr+uO2kwohwXQPxw/9OCxp05r5ghVBFSyioixx3gfkNQ==",
       "dev": true
     },
-    "async-validator": {
-      "version": "1.8.5",
-      "resolved": "https://registry.npmjs.org/async-validator/-/async-validator-1.8.5.tgz",
-      "integrity": "sha512-tXBM+1m056MAX0E8TL2iCjg8WvSyXu0Zc8LNtYqrVeyoL3+esHRZ4SieE9fKQyyU09uONjnMEjrNBMqT0mbvmA==",
-      "requires": {
-        "babel-runtime": "6.26.0"
-      }
-    },
     "atob": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/atob/-/atob-2.1.2.tgz",
@@ -1361,7 +1353,8 @@
     "babel-helper-vue-jsx-merge-props": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-2.0.3.tgz",
-      "integrity": "sha512-gsLiKK7Qrb7zYJNgiXKpXblxbV5ffSwR0f5whkPAaBAR4fhi6bwRZxX9wBlIc5M/v8CCkXUbXZL4N/nSE97cqg=="
+      "integrity": "sha512-gsLiKK7Qrb7zYJNgiXKpXblxbV5ffSwR0f5whkPAaBAR4fhi6bwRZxX9wBlIc5M/v8CCkXUbXZL4N/nSE97cqg==",
+      "dev": true
     },
     "babel-helpers": {
       "version": "6.24.1",
@@ -1893,6 +1886,7 @@
       "version": "6.26.0",
       "resolved": "https://registry.npmjs.org/babel-runtime/-/babel-runtime-6.26.0.tgz",
       "integrity": "sha1-llxwWGaOgrVde/4E/yM3vItWR/4=",
+      "dev": true,
       "requires": {
         "core-js": "2.6.11",
         "regenerator-runtime": "0.11.1"
@@ -3047,7 +3041,8 @@
     "core-js": {
       "version": "2.6.11",
       "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.11.tgz",
-      "integrity": "sha512-5wjnpaT/3dV+XB4borEsnAYQchn00XSgTAWKDkEqv+K8KevjbzmofK6hfJ9TZIlpj2N0xQpazy7PiRQiWHqzWg=="
+      "integrity": "sha512-5wjnpaT/3dV+XB4borEsnAYQchn00XSgTAWKDkEqv+K8KevjbzmofK6hfJ9TZIlpj2N0xQpazy7PiRQiWHqzWg==",
+      "dev": true
     },
     "core-util-is": {
       "version": "1.0.2",
@@ -3330,11 +3325,6 @@
       "integrity": "sha1-s2nW+128E+7PUk+RsHD+7cNXzzQ=",
       "dev": true
     },
-    "deepmerge": {
-      "version": "1.5.2",
-      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-1.5.2.tgz",
-      "integrity": "sha512-95k0GDqvBjZavkuvzx/YqVLv/6YYa17fz6ILMSf7neqQITCPbnfEnQvEgMPNjH4kgobe7+WIL0yJEHku+H3qtQ=="
-    },
     "default-gateway": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/default-gateway/-/default-gateway-4.2.0.tgz",
@@ -3711,19 +3701,6 @@
       "integrity": "sha512-81p6DZ/XmHDD7O0ITJMa7ESo9bSCfE+v3Fny3MIYR0y77xmhoriu2ShNOLXcPS4eowF6dkxw6d2QqxTkS3DjBg==",
       "dev": true
     },
-    "element-ui": {
-      "version": "2.13.2",
-      "resolved": "https://registry.npmjs.org/element-ui/-/element-ui-2.13.2.tgz",
-      "integrity": "sha512-r761DRPssMPKDiJZWFlG+4e4vr0cRG/atKr3Eqr8Xi0tQMNbtmYU1QXvFnKiFPFFGkgJ6zS6ASkG+sellcoHlQ==",
-      "requires": {
-        "async-validator": "1.8.5",
-        "babel-helper-vue-jsx-merge-props": "2.0.3",
-        "deepmerge": "1.5.2",
-        "normalize-wheel": "1.0.1",
-        "resize-observer-polyfill": "1.5.1",
-        "throttle-debounce": "1.1.0"
-      }
-    },
     "elliptic": {
       "version": "6.5.3",
       "resolved": "https://registry.npmjs.org/elliptic/-/elliptic-6.5.3.tgz",
@@ -6945,11 +6922,6 @@
         "sort-keys": "1.1.2"
       }
     },
-    "normalize-wheel": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/normalize-wheel/-/normalize-wheel-1.0.1.tgz",
-      "integrity": "sha1-rsiGr/2wRQcNhWRH32Ls+GFG7EU="
-    },
     "npm-run-path": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-2.0.2.tgz",
@@ -8061,7 +8033,8 @@
     "regenerator-runtime": {
       "version": "0.11.1",
       "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz",
-      "integrity": "sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg=="
+      "integrity": "sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg==",
+      "dev": true
     },
     "regenerator-transform": {
       "version": "0.14.4",
@@ -8275,11 +8248,6 @@
       "integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=",
       "dev": true
     },
-    "resize-observer-polyfill": {
-      "version": "1.5.1",
-      "resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
-      "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg=="
-    },
     "resolve": {
       "version": "1.17.0",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.17.0.tgz",
@@ -9655,11 +9623,6 @@
         "thenify": "3.3.1"
       }
     },
-    "throttle-debounce": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/throttle-debounce/-/throttle-debounce-1.1.0.tgz",
-      "integrity": "sha512-XH8UiPCQcWNuk2LYePibW/4qL97+ZQ1AN3FNXwZRBNPPowo/NRU5fAlDCSNBJIYCKbioZfuYtMhG4quqoJhVzg=="
-    },
     "through": {
       "version": "2.3.8",
       "resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz",

src/modules/index.js

@@ -2,9 +2,11 @@
 /* 模块基于 element-ui，一定在 element-ui后加载 */
 
 import ExamModule from './exam-module'
+import PayModule from './pay-module'
 
 const components = [
-  ExamModule
+  ExamModule,
+  PayModule
 ]
 
 const install = function (Vue, opts = {}) {
@@ -20,5 +22,6 @@ if (typeof window !== 'undefined' && window.Vue) {
 
 export default {
   install,
-  ExamModule
+  ExamModule,
+  PayModule
 }

src/modules/pay-module/action/PayAction.js

+import BaseACTION from '@/action/base_action'
+import { Pay } from '../api'
+export default class PayAction extends BaseACTION {
+  getOrderId(obj) {
+    return Pay.getOrderId(obj).then(res => res)
+  }
+}

src/modules/pay-module/action/index.js

+import PayAction from './PayAction'
+
+const Pay = new PayAction()
+
+export default Pay

src/modules/pay-module/api/index.js

+import PayAPI from './pay_api'
+
+const Pay = new PayAPI(webConf)
+
+export {
+  Pay
+}

src/modules/pay-module/api/pay_api.js

+import BaseAPI from '@/api/base_api'
+export default class Pay extends BaseAPI {
+  getOrderId = (obj) => this.post('/v2/mall/order/pre', obj, { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } })
+}

src/modules/pay-module/assets/languages/en.json

+{
+  "PayModule": {
+    "DiscussList": {
+      "answers": "Answers",
+      "votes": "Votes",
+      "noData": "No discussion"
+    },
+    "DiscussDetail": {
+      "title": "Problem details",
+      "like": "Like",
+      "discuss": "Discuss",
+      "reply": "Reply",
+      "delete": "Delete",
+      "send": "Send",
+      "noAnswer": "No answer",
+      "deleteSuccess": "Delete success",
+      "answering": "Answer"
+    }
+  }
+}

src/modules/pay-module/assets/languages/index.js

+import Cookies from 'js-cookie'
+import VueI18n from 'vue-i18n'
+import language from './language'
+// import zhCNLocale from 'element-ui/lib/locale/lang/zh-CN'
+// import enLocale from 'element-ui/lib/locale/lang/en'
+
+export default () => {
+  let _locale = 'zh-CN'
+  /* 国际化初始化 */
+  const _defaultLocale = 'zh-CN'
+  const _lang = Cookies.get('lang') || window.navigator.language || window.navigator.userLanguage || ''
+  if (_lang) {
+    if (language[_lang]) {
+      _locale = _lang
+    } else {
+      let flag = true
+      /* 做一下 兼容性处理 */
+      for (const k in language) {
+        const reg = new RegExp(k, 'gi')
+        if (reg.test(_lang)) {
+          _locale = k
+          flag = false
+          break
+        }
+      }
+      if (flag) {
+        /* 当前语言版本 - 不再我们的语言库中，那么默认 en */
+        _locale = _defaultLocale
+        Cookies.set('lang', _defaultLocale, { expires: 30, domain: '.ezijing.com' })
+      }
+    }
+  }
+  return new VueI18n({
+    locale: _locale, // 定义默认语言为中文
+    messages: {
+      'zh-CN': Object.assign(require('./zh-CN.json')),
+      en: Object.assign(require('./en.json'))
+    }
+  })
+}

src/modules/pay-module/assets/languages/language.js

+/* 定义语言模型 - key 值定义 跟 languages i18n 中 保持一致 */
+const language = {
+  'zh-CN': { show: '语言', arr: [{ 'zh-CN': '中文' }, { en: 'English' }] },
+  en: { show: 'Language', arr: [{ 'zh-CN': '中文' }, { en: 'English' }] }
+}
+
+export default language

src/modules/pay-module/assets/languages/zh-CN.json

+{
+  "PayModule": {
+    "DiscussList": {
+      "answers": "回答",
+      "votes": "投票",
+      "noData": "暂无相关评论"
+    },
+    "DiscussDetail": {
+      "title": "问题详情",
+      "like": "点赞",
+      "discuss": "讨论",
+      "reply": "回复",
+      "delete": "删除",
+      "send": "发送",
+      "noAnswer": "暂无回答",
+      "deleteSuccess": "删除成功",
+      "answering": "回答问题"
+    }
+  }
+}

src/modules/pay-module/index.js

+import './index.scss'
+import PayH5 from './src/PayH5.vue'
+
+const components = [
+  PayH5
+]
+
+const install = function (Vue, opts = {}) {
+  /* 存在国际化 */
+  if (opts.i18n) {
+    const msgs = opts.i18n.messages
+    for (const k in msgs) {
+      opts.i18n.setLocaleMessage(k, Object.assign(msgs[k], require('./assets/languages/' + k + '.json')))
+    }
+  }
+
+  components.forEach(component => {
+    Vue.component(component.name, component)
+  })
+}
+
+/* istanbul ignore if */
+if (typeof window !== 'undefined' && window.Vue) {
+  install(window.Vue)
+}
+
+export default {
+  install,
+  PayH5
+}

src/modules/pay-module/index.scss

+
+/* Extra small devices (portrait phones, less than 576px) */
+@media (max-width: 575px) {}
+
+/* Small devices (landscape phones, 576px and up) */
+@media (min-width: 576px) and (max-width: 767px) {}
+
+/* Medium devices (tablets, 768px and up) */
+@media (min-width: 768px) and (max-width: 991px) {}
+
+/* Large devices (desktops, 992px and up) */
+@media (min-width: 992px) and (max-width: 1199px) {}
+
+/* Extra large devices (large desktops, 1200px and up) */
+@media (min-width: 1200px) {}

src/modules/pay-module/src/PayH5.vue

+<template>
+  <!-- 暂时无用 -->
+  <div class="pay-box"></div>
+</template>
+<script>
+import Pay from '../action'
+export default {
+  name: 'PayH5',
+  components: {},
+  data () {
+    const _this = this
+    return {
+      isCard: false,
+      opaKey: ['A', 'B', 'C', 'D', 'E', 'F', 'G'],
+      remainingTime: '01:00:00',
+      currentNum: 1,
+      isAnalysis: false,
+      swiperOptions: {
+        observer: true,
+        on: {
+          slideChangeTransitionStart: function() {
+            document.getElementById('bottom-view').scrollTop = 0
+            _this.isAnalysis = false
+            _this.currentNum = this.activeIndex + 1
+          }
+        }
+      },
+      questionsData: {
+        questions: []
+      },
+      requestData: {},
+      requestData2: {},
+      clockCount: null,
+      isExamEnd: true,
+      // examIsShow: false,
+      isExamSubPop: false,
+      timePopIsShow: false,
+      initTime: null,
+      cache: null
+    }
+  },
+  props: {
+    requestParam: {
+      type: Object,
+      required: false,
+      default () {
+        return {
+          product_id: '', // 提前设定
+          open_id: '', // 通过微信授权获取
+          prepay_id: '', // 通过调用接口获取
+          app_id: '', // 提前设定
+          app_secret: '' // 提前设定
+        }
+      }
+    }
+  },
+  beforeDestroy() {
+  },
+  mounted () {
+    /* 判别是否引入JSSDK */
+    // if (typeof WeixinJSBridge === 'undefined') {
+    //   console.log('尚未引入微信JSSDK或JSSDK未执行')
+    //   if (document.addEventListener) {
+    //     document.addEventListener('WeixinJSBridgeReady', this.onBridgeReady.bind(this), false)
+    //   } else if (document.attachEvent) {
+    //     document.attachEvent('WeixinJSBridgeReady', this.onBridgeReady.bind(this))
+    //     document.attachEvent('onWeixinJSBridgeReady', this.onBridgeReady.bind(this))
+    //   }
+    // } else {
+    //   this.onBridgeReady()
+    // }
+    this.onBridgeReady()
+  },
+  methods: {
+    onBridgeReady () {
+      this.VueEvent.$off('pay-wx-h5').$on('pay-wx-h5', (obj) => {
+        const _callback = obj.callback || function () {}
+        const _obj = this.goToPay()
+        _callback(_obj)
+      })
+    },
+    goToPay () {
+      const obj = { code: 0, msg: '', data: {} }
+      if (!this.requestParam.product_id) {
+        obj.code = 3001
+        obj.msg = '没有商品ID'
+        return obj
+      }
+      if (!this.requestParam.open_id) {
+        obj.code = 3002
+        obj.msg = '没有小程序用户openid'
+        return obj
+      }
+      return Pay.getOrderId(this.requestParam).then(res => {
+        obj.data = res
+        this.wxWakeUpToPay()
+        // return
+      }).catch(e => {
+        obj.code = 5001
+        obj.msg = e.message
+        return obj
+      })
+    },
+    wxWakeUpToPay () {
+      /* 直接调用微信支付 */
+      const timestamp = parseInt(new Date().getTime() / 1000)
+      const noncestr = parseInt(Math.random() * 10000000000000000)
+      WeixinJSBridge.invoke(
+        'getBrandWCPayRequest', {
+          appId: this.requestParam.app_id, // 公众号名称，由商户传入
+          timeStamp: timestamp + '', // 时间戳，自1970年以来的秒数
+          nonceStr: noncestr + '', // 随机串
+          package: 'prepay_id=' + this.requestParam.prepay_id,
+          signType: 'MD5', // 微信签名方式：
+          paySign: '70EA570631E4BB79628FBCA90534C63FF7FADD89' // 微信签名
+        },
+        function (res) {
+          if (res.err_msg === 'get_brand_wcpay_request:ok') {
+            // 使用以上方式判断前端返回,微信团队郑重提示：
+            // res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
+          }
+        }
+      )
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+
+</style>

src/pages/pay/index.vue

 <template>
   <div>
-    <van-button type="primary">默认按钮</van-button>
+    <van-button type="primary" @click="goPay">默认按钮</van-button>
+    <pay-h5 :requestParam="requestParam"></pay-h5>
   </div>
 </template>
 <script>
@@ -11,6 +12,13 @@ export default {
   },
   data() {
     return {
+      requestParam: {
+        product_id: '', // 提前设定
+        open_id: '', // 通过微信授权获取
+        prepay_id: '', // 通过调用接口获取
+        app_id: '', // 提前设定
+        app_secret: '' // 提前设定
+      }
     }
   },
   mounted() {
@@ -22,6 +30,14 @@ export default {
       api.getGoodsDetails('6682927830365372416').then(res => {
         console.log(res)
       })
+    },
+    goPay () {
+      this.VueEvent.$emit('pay-wx-h5', {
+        data: {},
+        callback: function (obj) {
+          console.log(obj)
+        }
+      })
     }
   }
 }