添加就餐相关页面
This commit is contained in:
ywyonui
parent
9ffab44ca4
commit
a27e4e8a40
92
src/api/base/jcApi.ts
Normal file
92
src/api/base/jcApi.ts
Normal file
@ -0,0 +1,92 @@
|
||||
import { get, post } from "@/utils/request";
|
||||
|
||||
/**
|
||||
* 获取就餐标准列表
|
||||
*/
|
||||
export const jcGetJcBzListApi = async (params: any) => {
|
||||
return await get("/mobile/jc/getJcBzList", params);
|
||||
};
|
||||
|
||||
/**
|
||||
* 获取就餐标准详情
|
||||
*/
|
||||
export const jcGetJcBzDetailApi = async (params: any) => {
|
||||
return await get("/mobile/jc/getJcBzDetail", params);
|
||||
};
|
||||
|
||||
/**
|
||||
* 学生报名就餐标准
|
||||
*/
|
||||
export const jcBmJcBzApi = async (params: any) => {
|
||||
return await post("/mobile/jc/bmJcBz", params);
|
||||
};
|
||||
|
||||
/**
|
||||
* 获取学生已报名的就餐标准列表
|
||||
*/
|
||||
export const jcGetXsBmJcBzListApi = async (params: any) => {
|
||||
return await get("/mobile/jc/getXsBmJcBzList", params);
|
||||
};
|
||||
|
||||
/**
|
||||
* 取消报名就餐标准
|
||||
*/
|
||||
export const jcCancelBmJcBzApi = async (params: any) => {
|
||||
return await post("/mobile/jc/cancelBmJcBz", params);
|
||||
};
|
||||
|
||||
/**
|
||||
* 获取就餐标准报名倒计时
|
||||
*/
|
||||
export const jcGetBmExpiredTimeApi = async (params: any) => {
|
||||
return await get("/mobile/jc/getBmExpiredTime", params);
|
||||
};
|
||||
|
||||
/**
|
||||
* 发起就餐标准缴费
|
||||
*/
|
||||
export const jcFqJcBzJfjApi = async (params: any) => {
|
||||
return await post("/mobile/jc/fqJcBzJfj", params);
|
||||
};
|
||||
|
||||
/**
|
||||
* 查询就餐标准缴费状态
|
||||
*/
|
||||
export const jcJcBzJfCxjApi = async (params: any) => {
|
||||
return await post("/mobile/jc/jcBzJfcx", params);
|
||||
};
|
||||
|
||||
/**
|
||||
* 获取就餐标准报名学生列表
|
||||
*/
|
||||
export const jcGetJcBzBmXsListApi = async (params: any) => {
|
||||
return await get("/mobile/jc/getJcBzBmXsList", params);
|
||||
};
|
||||
|
||||
/**
|
||||
* 获取就餐标准统计信息
|
||||
*/
|
||||
export const jcGetJcBzTjInfoApi = async (params: any) => {
|
||||
return await get("/mobile/jc/getJcBzTjInfo", params);
|
||||
};
|
||||
|
||||
/**
|
||||
* 获取当前学期就餐标准配置
|
||||
*/
|
||||
export const jcGetDqXqJcBzConfigApi = async () => {
|
||||
return await get("/mobile/jc/getDqXqJcBzConfig");
|
||||
};
|
||||
|
||||
/**
|
||||
* 获取学生就餐记录
|
||||
*/
|
||||
export const jcGetXsJcJlApi = async (params: any) => {
|
||||
return await get("/mobile/jc/getXsJcJl", params);
|
||||
};
|
||||
|
||||
/**
|
||||
* 获取就餐标准支付倒计时
|
||||
*/
|
||||
export const jcGetJcBzPayExpiredTimeApi = async (params: any) => {
|
||||
return await get("/mobile/jc/getJcBzPayExpiredTime", params);
|
||||
};
|
||||
265
src/pages/base/components/JcBzList/index.vue
Normal file
265
src/pages/base/components/JcBzList/index.vue
Normal file
@ -0,0 +1,265 @@
|
||||
<template>
|
||||
<view>
|
||||
<!-- 就餐标准网格列表 -->
|
||||
<view class="jc-bz-grid" v-if="jcBzList.length > 0">
|
||||
<view
|
||||
v-for="(jcBz, index) in jcBzList"
|
||||
:key="jcBz.id || index"
|
||||
class="jc-bz-item"
|
||||
:class="{ selected: jcBz.isSelected }"
|
||||
@click="toggleSelection(jcBz)"
|
||||
>
|
||||
<view class="jc-bz-header">
|
||||
<view class="jc-bz-name">{{ jcBz.bzmc }}</view>
|
||||
<view class="detail-btn" @click.stop="goToDetail(jcBz)">
|
||||
<image src="/static/base/home/details.svg" class="detail-icon" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="jc-bz-info">
|
||||
<view class="jc-bz-price">
|
||||
<text>价格：</text>
|
||||
<text class="price-value">¥{{ jcBz.jfje }}</text>
|
||||
</view>
|
||||
<view class="jc-bz-desc">{{ jcBz.bzms || '暂无描述' }}</view>
|
||||
</view>
|
||||
<view v-if="jcBz.isSelected" class="selected-mark">
|
||||
<uni-icons
|
||||
type="checkbox-filled"
|
||||
color="#3FBF72"
|
||||
size="22"
|
||||
></uni-icons>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 暂无数据提示 -->
|
||||
<view v-else class="empty-jc-bz-list">
|
||||
<view class="empty-icon">
|
||||
<u-icon name="list" size="50" color="#C8C9CC"></u-icon>
|
||||
</view>
|
||||
<view class="empty-text">暂无就餐标准数据</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, watch, onMounted } from "vue";
|
||||
import { useDataStore } from "@/store/modules/data";
|
||||
import { jcGetJcBzListApi } from "@/api/base/jcApi";
|
||||
const { setJcBzData } = useDataStore();
|
||||
|
||||
// 接收外部传入属性并设置默认值
|
||||
const props = withDefaults(defineProps<{
|
||||
xsId: string,
|
||||
canSelected: boolean,
|
||||
multiple: boolean,
|
||||
}>(), {
|
||||
xsId: '',
|
||||
canSelected: false,
|
||||
multiple: false,
|
||||
});
|
||||
|
||||
// 定义一个上级传入的emit响应事件用于接收数据变更
|
||||
const emit = defineEmits(['change'])
|
||||
|
||||
// 就餐标准列表数据
|
||||
const jcBzList = ref<any>([]);
|
||||
|
||||
// 获取就餐标准列表
|
||||
const getJcBzList = async () => {
|
||||
try {
|
||||
const res = await jcGetJcBzListApi({
|
||||
xsId: props.xsId
|
||||
});
|
||||
if (res.resultCode === 1) {
|
||||
jcBzList.value = res.result || [];
|
||||
// 初始化选中状态
|
||||
initSelectedStatus();
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取就餐标准列表失败:', error);
|
||||
}
|
||||
};
|
||||
|
||||
// 初始化选中状态
|
||||
const initSelectedStatus = () => {
|
||||
// 获取本地存储的已选就餐标准ID数组
|
||||
let selectedJcBzIds = uni.getStorageSync("selectedJcBzIds") || [];
|
||||
|
||||
jcBzList.value.forEach((jcBz: any) => {
|
||||
jcBz.isSelected = selectedJcBzIds.includes(jcBz.id);
|
||||
});
|
||||
};
|
||||
|
||||
// 切换选餐标准
|
||||
const toggleSelection = (jcBz: any) => {
|
||||
if (!props.canSelected) {
|
||||
return;
|
||||
}
|
||||
// 获取本地存储的已选就餐标准ID数组
|
||||
let selectedJcBzIds = uni.getStorageSync("selectedJcBzIds") || [];
|
||||
if (jcBz.isSelected) {
|
||||
jcBz.isSelected = false;
|
||||
if (props.multiple) {
|
||||
// 如果是多选，则从已选数组中移除
|
||||
selectedJcBzIds = selectedJcBzIds.filter(
|
||||
(id: string) => id !== jcBz.id
|
||||
);
|
||||
} else {
|
||||
// 如果是单选，则清空已选数组
|
||||
selectedJcBzIds = [];
|
||||
}
|
||||
} else {
|
||||
if (props.multiple) {
|
||||
// 如果是多选，则添加到已选数组
|
||||
if (!selectedJcBzIds.includes(jcBz.id)) {
|
||||
selectedJcBzIds.push(jcBz.id);
|
||||
}
|
||||
} else {
|
||||
// 如果是单选，则清空已选数组并添加当前标准
|
||||
selectedJcBzIds = [jcBz.id];
|
||||
// 清理选中状态
|
||||
jcBzList.value.forEach((jcBz: any) => {
|
||||
jcBz.isSelected = false;
|
||||
});
|
||||
}
|
||||
jcBz.isSelected = true;
|
||||
}
|
||||
// 更新本地存储
|
||||
uni.setStorageSync("selectedJcBzIds", selectedJcBzIds);
|
||||
emit("change", selectedJcBzIds);
|
||||
}
|
||||
|
||||
const goToDetail = (jcBz: any) => {
|
||||
setJcBzData(jcBz);
|
||||
uni.navigateTo({
|
||||
url: `/pages/base/jc/detail`,
|
||||
});
|
||||
};
|
||||
|
||||
// 监听学生ID变更
|
||||
watch(() => props.xsId, (newVal) => {
|
||||
if (newVal) {
|
||||
getJcBzList();
|
||||
}
|
||||
});
|
||||
|
||||
// 初始化
|
||||
onMounted(() => {
|
||||
if (props.xsId) {
|
||||
getJcBzList();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.jc-bz-grid {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding: 15px 15px 0 15px;
|
||||
|
||||
.jc-bz-item {
|
||||
position: relative;
|
||||
width: calc(50% - 10px);
|
||||
margin-bottom: 15px;
|
||||
background-color: #fff;
|
||||
border-radius: 8px;
|
||||
padding: 15px;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid transparent;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:nth-child(odd) {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
&:nth-child(even) {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
&.selected {
|
||||
border: 1px solid #3fbf72;
|
||||
background-color: rgba(63, 191, 114, 0.05);
|
||||
box-shadow: 0 2px 8px rgba(63, 191, 114, 0.15);
|
||||
}
|
||||
|
||||
.jc-bz-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 10px;
|
||||
|
||||
.jc-bz-name {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
flex: 1;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.detail-btn {
|
||||
flex-shrink: 0;
|
||||
padding: 4px;
|
||||
|
||||
.detail-icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.jc-bz-info {
|
||||
.jc-bz-price {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
margin-bottom: 8px;
|
||||
|
||||
.price-value {
|
||||
color: #ff6b00;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.jc-bz-desc {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
line-height: 1.4;
|
||||
}
|
||||
}
|
||||
|
||||
.selected-mark {
|
||||
position: absolute;
|
||||
top: -6px;
|
||||
right: -6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 暂无数据样式
|
||||
.empty-jc-bz-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 60px 20px;
|
||||
text-align: center;
|
||||
|
||||
.empty-icon {
|
||||
margin-bottom: 20px;
|
||||
background-color: #f5f6f7;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.empty-text {
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
color: #303133;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
221
src/pages/base/components/JcRecordList/index.vue
Normal file
221
src/pages/base/components/JcRecordList/index.vue
Normal file
@ -0,0 +1,221 @@
|
||||
<template>
|
||||
<view>
|
||||
<!-- 就餐记录列表 -->
|
||||
<view class="jc-record-list" v-if="jcRecordList.length > 0">
|
||||
<view
|
||||
v-for="(record, index) in jcRecordList"
|
||||
:key="record.id || index"
|
||||
class="record-item"
|
||||
>
|
||||
<view class="record-header">
|
||||
<view class="record-date">{{ formatDate(record.jcDate) }}</view>
|
||||
<view class="record-status" :class="getStatusClass(record.status)">
|
||||
{{ getStatusText(record.status) }}
|
||||
</view>
|
||||
</view>
|
||||
<view class="record-content">
|
||||
<view class="record-info">
|
||||
<view class="record-bz">{{ record.bzmc }}</view>
|
||||
<view class="record-time">{{ record.jcTime }}</view>
|
||||
</view>
|
||||
<view class="record-price">¥{{ record.jfje }}</view>
|
||||
</view>
|
||||
<view class="record-footer">
|
||||
<view class="record-location">{{ record.jcLocation || '暂无地点信息' }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 暂无数据提示 -->
|
||||
<view v-else class="empty-record-list">
|
||||
<view class="empty-icon">
|
||||
<u-icon name="list" size="50" color="#C8C9CC"></u-icon>
|
||||
</view>
|
||||
<view class="empty-text">暂无就餐记录</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, watch, onMounted } from "vue";
|
||||
import { jcGetXsJcJlApi } from "@/api/base/jcApi";
|
||||
|
||||
// 接收外部传入属性并设置默认值
|
||||
const props = withDefaults(defineProps<{
|
||||
xsId: string,
|
||||
}>(), {
|
||||
xsId: '',
|
||||
});
|
||||
|
||||
// 就餐记录列表数据
|
||||
const jcRecordList = ref<any>([]);
|
||||
|
||||
// 获取就餐记录列表
|
||||
const getJcRecordList = async () => {
|
||||
try {
|
||||
const res = await jcGetXsJcJlApi({
|
||||
xsId: props.xsId
|
||||
});
|
||||
if (res.resultCode === 1) {
|
||||
jcRecordList.value = res.result || [];
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取就餐记录失败:', error);
|
||||
}
|
||||
};
|
||||
|
||||
// 格式化日期
|
||||
const formatDate = (dateStr: string) => {
|
||||
if (!dateStr) return '';
|
||||
const date = new Date(dateStr);
|
||||
return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
|
||||
};
|
||||
|
||||
// 获取状态样式类
|
||||
const getStatusClass = (status: string) => {
|
||||
switch (status) {
|
||||
case '1': return 'status-success';
|
||||
case '2': return 'status-pending';
|
||||
case '3': return 'status-cancelled';
|
||||
default: return 'status-default';
|
||||
}
|
||||
};
|
||||
|
||||
// 获取状态文本
|
||||
const getStatusText = (status: string) => {
|
||||
switch (status) {
|
||||
case '1': return '已完成';
|
||||
case '2': return '进行中';
|
||||
case '3': return '已取消';
|
||||
default: return '未知状态';
|
||||
}
|
||||
};
|
||||
|
||||
// 监听学生ID变更
|
||||
watch(() => props.xsId, (newVal) => {
|
||||
if (newVal) {
|
||||
getJcRecordList();
|
||||
}
|
||||
});
|
||||
|
||||
// 初始化
|
||||
onMounted(() => {
|
||||
if (props.xsId) {
|
||||
getJcRecordList();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.jc-record-list {
|
||||
padding: 15px;
|
||||
|
||||
.record-item {
|
||||
background-color: #fff;
|
||||
border-radius: 8px;
|
||||
padding: 15px;
|
||||
margin-bottom: 15px;
|
||||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
|
||||
|
||||
.record-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 10px;
|
||||
|
||||
.record-date {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.record-status {
|
||||
font-size: 12px;
|
||||
padding: 2px 8px;
|
||||
border-radius: 10px;
|
||||
|
||||
&.status-success {
|
||||
background-color: #f0f9ff;
|
||||
color: #3fbf72;
|
||||
}
|
||||
|
||||
&.status-pending {
|
||||
background-color: #fff7e6;
|
||||
color: #ff8c00;
|
||||
}
|
||||
|
||||
&.status-cancelled {
|
||||
background-color: #fff2f0;
|
||||
color: #ff4d4f;
|
||||
}
|
||||
|
||||
&.status-default {
|
||||
background-color: #f5f5f5;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.record-content {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 10px;
|
||||
|
||||
.record-info {
|
||||
.record-bz {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.record-time {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
|
||||
.record-price {
|
||||
font-size: 16px;
|
||||
color: #ff6b00;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.record-footer {
|
||||
.record-location {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 暂无数据样式
|
||||
.empty-record-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 60px 20px;
|
||||
text-align: center;
|
||||
|
||||
.empty-icon {
|
||||
margin-bottom: 20px;
|
||||
background-color: #f5f6f7;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.empty-text {
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
color: #303133;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
223
src/pages/base/jc/bm.vue
Normal file
223
src/pages/base/jc/bm.vue
Normal file
@ -0,0 +1,223 @@
|
||||
<template>
|
||||
<view class="jc-bm-page">
|
||||
<!-- 报名信息头部 - 固定部分 -->
|
||||
<view class="selection-header">
|
||||
<view class="header-content">
|
||||
<!-- 学生选择部分 -->
|
||||
<XsPicker :is-bar="true" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 可滚动的内容区域 -->
|
||||
<view class="scrollable-content">
|
||||
<JcBzList :xs-id="curXs.id" :can-selected="true" :multiple="true" @change="onJcBzChange" />
|
||||
</view>
|
||||
|
||||
<!-- 底部操作区域 -->
|
||||
<view class="bottom-action">
|
||||
<view class="selected-info">
|
||||
<text>已选择：{{ selectedCount }} 个就餐标准</text>
|
||||
<text class="total-price">总金额：¥{{ totalPrice }}</text>
|
||||
</view>
|
||||
<view class="action-buttons">
|
||||
<view class="cancel-btn" @click="goBack">取消</view>
|
||||
<view class="confirm-btn" @click="confirmBm" :class="{ disabled: selectedCount === 0 }">确认报名</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import XsPicker from "@/pages/base/components/XsPicker/index.vue"
|
||||
import JcBzList from "@/pages/base/components/JcBzList/index.vue"
|
||||
import { useUserStore } from "@/store/modules/user";
|
||||
import { useDataStore } from "@/store/modules/data";
|
||||
import { jcBmJcBzApi } from "@/api/base/jcApi";
|
||||
|
||||
const { getCurXs, getUser } = useUserStore();
|
||||
const { getData, setData } = useDataStore();
|
||||
|
||||
const curXs = computed(() => getCurXs);
|
||||
|
||||
// 选中的就餐标准ID列表
|
||||
const selectedJcBzIds = ref<string[]>([]);
|
||||
// 选中的就餐标准列表
|
||||
const selectedJcBzList = ref<any[]>([]);
|
||||
|
||||
// 选中数量
|
||||
const selectedCount = computed(() => selectedJcBzIds.value.length);
|
||||
|
||||
// 总金额
|
||||
const totalPrice = computed(() => {
|
||||
let total = 0;
|
||||
selectedJcBzList.value.forEach(jcBz => {
|
||||
total += jcBz.jfje || 0;
|
||||
});
|
||||
return total;
|
||||
});
|
||||
|
||||
// 就餐标准选择变更
|
||||
const onJcBzChange = (ids: string[]) => {
|
||||
selectedJcBzIds.value = ids;
|
||||
// 这里需要根据选中的ID获取对应的就餐标准详情
|
||||
// 实际项目中可能需要从本地存储或重新请求数据
|
||||
updateSelectedJcBzList();
|
||||
};
|
||||
|
||||
// 更新选中的就餐标准列表
|
||||
const updateSelectedJcBzList = () => {
|
||||
// 这里需要根据selectedJcBzIds从本地存储或重新请求数据
|
||||
// 暂时使用空数组，实际项目中需要实现
|
||||
selectedJcBzList.value = [];
|
||||
};
|
||||
|
||||
// 返回上一页
|
||||
const goBack = () => {
|
||||
uni.navigateBack();
|
||||
};
|
||||
|
||||
// 确认报名
|
||||
const confirmBm = async () => {
|
||||
if (selectedCount.value === 0) {
|
||||
uni.showToast({
|
||||
title: "请选择就餐标准",
|
||||
icon: "none",
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const res = await jcBmJcBzApi({
|
||||
xsId: curXs.value.id,
|
||||
jcBzIds: selectedJcBzIds.value,
|
||||
jzId: getUser.jzId,
|
||||
userId: getUser.userId,
|
||||
});
|
||||
|
||||
if (res.resultCode === 1) {
|
||||
uni.showToast({
|
||||
title: "报名成功",
|
||||
icon: "success",
|
||||
});
|
||||
|
||||
// 保存报名数据到store
|
||||
setData({
|
||||
...getData,
|
||||
xsId: curXs.value.id,
|
||||
jcBzIds: selectedJcBzIds.value,
|
||||
jcBzList: selectedJcBzList.value,
|
||||
totalJe: totalPrice.value,
|
||||
});
|
||||
|
||||
// 跳转到支付页面
|
||||
uni.redirectTo({
|
||||
url: '/pages/base/jc/pay/index'
|
||||
});
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.result?.message || "报名失败",
|
||||
icon: "none",
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('报名失败:', error);
|
||||
uni.showToast({
|
||||
title: "报名失败，请重试",
|
||||
icon: "none",
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// 页面卸载前清除定时器
|
||||
onBeforeUnmount(() => {
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.jc-bm-page {
|
||||
min-height: 100%;
|
||||
background-color: #f5f7fa;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.selection-header {
|
||||
background: linear-gradient(135deg, #4a90e2, #2879ff);
|
||||
padding: 20px 15px;
|
||||
color: #fff;
|
||||
border-radius: 0 0 15px 15px;
|
||||
box-shadow: 0 4px 12px rgba(40, 121, 255, 0.2);
|
||||
position: sticky;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 10;
|
||||
|
||||
.header-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
// 可滚动内容区域样式
|
||||
.scrollable-content {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
-webkit-overflow-scrolling: touch; // 增强iOS滚动体验
|
||||
}
|
||||
|
||||
.bottom-action {
|
||||
background-color: #fff;
|
||||
padding: 15px;
|
||||
box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
|
||||
|
||||
.selected-info {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 15px;
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
|
||||
.total-price {
|
||||
color: #ff6b00;
|
||||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.cancel-btn,
|
||||
.confirm-btn {
|
||||
width: 48%;
|
||||
height: 44px;
|
||||
line-height: 44px;
|
||||
text-align: center;
|
||||
border-radius: 22px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.cancel-btn {
|
||||
background-color: #fff;
|
||||
color: #333;
|
||||
border: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.confirm-btn {
|
||||
background-color: #2879ff;
|
||||
color: #fff;
|
||||
|
||||
&.disabled {
|
||||
background-color: #ccc;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
285
src/pages/base/jc/detail.vue
Normal file
285
src/pages/base/jc/detail.vue
Normal file
@ -0,0 +1,285 @@
|
||||
<template>
|
||||
<BasicLayout>
|
||||
<view class="jc-detail">
|
||||
<!-- 就餐标准信息卡片 -->
|
||||
<view class="info-card">
|
||||
<view class="card-title">就餐标准信息</view>
|
||||
<view class="divider"></view>
|
||||
|
||||
<view class="jc-info">
|
||||
<image
|
||||
class="jc-image"
|
||||
:src="jcDetail.lxtp"
|
||||
mode="aspectFill"
|
||||
></image>
|
||||
|
||||
<view class="jc-content">
|
||||
<view class="jc-name">{{ jcDetail.bzmc }}</view>
|
||||
<view class="jc-price">
|
||||
价格：<text class="price-value">¥{{ jcDetail.jfje }}</text>
|
||||
</view>
|
||||
<view class="jc-desc">{{ jcDetail.bzms || '暂无描述' }}</view>
|
||||
<view class="jc-time">有效期：{{ jcDetail.yxq || '暂无有效期信息' }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 就餐标准详情 -->
|
||||
<view class="info-card">
|
||||
<view class="card-title">标准详情</view>
|
||||
<view class="divider"></view>
|
||||
|
||||
<view class="content-section">
|
||||
<text>{{ jcDetail.bzms || "暂无详细信息" }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 使用说明 -->
|
||||
<view class="info-card">
|
||||
<view class="card-title">使用说明</view>
|
||||
<view class="divider"></view>
|
||||
|
||||
<view class="content-section">
|
||||
<template v-if="usageInstructions && usageInstructions.length > 0">
|
||||
<view
|
||||
v-for="(instruction, index) in usageInstructions"
|
||||
:key="index"
|
||||
class="instruction-item"
|
||||
>
|
||||
<text>{{ instruction }}</text>
|
||||
</view>
|
||||
</template>
|
||||
<template v-else>
|
||||
<view class="empty-data">
|
||||
<u-icon name="info-circle" color="#C8C9CC" size="18"></u-icon>
|
||||
<text>暂无使用说明</text>
|
||||
</view>
|
||||
</template>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 注意事项 -->
|
||||
<view class="info-card">
|
||||
<view class="card-title">注意事项</view>
|
||||
<view class="divider"></view>
|
||||
|
||||
<view class="content-section">
|
||||
<template v-if="precautions && precautions.length > 0">
|
||||
<view
|
||||
v-for="(precaution, index) in precautions"
|
||||
:key="index"
|
||||
class="precaution-item"
|
||||
>
|
||||
<text>{{ precaution }}</text>
|
||||
</view>
|
||||
</template>
|
||||
<template v-else>
|
||||
<view class="empty-data">
|
||||
<u-icon name="info-circle" color="#C8C9CC" size="18"></u-icon>
|
||||
<text>暂无注意事项</text>
|
||||
</view>
|
||||
</template>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<template #bottom>
|
||||
<view class="white-bg-color py-5">
|
||||
<view class="flex-row items-center pb-10 pt-5">
|
||||
<u-button
|
||||
text="返回"
|
||||
class="ml-15 mr-7"
|
||||
:plain="true"
|
||||
@click="navigateBack"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
</BasicLayout>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, computed } from "vue";
|
||||
import { navigateBack } from "@/utils/uniapp";
|
||||
import { useDataStore } from "@/store/modules/data";
|
||||
import { storeToRefs } from "pinia";
|
||||
import { imagUrl } from "@/utils";
|
||||
import { jcGetJcBzDetailApi } from "@/api/base/jcApi";
|
||||
|
||||
// 定义就餐标准数据类型
|
||||
interface JcBzData {
|
||||
id?: string;
|
||||
bzmc?: string;
|
||||
jfje?: number;
|
||||
bzms?: string;
|
||||
yxq?: string;
|
||||
lxtp?: string;
|
||||
[key: string]: any; // 允许其他字段
|
||||
}
|
||||
|
||||
const useData = useDataStore();
|
||||
const { jcBzData } = storeToRefs(useData);
|
||||
|
||||
// 使用说明 - 从备注中解析
|
||||
const usageInstructions = ref<string[]>([]);
|
||||
|
||||
// 注意事项 - 从备注中解析
|
||||
const precautions = ref<string[]>([]);
|
||||
|
||||
const jcBzDetail = jcBzData.value as JcBzData;
|
||||
if (jcBzDetail && jcBzDetail.id) {
|
||||
jcGetJcBzDetailApi({
|
||||
jcBzId: jcBzDetail.id,
|
||||
}).then((res) => {
|
||||
if (res.resultCode == 1) {
|
||||
// 这里可以根据实际数据结构处理详情信息
|
||||
console.log('就餐标准详情:', res.result);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 就餐标准详情数据
|
||||
const jcDetail = computed(() => {
|
||||
const data = (jcBzData.value as JcBzData) || {};
|
||||
return {
|
||||
id: data.id || "",
|
||||
bzmc: data.bzmc || "暂无标准名称",
|
||||
jfje: data.jfje || 0,
|
||||
bzms: data.bzms || "暂无描述",
|
||||
yxq: data.yxq || "暂无有效期信息",
|
||||
lxtp: imagUrl(data.lxtp || ''), // 使用imagUrl处理图片路径
|
||||
};
|
||||
});
|
||||
|
||||
// 解析使用说明和注意事项
|
||||
const parseInstructions = () => {
|
||||
const data = (jcBzData.value as JcBzData) || {};
|
||||
const bzms = data.bzms || '';
|
||||
|
||||
// 这里可以根据实际的数据格式来解析使用说明和注意事项
|
||||
// 示例：假设备注中包含使用说明和注意事项，用特定分隔符分隔
|
||||
if (bzms) {
|
||||
// 这里可以根据实际的数据格式来解析
|
||||
// 示例：假设使用说明和注意事项用"注意事项："分隔
|
||||
const parts = bzms.split('注意事项：');
|
||||
if (parts.length > 1) {
|
||||
usageInstructions.value = parts[0].split('\n').filter(item => item.trim());
|
||||
precautions.value = parts[1].split('\n').filter(item => item.trim());
|
||||
} else {
|
||||
usageInstructions.value = bzms.split('\n').filter(item => item.trim());
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
parseInstructions();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.jc-detail {
|
||||
background-color: #f5f7fa;
|
||||
}
|
||||
|
||||
.info-card {
|
||||
margin: 15px;
|
||||
background-color: #fff;
|
||||
border-radius: 8px;
|
||||
padding: 15px;
|
||||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
|
||||
|
||||
.card-title {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.divider {
|
||||
height: 1px;
|
||||
background-color: #eee;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.jc-info {
|
||||
display: flex;
|
||||
|
||||
.jc-image {
|
||||
width: 120px;
|
||||
height: 138px;
|
||||
border-radius: 8px;
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
.jc-content {
|
||||
flex: 1;
|
||||
|
||||
.jc-name {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.jc-price {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
margin-bottom: 8px;
|
||||
|
||||
.price-value {
|
||||
color: #ff6b00;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.jc-desc {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
margin-bottom: 8px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.jc-time {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content-section {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
line-height: 1.6;
|
||||
|
||||
.instruction-item,
|
||||
.precaution-item {
|
||||
margin-bottom: 10px;
|
||||
padding-left: 15px;
|
||||
position: relative;
|
||||
|
||||
&:before {
|
||||
content: "•";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
color: #2879ff;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.empty-data {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 20px 0;
|
||||
color: #909399;
|
||||
font-size: 14px;
|
||||
|
||||
text {
|
||||
margin-left: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
67
src/pages/base/jc/index.vue
Normal file
67
src/pages/base/jc/index.vue
Normal file
@ -0,0 +1,67 @@
|
||||
<template>
|
||||
<view class="jc-page">
|
||||
<!-- 就餐信息头部 - 固定部分 -->
|
||||
<view class="selection-header">
|
||||
<view class="header-content">
|
||||
<!-- 学生选择部分 -->
|
||||
<XsPicker :is-bar="true" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 可滚动的内容区域 -->
|
||||
<view class="scrollable-content">
|
||||
<JcBzList :xs-id="curXs.id" />
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import XsPicker from "@/pages/base/components/XsPicker/index.vue"
|
||||
import JcBzList from "@/pages/base/components/JcBzList/index.vue"
|
||||
import { useUserStore } from "@/store/modules/user";
|
||||
|
||||
const { getCurXs } = useUserStore();
|
||||
|
||||
const curXs = computed(() => getCurXs);
|
||||
|
||||
// 页面卸载前清除定时器
|
||||
onBeforeUnmount(() => {
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.jc-page {
|
||||
min-height: 100%;
|
||||
background-color: #f5f7fa;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.selection-header {
|
||||
background: linear-gradient(135deg, #4a90e2, #2879ff);
|
||||
padding: 20px 15px;
|
||||
color: #fff;
|
||||
border-radius: 0 0 15px 15px;
|
||||
box-shadow: 0 4px 12px rgba(40, 121, 255, 0.2);
|
||||
position: sticky;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 10;
|
||||
|
||||
.header-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
// 可滚动内容区域样式
|
||||
.scrollable-content {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
-webkit-overflow-scrolling: touch; // 增强iOS滚动体验
|
||||
}
|
||||
</style>
|
||||
117
src/pages/base/jc/pay/fail.vue
Normal file
117
src/pages/base/jc/pay/fail.vue
Normal file
@ -0,0 +1,117 @@
|
||||
<template>
|
||||
<view class="payment-fail">
|
||||
<!-- 失败提示卡片 -->
|
||||
<view class="fail-card">
|
||||
<view class="fail-icon-container">
|
||||
<image
|
||||
class="fail-icon"
|
||||
src="/static/base/2222.png"
|
||||
mode="aspectFit"
|
||||
></image>
|
||||
</view>
|
||||
|
||||
<view class="fail-text">抱歉，报名失败！</view>
|
||||
|
||||
<view class="divider"></view>
|
||||
|
||||
<view class="tip-text">请点击下方按钮</view>
|
||||
|
||||
<view class="finger-icon">
|
||||
<image
|
||||
src="/static/base/33333.png"
|
||||
mode="aspectFit"
|
||||
></image>
|
||||
</view>
|
||||
|
||||
<view class="action-btn" @click="reselect">
|
||||
重新报名
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue';
|
||||
|
||||
// 返回选课页面
|
||||
const reselect = () => {
|
||||
uni.redirectTo({
|
||||
url: '/pages/base/jc/bm'
|
||||
});
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
// 实际应用中可能需要记录失败原因等信息
|
||||
console.log('支付失败页面加载');
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.payment-fail {
|
||||
min-height: 100%;
|
||||
background-color: #f5f7fa;
|
||||
}
|
||||
|
||||
.fail-card {
|
||||
margin: 15px;
|
||||
width: 90%;
|
||||
background-color: #fff;
|
||||
border-radius: 8px;
|
||||
padding: 30px 15px;
|
||||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
.fail-icon-container {
|
||||
margin-bottom: 20px;
|
||||
|
||||
.fail-icon {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
}
|
||||
}
|
||||
|
||||
.fail-text {
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.divider {
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background-color: #eee;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.tip-text {
|
||||
font-size: 16px;
|
||||
color: #999;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.finger-icon {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
margin-bottom: 15px;
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
width: 200px;
|
||||
height: 45px;
|
||||
line-height: 45px;
|
||||
text-align: center;
|
||||
border-radius: 22.5px;
|
||||
border: 1px solid #2879ff;
|
||||
color: #2879ff;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
345
src/pages/base/jc/pay/index.vue
Normal file
345
src/pages/base/jc/pay/index.vue
Normal file
@ -0,0 +1,345 @@
|
||||
<template>
|
||||
<view class="payment-page">
|
||||
<!-- 倒计时区域 -->
|
||||
<view class="countdown-section">
|
||||
<view class="countdown-icon">
|
||||
<u-icon name="clock" size="22" color="#fff"></u-icon>
|
||||
</view>
|
||||
<view class="countdown-text">待支付</view>
|
||||
<view class="countdown-timer">
|
||||
<text>剩余：</text>
|
||||
<text class="time-value">{{ countdownTime }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="scrollable-content">
|
||||
|
||||
<!-- 学生信息 -->
|
||||
<view class="student-info-card">
|
||||
<view class="card-title">学生信息</view>
|
||||
<view class="student-info">
|
||||
<view class="student-name">{{ curXs.xm }}</view>
|
||||
<view class="student-class">{{ curXs.bjmc }}</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 就餐标准信息 -->
|
||||
<view class="jc-bz-info-card">
|
||||
<view class="card-title">报名就餐标准</view>
|
||||
<view class="jc-bz-list">
|
||||
<view
|
||||
v-for="(jcBz, index) in jcBzList"
|
||||
:key="index"
|
||||
class="jc-bz-item"
|
||||
>
|
||||
<view class="jc-bz-name">{{ jcBz.bzmc }}</view>
|
||||
<view class="jc-bz-price">¥{{ jcBz.jfje }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
<!-- 底部支付区域 -->
|
||||
<view class="payment-footer">
|
||||
<view class="total-amount">
|
||||
<text>总金额：</text>
|
||||
<text class="amount-value">¥{{ totalJe }}</text>
|
||||
</view>
|
||||
|
||||
<view class="action-buttons">
|
||||
<view class="cancel-btn" @click="cancelRegistration">取消报名</view>
|
||||
<view class="pay-btn" @click="payNow">立即支付</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useUserStore } from "@/store/modules/user";
|
||||
import { useDataStore } from "@/store/modules/data";
|
||||
import { jcCancelBmJcBzApi, jcFqJcBzJfjApi, jcGetJcBzPayExpiredTimeApi } from "@/api/base/jcApi";
|
||||
const { getCurXs, getUser } = useUserStore();
|
||||
const { getData, setData } = useDataStore();
|
||||
|
||||
// 学生信息
|
||||
const curXs = computed(() => getCurXs);
|
||||
// 就餐标准信息
|
||||
const jcBzList = computed(() => getData.jcBzList);
|
||||
// 总金额
|
||||
const totalJe = computed(() => {
|
||||
// 循环jcBzList.value 求和
|
||||
if (!jcBzList.value || !jcBzList.value.length) {
|
||||
return 0;
|
||||
}
|
||||
let total = 0;
|
||||
for (let i = 0; i < jcBzList.value.length; i++) {
|
||||
total += jcBzList.value[i].jfje;
|
||||
}
|
||||
return total;
|
||||
});
|
||||
|
||||
// 倒计时
|
||||
const countdownTime = ref("1分20秒");
|
||||
let timer: any = null;
|
||||
let seconds = 1 * 60 + 20; // 1分20秒
|
||||
|
||||
// 开始倒计时
|
||||
const startCountdown = () => {
|
||||
timer = setInterval(() => {
|
||||
seconds--;
|
||||
if (seconds <= 0) {
|
||||
clearInterval(timer);
|
||||
uni.showModal({
|
||||
title: "支付超时",
|
||||
content: "支付已超时，请重新选课",
|
||||
showCancel: false,
|
||||
success: () => {
|
||||
cancelRegistration();
|
||||
},
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
const minutes = Math.floor(seconds / 60);
|
||||
const remainSeconds = seconds % 60;
|
||||
countdownTime.value = `${minutes}分${remainSeconds}秒`;
|
||||
}, 1000);
|
||||
};
|
||||
|
||||
// 返回上一页
|
||||
const goBack = () => {
|
||||
uni.reLaunch({
|
||||
url: '/pages/base/home/index'
|
||||
});
|
||||
};
|
||||
|
||||
// 取消报名
|
||||
const cancelRegistration = () => {
|
||||
uni.showModal({
|
||||
title: "取消报名",
|
||||
content: "确定要取消报名吗？",
|
||||
success: async (res) => {
|
||||
if (res.confirm) {
|
||||
try {
|
||||
await jcCancelBmJcBzApi({
|
||||
xsId: getData.xsId,
|
||||
jcBzIds: getData.jcBzIds
|
||||
});
|
||||
uni.showToast({
|
||||
title: "已取消报名",
|
||||
icon: "success",
|
||||
});
|
||||
goBack();
|
||||
} catch (error) {
|
||||
console.error('取消报名失败:', error);
|
||||
uni.showToast({
|
||||
title: "取消报名失败",
|
||||
icon: "none",
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
// 立即支付
|
||||
const payNow = async () => {
|
||||
try {
|
||||
const res = await jcFqJcBzJfjApi({
|
||||
xsId: getData.xsId,
|
||||
jcBzIds: getData.jcBzIds,
|
||||
jffs: "四川农信", // TODO: 目前只支持四川农信
|
||||
jzId: getUser.jzId,
|
||||
userId: getUser.userId,
|
||||
openId: getUser.openId,
|
||||
});
|
||||
if (res.resultCode === 1 && res.result) {
|
||||
setData({
|
||||
...getData,
|
||||
...res.result
|
||||
});
|
||||
uni.redirectTo({
|
||||
url: `/pages/base/jc/pay/wait?payUrl=${encodeURIComponent(res.result.cashierPayHtml)}`
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
uni.showToast({
|
||||
title: "发起支付失败",
|
||||
icon: "error",
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(async() => {
|
||||
try {
|
||||
const res = await jcGetJcBzPayExpiredTimeApi({ xsId: getCurXs.id });
|
||||
console.log('获取支付倒计时', res);
|
||||
if (res.resultCode === 1) {
|
||||
seconds = res.result;
|
||||
startCountdown();
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取支付倒计时失败:', error);
|
||||
}
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
if (timer) {
|
||||
clearInterval(timer);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.payment-page {
|
||||
min-height: 100%;
|
||||
background-color: #f5f7fa;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
// 可滚动内容区域样式
|
||||
.scrollable-content {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
-webkit-overflow-scrolling: touch; // 增强iOS滚动体验
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.student-info-card,
|
||||
.jc-bz-info-card {
|
||||
background-color: #fff;
|
||||
border-radius: 8px;
|
||||
padding: 15px;
|
||||
margin-bottom: 15px;
|
||||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
|
||||
|
||||
.card-title {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.student-info {
|
||||
.student-name {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.student-class {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
|
||||
.jc-bz-list {
|
||||
.jc-bz-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 10px 0;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.jc-bz-name {
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.jc-bz-price {
|
||||
font-size: 14px;
|
||||
color: #ff6b00;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.countdown-section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 15px;
|
||||
background-color: #2879ff;
|
||||
|
||||
.countdown-icon {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.countdown-text {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: #fff;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.countdown-timer {
|
||||
font-size: 15px;
|
||||
color: #fff;
|
||||
|
||||
.time-value {
|
||||
color: #ff4d4f;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.payment-footer {
|
||||
position: sticky;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background-color: #fff;
|
||||
padding: 15px;
|
||||
box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
|
||||
|
||||
.total-amount {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 15px;
|
||||
font-size: 15px;
|
||||
color: #333;
|
||||
|
||||
.amount-value {
|
||||
color: #ff6b00;
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.cancel-btn,
|
||||
.pay-btn {
|
||||
width: 48%;
|
||||
height: 44px;
|
||||
line-height: 44px;
|
||||
text-align: center;
|
||||
border-radius: 22px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.cancel-btn {
|
||||
background-color: #fff;
|
||||
color: #333;
|
||||
border: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.pay-btn {
|
||||
background-color: #ff8c00;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
129
src/pages/base/jc/pay/success.vue
Normal file
129
src/pages/base/jc/pay/success.vue
Normal file
@ -0,0 +1,129 @@
|
||||
<template>
|
||||
<BasicLayout>
|
||||
<view class="payment-success">
|
||||
<!-- 成功提示卡片 -->
|
||||
<view class="success-card">
|
||||
<view class="success-icon-container">
|
||||
<image
|
||||
class="success-icon-bg"
|
||||
src="/static/base/11223.png"
|
||||
mode="aspectFit"
|
||||
></image>
|
||||
<view class="success-icon">
|
||||
<u-icon name="checkmark" size="40" color="#fff"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="success-text">恭喜你，报名成功！</view>
|
||||
</view>
|
||||
|
||||
<!-- 这里显示学生信息和报名的就餐标准信息 -->
|
||||
|
||||
</view>
|
||||
<template #bottom>
|
||||
<!-- <view class="white-bg-color py-5">
|
||||
<view class="flex-row items-center pb-10 pt-5">
|
||||
<u-button
|
||||
text="返回"
|
||||
class="ml-15 mr-7"
|
||||
:plain="true"
|
||||
@click=""
|
||||
/>
|
||||
</view>
|
||||
</view> -->
|
||||
</template>
|
||||
</BasicLayout>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
||||
// 返回上一页
|
||||
const goBack = () => {
|
||||
uni.navigateBack();
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
// 实际应用中，应从页面参数或缓存获取课程和学生信息
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.payment-success {
|
||||
background-color: #f5f7fa;
|
||||
}
|
||||
|
||||
.nav-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 15px;
|
||||
height: 44px;
|
||||
background-color: #2879ff;
|
||||
|
||||
.nav-left {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.nav-title {
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.nav-right {
|
||||
width: 40px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
|
||||
.success-card {
|
||||
margin: 15px;
|
||||
background-color: #fff;
|
||||
border-radius: 8px;
|
||||
padding: 30px 15px;
|
||||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
.success-icon-container {
|
||||
position: relative;
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
margin-bottom: 20px;
|
||||
|
||||
.success-icon-bg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.success-icon {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
background-color: #2879ff;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
.success-text {
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
412
src/pages/base/jc/pay/wait.vue
Normal file
412
src/pages/base/jc/pay/wait.vue
Normal file
@ -0,0 +1,412 @@
|
||||
<template>
|
||||
<view class="payment-page">
|
||||
<!-- 倒计时区域 -->
|
||||
<view class="countdown-section">
|
||||
<view class="countdown-icon">
|
||||
<u-icon name="clock" size="22" color="#fff"></u-icon>
|
||||
</view>
|
||||
<view class="countdown-text">待支付</view>
|
||||
<view class="countdown-timer">
|
||||
<text>剩余：</text>
|
||||
<text class="time-value">{{ countdownTime }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="scrollable-content">
|
||||
<!-- H5环境下的处理 -->
|
||||
<view v-if="isH5" class="h5-payment-container">
|
||||
<view class="payment-info">
|
||||
<view class="payment-title">支付信息</view>
|
||||
<view class="payment-url">{{ payUrl }}</view>
|
||||
</view>
|
||||
<view class="payment-actions">
|
||||
<button class="open-payment-btn" @click="openPaymentUrl">打开支付页面</button>
|
||||
<button class="copy-url-btn" @click="copyPaymentUrl">复制支付链接</button>
|
||||
</view>
|
||||
<view class="payment-tips">
|
||||
<text>提示：</text>
|
||||
<text>1. 点击"打开支付页面"按钮在新窗口打开支付</text>
|
||||
<text>2. 支付完成后请返回此页面</text>
|
||||
<text>3. 如无法打开，请复制链接到浏览器中打开</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 非H5环境使用web-view -->
|
||||
<web-view v-else :src="payUrl" @error="handleWebViewError" class="payment-webview"></web-view>
|
||||
</view>
|
||||
|
||||
<!-- 底部支付区域 -->
|
||||
<view class="payment-footer">
|
||||
<view class="action-buttons">
|
||||
<view class="cancel-btn" @click="cancelRegistration">取消报名</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { onLoad } from "@dcloudio/uni-app";
|
||||
// import { jzGetQkExpiredTime, jzXkCancelApi, jzXkJfCxjApi } from "@/api/base/server";
|
||||
import { useUserStore } from "@/store/modules/user";
|
||||
import { useDataStore } from "@/store/modules/data";
|
||||
const { getCurXs, initWs, setWsCallback } = useUserStore();
|
||||
const { getData } = useDataStore();
|
||||
|
||||
const payUrl = ref("");
|
||||
const isH5 = ref(false);
|
||||
|
||||
// 检测是否为H5环境
|
||||
const checkPlatform = () => {
|
||||
// #ifdef H5
|
||||
isH5.value = true;
|
||||
// #endif
|
||||
};
|
||||
|
||||
// 打开支付URL
|
||||
const openPaymentUrl = () => {
|
||||
if (payUrl.value) {
|
||||
// 在新窗口打开支付页面
|
||||
window.open(payUrl.value, '_blank');
|
||||
}
|
||||
};
|
||||
|
||||
// 复制支付URL
|
||||
const copyPaymentUrl = () => {
|
||||
if (payUrl.value) {
|
||||
// #ifdef H5
|
||||
if (navigator.clipboard) {
|
||||
navigator.clipboard.writeText(payUrl.value).then(() => {
|
||||
uni.showToast({
|
||||
title: '链接已复制',
|
||||
icon: 'success'
|
||||
});
|
||||
}).catch(() => {
|
||||
// 降级处理
|
||||
const textArea = document.createElement('textarea');
|
||||
textArea.value = payUrl.value;
|
||||
document.body.appendChild(textArea);
|
||||
textArea.select();
|
||||
document.execCommand('copy');
|
||||
document.body.removeChild(textArea);
|
||||
uni.showToast({
|
||||
title: '链接已复制',
|
||||
icon: 'success'
|
||||
});
|
||||
});
|
||||
} else {
|
||||
// 降级处理
|
||||
const textArea = document.createElement('textarea');
|
||||
textArea.value = payUrl.value;
|
||||
document.body.appendChild(textArea);
|
||||
textArea.select();
|
||||
document.execCommand('copy');
|
||||
document.body.removeChild(textArea);
|
||||
uni.showToast({
|
||||
title: '链接已复制',
|
||||
icon: 'success'
|
||||
});
|
||||
}
|
||||
// #endif
|
||||
}
|
||||
};
|
||||
|
||||
// web-view错误处理
|
||||
const handleWebViewError = (e: any) => {
|
||||
console.error('web-view加载错误:', e);
|
||||
uni.showModal({
|
||||
title: '加载失败',
|
||||
content: '支付页面加载失败，请检查网络连接或联系客服',
|
||||
showCancel: false
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
|
||||
setWsCallback((type: string, res: any) => {
|
||||
console.log('收到WebSocket消息:', type, res.data);
|
||||
// 将data从字符串转为对象
|
||||
const dataObj = JSON.parse(res.data);
|
||||
if (dataObj.action === 'pay') {
|
||||
uni.showToast({
|
||||
title: '支付成功',
|
||||
icon: 'success',
|
||||
});
|
||||
setWsCallback((type: string, res: any) => {})
|
||||
// 跳转到支付成功页面
|
||||
setTimeout(() => {
|
||||
uni.reLaunch({
|
||||
url: "/pages/base/xk/pay/success",
|
||||
});
|
||||
}, 1000)
|
||||
}
|
||||
});
|
||||
|
||||
// 倒计时
|
||||
const countdownTime = ref("1分20秒");
|
||||
let timer: any = null;
|
||||
let seconds = 1 * 60 + 20; // 1分20秒
|
||||
|
||||
// 开始倒计时
|
||||
const startCountdown = () => {
|
||||
timer = setInterval(() => {
|
||||
seconds--;
|
||||
if (seconds <= 0) {
|
||||
clearInterval(timer);
|
||||
uni.showModal({
|
||||
title: "支付超时",
|
||||
content: "支付已超时，请重新选课",
|
||||
showCancel: false,
|
||||
success: () => {
|
||||
cancelRegistration();
|
||||
},
|
||||
});
|
||||
return;
|
||||
}
|
||||
const minutes = Math.floor(seconds / 60);
|
||||
const remainSeconds = seconds % 60;
|
||||
countdownTime.value = `${minutes}分${remainSeconds}秒`;
|
||||
}, 1000);
|
||||
};
|
||||
|
||||
// 返回上一页
|
||||
const goBack = () => {
|
||||
uni.reLaunch({
|
||||
url: getData.backUrl
|
||||
});
|
||||
};
|
||||
|
||||
// 取消报名
|
||||
const cancelRegistration = () => {
|
||||
// uni.showModal({
|
||||
// title: "取消报名",
|
||||
// content: "确定要取消报名吗？",
|
||||
// success: async (res) => {
|
||||
// if (res.confirm) {
|
||||
// await jzXkCancelApi({
|
||||
// xsId: getData.xsId,
|
||||
// xkId: getData.xkId
|
||||
// });
|
||||
// uni.showToast({
|
||||
// title: "已取消报名",
|
||||
// icon: "success",
|
||||
// });
|
||||
// goBack();
|
||||
// }
|
||||
// },
|
||||
// });
|
||||
};
|
||||
|
||||
onLoad(async (options: any) => {
|
||||
// 检测平台
|
||||
checkPlatform();
|
||||
|
||||
if (options.payUrl) {
|
||||
payUrl.value = decodeURIComponent(options.payUrl);
|
||||
console.log('支付URL:', payUrl.value);
|
||||
|
||||
// const res = await jzGetQkExpiredTime({ xsId: getCurXs.id} );
|
||||
// seconds = res.result;
|
||||
// initWs();
|
||||
// startCountdown();
|
||||
} else {
|
||||
uni.showToast({ title: '缺少支付地址', icon: 'none' })
|
||||
setTimeout(() => {
|
||||
goBack();
|
||||
}, 1000)
|
||||
}
|
||||
openPaymentUrl();
|
||||
// try {
|
||||
// const res = await jzXkJfCxjApi({
|
||||
// orderNumber: getData.orderNumber,
|
||||
// xsId: getData.xsId,
|
||||
// xkId: getData.xkId
|
||||
// });
|
||||
// // 订单状态，01-交易中，02-交易成功，03-交易失败，04-交易关闭
|
||||
// const { orderStat, respCode } = res.result;
|
||||
// if ("0000000000" === respCode) {
|
||||
// if ("02" === orderStat) {
|
||||
// uni.reLaunch({
|
||||
// url: "/pages/base/xk/pay/success",
|
||||
// });
|
||||
// } else if ("03" === orderStat) {
|
||||
// uni.reLaunch({
|
||||
// url: "/pages/base/xk/pay/fail",
|
||||
// });
|
||||
// }
|
||||
// } else {
|
||||
// uni.showToast({
|
||||
// title: "订单状态查询失败",
|
||||
// icon: "error",
|
||||
// });
|
||||
// }
|
||||
// } catch (error) {
|
||||
// console.log("订单查询失败", error);
|
||||
// }
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
if (timer) {
|
||||
clearInterval(timer);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.payment-page {
|
||||
min-height: 100vh;
|
||||
background-color: #f5f7fa;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.scrollable-content {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.payment-webview {
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
border: none !important;
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
// H5支付容器样式
|
||||
.h5-payment-container {
|
||||
padding: 20px;
|
||||
background-color: #fff;
|
||||
margin: 15px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.payment-info {
|
||||
margin-bottom: 20px;
|
||||
|
||||
.payment-title {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.payment-url {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
word-break: break-all;
|
||||
background-color: #f5f5f5;
|
||||
padding: 10px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #ddd;
|
||||
}
|
||||
}
|
||||
|
||||
.payment-actions {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
margin-bottom: 20px;
|
||||
|
||||
button {
|
||||
flex: 1;
|
||||
height: 44px;
|
||||
border-radius: 22px;
|
||||
font-size: 16px;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
|
||||
&.open-payment-btn {
|
||||
background-color: #2879ff;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
&.copy-url-btn {
|
||||
background-color: #fff;
|
||||
color: #333;
|
||||
border: 1px solid #ddd;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.payment-tips {
|
||||
background-color: #fff7e6;
|
||||
border: 1px solid #ffd591;
|
||||
border-radius: 4px;
|
||||
padding: 15px;
|
||||
|
||||
text {
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
color: #d46b08;
|
||||
line-height: 1.5;
|
||||
margin-bottom: 5px;
|
||||
|
||||
&:first-child {
|
||||
font-weight: bold;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.countdown-section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 15px;
|
||||
background-color: #2879ff;
|
||||
flex-shrink: 0;
|
||||
|
||||
.countdown-icon {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.countdown-text {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: #fff;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.countdown-timer {
|
||||
font-size: 15px;
|
||||
color: #fff;
|
||||
|
||||
.time-value {
|
||||
color: #ff4d4f;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.payment-footer {
|
||||
position: sticky;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background-color: #fff;
|
||||
padding: 15px;
|
||||
box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
|
||||
flex-shrink: 0;
|
||||
|
||||
.action-buttons {
|
||||
.cancel-btn {
|
||||
height: 44px;
|
||||
line-height: 44px;
|
||||
text-align: center;
|
||||
border-radius: 22px;
|
||||
font-size: 16px;
|
||||
background-color: #fff;
|
||||
color: #333;
|
||||
border: 1px solid #ddd;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
67
src/pages/base/jc/record.vue
Normal file
67
src/pages/base/jc/record.vue
Normal file
@ -0,0 +1,67 @@
|
||||
<template>
|
||||
<view class="jc-record-page">
|
||||
<!-- 记录信息头部 - 固定部分 -->
|
||||
<view class="selection-header">
|
||||
<view class="header-content">
|
||||
<!-- 学生选择部分 -->
|
||||
<XsPicker :is-bar="true" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 可滚动的内容区域 -->
|
||||
<view class="scrollable-content">
|
||||
<JcRecordList :xs-id="curXs.id" />
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import XsPicker from "@/pages/base/components/XsPicker/index.vue"
|
||||
import JcRecordList from "@/pages/base/components/JcRecordList/index.vue"
|
||||
import { useUserStore } from "@/store/modules/user";
|
||||
|
||||
const { getCurXs } = useUserStore();
|
||||
|
||||
const curXs = computed(() => getCurXs);
|
||||
|
||||
// 页面卸载前清除定时器
|
||||
onBeforeUnmount(() => {
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.jc-record-page {
|
||||
min-height: 100%;
|
||||
background-color: #f5f7fa;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.selection-header {
|
||||
background: linear-gradient(135deg, #4a90e2, #2879ff);
|
||||
padding: 20px 15px;
|
||||
color: #fff;
|
||||
border-radius: 0 0 15px 15px;
|
||||
box-shadow: 0 4px 12px rgba(40, 121, 255, 0.2);
|
||||
position: sticky;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 10;
|
||||
|
||||
.header-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
// 可滚动内容区域样式
|
||||
.scrollable-content {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
-webkit-overflow-scrolling: touch; // 增强iOS滚动体验
|
||||
}
|
||||
</style>
|
||||
@ -5,6 +5,7 @@ export const useDataStore = defineStore({
|
||||
state: () => ({
|
||||
data: {},
|
||||
kcData: {},
|
||||
jcBzData: {},
|
||||
global: {},
|
||||
file: {},
|
||||
appCode: "JZ"
|
||||
@ -22,6 +23,9 @@ export const useDataStore = defineStore({
|
||||
getKcData(): any {
|
||||
return this.kcData;
|
||||
},
|
||||
getJcBzData(): any {
|
||||
return this.jcBzData;
|
||||
},
|
||||
getAppCode(): string {
|
||||
return this.appCode;
|
||||
},
|
||||
@ -39,6 +43,9 @@ export const useDataStore = defineStore({
|
||||
setKcData(data: any) {
|
||||
this.kcData = data;
|
||||
},
|
||||
setJcBzData(data: any) {
|
||||
this.jcBzData = data;
|
||||
},
|
||||
},
|
||||
persist: {
|
||||
enabled: true,
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user