style:根据支付分免押规范进行页面样式变更（整体）
This commit is contained in:
+45
-6
@@ -138,8 +138,15 @@
|
||||
import {
|
||||
getDeviceInfo,
|
||||
rentPowerBank,
|
||||
getOrderByOrderNoScore
|
||||
getOrderByOrderNoScore,
|
||||
getOrderByOrderNoScorePayStatus
|
||||
} from '@/config/user.js'
|
||||
import {
|
||||
URL
|
||||
} from "@/config/url.js"
|
||||
import {
|
||||
initiateWeChatScorePayment
|
||||
} from '@/util/index.js'
|
||||
|
||||
// 响应式状态
|
||||
const deviceInfo = ref({})
|
||||
@@ -278,16 +285,48 @@
|
||||
|
||||
// 获取后端返回的订单信息
|
||||
const order = rentResult.data
|
||||
|
||||
// 获取支付分所需参数
|
||||
const res = await getOrderByOrderNoScore(order.orderNo);
|
||||
console.log(res);
|
||||
|
||||
uni.hideLoading()
|
||||
|
||||
|
||||
// 跳转到订单支付页面
|
||||
// uni.redirectTo({
|
||||
// url: `/pages/order/payment?orderId=${order.orderId}&deviceId=${deviceId.value}&noDeposit=true`
|
||||
// })
|
||||
if (res && res.code === 200) {
|
||||
try {
|
||||
// 调用微信支付分小程序
|
||||
const payResult = await initiateWeChatScorePayment(res);
|
||||
|
||||
// 支付成功后的逻辑处理 - 可以根据业务需求决定是否跳转或刷新页面
|
||||
if (payResult.errCode == '0') {
|
||||
const res = await getOrderByOrderNoScorePayStatus(order.orderNo);
|
||||
// 用户完成了支付流程，可以查询订单状态或跳转到订单页
|
||||
uni.showToast({
|
||||
title: '设备租借成功',
|
||||
icon: 'success'
|
||||
});
|
||||
|
||||
setTimeout(() => {
|
||||
// 延迟跳转到租用中页面或订单页
|
||||
uni.redirectTo({
|
||||
url: '/pages/order/index'
|
||||
});
|
||||
}, 1500);
|
||||
}
|
||||
// 用户取消等其他情况，不做特殊处理
|
||||
} catch (payError) {
|
||||
uni.showToast({
|
||||
title: '支付分调用失败，请重试',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res?.msg || '获取支付参数失败',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
|
||||
console.log(order);
|
||||
} catch (error) {
|
||||
uni.hideLoading()
|
||||
|
||||
+482
-443
@@ -1,502 +1,541 @@
|
||||
<template>
|
||||
<view class="my-container">
|
||||
<view class="profile-container">
|
||||
<!-- 用户信息区域 -->
|
||||
<view class="user-info">
|
||||
<view class="floating-dots"></view>
|
||||
<view class="user-info-content" @click="showPopup">
|
||||
<view class="avatar-wrap">
|
||||
<image class="avatar" :src="userInfo.avatar || '/static/user.png'" mode="aspectFill" />
|
||||
<view class="header-section">
|
||||
<view class="user-profile" @click="handleUserProfileClick">
|
||||
<view class="avatar-container">
|
||||
<image class="avatar" v-if="userInfo.avatar" :src="userInfo.avatar" mode="aspectFill">
|
||||
</image>
|
||||
<image v-else class="avatar" src="@/static/user-active.png" mode="aspectFill"></image>
|
||||
<view class="avatar-badge" v-if="userInfo.isAdmin"></view>
|
||||
</view>
|
||||
<view class="info-content" v-if="userInfo">
|
||||
<view class="text-group">
|
||||
<text class="nickname">{{ userInfo.nickName }}</text>
|
||||
<text class="phone">{{ userInfo.phone || "" }}</text>
|
||||
</view>
|
||||
|
||||
<view class="user-details" v-if="userInfo">
|
||||
<view class="username">{{ userInfo.nickName }}</view>
|
||||
<view class="user-id">{{ userInfo.phone || '未绑定手机号' }}</view>
|
||||
</view>
|
||||
<view class="info-content not-login" v-else>
|
||||
<text class="login-text">点击登录</text>
|
||||
<text class="login-desc">登录后享受更多服务</text>
|
||||
|
||||
<view class="user-details" v-else>
|
||||
<view class="username">点击登录</view>
|
||||
<view class="user-id">授权登录后享受更多服务</view>
|
||||
</view>
|
||||
|
||||
<view class="edit-profile">
|
||||
<uni-icons type="right" size="16" color="#999"></uni-icons>
|
||||
</view>
|
||||
</view>
|
||||
<view class="wave-decoration"></view>
|
||||
</view>
|
||||
|
||||
<!-- 押金卡片 -->
|
||||
|
||||
<!-- 余额卡片 -->
|
||||
<view class="balance-card">
|
||||
<view class="balance-content">
|
||||
<text class="label">押金余额</text>
|
||||
<text class="amount">¥{{ deposit }}</text>
|
||||
<view class="balance-info">
|
||||
<view class="balance-label">押金余额</view>
|
||||
<view class="balance-amount">¥{{ deposit }}</view>
|
||||
</view>
|
||||
<view class="withdraw-btn" @click="navigateTo('/pages/deposit/index')">
|
||||
提现
|
||||
<view class="arrow"></view>
|
||||
<view class="action-button" @click="handleWithdraw">
|
||||
<text>提现</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 功能模块 -->
|
||||
|
||||
<!-- 功能区域列表 -->
|
||||
<view class="function-list">
|
||||
<!-- 订单 -->
|
||||
<!-- 订单中心 -->
|
||||
<view class="function-item" @click="navigateTo('/pages/order/index')">
|
||||
<view class="item-left">
|
||||
<view class="icon-wrap order">
|
||||
<image src="/static/jl.png" mode="aspectFit" class="icon-image" />
|
||||
<view class="item-icon">
|
||||
<image src="/static/jl.png" mode="aspectFit"></image>
|
||||
</view>
|
||||
<text class="title">租借记录</text>
|
||||
<text class="item-title">订单中心</text>
|
||||
</view>
|
||||
<view class="item-right">
|
||||
<uni-icons type="right" size="16" color="#999"></uni-icons>
|
||||
</view>
|
||||
<view class="arrow"></view>
|
||||
</view>
|
||||
|
||||
|
||||
<!-- 投诉建议 -->
|
||||
<view class="function-item" @click="navigateTo('/pages/feedback/index')">
|
||||
<view class="item-left">
|
||||
<view class="icon-wrap feedback">
|
||||
<image src="/static/complaint.png" mode="aspectFit" class="icon-image" />
|
||||
<view class="item-icon">
|
||||
<image src="/static/complaint.png" mode="aspectFit"></image>
|
||||
</view>
|
||||
<text class="title">投诉与建议</text>
|
||||
<text class="item-title">投诉建议</text>
|
||||
</view>
|
||||
<view class="item-right">
|
||||
<uni-icons type="right" size="16" color="#999"></uni-icons>
|
||||
</view>
|
||||
<view class="arrow"></view>
|
||||
</view>
|
||||
|
||||
|
||||
<!-- 帮助中心 -->
|
||||
<view class="function-item" @click="navigateTo('/pages/help/index')">
|
||||
<view class="item-left">
|
||||
<view class="icon-wrap help">
|
||||
<image src="/static/hlep.png" mode="aspectFit" class="icon-image" />
|
||||
<view class="item-icon">
|
||||
<image src="/static/hlep.png" mode="aspectFit"></image>
|
||||
</view>
|
||||
<text class="title">帮助中心</text>
|
||||
<text class="item-title">帮助中心</text>
|
||||
</view>
|
||||
<view class="item-right">
|
||||
<uni-icons type="right" size="16" color="#999"></uni-icons>
|
||||
</view>
|
||||
<view class="arrow"></view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!--
|
||||
<view class="section-title">设置</view>
|
||||
|
||||
<view class="settings-list">
|
||||
<view
|
||||
v-for="(item, index) in settingItems"
|
||||
:key="index"
|
||||
class="settings-item"
|
||||
@click="item.action">
|
||||
<view class="settings-item-left">
|
||||
<uni-icons :type="item.icon" size="20" color="#4facfe"></uni-icons>
|
||||
<text>{{ item.name }}</text>
|
||||
</view>
|
||||
<uni-icons type="right" size="16" color="#999"></uni-icons>
|
||||
</view>
|
||||
</view> -->
|
||||
|
||||
<!-- <u-popup ref="authPopup" mode="center" border-radius="15" width="600rpx" @open="onPopupOpen" @close="onPopupClose">
|
||||
<view class="auth-popup">
|
||||
<view class="auth-title">授权登录</view>
|
||||
<view class="auth-desc">获取您的微信头像、昵称等公开信息</view>
|
||||
<view class="auth-buttons">
|
||||
<button class="cancel-btn" @click="closeAuthPopup">取消</button>
|
||||
<button class="confirm-btn" @click="getUserProfile">确定</button>
|
||||
</view>
|
||||
</view>
|
||||
</u-popup> -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script setup>
|
||||
import {
|
||||
ref,
|
||||
reactive,
|
||||
onMounted
|
||||
} from 'vue';
|
||||
|
||||
import {
|
||||
wxLogin,
|
||||
getUserInfo,
|
||||
} from '../../util/index.js'
|
||||
getUserInfo
|
||||
} from '../../util/index.js';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
userInfo: {},
|
||||
deposit: '0.00',
|
||||
tempAvatar: '',
|
||||
tempNickname: '',
|
||||
show: false,
|
||||
// 响应式状态
|
||||
const userInfo = ref({});
|
||||
const deposit = ref('0.00');
|
||||
const openId = ref('');
|
||||
const authPopup = ref(null); // u-popup 的引用
|
||||
const isPopupVisible = ref(false);
|
||||
|
||||
// 页面加载时初始化
|
||||
onMounted(() => {
|
||||
getInfo();
|
||||
});
|
||||
|
||||
// 获取用户信息
|
||||
const getInfo = async () => {
|
||||
try {
|
||||
const token = uni.getStorageSync('token');
|
||||
if (!token) {
|
||||
await wxLogin();
|
||||
return;
|
||||
}
|
||||
},
|
||||
onShow() {
|
||||
this.getInfo();
|
||||
},
|
||||
methods: {
|
||||
async getInfo() {
|
||||
try {
|
||||
const token = uni.getStorageSync('token')
|
||||
if (!token) {
|
||||
await wxLogin()
|
||||
this.getInfo()
|
||||
return
|
||||
}
|
||||
|
||||
const res = await getUserInfo()
|
||||
console.log(res);
|
||||
if (res.code === 200) {
|
||||
|
||||
const userInfo = {
|
||||
nickName: res.data.nickname,
|
||||
phone: res.data.phone,
|
||||
avatar: res.data.iconUrl,
|
||||
isAdmin: res.data.isAdmin
|
||||
}
|
||||
|
||||
this.userInfo = userInfo
|
||||
uni.setStorageSync('userInfo', userInfo)
|
||||
this.deposit = res.data.balanceAmount || '0.00'
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取用户信息失败：', error)
|
||||
uni.showToast({
|
||||
title: '获取用户信息失败',
|
||||
icon: 'none'
|
||||
})
|
||||
const res = await getUserInfo();
|
||||
console.log('User info response:', res);
|
||||
|
||||
if (res.code == 200) {
|
||||
// 保存openId
|
||||
if (res.data.openId) {
|
||||
openId.value = res.data.openId;
|
||||
uni.setStorageSync('openId', res.data.openId);
|
||||
}
|
||||
},
|
||||
navigateTo(url) {
|
||||
uni.navigateTo({
|
||||
url
|
||||
})
|
||||
},
|
||||
|
||||
|
||||
// 更新用户信息
|
||||
userInfo.value = {
|
||||
nickName: res.data.nickname,
|
||||
phone: res.data.phone,
|
||||
avatar: res.data.iconUrl,
|
||||
isAdmin: res.data.isAdmin
|
||||
};
|
||||
|
||||
uni.setStorageSync('userInfo', userInfo.value);
|
||||
deposit.value = res.data.balanceAmount || '0.00';
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取用户信息失败:', error);
|
||||
uni.showToast({
|
||||
title: '获取用户信息失败',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// 导航到指定页面
|
||||
const navigateTo = (url) => {
|
||||
uni.navigateTo({
|
||||
url
|
||||
});
|
||||
};
|
||||
|
||||
// 处理提现按钮点击
|
||||
const handleWithdraw = () => {
|
||||
navigateTo('/pages/deposit/index');
|
||||
};
|
||||
|
||||
// 处理用户资料点击
|
||||
const handleUserProfileClick = () => {
|
||||
if (!userInfo.value) {
|
||||
// 打开授权弹窗
|
||||
openAuthPopup();
|
||||
} else {
|
||||
// 已登录用户点击个人资料，可以导航到编辑页面
|
||||
// navigateTo('/pages/profile/edit');
|
||||
}
|
||||
};
|
||||
|
||||
// 打开授权弹窗
|
||||
const openAuthPopup = () => {
|
||||
if (authPopup.value) {
|
||||
authPopup.value.open();
|
||||
isPopupVisible.value = true;
|
||||
}
|
||||
};
|
||||
|
||||
// 弹窗打开事件处理
|
||||
const onPopupOpen = () => {
|
||||
console.log('授权弹窗已打开');
|
||||
isPopupVisible.value = true;
|
||||
// 这里可以添加弹窗打开后的逻辑
|
||||
};
|
||||
|
||||
// 弹窗关闭事件处理
|
||||
const onPopupClose = () => {
|
||||
console.log('授权弹窗已关闭');
|
||||
isPopupVisible.value = false;
|
||||
// 这里可以添加弹窗关闭后的逻辑
|
||||
};
|
||||
|
||||
// 获取微信用户个人信息
|
||||
const getUserProfile = () => {
|
||||
// #ifdef MP-WEIXIN
|
||||
uni.showLoading({
|
||||
title: '获取中...',
|
||||
mask: true
|
||||
});
|
||||
|
||||
wx.getUserProfile({
|
||||
desc: '用于完善会员资料',
|
||||
success: (res) => {
|
||||
console.log('获取用户信息成功:', res);
|
||||
updateUserInfo(res.userInfo);
|
||||
},
|
||||
fail: (err) => {
|
||||
console.error('获取用户信息失败:', err);
|
||||
uni.showToast({
|
||||
title: '获取用户信息失败',
|
||||
icon: 'none'
|
||||
});
|
||||
},
|
||||
complete: () => {
|
||||
uni.hideLoading();
|
||||
closeAuthPopup();
|
||||
}
|
||||
});
|
||||
// #endif
|
||||
|
||||
// #ifndef MP-WEIXIN
|
||||
uni.showToast({
|
||||
title: '请在微信小程序中使用此功能',
|
||||
icon: 'none'
|
||||
});
|
||||
closeAuthPopup();
|
||||
// #endif
|
||||
};
|
||||
|
||||
// 更新用户信息
|
||||
const updateUserInfo = async (wxUserInfo) => {
|
||||
try {
|
||||
// 更新本地用户信息
|
||||
const updatedInfo = {
|
||||
...userInfo.value,
|
||||
nickName: wxUserInfo.nickName,
|
||||
avatar: wxUserInfo.avatarUrl
|
||||
};
|
||||
|
||||
userInfo.value = updatedInfo;
|
||||
uni.setStorageSync('userInfo', updatedInfo);
|
||||
|
||||
// 这里可以添加调用后端API更新用户信息的代码
|
||||
// const updateRes = await updateUserInfoApi({
|
||||
// openId: openId.value,
|
||||
// nickName: wxUserInfo.nickName,
|
||||
// avatarUrl: wxUserInfo.avatarUrl,
|
||||
// gender: wxUserInfo.gender
|
||||
// });
|
||||
|
||||
uni.showToast({
|
||||
title: '信息更新成功',
|
||||
icon: 'success'
|
||||
});
|
||||
|
||||
// 更新完成后重新获取用户信息
|
||||
getInfo();
|
||||
} catch (error) {
|
||||
console.error('更新用户信息失败:', error);
|
||||
uni.showToast({
|
||||
title: '更新用户信息失败',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// 关闭授权弹窗
|
||||
const closeAuthPopup = () => {
|
||||
if (authPopup.value) {
|
||||
authPopup.value.close();
|
||||
isPopupVisible.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
// 关于我们
|
||||
const handleAboutUs = () => {
|
||||
uni.showToast({
|
||||
title: '功能开发中',
|
||||
icon: 'none'
|
||||
});
|
||||
};
|
||||
|
||||
// 隐私政策
|
||||
const handlePrivacyPolicy = () => {
|
||||
uni.showToast({
|
||||
title: '功能开发中',
|
||||
icon: 'none'
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.my-container {
|
||||
min-height: 87.5vh;
|
||||
background: #f8f8f8;
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
.profile-container {
|
||||
min-height: 100vh;
|
||||
background-color: #f5f7fa;
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
}
|
||||
|
||||
.user-info {
|
||||
height: 360rpx;
|
||||
background: linear-gradient(135deg, #1976D2, #42A5F5);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
/* Header Section */
|
||||
.header-section {
|
||||
padding: 40rpx;
|
||||
background: linear-gradient(135deg, #4facfe, #00f2fe);
|
||||
position: relative;
|
||||
border-radius: 0 0 30rpx 30rpx;
|
||||
margin-bottom: 20rpx;
|
||||
box-shadow: 0 10rpx 30rpx rgba(79, 172, 254, 0.2);
|
||||
}
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
background-repeat: no-repeat;
|
||||
opacity: 0.1;
|
||||
}
|
||||
.user-profile {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 20rpx 0;
|
||||
}
|
||||
|
||||
&::before {
|
||||
width: 200rpx;
|
||||
height: 200rpx;
|
||||
left: -40rpx;
|
||||
top: -40rpx;
|
||||
background-image: radial-gradient(circle, #fff 2rpx, transparent 3rpx);
|
||||
background-size: 30rpx 30rpx;
|
||||
transform: rotate(30deg);
|
||||
}
|
||||
.avatar-container {
|
||||
position: relative;
|
||||
margin-right: 30rpx;
|
||||
}
|
||||
|
||||
&::after {
|
||||
width: 300rpx;
|
||||
height: 300rpx;
|
||||
right: -60rpx;
|
||||
bottom: -60rpx;
|
||||
background:
|
||||
radial-gradient(circle at center, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.2) 30%, transparent 30.5%),
|
||||
radial-gradient(circle at center, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.2) 20%, transparent 20.5%);
|
||||
background-size: 60rpx 60rpx;
|
||||
background-position: 0 0, 30rpx 30rpx;
|
||||
transform: rotate(-15deg);
|
||||
}
|
||||
.avatar {
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
border-radius: 60rpx;
|
||||
border: 4rpx solid rgba(255, 255, 255, 0.6);
|
||||
box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.floating-dots {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
pointer-events: none;
|
||||
.avatar-badge {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
width: 36rpx;
|
||||
height: 36rpx;
|
||||
border-radius: 18rpx;
|
||||
background-color: #ff9500;
|
||||
border: 4rpx solid white;
|
||||
}
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 12rpx;
|
||||
height: 12rpx;
|
||||
border-radius: 50%;
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
animation: float 3s infinite ease-in-out;
|
||||
}
|
||||
.user-details {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
&::before {
|
||||
top: 20%;
|
||||
right: 10%;
|
||||
animation-delay: -2s;
|
||||
}
|
||||
.username {
|
||||
font-size: 36rpx;
|
||||
font-weight: 600;
|
||||
color: white;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
&::after {
|
||||
top: 50%;
|
||||
right: 20%;
|
||||
width: 8rpx;
|
||||
height: 8rpx;
|
||||
animation-delay: -1s;
|
||||
}
|
||||
}
|
||||
.user-id {
|
||||
font-size: 26rpx;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
|
||||
.user-info-content {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
padding: 60rpx 40rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.edit-profile {
|
||||
background-color: rgba(255, 255, 255, 0.2);
|
||||
padding: 10rpx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.avatar-wrap {
|
||||
width: 140rpx;
|
||||
height: 140rpx;
|
||||
border-radius: 70rpx;
|
||||
border: 6rpx solid rgba(255, 255, 255, 0.3);
|
||||
overflow: hidden;
|
||||
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1),
|
||||
0 0 0 6rpx rgba(255, 255, 255, 0.1);
|
||||
margin-right: 40rpx;
|
||||
position: relative;
|
||||
/* Balance Card */
|
||||
.balance-card {
|
||||
margin: 30rpx;
|
||||
background: white;
|
||||
border-radius: 20rpx;
|
||||
padding: 30rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -10%;
|
||||
left: -10%;
|
||||
right: -10%;
|
||||
bottom: -10%;
|
||||
background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1), transparent);
|
||||
animation: shine 2s infinite;
|
||||
}
|
||||
.balance-label {
|
||||
font-size: 28rpx;
|
||||
color: #666;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #fff;
|
||||
}
|
||||
}
|
||||
.balance-amount {
|
||||
font-size: 48rpx;
|
||||
font-weight: 600;
|
||||
color: #4facfe;
|
||||
}
|
||||
|
||||
.info-content {
|
||||
|
||||
|
||||
&.not-login {
|
||||
.login-text {
|
||||
font-size: 40rpx;
|
||||
color: #fff;
|
||||
font-weight: 500;
|
||||
margin-bottom: 12rpx;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.login-desc {
|
||||
font-size: 28rpx;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.text-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 16rpx;
|
||||
|
||||
.nickname {
|
||||
font-size: 42rpx;
|
||||
color: #ffffff;
|
||||
font-weight: 600;
|
||||
text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
|
||||
letter-spacing: 2rpx;
|
||||
}
|
||||
|
||||
.phone {
|
||||
font-size: 30rpx;
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
font-weight: 400;
|
||||
letter-spacing: 1rpx;
|
||||
position: relative;
|
||||
padding: 4rpx 24rpx;
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
border-radius: 24rpx;
|
||||
backdrop-filter: blur(4px);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.wave-decoration {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
height: 120rpx;
|
||||
background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNDQwIDMyMCI+PHBhdGggZmlsbD0icmdiYSgyNTUsMjU1LDI1NSwwLjEpIiBkPSJNMCwyNjAuMjI3YzE3My42NjEsMCwzMjEuMTM3LDAsNDQyLjQyOCwwYzE4MS41MTcsMCwyODUuNjQ1LDAsMzk3LjU3MiwwQzk1Mi4zODksMjYwLjIyNywxMTQwLjI3MSwyNjAuMjI3LDE0NDAsMjYwLjIyN1YwSDBWMjYwLjIyN3oiLz48L3N2Zz4=') bottom/100% no-repeat;
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes float {
|
||||
|
||||
0%,
|
||||
100% {
|
||||
transform: translateY(0) scale(1);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: translateY(-20rpx) scale(1.1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes shine {
|
||||
0% {
|
||||
transform: translateX(-100%) rotate(45deg);
|
||||
}
|
||||
|
||||
80%,
|
||||
100% {
|
||||
transform: translateX(100%) rotate(45deg);
|
||||
}
|
||||
}
|
||||
|
||||
.balance-card {
|
||||
margin: -60rpx 30rpx 30rpx;
|
||||
background: #fff;
|
||||
border-radius: 24rpx;
|
||||
padding: 40rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
z-index: 3;
|
||||
box-shadow: 0 8rpx 32rpx rgba(25, 118, 210, 0.1);
|
||||
|
||||
.balance-content {
|
||||
.label {
|
||||
font-size: 28rpx;
|
||||
color: #666;
|
||||
margin-bottom: 12rpx;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.amount {
|
||||
font-size: 52rpx;
|
||||
color: #1976D2;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.withdraw-btn {
|
||||
padding: 20rpx 36rpx;
|
||||
background: linear-gradient(135deg, #1976D2, #42A5F5);
|
||||
color: #fff;
|
||||
border-radius: 36rpx;
|
||||
font-size: 30rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
box-shadow: 0 4rpx 12rpx rgba(25, 118, 210, 0.2);
|
||||
|
||||
&:active {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
.arrow {
|
||||
width: 12rpx;
|
||||
height: 12rpx;
|
||||
border-top: 3rpx solid #fff;
|
||||
border-right: 3rpx solid #fff;
|
||||
transform: rotate(45deg);
|
||||
margin-left: 12rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.function-list {
|
||||
margin: 0 30rpx;
|
||||
background: #fff;
|
||||
border-radius: 24rpx;
|
||||
padding: 10rpx 20rpx;
|
||||
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.04);
|
||||
|
||||
.function-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 32rpx 20rpx;
|
||||
border-bottom: 1rpx solid #f5f5f5;
|
||||
transition: all 0.3s;
|
||||
|
||||
&:active {
|
||||
background: #f9f9f9;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.item-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.icon-wrap {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
margin-right: 24rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 20rpx;
|
||||
background: #F5F9FF;
|
||||
|
||||
.icon-image {
|
||||
width: 44rpx;
|
||||
height: 44rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 32rpx;
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
.arrow {
|
||||
width: 16rpx;
|
||||
height: 16rpx;
|
||||
border-top: 3rpx solid #999;
|
||||
border-right: 3rpx solid #999;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.popup-content {
|
||||
background-color: #fff;
|
||||
border-radius: 24rpx 24rpx 0 0;
|
||||
padding: 40rpx 30rpx;
|
||||
|
||||
.popup-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
margin-bottom: 40rpx;
|
||||
}
|
||||
|
||||
.popup-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 30rpx;
|
||||
}
|
||||
|
||||
.avatar-btn {
|
||||
height: 88rpx;
|
||||
line-height: 88rpx;
|
||||
background: #f5f5f5;
|
||||
border-radius: 44rpx;
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
|
||||
&::after {
|
||||
border: none;
|
||||
}
|
||||
|
||||
&:active {
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
|
||||
.nickname-input {
|
||||
height: 88rpx;
|
||||
background: #f5f5f5;
|
||||
border-radius: 44rpx;
|
||||
padding: 0 30rpx;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.submit-btn {
|
||||
height: 88rpx;
|
||||
line-height: 88rpx;
|
||||
background: #1976D2;
|
||||
color: #fff;
|
||||
border-radius: 44rpx;
|
||||
font-size: 30rpx;
|
||||
margin-top: 20rpx;
|
||||
|
||||
&:active {
|
||||
opacity: 0.9;
|
||||
}
|
||||
}
|
||||
}
|
||||
.action-button {
|
||||
background: linear-gradient(135deg, #4facfe, #00f2fe);
|
||||
border-radius: 40rpx;
|
||||
height: 80rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0 40rpx;
|
||||
color: white;
|
||||
font-weight: 500;
|
||||
font-size: 30rpx;
|
||||
box-shadow: 0 8rpx 16rpx rgba(79, 172, 254, 0.2);
|
||||
|
||||
&:active {
|
||||
opacity: 0.9;
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
text {
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
/* Function List */
|
||||
.function-list {
|
||||
margin: 30rpx;
|
||||
background: white;
|
||||
border-radius: 20rpx;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 6rpx 16rpx rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
|
||||
.function-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 32rpx 30rpx;
|
||||
border-bottom: 1rpx solid #f0f0f0;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
}
|
||||
|
||||
.item-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.item-icon {
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
margin-right: 24rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
image {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.item-title {
|
||||
font-size: 30rpx;
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.item-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* Auth Popup */
|
||||
.auth-popup {
|
||||
background-color: white;
|
||||
width: 100%;
|
||||
padding: 40rpx;
|
||||
border-radius: 15rpx;
|
||||
}
|
||||
|
||||
.auth-title {
|
||||
font-size: 34rpx;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
text-align: center;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.auth-desc {
|
||||
font-size: 28rpx;
|
||||
color: #666;
|
||||
text-align: center;
|
||||
margin-bottom: 40rpx;
|
||||
}
|
||||
|
||||
.auth-buttons {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.cancel-btn,
|
||||
.confirm-btn {
|
||||
width: 240rpx;
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
text-align: center;
|
||||
border-radius: 40rpx;
|
||||
font-size: 28rpx;
|
||||
|
||||
&::after {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
.cancel-btn {
|
||||
background-color: #f0f0f0;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.confirm-btn {
|
||||
background: linear-gradient(135deg, #4facfe, #00f2fe);
|
||||
color: white;
|
||||
}
|
||||
</style>
|
||||
+492
-278
@@ -1,313 +1,527 @@
|
||||
<template>
|
||||
<view class="order-container">
|
||||
<!-- 状态切换 -->
|
||||
<view class="tab-bar">
|
||||
<view
|
||||
v-for="(tab, index) in OrderStatusTabs"
|
||||
:key="index"
|
||||
class="tab-item"
|
||||
:class="{ active: currentTab === index }"
|
||||
@click="switchTab(index)"
|
||||
>
|
||||
{{ tab.text }}
|
||||
</view>
|
||||
</view>
|
||||
<view class="order-container">
|
||||
<!-- 状态切换 -->
|
||||
<view class="status-tabs">
|
||||
<view v-for="(tab, index) in orderStatusTabs" :key="index" class="tab-item"
|
||||
:class="{ active: currentTab === index }" @click="switchTab(index)">
|
||||
{{ tab.text }}
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 订单列表 -->
|
||||
<view class="order-list">
|
||||
<view class="order-item" v-for="(order, index) in orderList" :key="index">
|
||||
<view class="order-header">
|
||||
<text class="order-no">订单号：{{ order.orderNo }}</text>
|
||||
<text class="order-status" :class="OrderStatusMap[order.status]?.class">{{ OrderStatusMap[order.status]?.text }}</text>
|
||||
<navigator v-if="order.status === 1" :url="`/pages/return/index?deviceId=${order.deviceId}&orderId=${order.orderNo}`" class="return-btn">归还设备</navigator>
|
||||
</view>
|
||||
<view class="order-content">
|
||||
<view class="device-info">
|
||||
<text class="device-name">共享风扇</text>
|
||||
<text class="device-id">设备号：{{ order.deviceId }}</text>
|
||||
</view>
|
||||
<view class="time-info">
|
||||
<view class="time-item">
|
||||
<text class="label">开始时间：</text>
|
||||
<text class="value">{{ order.startTime }}</text>
|
||||
</view>
|
||||
<view class="time-item">
|
||||
<text class="label">结束时间：</text>
|
||||
<text class="value">{{ order.endTime || '-' }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="price-info">
|
||||
<text class="amount">￥{{ order.amount }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 订单列表 -->
|
||||
<view class="order-list">
|
||||
<view class="empty-state" v-if="orderList.length === 0">
|
||||
<view class="empty-icon"></view>
|
||||
<text class="empty-text">暂无订单记录</text>
|
||||
</view>
|
||||
|
||||
<!-- 无数据提示 -->
|
||||
<view class="empty-tip" v-if="orderList.length === 0">
|
||||
<view class="empty-icon"></view>
|
||||
<text>暂无订单记录</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="order-item" v-for="(order, index) in orderList" :key="index">
|
||||
<!-- 订单头部信息 -->
|
||||
<view class="order-header">
|
||||
<view class="order-id">
|
||||
<text>订单号：{{ order.orderNo }}</text>
|
||||
</view>
|
||||
<view class="order-status" :class="orderStatusMap[order.status]?.class">
|
||||
{{ orderStatusMap[order.status]?.text }}
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 订单内容 -->
|
||||
<view class="order-body">
|
||||
<view class="device-info">
|
||||
<view class="device-left">
|
||||
<view class="device-name">共享风扇</view>
|
||||
<view class="device-id">设备号：{{ order.deviceId }}</view>
|
||||
</view>
|
||||
|
||||
<!-- 支付方式标识 -->
|
||||
<view class="device-right">
|
||||
<!-- 微信支付分标识 -->
|
||||
<view class="payment-badge wx-score" v-if="order.payWay == 'wx_score_pay'">
|
||||
<image src="/static/images/wxpayflag.png" mode="aspectFit" class="badge-icon"></image>
|
||||
<view class="badge-text">
|
||||
<text>微信支付分</text>
|
||||
<text class="divider">|</text>
|
||||
<text class="highlight">免押租借</text>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 押金租借标识 -->
|
||||
<view class="payment-badge deposit" v-else>
|
||||
<text class="badge-text">押金租借</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 订单时间信息 -->
|
||||
<view class="order-times">
|
||||
<view class="time-row">
|
||||
<text class="time-label">开始时间：</text>
|
||||
<text class="time-value">{{ order.startTime }}</text>
|
||||
</view>
|
||||
<view class="time-row">
|
||||
<text class="time-label">结束时间：</text>
|
||||
<text class="time-value">{{ order.endTime || '-' }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 订单底部 -->
|
||||
<view class="order-footer">
|
||||
<view class="price">￥{{ order.amount }}</view>
|
||||
|
||||
<view class="actions">
|
||||
<view v-if="order.status=='in_used'" class="action-item primary" @click="navigateToReturn(order.deviceId, order.orderId)">
|
||||
归还设备
|
||||
</view>
|
||||
<view v-if="order.status === 'waiting_for_payment'" class="action-item secondary"
|
||||
@click="getOrderStatus(order)">
|
||||
同步订单状态
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {getOrderList, queryById} from '../../config/user.js'
|
||||
import { OrderStatusMap, OrderStatusTabs } from '../../constants/orderStatus.js'
|
||||
<script setup>
|
||||
import {
|
||||
ref,
|
||||
reactive,
|
||||
onMounted
|
||||
} from 'vue';
|
||||
import {
|
||||
onLoad
|
||||
} from '@dcloudio/uni-app';
|
||||
import {
|
||||
getOrderList,
|
||||
queryById,
|
||||
getOrderByOrderNoScorePayStatus
|
||||
} from '../../config/user.js';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
currentTab: 0,
|
||||
OrderStatusMap,
|
||||
OrderStatusTabs,
|
||||
orderList: []
|
||||
}
|
||||
},
|
||||
async onLoad(options) {
|
||||
// 如果有传入orderId参数，说明是从设备租借页面跳转过来的
|
||||
if (options && options.orderId) {
|
||||
try {
|
||||
// 获取特定订单信息
|
||||
const res = await queryById(options.orderId);
|
||||
if (res.code === 200 && res.data) {
|
||||
// 将获取到的订单添加到列表中
|
||||
const orderData = res.data;
|
||||
console.log('特定订单数据:', JSON.stringify(orderData));
|
||||
console.log('特定订单的开始时间:', orderData.startTime);
|
||||
console.log('特定订单的创建时间:', orderData.createTime);
|
||||
|
||||
// 使用实际的startTime字段，如果没有则尝试使用createTime
|
||||
const orderStartTime = orderData.startTime || orderData.createTime || '';
|
||||
console.log('特定订单最终显示的开始时间:', orderStartTime);
|
||||
|
||||
// 格式化订单数据
|
||||
const formattedOrder = {
|
||||
orderNo: orderData.orderId,
|
||||
status: orderData.orderStatus,
|
||||
deviceId: orderData.deviceNo,
|
||||
startTime: orderStartTime,
|
||||
endTime: orderData.endTime || '',
|
||||
amount: orderData.payAmount || orderData.actualDeviceAmount || '0.00'
|
||||
};
|
||||
|
||||
// 将订单添加到列表开头
|
||||
this.orderList = [formattedOrder, ...this.orderList];
|
||||
|
||||
// 根据订单状态切换到对应标签
|
||||
const tabIndex = this.OrderStatusTabs.findIndex(tab =>
|
||||
tab.status.includes(orderData.orderStatus)
|
||||
);
|
||||
if (tabIndex !== -1) {
|
||||
this.switchTab(tabIndex);
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取订单详情失败:', error);
|
||||
}
|
||||
}
|
||||
|
||||
// 获取订单列表
|
||||
await this.getOrderList();
|
||||
},
|
||||
methods: {
|
||||
async getOrderList(statusList = []) {
|
||||
try {
|
||||
const res = await getOrderList(statusList);
|
||||
if (res.code === 200 && res.data && res.data.records) {
|
||||
console.log('API返回的订单列表数据:', JSON.stringify(res.data.records));
|
||||
|
||||
// 处理订单列表数据
|
||||
this.orderList = res.data.records.map(item => {
|
||||
console.log(`订单 ${item.orderId} 的开始时间:`, item.startTime);
|
||||
console.log(`订单 ${item.orderId} 的创建时间:`, item.createTime);
|
||||
|
||||
// 使用实际的startTime字段，如果没有则尝试使用createTime
|
||||
const orderStartTime = item.startTime || item.createTime || '';
|
||||
console.log(`订单 ${item.orderId} 最终显示的开始时间:`, orderStartTime);
|
||||
|
||||
return {
|
||||
orderNo: item.orderId,
|
||||
status: item.orderStatus,
|
||||
deviceId: item.deviceNo,
|
||||
startTime: orderStartTime,
|
||||
endTime: item.endTime || '',
|
||||
amount: item.payAmount || item.actualDeviceAmount || '0.00'
|
||||
};
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取订单列表失败:', error);
|
||||
uni.showToast({
|
||||
title: '获取订单列表失败',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
},
|
||||
async switchTab(index) {
|
||||
this.currentTab = index;
|
||||
// 根据状态获取订单列表
|
||||
const statusList = this.OrderStatusTabs[index].status;
|
||||
await this.getOrderList(statusList);
|
||||
}
|
||||
}
|
||||
}
|
||||
// 初始化状态
|
||||
const currentTab = ref(0);
|
||||
const orderList = ref([]);
|
||||
|
||||
// 订单状态映射
|
||||
const orderStatusMap = reactive({
|
||||
'0': {
|
||||
text: '待支付',
|
||||
class: 'status-waiting'
|
||||
},
|
||||
'1': {
|
||||
text: '使用中',
|
||||
class: 'status-using'
|
||||
},
|
||||
'2': {
|
||||
text: '已完成',
|
||||
class: 'status-finished'
|
||||
},
|
||||
'3': {
|
||||
text: '已取消',
|
||||
class: 'status-cancelled'
|
||||
},
|
||||
'waiting_for_payment': {
|
||||
text: '待支付',
|
||||
class: 'status-waiting'
|
||||
},
|
||||
'in_used': {
|
||||
text: '使用中',
|
||||
class: 'status-using'
|
||||
},
|
||||
'used_done': {
|
||||
text: '已完成',
|
||||
class: 'status-finished'
|
||||
},
|
||||
'canceled': {
|
||||
text: '已取消',
|
||||
class: 'status-cancelled'
|
||||
}
|
||||
});
|
||||
|
||||
// 订单状态标签
|
||||
const orderStatusTabs = reactive([{
|
||||
text: '全部',
|
||||
status: []
|
||||
},
|
||||
{
|
||||
text: '使用中',
|
||||
status: ['1', 'in_used']
|
||||
},
|
||||
{
|
||||
text: '已完成',
|
||||
status: ['2', 'used_done']
|
||||
},
|
||||
{
|
||||
text: '已取消',
|
||||
status: ['3', 'canceled']
|
||||
}
|
||||
]);
|
||||
|
||||
// 页面加载
|
||||
onLoad(async (options) => {
|
||||
// 如果有传入orderId参数，说明是从设备租借页面跳转过来的
|
||||
if (options && options.orderId) {
|
||||
try {
|
||||
// 获取特定订单信息
|
||||
const res = await queryById(options.orderId);
|
||||
if (res.code === 200 && res.data) {
|
||||
// 获取到的订单数据
|
||||
const orderData = res.data;
|
||||
|
||||
// 使用实际的startTime字段，如果没有则尝试使用createTime
|
||||
const orderStartTime = orderData.startTime || orderData.createTime || '';
|
||||
|
||||
// 格式化订单数据
|
||||
const formattedOrder = {
|
||||
orderNo: orderData.orderId,
|
||||
status: orderData.orderStatus,
|
||||
deviceId: orderData.deviceNo,
|
||||
payWay: orderData.payWay,
|
||||
startTime: orderStartTime,
|
||||
endTime: orderData.endTime || '',
|
||||
amount: orderData.payAmount || orderData.actualDeviceAmount || '0.00'
|
||||
};
|
||||
|
||||
// 将订单添加到列表开头
|
||||
orderList.value = [formattedOrder, ...orderList.value];
|
||||
|
||||
// 根据订单状态切换到对应标签
|
||||
const tabIndex = orderStatusTabs.findIndex(tab =>
|
||||
tab.status.includes(orderData.orderStatus)
|
||||
);
|
||||
|
||||
if (tabIndex !== -1) {
|
||||
switchTab(tabIndex);
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取订单详情失败:', error);
|
||||
}
|
||||
}
|
||||
|
||||
// 获取订单列表
|
||||
await loadOrderList();
|
||||
});
|
||||
|
||||
// 切换标签
|
||||
const switchTab = async (index) => {
|
||||
currentTab.value = index;
|
||||
// 根据状态获取订单列表
|
||||
const statusList = orderStatusTabs[index].status;
|
||||
await loadOrderList(statusList);
|
||||
};
|
||||
|
||||
// 加载订单列表
|
||||
const loadOrderList = async (statusList = []) => {
|
||||
try {
|
||||
const res = await getOrderList(statusList);
|
||||
if (res.code === 200 && res.data && res.data.records) {
|
||||
// 处理订单列表数据
|
||||
orderList.value = res.data.records.map(item => {
|
||||
// 使用实际的startTime字段，如果没有则尝试使用createTime
|
||||
const orderStartTime = item.startTime || item.createTime || '';
|
||||
|
||||
return {
|
||||
orderNo: item.orderNo,
|
||||
orderId: item.orderId,
|
||||
status: item.orderStatus,
|
||||
deviceId: item.deviceNo,
|
||||
payWay: item.payWay,
|
||||
startTime: orderStartTime,
|
||||
endTime: item.endTime || '',
|
||||
amount: item.payAmount || item.actualDeviceAmount || '0.00'
|
||||
};
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取订单列表失败:', error);
|
||||
uni.showToast({
|
||||
title: '获取订单列表失败',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// 同步订单状态
|
||||
const getOrderStatus = async (order) => {
|
||||
try {
|
||||
const res = await getOrderByOrderNoScorePayStatus(order.orderNo);
|
||||
if (res.code === 200) {
|
||||
uni.showToast({
|
||||
title: '状态同步成功',
|
||||
icon: 'success'
|
||||
});
|
||||
await loadOrderList(orderStatusTabs[currentTab.value].status);
|
||||
}
|
||||
} catch (error) {
|
||||
uni.showToast({
|
||||
title: '同步状态失败',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// 跳转到归还设备页面
|
||||
const navigateToReturn = (deviceId, orderId) => {
|
||||
console.log(orderId);
|
||||
uni.navigateTo({
|
||||
url: `/pages/return/index?deviceId=${deviceId}&orderId=${orderId}`
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.order-container {
|
||||
min-height: 100vh;
|
||||
background: #f8f8f8;
|
||||
.order-container {
|
||||
min-height: 100vh;
|
||||
background: #f7f8fa;
|
||||
padding-bottom: 30rpx;
|
||||
|
||||
.tab-bar {
|
||||
display: flex;
|
||||
background: #fff;
|
||||
padding: 20rpx 0;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.05);
|
||||
// 状态标签栏
|
||||
.status-tabs {
|
||||
display: flex;
|
||||
background: #fff;
|
||||
padding: 0 20rpx;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
|
||||
|
||||
.tab-item {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
font-size: 28rpx;
|
||||
color: #666;
|
||||
position: relative;
|
||||
padding: 20rpx 0;
|
||||
.tab-item {
|
||||
flex: 1;
|
||||
height: 90rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 28rpx;
|
||||
color: #666;
|
||||
position: relative;
|
||||
|
||||
&.active {
|
||||
color: #1976D2;
|
||||
font-weight: 500;
|
||||
&.active {
|
||||
color: #1976D2;
|
||||
font-weight: 500;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 40rpx;
|
||||
height: 4rpx;
|
||||
background: #1976D2;
|
||||
border-radius: 2rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 40rpx;
|
||||
height: 4rpx;
|
||||
background: #1976D2;
|
||||
border-radius: 2rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.order-list {
|
||||
padding: 20rpx;
|
||||
// 订单列表
|
||||
.order-list {
|
||||
padding: 20rpx;
|
||||
|
||||
.order-item {
|
||||
background: #fff;
|
||||
border-radius: 20rpx;
|
||||
margin-bottom: 20rpx;
|
||||
padding: 30rpx;
|
||||
box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.04);
|
||||
// 订单项
|
||||
.order-item {
|
||||
background: #fff;
|
||||
border-radius: 16rpx;
|
||||
margin-bottom: 20rpx;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
|
||||
|
||||
.order-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding-bottom: 20rpx;
|
||||
border-bottom: 1rpx solid #f5f5f5;
|
||||
// 订单头部
|
||||
.order-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 24rpx;
|
||||
border-bottom: 1rpx solid #f0f0f0;
|
||||
|
||||
.order-no {
|
||||
font-size: 26rpx;
|
||||
color: #666;
|
||||
}
|
||||
.order-id {
|
||||
font-size: 26rpx;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.order-status {
|
||||
font-size: 26rpx;
|
||||
|
||||
&.status-waiting {
|
||||
color: #FF9800;
|
||||
}
|
||||
.order-status {
|
||||
font-size: 26rpx;
|
||||
font-weight: 500;
|
||||
|
||||
&.status-progress {
|
||||
color: #2196F3;
|
||||
}
|
||||
&.status-waiting {
|
||||
color: #FF9800;
|
||||
}
|
||||
|
||||
&.status-success {
|
||||
color: #4CAF50;
|
||||
}
|
||||
&.status-using {
|
||||
color: #2196F3;
|
||||
}
|
||||
|
||||
&.status-using {
|
||||
color: #1976D2;
|
||||
}
|
||||
&.status-finished {
|
||||
color: #4CAF50;
|
||||
}
|
||||
|
||||
&.status-failed {
|
||||
color: #F44336;
|
||||
}
|
||||
&.status-cancelled {
|
||||
color: #9E9E9E;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.status-cancelled {
|
||||
color: #9E9E9E;
|
||||
}
|
||||
// 订单内容
|
||||
.order-body {
|
||||
padding: 24rpx;
|
||||
|
||||
&.status-finished {
|
||||
color: #4CAF50;
|
||||
}
|
||||
}
|
||||
}
|
||||
.device-info {
|
||||
margin-bottom: 20rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
|
||||
.order-content {
|
||||
padding-top: 20rpx;
|
||||
.device-left {
|
||||
flex: 1;
|
||||
margin-right: 20rpx;
|
||||
|
||||
.device-info {
|
||||
margin-bottom: 20rpx;
|
||||
.device-name {
|
||||
font-size: 32rpx;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
margin-bottom: 6rpx;
|
||||
}
|
||||
|
||||
.device-name {
|
||||
font-size: 32rpx;
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
.device-id {
|
||||
font-size: 26rpx;
|
||||
color: #999;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.device-id {
|
||||
font-size: 26rpx;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
.device-right {
|
||||
|
||||
.time-info {
|
||||
.time-item {
|
||||
font-size: 26rpx;
|
||||
color: #666;
|
||||
margin-bottom: 10rpx;
|
||||
// 支付分标识
|
||||
.payment-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 6rpx 12rpx;
|
||||
border-radius: 8rpx;
|
||||
white-space: nowrap;
|
||||
|
||||
.label {
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.wx-score {
|
||||
background: rgba(7, 193, 96, 0.08);
|
||||
|
||||
.price-info {
|
||||
text-align: right;
|
||||
margin-top: 20rpx;
|
||||
.badge-icon {
|
||||
width: 32rpx;
|
||||
height: 26rpx;
|
||||
margin-right: 8rpx;
|
||||
}
|
||||
|
||||
.amount {
|
||||
font-size: 36rpx;
|
||||
color: #FF9800;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.badge-text {
|
||||
font-size: 22rpx;
|
||||
color: #07c160;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.empty-tip {
|
||||
padding: 100rpx 0;
|
||||
text-align: center;
|
||||
color: #999;
|
||||
font-size: 28rpx;
|
||||
.divider {
|
||||
margin: 0 6rpx;
|
||||
}
|
||||
|
||||
.empty-icon {
|
||||
width: 200rpx;
|
||||
height: 200rpx;
|
||||
margin: 0 auto 20rpx;
|
||||
background: #f0f0f0;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.highlight {
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.deposit {
|
||||
background: #f5f5f5;
|
||||
|
||||
.badge-text {
|
||||
font-size: 22rpx;
|
||||
color: #666;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.order-times {
|
||||
.time-row {
|
||||
display: flex;
|
||||
font-size: 26rpx;
|
||||
margin-bottom: 8rpx;
|
||||
|
||||
.time-label {
|
||||
color: #999;
|
||||
width: 140rpx;
|
||||
}
|
||||
|
||||
.time-value {
|
||||
color: #333;
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 订单底部
|
||||
.order-footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 20rpx 24rpx;
|
||||
background: #fafafa;
|
||||
border-top: 1rpx solid #f0f0f0;
|
||||
|
||||
.price {
|
||||
font-size: 34rpx;
|
||||
font-weight: 500;
|
||||
color: #ff6b6b;
|
||||
}
|
||||
|
||||
.actions {
|
||||
display: flex;
|
||||
|
||||
.action-item {
|
||||
font-size: 26rpx;
|
||||
padding: 10rpx 30rpx;
|
||||
border-radius: 30rpx;
|
||||
margin-left: 20rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
&.primary {
|
||||
background: #1976D2;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
&.secondary {
|
||||
background: #f5f5f5;
|
||||
color: #666;
|
||||
border: 1rpx solid #e0e0e0;
|
||||
}
|
||||
|
||||
&:active {
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 空状态
|
||||
.empty-state {
|
||||
padding: 100rpx 0;
|
||||
text-align: center;
|
||||
|
||||
.empty-icon {
|
||||
width: 180rpx;
|
||||
height: 180rpx;
|
||||
margin: 0 auto 30rpx;
|
||||
background: #f5f5f5;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.empty-text {
|
||||
font-size: 28rpx;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
+135
-40
@@ -8,8 +8,27 @@
|
||||
</view>
|
||||
|
||||
<view class="device-info">
|
||||
<text class="device-name">共享风扇</text>
|
||||
<text class="device-id">设备号：{{ deviceId }}</text>
|
||||
<view class="device-left">
|
||||
<view class="device-name">共享风扇</view>
|
||||
<view class="device-id">设备号：{{ deviceId }}</view>
|
||||
</view>
|
||||
|
||||
<!-- 支付方式标识 -->
|
||||
<view class="device-right">
|
||||
<!-- 微信支付分标识 -->
|
||||
<view class="payment-badge wx-score" v-if="orderInfo.payWay == 'wx_score_pay'">
|
||||
<image src="/static/images/wxpayflag.png" mode="aspectFit" class="badge-icon"></image>
|
||||
<view class="badge-text">
|
||||
<text>微信支付分</text>
|
||||
<text class="divider">|</text>
|
||||
<text class="highlight">免押租借</text>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 押金租借标识 -->
|
||||
<view class="payment-badge deposit" v-else>
|
||||
<text class="badge-text">押金租借</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="time-info">
|
||||
@@ -61,8 +80,8 @@
|
||||
|
||||
<!-- 底部操作栏 -->
|
||||
<view class="bottom-bar">
|
||||
<button class="secondary-btn" @click="checkReturnStatus">刷新状态</button>
|
||||
<button class="primary-btn" @click="goToHome">返回首页</button>
|
||||
<view class="action-item secondary" @click="checkReturnStatus">刷新状态</view>
|
||||
<view class="action-item primary" @click="goToHome">返回首页</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
@@ -83,7 +102,8 @@ export default {
|
||||
_rawStartTime: '', // 用于调试
|
||||
usedTime: '0分钟',
|
||||
currentFee: '0.00',
|
||||
orderStatus: 'in_used' // 默认状态为使用中
|
||||
orderStatus: 'in_used', // 默认状态为使用中
|
||||
payWay: '' // 新增支付方式字段
|
||||
},
|
||||
timer: null,
|
||||
statusCheckTimer: null,
|
||||
@@ -272,6 +292,11 @@ export default {
|
||||
this.orderInfo.orderStatus = orderData.orderStatus
|
||||
}
|
||||
|
||||
// 更新支付方式
|
||||
if (orderData.payWay) {
|
||||
this.orderInfo.payWay = orderData.payWay
|
||||
}
|
||||
|
||||
// 检查订单状态，如果已完成，显示归还成功弹窗
|
||||
if (orderData.orderStatus &&
|
||||
(orderData.orderStatus === 'used_done' || orderData.orderStatus === 'used_down')) {
|
||||
@@ -333,6 +358,11 @@ export default {
|
||||
this.orderInfo.orderStatus = orderData.orderStatus;
|
||||
}
|
||||
|
||||
// 更新支付方式
|
||||
if (orderData.payWay) {
|
||||
this.orderInfo.payWay = orderData.payWay;
|
||||
}
|
||||
|
||||
// 保存原始开始时间用于调试
|
||||
this.orderInfo._rawStartTime = orderData.startTime;
|
||||
|
||||
@@ -467,6 +497,11 @@ export default {
|
||||
this.orderInfo.orderStatus = inUseOrder.orderStatus
|
||||
}
|
||||
|
||||
// 如果有支付方式，更新支付方式
|
||||
if (inUseOrder.payWay) {
|
||||
this.orderInfo.payWay = inUseOrder.payWay
|
||||
}
|
||||
|
||||
// 如果有开始时间，直接更新
|
||||
if (inUseOrder.startTime) {
|
||||
console.log('inUse API返回的开始时间:', inUseOrder.startTime)
|
||||
@@ -523,14 +558,14 @@ export default {
|
||||
<style lang="scss" scoped>
|
||||
.return-container {
|
||||
min-height: 100vh;
|
||||
background: #f8f8f8;
|
||||
background: #f7f8fa;
|
||||
padding: 30rpx;
|
||||
padding-bottom: 180rpx;
|
||||
box-sizing: border-box;
|
||||
|
||||
.order-card {
|
||||
background: #fff;
|
||||
border-radius: 24rpx;
|
||||
border-radius: 20rpx;
|
||||
padding: 30rpx;
|
||||
margin-bottom: 30rpx;
|
||||
box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.04);
|
||||
@@ -539,10 +574,12 @@ export default {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 30rpx;
|
||||
margin-bottom: 20rpx;
|
||||
padding-bottom: 16rpx;
|
||||
border-bottom: 1rpx solid #f0f0f0;
|
||||
|
||||
.title {
|
||||
font-size: 32rpx;
|
||||
font-size: 30rpx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
@@ -554,18 +591,73 @@ export default {
|
||||
}
|
||||
|
||||
.device-info {
|
||||
margin-bottom: 30rpx;
|
||||
margin-bottom: 24rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
|
||||
.device-name {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
display: block;
|
||||
margin-bottom: 10rpx;
|
||||
.device-left {
|
||||
flex: 1;
|
||||
margin-right: 20rpx;
|
||||
|
||||
.device-name {
|
||||
font-size: 32rpx;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.device-id {
|
||||
font-size: 26rpx;
|
||||
color: #999;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.device-id {
|
||||
font-size: 24rpx;
|
||||
color: #666;
|
||||
.device-right {
|
||||
// 支付分标识
|
||||
.payment-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 6rpx 12rpx;
|
||||
border-radius: 8rpx;
|
||||
white-space: nowrap;
|
||||
|
||||
&.wx-score {
|
||||
background: rgba(7, 193, 96, 0.08);
|
||||
|
||||
.badge-icon {
|
||||
width: 32rpx;
|
||||
height: 26rpx;
|
||||
margin-right: 8rpx;
|
||||
}
|
||||
|
||||
.badge-text {
|
||||
font-size: 22rpx;
|
||||
color: #07c160;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.divider {
|
||||
margin: 0 6rpx;
|
||||
}
|
||||
|
||||
.highlight {
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.deposit {
|
||||
background: #f5f5f5;
|
||||
|
||||
.badge-text {
|
||||
font-size: 22rpx;
|
||||
color: #666;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -594,7 +686,7 @@ export default {
|
||||
color: #333;
|
||||
|
||||
&.highlight {
|
||||
color: #ff6b00;
|
||||
color: #ff6b6b;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
@@ -604,13 +696,13 @@ export default {
|
||||
|
||||
.notice-card {
|
||||
background: #fff;
|
||||
border-radius: 24rpx;
|
||||
border-radius: 20rpx;
|
||||
padding: 30rpx;
|
||||
margin-bottom: 30rpx;
|
||||
box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.04);
|
||||
|
||||
.notice-title {
|
||||
font-size: 28rpx;
|
||||
font-size: 30rpx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
margin-bottom: 20rpx;
|
||||
@@ -650,7 +742,8 @@ export default {
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
padding: 30rpx;
|
||||
padding: 20rpx 30rpx;
|
||||
padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
|
||||
background: #fff;
|
||||
box-shadow: 0 -4rpx 16rpx rgba(0,0,0,0.04);
|
||||
z-index: 10;
|
||||
@@ -658,30 +751,32 @@ export default {
|
||||
justify-content: space-between;
|
||||
gap: 20rpx;
|
||||
|
||||
.primary-btn, .secondary-btn {
|
||||
.action-item {
|
||||
height: 88rpx;
|
||||
line-height: 88rpx;
|
||||
font-size: 32rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 30rpx;
|
||||
border-radius: 44rpx;
|
||||
text-align: center;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.primary-btn {
|
||||
background: #07c160;
|
||||
color: #fff;
|
||||
|
||||
&:active {
|
||||
opacity: 0.8;
|
||||
&.primary {
|
||||
background: #07c160;
|
||||
color: #fff;
|
||||
|
||||
&:active {
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.secondary-btn {
|
||||
background: #f0f0f0;
|
||||
color: #333;
|
||||
|
||||
&:active {
|
||||
opacity: 0.8;
|
||||
&.secondary {
|
||||
background: #f5f5f5;
|
||||
color: #333;
|
||||
border: 1rpx solid #e0e0e0;
|
||||
|
||||
&:active {
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user