上传代码
This commit is contained in:
454
distribution/pages/my/my.vue
Normal file
454
distribution/pages/my/my.vue
Normal file
@ -0,0 +1,454 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user