初始化项目，联调创建订单，订单详情，预支付接口

package.json

@@ -3,37 +3,27 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "serve": "vue-cli-service serve",
-    "build": "vue-cli-service build",
-    "lint": "vue-cli-service lint"
+    "dev": "cross-env VUE_APP_ENV='local' vue-cli-service serve",
+    "test": "cross-env VUE_APP_ENV='test' vue-cli-service serve",
+    "build:dev": "cross-env VUE_APP_ENV='dev' vue-cli-service build",
+    "build:test": "cross-env VUE_APP_ENV='test' vue-cli-service build",
+    "build:uat": "cross-env VUE_APP_ENV='uat' vue-cli-service build",
+    "build:prod": "cross-env VUE_APP_ENV='prod' vue-cli-service build",
+    "analyz": "VUE_APP_ENV=prod npm_config_report=true npm run build"
   },
   "dependencies": {
+    "axios": "^0.19.1",
     "core-js": "^3.4.4",
-    "vue": "^2.6.10"
+    "vue": "^2.6.10",
+    "vue-router": "^3.1.5",
+    "weixin-js-sdk": "^1.4.0-test"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "^4.1.0",
-    "@vue/cli-plugin-eslint": "^4.1.0",
     "@vue/cli-service": "^4.1.0",
-    "babel-eslint": "^10.0.3",
-    "eslint": "^5.16.0",
-    "eslint-plugin-vue": "^5.0.0",
+    "cross-env": "^6.0.3",
     "vue-template-compiler": "^2.6.10"
   },
-  "eslintConfig": {
-    "root": true,
-    "env": {
-      "node": true
-    },
-    "extends": [
-      "plugin:vue/essential",
-      "eslint:recommended"
-    ],
-    "rules": {},
-    "parserOptions": {
-      "parser": "babel-eslint"
-    }
-  },
   "browserslist": [
     "> 1%",
     "last 2 versions"

src/App.vue

 <template>
   <div id="app">
-    <img alt="Vue logo" src="./assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
+    <router-view></router-view>
   </div>
 </template>
 
 <script>
-import HelloWorld from './components/HelloWorld.vue'
 
 export default {
   name: 'app',
-  components: {
-    HelloWorld
-  }
 }
 </script>
 

src/index.vue

+<template>
+    <section>
+        <button @click="createOrder" >点击创建订单</button>
+        <div class="detailsAndBuy" v-show="orderId">
+            <div>
+                <p>订单详情</p>
+                <p>商品名：{{orderDetails.goodsLabel}}</p>
+                <p>单价：{{orderDetails.price}}</p>
+                <p>数量：{{orderDetails.quantity}}</p>
+                <p>总价：{{orderDetails.totalFee}}</p>
+                <p>付款状态：{{orderDetails.status}}</p>
+            </div>
+            <button class="buy" @click="goPrePay">购买</button>
+        </div>
+    </section>
+</template>
+
+<script>
+    export default {
+        name: "index.vue",
+        data() {
+            return {
+                token: '08A7A6D8AA224AB7BC2E7BC44D44F34E',
+                orderId: null,
+                prePayId: null,
+                isDisabled: false,
+                orderDetails: {}
+            }
+        },
+        mounted() {
+
+        },
+        methods: {
+            createOrder() {
+                if(this.isDisabled) {
+                    alert('订单已创建');
+                    return;
+                }
+                const data = {
+                    goodsId: 123,
+                    goodsVersion: 1,
+                    price: 0.01,
+                    quantity: 1
+                }
+                this.axios(
+                    {
+                        method: 'POST',
+                        headers: {
+                            token: this.token,
+                        },
+                        url: `${this.APIDOMAIN}/trade/center/order`,
+                        data: data
+                    }
+                ).then((res)=>{
+                    if(res.data.code == "000000") {
+                       this.orderId = res.data.data;
+                       this.isDisabled = true;
+                       this.getOrderDetails();
+                    }
+                }).catch((res)=>{
+                    //do somethings
+                })
+            },
+            getOrderDetails() {
+                this.axios(
+                    {
+                        method: 'GET',
+                        headers: {
+                            token: this.token,
+                        },
+                        url: `${this.APIDOMAIN}/trade/center/order/${this.orderId}`,
+                    }
+                ).then((res)=>{
+                    if(res.data.code == "000000") {
+                        this.orderDetails = res.data.data
+                    }
+                }).catch((res)=>{
+                    //do somethings
+                })
+            },
+            goPrePay() {
+                this.axios(
+                    {
+                        method: 'POST',
+                        headers: {
+                            token: this.token,
+                        },
+                        url: `${this.APIDOMAIN}/trade/center/prepay`,
+                        data: {
+                            payChannel: 1,
+                            orderId: this.orderId
+                        }
+                    }
+                ).then((res)=>{
+                    if(res.data.code == "000000") {
+                        this.prePayId = res.data.data;
+                    }
+                }).catch((res)=>{
+                    //do somethings
+                })
+            },
+
+        },
+    }
+</script>
+
+<style scoped>
+    input {
+        margin: 0 auto;
+        border: 1px solid #000;
+        margin-bottom: 10px;
+    }
+    button {
+        display: block;
+        margin: 0 auto;
+        background: #42b983;
+        color: #fff;
+    }
+</style>
\ No newline at end of file

src/main.js

 import Vue from 'vue'
 import App from './App.vue'
 
-Vue.config.productionTip = false
+import router from './router'
+import axios from 'axios'
+Vue.prototype.axios = axios
+const host = {
+  'local':{
+    'domain':'https://dev-sc.yunqueyi.com'
+  },
+  'dev':{
+    'domain':'https://dev-sc.yunqueyi.com'
+  },
+  'test':{
+    'domain':'https://test1-sc.yunqueyi.com'
+  },
+  'uat':{
+    'domain':'https://uat-sc.yunqueyi.com'
+  },
+  'prod':{
+    'domain':'https://sc.yunqueyi.com'
+  }
+}
+
+Vue.prototype.APIDOMAIN = host[process.env.VUE_APP_ENV].domain;
+Vue.config.productionTip = false;
+
+import wechatApi from './wechatApi'
+Vue.prototype.wechatApi = wechatApi;
+
 
 new Vue({
   render: h => h(App),
+  router,
+  axios
 }).$mount('#app')

src/router.js

+import Vue from 'vue'
+import Router from 'vue-router'
+
+Vue.use(Router)
+
+
+//console.log('process.env.BASE_URL',process.env.BASE_URL)
+
+
+const router = new Router({
+    mode: 'history',
+    base: '/pica-wx-pay/',
+    routes: [{
+        path: '/',
+        name: 'index',
+        component: () => import(/* webpackChunkName: "lazy" */ './index.vue'),
+        meta: {
+            title: '首页',
+        }
+    }]
+});
+
+export default router
\ No newline at end of file

src/wechatApi.js

+import Vue from 'vue'
+
+export default {
+  // 调用微信jdk
+  getWechatSign(callback){
+    let axios = Vue.prototype.axios;
+    let wx = Vue.prototype.wx;
+    axios.get('https://sc.yunqueyi.com/wechats/signs?url='+location.href).then(res=>{
+      let signMap=res.data.data.signMap;
+      wx.config({
+        debug: false,
+        appId: 'wxcf79dbdc24cb684b',
+        timestamp: signMap.timestamp,
+        nonceStr: signMap.nonceStr,
+        signature: signMap.signature,
+        jsApiList: ['chooseWXPay','hideOptionMenu']
+      });
+      wx.ready(()=> {
+        wx.checkJsApi({
+          jsApiList: ['chooseWXPay','hideOptionMenu']
+        });
+        wx.hideOptionMenu();
+
+        callback();
+
+      });
+
+    })
+  }
+}
+