line pay add

package.json

@@ -7,6 +7,7 @@
     "build": "vue-cli-service build"
   },
   "dependencies": {
+    "@line/liff": "^2.21.3",
     "antd": "^4.22.7",
     "axios": "^0.27.2",
     "babel-plugin-import": "^1.13.5",
@@ -20,6 +21,7 @@
     "vant": "^2.12.48",
     "vue": "^2.6.11",
     "vue-i18n": "^7.3.2",
+    "vue-loading-template": "^1.3.2",
     "vue-router": "^3.2.0",
     "vuex": "^3.4.0",
     "vuex-along": "^1.2.13"

public/index.html

@@ -5,6 +5,8 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <script src="https://static.line-scdn.net/liff/edge/2.1/sdk.js"></script>
+    <script src="<%= BASE_URL %>vconsole.min.js"></script>
     <!-- <title><%= htmlWebpackPlugin.options.title %></title> -->
     <title>一日游</title>
   </head>

src/App.vue

@@ -43,6 +43,10 @@
     </div>
 </template>
 <script>
+import { setToken } from "@/utils/auth"; // get token from cookie
+import { login, lineLogin } from "@/api/login.js";
+import Cookies from 'js-cookie'
+
 export default {
     name: "App",
     computed: {
@@ -53,6 +57,106 @@ export default {
             return this.$store.state.app.navbarType;
         },
     },
+  data: () => ({
+    api_loading: false,
+    initialized: false,
+    loggedIn: false,
+    inClient: false,
+    name: "",
+    userId: "",
+    pictureUrl: "",
+  }),
+  created: function() {
+    console.log(`process.env.ENV: ${process.env.ENV}`)
+    console.log(`process.env.VUE_APP_LIFF_ID: ${process.env.VUE_APP_LIFF_ID}`)
+  },
+  mounted: function() {
+    this.initializeLiff()
+    if (process.env.ENV != 'production') {
+      this.initVConsole()
+    }
+  },
+  methods: {
+    initializeLiff: function () {
+      this.api_loading = true
+      liff.init(
+        {
+          liffId: process.env.VUE_APP_LIFF_ID,
+          withLoginOnExternalBrowser: true,
+        },
+        data => {
+          this.initialized = true
+          this.loggedIn = liff.isLoggedIn()
+          this.inClient = liff.isInClient()
+          this.api_loading = false
+        },
+        err => {
+          console.log('LIFF initialization failed', err)
+          this.api_loading = false
+        }
+      ).then(() => {
+         // Start to use liff's api
+         liff
+           .getProfile().then(profile => {
+             this.name = profile.displayName
+             this.pictureUrl = profile.pictureUrl
+             this.userId = profile.userId
+             //application login
+             //console.log(`profile.userId: ${this.userId}`)
+             //console.log(`AccessToken: ${liff.getAccessToken()}`)
+             this.logins()
+           }).catch(err => {
+             console.log(`Error at getProfile: ${err}`)
+             this.name = ""
+           })
+       });
+    },
+    initVConsole: async function() {
+      window.vConsole = new window.VConsole({
+          defaultPlugins: ['system', 'network', 'element', 'storage'],
+          maxLogNumber: 1000,
+          onReady: function () {
+              console.log('vConsole is ready.')
+          },
+          onClearLog: function () {
+              console.log('on clearLog')
+          }
+      })
+    },
+    doLogout: function() {
+      if (liff.isLoggedIn()) {
+        liff.logout()
+        this.loggedIn = false
+        window.location.reload()
+      }
+    },
+    logins: function () {
+         let requer = {
+           username: this.userId,
+           password: '',
+           name : this.name,
+           deptId : this.$route.query.busid,
+         };
+        //获取token
+        this.$store
+            .dispatch("user/LineLogin", requer)
+            .then(() => {
+                //Cookies.set('phone',this.loginForm.phone);
+                // Cookies.set('password',this.loginForm.password);
+                // 获取用户信息
+                this.$store.dispatch("user/GetInfo").then((res) => {
+                    if(res.code==200){
+                        //this.$router.push({ path: "/" }).catch(() => {});
+                        console.log(`line login ok.`)
+                    }
+                });
+            })
+            .catch((err) => {
+                console.log(`linelogin Error at logins: ${err}`)
+            });
+    },
+
+  }
 };
 //这里做一个rem的fong-size的适应 默认size是1rem=100px 默认设计图是375的
 var windowWidth = document.documentElement.getBoundingClientRect().width;
@@ -60,6 +164,7 @@ windowWidth = windowWidth > 750 ? 750 : windowWidth;
 var fontSize = windowWidth / 3.75;
 document.documentElement.style.fontSize = fontSize + "px";
 // store.state.app.navbarShow
+
 </script>
 <style lang="scss">
 #app {

src/api/comp/home.js

@@ -107,4 +107,22 @@ export function getOrderDetail(id) {
         url: '/h5/personal/getOrderDetail/'+id,
         method: 'get',
     })
+}
+
+//订单確認
+export function confirm(data) {
+    return request({
+        url: '/h5/order/confirm',
+        method: 'post',
+        data: data
+    })
+}
+
+//订单キャンセル
+export function cancel(data) {
+    return request({
+        url: '/h5/order/cancel',
+        method: 'post',
+        data: data
+    })
 }

src/api/login.js

@@ -15,7 +15,17 @@ export function login(data) {
     data: data
   })
 }
-
+// line注册方法
+export function lineLogin(data) {
+  return request({
+    url: '/h5/system/lineLogin',
+    headers: {
+      isToken: false
+    },
+    method: 'post',
+    data: data
+  })
+}
 // 注册方法
 export function register(data) {
   return request({

src/lang/zh.js

@@ -80,7 +80,7 @@ export default {
     integral:'剩余积分',
     integralMssage1:'可抵扣',
     integralMssage2:'元',
-    zfb:'支付宝支付',
+    zfb:'LINE PAY',
     total:'合计',
     submit:'提交订单',
     none:'暂无数据',

src/main.js

@@ -4,6 +4,7 @@ import router from './router'
 import store from './store'
 import i18n from "./lang"; // internationalization
 import validate from '@/utils/js_sdk/fshjie-formvalidate/ys-validate.js'
+import liff from '@line/liff' //line liff
 import './permission' // 路由守卫 
 import "@/assets/font/iconfont.css";
 //全局样式引入

src/router/index.js

@@ -118,7 +118,16 @@ const routes = [
     name: 'DetailTtoBePaid',
     component: () => import(/* 个人中心-待付款 */ '../views/personal/pages/detailTtoBePaid/detailTtoBePaid.vue')
   },
-  
+  {
+    path: '/linePayConfirm',
+    name: 'LinePayConfirm',
+    component: () => import(/* LINE 确认订单 */ '../views/home/pages/linePay/confirm.vue')
+  },
+  {
+    path: '/linePayCancel',
+    name: 'LinePayCancel',
+    component: () => import(/* LINE 确认订单 */ '../views/home/pages/linePay/cancel.vue')
+  },
 ]
 
 const router = new VueRouter({

src/store/modules/user.js

@@ -1,5 +1,6 @@
 import {
   login,
+  lineLogin,
   logout,
   getInfo
 } from '@/api/login'
@@ -67,7 +68,23 @@ const actions = {
       })
     })
   },
-
+  LineLogin({
+      commit
+  }, userInfo) {
+    const username = userInfo.username.trim()
+    const password = userInfo.password
+    const name = userInfo.name
+    const deptId = userInfo.deptId
+    return new Promise((resolve, reject) => {
+      lineLogin({username, password, name, deptId}).then(res => {
+        setToken(res.msg)
+        commit('SET_TOKEN', res.msg)
+        resolve(res)
+      }).catch(error => {
+        reject(error)
+      })
+    })
+  },
   // 获取用户信息
   GetInfo({
     commit,

src/utils/request.js

@@ -22,7 +22,7 @@ const service = axios.create({
 service.interceptors.request.use(config => {
   // 是否需要设置 token
   const isToken = (config.headers || {}).isToken === false
-  const whiteList=['/h5/home/selectTypeList','/h5/home/selectPreferredList','/h5/home/selectSalesTop10','/h5/system/getBusCompanyList','/h5/system/login','/h5/system/register'];//不需携带token的请求路径
+  const whiteList=['/h5/home/selectTypeList','/h5/home/selectPreferredList','/h5/home/selectSalesTop10','/h5/system/getBusCompanyList','/h5/system/login','/h5/system/lineLogin','/h5/system/register'];//不需携带token的请求路径
   if (getToken() && !isToken) {
     if(whiteList.indexOf(config.url) === -1){
       config.headers['Authorization'] = 'Bearer ' + getToken() // 让每个请求携带自定义token 请根据实际情况自行修改

src/views/home/pages/confirmOrder/confirmOrder.vue

@@ -308,17 +308,17 @@ export default {
             for (let i = 0; i < this.confirmList.length; i++) {
                 orderList.push({
                     id: this.confirmList[i].orderId, //订单ID
-                    // commodityName: this.confirmList[i].text, //商品名称
-                    // commodityId: this.confirmList[i].id, //商品id
-                    // departurePlace: this.confirmList[i].place, //出发地
-                    // departureDate: this.confirmList[i].time, //出发日期
-                    // adultNum: this.confirmList[i].adultNum, //成人人数
-                    // childNum: this.confirmList[i].childNum, //儿童人数
-                    // orderMoney: this.confirmList[i].present, //订单金额
-                    // couponDeduction:
-                    //     this.confirmList[i].couponDeduction.type == "1"
-                    //         ? this.confirmList[i].couponDeduction.place
-                    //         : 0, //优惠券抵扣金额
+                       commodityName: this.confirmList[i].text, //商品名称
+                       commodityId: this.confirmList[i].id, //商品id
+                       departurePlace: this.confirmList[i].place, //出发地
+                       departureDate: this.confirmList[i].time, //出发日期
+                       adultNum: this.confirmList[i].adultNum, //成人人数
+                       childNum: this.confirmList[i].childNum, //儿童人数
+                       orderMoney: this.confirmList[i].present, //订单金额
+                       couponDeduction:
+                           this.confirmList[i].couponDeduction.type == "1"
+                               ? this.confirmList[i].couponDeduction.place
+                               : 0, //优惠券抵扣金额
                 });
             }
             //替后端算出折扣后的价格
@@ -338,26 +338,7 @@ export default {
             };
             aiPay(require).then((res) => {
                 if (res.code == 200) {
-                    getInfo().then((res1) => {
-                        if (res1.code == 200) {
-                            let userInfo = Object.assign(
-                                {},
-                                this.$store.state.user.userInfo
-                            );
-                            console.log(userInfo,1)
-                            userInfo.integral = res1.data.integral;
-                            this.$store.commit("user/SET_USERINFO", userInfo); //用户基本信息
-                            console.log(userInfo,2)
-                            this.$toast({
-                                type: "success",
-                                message: this.$t('confirmOrder.paymentSuccess'),
-                            });
-                            this.$router.push({
-                                path: "/toBePaid",
-                                query: { type: 2 },
-                            });
-                        }
-                    });
+                    window.location = res.data.paymentUrl.web;
                 }
             });
         },

src/views/home/pages/linePay/cancel.vue

@@ -0,0 +1,62 @@
+<template>
+  <div class="container">
+    <span style="font-size : small;display: inline-block;">支払確認中・・・</span>
+    <vue-loading type="spin" color="#333" :size="{ width: '50px', height: '50px' }"></vue-loading>
+  </div>
+</template>
+
+<script>
+import { VueLoading } from 'vue-loading-template'
+import { cancel } from "@/api/comp/home.js";
+import {
+  getInfo
+} from '@/api/login'
+export default {
+    data() {
+        return {
+            loading: true,
+            requestUrl: process.env.VUE_APP_BASE_API,
+            submitType:false,
+        };
+    },
+    mounted() {
+        this.cancel();
+    },
+    methods: {
+        cancel: function () {
+            let require = {
+                transactionId:this.$route.query.transactionId,
+                orderId:this.$route.query.orderId,
+            };
+            cancel(require).then((res) => {
+                if (res.code == 200) {
+                    getInfo().then((res1) => {
+                        if (res1.code == 200) {
+                            let userInfo = Object.assign(
+                                {},
+                                this.$store.state.user.userInfo
+                            );
+                            console.log(userInfo,1)
+                            userInfo.integral = res1.data.integral;
+                            this.$store.commit("user/SET_USERINFO", userInfo);
+                            console.log(userInfo,2)
+                            this.$toast({
+                                type: "success",
+                                message: res.msg,
+                            });
+                            console.log(res);
+                            this.$router.push({
+                                path: "/toBePaid",
+                                query: { type: 2 },
+                            });
+                        }
+                    });
+                }
+            });
+        },
+    },
+    components: {
+        VueLoading,
+    },
+};
+</script>

src/views/home/pages/linePay/confirm.vue

@@ -0,0 +1,62 @@
+<template>
+  <div class="container">
+    <span style="font-size : small;display: inline-block;">支払確認中・・・</span>
+    <vue-loading type="spin" color="#333" :size="{ width: '50px', height: '50px' }"></vue-loading>
+  </div>
+</template>
+
+<script>
+import { VueLoading } from 'vue-loading-template'
+import { confirm } from "@/api/comp/home.js";
+import {
+  getInfo
+} from '@/api/login'
+export default {
+    data() {
+        return {
+            loading: true,
+            requestUrl: process.env.VUE_APP_BASE_API,
+            submitType:false,
+        };
+    },
+    mounted() {
+        this.confirm();
+    },
+    methods: {
+        confirm: function () {
+            let require = {
+                transactionId:this.$route.query.transactionId,
+                orderId:this.$route.query.orderId,
+            };
+            confirm(require).then((res) => {
+                if (res.code == 200) {
+                    getInfo().then((res1) => {
+                        if (res1.code == 200) {
+                            let userInfo = Object.assign(
+                                {},
+                                this.$store.state.user.userInfo
+                            );
+                            console.log(userInfo,1)
+                            userInfo.integral = res1.data.integral;
+                            this.$store.commit("user/SET_USERINFO", userInfo);
+                            console.log(userInfo,2)
+                            this.$toast({
+                                type: "success",
+                                message: res.msg,
+                            });
+                            console.log(res);
+                            this.$router.push({
+                                path: "/toBePaid",
+                                query: { type: 2 },
+                            });
+                        }
+                    });
+                }
+            });
+        },
+    },
+    components: {
+        VueLoading,
+    },
+};
+</script>