update

src/api/course.js

@@ -569,3 +569,23 @@ export function SendMessageToCourseStudent(data) {
     data
   });
 }
+
+// 支付我的订单
+export function PayMyOrder(data) {
+  return request({
+    method: 'post',
+    url: process.env.VUE_APP_LearnWebSI,
+    params: getRequestParams('order-order_manager-PayMyOrder'),
+    data
+  });
+}
+
+// 得到我的订单信息
+export function GetMyOrder(data) {
+  return request({
+    method: 'post',
+    url: process.env.VUE_APP_LearnWebSI,
+    params: getRequestParams('order-order_manager-GetMyOrder'),
+    data
+  });
+}

src/components/payment/Audit.vue

@@ -104,10 +104,11 @@ export default {
       ApplyJoinCourse({
         course_id: this.goodsId, // 课程 ID
         discount_code: this.discount_code // 优惠码 （目前暂时没有用到）
-      }).then(({ is_audited }) => {
+      }).then(({ is_audited, order_id }) => {
         this.$message.success(this.$i18n.t('Key631'));
         if (is_audited === 'true') {
-          return this.goPersonal();
+          this.$emit('auditedSuccess', order_id);
+          return;
         }
 
         this.visible = true;

src/components/payment/Payment.vue

@@ -0,0 +1,392 @@
+<template>
+  <!-- 支付 -->
+  <div v-if="data" v-loading="loading" class="Nopyment">
+    <div class="message">
+      <div :class="['coverUrl', data.goods_type !== 401 ? 'coverUrl-border' : '']">
+        <template v-if="data.goods_type !== 401">
+          <img :src="data.goods_picture_url" />
+        </template>
+      </div>
+      <div class="text">
+        <p class="p1">
+          {{ data.goods_name }}
+        </p>
+        <p class="p2">
+          <span>{{ $t('Key44') }}</span>
+        </p>
+        <p class="p3">{{ data.goods_person_name_desc }}</p>
+      </div>
+      <div class="price">
+        <p v-if="data.hasOwnProperty('price')">¥<span v-html="changePrice(data.price, 16)"></span></p>
+        <p v-if="data.hasOwnProperty('goods_price')">¥<span v-html="changePrice(data.goods_price, 16)"></span></p>
+      </div>
+    </div>
+    <div class="pay-platform">
+      <!-- 选择支付平台 -->
+      <p class="pay-platform-title">{{ $t('Key473') }}</p>
+      <ul class="pay-platform-list">
+        <li v-for="(item, index) in platList" :key="'plat' + index" :class="item.isSelected ? 'active' : ''">
+          <img :src="item.img" class="plat-logo" />
+          <img src="../../assets/pay/active.png" class="active-icon" />
+        </li>
+      </ul>
+    </div>
+    <div class="total">
+      <p class="p1">
+        <!-- 一件商品，总金额 -->
+        <span> {{ $t('Key53') }}： </span>
+        <span v-if="data.hasOwnProperty('price')" class="co-value">
+          ¥<span v-html="changePrice(data.price, 16)"></span>
+        </span>
+        <span v-if="data.hasOwnProperty('goods_price')" class="co-value">
+          ¥<span v-html="changePrice(data.goods_price, 16)"></span>
+        </span>
+      </p>
+      <p class="p2">
+        <!-- 优惠折扣 -->
+        <span> {{ $t('Key54') }}： </span>
+        <span class="co-value">-¥<span v-html="changePrice(data.discount_money, 16)"></span></span>
+      </p>
+      <p class="p4">
+        <span></span>
+        <!-- 优惠码  未使用优惠码-->
+        <span class="no-code">{{ data.discount_code ? $t('Key232') + '：' + data.discount_code : $t('Key108') }}</span>
+      </p>
+      <p class="p3">
+        <!-- 应付： -->
+        <span> {{ $t('Key55') }}： </span>
+        <span class="co-value">¥<span v-html="changePrice(data.receivables_money, 24)"></span></span>
+      </p>
+    </div>
+    <div class="submitBtn">
+      <!-- 去支付 -->
+      <button @click="buy">{{ $t('Key474') }}</button>
+    </div>
+  </div>
+</template>
+
+<script>
+import { PayMyOrder, GetMyOrder } from '@/api/course';
+
+export default {
+  props: {
+    orderId: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    // 这里存放数据
+    return {
+      data: {},
+      loading: false,
+      platList: [
+        {
+          img: require('../../assets/pay/shouxinyi.png'),
+          isSelected: true
+        }
+      ]
+    };
+  },
+  watch: {
+    orderId(newVal) {
+      if (!newVal) return;
+      GetMyOrder({ id: newVal }).then(res => {
+        this.data = res;
+      });
+    }
+  },
+  created() {
+    GetMyOrder({ id: this.orderId }).then(res => {
+      this.data = res;
+    });
+  },
+  methods: {
+    // 购买
+    buy() {
+      this.loading = true;
+      // 首先添加订单
+      PayMyOrder({
+        id: this.orderId,
+        pay_money: this.data.receivables_money, // 实际入账金额，由易支付成功返回
+        bank_transaction_sn: '' // 银行交易流水号，由易支付成功返回
+      })
+        .then(res => {
+          this.loading = false;
+          this.$emit('judgePayResult', true);
+          // 调取支付接口
+          if (res.pay_page_url) {
+            window.location.href = res.pay_page_url;
+          } else {
+            this.$router.push('/OrderPaySuccess');
+          }
+        })
+        .catch(() => {
+          this.loading = false;
+        });
+    },
+    changePrice(price, fontSize1, fontSize2) {
+      let prices = price || 0;
+      prices = prices.toFixed(2);
+      prices = prices.toString();
+      const arr = prices.split('.');
+      const str = `<span style="font-size: ${fontSize1 || 16}px;">${arr[0]}</span>.<span style="font-size: ${
+        fontSize2 || 16
+      }px;">${arr[1]}</span>`;
+
+      return str;
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.Nopyment {
+  .pay-platform {
+    box-sizing: border-box;
+    width: 656px;
+    padding: 16px 0;
+    border-top: 1px rgba(44, 44, 44, 15%) solid;
+    border-bottom: 1px rgba(44, 44, 44, 15%) solid;
+
+    &-title {
+      padding: 0;
+      margin: 0;
+      margin-bottom: 16px;
+      font-size: 16px;
+      font-style: normal;
+      font-weight: normal;
+      line-height: 150%;
+      color: #000;
+    }
+
+    &-list {
+      display: flex;
+      flex-wrap: wrap;
+      padding: 0;
+      margin: 0;
+
+      > li {
+        position: relative;
+        box-sizing: border-box;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 152px;
+        height: 60px;
+        margin: 0 8px 8px 0;
+        cursor: pointer;
+        background: #fff;
+        border: 1px solid rgba(44, 44, 44, 15%);
+        border-radius: 4px;
+
+        > .plat-logo {
+          width: 99px;
+          height: 26px;
+        }
+
+        > .active-icon {
+          position: absolute;
+          right: -1px;
+          bottom: -1px;
+          display: block;
+          width: 20px;
+          height: 20px;
+        }
+
+        &.active {
+          border-color: #f90;
+        }
+      }
+    }
+  }
+
+  .message {
+    display: flex;
+    width: 656px;
+    height: 152px;
+    margin-bottom: 24px;
+    background: rgba(70, 70, 70, 3%);
+    border-radius: 8px;
+
+    .coverUrl {
+      box-sizing: border-box;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 120px;
+      height: 120px;
+      margin-top: 16px;
+      margin-left: 16px;
+
+      &-border {
+        border: 1px rgba(0, 0, 0, 15%) solid;
+      }
+
+      > img {
+        max-width: 100%;
+        max-height: 100%;
+      }
+    }
+
+    .text {
+      margin-left: 24px;
+
+      .p1 {
+        display: box;
+        width: 360px;
+        margin-top: 22px;
+        overflow: hidden;
+
+        //   height: 45px;
+        font-size: 16px;
+        line-height: 20px;
+        color: #2c2c2c;
+        text-overflow: ellipsis;
+        word-break: break-all;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 2;
+      }
+
+      .p2 {
+        margin-top: 10px;
+
+        span {
+          width: 64px;
+          height: 24px;
+          padding: 2px 8px;
+          font-size: 12px;
+          font-weight: bold;
+          line-height: 24px;
+          color: #f90;
+          text-align: center;
+          background: #ffefd8;
+          border-radius: 4px;
+        }
+      }
+
+      .p3 {
+        margin-top: 10px;
+      }
+    }
+
+    .price {
+      box-sizing: border-box;
+      width: 110px;
+      padding-right: 16px;
+
+      p {
+        width: 100%;
+        margin-top: 22px;
+        font-size: 16px;
+        font-weight: bold;
+        color: #ff4c00;
+        text-align: right;
+      }
+    }
+  }
+
+  .promotionCode {
+    display: flex;
+    align-self: center;
+    justify-content: flex-start;
+    width: 100%;
+    height: 58px;
+    margin-top: 24px;
+    line-height: 56px;
+    border-top: 1px solid rgba(44, 44, 44, 15%);
+    border-bottom: 1px solid rgba(44, 44, 44, 15%);
+
+    .sp1 {
+      font-size: 16px;
+      color: #000;
+    }
+
+    input {
+      box-sizing: border-box;
+      flex: 1;
+      height: 55px;
+      padding: 0;
+      padding: 0 24px;
+      border: none;
+      outline: none;
+    }
+
+    .sp2 {
+      font-size: 16px;
+      color: #f90;
+      cursor: pointer;
+    }
+  }
+
+  .total {
+    width: 656px;
+    padding-top: 24px;
+    font-size: 16px;
+    color: #000;
+    text-align: right;
+
+    > p {
+      > span {
+        display: inline-block;
+      }
+
+      .co-value {
+        width: 160px;
+      }
+    }
+
+    .p1 {
+      > span {
+        display: inline-block;
+        line-height: 24px;
+      }
+    }
+
+    .p2 {
+      margin: 16px 0 8px;
+    }
+
+    .p3 {
+      > span {
+        line-height: 36px;
+      }
+
+      .co-value {
+        font-size: 24px;
+        color: #ff4c00;
+      }
+    }
+
+    .p4 {
+      margin-bottom: 16px;
+
+      .no-code {
+        font-size: 12px;
+        font-weight: normal;
+        line-height: 150%;
+        color: rgba(0, 0, 0, 50%);
+        text-align: center;
+      }
+    }
+  }
+
+  .submitBtn {
+    margin-top: 16px;
+    text-align: right;
+
+    button {
+      width: 120px;
+      height: 40px;
+      line-height: 40px;
+      color: white;
+      text-align: center;
+      cursor: pointer;
+      background: #ff4d00;
+      border: none;
+      border-radius: 4px;
+      outline: none;
+    }
+  }
+}
+</style>

src/router/index.js

@@ -112,6 +112,17 @@ const routes = [
     ]
   },
   {
+    path: '/OrderPaySuccess',
+    component: Layout,
+    redirect: '/OrderPaySuccess/index',
+    children: [
+      {
+        path: '/OrderPaySuccess/index',
+        component: () => import('@/views/OrderPaySuccess.vue')
+      }
+    ]
+  },
+  {
     path: '/task_detail/show_courseware/:coursewareId',
     component: () => import('@/views/task_details/ShowCourseware')
   },

src/views/OrderPaySuccess.vue

@@ -0,0 +1,20 @@
+<template>
+  <div class="paymentSuccess">
+    <Header />
+    <div class="main">{{ $t('Key657') }}</div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.paymentSuccess {
+  height: 100%;
+
+  .main {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    font-size: 50px;
+  }
+}
+</style>

src/views/course_details/index.vue

@@ -1,7 +1,11 @@
 <template>
   <!-- 课程详情 -->
-  <div>
-    <div v-if="isData" v-loading="loading" class="CourseDetail">
+  <div class="course_info">
+    <div
+      v-if="isData && CourseData.is_release === 'true' && CourseData.is_deleted === 'false'"
+      v-loading="loading"
+      class="CourseDetail"
+    >
       <div class="main">
         <div class="bookDetail">
           <div class="rightUp">
@@ -236,19 +240,37 @@
           width="720px"
           :before-close="closeaudit"
         >
-          <audit :goods-id="goods_id" :data="CourseData" :goods-type="goods_type" />
+          <audit :goods-id="goods_id" :data="CourseData" :goods-type="goods_type" @auditedSuccess="auditedSuccess" />
         </el-dialog>
       </div>
     </div>
 
     <div v-else-if="!loading" class="non-existent">
-      <h1>{{ $t('Key395') }}</h1>
+      {{
+        CourseData.is_deleted === 'true'
+          ? '无法查看，课程已删除'
+          : CourseData.is_release === 'false'
+          ? '无法查看，课程已下架'
+          : '课程不存在'
+      }}
     </div>
+
+    <el-dialog
+      class="orderDialog"
+      top="50px"
+      :title="$t('Key471') + '：' + orderId"
+      :visible.sync="visiblePay"
+      width="720px"
+      :before-close="closePayment"
+    >
+      <Payment ref="Confirmorder" :order-id="orderId" @judgePayResult="judgePayResult"></Payment>
+    </el-dialog>
   </div>
 </template>
 
 <script>
 import Audit from '@/components/payment/Audit.vue';
+import Payment from '@/components/payment/Payment.vue';
 import {
   GetCourseInfoBox,
   CheckMyGoodsBuyStatus,
@@ -261,7 +283,8 @@ import { GetMyGoodsBuyInfo } from '@/api/user';
 export default {
   name: 'CourseDetails',
   components: {
-    Audit
+    Audit,
+    Payment
   },
   data() {
     const query = this.$route.query;
@@ -285,7 +308,9 @@ export default {
         { id: 'pre_task_list', name: 'Key353' },
         { id: 'mid_task_list', name: 'Key354' },
         { id: 'after_task_list', name: 'Key355' }
-      ]
+      ],
+      visiblePay: false,
+      orderId: ''
     };
   },
   created() {
@@ -394,6 +419,29 @@ export default {
       });
     },
 
+    auditedSuccess(orderId) {
+      this.orderId = orderId;
+      this.auditShow = false;
+      this.visiblePay = true;
+    },
+
+    closePayment() {
+      this.visiblePay = false;
+      this.$refs.Confirmorder.clearData();
+    },
+
+    judgePayResult(bool) {
+      this.isPayment = false;
+      if (bool) {
+        this.$message.success(this.$t('Key657'));
+      } else {
+        this.$message.warning('支付失败');
+      }
+      CheckMyGoodsBuyStatus({ goods_type: this.goods_type, goods_id: this.goods_id }).then(({ is_buy }) => {
+        this.is_buy = is_buy === 'true';
+      });
+    },
+
     closeaudit() {
       this.auditShow = false;
     },
@@ -969,9 +1017,19 @@ export default {
   }
 }
 
-.non-existent {
-  margin-top: 15vh;
-  text-align: center;
+.course_info {
+  display: flex;
+  justify-content: center;
+
+  .non-existent {
+    padding: 8px;
+    margin-top: 15vh;
+    color: #e05153;
+    text-align: center;
+    background-color: #fbf3f4;
+    border: 1px solid;
+    border-radius: 4px;
+  }
 }
 </style>
 

src/views/task_details/TaskTop.vue

@@ -71,7 +71,7 @@ export default {
       const content = this.itemInfo.content;
       if (!content) return '';
       return content.replace(
-        new RegExp(/((https?:\/\/)?[\w-]+\.[\w-]+\.[\w-,@?^=%&:/~\\+#]+)/, 'g'),
+        new RegExp(/(https?:\/\/[\w-]+\.[\w-]+\.[\w-,@?^=%&:/~\\+#]+)/, 'g'),
         '<a href="$1" target="_blank">$1</a>'
       );
     }