优化订单页面

.config.dev.js

@@ -4,12 +4,12 @@ module.exports = {
   // apiBaseURL: 'https://zy2.ezijing.com/',
   webpack: {
     externals: {
-      'CKEDITOR': 'window.CKEDITOR',
-      'Base64': 'window.Base64',
-      'md5': 'window.md5',
-      'regeneratorRuntime': 'window.regeneratorRuntime',
-      'wx': 'window.wx',
-      'WeixinJSBridge': 'window.WeixinJSBridge'
+      CKEDITOR: 'window.CKEDITOR',
+      Base64: 'window.Base64',
+      md5: 'window.md5',
+      regeneratorRuntime: 'window.regeneratorRuntime',
+      wx: 'window.wx',
+      WeixinJSBridge: 'window.WeixinJSBridge'
     },
     devServer: {
       proxy: {

src/api/base_api.js

@@ -104,7 +104,10 @@ export default class API {
           if (store.state.isWeapp) {
             wx.miniProgram.redirectTo({ url: '/pages/login/index' })
           } else {
-            router.replace('/login')
+            router.replace({
+              path: '/login',
+              query: { redirect_uri: window.location.href }
+            })
           }
         }
         if (status === 402) {

src/pages/home/index.vue

@@ -119,9 +119,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.main-container {
-  padding-bottom: env(safe-area-inset-bottom);
-}
 .banner {
   height: 2.4rem;
   img {

src/pages/my/buyCourses.vue

 <template>
-  <div>
-    <div class="order-list">
-      <ul>
-        <template v-for="(item, index) in order">
-          <li :key="index">
-            <div class="order-info">
-              <img :src="item.product_image" alt="">
-              <div class="txt">{{item.product_name}}</div>
-            </div>
-            <div class="deti">
-              <div class="tit">课程状态：</div>
-              <div class="val">{{item.status == 1 ? '已付款' : '未付款' }}</div>
-            </div>
-            <div class="deti">
-              <div class="tit">共计：</div>
-              <div class="val">{{item.total_fee}}</div>
-            </div>
-            <div class="deti">
-              <div class="val col" v-if="item.status == 1">购买成功</div>
-              <div class="val col" v-else @click="goBuy">继续支付</div>
-            </div>
-          </li>
-        </template>
-      </ul>
-    </div>
+  <div class="main-container">
+    <ul>
+      <li class="order-item" v-for="(item, index) in order" :key="index">
+        <div class="order-info">
+          <img :src="item.product_image" />
+          <div class="txt">{{item.product_name}}</div>
+        </div>
+        <div class="deti">
+          <div class="tit">课程状态：</div>
+          <div class="val">{{item.status | courseStatusText }}</div>
+        </div>
+        <div class="deti">
+          <div class="tit">共计：</div>
+          <div class="val">{{item.total_fee}}</div>
+        </div>
+        <div class="deti">
+          <div class="val col" v-if="item.status === '-1'" @click="goBuy">继续支付</div>
+          <div class="val col" v-else>{{item.status | orderStatusText}}</div>
+        </div>
+      </li>
+    </ul>
   </div>
 </template>
 <script>
 import * as api from '@/api/pay.js'
-import { getUser } from '@/api/account'
-// import { Toast } from 'vant'
 export default {
+  metaInfo: {
+    title: '已购课程'
+  },
   data() {
     return {
-      order: [],
-      requestParam: {
-        product_id: '6684359515615264768', // 提前设定
-        open_id: '', // 通过微信授权获取
-        prepay_id: '', // 通过调用接口获取
-        app_id: '', // 提前设定
-        app_secret: '' // 提前设定
-      }
+      order: []
     }
   },
   mounted() {
-    this.getOpenid()
     this.getMyOrder()
   },
   computed: {
@@ -52,16 +41,21 @@ export default {
       return this.$store.state.isWeapp
     }
   },
-  methods: {
-    getOpenid() {
-      getUser().then(res => {
-        api.getOpenid({ id: res.id, identity: 'transport' }).then(res => {
-          if (res.code === 0) {
-            this.requestParam.open_id = res.data.openid
-          }
-        })
-      })
+  filters: {
+    courseStatusText(status) {
+      return status === '1' ? '已付款' : '未付款'
     },
+    orderStatusText(status) {
+      const map = {
+        '-1': '待支付',
+        0: '已取消',
+        1: '购买成功',
+        2: '已超时'
+      }
+      return map[status]
+    }
+  },
+  methods: {
     getMyOrder() {
       api.getMyOrder().then(res => {
         if (res.code === 0) {
@@ -69,60 +63,50 @@ export default {
         }
       })
     },
-    goBuy() {
-      if (window.__wxjs_environment === 'miniprogram') {
-        wx.miniProgram.navigateTo({
-          // url: '/pages/pay/index?data=' + JSON.stringify(obj.data),
-          url: '/pages/pay/index?data=' + this.requestParam.product_id,
-          events: {
-            // 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
-            acceptDataFromOpenedPage: function (data) {
-              console.log(data)
-            }
-          },
-          success: function (res) {}
-        })
-      }
+    goBuy(data) {
+      wx.miniProgram.navigateTo({
+        url: `/pages/pay/index?data=${data.product_id}`
+      })
     }
   }
 }
 </script>
 <style lang="scss" scoped>
-.order-list{
-  padding-bottom: 1.5rem;
-  li{
-    padding: .1rem .4rem;
-    margin-bottom: .4rem;
+.main-container {
+  .order-item {
+    margin: 0.4rem 0;
   }
-  .order-info{
+  .order-info {
     display: flex;
-    img{
+    img {
       width: 2.4rem;
       height: 2.4rem;
       display: block;
+      background-color: #eee;
+      object-fit: contain;
     }
-    .txt{
-      margin-left: .2rem;
-      font-size: .3rem;
+    .txt {
+      margin-left: 0.2rem;
+      font-size: 0.3rem;
       color: #222;
       word-wrap: break-word;
     }
   }
-  .deti{
+  .deti {
     display: flex;
-    margin-top: .4rem;
-    .tit{
-      font-size: .26rem;
+    margin-top: 0.4rem;
+    .tit {
+      font-size: 0.26rem;
       color: #222;
     }
-    .val{
-      font-size: .26rem;
+    .val {
+      font-size: 0.26rem;
       color: #222;
       margin-left: auto;
     }
-    .col{
-      color: #FF6767;
-      font-size: .3rem;
+    .col {
+      color: #ff6767;
+      font-size: 0.3rem;
     }
   }
 }

src/style.scss

@@ -100,6 +100,7 @@ body {
 }
 .main-container {
   margin: 0 0.4rem;
+  padding-bottom: env(safe-area-inset-bottom);
 }
 .main-tabs .van-hairline--top-bottom::after {
   border-top: 0;