增加demo页面

.config.dev.js

 module.exports = {
   domain: 'dev.ezijing.com',
-  url: 'https://x-learning2.ezijing.com/api',
+  url: 'https://web-pay.ezijing.com/api',
   webpack: {
     externals: {
       CKEDITOR: 'window.CKEDITOR',
@@ -33,6 +33,6 @@ module.exports = {
   },
   ProvidePlugin: {},
   others: {
-    loginUrl: 'https://login2.ezijing.com/xlearn/login/index'
+    loginUrl: 'https://login.ezijing.com/auth/login/index'
   }
 }

package-lock.json

@@ -6216,6 +6216,11 @@
       "integrity": "sha512-pZe//GGmwJndub7ZghVHz7vjb2LgC1m8B07Au3eYqeqv9emhESByMXxaEgkUkEqJe87oBbSniGYoQNIBklc7IQ==",
       "dev": true
     },
+    "js-cookie": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-2.2.1.tgz",
+      "integrity": "sha512-HvdH2LzI/EAZcUwA8+0nKNtWHqS+ZmijLA30RwZA0bo7ToCckjK5MkGhjED9KoRcXO6BaGI3I9UIzSA1FKFPOQ=="
+    },
     "js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",

package.json

@@ -73,6 +73,7 @@
     "core-js": "^3.6.5",
     "cross-env": "^7.0.2",
     "crypto-js": "^4.0.0",
+    "js-cookie": "^2.2.1",
     "qs": "^6.9.4",
     "vue": "^2.6.12",
     "vue-loader": "^15.9.3",

src/api/pay.js

+import httpRequest from '@/utils/axios'
+
+// 获取商品详情
+export function getProduct(productId) {
+  return httpRequest.get(`/api/pay/v1/product/detail/${productId}`)
+}
+
+// 创建微信支付订单
+export function createWxpayOrder(identity, productId, params) {
+  return httpRequest.get(`/api/pay/v1/wechat/qr/${identity}/${productId}`, { params })
+}
+
+// 创建支付宝支付订单
+export function createAlipayOrder(identity, productId) {
+  return httpRequest.get(`/api/pay/v1/product/detail/${productId}`)
+}
+
+// 创建支付宝支付订单
+export function getOrder(orderId) {
+  return httpRequest.get(`/api/pay/v1/order/status/${orderId}`)
+}

src/app.vue

@@ -3,3 +3,10 @@
     <router-view />
   </div>
 </template>
+
+<style lang="scss">
+* {
+  margin: 0;
+  padding: 0;
+}
+</style>

src/main.js

@@ -8,10 +8,10 @@ import App from './app.vue'
 // const before = new BeforeEnter()
 
 /* 导航守卫 */
-router.beforeEach((to, from, next) => {
-  // before.update(to, from, next)
-  next()
-})
+// router.beforeEach((to, from, next) => {
+//   before.update(to, from, next)
+//   next()
+// })
 
 Vue.prototype.msgCenter = new Vue()
 

src/pages/demo.vue

+<template>
+  <div class="product" v-if="loaded">
+    <div class="tips">微信支付-H5-demo</div>
+    <div class="product-item">
+      <div class="product-item-pic">
+        <img :src="product.product_image" />
+      </div>
+      <div class="product-item-content">
+        <p class="name">{{ product.product_name }}</p>
+        <p class="price">
+          ¥<span>{{ product.price / 100 }}</span>
+        </p>
+      </div>
+    </div>
+    <div class="button-buy" @click="handleBuy">立即购买</div>
+  </div>
+</template>
+
+<script>
+import Cookies from 'js-cookie'
+import * as api from '@/api/pay'
+export default {
+  data() {
+    return {
+      productId: '6726725135505555456',
+      product: {},
+      loaded: false
+    }
+  },
+  methods: {
+    // 获取商品详情
+    getProduct() {
+      this.loaded = false
+      api.getProduct(this.productId).then(response => {
+        this.product = response.product
+        this.loaded = true
+      })
+    },
+    // 创建订单并支付
+    handleBuy() {
+      api.createWxpayOrder('ezijing', this.productId, { type: 8 }).then(response => {
+        console.log(response)
+        window.alert(response.msg)
+      })
+    }
+  },
+  beforeMount() {
+    Cookies.set(
+      'TGC',
+      'VEdULTg1Ny1TTlY5QnF5Q2xocW9QenBLTFg2V0lQWUxORXpqOXc3aVBLS3ZBQVlZN1ZJTUhvLTVCSy1uOU9ieGxqWU5JbGhQTS1NLWV6aWppbmctcGFzc3BvcnQtNjRjNDQ2NWI1Zi1xdjZtYkBAQDE3Mi4xNy41LjczQEBATW96aWxsYS81LjAgKE1hY2ludG9zaDsgSW50ZWwgTWFjIE9TIFggMTBfMTNfNikgQXBwbGVXZWJLaXQvNTM3LjM2IChLSFRNTCwgbGlrZSBHZWNrbykgQ2hyb21lLzg3LjAuNDI4MC44OCBTYWZhcmkvNTM3LjM2QEBANjc0NzcxMjkwOTg4ODk3ODk0NA=='
+    )
+    this.getProduct()
+  }
+}
+</script>
+
+<style lang="scss">
+body {
+  background-color: #f6f6f6;
+}
+.tips {
+  font-size: 18px;
+  font-weight: 600;
+  line-height: 60px;
+  color: #666;
+  text-align: center;
+  background-color: #eef6fd;
+}
+.product {
+  max-width: 750px;
+  margin: 0 auto;
+}
+.product-item {
+  display: flex;
+  background-color: #fff;
+  padding: 20px;
+  margin-bottom: 20px;
+}
+.product-item-pic {
+  width: 130px;
+  height: 130px;
+  margin-right: 20px;
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+}
+.product-item-content {
+  .name {
+    color: #3c3c3c;
+  }
+  .price {
+    margin-top: 10px;
+    font-weight: 600;
+    color: #ff615c;
+    span {
+      font-size: 20px;
+    }
+  }
+}
+
+.button-buy {
+  display: block;
+  height: 42px;
+  line-height: 42px;
+  color: #ffffff;
+  text-align: center;
+  border-radius: 5px;
+  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #43c750), color-stop(1, #31ab40));
+  border: 1px solid #2e993c;
+  box-shadow: 0 1px 0 0 #69d273 inset;
+  cursor: pointer;
+}
+</style>

src/pages/wxpay/pc.vue

+<template>
+  <div></div>
+</template>
+
+<script>
+export default {}
+</script>

src/router/routes.js

 export default [
   { path: '*', redirect: '/wxpay/h5' },
-  { path: '/wxpay/h5', component: () => import('@/pages/wxpay/h5') }
+  { path: '/wxpay/h5', component: () => import('@/pages/wxpay/h5') },
+  // { path: '/wxpay/pc', component: () => import('@/pages/wxpay/pc') },
+  { path: '/demo', component: () => import('@/pages/demo') }
 ]