添加ufo/nfc分享页

@@ -588,6 +588,15 @@ const yoho = {
     }
   },
 
+  getNetStatus(args, success, fail) {
+    if (this.isYohoBuy && window.yohoInterface) {
+      window.yohoInterface.triggerEvent(success || nullFun, fail || nullFun, {
+        method: 'get.netstatus',
+        arguments: args
+      });
+    }
+  },
+
   setWebview(args, success, fail) {
     if (this.isYohoBuy && window.yohoInterface) {
       window.yohoInterface.triggerEvent(success || nullFun, fail || nullFun, {

+<template>
+  <div class="video-player">
+    <video
+      v-if="showVideo"
+      ref="videoPlayer"
+      class="video-js vjs-matrix vjs-yoho"
+      controls
+      :poster="coverImg"
+      preload="auto"
+      muted="muted"
+      autoplay="none"
+      playsinline
+      x5-playsinline
+      webkit-playsinline="true">
+      <source :src="source" :type="sourceType"/>
+      <p class="vjs-no-js">
+        To view this video please enable JavaScript, and consider upgrading to a
+        web browser
+      </p>
+      <div class="vjs-yoho-voice"></div>
+    </video>
+  </div>
+</template>
+
+<script>
+import {get} from 'lodash';
+import videojs from 'video.js';
+import {getArticleImageSize, processImage} from 'utils/image-handler';
+import versionCompare from 'utils/version';
+
+export default {
+  name: 'VideoPlayer',
+  props: {
+    source: String,
+    cover: String,
+    width: [Number, String],
+    height: [Number, String],
+    options: {
+      type: Object,
+      default() {
+        return {
+          muted: true,
+          controls: true,
+          aspectRatio: '1:1'
+        };
+      }
+    }
+  },
+  data() {
+    return {
+      showVideo: false,
+      player: null
+    };
+  },
+  computed: {
+    coverImg() {
+      if (this.cover) {
+        if (this.width && this.height) {
+          let imgSize = getArticleImageSize({
+            width: this.width,
+            height: this.height,
+            minScale: 0,
+            maxWidth: 500
+          });
+
+          return processImage(this.cover, 2, imgSize.width, imgSize.height, get(this.yoho, 'window.supportWebp'));
+        } else {
+          return this.cover.split('?')[0];
+        }
+      } else {
+        return '';
+      }
+    },
+    sourceType() {
+      let type = 'video/mp4';
+
+      if (this.source) {
+        let source = this.source.split('?')[0];
+
+        source = source.split('.');
+
+        switch (source[source.length - 1]) {
+          case 'opus':
+          case 'ogv':
+            type = 'video/ogg';
+            break;
+          case 'mkv':
+            type = 'video/x-matroska';
+            break;
+          case 'm3u8':
+            type = 'application/x-mpegURL';
+            break;
+          case 'm4a':
+            type = 'audio/mp4';
+            break;
+          case 'mp3':
+            type = 'audio/mpeg';
+            break;
+          case 'aac':
+            type = 'audio/aac';
+            break;
+          case 'oga':
+            type = 'audio/ogg';
+            break;
+          default:
+            break;
+        }
+      }
+
+      return type;
+    }
+  },
+  watch: {
+    source() {
+      this.showPlayer();
+    }
+  },
+  mounted() {
+    this.showPlayer();
+  },
+  beforeDestroy() {
+    if (this.player) {
+      this.player.dispose();
+    }
+  },
+  methods: {
+    parentHandleclick() {
+      this.player.play();
+      const timeId = setTimeout(()=> {
+        this.player.requestFullscreen();
+        clearTimeout(timeId);
+      });
+    },
+    showPlayer() {
+      if (this.showVideo || !this.source) {
+        return;
+      }
+
+      this.showVideo = true;
+      this.$nextTick(() => {
+        this.initPlayer();
+      });
+    },
+    initPlayer() {
+      const noVioceClass = 'vjs-yoho-novoice';
+
+      this.player = videojs(this.$refs.videoPlayer, this.options);
+
+      this.voiceBtn = this.player.addChild('button');
+      this.voiceBtn.addClass('vjs-yoho-voice');
+      this.voiceBtn.addClass(noVioceClass);
+      this.backBtn = this.player.addChild('button');
+      this.backBtn.addClass('vjs-yoho-back');
+      this.voiceBtn.on('touchend', () => {
+        this.player.muted(!this.voiceBtn.hasClass(noVioceClass));
+      });
+      this.backBtn.on('touchend', () => {
+        this.player.exitFullscreen();
+      });
+
+      this.player.on('play', () => {
+        this.player._yohoPlayTime = this.getTime();
+      });
+      this.player.on('pause', () => {
+        this.player._yohoPauseTime = this.getTime();
+      });
+      this.player.on('ended', () => {
+        this.player._yohoEndedTime = this.getTime();
+      });
+
+      this.player.on('fullscreenchange', () => {
+        // ios 退出全屏自动播放
+        if (this.$yoho.isiOS && versionCompare(this.$yoho.appVersion, '6.9.7') > 0) {
+          let changeTime = this.getTime();
+
+          let playTime = this.player._yohoPlayTime || 0;
+
+          let pauseTime = this.player._yohoPauseTime || 0;
+
+          let endedTime = this.player._yohoEndedTime || 0;
+
+          if ((changeTime - pauseTime) < 600 && pauseTime > playTime && playTime > endedTime) {
+            setTimeout(() => {
+              this.player.play();
+            }, 1000);
+          }
+        }
+      });
+
+      this.player.on('volumechange', () => {
+        const soundOff = this.player.muted() || this.player.volume() === 0;
+
+        if (soundOff) {
+          this.voiceBtn.addClass(noVioceClass);
+        } else {
+          this.voiceBtn.removeClass(noVioceClass);
+        }
+      });
+
+      setTimeout(() => {
+        this.$yoho.getNetStatus({}, (res) => {
+          if (res && (+res.wifi) === 1) {
+            this.player.autoplay('muted');
+          }
+        });
+      }, 1000);
+    },
+    getTime() {
+      return new Date().getTime();
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+  .video-js {
+    width: 100%;
+    height: auto;
+
+    video {
+      width: 100%;
+    }
+
+    &.vjs-yoho /deep/ {
+      position: relative;
+      background-color: #222;
+
+      .vjs-resize-manager {
+        z-index: 0;
+        visibility: hidden;
+      }
+
+      .vjs-poster {
+        background-color: #222;
+      }
+
+      .vjs-yoho-voice {
+        width: 60px;
+        height: 60px;
+        position: absolute;
+        top: 20px;
+        right: 28px;
+        opacity: 0;
+        visibility: hidden;
+        background: url("~statics/image/components/video-voice-icon.png");
+        background-size: cover;
+        background-repeat: no-repeat;
+
+        &.vjs-yoho-novoice {
+          background-position: bottom left;
+        }
+      }
+
+      &.vjs-has-started .vjs-yoho-voice {
+        visibility: visible;
+        opacity: 1;
+        transition: visibility 1s, opacity 1s;
+      }
+
+      &.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-yoho-voice {
+        visibility: visible;
+        opacity: 0;
+      }
+
+      .vjs-big-play-button {
+        width: 126px;
+        height: 126px;
+        line-height: 126px;
+        font-size: 60px;
+        border: none;
+        left: 50%;
+        top: 50%;
+        margin: -63px auto auto -63px;
+
+         /*background: url("~statics/image/components/video-play-btn.png");*/
+        background: url("data:image/png;base64,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");
+        background-size: contain;
+        background-repeat: no-repeat;
+
+        > * {
+          display: none;
+        }
+      }
+
+      @keyframes roundframe {
+        0% { -webkit-transform: rotate(0deg); }
+        25% { -webkit-transform: rotate(90deg); }
+        50% { -webkit-transform: rotate(180deg); }
+        75% { -webkit-transform: rotate(270deg); }
+        100% { -webkit-transform: rotate(360deg); }
+      }
+
+      .vjs-loading-spinner {
+        width: 110px;
+        height: 110px;
+        margin-top: -55px;
+        margin-left: -55px;
+        border: none;
+        background: url("~statics/image/components/video-loading-icon.png");
+        background-size: contain;
+        background-repeat: no-repeat;
+        background-position: center center;
+        visibility: visible;
+        animation: roundframe 1.3s linear infinite;
+
+        &:before,
+        &:after,
+        > * {
+          display: none;
+        }
+      }
+
+      .vjs-control-bar {
+        height: 80px;
+        background: none;
+        padding-bottom: 20px;
+
+        .vjs-control {
+          width: 80px;
+        }
+
+        .vjs-play-control {
+          width: 60px;
+          height: 60px;
+          margin-left: 20px;
+          background: url("~statics/image/components/video-play-icon.png");
+          background-size: cover;
+
+          &.vjs-playing {
+            background-position: bottom left;
+          }
+
+          > * {
+            display: none;
+          }
+        }
+
+        .vjs-volume-panel {
+          display: none;
+        }
+
+        .vjs-duration,
+        .vjs-current-time {
+          display: block;
+          order: 3;
+
+          > span {
+            font-size: 22px;
+            font-weight: 300;
+          }
+        }
+
+        .vjs-time-control {
+          line-height: 60px;
+        }
+
+        .vjs-current-time {
+          order: 1;
+        }
+
+        .vjs-remaining-time {
+          display: none;
+        }
+
+        .vjs-progress-control {
+          order: 2;
+
+          .vjs-progress-holder {
+            margin: 0;
+          }
+
+          .vjs-progress-holder,
+          .vjs-load-progress,
+          .vjs-play-progress {
+            height: 1px;
+          }
+
+          .vjs-play-progress:before {
+            font-size: 10px;
+            top: 0;
+            transform: translateY(-44%);
+          }
+        }
+
+        .vjs-fullscreen-control {
+          order: 4;
+          width: 60px;
+          height: 60px;
+          margin-right: 20px;
+          background: url("~statics/image/components/video-fullscreen-icon.png");
+          background-size: cover;
+
+          > * {
+            display: none;
+          }
+        }
+
+        .vjs-icon-placeholder:before {
+          font-size: 38px;
+          line-height: 60px;
+        }
+      }
+
+      &.vjs-fullscreen .vjs-fullscreen-control {
+        background-position: bottom left;
+      }
+
+      &.vjs-fullscreen .vjs-yoho-back {
+        width: 40px;
+        height: 42px;
+        background: url("~statics/image/components/video-back-icon.png");
+        background-size: contain;
+        background-repeat: no-repeat;
+        position: absolute;
+        top: 20px;
+        left: 32px;
+      }
+    }
+  }
+</style>

@@ -12,6 +12,10 @@ import sdk from 'yoho-activity-sdk';
 import 'statics/scss/common.scss';
 import 'statics/font/iconfont.css';
 import 'statics/font/ufofont.css';
+import 'video.js/dist/video-js.css';
+import Vconsole from 'vconsole';
+
+new Vconsole();
 
 const $app = document.getElementById('app');
 

@@ -5,5 +5,6 @@ import selfUfo from './selfUfo';
 import mine from './mine';
 import invite from './invite';
 import gain from './gain';
+import ufoPassport from './ufoPassport';
 
-export default [...Order, ...license, ...alipay, ...selfUfo, ...mine, ...invite, ...gain];
+export default [...Order, ...license, ...alipay, ...selfUfo, ...mine, ...invite, ...gain, ...ufoPassport];

+<template>
+  <img v-lazy="currentSrc" :alt="alt" v-if="currentLazy" class="lazy-img" @error="onError">
+  <img :src="currentSrc" :alt="alt" v-else lazy="" data-src="" @error="onError">
+</template>
+
+<script>
+import {mapState} from 'vuex';
+import {processImage} from 'utils/image-handler';
+
+export default {
+  name: 'ImageFormat',
+  props: {
+    lazy: {
+      type: Boolean,
+      default: true
+    },
+    src: String,
+    width: [Number, String],
+    height: [Number, String],
+    mode: {
+      type: [Number, String],
+      default: 2
+    },
+    alt: String,
+    interlace: Boolean
+  },
+  data() {
+    return {
+      refresh: false,
+      currentLazy: this.lazy
+    };
+  },
+  watch: {
+    src() {
+      this.currentLazy = false;
+    },
+    lazy(val) {
+      this.currentLazy = val;
+    }
+  },
+  computed: {
+    ...mapState(['yoho']),
+    currentSrc() {
+      return processImage(this.src, this.mode, this.width, this.height, false);
+    }
+  },
+  methods: {
+    onError() {
+      this.$emit('error');
+    }
+  }
+};
+</script>

+<template>
+  <div class="avatar-wrap">
+    <ImageFormat class="img-avatar" :lazy="true" :src="imageSrc" :width="width" :height="height" @error="errorHandle"></ImageFormat>
+  </div>
+</template>
+
+<script>
+import ImageFormat from './image-format';
+export default {
+  name: 'WidgetAvatar',
+  props: {
+    src: {
+      type: String,
+      default: ''
+    },
+    width: {
+      type: Number,
+      default: 35
+    },
+    height: {
+      type: Number,
+      default: 35
+    },
+    lazy: {
+      type: Boolean,
+      default: false
+    },
+    small: {
+      type: Boolean,
+      default: false
+    },
+    group: [Number, String]
+  },
+  components: {
+    ImageFormat
+  },
+  data() {
+    return {
+      imgSrc: this.src,
+      defaultSrc: 'https://img12.static.yhbimg.com/article/2019/02/26/16/02456ade977d8dfdbc4ca548b196c1d62b.png?imageView/2/w/{width}/h/{height}'
+    };
+  },
+  computed: {
+    imageSrc() {
+      return this.imgSrc || this.defaultSrc;
+    },
+  },
+  watch: {
+    src(val) {
+      this.imgSrc = val;
+    }
+  },
+  methods: {
+    errorHandle() {
+      this.imgSrc = this.defaultSrc;
+    }
+  }
+};
+</script>
+
+<style lang="css" scoped>
+.avatar-wrap {
+  display: inline-block;
+  position: relative;
+
+  > img {
+    width: 100%;
+    height: 100%;
+  }
+}
+
+.img-avatar {
+  border-radius: 50%;
+  overflow: hidden;
+}
+</style>

+
+export default [{
+  path: '/mapp/ufopassport/:tagId.html',
+  name: 'ufoPassport',
+  component: () => import(/* webpackChunkName: "ufoPassport" */ './ufoPassport')
+}];

+<template>
+  <div class="full">
+
+    <div class="header">
+      <div class="back-wrapper flex" @touchend="onBack">
+        <div class="back"></div>
+      </div>
+      <div class="title flex">
+          <span class="title-inner">UFO PASSPORT</span>
+      </div>
+    </div>
+
+    <div style="width: 100%;">
+      <div class="user-item">
+        <WidgetAvatar class="avatar-box" :class="{'avatar-opacity': userPassportInfo.headIcon}" :src="userPassportInfo.headIcon" :width="100" :height="100"></WidgetAvatar>
+        <p class="user-name">{{userPassportInfo.content}}</p>
+        <p class="user-time">{{userPassportInfo.timeStr}}购于UFO飞碟好物</p>
+      </div>
+
+      <div class="product-item">
+        <div class="medal-img"></div>
+        <ImgSize class="product-image" :src="shareIdentifyInfo.productImageUrl" :width="200" :height="200"></ImgSize>
+        <div class="product-size">{{shareIdentifyInfo.productSize}}</div>
+        <div class="product-name">{{shareIdentifyInfo.productName}}</div>
+        <div class="provideo-btn" @click="playVideoOperation(shareIdentifyInfo.vedioFileUrl)"></div>
+        <VideoPlayer ref="videoPlay" class="play-video" :source="shareIdentifyInfo.vedioFileUrl"></VideoPlayer>
+        <div class="identify-plat">{{shareIdentifyInfo.identifyPlat}}</div>
+        <div class="identify-name">{{shareIdentifyInfo.identifyUserName}}</div>
+        <div class="identify-level">资深鉴定师</div>
+        <div class="identify-image"></div>
+      </div>
+
+      <div v-if="ufoPassportProductList.length > 0" class="recommend-shoes">
+        <div class="rec-little">撞鞋不可怕，谁没谁尴尬</div>
+        <div class="rec-large">你想要的球鞋，这里都有</div>
+
+        <div class="recommend-list">
+          <ul>
+            <li v-for="item in ufoPassportProductList" :key="item.id" @click="goProductDetail(item.id)">
+              <ImgSize class="pro-img" :src="item.default_images" :width="200" :height="200"></ImgSize>
+            </li>
+          </ul>
+        </div>
+      </div>
+
+      <div class="operate-wrap">
+        <button class="login-btn" @click="loginToUFoPage">登录UFO</button>
+      </div>
+
+    </div>
+  </div>
+</template>
+
+<script>
+import WidgetAvatar from './components/widget-avatar';
+import ImgSize from '../../../components/img-size';
+import VideoPlayer from '../../../components/video-player';
+
+import {createNamespacedHelpers} from 'vuex';
+const {mapState, mapMutations, mapActions} = createNamespacedHelpers('invite/invite');
+
+export default {
+  name: 'ufoPassport',
+  components: { WidgetAvatar, ImgSize, VideoPlayer },
+  data() {
+    return {
+    };
+  },
+  computed: {
+    ...mapState(['ufoPassportProductList', 'shareIdentifyInfo', 'userPassportInfo']),
+  },
+  methods: {
+    ...mapMutations({
+    }),
+    ...mapActions(['fetchUfoPassportProductList', 'fetchUfoShareIdentifyInfo']),
+    onBack() {
+      this.$yoho.finishPage({});
+    },
+    loginToUFoPage() {
+      this.$yoho.goNewPage({
+        url: 'https://union.yoho.cn/union/app-downloads.html?union_type=100000000000349&client_id=1927079456&openby:yohobuy= {"action":"go.ufo","params":{"pagename":"home"}}'
+      });
+    },
+    goProductDetail(productId) {
+      this.$yoho.goUfoProductDetail(productId);
+    },
+    playVideoOperation(videoUrl) {
+      if (!videoUrl) {
+        return;
+      }
+      this.$refs.videoPlay.parentHandleclick();
+    }
+  },
+  mounted() {
+    this.fetchUfoShareIdentifyInfo(
+      { tagId: '7125317aa2c6010d4f80bb2fd07e02f6' }
+    );
+
+    console.log(this.$route.params.tagId);
+
+    // { tagId: this.$route.params.tagId }
+
+    this.fetchUfoPassportProductList();
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+  .full {
+    position: relative;
+    background-color: #000;
+  }
+
+  .user-item {
+    width: 100%;
+    text-align: center;
+  }
+
+  .avatar-box {
+    margin-top: 105px;
+    width: 160px;
+    height: 160px;
+    border-radius: 50%;
+    opacity: 0;
+    transition: opacity 300ms ease-in-out;
+
+    &.avatar-opacity {
+      opacity: 1;
+    }
+
+    > img {
+      width: 100%;
+      height: 100%;
+      display: block;
+    }
+  }
+
+  .user-name {
+    color: #fff;
+    font-weight: bold;
+    font-size: 40px;
+    margin-top: 16px;
+    line-height: 56px;
+  }
+
+  .user-time {
+    color: #b0b0b0;
+    font-size: 11px;
+    margin-top: 8px;
+    line-height: 32px;
+  }
+
+  .product-item {
+    display: inline-block;
+    text-align: center;
+    width: calc(100% - 104px);
+    margin-top: 40px;
+    margin-left: 52px;
+    margin-right: 52px;
+    background-color: #fff;
+    border-style: solid;
+    border-width: 20px;
+    border-color: #072f4a;
+
+    .medal-img {
+      position: absolute;
+      top: 425px;
+      right: 84px;
+      width: 100px;
+      height: 148px;
+      background-repeat: no-repeat;
+      background-image: url("~statics/image/passport/medal_img.png");
+      background-size: contain;
+    }
+
+    .product-image {
+      display: inline-block;
+      margin-top: 16px;
+      width: 120px;
+      height: 120px;
+    }
+
+    .product-size {
+      font-size: 24px;
+      color: #000;
+      line-height: 28px;
+    }
+
+    .product-name {
+      margin-top: 8px;
+      margin-left: calc(50% - 176px);
+      font-size: 24px;
+      color: #000;
+      font-weight: 500;
+      max-height: 60px;
+      max-width: 352px;
+    }
+
+    .provideo-btn {
+      display: inline-block;
+      margin-top: 30px;
+      height: 48px;
+      width: 154px;
+      background-image: url("~statics/image/passport/identy_video_btn.png");
+      background-size: contain;
+      background-repeat: no-repeat;
+    }
+
+    .play-video {
+      display: block;
+      height: 30px;
+      opacity: 0;
+    }
+
+    .identify-plat {
+      font-size: 22px;
+      color: #000;
+      letter-spacing: 0.5px;
+      line-height: 26px;
+    }
+
+    .identify-name {
+      margin-top: 18px;
+      font-size: 28px;
+      color: #000;
+      line-height: 34px;
+    }
+
+    .identify-level {
+      font-size: 22px;
+      color: #000;
+      line-height: 32px;
+    }
+
+    .identify-image {
+      margin-top: 40px;
+      height: 592px;
+      background-image: url("~statics/image/passport/identy_img.png");
+      background-size: contain;
+    }
+  }
+
+  .recommend-shoes {
+    display: inline-block;
+    text-align: center;
+    margin-top: 100px;
+
+    .rec-little {
+      font-size: 24px;
+      color: #fff;
+      line-height: 34px;
+    }
+
+    .rec-large {
+      margin-top: 14px;
+      font-size: 40px;
+      color: #fff;
+      line-height: 56px;
+    }
+  }
+
+  .recommend-list {
+    padding: 36px 44px 10px 52px;
+    overflow: hidden;
+    width: calc(100%);
+
+    ul {
+      width: 100%;
+      overflow: hidden;
+    }
+
+    li {
+      float: left;
+      width: calc((100% - 24px) / 3);
+      height: 210px;
+      margin: 0 8px 8px 0;
+      display: flex;
+    }
+
+    .pro-img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  .operate-wrap {
+    padding: 60px 52px 100px;
+
+    .login-btn {
+      width: 100%;
+      display: block;
+      font-size: 28px;
+      line-height: 100px;
+      color: #fff;
+      background: #072f4a;
+    }
+  }
+
+  .header {
+    position: absolute;
+    width: 100%;
+    height: 45PX;
+    padding-left: 20PX;
+    padding-right: 20PX;
+    background-color: #000;
+    display: flex;
+    align-items: stretch;
+    box-sizing: border-box;
+
+    .flex {
+      display: flex;
+      align-items: center;
+    }
+
+    .back-wrapper {
+      height: 100%;
+      width: 60PX;
+    }
+
+    .back {
+      width: 24PX;
+      height: 24PX;
+      background: url(~statics/image/alipay/back@3x.png) no-repeat;
+      background-size: cover;
+    }
+
+    .title {
+      flex: 1;
+      justify-content: center;
+      font-size: 17PX;
+      overflow: hidden;
+      z-index: 1;
+      color: #fff;
+      font-weight: bold;
+
+      .title-inner {
+        max-width: 90%;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        display: inline-block;
+      }
+    }
+  }
+</style>

@@ -20,6 +20,32 @@ export default {
     }
   },
 
+  async fetchUfoPassportProductList({ commit }) {
+    const result = await this.$api.get('/api/ufo/passport/list', { rankType: 'b', regularize: 1 });
+
+    if (result.code === 200) {
+      commit(Types.FETCH_UFOPASSPORT_PRODUCT_LIST, { list: get(result, 'data.product_list', []) });
+    }
+  },
+
+  async fetchUfoShareIdentifyInfo({ commit }, {tagId}) {
+    var userInfo = {};
+    const result = await this.$api.get('/api/ufo/product/shareIdentifyInfo', { tagId: tagId, debug: 'XYZ' });
+
+    if (result.code === 200) {
+      if (result.data.trackList && result.data.trackList.length > 0) {
+        result.data.trackList.forEach(val => {
+          if (val.type === 3) {
+            userInfo = val;
+          }
+        });
+      }
+
+      commit(Types.FETCH_SHARE_IDENTITY_INFO, { data: result.data });
+      commit(Types.FETCH_USERPASSPORT_INFO, { data: userInfo });
+    }
+  },
+
   async fetchStatus({ commit }) {
     const result = await this.$api.get('/api/ufo/invite/status');
 

@@ -10,6 +10,11 @@ export default function() {
       fetchRecordDetailListRequest: false,
       refresh: false,
       recordDetailList: [],
+      ufoPassportProductList: [],
+      userPassportInfo: {},
+      shareIdentifyInfo: {
+        trackList: [],
+      },
       inviteCode: {
         showInviteCode: '',
         inviteeUidNum: 0,

@@ -7,6 +7,15 @@ export default {
   [Types.FETCH_INVITE_ORDERLIST](state, {list}) {
     state.recordList = list;
   },
+  [Types.FETCH_UFOPASSPORT_PRODUCT_LIST](state, {list}) {
+    state.ufoPassportProductList = list;
+  },
+  [Types.FETCH_USERPASSPORT_INFO](state, {data}) {
+    state.userPassportInfo = data;
+  },
+  [Types.FETCH_SHARE_IDENTITY_INFO](state, {data}) {
+    state.shareIdentifyInfo = data;
+  },
   [Types.FETCH_INVITE_CODE](state, data) {
     state.inviteCode = data;
   },

@@ -16,3 +16,7 @@ export const SET_TOTAL = 'SET_TOTAL';
 export const FETCH_INVITE_ORDER_DETAIL_LIST_REQUEST = 'FETCH_INVITE_ORDER_DETAIL_LIST_REQUEST';
 export const FETCH_INVITE_ORDER_DETAIL_LIST = 'FETCH_INVITE_ORDER_DETAIL_LIST';
 export const SET_TAB = 'SET_TAB';
+
+export const FETCH_UFOPASSPORT_PRODUCT_LIST = 'FETCH_UFOPASSPORT_PRODUCT_LIST';
+export const FETCH_USERPASSPORT_INFO = 'FETCH_USERPASSPORT_INFO';
+export const FETCH_SHARE_IDENTITY_INFO = 'FETCH_SHARE_IDENTITY_INFO';

+const MAX_WIDTH = 1000;
+
+export function getArticleImageSize({width, height, minScale = 0.75, maxWidth = MAX_WIDTH}) {
+  width = +width;
+  height = +height;
+  if (width > maxWidth) {
+    height = height / (width / maxWidth);
+    width = maxWidth;
+  }
+
+  if (minScale && width / height < minScale) {
+    height = width / minScale;
+  }
+  if (width === 1) {
+    width = maxWidth;
+  }
+  if (height === 1) {
+    height = maxWidth;
+  }
+  return {width, height: Math.round(height)};
+}
+
+export function processImage(src, mode, width, height, webp) {
+  let splits = (src || '').split('?');
+  const imgName = splits[0] || '';
+
+  let query = splits[1] || '';
+
+  if (!src || src.indexOf('{width}') < 0) {
+    return src;
+  }
+
+  if (/imageView/.test(query)) {
+    if (!/interlace/.test(query)) {
+      src = `${src}/interlace/1`;
+    }
+    if (!/webp/.test(query) && webp) {
+      src = `${src}/format/webp`;
+    } else if (!/format/.test(query) && /\.png$/i.test(imgName)) {
+      src = `${src}/format/jpg`;
+    }
+  }
+  return (src || '')
+    .replace('http://', 'https://')
+    .replace('{mode}', mode)
+    .replace('{width}', width)
+    .replace('{height}', height);
+}

+function toVersion(str = '') {
+  const ver = str.split('.').map(i => Number(i));
+
+  if (!ver[0]) {
+    ver[0] = 0;
+  }
+
+  if (!ver[1]) {
+    ver[1] = 0;
+  }
+
+  if (!ver[2]) {
+    ver[2] = 0;
+  }
+
+  return ver;
+}
+
+function toNumber(ver) {
+  const major = ver[0] * 10000;
+  const minor = ver[1] * 100;
+  const patch = ver[2] * 1;
+
+  return major + minor + patch;
+}
+
+function compare(left, right) {
+  if (left > right) {
+    return 1;
+  } else if (left < right) {
+    return -1;
+  } else {
+    return 0;
+  }
+}
+
+export default function(left, right) {
+  const leftVersion = toNumber(toVersion(left));
+  const rightVersion = toNumber(toVersion(right));
+  const result = compare(leftVersion, rightVersion);
+
+  return result;
+}

@@ -142,6 +142,21 @@ module.exports = {
     params: {
     }
   },
+  '/api/ufo/passport/list': {
+    api: 'ufo.product.search.uvscoreProductList',
+    ufo: true,
+    params: {
+      rankType: {type: String, require: true},
+      regularize: {type: Number, require: true},
+    }
+  },
+  '/api/ufo/product/shareIdentifyInfo': {
+    api: 'ufo.product.shareIdentifyInfo',
+    ufo: true,
+    params: {
+      tagId: {type: String, require: true},
+    }
+  },
   '/api/ufo/invite/status': {
     ufo: true,
     api: 'ufo.invite.toEnter',

@@ -79,7 +79,9 @@
     "yoho-node-lib": "=0.6.41",
     "yoho-qs": "^1.0.1",
     "yoho-store": "^1.3.20",
-    "yoho-zookeeper": "^1.0.11"
+    "yoho-zookeeper": "^1.0.11",
+    "vconsole": "^3.3.4",
+    "video.js": "^7.5.5"
   },
   "devDependencies": {
     "@babel/core": "^7.2.0",