# C-7 EC公司資料頁
> [name=JasonWu]

###### tags: `CP頁`

## API 清單
No | API | Desc | 執行順序 | 執行條件 | 參考
---|----------|---------------------|----------|--------------------|--------
1 | [URI-A-02](https://hackmd.io/Cbw7V8AETEOzCk4s7TgfwA) | 多語標籤 | 1 | page init |
2 | [URI-B-04](https://hackmd.io/WTAzi5tXQBuakQV1tkgATw) | 取得公司相關資料 | 1 | page init | 主要 api
3 | [URI-C-01](https://hackmd.io/Y-_iIT7rR4-uqwqN5ZGNXA) | Inquiry Company | 1 | page init | 無
4 | [URI-C-02](https://hackmd.io/OFJ68AIxTfePBEeKqlGa-w) | 取得燈箱相關資訊 | 2 | 點選公司認證開啟燈箱 | 無
5 | [URI046](https://hackmd.io/C0_27LhmTD6m9qV_DahhTQ) | 取得 SEO META 資料 | 4 | SEO META 相關內容 | 無
6 | [URI-C-03](https://hackmd.io/U_Dmv0w7QlGSVDi5N4Wneg) | 取得型錄認證清單 | 點選認證 All certifications | 點選取得型錄認證清單 | 無

## 頁面相關路徑

## 原頁面網址
- https://tw.taiwantrade.com/company/833510

## 頁面輸入 URL 解析
- 進入頁面方式有三種，其中第三種的 old 方法是驗證使用，客戶不會使用
- /company/{id}
- 範例 : https://www.ttstaging.com.tw/company/147927
- id : 公司 id，為純數字
- /company/{safe-name}-{id}.html
- 範例 : https://www.ttstaging.com.tw/company/hyweb-tech-147927.html
- safe-name : 型錄名稱，為純文字，且型錄名稱會將英文轉為小寫，空白、特殊符號等字元替換為 - 號，例如 名稱 為 **Hyweb Tech** 將會轉為 **hyweb-tech**
- id : 公司 id，為純數字
- /company/old/{id}
- 由於之前有一頁式的功能，為了確保舊版樣式提供的連結，之後不會開放，可供驗測驗證使用
- id : 公司 id，為純數字

- id 為主要參數，會應用在後面的 api 中

## 相關示意圖

## 頁面說明
- 頁面主要資料皆來自於 [URI-B-04](https://hackmd.io/WTAzi5tXQBuakQV1tkgATw)
~~- 公司聯絡資訊區塊中，需要額外判斷登入的狀態，如果前台已經登入，此時 api 回傳的資料會有所不同，這一段需要再討論，看後續呼叫 api 時要如何傳遞登入相關資訊~~
- api 相關 url 如下：${TT-API網址}/companies/detail/{did}/{id}?userAccessTicket={userAccessTicket}
- did : domain id，與頁面及版型相關參數，例如英文主頁 did = 2
- id : 型錄 id，參考 http://www.ttstaging.com.tw/product/1893926 ，其中 "1893926" 就是型錄 id
- userAccessTicket 為登入者使用者Ticket，AEM 透過 header service 取得 userAccessTicket，如果有傳入，且經過解析後是正常的 ticket，後續 api 就會判斷此次呼叫是有登入的呼叫

### 頁面區塊說明
- SeoMeta 資訊
- 透過 api 取得頁面所需的 meta 資訊
- 麵包屑
- 公司基本資料
- 透過 api 取得
- 公司相關型錄
- 透過 api 取得
- 公司工廠資料
- 透過 api 取得
- 公司認證與產品認證
- 透過 api 取得
- 公司得獎紀錄、大事記
- 透過 api 取得
- 公司聯絡資訊
- 透過 api 取得
- 聯繫廠商
- 警語共用區塊

### 頁面欄位說明
#### SeoMeta 資訊
- 舊版頁面相關資訊透過 xml 傳遞
- 產出 html 頁面時，需要將相關資訊放入 meta tag 中
- ~~顯示邏輯~~
- ~~參考文件 https://hackmd.io/WTAzi5tXQBuakQV1tkgATw?view#meta1~~
- ~~取得 data 中的 {meta} array~~
- ~~邏輯與格式~~
- ~~將 array 中的內容依次放入~~
- ~~格式固定為 <meta name="{meta.name}" content="{meta.content}">~~
- 透過 [URI046](https://hackmd.io/C0_27LhmTD6m9qV_DahhTQ) 取得頁面相關的 meta 資料
- 呼叫相關 api 路徑如下: ${TT-API網址}/domains/seo/{seoType}/{pageType}/{did}/{rowId}
- 參數 seoType 帶入 "1"
- 參數 pageType 帶入 "COMPANY_DETAIL"
- 參數 did 帶入頁面 {did}
- 參數 rowId 帶入公司 id {id}
- 解析回傳的 json 內容，並寫入頁面原始檔中

#### 麵包屑
- 顯示邏輯
- 參考 https://hackmd.io/nlZlemkdTRCC7ua4Uup8UA?view#%E9%BA%B5%E5%8C%85%E5%B1%911
- 取出 data 中的 companyProfile array
- 邏輯與格式
- 1 Home
- 固定顯示 **Home** 連結
- Home 為多語，{lang.home}
- Home 的 url 是固定的，連結到該 domain 首頁
- 2 Company
- 固定顯示 Company 文字
- Company 為多語，{lang.company}
- 3 公司名稱
- 顯示 **公司名稱** 文字
- 套用 companyProfile.companyName

#### 公司基本資料(標題)
- 顯示邏輯
- 參考文件 https://hackmd.io/WTAzi5tXQBuakQV1tkgATw?view#廠商資料
- 取得 data 中的 companyProfile object
- 1 公司名稱
- 顯示 companyProfile.companyName
- 2 Add to favorites
- Add to favorites 為多語，{lang.addtofavorites}
- 如果該公司已經加入過 favorites 的話，要顯示 Go to Favorites，{lang.gotofavorites}
- 點選的連結請參考條列頁的加到最愛與 redirect 到最愛的邏輯
- 加到我的最愛部分，這邊先貼上目前條列頁相同功能的程式碼，應該是可以直接套用的；條列頁程式有納入版本控制，後續開發如果碰到問題，這邊可以提供相關程式來參考；檢查公司是否已經加入我的最愛、將公司加入我的最愛、從我的最愛中移除公司，在下面的 ts 中應該都有相對應的程式碼
- 相關連結 https://github.com/ttcloude/taitra-aem/blob/master/ui.frontend/src/app/library/supplier-list/supplier-list.component.ts

import { Component, ElementRef, Inject, Input, QueryList, ViewChild, ViewChildren, ViewEncapsulation } from '@angular/core';
import { WINDOW } from '@ng-web-apis/common';
import { Subscription } from 'rxjs';
import { Product } from '../../models/product.model';
import { BaseComponent } from '../../components/base.component';
import { ProductDisplay } from '../../models/product-display.model';
import { SearchCompany } from '../../models/search-company.model';
import { UiUtils } from 'src/app/utils/ui.utils';
import { FavoriteSupplierStore } from '../../store/favorite-supplier-store';
import { ResetFavoriteListStore } from '../../store/reset-favorite-list-store';
import { ResetPermaCountStore } from '../../store/reset-perma-count-store';
import { StatusService } from 'src/app/service/status.service';
import { initSwiper } from './supplierListSwiper';
import { destroy } from '../../components/baseSwiper';

@Component({
    selector: 'app-supplier-list',
    styleUrls: ['./supplier-list.component.css'],
    templateUrl: './supplier-list.component.html',
    encapsulation: ViewEncapsulation.None
})
export class SupplierListComponent extends BaseComponent {

    @ViewChildren('appProducts', { read: ElementRef })
    appProducts: QueryList<ElementRef>;

    @ViewChild('viewAll', { read: ElementRef })
    viewAllSilder: ElementRef;

    @Input()
    productDisplay: ProductDisplay;

    @Input()
    index: number;

    @Input()
    languageId: number;

    @Input()
    did: number;

    subscription: Subscription;

    searchCompany: SearchCompany;

    supplierProducts: Product[];

    showViewAll = false;

    sliderTotalCount = 0;

    sliderCount = 0;

    isAddedFavorite = false;

    favoriteSupplier: string[] = [];

    resetFavoriteList = true;

    constructor(
        @Inject(WINDOW) readonly windowRef: any,
        private favoriteSupplierStore: FavoriteSupplierStore,
        private resetFavoriteListStore: ResetFavoriteListStore,
        private resetPermaCountStore: ResetPermaCountStore,
        private statusService: StatusService) {
        super();
        this.addStore(favoriteSupplierStore, (favoriteList) => {
            this.favoriteSupplier = favoriteList;
            this.resetFavoriteList = false;
            if (this.searchCompany && this.favoriteSupplier.includes(this.searchCompany.companyId)) {
                this.isAddedFavorite = true;
            } else {
                this.isAddedFavorite = false;
            }
        }, false);
    }

    async onRefresh() {
        this.supplierProducts = [];
        destroy(this.searchCompany?.id);
        this.sliderCount = 0;

        if (this.resetFavoriteList) {

            // Notify Header set favorit list
            this.resetFavoriteListStore.resetFavoriteType('SUPPLIER');

        } else {

            if (this.searchCompany && this.favoriteSupplier.includes(this.searchCompany.companyId)) {
                this.isAddedFavorite = true;
            } else {
                this.isAddedFavorite = false;
            }
        }
    }

    @Input() set company(searchCompany: SearchCompany) {
        this.searchCompany = searchCompany;
    }

    @Input() set products(products: Product[]) {
        this.supplierProducts = products;
        if (products) {
            this.sliderTotalCount = products.length;
        }
    }

    onDomChange(mutation: MutationRecord): void {

        this.debug('onDomChange ' + mutation + ' , liElementCount=' + this.sliderCount);

        if (!UiUtils.isSwiperSlideDivElement(mutation)) {
            return;
        }

        this.sliderCount++;

        this.debug('onDomChange sliderCount=' + this.sliderCount + ' , sliderTotalCount=' + this.sliderTotalCount);

        if (this.sliderCount === this.sliderTotalCount) {
            if (this.searchCompany.totalProducts > 4) {
                this.showViewAll = true;
            } else {
                this.debug('onDomChange initSupplierProdsSwiperConfig');
                initSwiper(this.searchCompany?.id);
            }
        } else if (this.sliderCount > this.sliderTotalCount) {
            this.debug('onDomChange initSupplierProdsSwiperConfig');
            initSwiper(this.searchCompany?.id);
        }

    }

    getViewAllHeight(): number {

        if (!this.showViewAll) {
            return 0;
        }

        let viewAllHeight: number = this.viewAllSilder ? this.viewAllSilder.nativeElement.height : 0;
        if (this.windowRef.innerWidth >= 768) {
            if (this.appProducts) {
                const appProduct: ElementRef = this.appProducts.first;
                if (appProduct) {
                    const height = appProduct.nativeElement.getElementsByClassName('prod_img_wrapper')[0].getBoundingClientRect().height;
                    viewAllHeight = height;
                }
            }
        }

        this.debug('SupplierListComponent getViewAllHeight=' + viewAllHeight);
        return viewAllHeight;
    }

    async addFavoriteClick(): Promise<void> {

        this.debug('### click addFavoriteClick ###');

        try {

            this.statusService.mask();
            const companyId = this.searchCompany.companyId;
            if (this.isAddedFavorite) {
                this.debug('### remove favorite:', companyId);
                const response = await this.windowRef.headerEntry.removeMyFavorites(companyId, 'SUPPLIER', this.languageId);
                if (response.code === '200') {
                    this.debug('### remove success ###');
                    this.favoriteSupplierStore.removeCompanyId(companyId);
                }
            } else {
                this.debug('### add favorite:', companyId);
                const response = await this.windowRef.headerEntry.addMyFavorites(companyId, 'SUPPLIER', this.languageId, this.did, 'FRONT');
                if (response.code === '200') {
                    this.debug('### add success ###');
                    this.favoriteSupplierStore.addCompanyId(companyId);
                }
            }

            this.resetPermaCountStore.updateType('SUPPLIER');

        } catch (e) {

            this.error(e);

        } finally {

            this.statusService.unMask();
        }
    }

}

- 操作邏輯

#### 公司基本資料(3D/360區塊)
- 3D 區塊
- 360 區塊
- 影片區塊
- 顯示邏輯
- 參考文件 https://hackmd.io/WTAzi5tXQBuakQV1tkgATw?view#%E5%85%AC%E5%8F%B8%E5%9F%BA%E6%9C%AC%E8%B3%87%E6%96%99
- 取得 data 中的 multimedia array，依次解析資料
- 如果沒有 multimedia 資料，區塊不顯示
- 1 顯示圖片、網址、或影音，舊版是透過 iframe 引入
- 當 {multimedia.pictureId} 非空且 {multimedia.pictureUrl} 非空，代表顯示圖片
- 如果顯示圖片，且 {multimedia.productUrl} 非空，代表點選圖片時，要開新視窗並顯示型錄詳目頁內容
- 如果顯示圖片，且 {multimedia.defineUrl} 非空，代表點選圖片時，要開新視窗連結，連結的對象 = {multimedia.defineUrl}，圖片的 title 跟 alt = {multimedia.title}
- 如果不顯示圖片，且 {multimedia.defineUrl} 非空，代表是 3D, 360, youtube 等類型，於 iframe 中顯示 {multimedia.defineUrl} 內容
- 2 顯示切換的 dots
- 判斷 multimedia array size 來決定顯示幾個點
- 操作邏輯
- 點選切換的 dots
- 參考顯示 2 的 dots，點選第幾個點，顯示 1 的區塊會顯示對應的該筆資料

#### 公司基本資料(big icon)
- 顯示邏輯
- 參考文件 https://hackmd.io/WTAzi5tXQBuakQV1tkgATw?view#%E8%AA%8D%E8%AD%89%E5%A4%A7%E5%9C%96
- 取得 data 中的 bigIcon array，依次解析資料
- 如果沒有 bigIcon 資料，區塊不顯示
- 1 顯示對應圖片
- 圖片 src 顯示 {bigIcon.imgUrl}
- 圖片的 title 跟 alt 顯示 {bigIcon.name}

#### 公司基本資料
- 顯示邏輯
- 參考文件 https://hackmd.io/WTAzi5tXQBuakQV1tkgATw?view#%E5%BB%A0%E5%95%86%E8%B3%87%E6%96%99
- 取得 data 中的 companyProfile object，解析資料
- 1 顯示下列資料，如果 companyProfile 沒有對應欄位，該行不顯示
- Company Name
- Company Name 為多語，{lang.companyname}
- 顯示 {companyProfile.companyName}
- Business Type
- Business Type 為多語，{lang.companiesbusinesstype}
- 顯示 {companyProfile.businessTypeListDesc}
- Year Established
- Year Established 為多語，{lang.yearestablished}
- 顯示 {companyProfile.yearEstablished}
- Factory Location
- Factory Location 為多語，{lang.factorylocation}
- 顯示 {companyProfile.factoryLocation}
- Total Revenue
- Total Revenue 為多語，{lang.totalrevenue}
- 顯示 {companyProfile.totalRevenue}
- Capitial
- Capitial 為多語，{lang.capitial}
- 先判斷 {companyProfile.showCapital} == 1 才會顯示資本額
- 顯示 {companyProfile.capital}
- No. of Employee
- No. of Employee 為多語，{lang.employee}
- 顯示 {companyProfile.employeeRank}
- Main Product
- Main Product 為多語，{lang.mainproducts}
- 顯示 {companyProfile.mainExportProductName}
- Main Export Market
- Main Export Market 為多語，{lang.mainexportmarket}
- 顯示 {companyProfile.mainExportMarketListDesc}

#### 公司相關型錄
- 顯示邏輯
- 參考文件 https://hackmd.io/WTAzi5tXQBuakQV1tkgATw?view#%E7%9B%B8%E9%97%9C%E5%9E%8B%E9%8C%84
- 1 標題 Products 為多語，{lang.products}
- 取得 data 中的 productlist array，依次解析資料(公司獨立頁最多顯示10筆且不出現view all，於產品頁公司頁籤最多5筆，若產品更多就會出現view all（取productMoreUrl欄位值）)
- 2 New tag
- 如果 {productlist.newest} == 1，需要顯示 New 標籤
- 3 圖片
- 顯示 {productlist.imageURL}
- 圖片的 title = {productlist.imgTitle}
- 圖片的 alt = {productlist.imgAlt}
- 4 型錄名稱聯結
- 名稱為 {productlist.productName}，聯結為 {productlist.productUrl}
- 5 型錄價格
- 先判斷是否有販售，{productlist.isSelling} == 1，如果沒有販售就不用顯示價格
- 再來判斷是否有折扣
- 先判斷 {productlist.isDiscount} == 1(有折扣)
- 再判斷 {productlist.discountStartDate} 與 {productlist.discountEndDate} 跟今天日期的比較，判斷是否在折扣日內
- 再判斷 {productlist.discount} 是否有值且 {productlist.discount} > 0.0
- 上面三點都成立，代表有折扣
- ~~如果沒有折扣，顯示 {productlist.priceCurrency} + {productlist.price} + {productlist.unit}，對應 **幣別** + **價格** + **單位**~~
- 如果沒有折扣，顯示 {productlist.priceCurrency} + {productlist.priceMin} + '-' + {productlist.priceMax} + {productlist.unit}，對應 **幣別** + **最小價格** + '-' + **最大價格** + **單位**
- ~~如果有折扣，顯示 {productlist.discount} + {productlist.priceCurrency} + ({productlist.price} * {productlist.discount}) + {productlist.unit}，對應 **折扣百分比圖** + **幣別** + **價格** + **單位**~~
- 如果有折扣，顯示 折扣百分比圖 + {productlist.priceCurrency} + ({productlist.priceMin} * {productlist.discount}) + '-' + ({productlist.priceMax} * {productlist.discount}) + {productlist.unit}，對應 **折扣百分比圖** + **幣別** + **最小價格** + '-' + **最大價格** + **單位**
- json 提供的是 USD 金額，如果頁面的幣別有替換，那顯示時需要將金額從 USD 換算為對硬幣別的金額，幣別顯示也要改為頁面的幣別
- 6 Free Shipping
- 判斷是否免運費，如果 {productlist.isFreeShipping} == 1，顯示 free shipping 的小圖
- 7 Min Order
- ~~顯示 {productlist.minOrder} + {productlist.unit}~~
- 顯示 {productlist.minOrder}
- 警語相關
- 取得 {productlist.catalogStandardCid}，會影響到本頁是否要顯示警語
- 其他參數
- 目前會回傳 {productCount} 與 {productMoreUrl}，提供後續點選公司更多型錄的相關資訊
- {productCount} 紀錄目前該公司啟用型錄的數量
- {productMoreUrl} 是公司型錄清單的 url

- 操作邏輯

#### 公司工廠資料
- 顯示邏輯
- 參考文件 https://hackmd.io/WTAzi5tXQBuakQV1tkgATw?view#%E5%B7%A5%E5%BB%A0%E8%B3%87%E6%96%99
- 1 標題 Factory 為多語，{lang.factory}
- 取得 data 中的 factoryInfo.videoList array 與 factoryInfo.imageList array，依次解析資料
- 先解析 factoryInfo.videoList array，依次顯示
- 2 顯示影片，{factoryInfo.videoList.videoURL}
- 3 顯示影片名稱，{factoryInfo.videoList.videoTitle}
- 再來解析 factoryInfo.imageList array，依次顯示
- 4 顯示小圖圖片，{factoryInfo.imageList.mobileImgUrl}，圖片的 title 跟 alt 顯示 {factoryInfo.imageList.imageTitle}
- 5 顯示圖片名稱，{factoryInfo.imageList.imageTitle}
- 操作邏輯
- 點選 4 的工廠圖片，開啟燈箱顯示圖片
- 1 點選小的工廠圖片，對應 {factoryInfo.imageList.mobileImgUrl}
- 2 開啟燈箱，燈箱中放入工廠圖片，對應 {factoryInfo.imageList.pcImgUrl}
- 3 燈箱關閉按鈕
- 關閉燈箱按鈕，點選後關閉燈箱
- 4 燈箱遮罩
- 燈箱背景會加上 mask，點選 mask 效果等同於點選關閉燈箱按鈕

#### 公司認證與產品認證
- 第三方認證
- 1 Certification 為多語，{lang.certification}
- 取得 data 中的 certInfo.thirdPartyCert array, certInfo.companyCert array, certInfo.productCert array
- 2 解析第三方認證顯示邏輯(thirdPartyCert)
- 依次分析 certInfo.thirdPartyCert 資料
- 第三方認證的 tts 認證與 advanced 認證圖片是固定的路徑，因此回傳的 json 只記錄是否顯示，以及對應認證顯示的名稱，結構與其他認證不同
- 如果 {certInfo.ttsCert} == 1，代表要顯示 tts 的認證圖片，另外圖片的 title 與 alt 顯示 {certInfo.ttsCertName} 的值，點選 tts 認證不會開啟燈箱
- 如果 {certInfo.advancedCert} == 1，代表要顯示進階認證圖片，另外圖片的 title 與 alt 顯示 {certInfo.advancedCertName}，點選 進階認證不會開啟燈箱
- 其他類型的認證，需要解析 {certInfo.thirdPartyCert.isUseHtml} 欄位值
- 如果 {certInfo.thirdPartyCert.isUseHtml} == 1，代表認證的內容要顯示 {certInfo.thirdPartyCert.informationHtml} 的 html code
- 反之，依照一般認證顯示規則，點選後開啟燈箱，顯示相關內容，認證燈箱部分請參考 https://hackmd.io/OFJ68AIxTfePBEeKqlGa-w
- {certInfo.thirdPartyCert.isUseHtml} == 1 範例
- 當 {certInfo.thirdPartyCert.isUseHtml} == 1 時，{certInfo.thirdPartyCert.informationHtml} 內容會呈現類似以下的內容，包含 a href 連結，以及連結對應的圖型，所以套板時，直接套用 html code 內容

"<a id=\\\"cert_doc\\\" style=\\\"color:blue;\\\" target=\\\"_blank\\\" href=\\\"https://dunscertified.dnb.com.tw/en/DUNSCertifiedProfile/DCP[ID]\\\"><img id=\\\"cert_img\\\" style=\\\"position: inherit;\\\" src=\\\"https://dunscertified.dnb.com.tw/Images/dnb_logo.png\\\"><br>DUNS Certified Profile</a>"

- 公司認證
- 3 Company Certification 為多語，{lang.companycertification}
- 4 解析 {certInfo.companyCert} 資料，依次顯示
- 如果 {certInfo.companyCert.isUseHtml} == 1，代表認證的內容要顯示 {certInfo.companyCert.informationHtml} 的 html code
- 反之，依照一般認證顯示規則，點選後開啟燈箱，顯示相關內容，認證燈箱部分請參考 https://hackmd.io/OFJ68AIxTfePBEeKqlGa-w
- 5 解析以下條件，如果符合，顯示按鈕讓操作人員可以開啟新視窗，並列出所有相關的公司認證
- 判斷數量 {certInfo.companyCert.total} > 0
- 判斷開啟的 url 非空，對應的 url 為{certInfo.companyCert.allCertHref} != ''
- 6 當第五項要顯示時，對應的名稱 All Certifications 為多語，{lang.allcertification}
- 顯示 All Certifications，後面加上 {certInfo.companyCert.total}

- 型錄認證
- 7 Product Certification 為多語，{lang.productcertification}
- 8 解析 certInfo.productCert 資料，依次顯示
- 如果 {certInfo.productCert.isUseHtml} == 1，代表認證的內容要顯示 {certInfo.productCert.informationHtml} 內的 html code
- 反之，依照一般認證顯示規則，點選後開啟燈箱，顯示相關內容，認證燈箱部分請參考 https://hackmd.io/OFJ68AIxTfePBEeKqlGa-w
- 9 解析以下條件，如果符合，顯示按鈕讓操作人員可以開啟視窗，並列出所有相關的~~公司認證~~公司型錄認證
- 判斷數量 {certInfo.productCert.total} > 0
- ~~判斷開啟的 url 非空，對應的 url 為{certInfo.productCert.allCertHref} != ''~~
- 目前 cp 頁的公司型錄認證最多只列出前十筆資料，要取得全部的型錄認證，請參考下面第 10 點說明
- 10 當第九項要顯示時，對應的名稱 All Certifications 為多語，{lang.allcertification}
- 顯示 All Certifications，後面加上 {certInfo.productCert.total} 數量
- 點選 All Certifications 按鈕時，透過 [URI-C-03 型錄認證清單](https://hackmd.io/U_Dmv0w7QlGSVDi5N4Wneg#%E7%AF%84%E4%BE%8B1) ，取得該公司下所有的型錄認證

- 操作邏輯
- 點選型錄認證燈箱
- 參考 [URI-C-02 型錄認證/公司認證燈箱](https://hackmd.io/OFJ68AIxTfePBEeKqlGa-w#%E7%87%88%E7%AE%B1%E5%85%83%E4%BB%B6) 取得對應 json 內容
- 傳入的 url 路徑 /certifications/prod/{certInfo.id}?lang={companyProfile.languageId}&companyId={companyProfile.companyId}
- 解析回傳的 certInfo object 內容並顯示於燈箱中
- 1 燈箱名稱
- Product Certification 為多語，{lang.productcertification}
- 2 型錄認證名稱
- 顯示 {certInfo. name}
- 3 型錄認證圖片
- 顯示 {certInfo.imgUrl}
- 4 型錄認證編號
- Certification No 為多語，{lang.certificationno}
- 顯示 {certInfo.serial}
- 如果沒有就不顯示此欄位
- 5 型錄認證生效起始日期
- Certification Start Time 為多語，{lang.certificationstarttime}
- 顯示 {certInfo.startTime}
- 如果沒有就不顯示此欄位
- 6 型錄認證生效結束日期
- Certification End Time 為多語，{lang.certificationendtime}
- 顯示 {certInfo.endTime}
- 如果沒有就不顯示此欄位
- 7 型錄認證說明
- Certification description 為多語，{lang.certificationdesc}
- 顯示 {certInfo.desc}
- 如果沒有就不顯示此欄位
- 8 型錄認證附件檔案
- Attachments 為多語，{lang.certificationattachments}
- 顯示 url 連結
- href 顯示 {certInfo.fileUrl}
- 連結名稱顯示 {certInfo.fileName}
- 如果沒有就不顯示此欄位
- 9 型錄認證相關型錄
- Product 為多語，{lang.product}
- 解析 certInfo.refProductRows array，依次顯示內容
- 9-1 顯示 {certInfo.refProductRows.imgUrl}
- 9-2 對應的型錄詳目頁 url 連結
- href 顯示 {certInfo.refProductRows.productCpUrl}
- 連結名稱顯示 {certInfo.refProductRows.productName}
- 如果沒有就不顯示此區塊
- 10 燈箱關閉按鈕
- 關閉燈箱按鈕，點選後關閉燈箱
- 11 燈箱遮罩
- 燈箱背景會加上 mask，點選 mask 效果等同於點選關閉燈箱按鈕

- 點選公司認證燈箱
- 參考 [URI-C-02 型錄認證/公司認證燈箱](https://hackmd.io/OFJ68AIxTfePBEeKqlGa-w#%E7%87%88%E7%AE%B1%E5%85%83%E4%BB%B6) 取得對應 json 內容
- 傳入的 url 路徑 /certifications/com/{certInfo.id}?lang={companyProfile.languageId}&companyId={companyProfile.companyId}
- 解析回傳的 certInfo object 內容並顯示於燈箱中
- 1 燈箱名稱
- Company Certification 為多語，{lang.companycertification}
- 2 公司名稱
- 顯示 {companyInfo.companyName}
- 3 認證名稱
- 顯示 {certInfo .name}
- 4 認證圖片
- 顯示 {certInfo.imgUrl}
- 5 認證相關顯示內容
- 認證編號
- Certification No 為多語，{lang.certificationno}
- 顯示 {certInfo.serial}
- 如果沒有就不顯示此欄位
- 認證生效起始日期
- Certification Start Time 為多語，{lang.certificationstarttime}
- 顯示 {certInfo.startTime}
- 如果沒有就不顯示此欄位
- 認證生效結束日期
- Certification End Time 為多語，{lang.certificationendtime}
- 顯示 {certInfo.endTime}
- 如果沒有就不顯示此欄位
- 認證說明
- Certification description 為多語，{lang.certificationdesc}
- 顯示 {certInfo.desc}
- 如果沒有就不顯示此欄位
- 認證附件檔案
- Attachments 為多語，{lang.certificationattachments}
- 顯示 url 連結
- href 顯示 {certInfo.fileUrl}
- 連結名稱顯示 {certInfo.fileName}
- 如果沒有就不顯示此欄位
- 6 燈箱關閉按鈕
- 關閉燈箱按鈕，點選後關閉燈箱
- 7 燈箱遮罩
- 燈箱背景會加上 mask，點選 mask 效果等同於點選關閉燈箱按鈕

#### 公司得獎紀錄、大事記(得獎紀錄)
- 顯示邏輯
- 參考文件 https://hackmd.io/WTAzi5tXQBuakQV1tkgATw?view#%E5%BE%97%E7%8D%8E%E8%B3%87%E6%96%99
- 1 標題 Award 為多語，{lang.awards}
- 2 標題 Award from {companyProfile.companyName}
- Award 為多語，{lang.awards}
- from 為固定顯示
- 後面需要接上 {companyProfile.companyName}
- 取得 data 中的 awardInfo.awardList array，依次解析資料
- 3 顯示圖片，{awardInfo.awardList.imgSrc}
- 4 顯示年分，{awardInfo.awardList.startYear}
- 5 顯示得獎名稱與聯結，名稱為 {awardInfo.awardList.title}，點選的聯結是 {awardInfo.awardList.href}
- 6 顯示說明，{awardInfo.awardList.description}

#### 公司得獎紀錄、大事記(官方紀錄)
- 顯示邏輯
- 參考文件 https://hackmd.io/WTAzi5tXQBuakQV1tkgATw?view#%E5%BE%97%E7%8D%8E%E8%B3%87%E6%96%99
- 1 標題 Official Records 為多語，{lang.officialrecords}
- 2 標題 Official Records from Taiwan International Trade Shows
- Official Records 為多語，{lang.officialrecords}
- from Taiwan International Trade Shows 為固定顯示
- 取得 data 中的 awardInfo.officialRecordsFromTTSList array，依次解析資料
- 3 顯示圖片，{awardInfo.officialRecordsFromTTSList.logoUrl}
- 4 顯示年月，{awardInfo.officialRecordsFromTTSList.showYearMonth}
- 5 顯示名稱與聯結，名稱為 {awardInfo.officialRecordsFromTTSList.displayTitle}，點選的聯結是 {awardInfo.officialRecordsFromTTSList.sUrl}
- 6 顯示序號，Booth No. 為固定顯示，後方序號為 {awardInfo.officialRecordsFromTTSList.showBoots}
- 7 標題 Official Records from {companyProfile.companyName}
- Official Records 為多語，{lang.officialrecords}
- from 為固定顯示
- 後面需要接上 {companyProfile.companyName}
- 取得 data 中的 awardInfo.officialRecordList array，依次解析資料
- 8 顯示圖片，{awardInfo.officialRecordList.imgSrc}
- 9 顯示年分，{awardInfo.officialRecordList.startYear}
- 10 顯示名稱與聯結，名稱為 {awardInfo.officialRecordList.title}，點選的聯結是 {awardInfo.officialRecordList.href}
- 11 顯示說明，{awardInfo.officialRecordList.description}
- 操作邏輯

#### 公司聯絡資訊
- 未登入
- 已登入
- 顯示邏輯
- 參考文件 https://hackmd.io/WTAzi5tXQBuakQV1tkgATw?both#%E5%85%AC%E5%8F%B8%E8%81%AF%E7%B5%A1%E8%B3%87%E8%A8%8A
- 取得 data 中的 contactUs object
- 1 Contact Information 為多語，{lang.contactinformation}
- 2 聯絡人相關訊息
- 如果有登入，依次顯示資訊
- Owner 為多語，{lang.owner}
- 顯示 {contactUs.owner}
- Contact Person 為多語，{lang.contactperson}
- 顯示 {contactUs.contactFullName}
- 分析 {contactUs.contactPicture}，如果有值，顯示聯絡人圖片
- 分析 {contactUs.contactCard}，如果有值，顯示聯絡人名片圖
- Business Phone Number 為多語，{lang.tel1}
- 顯示 {contactUs.contactPhone}
- 如果沒有登入，owner 等資訊會是空的，此時請顯示 Log in to view details，多語資料 {lang.logintoviewdetails}
- Owner 為多語，{lang.owner}
- Contact Person 為多語，{lang.contactperson}
- Business Phone Number 為多語，{lang.tel1}
- 3 Contact Supplier 為多語，{lang.contactsupplier}
- 4 其他相關資訊
- 依次判斷以下 contactUs object 的欄位
- Company Fax Number 為多語，{lang.fax}
- 對應欄位 {contactUs.officeFax}
- Phone Number 為多語，{lang.phonenumber}
- 對應欄位 {contactUs.contactPhone}
- Office Address 為多語，{lang.officeaddress}
- 對應以下欄位
- {contactUs.officePostal}
- {contactUs.officeAddress}
- {contactUs.officeAddressTw}
- ~~如果 {contactUs.officeAddressTw} != '' 顯示 {contactUs.officePostal} + {contactUs.officeAddressTw}~~
- ~~如果 {contactUs.officeAddressTw} == '' and {contactUs.officeAddress} != '' 顯示 {contactUs.officePostal} + {contactUs.officeAddress}~~
- ~~後面加上 google map 的聯結，帶入對應的地址~~
- 欄位顯示 {contactUs.officePostal} + {contactUs.officeAddress}
- 後方的 google map 連結，其中的地址需要執行以下的判斷
- 如果 {contactUs.officeAddressTw} != null，此時 google map 的地址使用 {contactUs.officeAddressTw}
- 反之則不顯示 google map 按鈕
- Office Hours 為多語，{lang.officehours}
- 對應欄位 {contactUs.officeHour}
- Company Website 為多語，{lang.companywebsite}
- 顯示聯結
- 聯結名稱對應欄位 {companyProfile.companyName}
- ~~聯結 url 對應欄位 {companyProfile.companyWebSiteUrl}~~
- 連結 url 對應欄位 {contactUs.websiteUrl}
- Online Shop 為多語，{lang.onlineshop}
- 顯示聯結
- 聯結名稱對應欄位 {lang.onlineshop}
- 聯結 url {contactUs.onlineShop}
- Mobile Site 為多語，{lang.mobilesite}
- 顯示 qr code 圖，對應 url : {contactUs.qrcodeUrl}
- qr code 圖片顯示方式為需要透過 front 相關 service 組出，呼叫方式參考下面的 url
- /qrcode?w=95&h=95&charset=UTF-8&ecl=H&ext=gif&data={contactUs.qrcodeUrl}
- 範例如下：https://www.ttstaging.com.tw/qrcode?w=95&h=95&charset=UTF-8&ecl=H&ext=gif&data=https://hyweb.en.ttstaging.com.tw
- 5 Last Update 為多語，{lang.lastupdate}
- 目前 contact us 中的 factoryAddress, factoryAddressTw 並未顯示，不需要的話可以移除

- 操作邏輯
- 如果 2 聯絡人相關訊息 中有 聯絡人圖片，點選後會開啟燈箱顯示圖片
- 1 點選 聯絡人圖片 圖示
- 2 開啟燈箱內容，圖片部份顯示對應的 {contactUs.contactPicture}
- 3 目前顯示 avatar 單字
- 4 燈箱關閉按鈕
- 關閉燈箱按鈕，點選後關閉燈箱
- 5 燈箱遮罩
- 燈箱背景會加上 mask，點選 mask 效果等同於點選關閉燈箱按鈕
- 如果 2 聯絡人相關訊息 中有 聯絡人名片，點選後會開啟燈箱顯示名片
- 1 點選 聯絡人名片 圖示
- 2 開啟燈箱內容，圖片部份顯示對應的 {contactUs.contactCard}
- 3 目前顯示 avatar 單字
- 4 燈箱關閉按鈕
- 關閉燈箱按鈕，點選後關閉燈箱
- 5 燈箱遮罩
- 燈箱背景會加上 mask，點選 mask 效果等同於點選關閉燈箱按鈕
- 點選 3 Contact Supplier，會跳轉到本頁下面的 聯繫廠商 區塊

#### 聯繫廠商
- 商機Inquiry Product，請參考[URI-C-01](https://hackmd.io/Y-_iIT7rR4-uqwqN5ZGNXA?view)

## 多語清單
區塊 | 多語代碼 | 說明
-------------|--------------------------------|------------------------------
麵包屑 | lang.home | 麵包屑 Home
麵包屑 | lang.company | 麵包屑 Company
公司基本資料 | lang.addtofavorites | Add to favorite
公司基本資料 | lang.gotofavorites | Go to favorite
公司基本資料 | lang.companyname | Company Name
公司基本資料 | lang.companiesbusinesstype | Business Type
公司基本資料 | lang.yearestablished | Year Establish
公司基本資料 | lang.factorylocation | Factory Location
公司基本資料 | lang.totalrevenue | Total Revenue
公司基本資料 | lang.capitial | Capital
公司基本資料 | lang.employee | Employee No.
公司基本資料 | lang.mainproducts | Main Products
公司基本資料 | lang.mainexportmarket | Main Export Market
公司相關型錄 | lang.products | Product
公司工廠資料 | lang.factory | Factory
認證 | lang.certification | Certification
認證 | lang.companycertification | Company Certification
認證 | lang.allcertification | All Certification
認證 | lang.productcertification | Product Certification
認證燈箱 | lang.certificationno | Certification No
認證燈箱 | lang.certificationstarttime | Certification Start Time
認證燈箱 | lang.certificationendtime | Certification End Time
認證燈箱 | lang.certificationdesc | Certification Description
認證燈箱 | lang.certificationattachments | Attachments
得獎紀錄 | lang.awards | Awards
得獎紀錄 | lang.officialrecords | Official Records
Contact Us | lang.logintoviewdetails | Login in to View Details
Contact Us | lang.contactinformation | Contact Information
Contact Us | lang.owner | Owner
Contact Us | lang.contactperson | Contact Person
Contact Us | lang.tel1 | Contact Phone No.
Contact Us | lang.contactsupplier | Contact Supplier
Contact Us | lang.fax | Office Fax
Contact Us | lang.phonenumber | Office Phone No.
Contact Us | lang.officeaddress | Office Address
Contact Us | lang.officehours | Office Hours
Contact Us | lang.companywebsite | Company Website
Contact Us | lang.onlineshop | Online Shop
Contact Us | lang.mobilesite | Mobile Site
Contact Us | lang.lastupdate | Last Update