影人页

介绍

影人页面与角色页面差不多，相比影视页面，内容少了很多，影人页面有的功能，影视大多也有。以下只说几个不同点

目录结构

└─ pages                
   └─ actor                           # 影人信息
      ├─ works                        # 参演作品
      ├─ role                         # 饰演角色
      ├─ award                        # 获奖详情
      └─ detail                       # 影人详情
         ├─ components                # 组件
         │  ├─ actor-count            # 数据统计
         │  ├─ actor-award            # 获奖统计
         │  └─ information            # 详情子页面
         └─ index                     # 影人详情入口页

影人封面

影人列表中的图片加载后已缓存到本地，当跳转到详情页时，相亲也可直接使用，无需再次网络请求，但清晰度不高，在详情页直接使用会显得模糊，所以将小图作为背景，在上层再覆盖一个大图，当进入详情页时，小图封面先展示，当大图加载完时，会覆盖在小图上，优化用户体验。

<block>
  <!-- 小图 -->
  <view class="actor-avatar" style="{{bgImage}}"></view>
  <!-- 大图，覆盖在小图上方 -->
  <view class="actor-avatar actor-avatar-larger" style="{{bgImageLarger}}"></view>
</block>

computed: {
  // 小图背景
  bgImage(data) {
    return `background-image:url('${data.actor.avatar}')`;
  },
  // 大图背景
  bgImageLarger(data) {
    return `background-image:url('${data.actor.avatar?.replace(
      /public/,
      "larger"
    )}')`;
  },
}