horzi_rai_wxa/pageMy/followUs/followUs.vue

<template>
  <view class="container container-follow-us">
    <view class="content">
      <video
        v-if="isPlay"
        autoplay
        id="myVideo"
        src="https://hzstatic.hzinsights.com/static/yb/video/8617330c2a76e0c35999f6466b4470c4.mp4"
        @ended="handleVideoEnd"
      ></video>
      <image class="video-img" @click="playHandler" v-else src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/my_video.png"></image>
      <view class="text-introduce">三分钟了解弘则研究体系和方法论</view>
    </view>
    <view class="my-log">
      <image src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/my_log.png"></image>
    </view>
  </view>
</template>

<script>
import { Mine } from "@/config/api";
export default {
  data() {
    return {
      videoContext: null,
      isPlay: false,
    };
  },
  methods: {
    // 播放结束退出全屏
    handleVideoEnd() {
      this.videoContext.exitFullScreen();
    },
    // 点击了播放
    async playHandler() {
      this.isPlay = true;
      const res = await Mine.addHistory();
    },
  },
  onReady() {
    this.videoContext = wx.createVideoContext("myVideo");
  },
  async onShow() {
    await this.$store.dispatch("checkHandle");
  },
};
</script>

<style lang="scss" scoped>
.container-follow-us {
  padding: 20rpx 10rpx;
  background-color: #f7f7f7;
  .content {
    background-color: #fff;
  }
  .video-img {
    width: 100%;
    height: 340rpx;
  }
  video {
    width: 100%;
    height: 340rpx;
  }
  .text-introduce {
    color: #333333;
    font-weight: 500;
    font-size: 28rpx;
    line-height: 39rpx;
    text-align: center;
  }
  .my-log {
    width: 100%;
    height: 311rpx;
    margin-top: 230rpx;
    display: flex;
    justify-content: center;
    image {
      width: 303rpx;
      height: 311rpx;
    }
  }
}
</style>