252 lines
6.4 KiB
Vue
252 lines
6.4 KiB
Vue
<template>
|
||
<view class="container">
|
||
<view class="flex justify-center padding">
|
||
<!-- 消费选项 -->
|
||
<view class="text-center" style="width: 80px;">
|
||
<view class="wztitle" :class="{ active: selectedTab === 'consume' }" @click="selectTab('consume')">
|
||
消费
|
||
</view>
|
||
<view class="selectTop" v-if="selectedTab === 'consume'"></view>
|
||
</view>
|
||
|
||
<!-- 分隔符 -->
|
||
<view class="separator">|</view>
|
||
|
||
<!-- 退款选项 -->
|
||
<view class="text-center" style="width: 80px;">
|
||
<view class="wztitle" :class="{ active: selectedTab === 'refund' }" @click="selectTab('refund')">
|
||
退款
|
||
</view>
|
||
<view class="selectTop" v-if="selectedTab === 'refund'"></view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 切换的页面内容 -->
|
||
<view class="content">
|
||
<view v-show="selectedTab === 'consume'">
|
||
<!-- 消费页面内容 -->
|
||
<z-paging ref="paging_consume" :fixed="false" height="85vh" v-model="ConsumeDataList"
|
||
@query="loadMoreDataConsume" :default-page-no="1" :default-page-size="4"
|
||
:auto-show-back-to-top="true">
|
||
<uni-card :title="'电车'">
|
||
<view class="flex justify-between card-header">
|
||
<view class="order-time">提交时间：2025-04-07 14:25:12</view>
|
||
</view>
|
||
|
||
<view class="flex justify-between card-info">
|
||
<view class="ride-info">
|
||
<image :src="`${imgPath}static/userui/icon/问题描述.png`"></image>
|
||
<span>问题描述:车把坏了……</span>
|
||
</view>
|
||
</view>
|
||
<view class="text-right status-tag">
|
||
<span class="corui-ride-in-progress">骑行中</span>
|
||
</view>
|
||
</uni-card>
|
||
<uni-card :title="'电车'">
|
||
<view class="flex justify-between card-header">
|
||
<view class="order-time">提交时间：2025-04-07 14:25:12</view>
|
||
</view>
|
||
|
||
<view class="flex justify-between card-info">
|
||
<view class="ride-info">
|
||
<image :src="`${imgPath}userui/icon/问题描述.png`"></image>
|
||
<span>问题描述:车把坏了……</span>
|
||
</view>
|
||
</view>
|
||
<view class="text-right status-tag">
|
||
<span class="corui-completed">已完成</span>
|
||
</view>
|
||
</uni-card>
|
||
</z-paging>
|
||
</view>
|
||
|
||
<view v-show="selectedTab === 'refund'">
|
||
<!-- 退款页面内容 -->
|
||
<z-paging ref="paging_refund" :fixed="false" height="85vh" v-model="RefundDataList"
|
||
@query="loadMoreDataRefund" :default-page-no="1" :default-page-size="4"
|
||
:auto-show-back-to-top="true">
|
||
<uni-card :title="'电车'" @click="goToRepairDetails">
|
||
<view class="flex justify-between card-header">
|
||
<view class="order-time">提交时间：2025-04-07 14:25:11</view>
|
||
</view>
|
||
<view class="flex justify-between card-info">
|
||
<view class="ride-info">
|
||
<image :src="`${imgPath}static/userui/icon/问题描述.png`"></image>
|
||
<span>问题描述:车把坏了……</span>
|
||
</view>
|
||
</view>
|
||
<view class="text-right status-tag">
|
||
<span class="corui-processing">处理中</span>
|
||
</view>
|
||
</uni-card>
|
||
<uni-card :title="'电车'">
|
||
<view class="flex justify-between card-header">
|
||
<view class="order-time">提交时间：2025-04-07 14:25:12</view>
|
||
</view>
|
||
<view class="flex justify-between card-info">
|
||
<view class="ride-info">
|
||
<image :src="`${imgPath}static/userui/icon/问题描述.png`"></image>
|
||
<span>问题描述:车把坏了……</span>
|
||
</view>
|
||
</view>
|
||
<view class="text-right status-tag">
|
||
<span class="corui-completed">已完成</span>
|
||
</view>
|
||
</uni-card>
|
||
</z-paging>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, onMounted } from 'vue';
|
||
import * as api from '@/utils/api.js';
|
||
import config from '@/utils/config';
|
||
const imgPath = config.imgPath;
|
||
|
||
// 使用ref来声明选中的标签
|
||
const selectedTab = ref('consume');
|
||
// 切换选中的标签
|
||
const selectTab = (tab) => {
|
||
selectedTab.value = tab;
|
||
};
|
||
|
||
const paging_consume = ref(null);
|
||
const paging_refund = ref(null);
|
||
const RefundDataList = ref([]);
|
||
const ConsumeDataList = ref([]);
|
||
const scrollHeight = ref(null);
|
||
|
||
// 加载消费数据
|
||
const loadMoreDataConsume = (pageNo, pageSize) => {
|
||
const params = {
|
||
"用户ID": 123,
|
||
"pageParam": { "pageNum": pageNo, "pageSize": pageSize }
|
||
};
|
||
|
||
api.callEbikeInfo("订单接口？？？", params).then((res) => {
|
||
if (res.code === 200) {
|
||
const records = res.data;
|
||
paging_consume.value.complete(records);
|
||
} else {
|
||
paging_consume.value.complete(false);
|
||
}
|
||
});
|
||
};
|
||
const goToRepairDetails =()=>{
|
||
uni.navigateTo({
|
||
url: '/pages/user/login/RepairDetails'
|
||
});
|
||
}
|
||
|
||
// 加载退款数据
|
||
const loadMoreDataRefund = (pageNo, pageSize) => {
|
||
const params = {
|
||
"用户ID": 123,
|
||
"pageParam": { "pageNum": pageNo, "pageSize": pageSize }
|
||
};
|
||
|
||
api.callEbikeInfo("订单接口？？？", params).then((res) => {
|
||
if (res.code === 200) {
|
||
const records = res.data;
|
||
paging_refund.value.complete(records);
|
||
} else {
|
||
paging_refund.value.complete(false);
|
||
}
|
||
});
|
||
};
|
||
|
||
onMounted(() => {
|
||
// 获取设备信息
|
||
const systemInfo = uni.getSystemInfoSync();
|
||
const screenHeight = systemInfo.screenHeight;
|
||
const statusBarHeight = systemInfo.statusBarHeight;
|
||
scrollHeight.value = screenHeight - statusBarHeight;
|
||
});
|
||
</script>
|
||
|
||
<style scoped>
|
||
.container {
|
||
height: 100vh;
|
||
background-color: white;
|
||
}
|
||
|
||
.selectTop {
|
||
width: 20px;
|
||
height: 2px;
|
||
background-color: rgb(76, 188, 74);
|
||
margin-left: 30px;
|
||
margin-top: 5px;
|
||
border-radius: 2px;
|
||
}
|
||
|
||
.separator {
|
||
color: rgb(202, 202, 202);
|
||
}
|
||
|
||
.wztitle {
|
||
font-size: 16px;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.active {
|
||
color: rgb(76, 188, 74);
|
||
}
|
||
|
||
.card-header {
|
||
font-size: 14px;
|
||
color: #333;
|
||
}
|
||
|
||
.card-header .order-time {
|
||
font-size: 12px;
|
||
color: #a2a2a2;
|
||
}
|
||
|
||
.card-info {
|
||
margin-top: 2px;
|
||
font-size: 16px;
|
||
}
|
||
|
||
.card-info .ride-info {
|
||
color: rgb(15, 27, 38);
|
||
font-size: 15px;
|
||
}
|
||
|
||
.card-info .ride-info image {
|
||
width: 15px;
|
||
height: 15px;
|
||
margin-right: 5px;
|
||
}
|
||
|
||
.status-tag {
|
||
margin-top: 2px;
|
||
}
|
||
|
||
.corui-ride-in-progress {
|
||
background-color: rgb(37, 172, 51);
|
||
color: #fff;
|
||
padding: 4px 10px;
|
||
font-size: 12px;
|
||
border-radius: 5px;
|
||
}
|
||
|
||
.corui-completed {
|
||
background-color: rgb(195, 198, 203);
|
||
color: #fff;
|
||
padding: 4px 10px;
|
||
font-size: 12px;
|
||
border-radius: 5px;
|
||
}
|
||
|
||
.corui-processing {
|
||
background-color: rgb(218, 102, 17);
|
||
color: #fff;
|
||
padding: 4px 10px;
|
||
font-size: 12px;
|
||
border-radius: 5px;
|
||
}
|
||
</style>
|