454 lines
9.7 KiB
Vue
454 lines
9.7 KiB
Vue
<template>
|
||
<view class="container">
|
||
<!-- Header -->
|
||
<view class="header">
|
||
<image :src="user.errandAvatarUrl || '../../static/logo.png'" class="user-icon" @click="changeUserMessage"></image>
|
||
<view class="user-info">
|
||
<text class="name">{{ user.errandName||'未登录' }}</text>
|
||
<text class="rating">快送员星级 ★★★★</text>
|
||
</view>
|
||
<view class="settings">
|
||
<text class="rule">快送员评分规则</text>
|
||
<uni-icons type="right" size="16" class="settings-icon"></uni-icons>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- Summary -->
|
||
<view class="summary">
|
||
<view class="summary-item">
|
||
<text class="summary-value">{{allMoney}}</text>
|
||
<text class="summary-label">总收入</text>
|
||
<text class="summary-detail">总金额></text>
|
||
</view>
|
||
<view class="summary-item" @click="navigateToOrder">
|
||
<text class="summary-value">{{OrderNumber}}</text>
|
||
<text class="summary-label">今日完成</text>
|
||
<text class="summary-detail">完成订单数></text>
|
||
</view>
|
||
<view class="summary-item" @click="purse">
|
||
<text class="summary-value">{{OrderMoney}}</text>
|
||
<text class="summary-label">已结算</text>
|
||
<text class="summary-detail">用户已确认></text>
|
||
</view>
|
||
<view class="summary-item">
|
||
<text class="summary-value">{{waitMoney}}</text>
|
||
<text class="summary-label">待结算</text>
|
||
<text class="summary-detail">等待用户确认></text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- Menu -->
|
||
<view class="menu">
|
||
<view class="menu-item" @click="navigateToOrder">
|
||
<text>我的订单</text>
|
||
<uni-icons type="right" size="16" class="arrow-icon"></uni-icons>
|
||
</view>
|
||
<view>
|
||
<!-- 原来的菜单项改为触发弹窗 -->
|
||
<view class="menu-item" @click="purse">
|
||
<text>我的钱包</text>
|
||
<uni-icons type="right" size="25" class="arrow-icon"></uni-icons>
|
||
</view>
|
||
|
||
<!-- 自定义弹窗 -->
|
||
<uni-popup ref="popupRef" type="center" background-color="#fff">
|
||
<view class="popup-content">
|
||
<text class="popup-text" style="">敬请期待</text>
|
||
</view>
|
||
</uni-popup>
|
||
</view>
|
||
<view class="menu-item" @click="navigateToAuthentication">
|
||
<text>身份认证</text>
|
||
<uni-icons type="right" size="16" class="arrow-icon"></uni-icons>
|
||
</view>
|
||
<view class="menu-item" @click="navigateToAppeal">
|
||
<text>申诉中心</text>
|
||
<uni-icons type="right" size="16" class="arrow-icon"></uni-icons>
|
||
</view>
|
||
<view class="menu-item" @click="navigateToServiceEvaluation">
|
||
<text>服务评价</text>
|
||
<uni-icons type="right" size="16" class="arrow-icon"></uni-icons>
|
||
</view>
|
||
<view class="menu-item" @click="signOut">
|
||
<text>注销账户</text>
|
||
<uni-icons type="right" size="16" class="arrow-icon"></uni-icons>
|
||
</view>
|
||
<view class="menu-item" @click="login">
|
||
<text>{{loginState.loginName}}</text>
|
||
<uni-icons type="right" size="16" class="arrow-icon"></uni-icons>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import {
|
||
apiImageUrl
|
||
} from '../../API/api';
|
||
import {
|
||
onMounted,
|
||
ref
|
||
} from 'vue';
|
||
import {
|
||
onShow,
|
||
onLoad
|
||
} from "@dcloudio/uni-app";
|
||
const userInfo=uni.getStorageSync("userInfo")
|
||
const login = () => {
|
||
uni.request({
|
||
url:apiImageUrl+'/api/user/logout',
|
||
method:'POST',
|
||
success(res) {
|
||
console.log(res);
|
||
uni.removeStorageSync('userInfo');
|
||
uni.removeStorageSync('currentUser');
|
||
uni.reLaunch({
|
||
url: '/pages/login/login'
|
||
});
|
||
},
|
||
fail(err) {
|
||
console.log(err);
|
||
}
|
||
})
|
||
};
|
||
const signOut=()=>{
|
||
uni.showModal({
|
||
title: '是否注销账号',
|
||
content: '注销账号后将无法再次登录',
|
||
showCancel: true,
|
||
success: function (res) {
|
||
if (res.confirm) { //confirm为ture，代表用户点击确定
|
||
console.log('点击了确定按钮');
|
||
uni.request({
|
||
url:apiImageUrl+'/api/errand/delete',
|
||
method:'POST',
|
||
success(res) {
|
||
console.log(res);
|
||
uni.reLaunch({
|
||
url: '/pages/login/login'
|
||
});
|
||
},
|
||
fail(err) {
|
||
console.log(err);
|
||
}
|
||
})
|
||
} else if (res.cancel) { //cancel为ture，代表用户点击取消
|
||
console.log('点击了取消按钮');
|
||
}
|
||
}
|
||
})
|
||
}
|
||
|
||
const changeUserMessage=()=>{
|
||
uni.navigateTo({
|
||
url:'/pages/changeUserMessage/changeUserMessage'
|
||
})
|
||
}
|
||
|
||
const navigateToOrder = () => {
|
||
uni.navigateTo({
|
||
url: '/pages/order/order'
|
||
});
|
||
};
|
||
|
||
// 弹窗引用
|
||
const popupRef = ref('敬请期待')
|
||
|
||
const purse = () => {
|
||
|
||
popupRef.value.open()
|
||
|
||
// 1 秒后自动关闭
|
||
setTimeout(() => {
|
||
popupRef.value.close()
|
||
}, 1000)
|
||
};
|
||
|
||
const navigateToAuthentication = () => {
|
||
uni.navigateTo({
|
||
url: '/pages/authentication/authentication'
|
||
});
|
||
};
|
||
|
||
const navigateToAppeal = () => {
|
||
uni.navigateTo({
|
||
url: '/pages/appeal/appeal'
|
||
});
|
||
};
|
||
|
||
const navigateToServiceEvaluation = () => {
|
||
uni.navigateTo({
|
||
url: '/pages/serviceEvaluation/serviceEvaluation'
|
||
});
|
||
};
|
||
// 用户信息响应式引用
|
||
const user = ref({ username: '未登录' });
|
||
const loginState=ref({loginName:'去登录'})
|
||
|
||
// 获取当前用户信息
|
||
const getCurrentUser = () => {
|
||
uni.request({
|
||
url: apiImageUrl + '/api/errand/get/current',
|
||
method: 'POST',
|
||
header: {
|
||
'cookie': uni.getStorageSync("cookie")
|
||
},
|
||
success(res) {
|
||
console.log(res);
|
||
if (res.data.code === 0) { // 检查HTTP状态码和业务状态码
|
||
uni.setStorageSync("currentUser",res.data.data)
|
||
user.value = res.data.data; // 假设返回的数据结构包含用户信息
|
||
loginState.value={loginName:'退出登录'}
|
||
} else {
|
||
user.value = { username: '未登录' }; // 设置为未登录状态
|
||
}
|
||
},
|
||
fail(err) {
|
||
console.error('请求失败:', err);
|
||
user.value = { username: '未登录' }; // 请求失败时也设置为未登录状态
|
||
}
|
||
});
|
||
};
|
||
|
||
|
||
onShow(() => {
|
||
getCurrentUser(),
|
||
getOrderNumber(),
|
||
getOrderMoney()
|
||
getwaitMoney()
|
||
getallMoney()
|
||
})
|
||
const OrderNumber = ref(0);
|
||
const getOrderNumber=()=>{
|
||
uni.request({
|
||
url:apiImageUrl+'/api/errandIncome/count/number',
|
||
method:'POST',
|
||
success(res) {
|
||
console.log(res.data.data);
|
||
OrderNumber.value=res.data.data
|
||
},
|
||
fail(err) {
|
||
console.log(err);
|
||
}
|
||
})
|
||
}
|
||
const OrderMoney=ref(0)
|
||
const getOrderMoney=()=>{
|
||
uni.request({
|
||
url:apiImageUrl+'/api/errandIncome/count/money',
|
||
method:'POST',
|
||
success(res) {
|
||
console.log(res);
|
||
OrderMoney.value=res.data.data
|
||
},
|
||
fail(err) {
|
||
console.log(err);
|
||
}
|
||
})
|
||
}
|
||
const waitMoney=ref(0)
|
||
const getwaitMoney=()=>{
|
||
uni.request({
|
||
url:apiImageUrl+'/api/errandIncome/count/money/no',
|
||
method:'POST',
|
||
success(res) {
|
||
console.log(res);
|
||
waitMoney.value=res.data.data
|
||
},
|
||
fail(err) {
|
||
console.log(err);
|
||
}
|
||
})
|
||
}
|
||
|
||
const allMoney=ref(0)
|
||
const getallMoney=()=>{
|
||
uni.request({
|
||
url:apiImageUrl+'/api/errandIncome/count/money/no',
|
||
method:'POST',
|
||
success(res) {
|
||
console.log(res);
|
||
allMoney.value=res.data.data
|
||
},
|
||
fail(err) {
|
||
console.log(err);
|
||
}
|
||
})
|
||
}
|
||
</script>
|
||
|
||
|
||
<style scoped lang="scss">
|
||
.container {
|
||
background-image: linear-gradient(to bottom, #5e7dec, #d0f0ff);
|
||
padding: 20px;
|
||
height: 100vh;
|
||
}
|
||
|
||
.header {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 10px;
|
||
background-color: #ffffff;
|
||
border-radius: 15px;
|
||
}
|
||
|
||
.user-icon {
|
||
width: 60px;
|
||
height: 60px;
|
||
border-radius: 50%;
|
||
margin-right: 10px;
|
||
}
|
||
|
||
.user-info {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
}
|
||
|
||
.name {
|
||
font-size: 16px;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.rule {
|
||
font-size: 12px;
|
||
color: #999;
|
||
}
|
||
|
||
.rating {
|
||
color: #ff9800;
|
||
margin-top: 5px;
|
||
}
|
||
|
||
.settings {
|
||
margin-left: auto;
|
||
}
|
||
|
||
.settings-icon {
|
||
width: 24px;
|
||
height: 24px;
|
||
}
|
||
|
||
.summary {
|
||
display: flex;
|
||
justify-content: space-around;
|
||
margin-top: 20px;
|
||
background-color: #1970fd;
|
||
padding: 10px;
|
||
border-radius: 15px;
|
||
}
|
||
|
||
.summary-item {
|
||
text-align: center;
|
||
color: #ffffff;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
}
|
||
|
||
.summary-label {
|
||
padding: 5px;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.summary-detail {
|
||
font-size: 12px;
|
||
color: #92b1e9;
|
||
padding: 5px;
|
||
}
|
||
|
||
.summary-value {
|
||
font-size: 20px;
|
||
font-weight: bold;
|
||
padding: 5px;
|
||
}
|
||
|
||
.menu {
|
||
background-color: #ffffff;
|
||
border-radius: 8px;
|
||
margin-top: 20px;
|
||
padding: 0 15px;
|
||
|
||
.menu-item {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between; /* 关键属性 */
|
||
height: 50px;
|
||
border-bottom: 1px solid #f5f5f5;
|
||
|
||
&:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
text {
|
||
font-size: 15px;
|
||
color: #333;
|
||
flex-shrink: 0; /* 防止文字被压缩 */
|
||
}
|
||
|
||
.arrow-icon {
|
||
color: #999;
|
||
margin-left: 20px; /* 增加图标与文字的间距 */
|
||
}
|
||
}
|
||
}
|
||
|
||
.popup-content {
|
||
background-color: #ffffff;
|
||
padding: 30px 40px;
|
||
border-radius: 16px;
|
||
min-width: 240px;
|
||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
|
||
text-align: center;
|
||
animation: fadeIn 0.3s ease;
|
||
border: 2px solid #5e7dec; /* 主色调蓝边框 */
|
||
}
|
||
|
||
.popup-text {
|
||
font-size: 24px;
|
||
color: #2a3f88; /* 深蓝文字 */
|
||
font-weight: bold;
|
||
letter-spacing: 1px;
|
||
}
|
||
|
||
/* 弹出动画 */
|
||
@keyframes fadeIn {
|
||
from {
|
||
opacity: 0;
|
||
transform: scale(0.9);
|
||
}
|
||
to {
|
||
opacity: 1;
|
||
transform: scale(1);
|
||
}
|
||
}
|
||
</style>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
items: [{
|
||
label: '我的订单'
|
||
},
|
||
{
|
||
label: '收入查询'
|
||
},
|
||
{
|
||
label: '我的钱包'
|
||
},
|
||
{
|
||
label: '身份认证'
|
||
},
|
||
{
|
||
label: '申诉中心'
|
||
},
|
||
{
|
||
label: '服务评价'
|
||
}
|
||
]
|
||
};
|
||
}
|
||
};
|
||
</script> |