详情页添加鉴定视频

张文文
Commit e816af01c5228ec25f3f19d50d4056de502c352a 1 parent 80f6f604
Showing 3 changed files with 50 additions and 20 deletions
apps/pages/order/components/order-actions.vue
apps/pages/order/order-detail/buyer-order-detail.vue
apps/pages/order/order-list/order-list.vue
--- a/apps/pages/order/components/order-actions.vue
View file @e816af0
+++ b/apps/pages/order/components/order-actions.vue
View file @e816af0
@@ -2,7 +2,7 @@
   <div class="pane-body">
     <div
       class="video-wrapper"
-      v-if="appraiseVideoUrl"
+      v-if="appraiseVideoUrl && pageName === 'list'"
       @click="() => onVideoHandler({videoUrl:appraiseVideoUrl, orderCode: order.orderCode})"
     >
       <div class="play-btn"></div>
@@ -31,6 +31,10 @@ export default {
     order: {
       type: Object,
       default: {}
+    },
+    pageName: {
+      type: String,
+      default: ""
     }
   },
   computed: {
--- a/apps/pages/order/order-detail/buyer-order-detail.vue
View file @e816af0
+++ b/apps/pages/order/order-detail/buyer-order-detail.vue
View file @e816af0
@@ -24,16 +24,19 @@
         <address-info class="item-wrapper" />
         <!-- 商品信息 -->
         <order-item-info class="item-wrapper" />
+        <!-- 鉴定视频 -->
+        <div
+          class="video-wrapper item-wrapper"
+          v-if="orderDetail.appraiseVideoUrl"
+          @click="() => onVideoHandler()"
+        ></div>
         <!-- 价格信息 -->
         <div class="price-info item-wrapper">
           <p>
             <span class="label">商品金额:</span>
             <span>¥{{ priceInfo.goodPrice }}</span>
           </p>
-          <p
-            v-if="parseInt(priceInfo.activityCutPrice || '') > 0"
-            class="delivery-fee"
-          >
+          <p v-if="parseInt(priceInfo.activityCutPrice || '') > 0" class="delivery-fee">
             <span class="label">活动优惠:</span>
             <span>-¥{{ priceInfo.activityCutPrice }}</span>
           </p>
@@ -41,24 +44,15 @@
             <span class="label">运费:</span>
             <span>¥{{ priceInfo.feePrice }}</span>
           </p>
-          <p
-            v-if="parseInt(priceInfo.couponCutPrice || '') > 0"
-            class="delivery-fee"
-          >
+          <p v-if="parseInt(priceInfo.couponCutPrice || '') > 0" class="delivery-fee">
             <span class="label">优惠券:</span>
             <span>-¥{{ priceInfo.couponCutPrice }}</span>
           </p>
-          <p
-            v-if="parseInt(priceInfo.shippingCouponCutPrice || '') > 0"
-            class="delivery-fee"
-          >
+          <p v-if="parseInt(priceInfo.shippingCouponCutPrice || '') > 0" class="delivery-fee">
             <span class="label">运费券:</span>
             <span>-¥{{ priceInfo.shippingCouponCutPrice }}</span>
           </p>
-          <p
-            v-if="parseInt(priceInfo.cutPromotionPrice || '') > 0"
-            class="delivery-fee"
-          >
+          <p v-if="parseInt(priceInfo.cutPromotionPrice || '') > 0" class="delivery-fee">
             <span class="label">促销:</span>
             <span>-¥{{ priceInfo.cutPromotionPrice }}</span>
           </p>
@@ -94,7 +88,7 @@
             <p>实付金额</p>
           </div>
         </template>
-      </detail-footer> -->
+      </detail-footer>-->
       <div v-if="actionList.length > 0" class="footer-wrapper">
         <div v-if="statusDetail.status === 0">
@@ -109,6 +103,10 @@
           "
         />
       </div>
+
+      <div ref="videoWrapper">
+        <VideoPlayer ref="videoPlayer" class="play-video" :source="orderDetail.appraiseVideoUrl"></VideoPlayer>
+      </div>
     </div>
   </layout-app>
 </template>
@@ -124,6 +122,7 @@ import DetailHeader from "./components/header";
 import DetailFooter from "./components//detail-footer";
 import OrderActions from "../components/order-actions";
+import VideoPlayer from "../order-list/components/video-player";
 import orderActionMixin from "./mixins/order-action";
@@ -141,7 +140,8 @@ export default {
     Button,
     OrderActions,
     DetailHeader,
-    DetailFooter
+    DetailFooter,
+    VideoPlayer
   },
   activated() {
     this.copyBtn = new Clipboard(this.$refs.copy, {
@@ -169,7 +169,19 @@ export default {
     ])
   },
   methods: {
-    ...mapActions(["fetchOrderDetail"])
+    ...mapActions(["fetchOrderDetail"]),
+    onVideoHandler() {
+      if (!this.orderDetail.appraiseVideoUrl) {
+        return;
+      }
+      this.$refs.videoPlayer.parentHandleclick();
+    }
+  },
+  mounted() {
+    if (this.$yoho.isAndroid) {
+      this.$refs.videoWrapper.style.position = "absolute";
+      this.$refs.videoWrapper.style.top = "-1000px";
+    }
   }
 };
 </script>
@@ -204,6 +216,13 @@ export default {
     }
   }
+  .video-wrapper {
+    width: 100%;
+    height: 378px;
+    background: url("~statics/image/order/video-big@3x.png");
+    background-size: cover;
+  }
+
   .item-wrapper {
     border-top: 1px solid #eee;
     padding: 40px 0;
@@ -291,5 +310,11 @@ export default {
     font-size: 28px;
     color: #d0021b;
   }
+
+  .play-video {
+    display: inline-block;
+    height: 10px;
+    opacity: 0;
+  }
 }
 </style>
--- a/apps/pages/order/order-list/order-list.vue
View file @e816af0
+++ b/apps/pages/order/order-list/order-list.vue
View file @e816af0
@@ -18,6 +18,7 @@
               <count-down :leftTime="order.leftTime" />
               <order-actions
                 class="actions"
+                pageName="list"
                 :order="order"
                 @on-action="action => onAction({ action, order })"
                 @on-video="params => onVideoHandle(params)"