update

src/mixins/global.js

@@ -80,6 +80,52 @@ Vue.mixin({
                 c.destroy()
             })
         },
+        getVideoBase64(url,width=400,height=240) {
+            return new Promise(function (resolve, reject) {
+                // let dataURL = '';
+                // let video = document.createElement("video");
+                // video.setAttribute('crossOrigin', 'anonymous');//处理跨域
+                // video.setAttribute('src', url);
+                // video.setAttribute('width', width);
+                // video.setAttribute('height', height);
+                // video.addEventListener('loadeddata', function () {
+                //     let canvas = document.createElement("canvas"),
+                //         width = video.width, //canvas的尺寸和图片一样
+                //         height = video.height;
+                //     canvas.width = width;
+                //     canvas.height = height;
+                //     canvas.getContext("2d").drawImage(video, 0, 0, width, height); //绘制canvas
+                //     dataURL = canvas.toDataURL('image/jpeg'); //转换为base64
+                //     resolve(dataURL);
+                // });
+                let dataURL=""
+                // 在缓存中创建video标签
+                var video = document.createElement("video")
+                video.setAttribute('crossOrigin', 'anonymous');//处理跨域
+                video.setAttribute('src', url);
+                  // 再添加一个静音的属性，否则自动播放会有声音
+                  video.setAttribute('muted', 'muted')
+                // 通过setAttribute给video dom元素添加自动播放的属性，因为视频播放才        
+                video.setAttribute('autoplay', 'autoplay')
+              
+                video.setAttribute('width', width);
+                video.setAttribute('height', height);
+               
+                // video注册canplay自动播放事件
+                video.addEventListener('canplay', function() {
+                    let canvas = document.createElement("canvas"),
+                        width = video.width, //canvas的尺寸和图片一样
+                        height = video.height;
+                    canvas.width = width;
+                    canvas.height = height;
+                    canvas.getContext("2d").drawImage(video, 0, 0, width, height); //绘制canvas
+                    console.log(canvas)
+                    dataURL = canvas.toDataURL('image/jpeg'); //转换为base64
+                    // video.remove()
+                    resolve(dataURL);   
+                });
+            })
+        }
     },
     filters: {
         timeFilter(val) {

src/views/blind-box/blind-detail.vue

@@ -168,8 +168,5 @@ export default {
       font-size: 14px;
     }
   }
-  .getHtml{
-    padding: 0 10px;
-  }
 }
 </style>
\ No newline at end of file

src/views/blind-box/blind-sku.vue

@@ -161,6 +161,7 @@ export default {
       width: 120px;
       height: 167px;
       margin-bottom: 32px;
+      object-fit: cover;
     }
     .name {
         color: #030711;

src/views/order/pay-result.vue

@@ -60,11 +60,24 @@
     <div class="tip">
       温馨提醒：支付结果可能因为外部支付服务繁忙，无法及时获取支付结果，您可以稍后到我的订单查看本订单的支付结果！
     </div>
+    <van-popup v-model="showPopup" round >
+      <div class="goods-detail-con">
+        <div class="goods-detail-card">
+          <div class="title">恭喜您获得数字藏品</div>
+          <img class="thumb" :src="goodsDetail.thumb" alt="" />
+          <div class="name">{{goodsName}}</div>
+        </div>
+        <div class="close-img flex-center" @click="showPopup=false">
+          <van-icon name="cross"  color="#ffffff" size="12px"/>
+        </div>
+      </div>
+    </van-popup>
   </div>
 </template>
 
 <script>
-import { PayType, PayTypeObj } from "@/enums";
+import { PayType, PayTypeObj,SalesType } from "@/enums";
+import { Icon } from 'vant';
 const PayMethodType = {
   DEFAULT: 0,
   ALIPAY: 1,
@@ -80,6 +93,9 @@ const PayMethodTypeLabel = {
   [PayMethodType.CREDIT]: "积分",
 };
 export default {
+   components:{
+    [Icon.name]: Icon,
+  },
   data() {
     return {
       PayMethodType,
@@ -92,6 +108,9 @@ export default {
         paidAmount: 0,
         payType: 0,
       },
+      oid:"",
+      showPopup:false,
+      goodsDetail:{}
     };
   },
   computed: {
@@ -112,6 +131,15 @@ export default {
       let obj = PayTypeObj[this.payType];
       return obj || PayTypeObj[PayType.NORMAL];
     },
+    goodsName(){
+      let name=""
+      if(this.goodsDetail.salesType===SalesType.BLINDBOX){
+        name=this.goodsDetail.propList?this.goodsDetail.propList[0].value:this.goodsDetail.name
+      }else{
+        name=this.goodsDetail.name
+      }
+      return name
+    },
   },
   methods: {
     pollingPayState() {
@@ -140,8 +168,21 @@ export default {
     paySuccess() {
       setTimeout(() => {
         this.type = "success";
+        this.getOrderDetail()
       }, 1000);
     },
+    getOrderDetail(){
+      this.$api({
+        apiName:"getOrderDetail",
+        postData:this.oid,
+        success:(res)=>{
+          if(res.orders&&res.orders.length>0){
+            this.goodsDetail=res.orders[0]
+            this.showPopup=true
+          }
+        }
+      })
+    },
     payFail() {
       setTimeout(() => {
         this.type = "fail";
@@ -158,6 +199,7 @@ export default {
   created() {
     this.pid = this.$route.params.pid;
     this.payType = this.$route.query.type;
+    this.oid=this.$route.query.oid
     this.pollingPayState();
   },
 };
@@ -307,5 +349,56 @@ export default {
     line-height: 17px;
     padding: 0 13px;
   }
+  .van-popup--center.van-popup--round{
+    border-radius: 0px;
+  }
+  .van-popup{
+    background: transparent;
+  }
+  .goods-detail-con{
+    .goods-detail-card {
+      width:227px ;
+      height: 284px;
+      text-align: center;
+      padding:17px 18px 14px;
+      background: #ffffff;
+      border-radius: 4px;
+      .title{
+        color: #030711;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        height: 24px;
+        margin-bottom: 21px;
+        font-size: 14px;
+        font-weight: 500;
+        line-height: 24px;
+      }
+      > .thumb {
+        width: 120px;
+        height: 167px;
+        margin-bottom: 17px;
+        object-fit: cover;
+      }
+      .name {
+          color: #030711;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          height: 24px;
+          font-size: 14px;
+          font-weight: 500;
+          line-height: 24px;
+      }
+    }
+    .close-img{
+      margin: 0 auto;
+      width: 28px;
+      height: 28px;
+      border-radius: 50%;
+      background: #333333;
+      margin-top: 65px;
+    }
+  }
 }
 </style>
\ No newline at end of file

src/views/order/payment/index.vue

@@ -135,6 +135,7 @@ export default {
       leftTime: 15 * 60 * 1000,
       formType: "order",
       timeFinish: false,
+      oid:""
     };
   },
   computed: {
@@ -174,7 +175,6 @@ export default {
       if (this.accountInfo.isPayPassword) {
         return true;
       }
-      console.log(this.accountInfo.isPayPassword)
       this.$confirm({
         content: "您当前尚未设置支付密码，是否前往设置？",
         confirm: () => {
@@ -241,8 +241,8 @@ export default {
                 // alert(response)
                 if(response==0){
                   let params = { pid:this.pid };
-                  let query = { type: this.payType };
-                  this.$router.replace({ name: "pay-result", params, query });
+                  let query = { type: this.payType,oid:this.oid };
+                  this.$router.replace({ name: "pay-result", params, query});
                 }else if(response==-2){
                   this.$toast("取消支付");
                 }else{
@@ -297,6 +297,8 @@ export default {
         apiName: this.payTypeObj.detailApi,
         postData: this.pid,
         success: (res) => {
+          let oids=JSON.parse(res.oidsJson)
+          this.oid=oids[0] || ""
           this.payInfo = res;
           let timeOut = this.payInfo.createTime + 15 * 60 * 1000 - +new Date();
           this.leftTime = timeOut > 0 ? timeOut : 0;
@@ -331,7 +333,7 @@ export default {
             pid = res;
           }
           let params = { pid };
-          let query = { type: payType };
+          let query = { type: payType,oid:this.oid };
           this.$router.replace({ name: "pay-result", params, query });
         },
         complete: () => {