Merge branch 'master' of http://git.izouma.com/panhui/card-wechat

src/App.vue

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

src/components/ButtonBg.vue

@@ -0,0 +1,65 @@
+<template>
+    <div :class="`btn btn-${type} iconfont ${isRight ? 'isRight' : ''}`">
+        <span><slot></slot></span>
+    </div>
+</template>
+
+<script>
+export default {
+    props: ['type', 'isRight']
+};
+</script>
+
+<style lang="less" scoped>
+.btn {
+    position: relative;
+    width: 163px;
+    height: 48px;
+    &::before {
+        content: '\e61e';
+        font-size: 48px;
+        line-height: 48px;
+    }
+    span {
+        position: absolute;
+        font-size: 16px;
+        color: #ffffff;
+        line-height: 22px;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+    }
+}
+@warning: #ffc72c;
+
+.isRight {
+    &::before {
+        transform: rotate(180deg);
+        display: inline-block;
+    }
+}
+
+.btn-warning {
+    &::before {
+        color: @warning;
+    }
+
+    &:active {
+        &::before {
+            color: darken(@warning, 10);
+        }
+    }
+}
+
+.btn-prim {
+    &::before {
+        color: @prim;
+    }
+
+    &:active {
+        &::before {
+            color: darken(@prim, 10);
+        }
+    }
+}
+</style>

src/components/NavHeader.vue

@@ -0,0 +1,92 @@
+<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;
+        z-index: 0;
+    }
+
+    ._van-icon {
+        position: relative;
+        z-index: 2;
+    }
+}
+</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/main.js

@@ -54,7 +54,8 @@ export default {
             'pages/chooseAddress',
             'pages/store/apply',
             'pages/store/review',
-            'pages/store/homePage'
+            'pages/store/homePage',
+            'pages/store/productEdit'
         ],
         tabBar: {
             color: '#7E7E80',

src/pages/mine.vue

@@ -37,7 +37,7 @@
                 height="86"
                 src="https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/wechat/info_img_renzhengdianjia.png"
                 fit="contain"
-                @click="wait"
+                @click="navigateTo('/pages/store/apply')"
             />
         </div>
 

src/pages/news.vue

@@ -30,3 +30,9 @@ export default {
     }
 };
 </script>
+
+<style lang="less" scoped>
+/deep/ .van-empty {
+    padding-top: 80px !important;
+}
+</style>

src/pages/setting.vue

@@ -6,7 +6,7 @@
 <template>
     <div>
         <van-cell-group :border="false">
-            <van-cell title="头像" is-link @click="changeLogo">
+            <van-cell title="头像" is-link @click="changeLogo" class="avatar">
                 <van-image
                     round
                     width="36"
@@ -181,6 +181,17 @@ export default {
     }
 }
 
+.avatar {
+    /deep/ .van-cell {
+        --cell-line-height: 36px;
+    }
+
+    ._van-image {
+        line-height: 0;
+        display: block;
+    }
+}
+
 /deep/ .not {
     .van-cell {
         --cell-value-color: #c8c9cc;

src/pages/store/apply.vue

@@ -6,6 +6,7 @@
 </config>
 <template>
     <div class="page">
+        <nav-header>申请店铺</nav-header>
         <van-image
             width="100%"
             src="https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/wechat/renzheng_img_top.jpg"
@@ -65,8 +66,9 @@
 
 <script>
 import ImgUploader from '../../components/ImgUploader.vue';
+import NavHeader from '../../components/NavHeader.vue';
 export default {
-    components: { ImgUploader },
+    components: { ImgUploader, NavHeader },
     data() {
         return {
             form: {
@@ -74,7 +76,8 @@ export default {
                 icImg: ''
             }
         };
-    }
+    },
+    onPageScroll() {}
 };
 </script>
 

src/pages/store/homePage.vue

@@ -10,6 +10,7 @@
 </config>
 <template>
     <div>
+        <nav-header>我的店铺</nav-header>
         <div class="top">
             <van-image
                 width="100%"
@@ -34,14 +35,48 @@
                 </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>
+            <button-bg type="prim" isRight>管理商品</button-bg>
+        </div>
     </div>
 </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, SortItem, ProductInfo, NavHeader },
     data() {
         return {
             option1: [{ text: '全部商品', value: 0 }, { text: '新款商品', value: 1 }, { text: '活动商品', value: 2 }],
@@ -51,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;
@@ -125,4 +191,41 @@ 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;
+    bottom: 0;
+    .flex();
+    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>

src/styles/font.less

@@ -4,9 +4,9 @@
 }
 @font-face {
     font-family: 'iconfont'; /* Project id 2504712 */
-    src: url('//at.alicdn.com/t/font_2504712_nvyypmzzz6r.woff2?t=1620459144507') format('woff2'),
-        url('//at.alicdn.com/t/font_2504712_nvyypmzzz6r.woff?t=1620459144507') format('woff'),
-        url('//at.alicdn.com/t/font_2504712_nvyypmzzz6r.ttf?t=1620459144507') format('truetype');
+    src: url('//at.alicdn.com/t/font_2504712_37jeq6r3j0w.woff2?t=1620984863369') format('woff2'),
+        url('//at.alicdn.com/t/font_2504712_37jeq6r3j0w.woff?t=1620984863369') format('woff'),
+        url('//at.alicdn.com/t/font_2504712_37jeq6r3j0w.ttf?t=1620984863369') format('truetype');
 }
 
 .iconfont {
@@ -25,3 +25,8 @@
 .iconfont-liebiao:before {
     content: '\e61d';
 }
+
+
+.iconfont-button:before {
+    content: '\e61e';
+}