.

project.config.json

@@ -179,6 +179,12 @@
                     "name": "反馈",
                     "pathName": "pages/report",
                     "scene": null
+                },
+                {
+                    "id": -1,
+                    "name": "佳客中心",
+                    "pathName": "pages/vipCenter",
+                    "scene": null
                 }
             ]
         }

src/components/Scroll.vue

@@ -0,0 +1,20 @@
+<template>
+    <scroll-view class="my-scroll" scroll-y enhanced :bounces="false" :show-scrollbar="false">
+        <slot></slot>
+    </scroll-view>
+</template>
+<script>
+export default {
+    props: {},
+    data() {}
+};
+</script>
+<style lang="less" scoped>
+.my-scroll {
+    height: 100vh;
+    width: 100%;
+}
+.fixed-top {
+    position: sticky;
+}
+</style>

src/components/navigationBar.vue

@@ -118,10 +118,10 @@ export default {
     top: 0;
     left: 0;
     width: 100vw;
-    transition: all 0.3s linear;
+    transition: background-color 0.3s linear, color 0.2s linear;
     .navigation-bar-body {
         position: relative;
-        transition: all 0.3s linear;
+        transition: background-color 0.3s linear, color 0.2s linear;
         .icon-wrapper {
             position: absolute;
             left: 0;
@@ -142,7 +142,7 @@ export default {
             font-size: 17px;
             font-weight: bold;
             font-weight: 500;
-            transition: color 0.3s linear;
+            transition: background-color 0.3s linear, color 0.3s linear;
         }
     }
 }

src/custom-tab-bar/index.js

@@ -1,5 +1,6 @@
 Component({
     data: {
+        show: true,
         selected: 'home',
         color: '#4D4138',
         selectedColor: '#FF7F1F',

src/custom-tab-bar/index.wxml

@@ -1,5 +1,5 @@
 <!--miniprogram/custom-tab-bar/index.wxml-->
-<cover-view class="tab-bar">
+<cover-view class="tab-bar" wx:if="{{show}}">
   <cover-view class="tab-bar-border"></cover-view>
   <cover-view wx:for="{{list}}" wx:if="{{item.visible}}" wx:key="index" class="tab-bar-item" data-path="{{item.pagePath}}" data-index="{{index}}" bindtap="switchTab">
     <cover-image src="{{selected === item.name ? item.selectedIconPath : item.iconPath}}" class="tab-icon"></cover-image>

src/main.js

@@ -80,7 +80,8 @@ export default {
             'pages/verify',
             'pages/verifyDetail',
             'pages/report',
-            'pages/edit'
+            'pages/edit',
+            'pages/vipCenter'
         ],
         tabBar: {
             custom: true,
@@ -97,8 +98,8 @@ export default {
                 {
                     pagePath: 'pages/verify',
                     text: '核销',
-                    iconPath: 'native/imgs/tab_verify.png',
-                    selectedIconPath: 'native/imgs/tab_verify_pre.png'
+                    iconPath: 'native/imgs/tab_diary.png',
+                    selectedIconPath: 'native/imgs/tab_diary_pre.png'
                 },
                 {
                     pagePath: 'pages/my',

src/pages/my.vue

@@ -41,13 +41,14 @@
                                 />
                                 <img v-else src="/native/imgs/normal_user.png" class="icon" mode="heightFix" />
                             </div>
-                            <img src="../static/imgs/icon_code.png" class="icon-code" @click="showQrCode = true" />
+                            <img src="../static/imgs/icon_code.png" class="icon-code" @click="onShare" />
                         </div>
                         <img
                             v-if="userInfo && userInfo.vip"
                             class="vip-img"
                             src="../static/imgs/btn_vip.png"
                             mode="widthFix"
+                            @click="navigateTo('/pages/vipCenter')"
                         />
                         <img
                             v-else
@@ -65,21 +66,21 @@
                     </div>
                     <img class="bg-mask" src="../static/imgs/bg_mask.png" mode="widthFix" />
                 </div>
-                <div class="icon-menus">
+                <div class="icon-menus" @click="navigateTo('/pages/order')">
                     <div class="item">
                         <img src="../static/imgs/icon_order_not_paid.png" class="icon" />
                         <div class="name">待付款</div>
                     </div>
-                    <div class="item">
+                    <div class="item" @click="navigateTo('/pages/order')">
                         <img src="../static/imgs/icon_order_paid.png" class="icon" />
                         <div class="name">待使用</div>
                     </div>
-                    <div class="item">
+                    <div class="item" @click="navigateTo('/pages/order')">
                         <img src="../static/imgs/icon_order_finish.png" class="icon" />
                         <div class="name">已完成</div>
                     </div>
                     <div class="divider"></div>
-                    <div class="item">
+                    <div class="item" @click="navigateTo('/pages/order')">
                         <img src="../static/imgs/icon_order.png" class="icon" />
                         <div class="name">我的订单</div>
                     </div>
@@ -95,7 +96,7 @@
                         <div class="title">联系客服</div>
                         <img src="../static/imgs/icon_into.png" class="into" />
                     </div>
-                    <div class="menu">
+                    <div class="menu" @click="navigateTo('/pages/profile')">
                         <img src="../static/imgs/icon_setting.png" class="icon" />
                         <div class="title">资料设置</div>
                         <img src="../static/imgs/icon_into.png" class="into" />
@@ -103,16 +104,23 @@
                 </div>
             </div>
         </div>
-        <van-overlay :show="showQrCode">
-            <div class="qr-code-dialog">
-                <div class="body">
-                    <div class="avatar-wrapper">
-                        <img :src="(userInfo || {}).avatar || '/native/imgs/avatar.jpg'" class="avatar" />
+        <van-overlay :show="showQrCode" duration="150">
+            <div class="pop-menu">
+                <div class="title">分享到</div>
+                <div class="share">
+                    <div class="item" @click="saveImg">
+                        <img class="icon" src="../static/imgs/icon_share_friend.png" />
+                        <div class="label">微信好友</div>
+                    </div>
+                    <div class="item" @click="saveImg">
+                        <img class="icon" src="../static/imgs/icon_share_timeline.png" />
+                        <div class="label">朋友圈海报</div>
                     </div>
-                    <div class="name">{{ (userInfo || {}).nickname }} 的核销码</div>
-                    <img class="qrcode" :src="qrCode" />
                 </div>
-                <img src="../static/imgs/icon_close.png" class="icon-close" @click="showQrCode = false" />
+                <div class="btn-cancel" @click="cancelShare">取消</div>
+            </div>
+            <div class="share-img-container">
+                <img class="share-img" mode="widthFix" :src="url" />
             </div>
         </van-overlay>
     </scroll-view>
@@ -146,7 +154,8 @@ export default {
                 promote: 0
             },
             packages: [],
-            transparent: true
+            transparent: true,
+            url: 'https://jiashanxia.oss-cn-hangzhou.aliyuncs.com/img_fenxiangye%402x.png'
         };
     },
     computed: {
@@ -204,6 +213,89 @@ export default {
             } else {
                 this.transparent = true;
             }
+        },
+        onShare() {
+            this.$mp.page.getTabBar().setData({ show: false });
+            this.showQrCode = true;
+        },
+        cancelShare() {
+            this.$mp.page.getTabBar().setData({ show: true });
+            this.showQrCode = false;
+        },
+        saveImg() {
+            let tempFilePath = '';
+            Promise.resolve()
+                .then(() => {
+                    return new Promise((resolve, reject) => {
+                        wx.getImageInfo({
+                            src: this.url,
+                            success(res) {
+                                tempFilePath = res.path;
+                                resolve(res.path);
+                            },
+                            fail(e) {
+                                console.log(e);
+                                reject();
+                            }
+                        });
+                    });
+                })
+                .then(() => {
+                    return new Promise((resolve, reject) => {
+                        wx.getSetting({
+                            success(res) {
+                                if (res.authSetting['scope.writePhotosAlbum']) {
+                                    resolve();
+                                } else {
+                                    wx.authorize({
+                                        scope: 'scope.writePhotosAlbum',
+                                        success() {
+                                            resolve();
+                                        },
+                                        fail(e) {
+                                            reject('auth fail');
+                                            console.log(e);
+                                        }
+                                    });
+                                }
+                            },
+                            fail() {
+                                reject('auth fail');
+                            }
+                        });
+                    });
+                })
+                .then(() => {
+                    return new Promise((resolve, reject) => {
+                        wx.saveImageToPhotosAlbum({
+                            filePath: tempFilePath,
+                            success() {
+                                resolve();
+                            },
+                            fail(e) {
+                                console.log(e);
+                                reject();
+                            }
+                        });
+                    });
+                })
+                .then(() => {
+                    wx.showToast({
+                        icon: 'success',
+                        title: '保存成功'
+                    });
+                })
+                .catch(e => {
+                    console.log(e);
+                    if ('auth fail' === e) {
+                        this.showSettingDialog = true;
+                    } else {
+                        wx.showToast({
+                            icon: 'none',
+                            title: '保存失败'
+                        });
+                    }
+                });
         }
     },
     watch: {
@@ -377,4 +469,66 @@ page {
         }
     }
 }
+.pop-menu {
+    height: 206px;
+    height: calc(206px + env(safe-area-inset-bottom));
+    background: #f5f7fa;
+    padding-top: 40px;
+    box-sizing: border-box;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    .flex-col();
+    .title {
+        color: @text4;
+        text-align: center;
+        font-size: 13px;
+    }
+    .share {
+        .flex();
+        margin-top: 14px;
+        flex-grow: 1;
+        .item {
+            flex-basis: 0;
+            flex-grow: 1;
+            .flex-col();
+            align-items: center;
+            .icon {
+                width: 38px;
+                height: 38px;
+            }
+            .label {
+                margin-top: 4px;
+                color: black;
+                font-size: 14px;
+            }
+        }
+    }
+    .btn-cancel {
+        height: 44px;
+        padding-bottom: env(safe-area-inset-bottom);
+        background: white;
+        font-size: 15px;
+        color: black;
+        .flex();
+        justify-content: center;
+        &:active {
+            background: shade(white, 10%);
+        }
+    }
+}
+.share-img {
+    position: absolute;
+    bottom: 186px;
+    bottom: calc(186px + env(safe-area-inset-bottom));
+    // height: calc(100vh - 298px);
+    // height: calc(100vh - 298px - env(safe-area-inset-bottom));
+    // width: auto;
+    width: calc(100vw - 100px);
+    height: auto;
+    margin: auto;
+    left: 0;
+    right: 0;
+}
 </style>

src/pages/promote.vue

@@ -1,7 +1,7 @@
 <config>
 {
     "disableScroll": true,
-    "navigationBarTitleText": "我的推广",
+    "navigationBarTitleText": "我的团队",
     "navigationBarBackgroundColor": "#ffffff",
     "navigationBarTextStyle": "black",
     "backgroundColor": "#ffffff"
@@ -13,24 +13,25 @@
             <div class="head">
                 <img src="../static/imgs/img_wodetuiguang.png" class="bg" mode="heightFix" />
                 <div class="content">
-                    <div class="num">{{ promote }}</div>
-                    <div class="desc">我的推广</div>
+                    <div class="num">{{ promote }}<span class="unit">人</span></div>
+                    <div class="btn">邀请好友</div>
                 </div>
             </div>
-            <div class="title">
-                <div class="name">推广列表</div>
-            </div>
             <div class="empty-section" v-if="empty">
                 <img src="../static/imgs/verify_empty.png" class="icon" />
                 <div class="desc">暂无推广人员</div>
             </div>
             <div class="list">
+                <div class="header">
+                    <div class="col1">成员信息</div>
+                    <div class="col2">入驻时间</div>
+                    <div class="col3">消费</div>
+                </div>
                 <div class="item" v-for="item in list" :key="item.id">
                     <img :src="item.avatar" class="avatar" />
-                    <div class="info">
-                        <div class="name">{{ item.nickname }}</div>
-                        <div class="time">{{ item.createdAt }}</div>
-                    </div>
+                    <div class="name">{{ item.nickname }}</div>
+                    <div class="time">{{ item.createdAt }}</div>
+                    <div class="money">¥362</div>
                 </div>
             </div>
         </div>
@@ -62,9 +63,9 @@ page {
 }
 .head {
     margin: 12px 16px 0 16px;
-    height: 140px;
+    height: 120px;
     border-radius: 8px;
-    background: #62b8de;
+    background: #ffbb33;
     position: relative;
     overflow: hidden;
     .bg {
@@ -85,13 +86,20 @@ page {
             font-size: 42px;
             font-family: OSP-DIN;
             color: white;
-            line-height: 49px;
+            .unit {
+                font-size: 14px;
+                margin-left: 4px;
+            }
         }
-        .desc {
+        .btn {
+            width: 86px;
+            height: 32px;
+            background: white;
+            border-radius: 4px;
             font-size: 14px;
-            color: white;
-            line-height: 20px;
-            margin-top: 2px;
+            .flex();
+            justify-content: center;
+            color: @prim;
         }
     }
 }
@@ -115,35 +123,49 @@ page {
 .list {
     padding: 0 16px;
     margin-top: 16px;
+    .header {
+        .flex();
+        height: 44px;
+        margin-top: 9px;
+        border-bottom: 1px solid @bg;
+        font-size: 13px;
+        color: @text4;
+        .col1 {
+            margin-left: 44px;
+            flex-basis: 0;
+            flex-grow: 1;
+        }
+        .col2 {
+            flex-basis: 0;
+            flex-grow: 1;
+        }
+        .col3 {
+            min-width: 56px;
+        }
+    }
     .item {
-        height: 80px;
+        height: 84px;
         .flex();
         border-bottom: 1px solid @border2;
+        color: black;
+        font-size: 14px;
         .avatar {
-            width: 50px;
-            height: 50px;
-            border-radius: 25px;
+            width: 36px;
+            height: 36px;
+            min-width: 36px;
+            border-radius: 18px;
         }
-        .info {
-            margin-left: 12px;
+        .name {
+            margin-left: 8px;
+            flex-basis: 0;
             flex-grow: 1;
-            .name {
-                font-size: 14px;
-                font-weight: 400;
-                color: black;
-                line-height: 20px;
-            }
-            .time {
-                font-size: 14px;
-                color: @text4;
-                line-height: 20px;
-            }
         }
-        .num {
-            color: #ff4b1f;
-            font-size: 20px;
-            font-weight: 500;
-            font-weight: bold;
+        .time {
+            flex-basis: 0;
+            flex-grow: 1;
+        }
+        .money {
+            min-width: 56px;
         }
     }
 }

src/pages/vip.vue

@@ -1,9 +1,7 @@
 <config>
 {
     "disableScroll": true,
-    "navigationBarTitleText": "甲山下会员",
-    "navigationBarTextStyle": "black",
-    "backgroundColor": "#ffffff",
+    "navigationBarTextStyle": "white",
     "navigationStyle": "custom"
 }
 </config>
@@ -11,7 +9,22 @@
     <div class="page-container">
         <div class="page-scroll">
             <img src="../static/imgs/intro.png" class="bg" mode="widthFix" />
-            <div class="content"></div>
+            <div class="content">
+                <div class="title">
+                    成为佳客后如何赚钱？
+                </div>
+                <p>
+                    发送产品海报或链接到自己的社交圈子，比如朋友圈、微信群，只要有人下单，就可以获得分佣返利，就算平时自己购买也会获得同样的佣金返利，所有佣金都是不扣手续费，全额到账的
+                </p>
+                <div class="title">
+                    如何成为佳客？
+                </div>
+                <p>
+                    1、您可以找已经成为佳客的好友，扫描Ta的邀请二维码进入我们的小程序即可成为佳客<br />
+                    2、您可以在微信搜索关注“天游佳处”公众号，或者长按保存下方二维码识别关注，然后发送“成为佳客”，即可成为佳客
+                </p>
+                <img src="https://jiashanxia.oss-cn-hangzhou.aliyuncs.com/erweima%402x.png" class="qrcode" />
+            </div>
         </div>
         <navigation-bar transparent color="dark"></navigation-bar>
     </div>
@@ -38,5 +51,40 @@ page {
     right: 16px;
     background: #ffffff;
     border-radius: 16px;
+    padding: 0 16px 19px 16px;
+    .title {
+        color: @prim;
+        font-size: 16px;
+        font-weight: bold;
+        font-weight: 500;
+        line-height: 22px;
+        position: relative;
+        display: inline-block;
+        margin-top: 24px;
+        z-index: 2;
+        &:before {
+            content: '';
+            position: absolute;
+            left: 0;
+            bottom: 0;
+            right: 8px;
+            height: 8px;
+            background: fade(#ffcb00, 57%);
+            border-radius: 4px;
+            z-index: 1;
+        }
+    }
+    p {
+        font-size: 14px;
+        color: black;
+        line-height: 24px;
+        margin-top: 10px;
+    }
+    .qrcode {
+        width: 162px;
+        height: 162px;
+        display: block;
+        margin: 10px auto 0 auto;
+    }
 }
 </style>

src/pages/vipCenter.vue

@@ -0,0 +1,248 @@
+<config>
+{
+    "disableScroll": true,
+    "navigationBarTextStyle": "white",
+    "navigationStyle": "custom"
+}
+</config>
+<template>
+    <scroll>
+        <navigation-bar transparent color="dark" title="佳客中心"></navigation-bar>
+        <div class="top" :style="{ paddingTop: $store.state.safeArea.top + 8 + 'px' }">
+            <div class="total">
+                <div class="left">
+                    <div class="label">累积总收益</div>
+                    <div class="number">
+                        <price-tag :value="1360" size="42" color="white"></price-tag>
+                    </div>
+                </div>
+                <img src="../static/imgs/img_wodeyongjin.png" />
+            </div>
+            <div class="card">
+                <div class="infos">
+                    <div class="col">
+                        <div class="label">可提现</div>
+                        <div class="value">562.48</div>
+                    </div>
+                    <div class="col">
+                        <div class="label">已提现</div>
+                        <div class="value">562.48</div>
+                    </div>
+                    <div class="col">
+                        <div class="label">待入账<img class="icon-ask" src="../static/imgs/icon_ask.png" /></div>
+                        <div class="value">562.48</div>
+                    </div>
+                </div>
+                <div class="btns">
+                    <div class="btn btn1" @click="navigateTo('/pages/withdraw')">申请提现</div>
+                    <div class="btn btn2" @click="navigateTo('/pages/promote')">我的团队</div>
+                </div>
+            </div>
+        </div>
+        <div class="title">收益明细</div>
+        <div style="height:10px;"></div>
+        <div class="item">
+            <div class="info">
+                <img :src="require('../static/imgs/avatar.png')" class="icon" />
+                <div class="name">黄淑中</div>
+                <div class="num add">+6.00</div>
+            </div>
+            <div class="desc">购买 甲山下游玩会员套餐</div>
+            <div class="time">2020.11.12 15:30:56</div>
+            <div class="divider"></div>
+        </div>
+        <div class="item">
+            <div class="info">
+                <img :src="require('../static/imgs/icon_type_withdraw.png')" class="icon" />
+                <div class="name">申请提现</div>
+                <div class="num">-50.00</div>
+            </div>
+            <div class="desc">提现账号:mft5656566</div>
+            <div class="time">2020.11.12 15:30:56</div>
+            <img src="../static/imgs/withdraw_pending.png" class="status" />
+            <div class="divider"></div>
+        </div>
+        <div class="item">
+            <div class="info">
+                <img :src="require('../static/imgs/icon_type_withdraw.png')" class="icon" />
+                <div class="name">申请提现</div>
+                <div class="num">-50.00</div>
+            </div>
+            <div class="desc">提现账号:mft5656566</div>
+            <div class="time">2020.11.12 15:30:56</div>
+            <img src="../static/imgs/withdraw_fail.png" class="status" />
+            <div class="divider"></div>
+        </div>
+        <div class="item">
+            <div class="info">
+                <img :src="require('../static/imgs/icon_type_promote.png')" class="icon" />
+                <div class="name">自购返利</div>
+                <div class="num add">+6.00</div>
+            </div>
+            <div class="desc">购买 甲山下游玩会员套餐A</div>
+            <div class="time">2020.11.12 15:30:56</div>
+            <div class="divider"></div>
+        </div>
+    </scroll>
+</template>
+<script>
+import Scroll from '../components/Scroll';
+import NavigationBar from '../components/navigationBar';
+export default {
+    components: { Scroll, NavigationBar },
+    data() {
+        return {};
+    }
+};
+</script>
+<style lang="less">
+page {
+    background: white;
+}
+.top {
+    background: linear-gradient(180deg, #fbb637 0%, #fbb637 56%, rgba(255, 255, 255, 0) 100%);
+    .total {
+        .flex();
+        align-items: flex-end;
+        .left {
+            .flex-col();
+            margin-left: 16px;
+            flex-grow: 1;
+            .label {
+                color: white;
+                font-size: 14px;
+                margin-bottom: 5px;
+            }
+            .number {
+                margin-bottom: 16px;
+            }
+        }
+        img {
+            width: 155px;
+            height: 140px;
+        }
+    }
+    .card {
+        .flex-col();
+        margin: 0 16px;
+        border-radius: 8px;
+        background: white;
+        padding: 26px 0 22px 0;
+        .infos {
+            .flex();
+            padding: 0 21px 0 26px;
+            justify-content: space-between;
+            .col {
+                .flex-col();
+                .label {
+                    .flex();
+                    color: @text3;
+                    line-height: 24px;
+                    height: 24px;
+                    font-size: 14px;
+                    .icon-ask {
+                        width: 24px;
+                        height: 24px;
+                    }
+                }
+                .value {
+                    font-size: 26px;
+                    margin-top: 9px;
+                    color: black;
+                    font-family: OSP-DIN;
+                }
+            }
+        }
+        .btns {
+            .flex();
+            margin-top: 34px;
+            padding: 0 20px;
+            .btn {
+                border-radius: 8px;
+                height: 44px;
+                font-size: 16px;
+                color: white;
+                font-weight: bold;
+                font-weight: 500;
+                .flex();
+                justify-content: center;
+                flex-basis: 0;
+                flex-grow: 1;
+            }
+            .btn1 {
+                background: #ffbb33;
+                &:active {
+                    background: shade(#ffbb33, 10%);
+                }
+            }
+            .btn2 {
+                background: @prim;
+                margin-left: 23px;
+                &:active {
+                    background: shade(@prim, 10%);
+                }
+            }
+        }
+    }
+}
+.title {
+    font-size: 20px;
+    font-weight: bold;
+    color: black;
+    margin: 44px 16px 0 16px;
+    border-bottom: 1px solid @bg;
+    padding-bottom: 14px;
+}
+.item {
+    padding: 10px 16px 0 16px;
+    position: relative;
+    .flex-col();
+    .info {
+        .flex();
+        .icon {
+            width: 36px;
+            height: 36px;
+            border-radius: 18px;
+        }
+        .name {
+            margin-left: 8px;
+            flex-grow: 1;
+            font-size: 15px;
+            color: black;
+        }
+        .num {
+            color: black;
+            font-size: 22px;
+            font-family: OSP-DIN;
+            &.add {
+                color: @prim;
+            }
+        }
+    }
+    .desc {
+        font-size: 13px;
+        line-height: 24px;
+        color: @text3;
+        margin-left: 44px;
+        margin-top: -2px;
+    }
+    .time {
+        font-size: 13px;
+        line-height: 24px;
+        color: @text3;
+        margin-left: 44px;
+    }
+    .status {
+        width: 61px;
+        height: 46px;
+        position: absolute;
+        top: 30px;
+        right: 78px;
+    }
+    .divider {
+        margin: 16px 0 0 44px;
+        height: 1px;
+        background: @bg;
+    }
+}
+</style>

src/pages/withdraw.vue

@@ -2,7 +2,7 @@
 {
     "disableScroll": true,
     "navigationBarTitleText": "提现",
-    "navigationBarBackgroundColor": "#CC9B52",
+    "navigationBarBackgroundColor": "#FF7F1F",
     "navigationBarTextStyle": "white",
     "backgroundColor": "#ffffff"
 }