对接课程播放

src/apis/course.js

@@ -140,4 +140,28 @@ export default {
 			params: data
 		})
 	},
+
+  studyRecordMenuAllList(data) {
+		return request({
+			url: '/study/record/menuAllList',
+			method: 'get',
+			params:data
+		})
+	},
+
+  gradeCheckGoodsStudy(data) {
+		return request({
+			url: '/grade/grade/checkGoodsStudy',
+			method: 'get',
+			params:data
+		})
+	},
+
+  goodsTodayStudySectionNum(data) {
+		return request({
+			url: '/goods/todayStudySectionNum',
+			method: 'get',
+			params:data
+		})
+	},
 }

src/apis/order.js

@@ -38,4 +38,20 @@ export default {
 		})
 	},
   
+  orderPayStatus(data) {
+		return request({
+			url: '/order/'+data,
+			method: 'get'
+		})
+	},
+
+  orderResumePCOrder(data) {
+		return request({
+			url: '/order/resumePCOrder',
+			method: 'post',
+      data
+		})
+	},
+  
+  
 }

src/pages/cart/index.vue

@@ -24,7 +24,9 @@
               <span>￥{{ total | toFixed }}</span>
             </div>
           </div>
-          <div class="pay-btn" @click="pay">去支付</div>
+          <el-button type="danger" class="pay-btn" @click="pay"
+            >去支付</el-button
+          >
         </div>
         <div class="section__body">
           <el-table
@@ -416,6 +418,7 @@ export default {
       this.setCheckGoodsList(selectGoodsList);
 
       this.$router.push({
+        name: "支付",
         path: "/payment",
       });
     },
@@ -503,12 +506,17 @@ export default {
         cursor: pointer;
         width: 80px;
         height: 40px;
-        background: #ff3b30;
+        background-color: #ff3b30;
+        padding: 0;
         border-radius: 20px;
         text-align: center;
         line-height: 40px;
         color: #fff;
         margin-left: 20px;
+
+        &:hover {
+          background-color: #f78989;
+        }
       }
     }
 
@@ -625,12 +633,15 @@ export default {
         cursor: pointer;
         width: 80px;
         height: 40px;
-        background: #ff3b30;
+        background-color: #ff3b30;
         border-radius: 20px;
         text-align: center;
         line-height: 40px;
         color: #fff;
         margin-left: 20px;
+        &:hover {
+          background-color: #f78989;
+        }
       }
     }
   }

src/pages/course-detail/index.vue

@@ -1307,10 +1307,14 @@
               </p>
             </div>
           </div>
-          <div class="right-box"></div>
+          <div class="right-box">
+            <video id="video" :src="stream"></video>
+          </div>
         </div>
         <div class="take-photo__footer">
-          <div class="take">拍照</div>
+          <el-button type="primary" class="take" @click="onPhoto"
+            >拍照</el-button
+          >
         </div>
       </div>
     </el-dialog>
@@ -1334,7 +1338,10 @@ export default {
   },
   data() {
     return {
+      stream: null,
       playSectionId: 0,
+      moduleId: 0,
+      chapterId: 0,
       menuTab: [],
       lectureShow: true,
       textarea: "",
@@ -1376,6 +1383,7 @@ export default {
         pageNum: 1,
         pageSize: 4,
       },
+      ossAvatarUrl: "", //照片地址
       nowTime: 0,
     };
   },
@@ -1383,14 +1391,82 @@ export default {
     ...mapGetters(["userInfo"]),
   },
   mounted() {
+    this.courseId = this.$route.query.courseId || "";
     this.nowTime = Number(new Date().getTime() / 1000).toFixed(0);
     this.goodsId = this.$route.params.goodsId;
     this.orderGoodsId = this.$route.query.orderGoodsId;
     this.gradeId = this.$route.query.gradeId;
 
     this.courseCourseList();
+    this.takePhotoModal = true;
+    this.$nextTick(() => {
+      if (
+        window.navigator.mediaDevices.getUserMedia ||
+        window.navigator.getUserMedia ||
+        window.navigator.webkitGetUserMedia ||
+        window.navigator.mozGetUserMedia
+      ) {
+        console.log(this.getUserMedia, "getUserMedia");
+        // 调用用户媒体设备, 访问摄像头
+        this.getUserMedia(
+          {
+            video: {
+              width: 400,
+              height: 300,
+            },
+          },
+          this.photographSuccess,
+          this.photographError
+        );
+      } else {
+        alert("不支持访问用户媒体");
+      }
+    });
   },
   methods: {
+    // 点击拍照按钮
+    onPhoto() {
+      // if (this.isIE) {
+      //   window.webcam.capture();
+      // } else {
+      const canvas = document.getElementById("canvas");
+      const context = canvas.getContext("2d");
+      const video = document.getElementById("video");
+      context.drawImage(video, 0, 0, 400, 300);
+      this.faceUrl = canvas.toDataURL("image/png");
+      // }
+    },
+    getUserMedia(constraints, success, error) {
+      if (window.navigator.mediaDevices.getUserMedia) {
+        // 最新的标准API
+        window.navigator.mediaDevices
+          .getUserMedia(constraints)
+          .then(success)
+          .catch(error);
+      } else if (window.navigator.webkitGetUserMedia) {
+        // webkit核心浏览器
+        window.navigator.webkitGetUserMedia(constraints, success, error);
+      } else if (window.navigator.mozGetUserMedia) {
+        // firfox浏览器
+        window.navigator.mozGetUserMedia(constraints, success, error);
+      } else if (window.navigator.getUserMedia) {
+        // 旧版API
+        window.navigator.getUserMedia(constraints, success, error);
+      }
+    },
+
+    photographSuccess(res) {
+      // 兼容webkit核心浏览器
+      const video = document.getElementById("video");
+      // 将视频流设置为video元素的源
+      video.srcObject = stream;
+      this.mediaStreamTrack =
+        typeof stream.stop === "function" ? stream : stream.getTracks()[0];
+      video.play();
+    },
+    photographError(err) {
+      console.log(err);
+    },
     /**
      * 切换科目
      */
@@ -1404,10 +1480,10 @@ export default {
       this.vid = "";
       this.vidzb = "";
       this.nowTime = Number(new Date().getTime() / 1000).toFixed(0);
-      this.courseDetail();
-      this.getGoodsDetail();
-      this.getAnswerList();
-      this.getMenuList();
+      this.courseDetail(); //课程详情
+      this.getGoodsDetail(); //商品详情
+      this.getAnswerList(); //答疑列表
+      this.getMenuList(); //学习目录
       this.getReMenuList(); //获取重修目录
       this.getNoteList(); //获取节笔记
     },
@@ -1602,22 +1678,206 @@ export default {
 
       if (section.type != 2) {
         //播放视频
+        this.moduleId = section.moduleId;
+        this.chapterId = section.chapterId;
         this.playSectionId = section.sectionId;
         this.getNoteList();
         this.initVideo(section);
       }
     },
+    /**
+     * 是否有上一章节
+     */
+    hasPreItem(rows, option) {
+      let moduleId = option.moduleId;
+      let chapterId = option.chapterId;
+      let sectionId = option.sectionId;
+      let index = 0;
+
+      for (let i = 0; i < rows.length; i++) {
+        if (
+          rows[i].moduleId == moduleId &&
+          rows[i].chapterId == chapterId &&
+          rows[i].sectionId == sectionId
+        ) {
+          index = i;
+          break;
+        }
+      }
+
+      if (i == 0) {
+        return false;
+      } else {
+        return true;
+      }
+    },
     async initVideo(option) {
-      await this.clears();
-      console.log(option);
-      if (option.sectionType === 2) {
-        this.vidzb = option.liveUrl;
-        this.loadPlayerScriptzb(this.loadPlayerzb);
+      if (this.businessData.goodsLearningOrder == 2 && !option.isRebuild) {
+        //要按从头到尾顺序学习, 且不是重修课程
+
+        let rows = await this.studyRecordMenuAllList();
+        if (!this.hasPreItem(rows, option)) {
+          //判断是否有上一节
+          let newRows = [];
+          for (let i = 0; i < rows.length; i++) {
+            let moduleTrue =
+              rows[i].moduleId == option.menuId ||
+              rows[i].moduleId == option.moduleId;
+            let chapterTrue = rows[i].chapterId == option.chapterId;
+            let sectionTrue = rows[i].sectionId == option.sectionId;
+            if (moduleTrue && chapterTrue && sectionTrue) {
+              break;
+            } else {
+              if (rows[i].sectionType != 2) {
+                newRows.push(rows[i]);
+              }
+            }
+          }
+
+          let isAllLearn = newRows.every((item) => {
+            return item.studyStatus == 1;
+          });
+
+          if (isAllLearn) {
+            this.playVideo(option);
+          } else {
+            this.$message({
+              type: "warning",
+              message: "请按顺序学习视频课程",
+            });
+          }
+        } else {
+          //第一章第一节
+          this.playVideo(option);
+        }
       } else {
+        this.playVideo(option);
+      }
+
+      return;
+    },
+
+    async playVideo(option) {
+      if (option.sectionType == 1 || option.sectionType == 3) {
+        //录播
+
+        let learnNum = await this.goodsTodayStudySectionNum(option);
+        let hasLearn = await this.gradeCheckGoodsStudy(option);
+
+        if (this.goodsData.sectionMaxNum > 0) {
+          if (learnNum >= this.goodsData.sectionMaxNum && !hasLearn) {
+            this.$message({
+              type: "warning",
+              message: `每天最多学习${this.goodsData.sectionMaxNum}节`,
+            });
+            return;
+          }
+        }
+        if (!option.recordingUrl) {
+          this.$message({
+            type: "warning",
+            message: `暂无播放地址数据`,
+          });
+          return;
+        }
+
+        if (this.playSectionId == option.section) {
+          //切换为同一频道
+          return;
+        }
+
+        if (this.playSectionId > 0) {
+          //切换视频
+          // let oldSectionId = this.playSectionId;
+          // uni.$emit("changeSection", oldSectionId);
+        }
+        //设置播放的节ID
+        await this.clears();
+        this.playSectionId = option.sectionId;
         this.vid = option.recordingUrl;
         this.duration = option.noteSecond || option.durationTime || 0;
         this.loadPlayerScript(this.loadPlayer);
+        // uni.$emit("levelId", this.levelId);
+        // uni.$emit("getSection", this.menuItem);
+        // uni.$emit("isRebuild", this.isRebuild);
       }
+      if (option.sectionType == 2) {
+        //直播
+
+        let learnNum = await this.goodsTodayStudySectionNum(option);
+        let hasLearn = await this.gradeCheckGoodsStudy(option);
+
+        if (this.goodsData.sectionMaxNum > 0) {
+          if (learnNum >= this.goodsData.sectionMaxNum && !hasLearn) {
+            this.$message({
+              type: "warning",
+              message: `每天最多学习${this.sectionMaxNum}节`,
+            });
+            return;
+          }
+        }
+        if (!option.liveUrl) {
+          this.$message({
+            type: "warning",
+            message: `暂无直播地址数据`,
+          });
+        }
+        if (this.playSectionId == option.section) {
+          //切换为同一频道
+          return;
+        }
+        //设置播放的节ID
+        await this.clears();
+        this.playSectionId = option.sectionId;
+        this.vidzb = option.liveUrl;
+        this.loadPlayerScriptzb(this.loadPlayerzb);
+        // uni.$emit("levelId", this.levelId);
+        // uni.$emit("getChannel", this.menuItem);
+        // uni.$emit("isRebuild", this.isRebuild);
+        // console.log(this.menuItem, "menuItem");
+      }
+    },
+
+    gradeCheckGoodsStudy(option) {
+      return new Promise((resolve) => {
+        this.$request
+          .gradeCheckGoodsStudy({
+            goodsId: this.goodsId,
+            gradeId: this.gradeId,
+            moduleId: option.moduleId || 0,
+            chapterId: option.chapterId || 0,
+            sectionId: option.sectionId || option.menuId,
+          })
+          .then((res) => {
+            resolve(res.data);
+          });
+      });
+    },
+    goodsTodayStudySectionNum(option) {
+      return new Promise((resolve) => {
+        this.$request
+          .goodsTodayStudySectionNum({
+            goodsId: this.goodsId,
+            gradeId: this.gradeId,
+          })
+          .then((res) => {
+            resolve(res.data);
+          });
+      });
+    },
+
+    studyRecordMenuAllList() {
+      return new Promise((resolve) => {
+        this.$request
+          .studyRecordMenuAllList({
+            courseId: this.courseId,
+            gradeId: this.gradeId,
+            goodsId: this.goodsId,
+          })
+          .then((res) => {
+            resolve(res.data);
+          });
+      });
     },
     loadPlayerzb() {
       const polyvLivePlayer = window.polyvLivePlayer;
@@ -1686,6 +1946,51 @@ export default {
         resolve();
       });
     },
+
+    /**
+     * 提交观看记录
+     */
+    postStudyRecord(status = 0, sectionId = this.playSectionId) {
+      let currentTime = 0;
+      let PlayDuration = 0;
+      var polyvPlayerContext = this.player;
+      if (polyvPlayerContext) {
+        currentTime = polyvPlayerContext.j2s_getDuration(); //总的视频播放时刻
+        PlayDuration = polyvPlayerContext.j2s_getCurrentTime(); //本次看的时长
+      }
+      if (this.vidzb) {
+        currentTime = 2; //直播无法获取，无论开始结束都传2秒
+      }
+      let self = this;
+      let data = {
+        photo: self.ossAvatarUrl,
+        sectionId: parseInt(sectionId),
+        goodsId: parseInt(self.goodsId),
+        courseId: parseInt(self.courseId),
+        studyDuration: parseInt(PlayDuration > 0 ? PlayDuration : 0),
+        gradeId: parseInt(self.gradeId),
+        chapterId: parseInt(self.chapterId),
+        moduleId: parseInt(self.moduleId),
+        videoCurrentTime: parseInt(currentTime > 0 ? currentTime : 0),
+      };
+      if (status > 0) {
+        data.status = status;
+      }
+      this.$reqeust
+        .studyRecord(data)
+        .then((res) => {
+          if (status > 0) {
+          }
+
+          self.ossAvatarUrl = "";
+        })
+        .catch((err) => {
+          this.$message({
+            type: "warning",
+            message: err.msg,
+          });
+        });
+    },
     getNoteList() {
       let self = this;
       self.noteList = [];
@@ -1794,7 +2099,9 @@ export default {
       this.param.gradeId = this.gradeId;
       this.$request.courseCourseList(this.param).then((res) => {
         this.courseList.push(...res.rows);
-        this.courseId = this.courseList[0].courseId;
+        if (!this.courseId) {
+          this.courseId = this.courseList[0].courseId;
+        }
         this.param.total = res.total;
         this.courseChange();
       });
@@ -2756,7 +3063,10 @@ export default {
         width: 400px;
         height: 300px;
 
-        background: #000;
+        video {
+          width: 100%;
+          height: 100%;
+        }
       }
     }
 
@@ -2764,13 +3074,13 @@ export default {
       height: 90px;
       border-top: 1px solid #eee;
       .take {
+        display: block;
         width: 200px;
         height: 40px;
-        background: #3f8dfd;
+        padding: 0;
         border-radius: 20px;
         text-align: center;
         line-height: 40px;
-        color: #fff;
         margin: 24px auto;
       }
     }

src/pages/home/index.vue

@@ -220,11 +220,17 @@
                   <img src="@/assets/kc.png" alt="" />
                   <div class="text">课程</div>
                 </div>
-                <div class="type-list__item">
+                <div
+                  class="type-list__item"
+                  @click="go('/person-center/my-bank')"
+                >
                   <img src="@/assets/tk.png" alt="" />
                   <div class="text">题库</div>
                 </div>
-                <div class="type-list__item">
+                <div
+                  class="type-list__item"
+                  @click="go('/person-center/my-order')"
+                >
                   <img src="@/assets/dd.png" alt="" />
                   <div class="text">订单</div>
                 </div>

src/pages/payment-success/index.vue

@@ -10,12 +10,14 @@
         <div class="section__body">
           <div class="order-msg">
             <div class="order-msg__body">
-              <div class="goods_item">订单编号：20220305100636</div>
-              <div class="goods_item">订单金额：900.00 元</div>
+              <div class="goods_item">订单编号：{{ orderSn }}</div>
+              <div class="goods_item">订单金额：{{ total | toFixed }} 元</div>
 
               <div class="links">
-                <a>查看订单详情</a>
-                <a>继续逛逛</a>
+                <a @click="go('/person-center/my-order', { state: '2' })"
+                  >查看订单详情</a
+                >
+                <a @click="go('/')">继续逛逛</a>
               </div>
             </div>
           </div>
@@ -72,10 +74,23 @@ export default {
     ToolBar,
   },
   data() {
-    return {};
+    return {
+      orderSn: "",
+      total: 0,
+    };
+  },
+  mounted() {
+    this.orderSn = this.$route.params.orderSn;
+    this.total = this.$route.params.total;
+  },
+  methods: {
+    go(path, query) {
+      this.$router.push({
+        path,
+        query,
+      });
+    },
   },
-  mounted() {},
-  methods: {},
 };
 </script>
 

src/pages/payment/index.vue

@@ -11,10 +11,11 @@
         </div>
         <div class="section__body">
           <div class="order-msg">
-            <div class="order-msg__header">
-              <div class="icon">✔</div>
-              <div class="title">订单提交成功！订单编号：20220305100636</div>
-              <div class="desc">订单详情▼</div>
+            <div class="order-msg__header" v-if="orderSn">
+              <!-- <div class="icon">✔</div> -->
+              <!-- <div class="title">订单提交成功！订单编号：20220305100636</div> -->
+              <div class="title">订单编号：{{ orderSn }}</div>
+              <!-- <div class="desc">订单详情▼</div> -->
             </div>
 
             <div class="order-msg__body">
@@ -36,18 +37,20 @@
                   <img src="@/assets/wep.png" alt="" />
                 </el-radio>
               </li>
-              <li :class="{ active: radio == 2 }">
+              <!-- <li :class="{ active: radio == 2 }">
                 <el-radio v-model="radio" label="2">
                   <img src="@/assets/unp.png" alt="" />
                 </el-radio>
-              </li>
+              </li> -->
             </ul>
           </div>
 
           <div class="payment-btn">
             应付金额：
             <div class="price">{{ total | toFixed }}</div>
-            <div class="btn" @click="pay">立即支付</div>
+            <el-button type="danger" class="btn" id="pay" @click="pay"
+              >立即支付</el-button
+            >
           </div>
         </div>
       </div>
@@ -60,15 +63,16 @@
       center
       :close-on-click-modal="false"
       :close-on-press-escape="false"
+      :before-close="closePay"
       class="qrcode"
     >
       <div class="qrcode__body">
         <div class="img">
-          <img src="@/assets/qrcode.png" alt="" />
+          <img :src="urlBase64" alt="" />
         </div>
-        <p>距离二维码过期还剩<span>60</span>秒</p>
+        <!-- <p>距离二维码过期还剩<span>60</span>秒</p>
         <p>过期后请刷新重新获取二维码</p>
-        <p>客服电话：020-12345678</p>
+        <p>客服电话：020-12345678</p> -->
       </div>
     </el-dialog>
 
@@ -81,7 +85,7 @@
 import Footer from "@/components/footer/index";
 import Header from "@/components/header/index";
 import ToolBar from "@/components/toolbar/index";
-import { mapGetters } from "vuex";
+import { mapGetters, mapMutations } from "vuex";
 export default {
   name: "Payment",
   components: {
@@ -94,20 +98,46 @@ export default {
       radio: "1",
       qrCodeShow: false,
       total: 0,
+      urlBase64: "",
+      orderSn: "",
+      checkOrderTimer: null,
+      loading: null,
     };
   },
   computed: {
     ...mapGetters(["checkGoodsList"]),
   },
+  beforeDestroy() {
+    clearInterval(this.checkOrderTimer);
+  },
   mounted() {
     console.log(this.checkGoodsList);
-    if (this.checkGoodsList.length <= 0) {
-      this.$router.replace("/cart");
+    if (this.checkGoodsList.length <= 0 && !this.$route.params.orderSn) {
+      this.$router.back(-1);
+      return;
+    } else {
+      if (this.$route.params.orderSn) {
+        this.orderSn = this.$route.params.orderSn;
+        this.total = this.$route.params.total;
+      } else if (this.checkGoodsList.length > 0) {
+        this.caculate();
+      }
     }
-
-    this.caculate();
   },
   methods: {
+    ...mapMutations(["setCheckGoodsList"]),
+    closePay() {
+      console.log(999);
+      this.$confirm("确定离开支付页面吗", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+      })
+        .then((_) => {
+          this.qrCodeShow = false;
+          this.$router.back(-1);
+        })
+        .catch((_) => {});
+    },
     caculate() {
       this.total = 0;
       this.checkGoodsList.forEach((item) => {
@@ -115,40 +145,103 @@ export default {
         console.log(this.total);
       });
     },
+
     pay() {
       if (this.radio == 1) {
         //微信
 
-        this.$request
-          .orderPlacePcOrder({ goodsList: this.checkGoodsList })
-          .then((res) => {
-            console.log(res);
-          })
-          .catch((err) => {
-            if (err.code == 510) {
-              this.$confirm(err.msg + ",点击确定跳转待支付订单列表", "提示", {
-                confirmButtonText: "确定",
-                cancelButtonText: "取消",
-              })
-                .then((_) => {
-                  this.$router.push({
-                    path: "/person-center/my-order",
-                  });
-                })
-                .catch((_) => {});
-              // this.qrCodeShow = true;
-            }
-          });
-        // setTimeout(() => {
-        //   this.qrCodeShow = false;
-        //   this.$router.push({
-        //     path: "payment-success",
-        //   });
-        // }, 2000);
+        this.loading = this.$loading({
+          lock: true,
+          text: "支付中",
+          spinner: "el-icon-loading",
+          background: "rgba(0, 0, 0, 0)",
+          target: document.querySelector(".section__body"),
+        });
+
+        if (this.orderSn) {
+          //订单继续支付
+          this.orderResumePCOrder();
+        } else {
+          //购物车进入支付
+          this.orderPlacePcOrder();
+        }
       } else {
         //银联
       }
     },
+
+    orderPlacePcOrder() {
+      this.$request
+        .orderPlacePcOrder({ goodsList: this.checkGoodsList })
+        .then((res) => {
+          this.loading.close();
+          console.log(res);
+          this.urlBase64 = res.data.urlBase64;
+          this.orderSn = res.data.orderSn;
+          this.qrCodeShow = true;
+          this.checkOrderTimer = setInterval(() => {
+            this.orderPayStatus();
+          }, 2000);
+        })
+        .catch((err) => {
+          this.loading.close();
+          if (err.code == 510) {
+            this.$confirm(err.msg + "。点击确定跳转待支付订单列表", "提示", {
+              confirmButtonText: "确定",
+              cancelButtonText: "取消",
+            })
+              .then((_) => {
+                this.$router.push({
+                  path: "/person-center/my-order",
+                });
+              })
+              .catch((_) => {});
+            // this.qrCodeShow = true;
+          } else {
+            this.$message({
+              type: "warning",
+              message: err.msg,
+            });
+          }
+        });
+    },
+
+    orderResumePCOrder() {
+      this.$request
+        .orderResumePCOrder({ orderSn: this.orderSn })
+        .then((res) => {
+          this.loading.close();
+          this.urlBase64 = res.data.urlBase64;
+          this.orderSn = res.data.orderSn;
+          this.qrCodeShow = true;
+          this.checkOrderTimer = setInterval(() => {
+            this.orderPayStatus();
+          }, 2000);
+        })
+        .catch((err) => {
+          this.loading.close();
+        });
+    },
+
+    orderPayStatus() {
+      this.$request
+        .orderPayStatus(this.orderSn)
+        .then((res) => {
+          if (res.data) {
+            this.setCheckGoodsList([]);
+            clearInterval(this.checkOrderTimer);
+            this.$router.replace({
+              path: "/payment-success",
+              name: "支付成功",
+              params: {
+                orderSn: this.orderSn,
+                total: this.total,
+              },
+            });
+          }
+        })
+        .catch((err) => {});
+    },
   },
 };
 </script>
@@ -269,12 +362,17 @@ export default {
           margin-left: 40px;
           width: 120px;
           height: 40px;
-          background: #ff3b30;
+          padding: 0;
+          background-color: #ff3b30;
           border-radius: 20px;
           text-align: center;
           line-height: 40px;
           color: #fff;
           font-size: 16px;
+
+          &:hover {
+            background-color: #f78989;
+          }
         }
       }
     }
@@ -286,6 +384,11 @@ export default {
         margin: 0 auto;
         width: 180px;
         height: 180px;
+
+        img {
+          width: 100%;
+          height: 100%;
+        }
       }
 
       p {

src/pages/person-center/my-order/index.vue

@@ -51,7 +51,7 @@
                     @click="refund(item.orderSn, items.goodsId)"
                     v-if="
                       items.refundStatus === 0 &&
-                      item.orderFrom === 2 &&
+                      (item.orderFrom === 2 || item.orderFrom === 3) &&
                       (item.orderStatus === 1 ||
                         item.orderStatus === 2 ||
                         item.orderStatus === 3) &&
@@ -73,7 +73,10 @@
                   <el-button
                     type="primary"
                     class="btn"
-                    v-if="item.orderStatus === 0 && item.orderFrom === 2"
+                    v-if="
+                      item.orderStatus === 0 &&
+                      (item.orderFrom === 2 || item.orderFrom === 3)
+                    "
                     @click="pay(item)"
                   >
                     立即支付
@@ -140,6 +143,7 @@
 </template>
 
 <script>
+import { mapMutations } from "vuex";
 export default {
   name: "MyOrder",
   data() {
@@ -152,12 +156,17 @@ export default {
         pageSize: 10,
       },
       total: 0,
+      loading: null,
     };
   },
   mounted() {
+    if (this.$route.query.state) {
+      this.activeName = this.$route.query.state;
+    }
     this.getOrderList();
   },
   methods: {
+    ...mapMutations(["setCheckGoodsList"]),
     currentChange(e) {
       this.formData.pageNum = e;
 
@@ -191,8 +200,14 @@ export default {
       }
     },
     pay(item) {
+      this.setCheckGoodsList([]);
       this.$router.push({
-        path: "payment-success",
+        path: "/payment",
+        name: "支付",
+        params: {
+          total: item.payPrice,
+          orderSn: item.orderSn,
+        },
       });
     },
 
@@ -206,9 +221,11 @@ export default {
         showClose: false,
       })
         .then((_) => {
+          this.showLoading();
           this.$request
             .refundSmallOrder({ orderSn: orderSn, goodsId: goodsId })
             .then((res) => {
+              this.hideLoading();
               this.$message({
                 type: "success",
                 message: "退款成功",
@@ -216,6 +233,7 @@ export default {
               this.getOrderList();
             })
             .catch((err) => {
+              this.hideLoading();
               this.$message({
                 type: "warning",
                 message: "不可以退款哦",
@@ -235,6 +253,7 @@ export default {
         showClose: false,
       })
         .then((_) => {
+          this.showLoading();
           this.$request
             .eddOrder({ orderId: item.orderId, status: -1 })
             .then((res) => {
@@ -242,6 +261,7 @@ export default {
                 type: "success",
                 message: "订单删除成功",
               });
+              this.hideLoading();
               this.getOrderList();
             })
             .catch((err) => {
@@ -251,16 +271,23 @@ export default {
               });
             });
         })
-        .catch((err) => {});
+        .catch((err) => {
+          this.hideLoading();
+        });
     },
 
     orderRefundList() {
+      this.showLoading();
       this.formData.pageNum = 1;
       this.formData.orderStatus = "";
-      this.$request.orderRefundList(this.formData).then((res) => {
-        this.orderList = res.rows;
-        this.total = res.total;
-      });
+      this.$request
+        .orderRefundList(this.formData)
+        .then((res) => {
+          this.hideLoading();
+          this.orderList = res.rows;
+          this.total = res.total;
+        })
+        .catch(this.hideLoading);
     },
 
     /**
@@ -276,9 +303,11 @@ export default {
         showClose: false,
       })
         .then((_) => {
+          this.showLoading();
           this.$request
             .eddOrder({ orderId: item.orderId, orderStatus: -1 })
             .then((res) => {
+              this.hideLoading();
               this.$message({
                 type: "success",
                 message: "订单取消成功",
@@ -286,6 +315,7 @@ export default {
               this.getOrderList();
             })
             .catch((err) => {
+              this.hideLoading();
               this.$message({
                 type: "warning",
                 message: err.msg,
@@ -295,8 +325,23 @@ export default {
         .catch((_) => {});
     },
 
+    showLoading(obj) {
+      this.loading = this.$loading({
+        lock: true,
+        text: (obj && obj.text) || "loading",
+        spinner: "el-icon-loading",
+        background: "rgba(0, 0, 0, 0)",
+        target: document.querySelector(".my-order__body"),
+      });
+    },
+
+    hideLoading() {
+      this.loading.close();
+    },
+
     //获取订单
     getOrderList() {
+      this.showLoading();
       if (this.activeName == "1") {
         this.formData.orderStatus = "0";
       }
@@ -306,10 +351,14 @@ export default {
       if (this.activeName == "3") {
         this.formData.orderStatus = "-1,-2,4";
       }
-      this.$request.getorderlists(this.formData).then((res) => {
-        this.orderList = res.rows;
-        this.total = res.total;
-      });
+      this.$request
+        .getorderlists(this.formData)
+        .then((res) => {
+          this.orderList = res.rows;
+          this.total = res.total;
+          this.hideLoading();
+        })
+        .catch(this.hideLoading);
     },
   },
 };