Home Verkennen Help
Inloggen
shop
/
offlinepay
Volgen 2
Ster 0
Vork 0
Bestanden Kwesties 0 Pull-aanvragen 0 Wiki
Bladeren bron

1

xialei 1 jaar geleden
commit
ce617e7c7e
28 gewijzigde bestanden met toevoegingen van 18461 en 0 verwijderingen
Zij-aan-zij weergave Toon Diff Stats
  1. 23 0
      .gitignore
  2. 24 0
      README.md
  3. 5 0
      babel.config.js
  4. 19 0
      jsconfig.json
  5. 8891 0
      package-lock.json
  6. 51 0
      package.json
  7. 9 0
      postcss.config.js
  8. BIN
      public/favicon.ico
  9. 19 0
      public/index.html
  10. 40 0
      src/App.vue
  11. 100 0
      src/api/index.js
  12. 44 0
      src/api/service.js
  13. BIN
      src/assets/cxb.png
  14. BIN
      src/assets/logo.png
  15. BIN
      src/assets/关闭.png
  16. BIN
      src/assets/形状结合.png
  17. BIN
      src/assets/支付成功.png
  18. BIN
      src/assets/邀请好友.png
  19. 628 0
      src/components/HelloWorld.vue
  20. 342 0
      src/components/OpenPension.vue
  21. 695 0
      src/components/OrderPay.vue
  22. 329 0
      src/components/Success.vue
  23. 93 0
      src/components/SuccessFully.vue
  24. 509 0
      src/components/UserLogin.vue
  25. 37 0
      src/main.js
  26. 77 0
      src/router/index.js
  27. 4 0
      vue.config.js
  28. 6522 0
      yarn.lock

+ 23 - 0
.gitignore
Bestand weergeven 

@@ -0,0 +1,23 @@
1 
+.DS_Store
2 
+node_modules
3 
+/dist
4 
+
5 
+
6 
+# local env files
7 
+.env.local
8 
+.env.*.local
9 
+
10 
+# Log files
11 
+npm-debug.log*
12 
+yarn-debug.log*
13 
+yarn-error.log*
14 
+pnpm-debug.log*
15 
+
16 
+# Editor directories and files
17 
+.idea
18 
+.vscode
19 
+*.suo
20 
+*.ntvs*
21 
+*.njsproj
22 
+*.sln
23 
+*.sw?

+ 24 - 0
README.md
Bestand weergeven 

@@ -0,0 +1,24 @@
1 
+# serve
2 
+
3 
+## Project setup
4 
+```
5 
+npm install
6 
+```
7 
+
8 
+### Compiles and hot-reloads for development
9 
+```
10 
+npm run serve
11 
+```
12 
+
13 
+### Compiles and minifies for production
14 
+```
15 
+npm run build
16 
+```
17 
+
18 
+### Lints and fixes files
19 
+```
20 
+npm run lint
21 
+```
22 
+
23 
+### Customize configuration
24 
+See [Configuration Reference](https://cli.vuejs.org/config/).

+ 5 - 0
babel.config.js
Bestand weergeven 

@@ -0,0 +1,5 @@
1 
+module.exports = {
2 
+  presets: [
3 
+    '@vue/cli-plugin-babel/preset'
4 
+  ]
5 
+}

+ 19 - 0
jsconfig.json
Bestand weergeven 

@@ -0,0 +1,19 @@
1 
+{
2 
+  "compilerOptions": {
3 
+    "target": "es5",
4 
+    "module": "esnext",
5 
+    "baseUrl": "./",
6 
+    "moduleResolution": "node",
7 
+    "paths": {
8 
+      "@/*": [
9 
+        "src/*"
10 
+      ]
11 
+    },
12 
+    "lib": [
13 
+      "esnext",
14 
+      "dom",
15 
+      "dom.iterable",
16 
+      "scripthost"
17 
+    ]
18 
+  }
19 
+}

File diff suppressed because it is too large
+ 8891 - 0
package-lock.json


+ 51 - 0
package.json
Bestand weergeven 

@@ -0,0 +1,51 @@
1 
+{
2 
+  "name": "serve",
3 
+  "version": "0.1.0",
4 
+  "private": true,
5 
+  "scripts": {
6 
+    "serve": "vue-cli-service serve",
7 
+    "build": "vue-cli-service build",
8 
+    "lint": "vue-cli-service lint"
9 
+  },
10 
+  "dependencies": {
11 
+    "aliyun_numberauthsdk_web": "^2.0.8",
12 
+    "axios": "^1.3.5",
13 
+    "core-js": "^3.8.3",
14 
+    "element-ui": "^2.15.13",
15 
+    "vconsole": "^3.15.0",
16 
+    "vue": "^2.6.14",
17 
+    "vue-router": "^3.6.5",
18 
+    "weixin-js-sdk": "^1.6.0"
19 
+  },
20 
+  "devDependencies": {
21 
+    "@babel/core": "^7.12.16",
22 
+    "@babel/eslint-parser": "^7.12.16",
23 
+    "@vue/cli-plugin-babel": "~5.0.0",
24 
+    "@vue/cli-plugin-eslint": "~5.0.0",
25 
+    "@vue/cli-service": "~5.0.0",
26 
+    "eslint": "^7.32.0",
27 
+    "eslint-plugin-vue": "^8.0.3",
28 
+    "lib-flexible": "^0.3.2",
29 
+    "postcss-pxtorem": "^6.0.0",
30 
+    "vue-template-compiler": "^2.6.14"
31 
+  },
32 
+  "eslintConfig": {
33 
+    "root": true,
34 
+    "env": {
35 
+      "node": true
36 
+    },
37 
+    "extends": [
38 
+      "plugin:vue/essential",
39 
+      "eslint:recommended"
40 
+    ],
41 
+    "parserOptions": {
42 
+      "parser": "@babel/eslint-parser"
43 
+    },
44 
+    "rules": {}
45 
+  },
46 
+  "browserslist": [
47 
+    "> 1%",
48 
+    "last 2 versions",
49 
+    "not dead"
50 
+  ]
51 
+}

+ 9 - 0
postcss.config.js
Bestand weergeven 

@@ -0,0 +1,9 @@
1 
+module.exports = {
2 
+    plugins: {
3 
+      'postcss-pxtorem': {
4 
+        rootValue: 37.5, // 以设计稿宽度为 375px 为基准，因为在 flexible.js 中设置了 html 的 font-size 为 37.5px
5 
+        propList: ['*'],
6 
+      },
7 
+    },
8 
+  };
9 
+

BIN
public/favicon.ico
Bestand weergeven


+ 19 - 0
public/index.html
Bestand weergeven 

@@ -0,0 +1,19 @@
1 
+<!DOCTYPE html>
2 
+<html lang="">
3 
+  <head>
4 
+    <meta charset="utf-8">
5 
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
6 
+    <!-- <meta name="viewport" content="width=device-width,initial-scale=1.0"> -->
7 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
8 
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
9 
+    <!-- <title><%= htmlWebpackPlugin.options.title %></title> -->
10 
+    <title>养老金账号</title>
11 
+  </head>
12 
+  <body>
13 
+    <noscript>
14 
+      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
15 
+    </noscript>
16 
+    <div id="app"></div>
17 
+    <!-- built files will be auto injected -->
18 
+  </body>
19 
+</html>

+ 40 - 0
src/App.vue
Bestand weergeven 

@@ -0,0 +1,40 @@
1 
+<template>
2 
+  <div id="app">
3 
+    <!-- <img alt="Vue logo" src="./assets/logo.png"> -->
4 
+    <!-- <HelloWorld msg="Welcome to Your Vue.js App"/> -->
5 
+    <!-- <OpenPension msg="Welcome to Your Vue.js App"/> -->
6 
+    <router-view />
7 
+  </div>
8 
+</template>
9 
+
10 
+<script>
11 
+// import HelloWorld from './components/HelloWorld.vue'
12 
+// import OpenPension from './components/OpenPension.vue'
13 
+
14 
+export default {
15 
+  name: 'App',
16 
+  components: {
17 
+    // HelloWorld,
18 
+    // OpenPension
19 
+  },
20 
+  created(){
21 
+    console.log('微信', this.$isWechat());
22 
+    console.log('支付宝', this.$isAlipay());
23 
+  }
24 
+}
25 
+</script>
26 
+
27 
+<style>
28 
+#app {
29 
+  font-family: Avenir, Helvetica, Arial, sans-serif;
30 
+  -webkit-font-smoothing: antialiased;
31 
+  -moz-osx-font-smoothing: grayscale;
32 
+  /* text-align: center;
33 
+  color: #2c3e50;
34 
+  margin-top: 60px; */
35 
+}
36 
+* {
37 
+    margin: 0;
38 
+    padding: 0;
39 
+  }
40 
+</style>

+ 100 - 0
src/api/index.js
Bestand weergeven 

@@ -0,0 +1,100 @@
1 
+import {Service} from './service'
2 
+
3 
+export function wxcheck(data){
4 
+    return Service({
5 
+        url: '/api/wechat/check',
6 
+        method: "get",
7 
+        params: {openid: data}
8 
+    })
9 
+}
10 
+export function alicheck(data){
11 
+    return Service({
12 
+        url: '/api/ali/check?',
13 
+        method: "get",
14 
+        params: {user_id: data}
15 
+    })
16 
+}
17 
+export function wechatAuthorization(data){
18 
+    return Service({
19 
+        url: '/api/wechat/wechatAuthorization',
20 
+        method: "get",
21 
+        params: {code: data}
22 
+    })
23 
+}
24 
+export function aliSign(data){
25 
+    return Service({
26 
+        url: '/api/ali/aliSign',
27 
+        method: "get",
28 
+        params: {code: data.code, type: data.type}
29 
+    })
30 
+}
31 
+export function getAuthToken(data){
32 
+    return Service({
33 
+        url: '/api/get_auth_token',
34 
+        method: "post",
35 
+        data: data
36 
+    })
37 
+}
38 
+export function getPhoneWithToken(data){
39 
+    return Service({
40 
+        url: '/api/get_phone_with_token',
41 
+        method: "post",
42 
+        data: data
43 
+    })
44 
+}
45 
+export function binding(data){
46 
+    return Service({
47 
+        url: '/api/third/binding',
48 
+        method: "get",
49 
+        params: {phone: data.phone, sms: data.sms, sms_code: data.sms_code, third_user_id: data.third_user_id, type: data.type}
50 
+    })
51 
+}
52 
+export function getMerInfo(data){
53 
+    return Service({
54 
+        url: '/api/merchant/get_mer_info',
55 
+        method: "get",
56 
+        params: {mer_id: data}
57 
+    })
58 
+}
59 
+export function createOrder(data){
60 
+    return Service({
61 
+        url: '/api/merchant/createOrder',
62 
+        method: "post",
63 
+        data: data
64 
+    })
65 
+}
66 
+export function queryOrders(data){
67 
+    return Service({
68 
+        url: '/api/merchant/queryOrders',
69 
+        method: "post",
70 
+        data: data
71 
+    })
72 
+}
73 
+export function jsapiPay(data){
74 
+    return Service({
75 
+        url: '/api/merchant/jsapiPay',
76 
+        method: "post",
77 
+        data: data
78 
+    })
79 
+}
80 
+export function createAnnualOrder(data){
81 
+    return Service({
82 
+        url: '/api/user/create_annual_order',
83 
+        method: "post",
84 
+        data: data
85 
+    })
86 
+}
87 
+export function payUserAnnualOffline(data){
88 
+    return Service({
89 
+        url: '/api/pay_user_annual_offline',
90 
+        method: "post",
91 
+        data: data
92 
+    })
93 
+}
94 
+export function userPhoneLogOnCode(data){
95 
+    return Service({
96 
+        url: '/api/auth/verify',
97 
+        method: "post",
98 
+        data: data
99 
+    })
100 
+}

+ 44 - 0
src/api/service.js
Bestand weergeven 

@@ -0,0 +1,44 @@
1 
+import axios from 'axios'
2 
+// import { Message, Loading } from 'element-ui'
3 
+import { Message } from 'element-ui'
4 
+const ConfigBaseURL = 'https://app.bjtdba.com' //默认路径，这里也可以使用env来判断环境
5 
+// let loadingInstance = null //这里是loading
6 
+
7 
+export const Service = axios.create({
8 
+    timeout: 7000, // 请求超时时间
9 
+    baseURL: ConfigBaseURL,
10 
+    method: 'post',
11 
+    // headers: {
12 
+    //     'x-token': localStorage.getItem('token')
13 
+    // },
14 
+})
15 
+// 添加请求拦截器
16 
+Service.interceptors.request.use(config => {
17 
+    // loadingInstance = Loading.service({
18 
+    //     lock: true,
19 
+    //     text: 'loading...'
20 
+    // })
21 
+
22 
+    //判断接口
23 
+    if (config.url == '/api/user/create_annual_order') {
24 
+        config.headers = {
25 
+            "x-token": localStorage.getItem('token')
26 
+        }
27 
+    }
28 
+    return config
29 
+})
30 
+// 添加响应拦截器
31 
+Service.interceptors.response.use(response => {
32 
+    // loadingInstance.close()
33 
+    // console.log(response)
34 
+    return response.data
35 
+}, error => {
36 
+    console.log('TCL: error', error)
37 
+    const msg = error.Message !== undefined ? error.Message : ''
38 
+    Message({
39 
+        message: '网络错误' + msg,
40 
+        type: 'error',
41 
+        duration: 1 * 1000
42 
+    })
43 
+    // loadingInstance.close()
44 
+})

BIN
src/assets/cxb.png
Bestand weergeven


BIN
src/assets/logo.png
Bestand weergeven


BIN
src/assets/关闭.png
Bestand weergeven


BIN
src/assets/形状结合.png
Bestand weergeven


BIN
src/assets/支付成功.png
Bestand weergeven


BIN
src/assets/邀请好友.png
Bestand weergeven


+ 628 - 0
src/components/HelloWorld.vue
Bestand weergeven 

@@ -0,0 +1,628 @@
1 
+<template>
2 
+  <div id="pay">
3 
+    <!-- <div v-show="!authorStatus" class="pay-login">
4 
+      <img class="loginImg" src="https://cdn.bjtdba.com/vod/image/2023-04-17/20230417171633173.png" alt="">
5 
+      <div class="login-phone">
6 
+        <input type="number" value="" v-model="mobile" placeholder="请输入手机号" placeholder-style="color:#999;" oninput="if(value.length>11)value=value.slice(0,11)"/>
7 
+        <div class="get-code" @click="getCode">{{ getCodeText }}</div>
8 
+      </div>
9 
+      <div class="login-phone">
10 
+        <input type="number" value="" v-model="mobileCode" placeholder="请输入验证码" placeholder-style="color:#999;" />
11 
+      </div>
12 
+      <div class="login-btn" @click="bindPhone(mobile, 2)">登录</div>
13 
+    </div> -->
14 
+  </div>
15 
+</template>
16 
+
17 
+<script>
18 
+// import { PhoneNumberServer } from 'aliyun_numberauthsdk_web';
19 
+// getAuthToken, getPhoneWithToken, binding,
20 
+// import {wxcheck, wechatAuthorization, aliSign, alicheck, userPhoneLogOnCode} from '../api/index'
21 
+import {wechatAuthorization, aliSign, alicheck, userPhoneLogOnCode} from '../api/index'
22 
+
23 
+export default {
24 
+  name: 'HelloWorld',
25 
+  props: {
26 
+    msg: String
27 
+  },
28 
+  data() {
29 
+    return {
30 
+      userpay: null,
31 
+      userInfor: {},
32 
+      aliUserInfor: {},
33 
+      aliAccount: {},
34 
+      merContent: {
35 
+        mer_name: '',
36 
+        mer_banner: ''
37 
+      },
38 
+      paymentAmount: '',
39 
+      trade_type: '',
40 
+
41 
+      // authorStatus:true,
42 
+
43 
+      // mobile: "", // 手机号
44 
+      // mobileCode: '', // 验证码
45 
+      //   getCodeText: '获取验证码', // 获取验证码按钮文字
46 
+      //   getCodeisWaiting: false, // 获取验证码按钮状态
47 
+    }
48 
+  },
49 
+  created() {
50 
+    //获取参数
51 
+    this.userpay = this.parseParms();
52 
+    if (this.userpay != undefined) {
53 
+      localStorage.setItem('userpay', JSON.stringify(this.userpay));
54 
+    }
55 
+
56 
+
57 
+    //跳转微信授权登陆
58 
+    let local = window.location.href;
59 
+    if (local.split(':')[0] == 'http') {
60 
+      local = local.split(':')[0] + 's:' + local.split(':')[1]
61 
+    } else {
62 
+      local = window.location.href;
63 
+    }
64 
+    //微信跳转链接        // wx66f5f8def2b755da
65 
+    let wechatHrefurl = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" + 'wx6ac5b448b75117d9' +
66 
+        "&redirect_uri=" + encodeURIComponent(local) +
67 
+        "&response_type=code&scope=snsapi_userinfo&forcePopup=true&forceSnapShot=true&state=STATE#wechat_redirect";
68 
+
69 
+    //不是微信并且不是支付宝
70 
+    if (!this.$isWechat() && !this.$isAlipay()) {
71 
+      alert('请使用微信或支付宝扫码');
72 
+    }
73 
+    //判断是不是微信
74 
+    if (this.$isWechat()) {
75 
+      this.trade_type = "WX"
76 
+      if ((!this.userpay.code || this.userpay.code == "" || this.userpay.code == null) && localStorage.getItem('userInfor') != null) {
77 
+        this.userInfor = JSON.parse(localStorage.getItem('userInfor'));
78 
+        // console.log(this.userInfor.openid)
79 
+        if(this.userInfor.openid!=undefined){
80 
+          this.initWxConfig();
81 
+        }else{
82 
+          window.location.href = wechatHrefurl;
83 
+        }
84 
+      } else  if (!this.userpay.code || this.userpay.code == "" || this.userpay.code == null) {
85 
+        window.location.href = wechatHrefurl;
86 
+      } else {
87 
+        this.user()
88 
+      }
89 
+    }else if (this.$isAlipay()) {    //判断是不是支付宝
90 
+      this.trade_type = "ALI"
91 
+
92 
+      local = local.replace('#/', '');
93 
+      let aliHrefurl ="https://openauth.alipay.com/oauth2/publicAppAuthorize.htm?app_id=2021003191617008&scope=auth_user&redirect_uri=" +encodeURIComponent(local)
94 
+
95 
+      if ((!this.userpay.auth_code || this.userpay.auth_code == null || this.userpay.auth_code == "") && localStorage.getItem('aliAccount') != null) {
96 
+          this.aliAccount = JSON.parse(localStorage.getItem('aliAccount'));
97 
+          if(this.aliAccount.user_id!=undefined){
98 
+            this.initAliConfig( this.aliAccount.user_id);
99 
+          }else{
100 
+            window.location.href = aliHrefurl;
101 
+          }
102 
+
103 
+      } else if (!this.userpay.auth_code || this.userpay.auth_code == null || this.userpay.auth_code == "") {
104 
+        window.location.href = aliHrefurl;
105 
+      } else {
106 
+        this.aliUser()
107 
+      }
108 
+    }
109 
+  },
110 
+  // 引入支付宝jsapi
111 
+  mounted() {
112 
+    const s = document.createElement('script');
113 
+    s.type = 'text/javascript';
114 
+    s.src = 'https://gw.alipayobjects.com/as/g/h5-lib/alipayjsapi/3.1.1/alipayjsapi.min.js';
115 
+    document.body.appendChild(s);
116 
+    this.readys(() => {
117 
+      // alert('支付宝 H5 SDK 已初始化');
118 
+    });
119 
+    window.onload = () => {   //初始化产生一个全局变量 AlipayJSBridge
120 
+      this.readys()
121 
+    }
122 
+  },
123 
+  methods: {
124 
+    readys(callback) {
125 
+      if (window.AlipayJSBridge) {
126 
+        callback && callback();
127 
+      } else {
128 
+        document.addEventListener('AlipayJSBridgeReady', callback, false);
129 
+      }
130 
+    },
131 
+    getCode() {
132 
+      if (this.getCodeisWaiting) return;
133 
+
134 
+      if (!/^1[2-9]\d{9}$/.test(this.mobile)) {
135 
+        alert(!this.mobile ? '请输入手机号' : '请填写正确手机号码')
136 
+        return false;
137 
+      }
138 
+      this.getCodeText = "发送中..."
139 
+      this.getCodeisWaiting = true;
140 
+      userPhoneLogOnCode({phone: this.mobile}).then(res => {
141 
+        console.log(res);
142 
+        if (res.status == 200) {
143 
+          // alert('发送成功，请注意查收')
144 
+          this.setTimer();
145 
+        } else {
146 
+          alert(res.message)
147 
+          this.getCodeText = '获取验证码';
148 
+          this.getCodeisWaiting = false;
149 
+        }
150 
+      }).catch(res => {
151 
+        alert(res.message)
152 
+      })
153 
+    },
154 
+    setTimer() {
155 
+      clearInterval(this.Timer);
156 
+      let holdTime = 60;
157 
+      this.getCodeText = "重新获取(60)"
158 
+      this.Timer = setInterval(() => {
159 
+        if (holdTime <= 0) {
160 
+          this.getCodeisWaiting = false;
161 
+          this.getCodeText = "获取验证码"
162 
+          clearInterval(this.Timer);
163 
+          return;
164 
+        }
165 
+        this.getCodeText = "重新获取(" + holdTime + ")"
166 
+        holdTime--;
167 
+
168 
+      }, 1000)
169 
+    },
170 
+    user() {
171 
+        wechatAuthorization(this.userpay.code).then(res => {
172 
+          console.log(res);
173 
+          if (res.status == 200) {
174 
+            this.userInfor = res.data;
175 
+            localStorage.setItem('userInfor', JSON.stringify(this.userInfor));
176 
+            this.initWxConfig();
177 
+          }
178 
+        }).catch(res => {
179 
+          alert(res.message)
180 
+        })
181 
+
182 
+    },
183 
+    aliUser() {
184 
+        // console.log(this.userpay, this.userpay.code);
185 
+        aliSign({code: this.userpay.auth_code, type: "h5pay"}).then(res => {
186 
+
187 
+          if (res.status == 200) {
188 
+            this.aliUserInfor = res.data;
189 
+            localStorage.setItem('aliAccount', JSON.stringify(this.aliUserInfor));
190 
+            this.initAliConfig(res.data.user_id);
191 
+          }
192 
+        }).catch(res => {
193 
+          alert(res.message)
194 
+        })
195 
+
196 
+    },
197 
+    // 微信授权登录
198 
+    initWxConfig() {
199 
+      if (this.userpay.type == "hong") {
200 
+        // localStorage.setItem("token", res.data.token);
201 
+        this.$router.push({
202 
+          path: '/openPension',
203 
+          query: {userpay: this.userpay, userInfor: this.userInfor, aliAccount: this.aliAccount}
204 
+        });
205 
+      } else {
206 
+        this.$router.push({
207 
+          path: '/orderPay',
208 
+          // query: {userpay: this.userpay, userInfor: this.userInfor, aliAccount: this.aliAccount}
209 
+        });
210 
+      }
211 
+      /*******注释掉微信登录 - 测试能不解决扫码支付每次都需要授权问题********/
212 
+      // wxcheck(userOpenid).then(res => {
213 
+      //   console.log(res);
214 
+      //   // if(res.status == 400){
215 
+      //   //   // 未绑定手机号，获取token，绑定手机号
216 
+      //   //   this.getALToken();
217 
+      //   // }
218 
+      //   // if(res.status == 200){
219 
+      //     // 已绑定手机号，获取商户
220 
+      //     // this.getMer();
221 
+
222 
+      //     if(this.userpay.type == "hong"){
223 
+      //       // localStorage.setItem("token", res.data.token);
224 
+      //       this.$router.push({path: '/openPension', query: {userpay: this.userpay, userInfor: this.userInfor, aliAccount: this.aliAccount}});
225 
+      //     }else{
226 
+      //       this.$router.push({path: '/orderPay', query: {userpay: this.userpay, userInfor: this.userInfor, aliAccount: this.aliAccount }});
227 
+      //     }
228 
+
229 
+      //   // }
230 
+      // }).catch(res => {
231 
+      //   alert(res.message)
232 
+      // })
233 
+    },
234 
+    // 支付宝授权登录
235 
+    initAliConfig(userOpenid) {
236 
+      alicheck(userOpenid).then(res => {
237 
+        if (res.status == 200) {
238 
+
239 
+          // if(res.data.code == 400){
240 
+          //   // 未绑定手机号，获取token，绑定手机号
241 
+
242 
+          //   this.getALToken();
243 
+
244 
+          // }else{
245 
+          // 已绑定手机号，获取商户
246 
+          this.aliAccount = res.data.user;
247 
+          // this.getMer();
248 
+          if (this.userpay.type == "hong") {
249 
+            // localStorage.setItem("token", res.data.token);
250 
+            this.$router.push({
251 
+              path: '/openPension',
252 
+              query: {userpay: this.userpay, userInfor: this.userInfor, aliAccount: this.aliAccount}
253 
+            });
254 
+          } else {
255 
+            this.$router.push({
256 
+              path: '/orderPay',
257 
+              // query: {userpay: this.userpay, userInfor: this.userInfor, aliAccount: this.aliAccount}
258 
+            });
259 
+          }
260 
+          // }
261 
+
262 
+        }
263 
+      }).catch(res => {
264 
+        alert(res.message)
265 
+      })
266 
+    },
267 
+    // // 阿里一键登录
268 
+    // getALToken(){
269 
+    //   let that = this;
270 
+    //   getAuthToken({url:"https://offlinepay-test.bjtdba.com/", origin:"https://offlinepay-test.bjtdba.com"}).then(resT => {
271 
+    //     console.log(resT);
272 
+    //     var phoneNumberServer = new PhoneNumberServer();
273 
+
274 
+    //       phoneNumberServer.checkLoginAvailable({
275 
+    //           accessToken: resT.data.TokenInfo.AccessToken,
276 
+    //           jwtToken:resT.data.TokenInfo.JwtToken,
277 
+    //           success:function(data){
278 
+    //               console.log(data);
279 
+    //                   if(data.code===600000){
280 
+    //                       // 在此调用getLoginToken接口
281 
+
282 
+    //                     phoneNumberServer.getLoginToken({
283 
+    //                       authPageOption: {
284 
+    //                           navText: '测试',
285 
+    //                           subtitle: '', // 副标题
286 
+    //                           isHideLogo: false, // logo显示隐藏
287 
+    //                           logoImg: 'XXX',
288 
+    //                           btnText: '立即登录',
289 
+    //                       },
290 
+    //                       protocolPageWatch: res => {
291 
+    //                         console.log('预授权',res);
292 
+    //                       },
293 
+    //                       success: res => {
294 
+    //                           console.log('登录成功',res);
295 
+    //                           if(res.code===600000){
296 
+    //                             that.authorStatus = true;
297 
+    //                               // 拿到spToken去服务端发起token验证
298 
+    //                               phoneNumberServer.closeLoginPage(); // 手动关闭授权页时调用关闭页面
299 
+    //                               res.clearInput(); // 清空输入框并将光标置于第一个输入框
300 
+    //                               res.focusOn(2); // 将光标置于第1-4个输入框
301 
+
302 
+    //                               getPhoneWithToken({token: res.spToken}).then(resdata => {
303 
+    //                                 console.log('获取手机号',resdata);
304 
+    //                                 if(resdata.status == 200){
305 
+    //                                   // 绑定手机号
306 
+    //                                   console.log('去绑定手机号');
307 
+    //                                   that.bindPhone(resdata.data.Data.Mobile, 1)
308 
+    //                                 }
309 
+    //                               }).catch(resdata => {
310 
+    //                                 alert(resdata.message)
311 
+    //                               })
312 
+    //                           }
313 
+    //                       },
314 
+
315 
+    //                       error: res => {
316 
+    //                         console.log('登录失败',res);
317 
+    //                         that.authorStatus = false;
318 
+    //                         // alert('失败',res);
319 
+    //                       // 提示用户关闭wifi或者尝试其他登录方案
320 
+    //                       },
321 
+
322 
+    //                       watch: function(status, data){
323 
+    //                         console.log('-----------------status', status, data);
324 
+    //                       // 当status为2时整个流程结束，比如如果按钮有loading状态此处置为false
325 
+    //                       },
326 
+
327 
+    //                     });
328 
+    //                   }
329 
+    //           },
330 
+
331 
+    //           error: function(res){
332 
+    //             console.log(res);
333 
+    //               // 提示用户关闭Wi-Fi或者尝试其他登录方案
334 
+    //           }
335 
+
336 
+    //       });
337 
+    //   }).catch(res => {
338 
+    //     alert(res.message)
339 
+    //   })
340 
+    // },
341 
+    // // 绑定手机号
342 
+    // bindPhone(dataMobile, type){
343 
+    //   let that = this;
344 
+    //   if(type == 2 && (dataMobile == "" || that.mobileCode == "")){
345 
+    //     alert('请完善登录信息')
346 
+    //     return false;
347 
+    //   }
348 
+    //   // if (!/^1[2-9]\d{9}$/.test(dataMobile)) {
349 
+    //   //   alert(!this.mobile ? '请输入手机号' : '请填写正确手机号码')
350 
+    //   //   return false;
351 
+    //   // }
352 
+    //   binding({
353 
+    //     phone: dataMobile,
354 
+    //     sms: type,
355 
+    //     sms_code: type == 1 ? 1 : that.mobileCode,
356 
+    //     third_user_id: that.trade_type == "WX" ? that.userInfor.unionid : that.aliUserInfor.user_id,
357 
+    //     type: that.trade_type == "WX" ? 1 : 2
358 
+    //   }).then(res => {
359 
+    //     if(res.status == 200){
360 
+
361 
+    //       // 获取商户
362 
+    //       // that.getMer();
363 
+    //       if(this.userpay.type == "hong"){
364 
+    //         this.$router.push({path: '/openPension', query: {userpay: this.userpay, userInfor: this.userInfor, aliAccount: this.aliAccount}});
365 
+    //       }else{
366 
+    //         this.$router.push({path: '/orderPay', query: {userpay: this.userpay, userInfor: this.userInfor, aliAccount: this.aliAccount }});
367 
+    //       }
368 
+    //     }
369 
+    //   }).catch(res => {
370 
+    //     alert(res.message)
371 
+    //   })
372 
+    // },
373 
+    parseParms() {
374 
+      if (window.location.href.split("?")[1]) {
375 
+        var str = window.location.href.split("?")[1];
376 
+        var pieces = str.split("&"), data = {}, i, parts;
377 
+
378 
+        for (i = 0; i < pieces.length; i++) {
379 
+          parts = pieces[i].split("=");
380 
+          if (parts.length < 2) {
381 
+            parts.push("");
382 
+          }
383 
+          data[decodeURIComponent(parts[0])] = decodeURIComponent(parts[1]);
384 
+        }
385 
+        return data
386 
+      }
387 
+    }
388 
+  }
389 
+}
390 
+</script>
391 
+
392 
+<!-- Add "scoped" attribute to limit CSS to this component only -->
393 
+<style scoped>
394 
+h3 {
395 
+  margin: 40px 0 0;
396 
+}
397 
+
398 
+ul {
399 
+  list-style-type: none;
400 
+  padding: 0;
401 
+}
402 
+
403 
+li {
404 
+  display: inline-block;
405 
+  margin: 0 10px;
406 
+}
407 
+
408 
+body {
409 
+  background: #F8F8F8;
410 
+}
411 
+
412 
+* {
413 
+  margin: 0;
414 
+  padding: 0;
415 
+}
416 
+
417 
+#pay {
418 
+  width: 100%;
419 
+  height: 100vh;
420 
+  display: flex;
421 
+  flex-direction: column;
422 
+  align-items: center;
423 
+  margin-top: 60px;
424 
+  box-sizing: border-box;
425 
+}
426 
+
427 
+.pay-login {
428 
+  width: 100%;
429 
+  display: flex;
430 
+  flex-direction: column;
431 
+  align-items: center;
432 
+}
433 
+
434 
+.loginImg {
435 
+  width: 100px;
436 
+  margin-bottom: 35px;
437 
+}
438 
+
439 
+.login-phone {
440 
+  border-bottom: 1px solid #aaa;
441 
+  display: flex;
442 
+  justify-content: space-between;
443 
+  width: 70%;
444 
+  padding: 15px;
445 
+  margin-bottom: 15px;
446 
+  font-size: 15px;
447 
+}
448 
+
449 
+input {
450 
+  border: none;
451 
+  outline: none;
452 
+  background-color: rgba(0, 0, 0, 0);
453 
+  background-color: transparent;
454 
+  font-size: 15px;
455 
+}
456 
+
457 
+.get-code {
458 
+  color: #FE0032;
459 
+}
460 
+
461 
+.login-btn {
462 
+  width: 70%;
463 
+  text-align: center;
464 
+  height: 42px;
465 
+  line-height: 42px;
466 
+  background: #FE0032;
467 
+  color: #ffffff;
468 
+  border-radius: 5px;
469 
+  font-size: 18px;
470 
+  margin-top: 30px;
471 
+  display: flex;
472 
+  align-items: center;
473 
+  justify-content: center;
474 
+}
475 
+
476 
+.pay_name {
477 
+  width: 6.2rem;
478 
+  height: 0.9rem;
479 
+  margin: 0.5rem 0 0.5rem 0;
480 
+  display: flex;
481 
+  justify-content: space-between;
482 
+  align-items: center;
483 
+}
484 
+
485 
+.pay_name_left {
486 
+  height: 100%;
487 
+  display: flex;
488 
+  flex-direction: column;
489 
+  align-items: center;
490 
+  justify-content: space-between;
491 
+}
492 
+
493 
+.pay_name_left_top {
494 
+  font-size: 0.34rem;
495 
+  font-weight: 600;
496 
+  color: #333333;
497 
+}
498 
+
499 
+.pay_name_left_bottom {
500 
+  font-size: 0.26rem;
501 
+  font-weight: 400;
502 
+  color: #999999;
503 
+}
504 
+
505 
+.pay_name_right {
506 
+  width: 0.9rem;
507 
+  height: 0.9rem;
508 
+  background: #D8D8D8;
509 
+  border: 0.01rem solid #979797;
510 
+}
511 
+
512 
+.pay_name_right img {
513 
+  width: 100%;
514 
+  height: 100%;
515 
+  display: block;
516 
+}
517 
+
518 
+input::-webkit-input-placeholder {
519 
+  /*WebKit browsers*/
520 
+  color: #999999;
521 
+  font-size: 0.4rem;
522 
+  margin-top: 13rem;
523 
+
524 
+}
525 
+
526 
+input::-moz-input-placeholder {
527 
+  /*Mozilla Firefox*/
528 
+  color: #999999;
529 
+  font-size: 0.4rem;
530 
+  margin-top: 13rem;
531 
+
532 
+}
533 
+
534 
+input::-ms-input-placeholder {
535 
+  /*Internet Explorer*/
536 
+  color: #999999;
537 
+  font-size: 0.4rem;
538 
+  margin-top: 13rem;
539 
+
540 
+}
541 
+
542 
+.pay_input {
543 
+  width: 100%;
544 
+  height: 3.48rem;
545 
+  background: #FFFFFF;
546 
+  border-radius: 0.16rem;
547 
+  display: flex;
548 
+  flex-direction: column;
549 
+  align-items: center;
550 
+  justify-content: space-between;
551 
+}
552 
+
553 
+.pay_input-top {
554 
+  width: 6.36rem;
555 
+  height: 2.63rem;
556 
+  border-bottom: 0.01rem solid #E5E5E5;
557 
+}
558 
+
559 
+.pay_input-top-shifu {
560 
+  margin: 0.54rem 0 0 0.41rem;
561 
+  font-size: 0.26rem;
562 
+  font-weight: 400;
563 
+  color: #333333;
564 
+}
565 
+
566 
+.pay_input-top-manei {
567 
+  margin: 0.12rem 0 0 0.41rem;
568 
+  height: 1.19rem;
569 
+  display: flex;
570 
+  align-items: center;
571 
+}
572 
+
573 
+.pay_input-top-manei span {
574 
+  font-size: 0.64rem;
575 
+  font-weight: 600;
576 
+  color: #333333;
577 
+}
578 
+
579 
+.pay_input-top-manei input {
580 
+  width: 100%;
581 
+  height: 0.99rem;
582 
+  border: none;
583 
+  outline: medium;
584 
+  margin-left: 0.27rem;
585 
+  font-size: 0.9rem;
586 
+}
587 
+
588 
+.pay_input-bottom {
589 
+  width: 6.36rem;
590 
+  height: 0.84rem;
591 
+  display: flex;
592 
+  justify-content: center;
593 
+  align-items: center;
594 
+  font-size: 0.24rem;
595 
+  font-weight: 400;
596 
+  color: #FE0032;
597 
+}
598 
+
599 
+.pay_input-bottom-left {
600 
+  width: 0.3rem;
601 
+  height: 0.3rem;
602 
+}
603 
+
604 
+.pay_input-bottom-left img {
605 
+  width: 100%;
606 
+  height: 100%;
607 
+  display: block;
608 
+}
609 
+
610 
+.pay_input-bottom-right {
611 
+  margin-left: 0.08rem;
612 
+}
613 
+
614 
+.pay_bottom {
615 
+  width: 6.86rem;
616 
+  height: 0.88rem;
617 
+  background: linear-gradient(179deg, #FE7577 0%, #FE0032 100%);
618 
+  border-radius: 1rem;
619 
+  /* margin-top: 7.5rem; */
620 
+  position: fixed;
621 
+  bottom: 0.5rem;
622 
+  text-align: center;
623 
+  line-height: 0.88rem;
624 
+  font-size: 0.32rem;
625 
+  font-weight: 600;
626 
+  color: #FFFFFF;
627 
+}
628 
+</style>

+ 342 - 0
src/components/OpenPension.vue
Bestand weergeven 

@@ -0,0 +1,342 @@
1 
+<template>
2 
+    <div id="pension">
3 
+        <div>
4 
+            <img class="pension-header" src="https://cdn.bjtdba.com/vod/image/2023-04-17/20230417145316773.png" alt="">
5 
+            <div class="pension-open" @click="createAnnual(1)">
6 
+                <img class="pension-openImg" src="https://cdn.bjtdba.com/vod/image/2023-04-17/20230417145331307.png" alt="">
7 
+                <div class="openImg-title">开通养老金账号 管理年费</div>
8 
+                <div class="openImg-amount"><span class="amount-icon">¥</span>12</div>
9 
+            </div>
10 
+        </div>
11 
+        <div class="pension-lists">
12 
+            <div class="pension-list">
13 
+                <img class="pension-list-img" src="https://cdn.bjtdba.com/vod/image/2023-04-17/20230417145346223.png" alt="">
14 
+                <div class="pension-list-pack">
15 
+                    <img class="pension-list-packImg" src="https://cdn.bjtdba.com/vod/image/2023-04-17/20230417145418188.png" alt="">
16 
+                    <div class="pension-list-packTxt">大礼包</div>
17 
+                </div>
18 
+                <div class="pension-list-amount"><div class="pension-list-amount-icon">¥</div><div>48</div></div>
19 
+                <div class="pension-list-txt">包含商品、养老金、 养老金账号管理费</div>
20 
+                <div class="pension-list-btn" @click="createAnnual(2)">
21 
+                    <img class="pension-list-btnImg" src="https://cdn.bjtdba.com/vod/image/2023-04-17/20230417145405204.png" alt="">
22 
+                    <div class="pension-list-btnTxt">立即开通</div>
23 
+                </div>
24 
+            </div>
25 
+            <div class="pension-list">
26 
+                <img class="pension-list-img" src="https://cdn.bjtdba.com/vod/image/2023-04-17/20230417145346223.png" alt="">
27 
+                <div class="pension-list-pack">
28 
+                    <img class="pension-list-packImg" src="https://cdn.bjtdba.com/vod/image/2023-04-17/20230417145418188.png" alt="">
29 
+                    <div class="pension-list-packTxt">大礼包</div>
30 
+                </div>
31 
+                <div class="pension-list-amount"><div class="pension-list-amount-icon">¥</div><div>68</div></div>
32 
+                <div class="pension-list-txt">包含商品、养老金、 养老金账号管理费</div>
33 
+                <div class="pension-list-btn" @click="createAnnual(3)">
34 
+                    <img class="pension-list-btnImg" src="https://cdn.bjtdba.com/vod/image/2023-04-17/20230417145405204.png" alt="">
35 
+                    <div class="pension-list-btnTxt">立即开通</div>
36 
+                </div>
37 
+            </div>
38 
+            <div class="pension-list">
39 
+                <img class="pension-list-img" src="https://cdn.bjtdba.com/vod/image/2023-04-17/20230417145346223.png" alt="">
40 
+                <div class="pension-list-pack">
41 
+                    <img class="pension-list-packImg" src="https://cdn.bjtdba.com/vod/image/2023-04-17/20230417145418188.png" alt="">
42 
+                    <div class="pension-list-packTxt">大礼包</div>
43 
+                </div>
44 
+                <div class="pension-list-amount"><div class="pension-list-amount-icon">¥</div><div>88</div></div>
45 
+                <div class="pension-list-txt">包含商品、养老金、 养老金账号管理费</div>
46 
+                <div class="pension-list-btn" @click="createAnnual(4)">
47 
+                    <img class="pension-list-btnImg" src="https://cdn.bjtdba.com/vod/image/2023-04-17/20230417145405204.png" alt="">
48 
+                    <div class="pension-list-btnTxt">立即开通</div>
49 
+                </div>
50 
+            </div>
51 
+        </div>
52 
+
53 
+    </div>
54 
+  </template>
55 
+
56 
+  <script>
57 
+  import wx from 'weixin-js-sdk';
58 
+  import {createAnnualOrder, payUserAnnualOffline} from '../api/index'
59 
+  export default {
60 
+    name: 'OpenPension',
61 
+    props: {
62 
+      msg: String
63 
+    },
64 
+    data() {
65 
+      return {
66 
+        trade_type: '',
67 
+        userInfor: {},
68 
+        aliAccount: {},
69 
+        outTradeNo: ''
70 
+      }
71 
+    },
72 
+    created(){
73 
+        //不是微信并且不是支付宝
74 
+        if (!this.$isWechat() && !this.$isAlipay()) {
75 
+            alert('请使用微信或支付宝扫码');
76 
+        }
77 
+
78 
+        this.userpay = this.$route.query.userpay;
79 
+        this.userInfor = this.$route.query.userInfor;
80 
+        this.aliAccount = this.$route.query.aliAccount;
81 
+        //   //判断是不是微信
82 
+        if (this.$isWechat()) {
83 
+            this.trade_type = "WX"
84 
+        }
85 
+        //   //判断是不是支付宝
86 
+        if (this.$isAlipay()) {
87 
+            this.trade_type = "ALI"
88 
+        }
89 
+    },
90 
+    // 引入支付宝jsapi
91 
+    mounted() {
92 
+        const s = document.createElement('script');
93 
+        s.type = 'text/javascript';
94 
+        s.src = 'https://gw.alipayobjects.com/as/g/h5-lib/alipayjsapi/3.1.1/alipayjsapi.min.js';
95 
+        document.body.appendChild(s);
96 
+          window.onload =()=>{   //初始化产生一个全局变量 AlipayJSBridge
97 
+            this.readys()
98 
+          }
99 
+    },
100 
+    methods: {
101 
+        createAnnual(type){
102 
+            let that = this;
103 
+            createAnnualOrder({type: type}).then(res => {
104 
+                console.log('创建大礼包订单',res);
105 
+                if(res.status == 200){
106 
+                    that.outTradeNo = res.data.order_id;
107 
+                    payUserAnnualOffline({
108 
+                        oid: res.data.order_id,
109 
+                        type: that.trade_type,
110 
+                        pay_user_id: that.trade_type == "WX" ? that.userInfor.openid : that.aliAccount.ali_user_id
111 
+                    }).then(resPay => {
112 
+                        console.log('大礼包支付',resPay);
113 
+                        if(resPay.status == 200){
114 
+                            if (that.trade_type == 'WX') {
115 
+                                that.paymentByWxpay(resPay.data)
116 
+                            } else if (that.trade_type == 'ALI') {
117 
+                                that.paymentByAlipay(resPay.data)
118 
+                            }
119 
+                        }else{
120 
+                            alert(resPay.message)
121 
+
122 
+                        }
123 
+                    }).catch(resPay => {
124 
+                        alert(resPay.message)
125 
+                    })
126 
+                }else{
127 
+                    alert(res.message)
128 
+                }
129 
+            }).catch(res => {
130 
+                alert(res.message)
131 
+            })
132 
+        },
133 
+        // 微信支付
134 
+      paymentByWxpay(data) {
135 
+          var pay_info = JSON.parse(data.expend.pay_info)
136 
+          wx.config({
137 
+              debug: false, // 开启调试模式,调用的所有 api 的返回值会在客户端 alert 出来，若要查看传入的参数，可以在 pc 端打开，参数信息会通过 log 打出，仅在 pc 端时才会打印
138 
+              appId: pay_info.appId, // 必填，公众号的唯一标识
139 
+              timestamp: pay_info.timeStamp, // 必填，生成签名的时间戳
140 
+              nonceStr: pay_info.nonceStr, // 必填，生成签名的随机串
141 
+              signature: pay_info.paySign,// 必填，签名
142 
+              jsApiList: ['chooseWXPay'], // 必填，需要使用的 JS 接口列表 支付
143 
+              openTagList: ["wx-open-launch-weapp"] // 可选，需要使用的开放标签列表，例如['wx-open-launch-app']
144 
+          });
145 
+
146 
+          wx.ready(function () {
147 
+              wx.checkJsApi({
148 
+                  jsApiList: ['chooseWXPay'], // 需要检测的JS接口列表，所有JS接口列表见附录2,
149 
+                  success: function (res) {
150 
+                      console.log(res, '微信支付返回值');
151 
+                  },
152 
+                  fail: function (res) {
153 
+                      console.log(res, '错误');
154 
+                  }
155 
+              });
156 
+              wx.chooseWXPay({
157 
+                  appId: pay_info.appId,
158 
+                  timestamp: pay_info.timeStamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
159 
+                  nonceStr: pay_info.nonceStr, // 支付签名随机串，不长于 32 位
160 
+                  package: pay_info.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=***）
161 
+                  signType: pay_info.signType, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
162 
+                  paySign: pay_info.paySign, // 支付签名
163 
+                  success: (res) => {
164 
+                    console.log(res);
165 
+                      // 支付成功后的回调函数
166 
+                      // location.replace("./Paytocomplete.html")
167 
+                      // window.location.replace("./Paytocomplete.html")
168 
+                      // window.location.href = path + "./Paytocomplete.html";
169 
+                      //结束loading
170 
+                  },
171 
+                  // cancel: function (res) {
172 
+                  //      结束loading
173 
+                  //     alert('取消支付');
174 
+                  // },
175 
+                  fail: function (res) {
176 
+                      //结束loading
177 
+                      alert('支付失败',res);
178 
+                  }
179 
+              });
180 
+          });
181 
+          wx.error(function (res) {
182 
+              console.log('res', res);
183 
+          });
184 
+      },
185 
+      // 支付宝支付
186 
+      paymentByAlipay(data) {
187 
+        let that = this;
188 
+          var zfbPay_info = JSON.parse(data.expend.pay_info)
189 
+          window.AlipayJSBridge.call("tradePay", {
190 
+              tradeNO: zfbPay_info.tradeNO, // 必传，此使用方式下该字段必传
191 
+          }, function (result) {
192 
+              if (result.resultCode == '9000') {
193 
+                  location.replace("./Paytocomplete.html?out_trade_no=" + that.outTradeNo);
194 
+                  that.paymentAmount = '';
195 
+              } else {
196 
+                console.log("支付失败");
197 
+                //   alert("支付失败")
198 
+              }
199 
+          });
200 
+      },
201 
+        readys(callback) {
202 
+            if (window.AlipayJSBridge) {
203 
+                callback && callback();
204 
+            } else {
205 
+                document.addEventListener('AlipayJSBridgeReady', callback, false);
206 
+            }
207 
+        },
208 
+    }
209 
+  }
210 
+  </script>
211 
+
212 
+  <style scoped>
213 
+  h3 {
214 
+    margin: 40px 0 0;
215 
+  }
216 
+  ul {
217 
+    list-style-type: none;
218 
+    padding: 0;
219 
+  }
220 
+  li {
221 
+    display: inline-block;
222 
+    margin: 0 10px;
223 
+  }
224 
+  body {
225 
+    background: #F6F6F6;
226 
+  }
227 
+  * {
228 
+    margin: 0;
229 
+    padding: 0;
230 
+  }
231 
+  #pension {
232 
+    width: 100%;
233 
+    height: 100%;
234 
+    display: flex;
235 
+    flex-direction: column;
236 
+    align-items: center;
237 
+    background: #F6F6F6;
238 
+  }
239 
+  .pension-header{
240 
+    width: 100%;
241 
+  }
242 
+  .pension-open{
243 
+    margin: -26% 19.5px 0;
244 
+    position: relative;
245 
+  }
246 
+  .pension-openImg{
247 
+    width: 100%;
248 
+  }
249 
+  .openImg-title{
250 
+    position: absolute;
251 
+    top: 25px;
252 
+    left: 48px;
253 
+    width: 135px;
254 
+    font-size: 19px;
255 
+    color: #C76B35;
256 
+    font-weight: 600;
257 
+  }
258 
+  .openImg-amount{
259 
+    position: absolute;
260 
+    top: 50px;
261 
+    right: 48px;
262 
+    color: #D31710;
263 
+    font-size: 24px;
264 
+    font-weight: 600;
265 
+  }
266 
+  .amount-icon{
267 
+    font-size: 14px;
268 
+  }
269 
+  .pension-lists{
270 
+    margin: 10px 19.5px 0;
271 
+  }
272 
+  .pension-list{
273 
+    position: relative;
274 
+    margin-bottom: 20px;
275 
+  }
276 
+  .pension-list-img{
277 
+    width: 100%;
278 
+  }
279 
+  .pension-list-amount{
280 
+    position: absolute;
281 
+    top: 32px;
282 
+    left: 25px;
283 
+    font-weight: 600;
284 
+    color: #C76B35;
285 
+    font-size: 40px;
286 
+    display: flex;
287 
+  }
288 
+  .pension-list-amount-icon{
289 
+    font-size: 14px;
290 
+    font-weight: normal;
291 
+    margin-right: 6px;
292 
+    padding-top: 10px;
293 
+    align-self: center;
294 
+  }
295 
+  .pension-list-txt{
296 
+    position: absolute;
297 
+    top: 50%;
298 
+    right: 84px;
299 
+    transform: translate(0, -50%);
300 
+    width: 126px;
301 
+    font-size: 14px;
302 
+    color: #C76B35;
303 
+  }
304 
+  .pension-list-btn{
305 
+    position: absolute;
306 
+    top: 50%;
307 
+    right: 10px;
308 
+    transform: translate(0, -50%);
309 
+    text-align: center;
310 
+    display: flex;
311 
+    align-items: center;
312 
+  }
313 
+  .pension-list-btnImg{
314 
+    width: 61px;
315 
+    height: 61px;
316 
+  }
317 
+  .pension-list-btnTxt{
318 
+    position: absolute;
319 
+    top: 50%;
320 
+    left: 50%;
321 
+    transform: translate(-50%, -50%);
322 
+    color: #C76B35;
323 
+  }
324 
+  .pension-list-pack{
325 
+    position: absolute;
326 
+    top: 4px;
327 
+    left: 4px;
328 
+    text-align: center;
329 
+    display: flex;
330 
+    align-items: center;
331 
+  }
332 
+  .pension-list-packImg{
333 
+    width: 56.5px;
334 
+    height: 20px;
335 
+  }
336 
+  .pension-list-packTxt{
337 
+    position: absolute;
338 
+    color: #ffffff;
339 
+    width: 100%;
340 
+  }
341 
+  </style>
342 
+

+ 695 - 0
src/components/OrderPay.vue
Bestand weergeven 

@@ -0,0 +1,695 @@
1 
+<template>
2 
+  <div id="pay">
3 
+    <div class="pay_name">
4 
+      <div class="pay_name_left">
5 
+        <div class="pay_name_left_top">付款给商家</div>
6 
+        <div class="pay_name_left_bottom" id="mername">{{ merContent.mer_name }}</div>
7 
+      </div>
8 
+      <div class="pay_name_right">
9 
+        <img :src="merContent.mer_banner" id="merbanner" alt="">
10 
+      </div>
11 
+    </div>
12 
+    <div class="pay_input">
13 
+      <div class="pay_input-top">
14 
+        <div class="pay_input-top-shifu">实付金额</div>
15 
+        <div class="pay_input-top-manei">
16 
+          <span>￥</span>
17 
+          <input type="number" id="textInput" placeholder="请输入金额" v-model="paymentAmount"
18 
+                 autofocus="autofocus" maxLength="8"
19 
+                 @keyup="paymentAmount = paymentAmount.replace(/[^\d^\.]+/g,'')">
20 
+        </div>
21 
+      </div>
22 
+      <!-- <div class="pay_input-bottom">
23 
+                <div class="pay_input-bottom-left">
24 
+                    <img src="https://cdn.bjtdba.com/vod/image/2022-10-18/20221018152247280.png" alt="">
25 
+                </div>
26 
+                <div class="pay_input-bottom-right">储蓄保全国合作伙伴招募中</div>
27 
+            </div> -->
28 
+    </div>
29 
+    <div class="pay_bottomBtn">
30 
+      <div class="pay_bottom" @click="payBtn()">立即支付</div>
31 
+    </div>
32 
+
33 
+    <div class="login-hint" v-show="this.$isWechat()">如右下方出现《使用完整服务》请点击进行授权。</div>
34 
+  </div>
35 
+</template>
36 
+
37 
+<script>
38 
+import wx from 'weixin-js-sdk';
39 
+import {
40 
+  getMerInfo,
41 
+  createOrder,
42 
+  jsapiPay
43 
+} from '../api/index'
44 
+export default {
45 
+  name: 'OrderPay',
46 
+  props: {
47 
+    msg: String
48 
+  },
49 
+  data() {
50 
+    return {
51 
+      canClick: true,
52 
+      userpay: null,
53 
+      userInfor: {},
54 
+      aliUserInfor: {},
55 
+      aliAccount: {},
56 
+      merContent: {
57 
+        mer_name: '',
58 
+        mer_banner: ''
59 
+      },
60 
+      paymentAmount: '',
61 
+      trade_type: '',
62 
+      outTradeNo: '',
63 
+    }
64 
+  },
65 
+  created() {
66 
+    //获取参数
67 
+    //   this.userpay = this.parseParms()
68 
+    //
69 
+    //   this.userpay = this.$route.query.userpay;
70 
+    //   this.userInfor = this.$route.query.userInfor;
71 
+    //   this.aliAccount = this.$route.query.aliAccount;
72 
+
73 
+
74 
+    this.userpay = JSON.parse(localStorage.getItem('userpay'));
75 
+    this.userInfor = JSON.parse(localStorage.getItem('userInfor'));
76 
+    this.aliAccount = JSON.parse(localStorage.getItem('aliAccount'));
77 
+    // alert(JSON.stringify(this.userpay))
78 
+    // alert(JSON.stringify(this.userInfor))
79 
+
80 
+
81 
+
82 
+    //跳转微信授权登陆
83 
+    //   let local = window.location.href;
84 
+    //   if (local.split(':')[0] == 'http') {
85 
+    //       local = local.split(':')[0] + 's:' + local.split(':')[1]
86 
+    //   } else {
87 
+    //       local = window.location.href;
88 
+    //   }
89 
+    // wx66f5f8def2b755da
90 
+    //   let wechatHrefurl = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" + 'wx6ac5b448b75117d9' +
91 
+    //       "&redirect_uri=" + encodeURIComponent(local) +
92 
+    //       "&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect";
93 
+
94 
+
95 
+
96 
+    //不是微信并且不是支付宝
97 
+    if (!this.$isWechat() && !this.$isAlipay()) {
98 
+      alert('请使用微信或支付宝扫码');
99 
+    }
100 
+
101 
+
102 
+
103 
+    //   //判断是不是微信
104 
+    if (this.$isWechat()) {
105 
+      this.trade_type = "WX"
106 
+      //   if (!this.userpay.code || this.userpay.code == "" || this.userpay.code == null) {
107 
+      //       window.location.href = wechatHrefurl;
108 
+      //   } else {
109 
+      //       this.user()
110 
+      //   }
111 
+    }
112 
+    //   //判断是不是支付宝
113 
+    if (this.$isAlipay()) {
114 
+      this.trade_type = "ALI"
115 
+      // alert(JSON.stringify(this.aliAccount))
116 
+      //   if (!this.userpay.auth_code || this.userpay.auth_code == null || this.userpay.auth_code == "") {
117 
+      //       local = local.replace('#/', '');
118 
+
119 
+      //       let aliHrefurl =
120 
+      //           "https://openauth.alipay.com/oauth2/publicAppAuthorize.htm?app_id=2021003191617008&scope=auth_user&redirect_uri=" +
121 
+      //           encodeURIComponent(local)
122 
+      //       window.location.href = aliHrefurl;
123 
+
124 
+      //   } else {
125 
+      //       this.aliUser()
126 
+      //   }
127 
+    }
128 
+
129 
+    this.getMer();
130 
+  },
131 
+  // 引入支付宝jsapi
132 
+  mounted() {
133 
+    const s = document.createElement('script');
134 
+    s.type = 'text/javascript';
135 
+    s.src = 'https://gw.alipayobjects.com/as/g/h5-lib/alipayjsapi/3.1.1/alipayjsapi.min.js';
136 
+    document.body.appendChild(s);
137 
+    window.onload = () => { //初始化产生一个全局变量 AlipayJSBridge
138 
+      this.readys()
139 
+    }
140 
+    // 监听返回按钮事件
141 
+    window.addEventListener('popstate', function() {
142 
+      // 关闭页面
143 
+      window.close();
144 
+    });
145 
+
146 
+    // 修改浏览器历史记录
147 
+    const state = {
148 
+      page: 'main'
149 
+    };
150 
+    history.pushState(state, '', '');
151 
+  },
152 
+  methods: {
153 
+    readys(callback) {
154 
+      if (window.AlipayJSBridge) {
155 
+        callback && callback();
156 
+      } else {
157 
+        document.addEventListener('AlipayJSBridgeReady', callback, false);
158 
+      }
159 
+    },
160 
+    //   user() {
161 
+    //     wechatAuthorization(this.userpay.code).then(res => {
162 
+    //       console.log(res);
163 
+    //       if(res.status == 200){
164 
+    //         this.userInfor = res.data;
165 
+    //         this.initWxConfig(res.data.unionid);
166 
+    //       }
167 
+    //     }).catch(res => {
168 
+    //       this.$message.error(res.message);
169 
+    //     })
170 
+    //   },
171 
+    //   aliUser() {
172 
+    //     console.log(this.userpay, this.userpay.code);
173 
+    //     aliSign({code: this.userpay.auth_code, type: "h5pay"}).then(res => {
174 
+    //       if(res.status == 200){
175 
+    //         this.aliUserInfor = res.data;
176 
+    //         this.initAliConfig(res.data.user_id);
177 
+    //       }
178 
+    //     }).catch(res => {
179 
+    //       this.$message.error(res.message);
180 
+    //     })
181 
+    //   },
182 
+    //   // 微信授权登录
183 
+    //   initWxConfig(userOpenid) {
184 
+    //     wxcheck(userOpenid).then(res => {
185 
+    //       if(res.status == 400){
186 
+    //         // 未绑定手机号，获取token，绑定手机号
187 
+    //         this.getALToken();
188 
+    //       }
189 
+    //       if(res.status == 200){
190 
+    //         // 已绑定手机号，获取商户
191 
+    //         this.getMer();
192 
+    //       }
193 
+    //     }).catch(res => {
194 
+    //       this.$message.error(res.message);
195 
+    //     })
196 
+    //   },
197 
+    //   // 支付宝授权登录
198 
+    //   initAliConfig(userOpenid) {
199 
+    //     alicheck(userOpenid).then(res => {
200 
+    //       if(res.status == 200){
201 
+
202 
+    //         if(res.data.code == 400){
203 
+    //           // 未绑定手机号，获取token，绑定手机号
204 
+
205 
+    //           this.getALToken();
206 
+
207 
+    //         }else{
208 
+    //           // 已绑定手机号，获取商户
209 
+    //           this.aliAccount = res.data.user;
210 
+    //           this.getMer();
211 
+    //         }
212 
+
213 
+    //       }
214 
+    //     }).catch(res => {
215 
+    //       this.$message.error(res.message);
216 
+    //     })
217 
+    //   },
218 
+    //   // 阿里一键登录
219 
+    //   getALToken(){
220 
+    //     let that = this;
221 
+    //     getAuthToken({url:"https://offlinepay-test.bjtdba.com/", origin:"https://offlinepay-test.bjtdba.com"}).then(resT => {
222 
+    //       console.log(resT);
223 
+    //       var phoneNumberServer = new PhoneNumberServer();
224 
+
225 
+    //         phoneNumberServer.checkLoginAvailable({
226 
+    //             accessToken: resT.data.TokenInfo.AccessToken,
227 
+    //             jwtToken:resT.data.TokenInfo.JwtToken,
228 
+    //             success:function(data){
229 
+    //                 console.log(data);
230 
+    //                     if(data.code===600000){
231 
+    //                         // 在此调用getLoginToken接口
232 
+
233 
+    //                       phoneNumberServer.getLoginToken({
234 
+    //                         authPageOption: {
235 
+    //                             navText: '测试',
236 
+    //                             subtitle: '', // 副标题
237 
+    //                             isHideLogo: false, // logo显示隐藏
238 
+    //                             logoImg: 'XXX',
239 
+    //                             btnText: '立即登录',
240 
+    //                         },
241 
+    //                         protocolPageWatch: res => {
242 
+    //                           console.log('预授权',res);
243 
+    //                         },
244 
+    //                         success: res => {
245 
+    //                             console.log('登录成功',res);
246 
+    //                             if(res.code===600000){
247 
+    //                                 // 拿到spToken去服务端发起token验证
248 
+    //                                 phoneNumberServer.closeLoginPage(); // 手动关闭授权页时调用关闭页面
249 
+    //                                 res.clearInput(); // 清空输入框并将光标置于第一个输入框
250 
+    //                                 res.focusOn(2); // 将光标置于第1-4个输入框
251 
+
252 
+    //                                 // res.setMessage({  // 设置弹出toast提示框（有默认样式）
253 
+    //                                 //     showMessage: true, // 是否弹出Toast提示框
254 
+    //                                 //     messageContent: 'test content', // 弹出内容
255 
+    //                                 //     messageStyle: {  // 自定义弹窗样式，写入css样式即可
256 
+    //                                 //         color: '#fff',
257 
+    //                                 //         borderRadius: '8px',
258 
+    //                                 //     },
259 
+    //                                 //     time: 3000 // 弹出时间/ms，默认3000毫秒
260 
+    //                                 // });
261 
+
262 
+    //                                 getPhoneWithToken({token: res.spToken}).then(resdata => {
263 
+    //                                   console.log('获取手机号',resdata);
264 
+    //                                   if(resdata.status == 200){
265 
+    //                                     // 绑定手机号
266 
+    //                                     console.log('去绑定手机号');
267 
+    //                                     that.bindPhone(resdata.data.Data)
268 
+    //                                     // wxcheck(this.userInfor.unionid).then(res => {
269 
+    //                                     //   console.log('授权登录',res);
270 
+    //                                     // }).catch(res => {
271 
+    //                                     //   this.$message.error(res.message);
272 
+    //                                     // })
273 
+    //                                   }
274 
+    //                                 }).catch(resdata => {
275 
+    //                                   that.$message.error(resdata.message);
276 
+    //                                 })
277 
+    //                             }
278 
+    //                         },
279 
+
280 
+    //                         error: res => {
281 
+    //                           console.log('登录失败',res);
282 
+    //                           alert('失败',res);
283 
+    //                         // 提示用户关闭wifi或者尝试其他登录方案
284 
+    //                         },
285 
+
286 
+    //                         watch: function(status, data){
287 
+    //                           console.log('-----------------status', status, data);
288 
+    //                         // 当status为2时整个流程结束，比如如果按钮有loading状态此处置为false
289 
+    //                         },
290 
+
291 
+    //                       });
292 
+    //                     }
293 
+    //             },
294 
+
295 
+    //             error: function(res){
296 
+    //               console.log(res);
297 
+    //                 // 提示用户关闭Wi-Fi或者尝试其他登录方案
298 
+    //             }
299 
+
300 
+    //         });
301 
+    //     }).catch(res => {
302 
+    //       this.$message.error(res.message);
303 
+    //     })
304 
+    //   },
305 
+    //   // 绑定手机号
306 
+    //   bindPhone(dataMobile){
307 
+    //     let that = this;
308 
+    //     binding({
309 
+    //       phone: dataMobile.Mobile,
310 
+    //       sms: 1,
311 
+    //       sms_code: 1,
312 
+    //       third_user_id: that.trade_type == "WX" ? that.userInfor.unionid : that.aliUserInfor.user_id,
313 
+    //       type: that.trade_type == "WX" ? 1 : 2
314 
+    //     }).then(res => {
315 
+    //       if(res.status == 200){
316 
+
317 
+    //         // 获取商户
318 
+    //         that.getMer();
319 
+    //       }
320 
+    //     }).catch(res => {
321 
+    //       that.$message.error(res.message);
322 
+    //     })
323 
+    //   },
324 
+    getMer() {
325 
+      // 获取商户
326 
+      getMerInfo(this.userpay.mer_id).then(resMer => {
327 
+        if (resMer.status == 200) {
328 
+          this.merContent = resMer.data;
329 
+        } else {
330 
+          // alert(resMer.message)
331 
+        }
332 
+      }).catch(resMer => {
333 
+        alert(resMer.message)
334 
+      })
335 
+    },
336 
+    // 创建订单
337 
+    payBtn() {
338 
+      let that = this;
339 
+      // if (!this.paymentAmount) {
340 
+      //     alert('请输入正确金额，金额不能小于 0.1 元')
341 
+      // }
342 
+      if (!this.paymentAmount || this.paymentAmount < 0.1) {
343 
+        alert('请输入有效金额,且金额不能小于 0.1 元')
344 
+        return
345 
+      }
346 
+      if(!that.canClick){
347 
+        return
348 
+      }
349 
+      that.canClick = false;
350 
+      // 两秒后重新启用点击
351 
+      setTimeout(() => {
352 
+        that.canClick = true;
353 
+      },2000);
354 
+      createOrder({
355 
+        money: that.paymentAmount,
356 
+        mer_id: that.merContent.mer_id,
357 
+        trade_type: that.trade_type,
358 
+        avatar: that.trade_type == "WX" ? that.userInfor.headimgurl : that.aliAccount.avatar,
359 
+        nickname: that.trade_type == "WX" ? that.userInfor.nickname : that.aliAccount.nickname,
360 
+        pay_user_id: that.trade_type == "WX" ? that.userInfor.unionid : that.aliAccount.user_id
361 
+      }).then(res => {
362 
+        // alert(JSON.stringify(res))
363 
+        if (res.status == 200) {
364 
+          localStorage.setItem('out_trade_no', res.data.out_trade_no);
365 
+          that.outTradeNo = res.data.out_trade_no;
366 
+          // 支付
367 
+          jsapiPay({
368 
+            out_trade_no: res.data.out_trade_no,
369 
+            type: 'HF'
370 
+          }).then(resPay => {
371 
+            if (resPay.status == 200) {
372 
+
373 
+
374 
+              if (that.trade_type == 'WX') {
375 
+                that.paymentByWxpay(resPay.data)
376 
+              } else if (that.trade_type == 'ALI') {
377 
+                that.paymentByAlipay(resPay.data)
378 
+              }
379 
+            }
380 
+          }).catch(resPay => {
381 
+            alert(resPay.message)
382 
+          })
383 
+
384 
+        } else {
385 
+          alert(res.message)
386 
+        }
387 
+      }).catch(resMer => {
388 
+        alert(resMer.message)
389 
+      })
390 
+    },
391 
+    // 微信支付
392 
+    paymentByWxpay(data) {
393 
+      let that = this;
394 
+      var pay_info = JSON.parse(data.expend.pay_info)
395 
+      localStorage.setItem('config', data.expend.pay_info)
396 
+      wx.config({
397 
+        debug: false, // 开启调试模式,调用的所有 api 的返回值会在客户端 alert 出来，若要查看传入的参数，可以在 pc 端打开，参数信息会通过 log 打出，仅在 pc 端时才会打印
398 
+        appId: pay_info.appId, // 必填，公众号的唯一标识
399 
+        timestamp: pay_info.timeStamp, // 必填，生成签名的时间戳
400 
+        nonceStr: pay_info.nonceStr, // 必填，生成签名的随机串
401 
+        signature: pay_info.paySign, // 必填，签名
402 
+        jsApiList: ['chooseWXPay'], // 必填，需要使用的 JS 接口列表 支付
403 
+        openTagList: ["wx-open-launch-weapp"] // 可选，需要使用的开放标签列表，例如['wx-open-launch-app']
404 
+      });
405 
+
406 
+      wx.ready(function() {
407 
+        wx.checkJsApi({
408 
+          jsApiList: ['chooseWXPay'], // 需要检测的JS接口列表，所有JS接口列表见附录2,
409 
+          success: function(res) {
410 
+            console.log(res, '微信支付返回值');
411 
+          },
412 
+          fail: function(res) {
413 
+            console.log(res, '错误');
414 
+          }
415 
+        });
416 
+        wx.chooseWXPay({
417 
+          appId: pay_info.appId,
418 
+          timestamp: pay_info.timeStamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
419 
+          nonceStr: pay_info.nonceStr, // 支付签名随机串，不长于 32 位
420 
+          package: pay_info.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=***）
421 
+          signType: pay_info.signType, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
422 
+          paySign: pay_info.paySign, // 支付签名
423 
+          success: (res) => {
424 
+            console.log(res);
425 
+            that.$router.push({
426 
+              path: '/success'
427 
+            });
428 
+            // 支付成功后的回调函数
429 
+            // location.replace("./Paytocomplete.html")
430 
+            // window.location.replace("./Paytocomplete.html")
431 
+            // window.location.href = path + "./Paytocomplete.html";
432 
+            //结束loading
433 
+          },
434 
+          // cancel: function (res) {
435 
+          //      结束loading
436 
+          //     alert('取消支付');
437 
+          // },
438 
+          fail: function(res) {
439 
+            //结束loading
440 
+            alert('支付失败', res);
441 
+          }
442 
+        });
443 
+      });
444 
+      wx.error(function(res) {
445 
+        console.log('res', res);
446 
+      });
447 
+    },
448 
+    // 支付宝支付
449 
+    paymentByAlipay(data) {
450 
+      let that = this;
451 
+      var zfbPay_info = JSON.parse(data.expend.pay_info)
452 
+      window.AlipayJSBridge.call("tradePay", {
453 
+        tradeNO: zfbPay_info.tradeNO, // 必传，此使用方式下该字段必传
454 
+      }, function(result) {
455 
+        if (result.resultCode == '9000') {
456 
+          that.$router.push({
457 
+            path: '/success'
458 
+          });
459 
+          // location.replace("./Paytocomplete.html?out_trade_no=" + that.outTradeNo);
460 
+          that.paymentAmount = '';
461 
+        } else {
462 
+          console.log("支付失败");
463 
+          //   alert("支付失败")
464 
+        }
465 
+      });
466 
+    },
467 
+    parseParms() {
468 
+      if (window.location.href.split("?")[1]) {
469 
+        var str = window.location.href.split("?")[1];
470 
+        var pieces = str.split("&"),
471 
+            data = {},
472 
+            i, parts;
473 
+
474 
+        for (i = 0; i < pieces.length; i++) {
475 
+          parts = pieces[i].split("=");
476 
+          if (parts.length < 2) {
477 
+            parts.push("");
478 
+          }
479 
+          data[decodeURIComponent(parts[0])] = decodeURIComponent(parts[1]);
480 
+        }
481 
+        return data
482 
+      }
483 
+    }
484 
+  }
485 
+}
486 
+</script>
487 
+
488 
+<!-- Add "scoped" attribute to limit CSS to this component only -->
489 
+<style scoped>
490 
+h3 {
491 
+  margin: 40px 0 0;
492 
+}
493 
+
494 
+ul {
495 
+  list-style-type: none;
496 
+  padding: 0;
497 
+}
498 
+
499 
+li {
500 
+  display: inline-block;
501 
+  margin: 0 10px;
502 
+}
503 
+
504 
+body {
505 
+  background: #F8F8F8;
506 
+}
507 
+
508 
+* {
509 
+  margin: 0;
510 
+  padding: 0;
511 
+}
512 
+
513 
+#pay {
514 
+  width: 100%;
515 
+  height: 100vh;
516 
+  padding-top: 30px;
517 
+  box-sizing: border-box;
518 
+  background: #F8F8F8;
519 
+}
520 
+
521 
+.pay_name {
522 
+  width: 100%;
523 
+  height: 55px;
524 
+  /* margin: 0.5rem 0 0.5rem 0; */
525 
+  display: flex;
526 
+  justify-content: space-between;
527 
+  align-items: center;
528 
+  padding: 0 25px;
529 
+  box-sizing: border-box;
530 
+}
531 
+
532 
+.pay_name_left {
533 
+  height: 100%;
534 
+  display: flex;
535 
+  flex-direction: column;
536 
+  /* align-items: center; */
537 
+  justify-content: space-between;
538 
+}
539 
+
540 
+.pay_name_left_top {
541 
+  font-size: 20px;
542 
+  font-weight: 600;
543 
+  color: #333333;
544 
+}
545 
+
546 
+.pay_name_left_bottom {
547 
+  /* font-size: 0.26rem; */
548 
+  font-weight: 400;
549 
+  color: #999999;
550 
+}
551 
+
552 
+.pay_name_right {
553 
+  width: 0.9rem;
554 
+  height: 0.9rem;
555 
+  background: #D8D8D8;
556 
+  border: 0.01rem solid #979797;
557 
+}
558 
+
559 
+.pay_name_right img {
560 
+  width: 100%;
561 
+  height: 100%;
562 
+  display: block;
563 
+}
564 
+
565 
+input::-webkit-input-placeholder {
566 
+  /*WebKit browsers*/
567 
+  color: #999999;
568 
+  font-size: 0.4rem;
569 
+  margin-top: 13rem;
570 
+
571 
+}
572 
+
573 
+input::-moz-input-placeholder {
574 
+  /*Mozilla Firefox*/
575 
+  color: #999999;
576 
+  font-size: 0.4rem;
577 
+  margin-top: 13rem;
578 
+
579 
+}
580 
+
581 
+input::-ms-input-placeholder {
582 
+  /*Internet Explorer*/
583 
+  color: #999999;
584 
+  font-size: 0.4rem;
585 
+  margin-top: 13rem;
586 
+
587 
+}
588 
+
589 
+.pay_input {
590 
+  width: 100%;
591 
+  height: 163px;
592 
+  background: #FFFFFF;
593 
+  border-radius: 0.16rem;
594 
+  display: flex;
595 
+  flex-direction: column;
596 
+  align-items: center;
597 
+  justify-content: space-between;
598 
+  margin-top: 30px;
599 
+}
600 
+
601 
+.pay_input-top {
602 
+  width: 100%;
603 
+  height: 115px;
604 
+  border-bottom: 0.01rem solid #E5E5E5;
605 
+}
606 
+
607 
+.pay_input-top-shifu {
608 
+  margin: 20px 0 0 25px;
609 
+  font-size: 0.26rem;
610 
+  font-weight: 400;
611 
+  color: #333333;
612 
+}
613 
+
614 
+.pay_input-top-manei {
615 
+  margin: 15px 0 0 25px;
616 
+  height: 50px;
617 
+  display: flex;
618 
+  align-items: center;
619 
+}
620 
+
621 
+.pay_input-top-manei span {
622 
+  font-size: 0.64rem;
623 
+  font-weight: 600;
624 
+  color: #333333;
625 
+}
626 
+
627 
+.pay_input-top-manei input {
628 
+  width: 100%;
629 
+  height: 50px;
630 
+  border: none;
631 
+  outline: medium;
632 
+  margin-left: 0.27rem;
633 
+  font-size: 40px;
634 
+}
635 
+
636 
+.pay_input-bottom {
637 
+  /* width: 6.36rem; */
638 
+  height: 45px;
639 
+  display: flex;
640 
+  justify-content: center;
641 
+  align-items: center;
642 
+  font-size: 0.24rem;
643 
+  font-weight: 400;
644 
+  color: #FE0032;
645 
+}
646 
+
647 
+.pay_input-bottom-left {
648 
+  width: 0.3rem;
649 
+  height: 0.3rem;
650 
+}
651 
+
652 
+.pay_input-bottom-left img {
653 
+  width: 100%;
654 
+  height: 100%;
655 
+  display: block;
656 
+}
657 
+
658 
+.pay_input-bottom-right {
659 
+  margin-left: 0.08rem;
660 
+}
661 
+
662 
+.pay_bottomBtn {
663 
+  width: 100%;
664 
+  padding: 0 20px;
665 
+  box-sizing: border-box;
666 
+  position: fixed;
667 
+  bottom: 2rem;
668 
+}
669 
+
670 
+.pay_bottom {
671 
+  width: 100%;
672 
+  height: 43px;
673 
+  background: linear-gradient(179deg, #FE7577 0%, #FE0032 100%);
674 
+  border-radius: 1rem;
675 
+  /* margin-top: 7.5rem; */
676 
+  /* position: fixed;
677 
+  bottom: 0.5rem; */
678 
+  text-align: center;
679 
+  line-height: 43px;
680 
+  font-size: 16px;
681 
+  font-weight: 600;
682 
+  color: #FFFFFF;
683 
+}
684 
+
685 
+.login-hint {
686 
+  color: #FE0032;
687 
+  font-size: 14px;
688 
+  position: fixed;
689 
+  bottom: 0.8rem;
690 
+  text-align: center;
691 
+  width: 100%;
692 
+  box-sizing: border-box;
693 
+}
694 
+</style>
695 
+

+ 329 - 0
src/components/Success.vue
Bestand weergeven 

@@ -0,0 +1,329 @@
1 
+<template>
2 
+	<div id="userfully">
3 
+		<img class="back_img" src="../assets/支付成功.png" alt="">
4 
+		<div class="fk_head">
5 
+			<div>
6 
+				<img class="zf_icon" src="../assets/形状结合.png" alt="">
7 
+			</div>
8 
+			<div>支付成功</div>
9 
+		</div>
10 
+		<div class="fk_content">
11 
+			<div class="content_t">
12 
+				<div class="content_title">本次消费获得养老金</div>
13 
+				<div class="content_price"><span
14 
+						style="width: 0.1rem;height: 0.1rem; font-size: 0.4rem;">￥</span>{{ money }}
15 
+				</div>
16 
+			</div>
17 
+			<div class="content_text">
18 
+				<div class="flex_o">
19 
+					<div>总养老金</div>
20 
+					<div>******</div>
21 
+				</div>
22 
+				<div class="flex_o">
23 
+					<div>中信公证处</div>
24 
+					<div>******</div>
25 
+				</div>
26 
+			</div>
27 
+		</div>
28 
+		<div class="fully-btn" @click="clickAction">查看我的养老金</div>
29 
+		<!-- <div class="fully-btn" @click="clickAction" v-if="isWeachat !== true">查看我的养老金</div>
30 
+		<div class="fully-btn1" v-if="isWeachat">
31 
+			<wx-open-launch-weapp id="launch-btn" username="gh_d9e58585791b" path="pages/home/index">
32 
+				<button style="border: none; background-color: #FE0032; color: #ffffff;">去小程序查看我的养老金</button>
33 
+			</wx-open-launch-weapp>
34 
+		</div> -->
35 
+
36 
+		<div class="yqhy_img">
37 
+			<img style="width: 100%;height: 100%;" src="../assets/邀请好友.png" alt="">
38 
+		</div>
39 
+
40 
+		<div v-if="centerDialogVisible" class="dialog_div">
41 
+			<img class="ewm_img" src="../assets/cxb.png" alt="">
42 
+			<span class="dialog-footer" @click="centerDialogVisible = false">
43 
+				<img src="../assets/关闭.png" style=" padding-top: 0.3rem;width: 1rem;height: 1rem;" alt="">
44 
+			</span>
45 
+		</div>
46 
+
47 
+
48 
+
49 
+		<!-- <div class="fully-nav" >
50 
+            <img class="fully-img" v-show="tu" src="https://cdn.bjtdba.com/vod/image/2023-06-08/20230608104700153.png" alt="">
51 
+            <div class="fully-txt">支付成功</div>
52 
+            <div class="fully-txt">本次消费获得养老金 <span v-html="money"></span></div>
53 
+            <div class="fully-btn" @click="tankuan()">查看我的养老金</div>
54 
+            <div class="fully-btn" @click="gotoCenter()">打开储蓄保APP</div>
55 
+        </div> -->
56 
+
57 
+	</div>
58 
+</template>
59 
+
60 
+<script>
61 
+	// import wx from 'weixin-js-sdk';
62 
+	import {
63 
+		queryOrders
64 
+	} from '../api/index'
65 
+	export default {
66 
+		name: 'OpenPension',
67 
+		props: {
68 
+			msg: String
69 
+		},
70 
+		data() {
71 
+			return {
72 
+				tu: false,
73 
+				money: '0',
74 
+				centerDialogVisible: false,
75 
+				isWeachat: false
76 
+			}
77 
+		},
78 
+		created() {
79 
+			let out_trade_no = localStorage.getItem('out_trade_no');
80 
+			console.log(out_trade_no)
81 
+			queryOrders({
82 
+				out_trade_no: out_trade_no
83 
+			}).then(resPay => {
84 
+				if (resPay.data.pension != undefined && resPay.data.pension > 0) {
85 
+					this.money = resPay.data.pension
86 
+				}
87 
+			}).catch(resPay => {
88 
+				console.log(resPay)
89 
+				// alert(resPay.message)
90 
+			})
91 
+
92 
+			if (this.$isWechat()) {
93 
+				this.isWeachat = true;
94 
+			} else {
95 
+				this.isWeachat = false;
96 
+			}
97 
+		},
98 
+
99 
+		mounted() {
100 
+			let mchData = {
101 
+				action: 'onIframeReady',
102 
+				displayStyle: 'SHOW_CUSTOM_PAGE',
103 
+				height: 960
104 
+			};
105 
+			let postData = JSON.stringify(mchData);
106 
+			parent.postMessage(postData, 'https://payapp.weixin.qq.com');
107 
+
108 
+
109 
+
110 
+
111 
+			// var launchBtn = document.getElementById('launch-btn')
112 
+			// console.log('btn', launchBtn)
113 
+			// launchBtn.addEventListener('ready', function(e) {
114 
+			// 	console.log('开放标签 ready', e.detail)
115 
+			// })
116 
+			// launchBtn.addEventListener('launch', function(e) {
117 
+			// 	console.log('开放标签 success', e.detail)
118 
+			// })
119 
+			// launchBtn.addEventListener('error', function(e) {
120 
+			// 	console.log('开放标签 fail', e.detail)
121 
+			// })
122 
+
123 
+			// if (this.$isWechat()) {
124 
+			// 	var userInfor = JSON.parse(localStorage.getItem('userInfor'));
125 
+			// 	console.log('userInfo',userInfor)
126 
+			// 	createOrder({
127 
+			// 		money: '1',
128 
+			// 		mer_id: '461',
129 
+			// 		trade_type: "WX",
130 
+			// 		avatar: userInfor.headimgurl,
131 
+			// 		nickname: userInfor.nickname,
132 
+			// 		pay_user_id: userInfor.unionid
133 
+			// 	}).then(res => {
134 
+			// 		if (res.status == 200) {
135 
+			// 			// 支付
136 
+			// 			jsapiPay({
137 
+			// 				out_trade_no: res.data.out_trade_no,
138 
+			// 				type: 'HF'
139 
+			// 			}).then(resPay => {
140 
+			// 				if (resPay.status == 200) {
141 
+
142 
+			// 					var pay_info = JSON.parse(resPay.data.expend.pay_info)
143 
+			// 					wx.config({
144 
+			// 						debug: true, // 调试时可开启
145 
+			// 						appId: 'wxfb755febdb800f23', // <!-- replace -->
146 
+			// 						timestamp: pay_info.timeStamp, // 必填，填任意数字即可
147 
+			// 						nonceStr: pay_info.nonceStr, // 必填，填任意非空字符串即可
148 
+			// 						signature: pay_info.paySign, // 必填，填任意非空字符串即可
149 
+			// 						jsApiList: ['chooseWXPay'], // 必填，随意一个接口即可
150 
+			// 						openTagList: ['wx-open-launch-weapp'], // 填入打开小程序的开放标签名
151 
+			// 					})
152 
+			// 				}
153 
+			// 			}).catch(resPay => {
154 
+			// 				alert(resPay.message)
155 
+			// 			})
156 
+			// 		} else {
157 
+			// 			alert(res.message)
158 
+			// 		}
159 
+			// 	}).catch(resMer => {
160 
+			// 		alert(resMer.message)
161 
+			// 	})
162 
+			// }
163 
+			// console.log('初始化完毕')
164 
+		},
165 
+
166 
+		methods: {
167 
+			tankuan() {
168 
+				this.tu = true;
169 
+			},
170 
+			gotoCenter() {
171 
+				window.location.href = "https://app.bjtdba.com/share/download.html";
172 
+			},
173 
+
174 
+			clickAction() {
175 
+				// if (this.$isWechat()) {
176 
+				// 	console.log('微信')
177 
+				// } else {
178 
+				// 	this.centerDialogVisible = true;
179 
+				// }
180 
+				this.centerDialogVisible = true;
181 
+			}
182 
+		}
183 
+	}
184 
+</script>
185 
+
186 
+<style scoped>
187 
+	* {
188 
+		margin: 0;
189 
+		padding: 0;
190 
+	}
191 
+
192 
+	#userfully {
193 
+		width: 100%;
194 
+		height: 100vh;
195 
+		display: flex;
196 
+		flex-direction: column;
197 
+		align-items: center;
198 
+		text-align: center;
199 
+	}
200 
+
201 
+	.back_img {
202 
+		width: 100%;
203 
+		height: 50%;
204 
+	}
205 
+
206 
+	.dialog_div {
207 
+		background-color: transparent;
208 
+		z-index: 999;
209 
+		position: absolute;
210 
+		top: 15%;
211 
+	}
212 
+
213 
+	.fk_head {
214 
+		position: absolute;
215 
+		top: 1.2rem;
216 
+		width: 4rem;
217 
+		height: 1.5rem;
218 
+		display: flex;
219 
+		justify-content: space-between;
220 
+		align-content: center;
221 
+		font-size: 0.5rem;
222 
+		font-family: PingFangSC, PingFang SC;
223 
+		font-weight: 500;
224 
+		color: #FFFFFF;
225 
+		line-height: 1.5rem;
226 
+
227 
+	}
228 
+
229 
+	.content_t {
230 
+		padding-bottom: 0.4rem;
231 
+		border-bottom: 1px solid #ccc;
232 
+	}
233 
+
234 
+	.zf_icon {
235 
+		width: 1.5rem;
236 
+		height: 1.5rem;
237 
+
238 
+	}
239 
+
240 
+	.fk_content {
241 
+		width: 8rem;
242 
+		height: 4rem;
243 
+		position: absolute;
244 
+		top: 25%;
245 
+	}
246 
+
247 
+	.content_text {
248 
+		padding-top: 0.2rem;
249 
+	}
250 
+
251 
+	.flex_o {
252 
+		display: flex;
253 
+		justify-content: space-between;
254 
+		flex: 1;
255 
+		height: 0.6rem;
256 
+		font-size: 0.4rem;
257 
+		font-family: PingFangSC, PingFang SC;
258 
+		font-weight: 400;
259 
+		color: #333333;
260 
+		line-height: 0.6rem;
261 
+
262 
+	}
263 
+
264 
+	.content_title {
265 
+		margin-top: 0.2rem;
266 
+		height: 0.5rem;
267 
+		font-size: 0.45rem;
268 
+		font-family: PingFangSC, PingFang SC;
269 
+		font-weight: 400;
270 
+		color: #333333;
271 
+		line-height: 0.5rem;
272 
+	}
273 
+
274 
+	.content_price {
275 
+		height: 1rem;
276 
+		font-size: 0.65rem;
277 
+		font-family: PingFangSC, PingFang SC;
278 
+		font-weight: 400;
279 
+		color: #333333;
280 
+		line-height: 1rem;
281 
+	}
282 
+
283 
+
284 
+	.fully-btn {
285 
+		position: absolute;
286 
+		top: 52%;
287 
+		text-align: center;
288 
+		background: #FE0032;
289 
+		color: #ffffff;
290 
+		border-radius: 5px;
291 
+		font-size: 16px;
292 
+		display: flex;
293 
+		align-items: center;
294 
+		justify-content: center;
295 
+		width: 40%;
296 
+		padding: 7px;
297 
+		margin: 0 auto 30px;
298 
+	}
299 
+
300 
+	.fully-btn1 {
301 
+		position: absolute;
302 
+		top: 52%;
303 
+		text-align: center;
304 
+		background: #FE0032;
305 
+		color: #ffffff;
306 
+		border-radius: 5px;
307 
+		border: none;
308 
+		font-size: 16px;
309 
+		display: flex;
310 
+		align-items: center;
311 
+		justify-content: center;
312 
+		width: 60%;
313 
+		padding: 7px;
314 
+		margin: 0 auto 30px;
315 
+
316 
+	}
317 
+
318 
+	.yqhy_img {
319 
+		position: absolute;
320 
+		top: 61%;
321 
+		width: 90%;
322 
+		height: 15%;
323 
+	}
324 
+
325 
+	.ewm_img {
326 
+		width: 100%;
327 
+		height: 10rem;
328 
+	}
329 
+</style>

+ 93 - 0
src/components/SuccessFully.vue
Bestand weergeven 

@@ -0,0 +1,93 @@
1 
+<template>
2 
+  <div id="userfully">
3 
+      <div class="fully-nav">
4 
+          <img class="fully-img" src="https://cdn.bjtdba.com/vod/image/2023-06-08/20230608104700153.png" alt="">
5 
+          <div class="fully-txt">恭喜您<br />已经成为储蓄保用户<br />请登录储蓄保app查看您的收益。</div>
6 
+          <div class="fully-btn" @click="gotoCenter()">打开储蓄保APP</div>
7 
+      </div>
8 
+
9 
+  </div>
10 
+</template>
11 
+
12 
+<script>
13 
+export default {
14 
+  name: 'OpenPension',
15 
+  props: {
16 
+    msg: String
17 
+  },
18 
+  data() {
19 
+    return {
20 
+
21 
+    }
22 
+  },
23 
+  created(){
24 
+      //不是微信并且不是支付宝
25 
+      if (!this.$isWechat() && !this.$isAlipay()) {
26 
+          alert('请使用微信或支付宝扫码');
27 
+      }
28 
+  },
29 
+  methods: {
30 
+      gotoCenter(){
31 
+          window.location.href = "https://app.bjtdba.com/share/download.html";
32 
+      }
33 
+  }
34 
+}
35 
+</script>
36 
+
37 
+<style scoped>
38 
+h3 {
39 
+  margin: 40px 0 0;
40 
+}
41 
+ul {
42 
+  list-style-type: none;
43 
+  padding: 0;
44 
+}
45 
+li {
46 
+  display: inline-block;
47 
+  margin: 0 10px;
48 
+}
49 
+body {
50 
+  background: #F6F6F6;
51 
+}
52 
+* {
53 
+  margin: 0;
54 
+  padding: 0;
55 
+}
56 
+#userfully {
57 
+  width: 100%;
58 
+  height: 100vh;
59 
+  display: flex;
60 
+  flex-direction: column;
61 
+  align-items: center;
62 
+  background: #F6F6F6;
63 
+  text-align: center;
64 
+}
65 
+.fully-nav{
66 
+  position: absolute;
67 
+  top: 30%;
68 
+  left: 50%;
69 
+  transform: translate(-50%, -50%);
70 
+  width: 100%;
71 
+}
72 
+.fully-img{
73 
+  width: 4.5rem;
74 
+  height: 4.5rem;
75 
+}
76 
+.fully-txt{
77 
+  margin-top: 20px;
78 
+  font-size: 18px;
79 
+}
80 
+.fully-btn{
81 
+    text-align: center;
82 
+    background: #FE0032;
83 
+    color: #ffffff;
84 
+    border-radius: 5px;
85 
+    font-size: 16px;
86 
+    display: flex;
87 
+    align-items: center;
88 
+    justify-content: center;
89 
+    width: 40%;
90 
+  padding: 7px;
91 
+  margin: 30px auto 0;
92 
+}
93 
+</style>

+ 509 - 0
src/components/UserLogin.vue
Bestand weergeven 

@@ -0,0 +1,509 @@
1 
+<template>
2 
+  <div id="payUser">
3 
+    <div v-show="!authorStatus" class="pay-login">
4 
+      <img class="loginImg" src="https://cdn.bjtdba.com/vod/image/2023-04-17/20230417171633173.png" alt="">
5 
+      <div class="login-phone">
6 
+        <input type="number" style="width:60%;" value="" v-model="mobile" placeholder="请输入手机号" placeholder-style="color:#999;" oninput="if(value.length>11)value=value.slice(0,11)"/>
7 
+        <div class="get-code" @click="getCode">{{ getCodeText }}</div>
8 
+      </div>
9 
+      <div class="login-phone">
10 
+        <input type="number" value="" v-model="mobileCode" placeholder="请输入验证码" placeholder-style="color:#999;" />
11 
+      </div>
12 
+      <div class="login-btn" @click="bindPhone(mobile, 2)">绑定手机号</div>
13 
+    </div>
14 
+    <div class="login-hint">
15 
+      <div>1.如右下方出现《使用完整服务》请点击进行授权。</div>
16 
+      <div>2.输入手机号进行手机号绑定。</div>
17 
+    </div>
18 
+  </div>
19 
+</template>
20 
+
21 
+<script>
22 
+// import { PhoneNumberServer } from 'aliyun_numberauthsdk_web';
23 
+import {wxcheck, wechatAuthorization, binding, aliSign, alicheck, userPhoneLogOnCode} from '../api/index'
24 
+export default {
25 
+  name: 'HelloWorld',
26 
+  props: {
27 
+    msg: String
28 
+  },
29 
+  data() {
30 
+    return {
31 
+      userpay: null,
32 
+      userInfor: {},
33 
+      aliUserInfor: {},
34 
+      aliAccount: {},
35 
+      merContent:{
36 
+        mer_name: '',
37 
+        mer_banner: ''
38 
+      },
39 
+      paymentAmount: '',
40 
+      trade_type: '',
41 
+
42 
+      authorStatus:true,
43 
+
44 
+
45 
+      mobile: "", // 手机号
46 
+      mobileCode: '', // 验证码
47 
+      getCodeText: '获取验证码', // 获取验证码按钮文字
48 
+      getCodeisWaiting: false, // 获取验证码按钮状态
49 
+
50 
+    }
51 
+  },
52 
+  created(){
53 
+    //获取参数
54 
+    this.userpay = this.parseParms()
55 
+
56 
+    //跳转微信授权登陆
57 
+    let local = window.location.href;
58 
+    if (local.split(':')[0] == 'http') {
59 
+      local = local.split(':')[0] + 's:' + local.split(':')[1]
60 
+    } else {
61 
+      local = window.location.href;
62 
+    }
63 
+    // wx66f5f8def2b755da
64 
+    let wechatHrefurl = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" + 'wx6ac5b448b75117d9' +
65 
+        "&redirect_uri=" + encodeURIComponent(local) +
66 
+        "&response_type=code&scope=snsapi_userinfo&forcePopup=true&forceSnapShot=true&state=STATE#wechat_redirect";
67 
+
68 
+    //不是微信并且不是支付宝
69 
+    if (!this.$isWechat() && !this.$isAlipay()) {
70 
+      this.authorStatus = true;
71 
+      alert('请使用微信或支付宝扫码');
72 
+    }
73 
+
74 
+    //判断是不是微信
75 
+    if (this.$isWechat()) {
76 
+      this.trade_type = "WX";
77 
+
78 
+      if (!this.userpay || this.userpay.code == "" || this.userpay.code == null) {
79 
+        window.location.href = wechatHrefurl;
80 
+      } else {
81 
+        this.user()
82 
+      }
83 
+
84 
+      this.authorStatus = false;
85 
+    }
86 
+    //判断是不是支付宝
87 
+    if (this.$isAlipay()) {
88 
+      this.trade_type = "ALI";
89 
+
90 
+      if (!this.userpay || this.userpay.auth_code == null || this.userpay.auth_code == "") {
91 
+        local = local.replace('#/', '');
92 
+
93 
+        let aliHrefurl =
94 
+            "https://openauth.alipay.com/oauth2/publicAppAuthorize.htm?app_id=2021003191617008&scope=auth_user&redirect_uri=" +
95 
+            encodeURIComponent(local)
96 
+        window.location.href = aliHrefurl;
97 
+
98 
+      } else {
99 
+        this.aliUser()
100 
+      }
101 
+
102 
+      this.authorStatus = false;
103 
+    }
104 
+  },
105 
+  // // 引入支付宝jsapi
106 
+  // mounted() {
107 
+  //     const s = document.createElement('script');
108 
+  //     s.type = 'text/javascript';
109 
+  //     s.src = 'https://gw.alipayobjects.com/as/g/h5-lib/alipayjsapi/3.1.1/alipayjsapi.min.js';
110 
+  //     document.body.appendChild(s);
111 
+  //       window.onload =()=>{   //初始化产生一个全局变量 AlipayJSBridge
112 
+  //         this.readys()
113 
+  //       }
114 
+  // },
115 
+  methods: {
116 
+    // readys(callback) {
117 
+    //     if (window.AlipayJSBridge) {
118 
+    //         callback && callback();
119 
+    //     } else {
120 
+    //         document.addEventListener('AlipayJSBridgeReady', callback, false);
121 
+    //     }
122 
+    // },
123 
+    getCode() {
124 
+      if (this.getCodeisWaiting) return;
125 
+
126 
+      if (!/^1[2-9]\d{9}$/.test(this.mobile)) {
127 
+        alert(!this.mobile ? '请输入手机号' : '请填写正确手机号码')
128 
+        return false;
129 
+      }
130 
+      this.getCodeText = "发送中..."
131 
+      this.getCodeisWaiting = true;
132 
+      userPhoneLogOnCode({phone:this.mobile }).then(res => {
133 
+        console.log(res);
134 
+        if(res.status == 200){
135 
+          // alert('发送成功，请注意查收')
136 
+          this.setTimer();
137 
+        }else{
138 
+          alert(res.message)
139 
+          this.getCodeText = '获取验证码';
140 
+          this.getCodeisWaiting = false;
141 
+        }
142 
+      }).catch(res => {
143 
+        alert(res.message)
144 
+      })
145 
+    },
146 
+    setTimer() {
147 
+      clearInterval(this.Timer);
148 
+      let holdTime = 60;
149 
+      this.getCodeText = "重新获取(60)"
150 
+      this.Timer = setInterval(() => {
151 
+        if (holdTime <= 0) {
152 
+          this.getCodeisWaiting = false;
153 
+          this.getCodeText = "获取验证码"
154 
+          clearInterval(this.Timer);
155 
+          return;
156 
+        }
157 
+        this.getCodeText = "重新获取(" + holdTime + ")"
158 
+        holdTime--;
159 
+
160 
+      }, 1000)
161 
+    },
162 
+    user() {
163 
+      wechatAuthorization(this.userpay.code).then(res => {
164 
+        console.log(res);
165 
+        if(res.status == 200){
166 
+          this.userInfor = res.data;
167 
+          this.initWxConfig(res.data.unionid);
168 
+        }
169 
+      }).catch(res => {
170 
+        alert(res.message)
171 
+      })
172 
+    },
173 
+    aliUser() {
174 
+      console.log(this.userpay, this.userpay.code);
175 
+      aliSign({code: this.userpay.auth_code, type: "h5pay"}).then(res => {
176 
+        if(res.status == 200){
177 
+          this.aliUserInfor = res.data;
178 
+          this.initAliConfig(res.data.user_id);
179 
+        }
180 
+      }).catch(res => {
181 
+        alert(res.message)
182 
+      })
183 
+    },
184 
+    // 微信授权登录
185 
+    initWxConfig(userOpenid) {
186 
+      wxcheck(userOpenid).then(res => {
187 
+        if(res.status == 400){
188 
+          // 未绑定手机号，获取token，绑定手机号
189 
+          // this.getALToken();
190 
+        }
191 
+        if(res.status == 200){
192 
+          this.authorStatus = true;
193 
+          // 已绑定手机号，获取商户
194 
+          // this.getMer();
195 
+
196 
+          localStorage.setItem("token", res.data.token);
197 
+          this.$router.push({path: '/successFully'});
198 
+
199 
+        }
200 
+      }).catch(res => {
201 
+        alert(res.message)
202 
+      })
203 
+    },
204 
+    // 支付宝授权登录
205 
+    initAliConfig(userOpenid) {
206 
+      alicheck(userOpenid).then(res => {
207 
+        if(res.status == 200){
208 
+
209 
+          if(res.data.code == 400){
210 
+            // 未绑定手机号，获取token，绑定手机号
211 
+            // this.getALToken();
212 
+
213 
+          }else{
214 
+            this.authorStatus = true;
215 
+            // 已绑定手机号，获取商户
216 
+            this.aliAccount = res.data.user;
217 
+            localStorage.setItem("token", res.data.token);
218 
+            this.$router.push({path: '/successFully'});
219 
+          }
220 
+
221 
+        }
222 
+      }).catch(res => {
223 
+        alert(res.message)
224 
+      })
225 
+    },
226 
+    // 绑定手机号
227 
+    bindPhone(dataMobile, type){
228 
+      let that = this;
229 
+      if(type == 2 && (dataMobile == "" || that.mobileCode == "")){
230 
+        alert('请完善登录信息')
231 
+        return false;
232 
+      }
233 
+      if (!/^1[2-9]\d{9}$/.test(dataMobile)) {
234 
+        alert(!this.mobile ? '请输入手机号' : '请填写正确手机号码')
235 
+        return false;
236 
+      }
237 
+      binding({
238 
+        phone: dataMobile,
239 
+        sms: type,
240 
+        sms_code: type == 1 ? 1 : that.mobileCode,
241 
+        third_user_id: that.trade_type == "WX" ? that.userInfor.unionid : that.aliUserInfor.user_id,
242 
+        type: that.trade_type == "WX" ? 1 : 2
243 
+      }).then(res => {
244 
+        if(res.status == 200){
245 
+
246 
+          if(that.trade_type == "ALI"){
247 
+            that.aliAccount = res.data.user;
248 
+          }
249 
+
250 
+          localStorage.setItem("token", res.data.token);
251 
+          this.$router.push({path: '/successFully'});
252 
+        }
253 
+      }).catch(res => {
254 
+        alert(res.message)
255 
+      })
256 
+    },
257 
+    parseParms() {
258 
+      if(window.location.href.split("?")[1]){
259 
+        var str = window.location.href.split("?")[1];
260 
+        var pieces = str.split("&"), data = {}, i, parts;
261 
+
262 
+        for (i = 0; i < pieces.length; i++) {
263 
+          parts = pieces[i].split("=");
264 
+          if (parts.length < 2) {
265 
+            parts.push("");
266 
+          }
267 
+          data[decodeURIComponent(parts[0])] = decodeURIComponent(parts[1]);
268 
+        }
269 
+        return data
270 
+      }
271 
+    }
272 
+  }
273 
+}
274 
+</script>
275 
+
276 
+<!-- Add "scoped" attribute to limit CSS to this component only -->
277 
+<style scoped>
278 
+h3 {
279 
+  margin: 40px 0 0;
280 
+}
281 
+ul {
282 
+  list-style-type: none;
283 
+  padding: 0;
284 
+}
285 
+li {
286 
+  display: inline-block;
287 
+  margin: 0 10px;
288 
+}
289 
+body {
290 
+  background: #F8F8F8;
291 
+}
292 
+* {
293 
+  margin: 0;
294 
+  padding: 0;
295 
+}
296 
+
297 
+#payUser {
298 
+  width: 100%;
299 
+  height: 100%;
300 
+  display: flex;
301 
+  flex-direction: column;
302 
+  align-items: center;
303 
+  margin-top: 60px;
304 
+  box-sizing: border-box;
305 
+}
306 
+.pay-login{
307 
+  width: 100%;
308 
+  display: flex;
309 
+  flex-direction: column;
310 
+  align-items: center;
311 
+}
312 
+.loginImg{
313 
+  width: 100px;
314 
+  margin-bottom: 35px;
315 
+}
316 
+.login-phone{
317 
+  border-bottom: 1px solid #aaa;
318 
+  display: flex;
319 
+  justify-content: space-between;
320 
+  width: 70%;
321 
+  padding: 15px;
322 
+  margin-bottom: 15px;
323 
+  font-size: 15px;
324 
+}
325 
+input{
326 
+  border: none;
327 
+  outline: none;
328 
+  background-color:rgba(0,0,0,0);
329 
+  background-color:transparent;
330 
+  font-size: 15px;
331 
+}
332 
+.get-code {
333 
+  color: #FE0032;
334 
+}
335 
+.login-btn{
336 
+  width: 70%;
337 
+  text-align: center;
338 
+  height: 42px;
339 
+  line-height: 42px;
340 
+  background: #FE0032;
341 
+  color: #ffffff;
342 
+  border-radius: 5px;
343 
+  font-size: 18px;
344 
+  margin-top: 30px;
345 
+  display: flex;
346 
+  align-items: center;
347 
+  justify-content: center;
348 
+}
349 
+.pay_name {
350 
+  width: 6.2rem;
351 
+  height: 0.9rem;
352 
+  margin: 0.5rem 0 0.5rem 0;
353 
+  display: flex;
354 
+  justify-content: space-between;
355 
+  align-items: center;
356 
+}
357 
+
358 
+.pay_name_left {
359 
+  height: 100%;
360 
+  display: flex;
361 
+  flex-direction: column;
362 
+  align-items: center;
363 
+  justify-content: space-between;
364 
+}
365 
+
366 
+.pay_name_left_top {
367 
+  font-size: 0.34rem;
368 
+  font-weight: 600;
369 
+  color: #333333;
370 
+}
371 
+
372 
+.pay_name_left_bottom {
373 
+  font-size: 0.26rem;
374 
+  font-weight: 400;
375 
+  color: #999999;
376 
+}
377 
+
378 
+.pay_name_right {
379 
+  width: 0.9rem;
380 
+  height: 0.9rem;
381 
+  background: #D8D8D8;
382 
+  border: 0.01rem solid #979797;
383 
+}
384 
+
385 
+.pay_name_right img {
386 
+  width: 100%;
387 
+  height: 100%;
388 
+  display: block;
389 
+}
390 
+
391 
+input::-webkit-input-placeholder {
392 
+  /*WebKit browsers*/
393 
+  color: #999999;
394 
+  font-size: 0.4rem;
395 
+  margin-top: 13rem;
396 
+
397 
+}
398 
+
399 
+input::-moz-input-placeholder {
400 
+  /*Mozilla Firefox*/
401 
+  color: #999999;
402 
+  font-size: 0.4rem;
403 
+  margin-top: 13rem;
404 
+
405 
+}
406 
+
407 
+input::-ms-input-placeholder {
408 
+  /*Internet Explorer*/
409 
+  color: #999999;
410 
+  font-size: 0.4rem;
411 
+  margin-top: 13rem;
412 
+
413 
+}
414 
+
415 
+.pay_input {
416 
+  width: 100%;
417 
+  height: 3.48rem;
418 
+  background: #FFFFFF;
419 
+  border-radius: 0.16rem;
420 
+  display: flex;
421 
+  flex-direction: column;
422 
+  align-items: center;
423 
+  justify-content: space-between;
424 
+}
425 
+
426 
+.pay_input-top {
427 
+  width: 6.36rem;
428 
+  height: 2.63rem;
429 
+  border-bottom: 0.01rem solid #E5E5E5;
430 
+}
431 
+
432 
+.pay_input-top-shifu {
433 
+  margin: 0.54rem 0 0 0.41rem;
434 
+  font-size: 0.26rem;
435 
+  font-weight: 400;
436 
+  color: #333333;
437 
+}
438 
+
439 
+.pay_input-top-manei {
440 
+  margin: 0.12rem 0 0 0.41rem;
441 
+  height: 1.19rem;
442 
+  display: flex;
443 
+  align-items: center;
444 
+}
445 
+
446 
+.pay_input-top-manei span {
447 
+  font-size: 0.64rem;
448 
+  font-weight: 600;
449 
+  color: #333333;
450 
+}
451 
+
452 
+.pay_input-top-manei input {
453 
+  width: 100%;
454 
+  height: 0.99rem;
455 
+  border: none;
456 
+  outline: medium;
457 
+  margin-left: 0.27rem;
458 
+  font-size: 0.9rem;
459 
+}
460 
+
461 
+.pay_input-bottom {
462 
+  width: 6.36rem;
463 
+  height: 0.84rem;
464 
+  display: flex;
465 
+  justify-content: center;
466 
+  align-items: center;
467 
+  font-size: 0.24rem;
468 
+  font-weight: 400;
469 
+  color: #FE0032;
470 
+}
471 
+
472 
+.pay_input-bottom-left {
473 
+  width: 0.3rem;
474 
+  height: 0.3rem;
475 
+}
476 
+
477 
+.pay_input-bottom-left img {
478 
+  width: 100%;
479 
+  height: 100%;
480 
+  display: block;
481 
+}
482 
+
483 
+.pay_input-bottom-right {
484 
+  margin-left: 0.08rem;
485 
+}
486 
+.pay_bottom {
487 
+  width: 6.86rem;
488 
+  height: 0.88rem;
489 
+  background: linear-gradient(179deg, #FE7577 0%, #FE0032 100%);
490 
+  border-radius: 1rem;
491 
+  /* margin-top: 7.5rem; */
492 
+  position: fixed;
493 
+  bottom: 0.5rem;
494 
+  text-align: center;
495 
+  line-height: 0.88rem;
496 
+  font-size: 0.32rem;
497 
+  font-weight: 600;
498 
+  color: #FFFFFF;
499 
+}
500 
+
501 
+.login-hint{
502 
+  color: #FE0032;
503 
+  font-size: 14px;
504 
+  position: fixed;
505 
+  bottom: 1.2rem;
506 
+  font-weight: bold;
507 
+  line-height: 25px;
508 
+}
509 
+</style>

+ 37 - 0
src/main.js
Bestand weergeven 

@@ -0,0 +1,37 @@
1 
+import Vue from 'vue'
2 
+import App from './App.vue'
3 
+
4 
+import 'lib-flexible'
5 
+
6 
+import ElementUI from 'element-ui'
7 
+
8 
+Vue.use(ElementUI);
9 
+
10 
+// import Vconsole from 'vconsole'
11 
+// let vConsole = new Vconsole()
12 
+// Vue.use(vConsole);
13 
+
14 
+import router from './router'
15 
+
16 
+import { PhoneNumberServer } from 'aliyun_numberauthsdk_web';  //ES6
17 
+Vue.prototype.phoneNumberServer = new PhoneNumberServer();
18 
+
19 
+import axios from 'axios'
20 
+// Vue.use(axios)
21 
+Vue.prototype.axios = axios;
22 
+
23 
+Vue.config.productionTip = false
24 
+
25 
+Vue.prototype.$isWechat = function () {
26 
+  const ua = window.navigator.userAgent.toLowerCase();
27 
+  return ua.indexOf('micromessenger') !== -1;
28 
+};
29 
+
30 
+Vue.prototype.$isAlipay = function () {
31 
+  return window.AlipayJSBridge !== undefined;
32 
+};
33 
+
34 
+new Vue({
35 
+  router,
36 
+  render: h => h(App),
37 
+}).$mount('#app')

+ 77 - 0
src/router/index.js
Bestand weergeven 

@@ -0,0 +1,77 @@
1 
+import Vue from 'vue'
2 
+import VueRouter from 'vue-router'
3 
+import Home from '../components/HelloWorld'
4 
+import OrderPay from '../components/OrderPay'
5 
+import OpenPension from '../components/OpenPension'
6 
+import UserLogin from '../components/UserLogin'
7 
+import SuccessFully from '../components/SuccessFully'
8 
+import Success from '../components/Success'
9 
+// import { Message } from "element-ui";
10 
+
11 
+
12 
+Vue.use(VueRouter)
13 
+
14 
+const routes = [
15 
+  {
16 
+    path: '/',
17 
+    name: 'Home',
18 
+    component: Home,
19 
+  },
20 
+  {
21 
+    path: '/orderPay',
22 
+    name: 'OrderPay ',
23 
+    component: OrderPay,
24 
+  },
25 
+  {
26 
+    path: '/openPension',
27 
+    name: 'OpenPension ',
28 
+    component: OpenPension,
29 
+  },
30 
+  {
31 
+    path: '/userLogin',
32 
+    name: 'UserLogin ',
33 
+    component: UserLogin,
34 
+  },
35 
+  {
36 
+    path: '/successFully',
37 
+    name: 'SuccessFully ',
38 
+    component: SuccessFully,
39 
+  },
40 
+  {
41 
+    path: '/success',
42 
+    name: 'Success ',
43 
+    component: Success,
44 
+  }
45 
+]
46 
+
47 
+const router = new VueRouter({
48 
+  mode: 'history',
49 
+  base: process.env.BASE_URL,
50 
+  routes
51 
+})
52 
+
53 
+router.beforeEach((to, from, next) => {
54 
+//   if (to.meta.requireAuth) {
55 
+//     var num = localStorage.getItem('token');
56 
+//     if (num) {
57 
+//       next();
58 
+//     }
59 
+//     else {
60 
+//       Message({
61 
+//         message: "请授权",
62 
+//         type: "error",
63 
+//         duration: 2000,
64 
+//       });
65 
+//       next({
66 
+//         path: '/',
67 
+//       })
68 
+//     }
69 
+//   }
70 
+//   else {
71 
+    next();
72 
+//   }
73 
+}
74 
+)
75 
+
76 
+
77 
+export default router

+ 4 - 0
vue.config.js
Bestand weergeven 

@@ -0,0 +1,4 @@
1 
+const { defineConfig } = require('@vue/cli-service')
2 
+module.exports = defineConfig({
3 
+  transpileDependencies: true
4 
+})

File diff suppressed because it is too large
+ 6522 - 0
yarn.lock