add pay

assets/css/pay.scss

@@ -0,0 +1,75 @@
+.pay-card{
+  width: 1000px;
+  min-height: 500px;
+  margin: 30px auto;
+  font-size: 16px;
+
+  &__title{
+    font-weight: 600;
+    font-size: 28px;
+  }
+
+  &__table {
+    margin: 20px;
+    width: calc(100% - 40px);
+    min-height: 300px;
+  }
+
+  &__foot{
+    margin: 20px;
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    flex-wrap: nowrap;
+  }
+
+  &__final{
+    line-height: 40px;
+    font-size: 18px;
+  }
+
+  &__picture{
+    width: 100%;
+  }
+
+
+
+  &__info{
+    width: 400px;
+    padding: 30px;
+    font-size: 18px;
+
+    &-item{
+      margin-top: 20px;
+      width: 100%;
+      border-bottom: 0.5px $note-color solid;
+
+      &:last-child{
+        border-bottom: none;
+        padding-bottom: 20px;
+      }
+
+      &__head{
+        margin-top: 30px;
+      }
+
+      &__name{
+        display: inline-block;
+      }
+
+      &__modify{
+        margin-left: 20px;
+        color: $focus-color;
+        font-size: 14px;
+        vertical-align: center;
+        cursor: pointer;
+      }
+
+      &__value{
+        margin: 20px 0 30px 0;
+      }
+
+    }
+  }
+
+}

components/ColumnCard.vue

@@ -44,10 +44,14 @@
     },
     methods: {
       checkColumnDetail(){
-        this.$message({
-          showClose: true,
-          message: '即将上线，敬请期待'
-        });
+        if(this.title !== 'JVM简要入门'){
+          this.$message({
+            showClose: true,
+            message: '即将上线，敬请期待'
+          });
+        }else{
+          this.$router.push('/pay');
+        }
       }
     }
 

layouts/person.vue

@@ -28,7 +28,7 @@
         </el-menu-item>
         <el-menu-item index="6">
           <i class="el-icon-s-order"></i>
-          <span slot="title">我的订单</span>
+          <span slot="title">历史订单</span>
         </el-menu-item>
       </el-menu>
       <el-card class="main-card">

pages/pay.vue

@@ -0,0 +1,89 @@
+<template>
+  <div class="pay-card" v-loading="pageLoading">
+    <h1 class="pay-card__title">
+      课程购买
+    </h1>
+    <el-table
+      :data="courses"
+      stripe
+      class="pay-card__table"
+    >
+      <el-table-column
+        label="课程"
+        width="200">
+        <template slot-scope="scope">
+          <img :src="scope.row.picture" class="pay-card__picture"/>
+        </template>
+      </el-table-column>
+      <el-table-column
+        prop="course"
+      >
+      </el-table-column>
+      <el-table-column
+        prop="total"
+        label="原价"
+        width="100">
+      </el-table-column>
+      <el-table-column
+        prop="num"
+        label="数量"
+        width="100">
+      </el-table-column>
+      <el-table-column
+        prop="discount"
+        label="折扣"
+        width="100">
+      </el-table-column>
+    </el-table>
+    <div class="pay-card__foot">
+      <div class="pay-card__final">
+        合计：16.00元
+      </div>
+      <el-button type="primary" plain @click="pay">确认支付</el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: "pay",
+    data(){
+      return{
+        pageLoading: true,
+        courses: [
+          {course: 'JVM简要入门', total: '20.00', discount: '4.00', num: 1, picture: '/image/JVM.jpg',},
+        ]
+      }
+    },
+    mounted(){
+      this.pageLoading = false;
+    },
+    methods:{
+      pay(){
+        this.$api.post('http://pay.seec.seecoder.cn/api/alipay/pay', {
+          userId: 789,
+          productId: 1,
+          subject: '测试支付',
+          platformType: 'SEEC_I',
+          price: 16,
+          returnUrl: window.location.protocol+"//"+window.location.host+'/return'
+        }).then(resp => {
+          const divForm = document.getElementsByTagName('div')
+          if (divForm.length) {
+            document.body.removeChild(divForm[0])
+          }
+          const div = document.createElement('div')
+          div.innerHTML = resp.data.res // data就是接口返回的form 表单字符串
+          document.body.appendChild(div)
+          document.forms[0].setAttribute('target', '_blank') // 新开窗口跳转
+          document.forms[0].submit()
+        })
+      }
+    }
+  };
+</script>
+
+<style lang="scss" scoped>
+  @import '~/assets/css/pay.scss';
+</style>
+

pages/person/orders.vue

@@ -0,0 +1,90 @@
+<template>
+  <div class="main-card__body" v-loading="pageLoading">
+    <h1 class="main-card__title">
+      历史订单
+    </h1>
+    <el-table
+      :data="orders"
+      stripe
+      class="main-card__table"
+    >
+      <el-table-column
+        type="index"
+        width="30">
+      </el-table-column>
+      <el-table-column
+        prop="title"
+        width="130"
+        label="订单号">
+      </el-table-column>
+      <el-table-column
+        prop="course"
+        label="课程"
+      >
+      </el-table-column>
+      <el-table-column
+        prop="createTime"
+        label="创建时间"
+        width="100">
+      </el-table-column>
+      <el-table-column
+        prop="total"
+        label="原价"
+        width="60">
+      </el-table-column>
+      <el-table-column
+        prop="discount"
+        label="折扣"
+        width="60">
+      </el-table-column>
+      <el-table-column
+        prop="final"
+        label="实付"
+        width="60">
+      </el-table-column>
+      <!--<el-table-column-->
+        <!--fixed="right"-->
+        <!--label="操作"-->
+        <!--width="60">-->
+        <!--<template slot-scope="scope">-->
+          <!--<el-button @click="deal(scope.row)" type="text" size="small">处理</el-button>-->
+        <!--</template>-->
+      <!--</el-table-column>-->
+    </el-table>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: "orders",
+    layout: 'person',
+    data(){
+      return{
+        orders: [],
+        pageLoading: true
+      }
+    },
+    mounted(){
+      this.getOrders();
+      this.pageLoading = false;
+    },
+    methods: {
+      getOrders() {
+        this.orders =
+          [
+            {title: '订单2003160001', course: '软件工程与计算II', total: '12.00', discount: '3.00', final: '9.00', createTime: '2020-03-16 10:36:52'},
+            {title: '订单2003040001', course: '基于java的面向对象编程范式', total: '16.00', discount: '3.00', final: '13.00', createTime: '2020-03-04 18:14:47'},
+            {title: '订单2002270001', course: '软件工程与计算I', total: '10.00', discount: '2.00', final: '8.00', createTime: '2020-02-27 16:24:32'},
+          ]
+        ;
+      },
+      deal(row){
+        window.location.href = row.url;
+      }
+    }
+  };
+</script>
+
+<style lang="scss" scoped>
+  @import '~/assets/css/person.scss';
+</style>

pages/return.vue

@@ -0,0 +1,15 @@
+<template>
+  <div class="hello">
+    <h1>支付成功</h1>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: "return"
+  };
+</script>
+
+<style scoped>
+
+</style>

server/controller/auth.js

@@ -61,7 +61,7 @@ class AuthController{
           else{
             let user = user_info;
             let my_token = jwt.sign(
-              user,'seec-portal',{ expiresIn: '1day' }
+              user,'SEEC-1919810-OIDC-114514',{ expiresIn: '1day' }
             );
 
             // console.log("user", user_info);

server/index.js

@@ -157,7 +157,7 @@ async function start () {
     await builder.build()
   }
 
-  app.use(jwt({ secret: 'seec-portal' }).unless({
+  app.use(jwt({ secret: 'SEEC-1919810-OIDC-114514' }).unless({
     // 设置login、register接口，可以不需要认证访问
     path: [
       /\/api\/user\/login/, /\/api\/user\/register/,/\/api\/user\/sendMessage/,,/\/api\/user\/resetPassword/, /\/api\/interaction/, /\/api\/receiveIDToken/, /\/api\/authenticate/,

server/util/tokenProcessor.js

@@ -3,7 +3,7 @@ const jwt = require('jsonwebtoken');
 module.exports = function getTokenUser(ctx){
   let token = ctx.header.authorization.substr(7);
   try{
-    const user = jwt.verify(token, 'seec-portal');
+    const user = jwt.verify(token, 'SEEC-1919810-OIDC-114514');
     return user;
   }catch (e) {
     return null;