Skip to content

杨炀 / ztx_wx_gzt

Go to a project
Toggle navigation
Toggle navigation pinning
bb440033 by 张猛
Options

个人会员缴费

1 parent 7d6c26f4
Inline Side-by-side
Showing 1 changed file with 56 additions and 49 deletions
personal/order.vue
<template>
<view class="order-page" :class="{ 'no-scroll': isPopupOpen }">
<view :class="{ 'no-scroll': isPopupOpen }" class="order-page">
<!-- 订单列表 -->
<scroll-view
scroll-y
class="order-list-scroll"
:enhanced="true"
:show-scrollbar="false"
<scroll-view
:enhanced="true"
:scroll-enabled="!isPopupOpen"
:show-scrollbar="false"
class="order-list-scroll"
scroll-y
>
<view class="order-list">
<!-- 有数据才循环 -->
......@@ -19,21 +19,22 @@
<!-- 订单头部：日期 + 状态 -->
<view class="card-header">
<view class="date">
<image :src="config.baseUrl_api + '/fs/static/calendar@2x.png'" v-if="item.payTime" mode="widthFix" style="width:30rpx;height:30rpx;"/>
<text class="date-text" v-if="item.payTime">{{ item.payTime }}</text>
<image v-if="item.payTime" :src="config.baseUrl_api + '/fs/static/calendar@2x.png'" mode="widthFix"
style="width:30rpx;height:30rpx;"/>
<text v-if="item.payTime" class="date-text">{{ item.payTime }}</text>
</view>
<view
class="status-tag"
:class="{
success: item.payStatus == 1,
danger: item.payStatus == 2,
pending: item.payStatus == 0
}"
class="status-tag"
>
{{ getStatusText(item.payStatus) }}
</view>
</view>
<!-- 订单编号、缴费编号 -->
<view class="info-row">
<text class="label">订单编号：</text>
......@@ -43,9 +44,9 @@
<text class="label">缴费编号：</text>
<text class="value">{{ item.wfCode || '——' }}</text>
</view>
<!-- 核心：个人会员仅展示缴费年限 -->
<view class="info-section flex f-j-s" v-if="item.content">
<view v-if="item.content" class="info-section flex f-j-s">
<view class="single-info">
<view class="label">缴费年限：</view>
<view class="value">{{ item.content.yearCount || 0 }}</view>
......@@ -56,43 +57,43 @@
<view class="value">民生付</view>
</view>
</view>
<!-- 费用合计 -->
<view class="total-row">
<text class="label">费用合计：</text>
<text class="amount">¥{{ (Number(item.price) || 0).toFixed(2) }}</text>
</view>
<!-- 按钮组：靠右紧凑展示 -->
<view class="btn-group">
<button class="btn btn-delete" @click="handleDelete(item)">删除</button>
<!-- <button class="btn btn-delete" @click="handleDelete(item)">删除</button>-->
<!-- 已缴费：申请开票/已开票 -->
<template v-if="item.payStatus == 1">
<button class="btn btn-invoice" @click="makeInvoiceFN(item)" :disabled="item.invoiceStatus === 1">
<button :disabled="item.invoiceStatus === 1" class="btn btn-invoice" @click="makeInvoiceFN(item)">
{{ item.invoiceStatus === 1 ? '已开票' : '申请开票' }}
</button>
</template>
<!-- 未缴费：去缴费 + 取消订单 -->
<template v-if="item.payStatus == 0">
<button class="btn btn-cancel" @click="handleCancel(item)">取消订单</button>
<button class="btn btn-pay" @click="handlePay(item)">去缴费</button>
</template>
<!-- &lt;!&ndash; 未缴费：去缴费 + 取消订单 &ndash;&gt;-->
<!-- <template v-if="item.payStatus == 0">-->
<!-- <button class="btn btn-cancel" @click="handleCancel(item)">取消订单</button>-->
<!-- <button class="btn btn-pay" @click="handlePay(item)">去缴费</button>-->
<!-- </template>-->
</view>
</view>
</view>
<!-- 空状态 -->
<view v-else class="empty">
<image class="empty-img" mode="aspectFit" :src="config.baseUrl_api + '/fs/static/nodata.png'"></image>
<view v-else class="empty">
<image :src="config.baseUrl_api + '/fs/static/nodata.png'" class="empty-img" mode="aspectFit"></image>
<text class="empty-text">暂无订单记录</text>
</view>
<!-- 加载/无更多提示 -->
<view class="loading-tip" v-if="loading">加载中...</view>
<view class="no-more" v-if="!loading && !hasMore && list.length">没有更多了</view>
<view v-if="loading" class="loading-tip">加载中...</view>
<view v-if="!loading && !hasMore && list.length" class="no-more">没有更多了</view>
</view>
</scroll-view>
<!-- 自定义删除确认弹窗 -->
<view v-if="showDelPopup" class="popup-mask" @touchmove.stop.prevent @click.stop="closeDelPopup">
<view class="custom-modal" @click.stop>
......@@ -104,7 +105,7 @@
</view>
</view>
</view>
<!-- 自定义取消订单确认弹窗 -->
<view v-if="showCancelPopup" class="popup-mask" @touchmove.stop.prevent @click.stop="closeCancelPopup">
<view class="custom-modal" @click.stop>
......@@ -120,11 +121,12 @@
</template>
<script setup>
import { ref, reactive, onMounted,computed } from 'vue';
import { onReachBottom } from '@dcloudio/uni-app'
import { useUserStore } from "../store/modules/user";
import {ref, reactive, onMounted, computed} from 'vue';
import {onReachBottom} from '@dcloudio/uni-app'
import {useUserStore} from "../store/modules/user";
import * as api from '@/common/api.js'
import config from '@/config.js'
const userStore = useUserStore()
// 数据与分页配置
const list = ref([]);
......@@ -158,12 +160,14 @@ const currentOrder = ref(null);
// 页面挂载初始化
onMounted(() => {
// 获取用户信息
if (userInfo.value && userInfo.value.perId) {
queryParams.perId = userInfo.value.perId;
initData();
} else {
uni.showToast({ title: '获取用户信息失败', icon: 'none' });
}
// if (userInfo.value && userInfo.value.perId) {
// queryParams.perId = userInfo.value.perId;
// initData();
// } else {
// uni.showToast({title: '获取用户信息失败', icon: 'none'});
// }
initData();
});
// 小程序原生触底加载
......@@ -215,7 +219,7 @@ const initData = async () => {
hasMore.value = list.value.length < (res.total || 0);
} catch (e) {
console.error('订单加载异常：', e);
uni.showToast({ title: '加载失败', icon: 'none' });
uni.showToast({title: '加载失败', icon: 'none'});
} finally {
loading.value = false;
}
......@@ -234,13 +238,13 @@ const confirmDel = async () => {
if (!currentOrder.value) return;
try {
await api.deleteOrder(currentOrder.value.id);
uni.showToast({ title: '删除成功', icon: 'success' });
uni.showToast({title: '删除成功', icon: 'success'});
pageNum.value = 1;
list.value = [];
initData();
closeDelPopup();
} catch (e) {
uni.showToast({ title: '删除失败', icon: 'error' });
uni.showToast({title: '删除失败', icon: 'error'});
}
};
......@@ -255,16 +259,16 @@ const closeDelPopup = () => {
const handlePay = async (item) => {
if (item.payStatus !== 0) return;
try {
await api.goPay({ id: item.id });
uni.navigateTo({ url: `/pages/pay/pay?orderId=${item.id}` });
await api.goPay({id: item.id});
uni.navigateTo({url: `/pages/pay/pay?orderId=${item.id}`});
} catch (e) {
uni.showToast({ title: '发起支付失败', icon: 'none' });
uni.showToast({title: '发起支付失败', icon: 'none'});
}
};
// 申请开票
const makeInvoiceFN = (item) => {
uni.navigateTo({ url: `/pages/invoice/apply?orderId=${item.id}amount=${item.price}` });
uni.navigateTo({url: `/pages/invoice/apply?orderId=${item.id}amount=${item.price}`});
};
// 取消订单
......@@ -280,13 +284,13 @@ const confirmCancel = async () => {
if (!currentOrder.value) return;
try {
await api.cancelPay(currentOrder.value.id);
uni.showToast({ title: '取消成功', icon: 'success' });
uni.showToast({title: '取消成功', icon: 'success'});
pageNum.value = 1;
list.value = [];
initData();
closeCancelPopup();
} catch (e) {
uni.showToast({ title: '取消失败', icon: 'error' });
uni.showToast({title: '取消失败', icon: 'error'});
}
};
......@@ -402,15 +406,18 @@ const closeCancelPopup = () => {
justify-content: space-around;
margin: 20rpx 0;
}
.line{
.line {
width: 1rpx;
height: 90%;
background: #eee;
}
.single-info {
padding: 16rpx 20rpx;
border-radius: 8rpx;
font-size: 26rpx;
.label {
color: #999;
text-align: center;
......@@ -590,4 +597,4 @@ const closeCancelPopup = () => {
border: none;
}
}
</style>
\ No newline at end of file
</style>
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!