## 簡介
## 依賴安裝
### yarn
```
yarn install
```
### npm
```
npm install
```
## 項目運行
### yarn
```
yarn serve
```
### npm
```
npm run serve
```
### 項目打包
### yarn
```
yarn build
```
### npm
```
npm run build
```
### vue自定義配置
請參考 [Configuration Reference](https://cli.vuejs.org/config/).
## 目錄結構
項目結構目錄如下：
~~~
|-- web # 根項目
|-- README.md
|-- babel.config.js # babel語法編譯
|-- package-lock.json
|-- package.json # 依賴包管理
|-- postcss.config.js # CSS預處理器(此處默認啟用autoprefixer)
|-- node_modules # 依賴包
|-- vue.config.js # vue配置文件
|-- dist # 發布目錄
|-- public # 靜態文件夾
| |-- favicon.ico
| |-- index.html
|-- src # 源碼目錄
|-- App.vue
|-- configs.js # API配置文件
|-- main.js # 入口文件
|-- permission.js # 路由守衛、鉤子驗證
|-- api # 網絡請求接口
| |-- app.js
| |-- news.js
| |-- store.js
| |-- user.js
|-- assets # 資源目錄
| |-- css
| |-- images
| |-- scss
|-- components # 組件目錄
| |-- activeArea # 首頁秒殺、熱銷商品、店鋪復用頁面
| |-- adSwiper # 廣告頁面
| |-- articleList # 文章列表
| |-- couponList # 優惠券列表
| |-- couponPopup # 優惠券彈窗
| |-- evaluateList # 評價列表
| |-- goodsList # 商品列表
| |-- goodsSpec # 商品規格彈窗
| |-- homeCoupon # 首頁優惠券組件
| |-- orderGoods # 商品訂單
| |-- orderList # 訂單列表
| |-- postSaleList # 售后列表組件
| |-- priceSlice # 價格字符分隔組件
| |-- productSwiper # 產品介紹滑塊
| |-- progressBar # 進度條
| |-- recommend # 推薦商品列表
| |-- shop # 商品詳情店鋪模塊
| |-- trigonometry # 小三角形組件
|-- layout # 布局組件
|-- mixin
|-- router # 項目路由
|-- store # 狀態管理
|-- styles # 全局樣式目錄
|-- utils #外部方法目錄
| |-- area.js
| |-- relUrl.js
| |-- request.js
| |-- type.js
| |-- utils.js
| |-- wxjssdk.js # 微信jssdk
|-- views # 項目頁面
|-- cart
|-- common # 公用頁面
| |-- confirmOrder.vue # 訂單確認頁面
| |-- goodsDetail.vue # 商品詳情頁面
| |-- goodsSearch.vue # 商品搜索頁面
| |-- helpCenter.vue # 幫助中心、文章
| |-- helpDetail.vue # 幫助詳情頁面
| |-- payResult.vue # 支付結果
| |-- serverExplain.vue # 服務協議
| |-- storeDetail.vue # 店鋪簡介
| |-- storeInfo.vue # 店鋪詳情信息
| |-- storeRank.vue # 店鋪排行
|-- home # 首頁進入的頁面
| |-- couponCenter.vue # 優惠中心
| |-- goodsBargain.vue # 商品砍價
| |-- goodsCombination.vue # 拼團
| |-- goodsSeckill.vue # 商品秒殺
| |-- hotList.vue # 熱銷榜單
| |-- shopStreet.vue # 店鋪街
| |-- special.vue # 規格
| |-- userVip.vue # 會員中心
|-- index # 根頁面
| |-- cart.vue # 購物車
| |-- home.vue # 首頁
| |-- sort.vue # 分類
| |-- user.vue # 個人中心
|-- login # 登錄頁面
| |-- forgetPwd.vue # 忘記密碼
| |-- login.vue # 登錄
| |-- register.vue # 注冊頁面
|-- sort
|-- user # 個人中心進入的頁面
|-- addressEdit.vue # 地址編輯
|-- afterSalesDetail.vue # 售后詳情
|-- afterSalesDetailForm.vue # 填寫售后表單
|-- applyAfterSales.vue # 申請售后
|-- commodityEvaluation.vue # 評價商品
|-- goodsEvaluate.vue # 商品評價列表頁面
|-- goodsLogistics.vue # 商品訂單邏輯
|-- myCoupon.vue # 我的優惠券
|-- orderDetails.vue # 訂單詳情
|-- postSale.vue # 售后列表頁面
|-- signDetail.vue # 簽到詳情
|-- signRule.vue # 簽到規則
|-- userAddress.vue # 用戶地址
|-- userBill.vue # 用戶消費記錄
|-- userCollection.vue # 用戶收藏
|-- userEvaluate.vue # 商品全部評價
|-- userOrder.vue # 用戶訂單
|-- userPayment.vue # 用戶充值
|-- userProfile.vue # 用戶信息
|-- userSgin.vue # 用戶簽到
|-- userWallet.vue # 用戶錢包
~~~
### 項目路由說明
| 頁面 | 名字 | 路徑 | 帶參路徑地址 | 參數解釋 |
| :----------------- | :---------------- | :--------------------- | :------------------------ | :----------------------------------- |
| <div style="width:100px">首頁</div> | home | /index/home | - | - |
| 購物車 | cart | /index/cart | - | - |
| 分類 | sort | /index/sort | - | - |
| 個人中心 | user | /index/user | - | - |
| 店鋪街 | shopStreet | /home/shopstreet | - | - |
| 限時秒殺 | goodsSeckill | /home/goodsseckill | - | - |
| 領券中心 | couponCenter | /home/couponcenter | - | - |
| 拼團活動 | goodsCombination | /home/goodscombination | - | - |
| 積分簽到 | userSign | /home/usersign | - | - |
| 會員中心 | userVip | /home/uservip | - | - |
| 砍價活動 | goodsBargain | /home/goodsbargain | - | - |
| 我的收藏 | userCollection | /home/usercollection | - | - |
| 商城咨詢or幫助中心 | helpCenter | /common/helpcenter | /common/helpcenter?type=1 | type為1幫助中心不傳或者傳0位商城咨詢 |
| 熱銷榜單 | hotList | /home/hotlist | - | - |
| 店鋪排行 | storeRank | /common/storerank | - | - |
| 商品詳情 | goodsDetail | /common/goodsdetail | /common/goodsdetail?id=8 | id 為 商品id |
| 商品全部評價 | userEvaluate | /user/userevaluate | /user/userevaluate?id=8 | id 為 商品id |
| 店鋪簡介 | storeDetail | /common/storedetail | /common/storedetail?id=9 | id 為店鋪id |
| 店鋪詳情信息 | storeInfo | /common/storeinfo | /common/storeinfo?id=9 | id 為店鋪id |
| 商品查詢 | goodsSearch | /common/goodssearch | /common/goodssearch?id=26&name=文具3 | 入口為分類頁面<br>id為分類id<br>name為分類名 |
| 個人信息 | userProfile | /user/userProfile | - | - |
| 服務協議及隱私政策 | serverExplain | /common/serverExplain | /common/serverExplain?type=0 | type為枚舉類型<br> 0 ==> 服務協議<br> 1 ==> 隱私政策 |
| 訂單列表 | userOrder | /user/userorder | /user/userorder?type=pay | type為枚舉類型<br>pay ==> 待付款<br>delivery ==> 待收貨<br>finish ==> 已完成<br>close ==> 已關閉<br>all ==> 全部 |
| 評價列表 | goodsEvaluate | /user/goodsevaluate | /user/goodsevaluate?type=1 | type為枚舉類型<br>1 ==> 已評價<br>不傳或者0 ==> 默認 |
| 售后列表 | postSale | /user/postsale | /user/postsale?active=apply | active為枚舉類型<br>normal ==> 售后申請<br>apply ==> 處理中<br>finish ==> 已處理 |
| 我的優惠券 | myCoupon | /user/mycoupon | - | - |
| 我的錢包 | userWallet | /user/userwallet | - | - |
| 收貨地址 | userAddress | /user/useraddress | - | - |
| 訂單詳情 | orderDetails | /user/orderdetails | /user/orderdetails?id=863 | id為訂單id |
| 查看物流 | goodsLogistics | /user/goodsLogistics | /user/goodsLogistics?id=863 | id為訂單id |
| 商品評價 | commodityEvaluation | /user/commodityevaluation | /user/commodityevaluation?id=223 | id為商品訂單id |
| 申請售后 | applyAfterSales | /user/applyaftersales | /user/applyaftersales?order_id=80&item_id=5&after_sale_id=7 | order_id為訂單id<br>item_id為商品規格id<br>after_sale_id為售后id(若無可不傳) |
| 售后詳情 | afterSalesDetail | /user/aftersalesdetail | /user/aftersalesdetail?after_sale_id=2&order_id=20 | after_sale_id為售后id<br>order_id為訂單id |
| 填寫快遞單號 | afterSalesDetailForm | /user/aftersalesdetailform | /user/aftersalesdetailform?id=3 | id為售后id |
| 積分詳情 | signDetail | /user/signDetail | - | - |
| 簽到規則 | signRule | /user/signRule | - | - |
| 編輯收貨地址 | addressEdit | /user/addressedit | /user/addressedit?id=143 | id為地址列表的id |
| 登錄 | login | /login | - | - |
| 忘記密碼 | forgetPwd | /forgetpwd | - | - |
| 注冊賬號 | register | /register | - | - |
| 確認訂單 | confirmOrder | /common/confirmorder | /common/confirmorder?goods=%5B%7B"item_id"%3A32,"num"%3A3%7D%5D | goods為json字符串結構為:<br>[{<br>item_id:32<br>num:3}]<br>一個商品 為一個對象內存規格id以及數量 |
| 支付結果 | p a yResult | /common/payresult | /common/payresult?id=5&type=trade | id為訂單id或者trade_id<br>type為枚舉類型<br>trade ==> 交易<br>order ==> 普通 |
## 分頁說明
? 在某些接口請求下往往會有分頁數據列表，此時前端需要配置分頁變量，page默認從1開始，page_size默認為15個數據為一頁，可向接口傳入page_no，page_size來配置分頁信息，并且需要有一些變量判斷分頁數據是否已經加載完畢。例子如下:
```vue
<template>
<div class="article-list">
<van-list
v-model="loading"
:finished="finished"
:finished-text="finishedText"
v-show="!isEmpty"
@load="$getArticleList()"
>
<div class="article-item bg-white" v-for="(item, index) in articleList" :key="index" v-show="!isEmpty" @click="visitArticle(item.id)">
<div class="article-info row-between">
<div class="column" style="align-self:flex-start">
<div class="lg two-txt-cut" style="font-weight:500;">{{item.title}}</div>
<div class="two-txt-cut nr mt10">{{item.synopsis}}</div>
</div>
<div class="info-cover ml10">
<van-image :src="item.image" width="100%" height="100%" radius="5px" />
</div>
</div>
<div class="article-bottom row-between">
<div class="xs muted">發布時間: {{item.create_time}}</div>
<div class="row mt10">
<div style="height: 15px;width: 15px;">
<img src="@A/images/icon_see.png"/>
</div>
<div class="xs muted ml5">{{item.visit}}人瀏覽</div>
</div>
</div>
</div>
</van-list>
<div class="data-null column-center bg-white" v-show="isEmpty">
<img src="@A/images/null_notice.png" class="img-null" />
<div class="muted">{{emptyText}}</div>
</div>
</div>
</template>
<script>
import {getArticleList} from "@API/news"
export default {
name: "articleList",
props: {
categoryId: {
type: Number,
default: 0
},
type: {
type: Number | String,
default: 0
},
finishedText: {
type: String,
default: ""
},
emptyText: {
type: String,
default: "暫無任何內容..."
},
},
data() {
page: 1,
finished: false,
// 配合vant_ui的list組件使用變量
loading: true,
articleList: [],
// 判斷是否為空數組
isEmpty: false,
},
methods: {
$getArticleList() {
this.loading = true;
if (this.finished == true) return;
// page_no為頁碼， page_size可不傳，默認15條信息為一頁
getArticleList({type: this.type, page_no: this.page, id: this.categoryId || ""}).then((res) => {
if (res.code == 1) {
this.loading = false;
let { more, list } = res.data;
this.articleList.push(...list);
this.page ++;
this.$nextTick(() => {
if (!more) {
this.finished = true;
}
if (this.articleList.length <= 0) {
this.isEmpty = true;
}
return;
});
}
});
},
}
mounted() {
this.$getArticleList({type: this.type})
}
}
</script>
```
**注意:當頁面有進行相關數據更新的情況下請務必注意清理狀態比如page頁數清為1，已經加載分頁的數組清為空數組[]，完成狀態清為false等等，這種情況通常為一個tab頁共用一個數組變量的情況下需要這樣做**
## 路由鉤子以及守衛說明
### 守衛
路由守衛(beforeEach)的作用除了更改網頁的標題，還有檢測登錄狀態，若沒有登錄以及不為跳轉白名單頁面則自動跳轉到登錄頁面，如果是微信環境下將自動獲取微信授權
### 鉤子
路由鉤子主要為每個頁面配置微信分享。
## axios說明
### 請求攔截
請求類于目錄下的utils文件夾的request.js中配置。請求接口前，配置默認超時時間，并將用戶token保存到請求頭上，以便于后臺識別。
該項目下請求的接口格式統一如下：
```json
{
code: 1,
msg: '',
data: [],
debug: {},
time: "0.063771"
}
```
當接口請求成功時請求數據的code為1，請求異常時code將不為1，請求自動攔截異常情況，并打印請求異常信息
