[Day 26] 实作-节庆详情页面

今天来实作节庆详情页面！

昨天有讲到我是用router-link query的方式把参数带到URL中换页，换页的网址会如下：

http://localhost:8080/#/festivalDetail?actId=419

拿到了一个actId，那首先第一步就是先把这把资料从api中捞出来，

如果是做前後端分离的话，通常换页、搜寻、传输参数这种事都会交给後端来做，避免前端要做太多的事，不过这不代表前端做不到！

刚好趁现在还没做後端，就先来试试看怎麽在前端把资料捞出来，Let's go

捞取单笔节庆资料

首先一样先把所有的资料放进data里

资料集连结节庆专区

data: () => ({
		actId: 0,     // 这个页面的活动id
    actData: {},  // 这个页面要用到的data
    festivalList: [...] // 所有节庆活动资料清单
})

捞取逻辑大致如下：

用 this.$route.query.actId 取得活动id
回圈搜寻 festivalList ，寻找 actId = 活动id的资料
把资料回存到 actData

实作如下：

methods: {
  getActData() {
    const actId = this.$route.query.actId;
    let selectedAct;
    this.festivalList.forEach((obj) => {
      if (obj.actId === parseInt(actId, 10)) { // 资料集中actId是字串，这边先转成整数
        selectedAct = obj; // 因为没有办法直接把obj存进this.actData，所以又多放一个参数来存
      }
    });
    this.actData = selectedAct;
  },
},

在页面渲染时资料就需要先载入，不然user会看不到资料，所以在created()里，要呼叫getActData()

详情可参考 Vue 生命周期函数

created() {
   this.getActData();
},

资料捞取成功

简单地把它渲染到前端看看

实作前端画面

资料拿到了，接下来就是简单的刻画面过程惹，一样先上UI图

栏位处理

日期、地点栏位就照节庆活动那页处理
主轴

这个比较麻烦，因为他是六个栏位，可能都有值，也可能只有一个有值，所以要筛选一下

我先把这六个栏位用解构赋值的方式取出来，再把有值的栏位存到字串中

解构赋值 (Destructuring assignment) 语法是一种 JavaScript 运算式，可以把阵列或物件中的资料解开撷取成为独立变数。参考文件
```
getGrade() {
  const { grade1, grade2, grade3, grade4, grade5, grade6 } = this.actData;
  const gradeList = [grade1, grade2, grade3, grade4, grade5, grade6];
  let gradeResult = '';
  gradeList.forEach((grade) => {
    if (grade) {
      gradeResult += (`${grade} `);
    }
  });
  return gradeResult;
},
```