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>
|