店铺管理

src/App.vue

@@ -30,6 +30,7 @@ export default {
         });
         wx.getSystemInfo({
             success: res => {
+                console.log(res);
                 this.$store.commit('setSystemInfo', res);
             }
         });

src/components/NavHeader.vue

@@ -0,0 +1,86 @@
+<template>
+    <div
+        class="header"
+        :style="{ paddingTop: systemInfo.statusBarHeight + 'px', color: fontColor, backgroundColor: bgColor }"
+    >
+        <van-icon name="arrow-left" :size="24" :color="fontColor" @click="navigateBack" />
+        <span class="name" :style="{ color: fontColor }" v-if="this.colorType !== 'light'"><slot></slot></span>
+    </div>
+</template>
+
+<script>
+import { mapState } from 'vuex';
+export default {
+    data() {
+        return {
+            colorType: 'light'
+        };
+    },
+    computed: {
+        ...mapState(['systemInfo']),
+        fontColor() {
+            if (this.colorType == 'light') {
+                return '#fff';
+            } else {
+                return '#000';
+            }
+        },
+        bgColor() {
+            if (this.colorType == 'light') {
+                return 'rgba(255,255,255,0)';
+            } else {
+                return 'rgba(255,255,255,1)';
+            }
+        }
+    },
+    onPageScroll(e) {
+        if (e.scrollTop > 50) {
+            this.colorType = 'dark';
+            wx.setNavigationBarColor({
+                frontColor: '#000000',
+                backgroundColor: '#ffffff',
+                animation: {
+                    duration: 300
+                }
+            });
+        } else {
+            this.colorType = 'light';
+            wx.setNavigationBarColor({
+                frontColor: '#ffffff',
+                backgroundColor: '#000000',
+                animation: {
+                    duration: 300
+                }
+            });
+        }
+    }
+};
+</script>
+
+<style lang="less" scoped>
+.header {
+    top: 0;
+    left: 0;
+    right: 0;
+    position: fixed;
+    height: 44px;
+    z-index: 20;
+    transition: all ease-in-out 0.3s;
+    padding: 0 15px;
+    .flex();
+
+    .name {
+        padding: 0 100px;
+        position: absolute;
+        left: 0;
+        right: 0;
+        height: 44px;
+        bottom: 0;
+        font-size: 17px;
+        font-weight: bold;
+        color: #000000;
+        line-height: 44px;
+        text-align: center;
+    }
+}
+</style>

src/components/SortItem.vue

@@ -0,0 +1,87 @@
+<template>
+    <div class="sort" :class="direction" @click="changeSort">
+        <span><slot>价格</slot></span>
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+        value: {
+            type: String,
+            default: ''
+        },
+        name: {
+            type: String,
+            default: 'price'
+        }
+    },
+    computed: {
+        directions() {
+            return ['desc', 'asc'].map(item => {
+                return this.name + ',' + item;
+            });
+        },
+        direction() {
+            let list = [...this.directions];
+            if (this.value && list.includes(this.value)) {
+                return this.value.split(',')[1];
+            } else {
+                return '';
+            }
+        }
+    },
+    methods: {
+        changeSort() {
+            let index = ([...this.directions].indexOf(this.value) + 1) % 2;
+            console.log(index);
+            this.$emit('input', this.directions[index]);
+        }
+    }
+};
+</script>
+
+<style lang="less" scoped>
+.sort {
+    font-size: 14px;
+    color: #292c33;
+    line-height: 24px;
+    padding-right: 16px;
+    position: relative;
+    &::before {
+        font-family: 'vant-icon';
+        content: '\F009';
+        font-size: 8px;
+        position: absolute;
+        right: 0px;
+        top: -3px;
+        color: #292c33;
+    }
+    &::after {
+        font-family: 'vant-icon';
+        content: '\F007';
+        font-size: 8px;
+        position: absolute;
+        right: 0px;
+        bottom: -3px;
+        color: #292c33;
+    }
+
+    &.desc,
+    &.asc {
+        color: @prim;
+    }
+
+    &.desc {
+        &::before {
+            color: @prim;
+        }
+    }
+
+    &.asc {
+        &::after {
+            color: @prim;
+        }
+    }
+}
+</style>

src/pages/store/homePage.vue

@@ -10,6 +10,7 @@
 </config>
 <template>
     <div>
+        <nav-header>我的店铺</nav-header>
         <div class="top">
             <van-image
                 width="100%"
@@ -34,9 +35,32 @@
                 </div>
             </div>
         </div>
-        <van-dropdown-menu>
-            <van-dropdown-item title-class="van-icon van-icon-arrow" :value="value1" :options="option1" />
-        </van-dropdown-menu>
+        <div class="list">
+            <van-sticky :offset-top="systemInfo.statusBarHeight + 44">
+                <div class="list-header">
+                    <div class="col-3">
+                        <van-dropdown-menu>
+                            <van-dropdown-item
+                                title-class="van-icon van-icon-arrow"
+                                :value="value1"
+                                :options="option1"
+                            />
+                        </van-dropdown-menu>
+                    </div>
+                    <div class="col-3">
+                        <sort-item v-model="sort" name="price">价格</sort-item>
+                    </div>
+                    <div class="col-3">
+                        <sort-item v-model="sort" name="createAt">最新</sort-item>
+                    </div>
+                </div>
+            </van-sticky>
+            <div class="list-content">
+                <div class="procuct" v-for="(item, index) in list" :key="index">
+                    <product-info :info="item"></product-info>
+                </div>
+            </div>
+        </div>
 
         <div class="bottom">
             <button-bg type="warning">分享店铺</button-bg>
@@ -46,9 +70,13 @@
 </template>
 
 <script>
+import { mapState } from 'vuex';
 import ButtonBg from '../../components/ButtonBg.vue';
+import NavHeader from '../../components/NavHeader.vue';
+import ProductInfo from '../../components/ProductInfo.vue';
+import SortItem from '../../components/SortItem.vue';
 export default {
-    components: { ButtonBg },
+    components: { ButtonBg, SortItem, ProductInfo, NavHeader },
     data() {
         return {
             option1: [{ text: '全部商品', value: 0 }, { text: '新款商品', value: 1 }, { text: '活动商品', value: 2 }],
@@ -58,15 +86,46 @@ export default {
                 { text: '销量排序', value: 'c' }
             ],
             value1: 0,
-            value2: 'a'
+            value2: 'a',
+            sort: '',
+            page: 0,
+            loading: false,
+            list: [],
+            empty: false,
+            finish: false
         };
-    }
+    },
+    computed: {
+        ...mapState(['systemInfo'])
+    },
+    methods: {
+        loginMethods() {
+            this.loading = true;
+            this.getData();
+        },
+        getData() {
+            let data = {
+                page: this.page,
+                size: 20
+            };
+            if (this.sort) {
+                data.sort = this.sort;
+            }
+            this.$http.postJson('/collection/all', data).then(res => {
+                this.empty = res.empty;
+                this.finish = res.last;
+                this.list = [...this.list, ...res.content];
+            });
+        }
+    },
+    onPageScroll() {}
 };
 </script>
 
 <style lang="less" scoped>
 .top {
     position: relative;
+    z-index: 2;
 
     .top-card {
         position: absolute;
@@ -132,8 +191,13 @@ export default {
 
     box-shadow: 0 2px 12px rgb(100 101 102 / 12%);
 }
-
+.list {
+    padding-bottom: 100px;
+    position: relative;
+    z-index: 1;
+}
 .bottom {
+    background-color: #fff;
     position: fixed;
     left: 0;
     right: 0;
@@ -142,5 +206,26 @@ export default {
     padding: 6px 20px;
     .bottom(6px);
     justify-content: space-between;
+    z-index: 20;
+}
+
+.list-header {
+    .flex();
+    justify-content: center;
+    height: 44px;
+    background-color: #fff;
+    position: relative;
+}
+
+.col-3 {
+    width: 30%;
+    flex-shrink: 0;
+
+    .flex();
+    justify-content: center;
+}
+
+.procuct {
+    padding: 20px 25px;
 }
 </style>

src/pages/store/productEdit.vue

@@ -0,0 +1,16 @@
+<config>
+{
+    "navigationBarTitleText": "新增商品",
+    "navigationBarBackgroundColor": "#ffffff",
+    "navigationBarTextStyle": "black"
+}
+</config>
+<template>
+    <div></div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="less" scoped></style>