feat(我的)

App.vue

@@ -4,6 +4,7 @@ import { peachInit } from './peach'
 
 onLaunch(() => {
     // 隐藏原生导航栏 使用自定义底部导航
+    uni.hideTabBar()
     peachInit()
 })
 

pages.json

@@ -8,6 +8,15 @@
     },
     "pages": [
         //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
+        {
+            "path": "pages/index/my",
+            "style": {
+                "navigationBarTitleText": "我的"
+            },
+            "meta": {
+                "auth": false
+            }
+        },
         {
             "path": "pages/index/index",
             "style": {
@@ -27,9 +36,9 @@
             }
         },
         {
-            "path": "pages/index/category",
+            "path": "pages/index/product",
             "style": {
-                "navigationBarTitleText": "uni-app"
+                "navigationBarTitleText": "产品"
             },
             "meta": {
                 "auth": false
@@ -45,6 +54,23 @@
             }
         }
     ],
+    "tabBar": {
+        "list": [
+            {
+                "pagePath": "pages/index/index"
+            },
+            {
+                "pagePath": "pages/index/product"
+            },
+            {
+                "pagePath": "pages/index/icons"
+            },
+            {
+                "pagePath": "pages/index/my"
+            }
+        ]
+    },
+
     "globalStyle": {
         "navigationBarTextStyle": "black",
         "navigationBarTitleText": "uni-app",

pages/index/index.vue

@@ -1,9 +1,8 @@
 <template>
     <pb-layout navbar="inner" tabbar="/pages/index/index" :bgStyle="bgStyle">
-    <view :style="[{ paddingTop: peach.$platform.navbar + 'px' }]"></view>
+        <view :style="[{ paddingTop: peach.$platform.navBar + 'px' }]"></view>
         <view class="dashboard-module ss-p-x-30">
             <view class="merchant-info flex align-center">
-
                 <image class="logo" :src="state.merchantInfo.logo" mode="aspectFill"></image>
 
                 <view class="detail flex flex-column justify-center gap-10">
@@ -12,16 +11,27 @@
                 </view>
             </view>
 
-      <view class="statistic">
+            <view class="statistic ss-m-t-24">
-        <view class="title ss=font-24">
+                <view class="title ss-font-24 ss-m-b-20">
-          {{ `今日收款金额（成功收款${state.statistic.total}）笔` }}
+                    {{ `今日收款金额（成功收款${state.statistic.total}笔）` }}
                 </view>
-        <view class="income">
+                <view class="income flex justify-between align-center">
-          <view class="left">
+                    <view class="left flex align-center">
-            <view class="unit">￥</view>
+                        <view class="unit self-start">￥</view>
-            <view class="sincome">{{ state.statistic.income }}</view>
+                        <view class="sincome ss-font-60">{{ state.statistic.income }}</view>
+                    </view>
+                    <button class="right-btn ss-reset-button">查看详情</button>
+                </view>
+            </view>
+
+            <view class="more ss-m-t-70">
+                <view class="title ss-m-b-30">基础数据</view>
+                <view class="items">
+                    <view class="item" v-for="item in state.more">
+                        <view class="label">{{ item.name }}</view>
+                        <view class="value">{{ item.value }}</view>
+                        <view class="last">昨日 {{ item.last }}</view>
                     </view>
-          <button class="right">查看详情</button>
                 </view>
             </view>
         </view>
@@ -31,12 +41,11 @@
 <script setup>
 import { ref } from 'vue'
 import peach from '@/peach'
-
+import bg from '@/static/bg-page.png'
-console.log()
 
 const bgStyle = {
-  backgroundImage:
+    backgroundImage: bg,
-    'http://101.43.181.163:9001/mall-backend/24dd085ca57fbfaa27c3e16788237b1d7a95c854c01b5e3e219aad6709bbb748.jpg',
+    imageType: 'local',
     backgroundColor: '#fff',
     description: '',
 }
@@ -48,8 +57,36 @@ const state = ref({
         description: '测试商家描述',
     },
     statistic: {
-    total: 100
+        total: 100,
-  }
+        income: 2222222222,
+    },
+    more: [
+        {
+            name: '支付金额',
+            value: 10000000,
+            last: 100000000,
+        },
+        {
+            name: '访客数',
+            value: 100000,
+            last: 100000,
+        },
+        {
+            name: '订单数',
+            value: 100000,
+            last: 10000,
+        },
+        {
+            name: '客单价',
+            value: 10000,
+            last: 100,
+        },
+        {
+            name: '支付买家数',
+            value: 100,
+            last: 100,
+        },
+    ],
 })
 </script>
 
@@ -61,13 +98,77 @@ const state = ref({
             height: 80rpx;
             margin-right: 20rpx;
         }
+        .detail {
+            .name {
+                color: #fff;
+            }
+            .description {
+                color: #fff;
+                opacity: 0.4;
+            }
+        }
     }
 
     .statistic {
-    height: 284rpx;
+        height: 200rpx;
         background-color: #fffefe;
+        opacity: 0.9;
         border-radius: 26rpx;
         padding: 31rpx 40rpx;
+        .title {
+            font-weight: 500;
+            color: var(--ui-TC);
+        }
+        .income {
+            .left {
+                font-weight: 600;
+                flex: 1;
+                color: var(--ui-BG-Main);
+                .unit {
+                    position: relative;
+                    top: 4px;
+                }
+            }
+            .right-btn {
+                width: 161rpx;
+                height: 63rpx;
+                background-color: var(--ui-BG-Main);
+                color: #fff;
+            }
+        }
+    }
+
+    .more {
+        .title {
+            font-weight: 600;
+        }
+        .items {
+            display: grid;
+            grid-template-columns: repeat(3, 1fr);
+            gap: 30rpx 30rpx;
+            .item {
+                background: linear-gradient(90deg, #ffebeb 0%, #ffffff 100%);
+                border-radius: 18rpx;
+                padding: 19rpx 32rpx;
+                display: flex;
+                flex-direction: column;
+                justify-content: space-between;
+                height: 170rpx;
+                .name {
+                    font-weight: 600;
+                    color: var(--ui-TC);
+                }
+                .value {
+                    font-weight: 600;
+                    font-size: 31rpx;
+                    color: var(--ui-TC);
+                }
+                .last {
+                    font-weight: 400;
+                    color: var(--ui-TC-2);
+                }
+            }
+        }
     }
 }
 </style>

pages/index/my.vue

@@ -0,0 +1,181 @@
+<template>
+    <pb-layout navbar="inner" tabbar="/pages/index/my" :bgStyle="bgStyle">
+        <view :style="[{ paddingTop: peach.$platform.navBar + 'px' }]"></view>
+        <view class="my-module ss-p-x-30">
+            <view class="user-info flex align-center">
+                <image class="avatar" :src="state.userInfo.avatar" mode="aspectFill"></image>
+
+                <view class="detail flex flex-column justify-center gap-10">
+                    <view class="name ss-font-26">{{ state.userInfo.name }}</view>
+                    <view class="description ss-font-26">{{ state.userInfo.description }}</view>
+                </view>
+            </view>
+
+            <view class="statistic ss-m-t-24">
+                <view class="title ss-font-24 ss-m-b-20"> 账户余额 </view>
+                <view class="remain flex justify-between align-center">
+                    <view class="left flex align-center">
+                        <view class="unit self-start">￥</view>
+                        <view class="sremain ss-font-60">{{ state.statistic.remain }}</view>
+                    </view>
+                    <button class="right-btn ss-reset-button">查看详情</button>
+                </view>
+                <view class="cent ss-m-t-20"> 总获取积分{{ state.statistic.cent }} </view>
+            </view>
+
+            <view class="menu ss-m-t-70">
+                <view class="title ss-m-b-30">我的服务</view>
+                <view class="items">
+                    <view class="item" v-for="item in state.menus">
+                        <image class="icon" :src="item.icon" mode="aspectFill"></image>
+                        <view class="label">{{ item.name }}</view>
+                    </view>
+                </view>
+            </view>
+        </view>
+        <view class="ss-p-x-30 bottom">
+            <button class="ss-reset-button login-btn-start" @tap="smsLoginSubmit">退出登录</button>
+        </view>
+    </pb-layout>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import peach from '@/peach'
+
+const bgStyle = {
+    backgroundImage: '/static/bg-page.png',
+    imageType: 'local',
+    backgroundColor: '#fff',
+    description: '',
+}
+
+const state = ref({
+    userInfo: {
+        name: 'Ankkaya',
+        avatar: '/static/logo.png',
+        description: '测试商家描述',
+    },
+    statistic: {
+        remain: 2222222222,
+        cent: 10000,
+    },
+    menus: [
+        {
+            name: '余额提现',
+            icon: '/static/withdraw.png',
+            path: '',
+        },
+        {
+            name: '购买积分',
+            icon: '/static/buycent.png',
+            path: '',
+        },
+        {
+            name: '分发积分',
+            icon: '/static/dispensecent.png',
+            path: '',
+        },
+        {
+            name: '提现规则',
+            icon: '/static/rule.png',
+            path: '',
+        },
+    ],
+})
+</script>
+
+<style lang="scss" scoped>
+.my-module {
+    .user-info {
+        .avatar {
+            width: 80rpx;
+            height: 80rpx;
+            margin-right: 20rpx;
+        }
+        .detail {
+            .name {
+                color: #fff;
+            }
+            .description {
+                color: #fff;
+                opacity: 0.4;
+            }
+        }
+    }
+
+    .statistic {
+        height: 200rpx;
+        background-color: #fffefe;
+        opacity: 0.9;
+        border-radius: 26rpx;
+        padding: 31rpx 40rpx;
+        .title {
+            font-weight: 500;
+            color: var(--ui-TC);
+            font-size: 24rpx;
+        }
+        .remain {
+            .left {
+                font-weight: 600;
+                flex: 1;
+                color: var(--ui-BG-Main);
+                .unit {
+                    position: relative;
+                    top: 4px;
+                }
+            }
+            .right-btn {
+                width: 161rpx;
+                height: 63rpx;
+                background-color: var(--ui-BG-Main);
+                color: #fff;
+            }
+        }
+        .cent {
+            color: var(--ui-TC-2);
+            font-size: 24rpx;
+        }
+    }
+
+    .menu {
+        .title {
+            font-weight: 600;
+        }
+        .items {
+            display: grid;
+            grid-template-columns: repeat(4, 1fr);
+            gap: 30rpx 30rpx;
+            .item {
+                display: flex;
+                flex-direction: column;
+                justify-content: space-between;
+                align-items: center;
+                gap: 23rpx;
+                .icon {
+                    width: 94rpx;
+                    height: 94rpx;
+                }
+                .label {
+                    font-size: 22rpx;
+                    color: #0c0c0cff;
+                }
+            }
+        }
+    }
+}
+.bottom {
+    position: absolute;
+    bottom: 70px;
+    width: calc(100% - 60rpx);
+    .login-btn-start {
+        height: 82rpx;
+        line-height: normal;
+        background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
+        border-radius: 28rpx;
+        font-size: 26rpx;
+        font-weight: 500;
+        color: #fff;
+    }
+}
+</style>

peach/store/app.js

@@ -1,12 +1,12 @@
-import { ref } from "vue";
+import { ref } from 'vue'
-import { defineStore } from "pinia";
+import { defineStore } from 'pinia'
-import $platform from "@/peach/platform";
+import $platform from '@/peach/platform'
-import $router from "@/peach/router";
+import $router from '@/peach/router'
-import user from "./user";
+import user from './user'
-import useSysStore from "./sys";
+import useSysStore from './sys'
 
 const useAppStore = defineStore(
-  "app",
+    'app',
     () => {
         /**
          * @description 应用信息
@@ -19,14 +19,14 @@ const useAppStore = defineStore(
          * @param string filesystem 文件系统
          */
         const info = ref({
-      name: "",
+            name: '',
-      logo: "",
+            logo: '',
-      version: "",
+            version: '',
-      copyright: "",
+            copyright: '',
-      copytime: "",
+            copytime: '',
-      cdnurl: "",
+            cdnurl: '',
-      filesystem: "",
+            filesystem: '',
-    });
+        })
 
         /**
          * @description 平台信息
@@ -41,12 +41,12 @@ const useAppStore = defineStore(
                 methods: [],
                 forwardInfo: {},
                 posterInfo: {},
-        linkAddress: "",
+                linkAddress: '',
             },
             bindMobile: 0,
-    });
+        })
 
-    const chat = ref({});
+        const chat = ref({})
 
         /**
          * @description 模板信息
@@ -58,50 +58,46 @@ const useAppStore = defineStore(
                 tabbar: {
                     items: [
                         {
-              activeIconUrl:
+                            activeIconUrl: 'http://mall.yudao.iocoder.cn/static/images/1-002.png',
-                "http://mall.yudao.iocoder.cn/static/images/1-002.png",
+                            iconUrl: 'http://mall.yudao.iocoder.cn/static/images/1-001.png',
-              iconUrl: "http://mall.yudao.iocoder.cn/static/images/1-001.png",
+                            text: '首页',
-              text: "首页",
+                            url: '/pages/index/index',
-              url: "/pages/index/index",
                         },
                         {
-              activeIconUrl:
+                            activeIconUrl: 'http://mall.yudao.iocoder.cn/static/images/2-002.png',
-                "http://mall.yudao.iocoder.cn/static/images/2-002.png",
+                            iconUrl: 'http://mall.yudao.iocoder.cn/static/images/2-001.png',
-              iconUrl: "http://mall.yudao.iocoder.cn/static/images/2-001.png",
+                            text: '产品',
-              text: "分类",
+                            url: '/pages/index/product',
-              url: "/pages/index/category?id=3",
                         },
                         {
-              activeIconUrl:
+                            activeIconUrl: 'http://mall.yudao.iocoder.cn/static/images/3-002.png',
-                "http://mall.yudao.iocoder.cn/static/images/3-002.png",
+                            iconUrl: 'http://mall.yudao.iocoder.cn/static/images/3-001.png',
-              iconUrl: "http://mall.yudao.iocoder.cn/static/images/3-001.png",
+                            text: '购物车',
-              text: "购物车",
+                            url: '/pages/index/icons',
-              url: "/pages/index/icons",
                         },
                         {
-              activeIconUrl:
+                            activeIconUrl: 'http://mall.yudao.iocoder.cn/static/images/4-002.png',
-                "http://mall.yudao.iocoder.cn/static/images/4-002.png",
+                            iconUrl: 'http://mall.yudao.iocoder.cn/static/images/4-001.png',
-              iconUrl: "http://mall.yudao.iocoder.cn/static/images/4-001.png",
+                            text: '我的',
-              text: "我的",
+                            url: '/pages/index/my',
-              url: "/pages/index/user",
                         },
                     ],
                     style: {
-            activeColor: "#fc4141",
+                        activeColor: '#fc4141',
-            bgColor: "#fff",
+                        bgColor: '#fff',
-            bgType: "color",
+                        bgType: 'color',
-            color: "#282828",
+                        color: '#282828',
                     },
-          theme: "red",
+                    theme: 'red',
                 },
             },
-    });
+        })
 
         // 全局分享信息
-    const shareInfo = ref({});
+        const shareInfo = ref({})
 
         // 小程序发货信息管理 0: 没有 1：有
-    const hasWechatTradeManaged = ref(0);
+        const hasWechatTradeManaged = ref(0)
 
         /**
          * @author Ankkaya
@@ -111,52 +107,52 @@ const useAppStore = defineStore(
          */
         async function init() {
             // 检查网络
-      const networkStatus = await $platform.checkNetwork();
+            const networkStatus = await $platform.checkNetwork()
             if (!networkStatus) {
-        $router.error("NetworkError");
+                $router.error('NetworkError')
             }
 
             if (true) {
                 this.info = {
-          name: "🍑商城",
+                    name: '🍑商城',
-          logo: "https://static.iocoder.cn/ruoyi-vue-pro-logo.png",
+                    logo: 'https://static.iocoder.cn/ruoyi-vue-pro-logo.png',
-          version: "1.0.0",
+                    version: '1.0.0',
-          copyright: "全部开源，个人与企业可 100% 免费使用",
+                    copyright: '全部开源，个人与企业可 100% 免费使用',
-          copytime: "Copyright© 2018-2024",
+                    copytime: 'Copyright© 2018-2024',
 
-          cdnurl: "https://file.sheepjs.com", // 云存储域名
+                    cdnurl: 'https://file.sheepjs.com', // 云存储域名
-          filesystem: "qcloud", // 云存储平台
+                    filesystem: 'qcloud', // 云存储平台
-        };
+                }
                 this.platform = {
                     share: {
-            methods: ["poster", "link"],
+                        methods: ['poster', 'link'],
-            linkAddress: "https://shopro.sheepjs.com/#/",
+                        linkAddress: 'https://shopro.sheepjs.com/#/',
                         posterInfo: {
-              user_bg: "/static/img/shop/config/user-poster-bg.png",
+                            user_bg: '/static/img/shop/config/user-poster-bg.png',
-              goods_bg: "/static/img/shop/config/goods-poster-bg.png",
+                            goods_bg: '/static/img/shop/config/goods-poster-bg.png',
-              groupon_bg: "/static/img/shop/config/groupon-poster-bg.png",
+                            groupon_bg: '/static/img/shop/config/groupon-poster-bg.png',
                         },
                     },
                     bind_mobile: 0,
-        };
+                }
                 this.chat = {
-          chat_domain: "https://api.shopro.sheepjs.com/chat",
+                    chat_domain: 'https://api.shopro.sheepjs.com/chat',
-          room_id: "admin",
+                    room_id: 'admin',
-        };
+                }
-        this.has_wechat_trade_managed = 0;
+                this.has_wechat_trade_managed = 0
 
                 // 加载主题
-        const sysStore = useSysStore();
+                const sysStore = useSysStore()
-        sysStore.setTheme();
+                sysStore.setTheme()
 
                 // 模拟用户登录
-        const userStore = user();
+                const userStore = user()
                 if (userStore.isLogin) {
-          userStore.loginAfter();
+                    userStore.loginAfter()
                 }
-        return Promise.resolve(true);
+                return Promise.resolve(true)
             } else {
-        $router.error("InitError", res.msg || "加载失败");
+                $router.error('InitError', res.msg || '加载失败')
             }
         }
 
@@ -168,18 +164,18 @@ const useAppStore = defineStore(
             shareInfo,
             hasWechatTradeManaged,
             init,
-    };
+        }
     },
     {
         persist: {
             enabled: true,
             strategies: [
                 {
-          key: "app-store",
+                    key: 'app-store',
                 },
             ],
         },
     }
-);
+)
 
-export default useAppStore;
+export default useAppStore

peach/ui/pb-layout/pb-layout.vue

@@ -136,8 +136,9 @@ const navbarMode = computed(() => {
 const bgMain = computed(() => {
     if (navbarMode.value === 'inner') {
         return {
-            background: `${props.bgStyle.backgroundColor} url(${peach.$url.cdn(
+            background: `${props.bgStyle.backgroundColor} url(${peach.$url.static(
-                props.bgStyle.backgroundImage
+                props.bgStyle.backgroundImage,
+                props.bgStyle.imageType
             )}) no-repeat top center / 100% auto`,
         }
     }
@@ -148,8 +149,9 @@ const bgMain = computed(() => {
 const bgBody = computed(() => {
     if (navbarMode.value === 'normal') {
         return {
-            background: `${props.bgStyle.backgroundColor} url(${peach.$url.cdn(
+            background: `${props.bgStyle.backgroundColor} url(${peach.$url.static(
-                props.bgStyle.backgroundImage
+                props.bgStyle.backgroundImage,
+                props.bgStyle.imageType
             )}) no-repeat top center / 100% auto`,
         }
     }