[Day 21] 实作-活动清单 子组件 Cards

早安！今天目标是把活动清单页面完成！

昨天做到父组件传递资料到子组件了，那今天就是要利用这些资料来完善页面

先列一下要做什麽：

1. 图片
2. 活动标题
3. 活动时间
4. 活动地点
5. 免费or付费标签
6. 活动类别标签
7. 活动超连结

好的我们一个一个来~

上面这些资讯在api中都有了，所以只要塞到对应的位置就可以了

接下来会把程序码拆开逐一介绍，如果觉得有点混乱，页面最下方有放完成程序码。

加上活动图片

<v-img
    class="white--text align-end"
    height="200px"
    :src="topic.imageUrl" <!-- 把图片连结设为 topic.imageUrl -->
/>

加上活动标题

<v-card-title>{{ topic.title }}</v-card-title>

加上活动日期 - v-if

这边利用 v-if 去判断起始日期跟结束日期是不是同一天，

如果是的话就只显示 开始日期，如果不是的话就显示 开始日期~结束日期

<div>
    <v-icon>event</v-icon>
    {{ topic.startDate }}
    <div
    class="content"
    v-if="topic.startDate !== topic.endDate">
    ~{{ topic.endDate }}
    </div>
</div>

加上活动地点 - 条件运算子

活动地点有2个栏位 location 跟 locationName，这边判断如果location内为空时，改显示locationName

这边采用 条件(三元)运算子的方式来写，格式很像 if else的写法

condition ? true执行的部分 : false执行的部分

<div>
    <v-icon>location_on</v-icon>
    {{ topic.showInfo[0].location !== ''
        ? topic.showInfo[0].location
        : topic.showInfo[0].locationName }}
</div>

加上 免费/付费 标签 - v-else

跟上面的地点字段不同，标签需要更改颜色，

用条件运算子的话会没那麽好读，所以改用 v-if v-else的方式来写

<v-chip
    v-if="topic.showInfo[0].onSales ==='N'"
    class="ma-2"
    color="green"
    text-color="white"
    small
>
    免费
</v-chip>
<v-chip
    v-else
    class="ma-2"
    color="orange"
    text-color="white"
    small
>
	付费
</v-chip>
        

加上活动类别标签 - 类别字段对照

这个部分比较复杂一点，因为data传来的类别是1、2、3...，但是要显示的是中文类别名称

所以需要用个对照表，让他可以自己对照类型，

首先加一个 methods参数，里面可以自己写多个method

这边新增一个 getTopicCategory ( category) 方法

Topic.vue

<script>
export default {
  name: 'Topic',
  props: ['topic'],
  methods: {
    getTopicCategory(category) {
      const categoryEnums = {
        1: '音乐',
        2: '戏剧',
        3: '舞蹈',
        4: '亲子',
        5: '独立音乐',
        6: '展览',
        7: '讲座',
        8: '电影',
        11: '综艺',
        13: '竞赛',
        14: '徵选',
        15: '其他',
        17: '演唱会',
        19: '研习课程',
      };
      return categoryEnums[category];
    },
  },
};
</script>

然後在template呼叫这个方法，这边要记得带入类别参数

<v-chip
    class="ma-2"
    color="grey"
    text-color="white"
    small
    >
    {{ getTopicCategory(topic.category) }}
</v-chip>

加上活动超连结 - 逻辑运算子 &&

连结的部分原始资料一样有2个栏位 webSales 跟 sourceWebPromote，

这边可以用一个更简单的方法 逻辑运算子

如果webSales为空 就显示sourceWebPromote

<v-card
    class="mx-auto text-left"
    max-width="400"
    :href="topic.webSales && topic.sourceWebPromote"
    target="_blank"
  >

成果展示

完整程序码

请参考 GitHub

父组件 TopicPage.vue

子组件 Topic.vue

完成~~

这篇改了一下叙述的方式

变成全部写完再来解释code，就没有完成每个步骤都截图了

之後应该也会采用这种方式~ ( 因为这样写文比较快

ok 记得commit 明天见