个人中心页面完善

src/pages.json

@@ -42,16 +42,39 @@
                 "navigationStyle": "custom"
             }
         },
+
         {
             "path": "pages/message/index",
             "style": {
                 "navigationBarTitleText": "消息"
             }
         },
+        // 个人中心
         {
             "path": "pages/my/index",
             "style": {
-                "navigationBarTitleText": "我的"
+                "navigationStyle": "custom"
+            }
+        },
+        // 个人中心 -- 设置
+        {
+            "path": "pages/my-setting/index",
+            "style": {
+                "navigationStyle": "custom"
+            }
+        },
+        // 个人中心 -- 账户与安全
+        {
+            "path": "pages/my-account/index",
+            "style": {
+                "navigationStyle": "custom"
+            }
+        },
+        // 个人中心 -- 账户与安全
+        {
+            "path": "pages/my-info/index",
+            "style": {
+                "navigationStyle": "custom"
             }
         },
         // 装备详情
@@ -68,6 +91,13 @@
                 "navigationStyle": "custom"
             }
         },
+        // 订单列表详情
+        {
+            "path": "pages/order-details/index",
+            "style": {
+                "navigationStyle": "custom"
+            }
+        },
         // 装备列表大厅
         {
             "path": "pages/goods-list/index",

src/pages/index/index.vue

@@ -129,10 +129,14 @@ onLoad(() => {
 
 onShow(() => {
     activeUser.value = memberStore.userType
+
+    if (activeUser.value === 2) {
         uni.setTabBarItem({
             index: 2,
             visible: true,
         })
+    }
+
     getOrderStatusCountData()
 })
 </script>

src/pages/my-account/index.vue

@@ -0,0 +1,44 @@
+<template>
+    <!-- 我的--账户与安全 -->
+    <view class="h5-container my-setting">
+        <view style="padding: 15px">
+            <van-icon name="arrow-left" @click="onClickLeft" />
+            <text style="color: #000"> 账户与安全 </text>
+        </view>
+
+        <van-cell-group inset style="flex: 1">
+            <van-cell title="用户名" :value="userName" />
+            <van-cell title="登录账户" :value="userAccount" />
+            <van-cell is-link title="修改密码" />
+        </van-cell-group>
+    </view>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { useMemberStore } from '@/stores/index.js'
+import { onLoad } from '@dcloudio/uni-app'
+const memberStore = useMemberStore()
+const userName = ref('')
+const userAccount = ref('')
+const onClickLeft = () => {
+    uni.navigateBack()
+}
+onLoad(() => {
+    userName.value = memberStore.userInfo.nickName
+    userAccount.value = memberStore.userInfo.userName
+})
+</script>
+
+<style lang="scss" scoped>
+.my-setting {
+    padding: 10px 0;
+    color: #333;
+    box-sizing: border-box;
+    background: linear-gradient(to bottom, #c0e9ce, #e4f2f2, #f9f9f9);
+}
+
+:deep(.van-cell-group--inset) {
+    padding: 15px 0;
+}
+</style>

src/pages/my-info/index.vue

@@ -0,0 +1,60 @@
+<template>
+    <!-- 我的--个人资料-->
+    <view class="h5-container my-setting">
+        <view style="padding: 15px">
+            <van-icon name="arrow-left" @click="onClickLeft" />
+            <text style="color: #000"> 个人资料 </text>
+        </view>
+
+        <van-cell-group inset style="flex: 1">
+            <van-cell title="头像">
+                <template #right-icon>
+                    <van-image
+                        round
+                        fit="cover"
+                        width="20px"
+                        height="20px"
+                        src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
+                    />
+                </template>
+            </van-cell>
+            <van-cell title="用户名" :value="userName" />
+            <van-cell title="登录账户" :value="userAccount" />
+            <van-cell title="关联企业" :value="userCompany" />
+            <van-cell title="联系电话" :value="userPhone" />
+        </van-cell-group>
+    </view>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { useMemberStore } from '@/stores/index.js'
+import { onLoad } from '@dcloudio/uni-app'
+const memberStore = useMemberStore()
+const userName = ref('')
+const userAccount = ref('')
+const userCompany = ref('')
+const userPhone = ref('')
+const onClickLeft = () => {
+    uni.navigateBack()
+}
+onLoad(() => {
+    userName.value = memberStore.userInfo.nickName
+    userAccount.value = memberStore.userInfo.userName
+    userCompany.value = memberStore.userInfo.companyId
+    userPhone.value = memberStore.userInfo.phonenumber
+})
+</script>
+
+<style lang="scss" scoped>
+.my-setting {
+    padding: 10px 0;
+    color: #333;
+    box-sizing: border-box;
+    background: linear-gradient(to bottom, #c0e9ce, #e4f2f2, #f9f9f9);
+}
+
+:deep(.van-cell-group--inset) {
+    padding: 15px 0;
+}
+</style>

src/pages/my-setting/index.vue

@@ -0,0 +1,56 @@
+<template>
+    <!-- 我的--设置 -->
+    <view class="h5-container my-setting">
+        <view style="padding: 15px">
+            <van-icon name="arrow-left" @click="onClickLeft" />
+            <text style="color: #000"> 设置 </text>
+        </view>
+
+        <van-cell-group inset style="flex: 1">
+            <van-cell is-link title="个人资料" @click="onJumpToMyInfo" />
+            <van-cell is-link title="账户与安全" @click="onJumpToMyAccount" />
+            <van-cell is-link title="退出登录" @click="onLogOut" />
+        </van-cell-group>
+    </view>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+const onClickLeft = () => {
+    uni.navigateBack()
+}
+const onJumpToMyInfo = () => {
+    uni.navigateTo({
+        url: '/pages/my-info/index',
+    })
+}
+const onJumpToMyAccount = () => {
+    uni.navigateTo({
+        url: '/pages/my-account/index',
+    })
+}
+const onLogOut = () => {
+    showConfirmDialog({
+        title: '温馨提示',
+        message: '是否确定退出当前登录',
+    })
+        .then(async () => {
+            // 清除缓存
+            uni.navigateTo({ url: '/pages/login/index' })
+        })
+        .catch(() => {})
+}
+</script>
+
+<style lang="scss" scoped>
+.my-setting {
+    padding: 10px 0;
+    color: #333;
+    box-sizing: border-box;
+    background: linear-gradient(to bottom, #c0e9ce, #e4f2f2, #f9f9f9);
+}
+
+:deep(.van-cell-group--inset) {
+    padding: 15px 0;
+}
+</style>

src/pages/my/index.vue

@@ -1,6 +1,12 @@
 <template>
     <!-- 我的 -->
-    <view class="user-info flex-row-start">
+    <view class="h5-container">
+        <view class="user-info">
+            <view style="text-align: right; padding: 15px 15px 0 0">
+                <van-icon name="setting" size="22" @click="onJumpToMySetting" />
+            </view>
+
+            <view class="header-user">
                 <van-image
                     round
                     fit="cover"
@@ -9,18 +15,35 @@
                     src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
                 />
 
-        <view class="right-info">
+                <view class="right-name">
-            <view class="pd-t-b-4">
+                    <view class="name-box">
-                {{ memberStore.userInfo.userName }}
+                        <text class="name"> 李思思 </text>
+                        <text class="company"> 安徽博诺斯 </text>
                     </view>
-            <view class="pd-t-b-4"> 18640300 </view>
+
-            <view class="pd-t-b-4"> 安徽****公司 </view>
+                    <view> 15656453456 </view>
                 </view>
             </view>
-    <view class="van-hairline--top">
+
-        <van-button type="primary" class="primary-lease" size="small" @click="onLogout">
+            <van-cell-group inset>
-            退出登录
+                <h2>我的订单</h2>
-        </van-button>
+
+                <van-grid clickable :column-num="2" :gutter="10">
+                    <van-grid-item>
+                        <navigator url="/pages/order-details/index">
+                            <van-icon name="cart" />
+                            <text>出租订单</text>
+                        </navigator>
+                    </van-grid-item>
+                    <van-grid-item>
+                        <navigator url="/pages/order-details/index">
+                            <van-icon name="cart" />
+                            <text>租赁订单</text>
+                        </navigator>
+                    </van-grid-item>
+                </van-grid>
+            </van-cell-group>
+        </view>
     </view>
 </template>
 
@@ -30,17 +53,80 @@ const memberStore = useMemberStore()
 const onLogout = () => {
     uni.navigateTo({ url: '/pages/login/index' })
 }
+
+const onJumpToMySetting = () => {
+    uni.navigateTo({ url: '/pages/my-setting/index' })
+}
 </script>
 
 <style lang="scss" scoped>
 .user-info {
-    height: 120px;
+    flex: 1;
-    padding: 0 30px;
+    padding: 10px;
-    color: #fff;
+    color: #333;
-    background-color: #00a288;
+    background: linear-gradient(to bottom, #c0e9ce, #e4f2f2, #f9f9f9);
 
-    .right-info {
+    .header-user {
+        display: flex;
+        align-items: center;
+        padding: 20px;
+
+        .right-name {
+            padding-left: 15px;
+            font-size: 14px;
+
+            .name-box {
+                padding: 10px 0;
+                display: flex;
+                align-items: center;
+            }
+
+            .name {
+                font-size: 18px;
+                font-weight: bold;
+            }
+
+            .company {
+                padding: 2px 8px;
                 margin-left: 10px;
+                background-color: #c4fbf5;
+                font-size: 13px;
+                color: #32b1a2;
+                border-radius: 4px;
+            }
+        }
+    }
+}
+
+:deep(.van-cell-group--inset) {
+    margin: 0;
+    padding: 15px 0;
+
+    h2 {
+        padding: 0 15px;
+        font-size: 16px;
+    }
+}
+
+.van-grid {
+    margin-top: 15px;
+
+    :deep(.van-grid-item__content) {
+        padding: 0;
+    }
+
+    navigator {
+        width: 100%;
+        padding: 30px 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background-color: #e8f2ef;
+        color: #4a4949;
+
+        text {
+            margin-left: 8px;
+        }
     }
 }
 

src/pages/order-details/index.vue

@@ -0,0 +1,43 @@
+<template>
+    <!-- 订单详情-->
+    <view class="h5-container order-details">
+        <view style="padding: 15px">
+            <van-icon name="arrow-left" @click="onClickLeft" />
+            <text style="color: #000"> 我的订单 </text>
+        </view>
+
+        <van-tabs v-model:active="activeTabs" swipeable color="#00a288" background="#f0f7f7">
+            <van-tab v-for="(t, i) in tabList" :title="t.tab_name"> </van-tab>
+        </van-tabs>
+    </view>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { useMemberStore } from '@/stores/index.js'
+import { onLoad } from '@dcloudio/uni-app'
+const activeTabs = ref(0)
+const tabList = ref([
+    { tab_name: '全部' },
+    { tab_name: '待出库' },
+    { tab_name: '带收货' },
+    { tab_name: '租赁中' },
+    { tab_name: '已退租' },
+    { tab_name: '已完成' },
+    { tab_name: '已取消' },
+])
+
+const onClickLeft = () => {
+    uni.navigateBack()
+}
+onLoad(() => {})
+</script>
+
+<style lang="scss" scoped>
+.order-details {
+    padding: 10px 0;
+    color: #333;
+    box-sizing: border-box;
+    background: linear-gradient(to bottom, #c0e9ce, #e4f2f2, #f9f9f9);
+}
+</style>