iT邦幫忙

2021 iThome 鐵人賽

DAY 21
1
Modern Web

前端?後端?你早晚都要全端的,何不從現在開始?系列 第 21

[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"
  >

成果展示

https://ithelp.ithome.com.tw/upload/images/20211006/20140745Z1TCaFVYhx.png

完整程式碼

請參考 GitHub

父組件 TopicPage.vue

子組件 Topic.vue


完成~~

這篇改了一下敘述的方式

變成全部寫完再來解釋code,就沒有完成每個步驟都截圖了

之後應該也會採用這種方式~ ( 因為這樣寫文比較快

ok 記得commit 明天見


上一篇
[Day 20] 實作-主題推薦頁面 組件傳遞資料
下一篇
[Day 22] 節慶活動 api分析&頁面設計
系列文
前端?後端?你早晚都要全端的,何不從現在開始?31

1 則留言

0
lw90967
iT邦新手 5 級 ‧ 2021-10-08 11:53:40

成果好可愛 推推

我要留言

立即登入留言