个人中心页面完善
This commit is contained in:
BianLzhaoMin
parent
0f1d2fb3d8
commit
def31db441
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -129,10 +129,14 @@ onLoad(() => {
|
|||
|
||||
onShow(() => {
|
||||
activeUser.value = memberStore.userType
|
||||
uni.setTabBarItem({
|
||||
index: 2,
|
||||
visible: true,
|
||||
})
|
||||
|
||||
if (activeUser.value === 2) {
|
||||
uni.setTabBarItem({
|
||||
index: 2,
|
||||
visible: true,
|
||||
})
|
||||
}
|
||||
|
||||
getOrderStatusCountData()
|
||||
})
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -1,27 +1,50 @@
|
|||
<template>
|
||||
<!-- 我的 -->
|
||||
<view class="user-info flex-row-start">
|
||||
<van-image
|
||||
round
|
||||
fit="cover"
|
||||
width="68px"
|
||||
height="68px"
|
||||
src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
|
||||
/>
|
||||
|
||||
<view class="right-info">
|
||||
<view class="pd-t-b-4">
|
||||
{{ memberStore.userInfo.userName }}
|
||||
<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="pd-t-b-4"> 18640300 </view>
|
||||
<view class="pd-t-b-4"> 安徽****公司 </view>
|
||||
|
||||
<view class="header-user">
|
||||
<van-image
|
||||
round
|
||||
fit="cover"
|
||||
width="68px"
|
||||
height="68px"
|
||||
src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
|
||||
/>
|
||||
|
||||
<view class="right-name">
|
||||
<view class="name-box">
|
||||
<text class="name"> 李思思 </text>
|
||||
<text class="company"> 安徽博诺斯 </text>
|
||||
</view>
|
||||
|
||||
<view> 15656453456 </view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<van-cell-group inset>
|
||||
<h2>我的订单</h2>
|
||||
|
||||
<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>
|
||||
<view class="van-hairline--top">
|
||||
<van-button type="primary" class="primary-lease" size="small" @click="onLogout">
|
||||
退出登录
|
||||
</van-button>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
|
@ -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;
|
||||
padding: 0 30px;
|
||||
color: #fff;
|
||||
background-color: #00a288;
|
||||
flex: 1;
|
||||
padding: 10px;
|
||||
color: #333;
|
||||
background: linear-gradient(to bottom, #c0e9ce, #e4f2f2, #f9f9f9);
|
||||
|
||||
.right-info {
|
||||
margin-left: 10px;
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
Loading…
Reference in New Issue