day03

src/App.vue

@@ -3,7 +3,13 @@
     <router-view/>
   </div>
 </template>
-
+<script>
+export default {
+  created(){
+    window.$router = this.$router
+  }
+}
+</script>
 <style lang="less">
 #app {
   font-family: Avenir, Helvetica, Arial, sans-serif;
@@ -12,8 +18,10 @@
   text-align: center;
   color: #2c3e50;
 }
-html, body {
+html, body, #app {
   padding: 0;
   margin: 0;
+  width: 100%;
+  height: 100%;
 }
 </style>

src/api/category.js

@@ -0,0 +1,5 @@
+import { post, get } from '../utils/request'
+
+export const getCategoryById = (data) => get("/prod/pageProd", data)
+
+export const categoryInfo = (data) => get("/category/categoryInfo", data)

src/api/home.js

@@ -3,4 +3,6 @@ import { post, get } from '../utils/request'
 
 export const indexImgs = () => get("/indexImgs")
 
-export const noticeList = () => get("/shop/notice/noticeList")
+export const noticeList = () => get("/shop/notice/noticeList")
+
+export const tagProdList = () => get("/prod/tagProdList")

src/api/shopcart.js

@@ -0,0 +1,3 @@
+import { post, get } from "@/utils/request"
+
+export const shopCartInfo = (data) => post("/p/shopCart/info", data)

src/components/Tabber.vue

@@ -1,5 +1,5 @@
 <template>
-    <van-tabbar v-model="active">
+    <van-tabbar v-model="active" active-color="#ee0a24" inactive-color="#000">
         <van-tabbar-item replace to="/home" icon="wap-home">主页</van-tabbar-item>
         <van-tabbar-item replace to="/cateGory" icon="expand">分类</van-tabbar-item>
         <van-tabbar-item replace to="/shopCart" icon="shopping-cart">购物车</van-tabbar-item>
@@ -11,8 +11,17 @@ export default {
     data() {
         return {
             active: 0,
-        }
+        }   
     },
+    mounted(){
+        switch ( this.$route.path ) {
+            case "/home": return this.active = 0
+            case "/cateGory": return this.active = 1
+            case "/shopCart": return this.active = 2
+            case "/me": return this.active = 3
+            default: return this.active = 0
+        }
+    }
 }
 </script>
 <style lang="less"></style>

src/main.js

@@ -4,10 +4,25 @@ import router from './router'
 import store from './store'
 Vue.config.productionTip = false
 
-import { Image as VanImage, Form, Field, Search, Swipe, Grid, GridItem, NoticeBar,
-   Button, Tabbar, TabbarItem, SwipeItem, Tag } from 'vant';
-
+import {
+  Image as VanImage, Form, Field, Search, CheckboxGroup,
+  Swipe, Grid, GridItem, NoticeBar, Checkbox, Col, Cell,
+  Button, Tabbar, TabbarItem, SwipeItem, Tag, Row, CellGroup,
+  TreeSelect, Card, Empty, SubmitBar, Stepper, Divider
+} from 'vant';
 
+Vue.use(Cell);
+Vue.use(CellGroup);
+Vue.use(Divider);
+Vue.use(Col);
+Vue.use(Row);
+Vue.use(CheckboxGroup)
+Vue.use(Stepper);
+Vue.use(Checkbox)
+Vue.use(SubmitBar);
+Vue.use(Empty)
+Vue.use(Card)
+Vue.use(TreeSelect);
 Vue.use(Tag);
 Vue.use(NoticeBar)
 Vue.use(Grid);

src/utils/request.js

@@ -51,6 +51,7 @@ ajax.interceptors.response.use(response=>{
     }
     if ( data.code === "A00004" ) {
         Notify('请登录后操作!')
+        window.$router.push("/login")
         return Promise.reject( "当前页面需要登录!" ) 
     }
     Notify( data.msg )

src/views/Category.vue

@@ -1,14 +1,49 @@
 <template>
-    <div>
-        <h1>分类</h1>
+    <div class="category">
+        <van-search placeholder="请输入搜索关键词" />
+        <van-tree-select @click-nav="categoryClick" height="100%" :items="categoryInfo" :main-active-index.sync="active">
+            <!-- Vue 插槽 -->
+            <template #content>
+                <!-- 分类类型图片 banner -->
+                <van-image v-if="categoryInfo[active]" :src="categoryInfo[active].pic" />
+                <!-- 当前分类下的商品 -->
+                <van-card v-for="item in prodList.records" :num="item.totalStocks" :price="item.price" :desc="item.brief" :title="item.prodName" :thumb="item.pic" />
+                <!-- 如果没有商品 展示默认信息 -->
+                <van-empty v-if="prodList.records <= 0" description="当前分类没有商品" />
+            </template>
+        </van-tree-select>
     </div>
 </template>
 <script>
+import { categoryInfo, getCategoryById } from '@/api/category';
 export default {
-    data(){
-        return {}
+    data() {
+        return {
+            active: 0,
+            categoryInfo: [],
+            prodList: []
+        }
+    },
+    async created() {
+        const result = await categoryInfo({ parentId: 0 })
+        result.map((item) => {
+            item.text = item.categoryName
+        })
+        this.categoryInfo = result
+        this.categoryClick(0)
+    },
+    methods: {
+        async categoryClick(index) {
+            this.prodList = await getCategoryById({
+                categoryId: this.categoryInfo[index].categoryId
+            })
+        }
     }
 }
 </script>
 <style lang="less">
+.category {
+    height: 100%;
+    overflow: hidden;
+}
 </style>

src/views/Home.vue

@@ -29,36 +29,64 @@
         <!-- 商品列表 -->
         <div class="produc-list">
             <div style="width: 100%; height: 2rem;"></div>
-            <div class="list-title">
-                <span class="title">每日上新</span><span class="more">查看更多</span>
-            </div>
-            <van-grid :border="false" :column-num="3">
-                <van-grid-item>
-                    <van-image src="https://img01.yzcdn.cn/vant/apple-1.jpg" />
-                    <div>我是商品介绍我是商品介绍</div>
-                    <div>$188.88</div>
-                </van-grid-item>
-            </van-grid>
+            <template v-for="tag in tagProdList">
+                <div class="list-title">
+                    <span class="title">{{ tag.title }}</span><span class="more">查看更多</span>
+                </div>
+                <van-grid :border="false" :column-num="3">
+                    <van-grid-item v-for="goods in tag.productDtoList">
+                        <van-image :src="goods.pic" fit="fill" />
+                        <div class="produc-info">{{ goods.prodName }}</div>
+                        <div class="produc-price"> ￥{{ goods.price }}</div>
+                    </van-grid-item>
+                </van-grid>
+            </template>
         </div>
+        <div style="height: 4rem"></div>
     </div>
 </template>
 <script>
-import { indexImgs, noticeList } from '../api/home'
+import { indexImgs, noticeList, tagProdList } from '../api/home'
 export default {
     data() {
         return {
             images: [],
-            noticeList: []
+            noticeList: [],
+            tagProdList: []
         }
     },
     async created() {
         this.images = await indexImgs()
         this.noticeList = await noticeList()
+        this.tagProdList = await tagProdList()
     }
 }
 </script>
 <style lang="less">
 .produc-list {
+    .van-grid {
+        .van-grid-item {
+            .van-grid-item__content {
+                .produc-info {
+                    font-size: 0.5rem;
+                    padding: 0.1rem;
+                    font-weight: 500;
+                    display: -webkit-box;
+                    -webkit-line-clamp: 2;
+                    -webkit-box-orient: vertical;
+                    overflow: hidden;
+                }
+
+                .produc-price {
+                    color: red;
+                    text-align: left;
+                    width: 100%;
+                    margin-left: 1rem;
+                }
+            }
+        }
+    }
+
     .list-title {
         .title {
             display: inline-block;

src/views/Me.vue

@@ -1,17 +1,108 @@
 <template>
     <div class="me">
-        <h1>我的</h1>
+        <!-- 用户名和头像 -->
+        <div class="user-name">
+            <van-image round width="5rem" height="5rem" src="https://img01.yzcdn.cn/vant/cat.jpeg" />
+            <div>
+                <span>张三</span>
+            </div>
+        </div>
+        <!-- 分割线 -->
+        <van-divider :style="{ borderColor: '#f7f8fa', margin: '.3rem' }" />
+        <!-- 导航菜单 -->
+        <div class="order">
+            <div class="my-order">我的订单</div>
+            <div class="order-all">查看全部</div>
+        </div>
+        <!-- 分割线 -->
+        <van-divider :style="{ borderColor: '#f7f8fa', margin: '.1rem' }" />
+        <van-grid :border="false">
+            <van-grid-item icon="balance-pay" text="待支付" />
+            <van-grid-item icon="logistics" text="代发货" />
+            <van-grid-item icon="records" text="待签收" />
+            <van-grid-item icon="sign" text="已完成" />
+        </van-grid>
+        <!-- 分割线 -->
+        <van-divider :style="{ borderColor: '#f7f8fa', margin: '.4rem' }" />
+        <!-- 商城信息 -->
+        <van-grid class="user-details" :column-num="3" :border="false" style="height: 5rem;">
+            <van-grid-item>2<br />我的收藏</van-grid-item>
+            <van-grid-item>2<br />我的消息</van-grid-item>
+            <van-grid-item>2<br />我的足迹</van-grid-item>
+        </van-grid>
+        <!-- 分割线 -->
+        <van-divider :style="{ borderColor: '#f7f8fa', margin: '.4rem' }" />
+        <!-- 固定设置 -->
+        <van-cell-group>
+            <van-cell title-style="cell-title" title="分销中心" icon="cart-o" is-link />
+            <van-cell title-style="cell-title" title="领券中心" icon="coupon-o" is-link />
+            <van-cell title-style="cell-title" title="我的优惠券" icon="label-o" is-link />
+            <van-cell title-style="cell-title" title="收货地址" icon="location-o" is-link />
+        </van-cell-group>
+        <!-- 登出 -->
+        <div style="height: 1rem;"></div>
+        <van-button type="danger" @click="loginOut">退出登录</van-button>
+        <div style="height: 4rem;"></div>
     </div>
 </template>
 <script>
 export default {
-    data(){
+    data() {
         return {}
+    },
+    methods: {
+        loginOut(){
+            sessionStorage.clear()
+            this.$router.push("/login")
+        }
     }
 }
 </script>
-<style lang="less">
-.me{
+<style scoped lang="less">
+.van-cell__title,
+.van-cell__value {
+    text-align: left;
+}
+
+.user-details {
+    .van-grid-item {
+        .van-grid-item__content {
+            line-height: 1.8rem;
+        }
+    }
+}
+
+.me {
+    min-height: 100%;
+    background-color: #f7f8fa;
+
 
+
+    .order {
+        height: 3rem;
+        line-height: 3rem;
+        background-color: #FFF;
+
+        .my-order {
+            width: 50%;
+            display: inline-block;
+            font-weight: 700;
+            text-align: left;
+            padding-left: 1rem;
+        }
+
+        .order-all {
+            width: 40%;
+            display: inline-block;
+            text-align: right;
+            margin-right: 1rem;
+            font-size: .8rem;
+        }
+    }
+
+    .user-name {
+        padding: 2rem;
+        background-color: #FFF;
+    }
 }
 </style>

src/views/ShopCart.vue

@@ -1,14 +1,101 @@
 <template>
-    <div>
-        <h1>购物车</h1>
+    <div class="shop-cart">
+        <van-search placeholder="请输入搜索关键词" />
+        <div style="height: 1rem;"></div>
+        <div class="cards-list">
+            <div  v-for="shop in shopCartInfo" :key="shop.shopId">
+                <van-row v-for="items in shop.shopCartItemDiscounts[0].shopCartItems">
+                    <van-col span="2">
+                        <van-checkbox-group v-model="result" ref="checkboxGroup">
+                            <van-checkbox name="a"></van-checkbox>
+                        </van-checkbox-group>
+                    </van-col>
+                    <van-col span="22">
+                        <span class="shop-name">{{ shop.shopName }}</span>
+                        <van-card :num="value" :price="items.price" 
+                            :desc="items.skuName" :title="items.prodName"
+                            :thumb="items.pic">
+                            <template #tags>
+                                <!-- 暂时没有 -->
+                                <!-- <van-tag plain type="danger">标签</van-tag> -->
+                                <!-- <van-tag plain type="danger">标签</van-tag> -->
+                            </template>
+                            <template #footer>
+                                <van-stepper v-model="value" integer />
+                            </template>
+                        </van-card>
+                    </van-col>
+                </van-row>
+                <van-divider  />
+            </div>
+        </div>
+        <van-submit-bar :price="3050" button-text="提交订单" @submit="onSubmit">
+            <van-checkbox v-model="checked">全选</van-checkbox>
+            <template #tip>
+                你的收货地址不支持同城送, <span @click="onClickEditAddress">修改地址</span>
+            </template>
+        </van-submit-bar>
     </div>
 </template>
 <script>
+import { shopCartInfo } from '@/api/shopcart';
 export default {
-    data(){
-        return {}
+    data() {
+        return {
+            checked: false,
+            shopCartInfo: [],
+            value: 0,
+            result: []
+        }
+    },
+    async created() {
+        this.shopCartInfo = await shopCartInfo({})
+    },
+    methods: {
+        onSubmit() {
+
+        },
+        onClickEditAddress() {
+
+        }
     }
 }
 </script>
 <style lang="less">
+.shop-cart {
+    background-color: #fafafa;
+    height: 100%;
+
+    .van-submit-bar {
+        bottom: 3.2rem;
+    }
+
+    .cards-list {
+        padding-right: 0.5rem;
+        padding-left: 0.5rem;
+        background-color: #fff;
+
+        .van-row {
+            .van-col--2 {
+                margin-top: 6rem;
+            }
+
+            .van-col {
+                .shop-name {
+                    display: inline-block;
+                    height: 2.5rem;
+                    text-align: left;
+                    width: 100%;
+                    margin-top: 1rem;
+                    font-weight: 600;
+                }
+
+                .van-card {
+                    background-color: #fff;
+                }
+            }
+
+        }
+    }
+}
 </style>