钱包

package.json

@@ -39,6 +39,7 @@
     "@megalo/api": "latest",
     "@megalo/vhtml-plugin": "latest",
     "@vant/weapp": "^1.6.8",
+    "dayjs": "^1.10.4",
     "megalo": "latest",
     "octoparse": "^0.4.2",
     "style-resources-loader": "^1.4.1",

project.config.json

@@ -95,6 +95,12 @@
                     "name": "个人设置",
                     "pathName": "/pages/setting",
                     "scene": null
+                },
+                {
+                    "id": -1,
+                    "name": "我的钱包",
+                    "pathName": "/pages/wallet",
+                    "scene": null
                 }
             ]
         }

src/components/billInfo.vue

@@ -0,0 +1,61 @@
+<template>
+    <van-cell :class="{ pay: billType === 'pay' }" title="卡片收益" label="09-03 08:56" value="83.00">
+        <img
+            slot="icon"
+            class="cell-icon"
+            :src="`/native/svgs/${billType === 'pay' ? 'qianbao_icon_yueshouyi' : 'qianbao_icon_kapaishouyi'}.svg`"
+            alt=""
+        />
+    </van-cell>
+</template>
+
+<script>
+export default {
+    name: 'Bill',
+    props: {
+        Info: {
+            type: Object,
+            default: () => {
+                return {};
+            }
+        },
+        billType: {
+            type: String,
+            default: ''
+        }
+    }
+};
+</script>
+<style lang="less" scoped>
+/deep/ .van-cell {
+    align-items: center;
+    .cell-icon {
+        width: 36px;
+        height: 36px;
+        margin-right: 10px;
+    }
+    --cell-label-color: #969799;
+    --cell-value-color: #f42202;
+    --cell-label-margin-top: 5px;
+    --cell-vertical-padding: 14px;
+    --cell-horizontal-padding: 20px;
+    .van-cell__value {
+        font-weight: bold;
+        &::before {
+            content: '+';
+        }
+    }
+}
+
+/deep/ .pay {
+    .van-cell {
+        --cell-value-color: #000000;
+
+        .van-cell__value {
+            &::before {
+                content: '-';
+            }
+        }
+    }
+}
+</style>

src/components/newsInfo.vue

@@ -54,7 +54,7 @@ export default {
             position: absolute;
             left: 36px;
             top: -6px;
-            background: @danger;
+            background: @prim;
             border-radius: 9px;
         }
     }

src/main.js

@@ -40,7 +40,8 @@ export default {
             'pages/news',
             'pages/order',
             'pages/chat',
-            'pages/setting'
+            'pages/setting',
+            'pages/wallet'
         ],
         tabBar: {
             color: '#7E7E80',

src/native/svgs/qianbao_icon_kapaishouyi.svg

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="36px" height="36px" viewBox="0 0 36 36" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>qianbao_icon_kapaishouyi</title>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="我的钱包" transform="translate(-20.000000, -285.000000)">
+            <g id="qianbao_icon_kapaishouyi" transform="translate(20.000000, 285.000000)">
+                <circle id="椭圆形" fill="#FFAF48" cx="18" cy="18" r="18"></circle>
+                <g id="编组-8" transform="translate(9.000000, 8.000000)">
+                    <path d="M4.73913043,1.82608696 L17.173913,1.82608696 C18.2784825,1.82608696 19.173913,2.72151746 19.173913,3.82608696 L19.173913,14.4347826 C19.173913,15.5393521 18.2784825,16.4347826 17.173913,16.4347826 L4.73913043,16.4347826 C3.63456094,16.4347826 2.73913043,15.5393521 2.73913043,14.4347826 L2.73913043,3.82608696 C2.73913043,2.72151746 3.63456094,1.82608696 4.73913043,1.82608696 Z" id="矩形" fill="#FFFFFF" transform="translate(10.956522, 9.130435) rotate(12.000000) translate(-10.956522, -9.130435) "></path>
+                    <rect id="矩形" fill="#FFFFFF" x="0" y="4.56521739" width="17.3478261" height="14.6086957" rx="2"></rect>
+                    <path d="M5.47826087,14.6086957 C5.98252086,14.6086957 6.39130435,15.0174791 6.39130435,15.5217391 C6.39130435,15.9899805 6.03883287,16.3758978 5.58474103,16.4286399 L5.47826087,16.4347826 L2.73913043,16.4347826 C2.23487045,16.4347826 1.82608696,16.0259991 1.82608696,15.5217391 C1.82608696,15.0534977 2.17855843,14.6675804 2.63265028,14.6148384 L2.73913043,14.6086957 L5.47826087,14.6086957 Z" id="路径" fill="#FFAF48" fill-rule="nonzero"></path>
+                    <rect id="矩形" fill="#FFAF48" x="1.82608696" y="7.30434783" width="13.6956522" height="5.47826087" rx="1"></rect>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/native/svgs/qianbao_icon_yueshouyi.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="36px" height="35px" viewBox="0 0 36 35" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>qianbao_icon_yueshouyi</title>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="我的钱包" transform="translate(-20.000000, -356.000000)">
+            <g id="qianbao_icon_yueshouyi" transform="translate(20.000000, 356.000000)">
+                <ellipse id="椭圆形" fill="#31C8EC" cx="18" cy="17.5" rx="18" ry="17.5"></ellipse>
+                <path d="M27,14.5833333 L27,23.2777778 C27,24.3823473 26.1045695,25.2777778 25,25.2777778 L11,25.2777778 C9.8954305,25.2777778 9,24.3823473 9,23.2777778 L9,14.5833333 L27,14.5833333 Z M14.0277778,19.4444444 L12.9722222,19.4444444 C12.4352787,19.4444444 12,19.8797232 12,20.4166667 C12,20.9536102 12.4352787,21.3888889 12.9722222,21.3888889 L12.9722222,21.3888889 L14.0277778,21.3888889 C14.5647213,21.3888889 15,20.9536102 15,20.4166667 C15,19.8797232 14.5647213,19.4444444 14.0277778,19.4444444 L14.0277778,19.4444444 Z M16.0277778,16.5277778 L12.9722222,16.5277778 C12.4352787,16.5277778 12,16.9630565 12,17.5 C12,18.0369435 12.4352787,18.4722222 12.9722222,18.4722222 L12.9722222,18.4722222 L16.0277778,18.4722222 C16.5647213,18.4722222 17,18.0369435 17,17.5 C17,16.9630565 16.5647213,16.5277778 16.0277778,16.5277778 L16.0277778,16.5277778 Z M25,9.72222222 C26.1045695,9.72222222 27,10.6176527 27,11.7222222 L27,12.6388889 L9,12.6388889 L9,11.7222222 C9,10.6176527 9.8954305,9.72222222 11,9.72222222 L25,9.72222222 Z" id="形状结合" fill="#FFFFFF" fill-rule="nonzero"></path>
+            </g>
+        </g>
+    </g>
+</svg>

src/pages/wallet.vue

@@ -0,0 +1,113 @@
+<config>
+{
+    "navigationBarTitleText": "我的钱包",
+    "navigationBarBackgroundColor": "#FF6C00",
+    "navigationBarTextStyle": "white",
+    "backgroundColorTop":'#FF6C00',
+    "backgroundColorBottom":'#FFFFFF',
+    "usingComponents": {
+        "van-dropdown-menu": "/vant/dropdown-menu/index",
+        "van-dropdown-item": "/vant/dropdown-item/index"
+    }
+}
+</config>
+<template>
+    <div>
+        <div class="top">
+            <div class="left">
+                <div class="text1">我的余额</div>
+                <div class="text2">308.00</div>
+            </div>
+
+            <van-button type="default" size="small">
+                提现
+            </van-button>
+        </div>
+
+        <van-sticky :offset-top="0">
+            <div class="time-box">
+                <van-dropdown-menu>
+                    <van-dropdown-item :value="time" :options="option1" />
+                </van-dropdown-menu>
+                <div class="flex1"></div>
+                <span class="text">
+                    收入 ¥6832.50
+                </span>
+                <span class="text">
+                    提现 ¥5200.00
+                </span>
+            </div>
+        </van-sticky>
+
+        <div class="list">
+            <bill-info></bill-info>
+            <bill-info billType="pay"></bill-info>
+        </div>
+    </div>
+</template>
+
+<script>
+import dayjs from 'dayjs';
+import billInfo from '../components/billInfo.vue';
+export default {
+    components: { billInfo },
+    name: 'Wallet',
+    data() {
+        return {
+            time: 0,
+            option1: [{ text: '全部商品', value: 0 }, { text: '新款商品', value: 1 }, { text: '活动商品', value: 2 }]
+        };
+    }
+};
+</script>
+
+<style lang="less" scoped>
+.top {
+    .flex();
+    padding: 22px 40px;
+    background-color: @prim;
+    .left {
+        flex-grow: 1;
+
+        .text1 {
+            font-size: 14px;
+            font-weight: 400;
+            color: #f5f7fa;
+            line-height: 20px;
+        }
+
+        .text2 {
+            font-size: 36px;
+            font-family: OSP;
+            color: #ffffff;
+            line-height: 40px;
+        }
+    }
+
+    ._van-button {
+        align-self: flex-end;
+    }
+}
+
+.time-box {
+    .flex();
+    background-color: @bg;
+    padding: 20px;
+    .text {
+        font-size: 12px;
+        color: #646566;
+        line-height: 17px;
+        margin-left: 15px;
+    }
+}
+/deep/ .van-dropdown-menu {
+    width: 110px;
+    --dropdown-menu-option-active-color: @prim;
+    --dropdown-menu-title-active-text-color: @prim;
+    --dropdown-menu-height: 32px;
+    --dropdown-menu-title-padding: 0 10px;
+    --dropdown-menu-title-font-size: 13px;
+    border-radius: 4px;
+    overflow: hidden;
+}
+</style>

src/styles/common.less

@@ -1,4 +1,4 @@
-@prim: #ff7f1f;
+@prim: #ff6c00;
 @success: #07c160;
 @danger: #ff6c00;
 @warn: #ff976a;
@@ -12,6 +12,9 @@
 @border3: #dfe1e6;
 @border4: #f2f6fc;
 @bg: #f5f7fa;
+.flex1 {
+    flex-grow: 1;
+}
 .flex() {
     display: flex;
     align-items: center;

yarn.lock

@@ -3162,6 +3162,11 @@ dashdash@^1.12.0:
   dependencies:
     assert-plus "^1.0.0"
 
+dayjs@^1.10.4:
+  version "1.10.4"
+  resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.10.4.tgz#8e544a9b8683f61783f570980a8a80eaf54ab1e2"
+  integrity sha512-RI/Hh4kqRc1UKLOAf/T5zdMMX5DQIlDxwUe3wSyMMnEbGunnpENCdbUgM+dW7kXidZqCttBrmw7BhN4TMddkCw==
+
 de-indent@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/de-indent/-/de-indent-1.0.2.tgz#b2038e846dc33baa5796128d0804b455b8c1e21d"