# 搭建商家整體頁面 & Mock.js 模擬數據接口 (外送APP)
## 搭建商家整體頁面
### Shop Components
1. 創建四個組件
2. 註冊成路由組件

## Mock.js 模擬數據接口
### Web 應用前後台分離
1. 後台向前台提供API接口，只負責數據的提供和計算，而完全不處理展現
2. 前台通過 Http(Ajax)請求獲取數據，在瀏覽器端動態建構顯示數據

### 設計JSON數據結構
1. 理解 JSON 數據結構
a.結構:名稱，數據類型
b.value
c. value可以變，但結構不能變

### 利用 mock.js提供模擬數據
1. [Mockjs](http://mockjs.com/): 用来拦截 ajax 请求, 生成随机数据返回
### 安裝
1. 下載:npm install mockjs --save
2. 使用mockServe.js

import Mock from 'mockjs';
import data from '../mock/data.json';

//返回info接口
Mock.mock('info', { code: 0, data: data.info });
//返回goods接口
Mock.mock('goods', { code: 0, data: data.good });
//返回ratings接口
Mock.mock('ratings', { code: 0, data: data.ratings });

// export defalut ??? 不需要向外爆露任何數據，只需要保存能執行即可
// 到main.js加載即可

3. main.js: 加載mockServe

import '../src/mock/mockServe'; // 加載mockServe即可

* 以上都還沒發出ajax請求,
4. 定義接口請求函數

(未寫完)

## ShopHeader.vue
### 獲取數據
向store->state.js

<script>
import { mapState } from 'Vuex';
export default {

    computed: {
        ...mapState(['info'])
    }
}
</script>

### 動態綁定logo

    <!--動態綁定logo樣式-->
<nav class="shop-nav" :style="{backgroundImage:     `url(${info.bgImg})`}">

    <a class="back" @click="$router.back()">
    
        <i class="iconfont icon-arrow_left"></i>
    </a>
</nav>

### 標籤顏色怎麼與資料定義
今天有三款顏色標籤分別

 //1.首次優惠 info.supports.type=0
&.activity-green {
    .content-tag {
        background-color: rgb(112, 188, 70);
    }
}

//2.滿百 info.supports.type=1
&.activity-red {
    .content-tag {
        background-color: rgb(240, 115, 115);
    }
}

//3.特價info.supports.type=2
&.activity-orange {
    .content-tag {
        background-color: rgb(241, 136, 79);
    }
}

而在後台資料中是定義 info.suppors.type:0,type:1,tpye:2
那要怎麼把type和上面定義的css樣式綁定呢??

export default {
    data() {
        return {
            //info.supports.type : 0 (green),1(red) ,2(orange) ,supportClasses位置要放正確
            
supportClasses: ['activity-green', 'activity-red', 'activity-orange']
    }
}

模板中動態綁定supportClasses

<!--綁定動態supportClasses的class-->
 <div class="activity " :class="supportClasses[info.supports[0].type]">
 
    <span class="content-tag">
        <span class="mini-tag">{{info.supports[0].name}}</span>
    </span>
    <span class="activity-content ellipsis">{{info.supports[0].content}}</span>
</div>

<font color="red">Q:這裡還有bug:
1.找不到supportClasses[info.supports[0].type]這個資料??但有看到資料啊??這是為什麼??
2.因為他是三級以上表達式會有問題
</font>
A:這個數據是異步顯示(異步顯示:先顯示初始數據(state.js中),在顯示帶數據)
這裡info初始數據是info{}空的(state.js中)

A:解決:
避免再沒數據的時候就解析,用條件式來解決v-if="info.supports"

  //如果有數據才顯示
<div class="shop-header-discounts" v-if="info.supports">
    <div class="discounts-left">
        <!--綁定動態supportClasses的class-->
        <div class="activity " :class=" supportClasses[info.supports[0].type]">
            <span class="content-tag">
                <span class="mini-tag">{{info.supports[0].name}}</span>
            </span>
            <span class="activity-content ellipsis">{{info.supports[0].content}}</span>
        </div>
    </div>
    <div class="discounts-right">
        {{info.supports.length}} 個優惠
    </div>
</div>

### transition 動態效果
1.在需要的組件裡面加<transition name="fade"></transition>

<transition name="fade">
    <div class="shop-brief-modal" v-show="shopShow">
<div class="brief-modal-content">
    <h2 class="content-title">
        <span class="content-tag">
            <span class="mini-tag">品牌</span>
        </span>
        <span class="content-name">{{info.name}}</span>
    </h2>
    <ul class="brief-modal-msg">
        <li>
            <h3>{{info.score}}</h3>
            <p>評價</p>
        </li>
        <li>
            <h3>{{info.sellCount}}單</h3>
            <p>月售</p>
        </li>
        <li>
            <h3>{{info.description}}</h3>
            <p>約{{info.deliveryTime}}分鐘</p>
        </li>
        <li>
            <h3>{{info.minPrice}}元</h3>
            <p>外送費用</p>
        </li>
        <li>
            <h3>{{info.distance}}</h3>
            <p>距離</p>
        </li>
    </ul>
    <h3 class="brief-modal-title"><span>公告</span></h3>
    <div class="brief-modal-notice">
        {{info.bulletin}}
    </div>
    <div class="mask-footer" @click="toggleShopShow">
        <span class="iconfont icon-close"></span>
    </div>
</div>
        <div class="brief-modal-cover"></div>
    </div>
</transition>

 //2.css style:
&.fade-enter-active,
&.fade-leave-active {
    transition: opacity .5s;
}

&.fade-enter,
&.fade-leave-to {
    opacity: 0;
}

###### tags: `Vue` `Mock` `ajax` ``