收益中心

src/components/CommissionItem.vue

@@ -0,0 +1,99 @@
+<template>
+    <div class="commission-item">
+        <div class="head">
+            <ion-thumbnail class="avatar">
+                <img src="../assets/bg.png" />
+            </ion-thumbnail>
+            <div class="name">吴尧东</div>
+            <div class="num">佣金：+5.68</div>
+        </div>
+        <div class="order">
+            <ion-thumbnail class="cover">
+                <img src="../assets/bg.png" />
+            </ion-thumbnail>
+            <div class="info">
+                <div class="name">名称名称名称名称名称名称名</div>
+                <div class="price">
+                    <div class="value">{{ $t('balance.symbol') }}100</div>
+                    <div class="num">×1</div>
+                </div>
+            </div>
+        </div>
+        <div class="prop">订单编号：2022112052035464</div>
+        <div class="prop">下单时间：2022-11-20 12:10</div>
+    </div>
+</template>
+<script setup>
+import { ref, computed, onMounted, defineProps } from 'vue'
+const props = defineProps({
+    commission: {
+        type: Object,
+        default: () => {}
+    }
+})
+</script>
+<style lang="less" scoped>
+.commission-item {
+    margin: 0 16px 10px 16px;
+    background: var(--ion-color-step-0);
+    border-radius: 2px;
+    padding: 0 15px 12px 15px;
+    .head {
+        height: 44px;
+        border-bottom: 1px solid var(--ion-color-step-50);
+        .f();
+        .avatar {
+            width: 24px;
+            height: 24px;
+            --border-radius: 2px;
+        }
+        .name {
+            flex-grow: 1;
+            font-size: 14px;
+            margin-left: 6px;
+        }
+        .num {
+            font-size: 13px;
+            color: #ff7f1f;
+            font-weight: bold;
+        }
+    }
+    .order {
+        .f();
+        margin-top: 14px;
+        margin-bottom: 10px;
+        .cover {
+            width: 50px;
+            height: 50px;
+            --border-radius: 4px;
+        }
+        .info {
+            margin-left: 10px;
+            flex-grow: 1;
+            .name {
+                font-size: 14px;
+                line-height: 20px;
+            }
+            .price {
+                .f();
+                margin-top: 5px;
+                line-height: 17px;
+                font-size: 12px;
+                width: 100%;
+                .value {
+                    flex-grow: 1;
+                }
+                .num {
+                    color: var(--ion-color-step-350);
+                }
+            }
+        }
+    }
+    .prop {
+        font-size: 12px;
+        line-height: 17px;
+        color: var(--ion-color-step-600);
+        margin-top: 5px;
+    }
+}
+</style>

src/components/GoodsInfo.vue

@@ -1,109 +0,0 @@
-<template>
-    <div class="goods-info" @click="goDetail">
-        <van-image class="suk-item" width="100%" :src="img" fit="fill" />
-        <div class="title">
-            {{ info.name }}
-        </div>
-        <div class="bottom">
-            <div class="price">¥{{ info.currentPrice }}</div>
-            <van-button type="primary" round size="small" :disabled="info.status == 'SOLD_OUT'">{{
-                info.status == 'IN_STOCK' ? '购买' : '已售罄'
-            }}</van-button>
-        </div>
-    </div>
-</template>
-<script>
-import { mapState } from 'pinia';
-import { useUserStore } from '@/stores/user';
-export default {
-    name: 'goods',
-    props: {
-        info: {
-            type: Object,
-            default: () => {
-                return {};
-            }
-        }
-    },
-    data() {
-        return {};
-    },
-    computed: {
-        ...mapState(userUserStore, ['user']),
-        pic() {
-            return this.info.pic || [];
-        },
-        img() {
-            if (this.pic.length > 0) {
-                return this.pic[0];
-            } else {
-                return null;
-            }
-        }
-    },
-    methods: {
-        goDetail() {
-            if (this.info.type != 'demo') {
-                this.goNext('detail', { id: this.info.id });
-            }
-        }
-    }
-};
-</script>
-<style lang="less" scoped>
-.goods-info {
-    width: calc((100% - 24px) / 2);
-    background: rgba(255, 255, 255, 1);
-    border-radius: 2px;
-    margin-right: 12px;
-    overflow: hidden;
-    padding-bottom: 10px;
-}
-.suk-item {
-    height: calc((100vw - 24px - 14px) / 2);
-}
-@media screen and (min-width: 555px) {
-    .goods-info {
-        width: calc((100% - 36px) / 3);
-    }
-    .suk-item {
-        height: calc((100vw - 36px - 14px) / 3);
-    }
-}
-@media screen and (min-width: 735px) {
-    .goods-info {
-        width: calc((100% - 48px) / 4);
-    }
-    .suk-item {
-        height: calc((100vw - 48px - 14px) / 4);
-    }
-}
-.title {
-    font-size: 14px;
-    font-weight: bold;
-    color: rgba(51, 51, 51, 1);
-    line-height: 17px;
-    padding: 8px 8px 0;
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 2;
-    overflow: hidden;
-}
-
-.bottom {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 11px 8px 0;
-
-    .price {
-        font-size: 16px;
-        font-weight: bold;
-        color: rgba(255, 93, 93, 1);
-        line-height: 22px;
-    }
-}
-.van-button {
-    line-height: 0px;
-}
-</style>

src/locales/zh.json

@@ -8,10 +8,12 @@
     "common": {
         "cancel": "取消",
         "confirm": "确定",
+        "more": "更多",
         "pullRefresh": "下拉刷新",
         "loadFinish": "加载完成",
         "home": "首页",
-        "mine": "我的"
+        "mine": "我的",
+        "eula": "平台协议"
     },
     "order": {
         "id": "订单编号",
@@ -53,6 +55,7 @@
     },
     "balance": {
         "symbol": "¥",
+        "unit": "元",
         "balance": "账户余额",
         "chooseAmount": "选择金额",
         "inputCustomAmount": "请输入自定义金额",
@@ -90,5 +93,13 @@
     "delegate": {
         "title": "委托代卖"
     },
-    "ping-tai-xie-yi": "平台协议"
+    "distribution": {
+        "qrCode": "我的推广码",
+        "myInvitor": "我的推荐人",
+        "myProfit": "我的收益",
+        "profitDetails": "收益明细",
+        "teamNum": "团队人数",
+        "viewDetail": "查看明细",
+        "viewTeam": "查看团队"
+    }
 }

src/views/DistributionPage.vue

@@ -9,105 +9,65 @@
             </ion-toolbar>
         </ion-header>
         <ion-content>
-            <div class="distibution">
-                <div class="info">
-                    <div class="left">
-                        <div class="text1">{{ user.nickname }}</div>
-                        <div class="text2" v-if="commission.superior">推荐人：{{ commission.superior }}</div>
-                    </div>
-
-                    <div class="right">
-                        <img
-                            src="../../assets/fenxiao_icon_erweima.png"
-                            @click="goNext('extension')"
-                            class="qrcode-img"
-                            alt=""
-                        />
-                        <div class="qrcode-text">推广二维码</div>
+            <div class="head">
+                <div class="title">{{ $t('title.distribution') }}</div>
+                <div class="desc">{{ $t('distribution.myInvitor') }}:</div>
+                <div class="qr-wrapper">
+                    <img src="@/assets/icon_qr.png" class="qr" />
+                    <div class="desc">
+                        <span class="text">{{ $t('distribution.qrCode') }}</span>
+                        <ion-icon :icon="caretForwardCircleOutline"></ion-icon>
                     </div>
                 </div>
-
-                <div class="content">
-                    <div class="item">
-                        <div class="left">
-                            <div class="text1">
-                                <span>{{ commission.withdraw }}</span>
-                                <span>元</span>
+            </div>
+            <div class="stat">
+                <div class="bg">
+                    <div class="col">
+                        <div class="content">
+                            <div class="value profit">
+                                123<span class="unit">{{ $t('balance.unit') }}</span>
                             </div>
-                            <div class="text2">成功提现佣金</div>
+                            <div class="title">{{ $t('distribution.myProfit') }}</div>
+                            <div class="btn-detail">{{ $t('distribution.viewDetail') }}</div>
                         </div>
-
-                        <van-button
-                            class="button1"
-                            round
-                            @click="goNext('commissionRecord')"
-                            style="font-weight: bold; border: 0"
-                        >
-                            查看明细
-                        </van-button>
                     </div>
-
-                    <div class="item">
-                        <div class="left">
-                            <div class="text1">
-                                <span>{{ commission.available }}</span>
-                                <span>元</span>
-                            </div>
-                            <div class="text2">可提现佣金</div>
+                    <div class="divider"></div>
+                    <div class="col">
+                        <div class="content">
+                            <div class="value">123</div>
+                            <div class="title">{{ $t('distribution.teamNum') }}</div>
+                            <div class="btn-team">{{ $t('distribution.viewTeam') }}</div>
                         </div>
-
-                        <van-button type="primary" round @click="withdrawApply">立即提现 </van-button>
                     </div>
                 </div>
-
-                <div class="menu-list">
-                    <div class="menu-item" @click="goNext('commission')">
-                        <img src="../../assets/fenxiao_icon_yongjin.png" alt />
-                        <div class="right">
-                            <div class="text1">分销佣金</div>
-                            <div class="text2">{{ commission.total }} 元</div>
-                        </div>
-                    </div>
-
-                    <div class="menu-item" @click="goNext('distributionOrder')">
-                        <img src="../../assets/fenxiao_icon_dingdan.png" alt />
-                        <div class="right">
-                            <div class="text1">分销订单</div>
-                            <div class="text2">{{ commission.orderCount }} 笔</div>
-                        </div>
-                    </div>
+            </div>
+            <div class="list-header">
+                <div class="title">{{ $t('distribution.profitDetails') }}</div>
+                <div class="more">
+                    <div>{{ $t('common.more') }}</div>
+                    <ion-icon :icon="chevronForwardOutline"></ion-icon>
                 </div>
-
-                <van-cell-group :border="false" class="menu-list2">
-                    <van-cell
-                        title="我的下线"
-                        title-class="menu-title"
-                        @click="goNext('subordinate')"
-                        :value="commission.juniorCount + '人'"
-                        is-link
-                    >
-                        <img src="../../assets/fenxiao_list_icon_yeji.png" class="menu-img" slot="icon" alt />
-                    </van-cell>
-                    <van-cell title="业绩统计" title-class="menu-title" @click="goNext('statistics')" is-link>
-                        <img src="../../assets/fenxiao_list_icon_xiaxian.png" class="menu-img" slot="icon" alt />
-                    </van-cell>
-                    <!-- <van-cell title="佣金排名" title-class="menu-title" is-link>
-        <img src="../../assets/fenxiao_list_icon_paiming.png" class="menu-img" slot="icon" alt />
-      </van-cell> -->
-                </van-cell-group>
             </div>
+            <CommissionItem></CommissionItem>
         </ion-content>
     </ion-page>
 </template>
 <script>
 import { mapState } from 'pinia'
 import { useUserStore } from '@/stores/user'
+import { caretForwardCircleOutline, chevronForwardOutline } from 'ionicons/icons'
+import CommissionItem from '@/components/CommissionItem.vue'
 export default {
+    components: {
+        CommissionItem
+    },
     data() {
         return {
             commission: {},
             show: false,
-            url: ''
+            url: '',
+            caretForwardCircleOutline,
+            chevronForwardOutline
         }
     },
     computed: {
@@ -142,159 +102,132 @@ export default {
 }
 </script>
 <style lang="less" scoped>
-.distibution {
-    background: linear-gradient(180deg, rgba(255, 143, 0, 1) 0%, rgba(255, 143, 0, 0) 190px);
-    min-height: 100%;
-}
-
-.info {
-    display: flex;
-    justify-content: space-between;
-    padding: 22px 15px 20px;
-    align-items: center;
-
-    .right {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-    }
-    .qrcode-img {
-        width: 34px;
-        height: 34px;
+.head {
+    background: url(../assets/bg_distribution.png) no-repeat center;
+    background-size: cover;
+    height: 210px;
+    padding: 41px 16px 0 16px;
+    position: relative;
+    z-index: 1;
+    .title {
+        font-size: 24px;
+        font-weight: 600;
+        color: var(--ion-color-step-0);
+        line-height: 33px;
     }
-    .qrcode-text {
+    .desc {
+        margin-top: 10px;
+        color: rgba(var(--ion-color-dark-contrast-rgb), 0.6);
         font-size: 12px;
-        color: rgba(255, 255, 255, 1);
+        font-weight: 400;
         line-height: 17px;
-        margin-top: 4px;
     }
-
-    .left {
-        .text1 {
-            font-size: 21px;
-            font-weight: bold;
-            color: rgba(255, 255, 255, 1);
-            line-height: 29px;
+    .qr-wrapper {
+        position: absolute;
+        top: 24px;
+        right: 16px;
+        width: 100px;
+        height: 100px;
+        background: #333a4f;
+        border-radius: 4px;
+        .f-col();
+        justify-content: center;
+        align-items: center;
+        font-size: 12px;
+        .qr {
+            width: 48px;
+            height: 48px;
         }
-        .text2 {
-            font-size: 12px;
-            font-weight: bold;
-            color: rgba(255, 255, 255, 1);
-            line-height: 17px;
-            margin-top: 5px;
+        .desc {
+            color: #ffdb94;
+            .f();
+            margin-top: 9px;
+            line-height: 16px;
+            .text {
+                margin-right: 2px;
+            }
         }
     }
 }
-
-.content {
-    background: rgba(255, 255, 255, 1);
-    box-shadow: 0px 4px 8px 0px rgba(var(--ion-color-light-contrast-rgb), 0.04);
+.stat {
+    background: linear-gradient(315deg, #ffb075 0%, #ff7f1f 100%);
+    margin: -66px 16px 0 16px;
+    position: relative;
+    z-index: 2;
     border-radius: 4px;
-    margin: 0 15px;
-    padding: 0 30px;
-
-    .item {
-        height: 100px;
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        .left {
-            .text1 {
-                span {
+    overflow: hidden;
+    .bg {
+        background: url(../assets/bg_distribution_stat.png) no-repeat center;
+        background-size: cover;
+        height: 138px;
+        .f();
+        .col {
+            flex: 1 1 0;
+            .f;
+            justify-content: center;
+            .value {
+                font-size: 24px;
+                font-weight: bold;
+                color: var(--ion-color-step-0);
+                line-height: 28px;
+            }
+            .profit {
+                .f();
+                align-items: baseline;
+                .unit {
                     font-size: 12px;
-                    font-weight: bold;
-                    color: rgba(51, 51, 51, 1);
-                    line-height: 17px;
-                    &:first-child {
-                        font-size: 24px;
-                    }
                 }
             }
-
-            .text2 {
+            .title {
                 font-size: 12px;
-                color: rgba(128, 128, 128, 1);
+                color: rgba(var(--ion-color-dark-contrast-rgb), 0.6);
                 line-height: 17px;
-                margin-top: 5px;
             }
-        }
-
-        .van-button {
-            width: 88px;
-            height: 36px;
-            line-height: 36px;
-            font-size: 13px;
-        }
-
-        .button1 {
-            background: rgba(255, 143, 0, 0.12);
-            color: #ff8f00;
-            border-color: rgba(255, 143, 0, 0.12);
-        }
-
-        &:not(:last-child) {
-            border-bottom: 1px solid #f2f4f5;
-        }
-    }
-}
-
-.menu-list {
-    display: flex;
-    padding: 25px 15px 15px;
-    justify-content: space-between;
-    .menu-item {
-        display: flex;
-        align-items: center;
-        width: calc((100% - 15px) / 2);
-        height: 80px;
-        background: rgba(255, 255, 255, 1);
-        box-shadow: 0px 4px 8px 0px rgba(var(--ion-color-light-contrast-rgb), 0.04);
-        border-radius: 4px;
-        justify-content: center;
-        img {
-            width: 44px;
-            height: 44px;
-        }
-
-        .right {
-            margin-left: 10px;
-            .text1 {
-                font-size: 16px;
-                font-weight: bold;
-                color: rgba(51, 51, 51, 1);
-                line-height: 22px;
+            .btn-detail {
+                margin-top: 10px;
+                width: 80px;
+                height: 28px;
+                background: rgba(var(--ion-color-dark-contrast-rgb), 1);
+                border-radius: 4px;
+                color: #fe6e5b;
+                font-size: 12px;
+                .f();
+                justify-content: center;
             }
-            .text2 {
-                font-size: 14px;
-                color: rgba(142, 142, 147, 1);
-                line-height: 20px;
-                margin-top: 2px;
+            .btn-team {
+                margin-top: 10px;
+                width: 80px;
+                height: 28px;
+                background: rgba(var(--ion-color-dark-contrast-rgb), 0.1);
+                border: 1px solid var(--ion-color-step-0);
+                border-radius: 4px;
+                color: var(--ion-color-step-0);
+                font-size: 12px;
+                box-sizing: border-box;
+                .f();
+                justify-content: center;
             }
         }
+        .divider {
+            width: 1px;
+            height: 60px;
+            background-color: rgba(var(--ion-color-dark-contrast-rgb), 0.16);
+        }
     }
 }
-
-.menu-list2 {
-    .menu-img {
-        width: 24px;
-        height: 24px;
-        margin-right: 10px;
-    }
-
-    .menu-title {
+.list-header {
+    .f();
+    height: 58px;
+    padding: 0 16px;
+    .title {
+        flex-grow: 1;
+        color: var(--ion-color-step-400);
         font-size: 14px;
-        color: rgba(var(--ion-color-light-contrast-rgb), 1);
-    }
-
-    .menu-not-val {
-        font-size: 13px;
-        color: rgba(255, 143, 0, 1);
     }
-
-    .van-cell {
-        line-height: 40px;
-        display: flex;
-        align-items: center;
+    .more {
+        .f();
+        color: var(--ion-color-step-200);
+        font-size: 12px;
     }
 }
 </style>

src/views/HomePage.vue

@@ -120,7 +120,7 @@
             <div class="tools">
                 <div class="tool">
                     <img src="../assets/home_icon_pingtaixieyi.png" alt="" />
-                    <span>{{ $t('ping-tai-xie-yi') }}</span>
+                    <span>{{ $t('common.eula') }}</span>
                 </div>
                 <div class="tool">
                     <img src="../assets/home_icon_liucheng.png" alt="" />