更新

hdApp/src/pagesPurchase/particulars.vue

@@ -9,10 +9,9 @@
         <button v-if="ghsCgScene!=''" class="admin-button-com big" style="width:70vw;margin-top:18upx;" @click="goHome">返回首页</button>
         <button v-else class="admin-button-com big" style="width:70vw;margin-top:18upx;" @click="goBack">返回</button>
 
-        <view style="margin-top:15upx;" v-if="showFirstGuide">
-          <view style="font-size:28upx;">微信下拉，搜索小程序 花掌柜，可再次买花</view>
-          <view style="margin-bottom:30upx;margin-top:15upx;">
-            <image style="width:70vw;" :src="`${constant.imgUrl}/cg/hd_cg_route3.png`" mode="widthFix"></image>
+        <view style="margin-top:10upx;" v-if="showFirstGuide">
+          <view style="margin-bottom:10upx;margin-top:15upx;" @click="openGuideVideo">
+            <image style="width:80vw;" :src="`${constant.imgUrl}/cg/hd_cg_route9.png`" mode="widthFix"></image>
           </view>
         </view>
 
@@ -22,6 +21,23 @@
       <ad-custom unit-id="adunit-b3f48f1b6c1a39ff"></ad-custom>
       <!-- #endif -->
     </view>
+
+    <uni-popup ref="guideVideoPopup" background-color="#fff" type="center" :animation="true" @change="onGuideVideoPopupChange">
+      <view class="guide-video-popup">
+        <video
+          v-if="guideVideoUrl"
+          id="guideVideo"
+          class="guide-video"
+          :src="guideVideoUrl"
+          :autoplay="true"
+          object-fit="contain"
+          controls
+          show-center-play-btn
+          @loadedmetadata="playGuideVideo"
+        ></video>
+        <button class="admin-button-com default guide-video-close" @click="closeGuideVideo">关闭</button>
+      </view>
+    </uni-popup>
   </view>
 </template>
 <script>
@@ -39,7 +55,8 @@ export default {
       fromCg:0,
       flowersList:[],
       onlyCg:1,
-      showFirstGuide:true
+      showFirstGuide:true,
+      guideVideoUrl:''
     }
   },
   onLoad () {
@@ -142,6 +159,36 @@ export default {
       this.pageTo({url: '/pagesPurchase/purDetails?id='+this.option.id+'&status=2',type:2})
       //this.subscribe()
     },
+    openGuideVideo() {
+      this.guideVideoUrl = `${this.constant.hostUrl}/buy_list.mp4`
+      this.$refs.guideVideoPopup.open('center')
+      this.$nextTick(() => {
+        this.playGuideVideo()
+      })
+    },
+    playGuideVideo() {
+      if (!this.guideVideoUrl) {
+        return
+      }
+      const videoContext = uni.createVideoContext('guideVideo', this)
+      if (videoContext) {
+        videoContext.play()
+      }
+    },
+    closeGuideVideo() {
+      const videoContext = uni.createVideoContext('guideVideo', this)
+      if (videoContext) {
+        videoContext.stop()
+      }
+      uni.setStorageSync('particularsVisitCount', 4)
+      this.showFirstGuide = false
+      this.$refs.guideVideoPopup.close()
+    },
+    onGuideVideoPopupChange(e) {
+      if (!e.show) {
+        this.guideVideoUrl = ''
+      }
+    },
     subscribe(){
       // #ifdef MP-WEIXIN
       if(this.getDictionariesInfo && this.getDictionariesInfo.subscribeMessage && this.getDictionariesInfo.subscribeMessage == 1 && this.getDictionariesInfo.hdMiniMessage && this.getDictionariesInfo.hdMiniMessage.cgSuccess && this.getDictionariesInfo.hdMiniMessage.remindHdClear && this.getDictionariesInfo.hdMiniMessage.fhNotice){
@@ -283,4 +330,20 @@ export default {
     width: 100%;
   }
 }
+
+.guide-video-popup {
+  padding: 24upx;
+  box-sizing: border-box;
+  text-align: center;
+}
+
+.guide-video {
+  width: 700upx;
+  height: 1000upx;
+}
+
+.guide-video-close {
+  margin-top: 24upx;
+  width: 200upx;
+}
 </style>