根据需求调整页面

This commit is contained in:
zhanchao 2026-08-05 15:43:23 +08:00
parent c8f640c6ef
commit 89cc92cac5
3 changed files with 165 additions and 155 deletions

View File

@ -5,19 +5,10 @@
<view v-else class="tip">加载中...</view> <view v-else class="tip">加载中...</view>
</view> </view>
<!-- 海报领取弹窗 -->
<view v-if="posterVisible" class="poster-mask"> <view v-if="posterVisible" class="poster-mask">
<view class="poster-dialog"> <view class="poster-dialog">
<image <image class="poster-image" :src="issue?.posterUrl || ''" mode="widthFix" />
class="poster-image" <view class="poster-content">{{ buildClaimContent() }}</view>
:src="issue?.posterUrl || ''"
mode="widthFix"
/>
<view class="poster-info">
<view class="poster-title">{{ issue?.activityName || "体验券" }}</view>
<view class="poster-desc">{{ projectText }}</view>
<view class="poster-desc">{{ validText }}</view>
</view>
<view class="poster-btn" :class="{ disabled: claiming }" @click="acceptCoupon"> <view class="poster-btn" :class="{ disabled: claiming }" @click="acceptCoupon">
{{ claiming ? "领取中..." : "接受" }} {{ claiming ? "领取中..." : "接受" }}
</view> </view>
@ -48,38 +39,15 @@ const claiming = ref(false);
const autoPrompted = ref(false); const autoPrompted = ref(false);
const posterVisible = ref(false); const posterVisible = ref(false);
const projectText = computed(() => { const projectNameText = computed(() => {
const projects = Array.isArray(issue.value?.projectSnapshot) ? issue.value.projectSnapshot : []; const projects = Array.isArray(issue.value?.projectSnapshot) ? issue.value.projectSnapshot : [];
if (!projects.length) return "未配置项目"; if (!projects.length) return "未配置项目";
return projects.map((p) => `${p.projectName || "项目"}×${p.usageCount || 1}`).join("、"); return projects.map((p) => p.projectName || "项目").join("、");
}); });
const validText = computed(() => {
const rule = issue.value?.projectValidRuleSnapshot || {};
if (issue.value?.projectExpireTime) {
return `有效期至 ${formatDate(issue.value.projectExpireTime)}`;
}
if (rule.type === "fixedDate" && rule.fixedDate) {
return `有效期至 ${formatDate(rule.fixedDate)}`;
}
if (rule.type === "daysAfterClaim") {
return `领取后 ${rule.days || 0} 天有效`;
}
return "有效期以活动规则为准";
});
function formatDate(ts) {
const d = new Date(Number(ts));
if (Number.isNaN(d.getTime())) return "-";
const y = d.getFullYear();
const m = String(d.getMonth() + 1).padStart(2, "0");
const day = String(d.getDate()).padStart(2, "0");
return `${y}-${m}-${day}`;
}
function buildClaimContent() { function buildClaimContent() {
const name = issue.value?.activityName || "体验券"; const name = issue.value?.activityName || "体验券";
return `您收到一张【${name}】体验券,包含${projectText.value},是否存入您的权益卡包?`; return `您收到一张【${name}】体验券,包含${projectNameText.value},是否存入您的权益卡包?`;
} }
async function ensureLogin() { async function ensureLogin() {
@ -161,16 +129,6 @@ function isExpiredIssue() {
async function acceptCoupon() { async function acceptCoupon() {
if (claiming.value || !issue.value) return; if (claiming.value || !issue.value) return;
try {
await confirm(buildClaimContent(), {
title: "确认接受",
confirmText: "确认接受",
cancelText: "暂不领取",
});
} catch {
return;
}
claiming.value = true; claiming.value = true;
loading("领取中..."); loading("领取中...");
try { try {
@ -240,11 +198,6 @@ async function promptClaim() {
return; return;
} }
if (!issue.value.posterUrl) {
tip.value = "该体验券暂无海报,无法领取";
return;
}
tip.value = ""; tip.value = "";
posterVisible.value = true; posterVisible.value = true;
} }
@ -296,63 +249,53 @@ onShow(() => {
font-size: 28rpx; font-size: 28rpx;
color: #999; color: #999;
} }
.poster-mask { .poster-mask {
position: fixed; position: fixed;
inset: 0; inset: 0;
z-index: 1000; z-index: 1000;
background: rgba(0, 0, 0, 0.65);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
padding: 40rpx; padding: 40rpx;
box-sizing: border-box; box-sizing: border-box;
background: rgba(0, 0, 0, 0.65);
} }
.poster-dialog { .poster-dialog {
width: 100%; width: 100%;
max-width: 620rpx; max-width: 620rpx;
background: #fff;
border-radius: 20rpx;
overflow: hidden; overflow: hidden;
border-radius: 20rpx;
background: #fff;
} }
.poster-image { .poster-image {
width: 100%;
display: block; display: block;
width: 100%;
max-height: 700rpx;
background: #f5f7fa; background: #f5f7fa;
} }
.poster-info { .poster-content {
padding: 24rpx 28rpx 8rpx; padding: 28rpx 30rpx 8rpx;
} color: #333;
font-size: 28rpx;
.poster-title { line-height: 1.6;
font-size: 30rpx;
font-weight: 600;
color: #222;
margin-bottom: 8rpx;
}
.poster-desc {
font-size: 24rpx;
color: #888;
line-height: 1.4;
} }
.poster-btn { .poster-btn {
margin: 24rpx 28rpx 32rpx; display: flex;
align-items: center;
justify-content: center;
height: 80rpx; height: 80rpx;
margin: 24rpx 30rpx 30rpx;
border-radius: 40rpx; border-radius: 40rpx;
background: #065bd6; background: #065bd6;
color: #fff; color: #fff;
font-size: 30rpx; font-size: 30rpx;
display: flex;
align-items: center;
justify-content: center;
} }
.poster-btn.disabled { .poster-btn.disabled {
opacity: 0.6; opacity: 0.6;
} }
</style> </style>

View File

@ -26,8 +26,30 @@
<view v-else class="coupon-poster coupon-poster--empty">体验券</view> <view v-else class="coupon-poster coupon-poster--empty">体验券</view>
<view class="coupon-body"> <view class="coupon-body">
<view class="coupon-title">{{ item.activityName || "体验券" }}</view> <view class="coupon-title">{{ item.activityName || "体验券" }}</view>
<view class="coupon-meta">{{ item.projectText }}</view> <view class="coupon-info-grid">
<view class="coupon-meta">{{ item.validText }}</view> <view class="coupon-info-row coupon-info-row--projects">
<text class="coupon-info-label">项目</text>
<view class="coupon-project-list">
<view
v-for="project in item.projectSnapshot || []"
:key="project.projectId"
class="coupon-project-item"
>
<text>{{ project.projectName || "未命名项目" }}</text>
<text>×{{ project.usageCount || 1 }}</text>
</view>
<text v-if="!(item.projectSnapshot || []).length">未配置项目</text>
</view>
</view>
<view class="coupon-info-row">
<text class="coupon-info-label">项目有效期</text>
<text>{{ item.validText }}</text>
</view>
<view class="coupon-info-row">
<text class="coupon-info-label">活动有效期</text>
<text>{{ item.activityValidText }}</text>
</view>
</view>
<view class="coupon-action">点击查看海报领取</view> <view class="coupon-action">点击查看海报领取</view>
</view> </view>
</view> </view>
@ -108,6 +130,12 @@ function buildValidText(item) {
return "领取后按活动规则生效"; return "领取后按活动规则生效";
} }
function buildActivityValidText(item) {
const start = formatDate(item.activityStartTime) || "-";
const end = formatDate(item.activityEndTime) || "-";
return `${start}${end}`;
}
function getExpireAt(item) { function getExpireAt(item) {
if (item.projectExpireTime) return Number(item.projectExpireTime); if (item.projectExpireTime) return Number(item.projectExpireTime);
const rule = item.projectValidRuleSnapshot || {}; const rule = item.projectValidRuleSnapshot || {};
@ -207,6 +235,7 @@ async function loadCoupons(options = {}) {
...item, ...item,
projectText: projectText(item.projectSnapshot), projectText: projectText(item.projectSnapshot),
validText: buildValidText(item), validText: buildValidText(item),
activityValidText: buildActivityValidText(item),
}); });
} }
list.value = valid; list.value = valid;
@ -337,15 +366,53 @@ onShow(async () => {
margin-bottom: 8rpx; margin-bottom: 8rpx;
} }
.coupon-meta { .coupon-info-grid {
font-size: 24rpx; display: flex;
color: #888; flex-direction: column;
gap: 6rpx;
color: #606266;
font-size: 22rpx;
line-height: 1.4; line-height: 1.4;
} }
.coupon-info-row {
display: flex;
align-items: flex-start;
min-width: 0;
}
.coupon-info-label {
width: 132rpx;
flex-shrink: 0;
color: #909399;
}
.coupon-info-row > text:last-child,
.coupon-project-list {
min-width: 0;
overflow-wrap: anywhere;
}
.coupon-project-list {
flex: 1;
}
.coupon-project-item {
display: flex;
justify-content: space-between;
gap: 12rpx;
}
.coupon-project-item text:first-child {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.coupon-action { .coupon-action {
margin-top: 12rpx; margin-top: 12rpx;
font-size: 24rpx; font-size: 22rpx;
color: #ff8a00; color: #ff8a00;
} }

View File

@ -1,79 +1,67 @@
<template> <template>
<full-page pageClass="record-page" :customScroll="true"> <full-page pageClass="record-page" :customScroll="true">
<scroll-view <scroll-view class="record-scroll" scroll-y="true" refresher-enabled="true" :refresher-triggered="refreshing"
class="record-scroll" @refresherrefresh="refreshRecords">
scroll-y="true"
refresher-enabled="true"
:refresher-triggered="refreshing"
@refresherrefresh="refreshRecords"
>
<view class="page-body"> <view class="page-body">
<view class="profile-card" @click="switchArchive"> <view class="profile-card" @click="switchArchive">
<view class="avatar-wrap"> <view class="avatar-wrap">
<view class="avatar-placeholder">{{ avatarText }}</view> <view class="avatar-placeholder">{{ avatarText }}</view>
</view>
<view class="profile-main">
<view class="profile-title">{{ customerName || "请选择档案" }}</view>
<view class="profile-sub">所属机构{{ corpName || "-" }}</view>
</view>
<view class="profile-arrow">&gt;</view>
</view> </view>
<view class="profile-main">
<view class="profile-title">{{ customerName || "请选择档案" }}</view>
<view class="profile-sub">所属机构{{ corpName || "-" }}</view>
</view>
<view class="profile-arrow">&gt;</view>
</view>
<picker mode="date" fields="month" :value="selectedMonth" @change="handleMonthChange"> <picker mode="date" fields="month" :value="selectedMonth" @change="handleMonthChange">
<view class="month-bar"> <view class="month-bar">
<text>{{ monthText }}</text> <text>{{ monthText }}</text>
<text class="month-arrow"></text> <text class="month-arrow"></text>
</view> </view>
</picker> </picker>
<view v-if="loading" class="empty">加载中...</view> <view v-if="loading" class="empty">加载中...</view>
<view v-else-if="!records.length" class="empty">暂无治疗记录</view> <view v-else-if="!records.length" class="empty">暂无治疗记录</view>
<view v-else class="record-list"> <view v-else class="record-list">
<view v-for="item in records" :key="item._id" class="record-card"> <view v-for="item in records" :key="item._id" class="record-card">
<view class="record-status">已治疗</view> <view class="record-status">已治疗</view>
<view class="record-row"> <view class="record-row">
<text class="row-label">项目名称</text> <text class="row-label">项目名称</text>
<text class="row-value strong">{{ item.projectName || "未命名项目" }}</text> <text class="row-value strong">{{ item.projectName || "未命名项目" }}</text>
</view> </view>
<view class="record-row"> <view class="record-row">
<text class="row-label">治疗日期</text> <text class="row-label">治疗时间</text>
<text class="row-value">{{ formatDate(item.treatmentTime) }}</text> <text class="row-value">{{ formatDate(item.treatmentTime) }}</text>
</view> </view>
<view class="record-row"> <view class="record-row">
<text class="row-label">治疗时间</text> <text class="row-label">治疗数量</text>
<text class="row-value">{{ formatTimeOnly(item.treatmentTime) }}</text> <text class="row-value">{{ item.deductUsageCount || 0 }}</text>
</view> </view>
<view class="record-row"> <view class="record-row">
<text class="row-label">治疗医生</text> <text class="row-label">治疗科室</text>
<text class="row-value strong">{{ item.treatmentDoctorName || item.doctorName || staffText(item.treatmentDoctorUserId) }}</text> <text class="row-value">{{ item.treatmentDeptName || "-" }}</text>
</view> </view>
<view v-if="assistantText(item)" class="record-row"> <view class="record-row">
<text class="row-label">配台</text> <text class="row-label">治疗医生</text>
<text class="row-value">{{ assistantText(item) }}</text> <text class="row-value strong">{{ item.treatmentDoctorName || item.doctorName ||
</view> staffText(item.treatmentDoctorUserId) }}</text>
<view class="record-row"> </view>
<text class="row-label">治疗科室</text> <view v-if="assistantText(item)" class="record-row">
<text class="row-value">{{ item.treatmentDeptName || "-" }}</text> <text class="row-label">配台</text>
</view> <text class="row-value">{{ assistantText(item) }}</text>
<view class="record-row"> </view>
<text class="row-label">治疗数</text> <view v-if="item.treatmentArea" class="record-row">
<text class="row-value">{{ item.deductUsageCount || 0 }}</text> <text class="row-label">治疗部位</text>
</view> <text class="row-value">{{ item.treatmentArea }}</text>
<view v-if="item.treatmentArea" class="record-row"> </view>
<text class="row-label">治疗部位</text> <view v-if="item.treatmentRemark" class="record-row">
<text class="row-value">{{ item.treatmentArea }}</text> <text class="row-label">治疗备注</text>
</view> <text class="row-value">{{ item.treatmentRemark }}</text>
<view v-if="item.treatmentRemark" class="record-row"> </view>
<text class="row-label">治疗备注</text>
<text class="row-value">{{ item.treatmentRemark }}</text>
</view>
<view v-if="item.packageName" class="record-row">
<text class="row-label">所属套餐</text>
<text class="row-value">{{ item.packageName }}</text>
</view> </view>
</view> </view>
</view> </view>
</view>
</scroll-view> </scroll-view>
</full-page> </full-page>
</template> </template>
@ -131,11 +119,6 @@ function formatDate(ts) {
return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`; return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`;
} }
function formatTimeOnly(ts) {
const d = toDate(ts);
if (!d) return "-";
return `${pad(d.getHours())}:${pad(d.getMinutes())}`;
}
function staffText(userid) { function staffText(userid) {
if (!userid) return "-"; if (!userid) return "-";
@ -255,6 +238,7 @@ onShow(() => {
background: #e9edf3; background: #e9edf3;
border-top: 8rpx solid #0b63d8; border-top: 8rpx solid #0b63d8;
} }
.profile-card { .profile-card {
display: flex; display: flex;
align-items: center; align-items: center;
@ -263,6 +247,7 @@ onShow(() => {
background: #fff; background: #fff;
border-bottom: 1rpx solid #d7dce5; border-bottom: 1rpx solid #d7dce5;
} }
.avatar-wrap { .avatar-wrap {
width: 72rpx; width: 72rpx;
height: 72rpx; height: 72rpx;
@ -271,6 +256,7 @@ onShow(() => {
overflow: hidden; overflow: hidden;
flex-shrink: 0; flex-shrink: 0;
} }
.avatar-placeholder { .avatar-placeholder {
width: 100%; width: 100%;
height: 100%; height: 100%;
@ -281,27 +267,32 @@ onShow(() => {
font-size: 30rpx; font-size: 30rpx;
font-weight: 600; font-weight: 600;
} }
.profile-main { .profile-main {
flex: 1; flex: 1;
min-width: 0; min-width: 0;
} }
.profile-title { .profile-title {
font-size: 31rpx; font-size: 31rpx;
font-weight: 700; font-weight: 700;
color: #333; color: #333;
line-height: 40rpx; line-height: 40rpx;
} }
.profile-sub { .profile-sub {
margin-top: 4rpx; margin-top: 4rpx;
font-size: 24rpx; font-size: 24rpx;
color: #9aa0a8; color: #9aa0a8;
line-height: 34rpx; line-height: 34rpx;
} }
.profile-arrow { .profile-arrow {
flex-shrink: 0; flex-shrink: 0;
color: #b4b7bf; color: #b4b7bf;
font-size: 32rpx; font-size: 32rpx;
} }
.month-bar { .month-bar {
display: flex; display: flex;
align-items: center; align-items: center;
@ -314,13 +305,16 @@ onShow(() => {
font-weight: 700; font-weight: 700;
border-bottom: 1rpx solid #d4d9e2; border-bottom: 1rpx solid #d4d9e2;
} }
.month-arrow { .month-arrow {
font-size: 18rpx; font-size: 18rpx;
color: #333; color: #333;
} }
.record-list { .record-list {
padding: 0rpx 10rpx 12rpx 10rpx; padding: 0rpx 10rpx 12rpx 10rpx;
} }
.record-card { .record-card {
position: relative; position: relative;
padding: 22rpx 24rpx 22rpx 34rpx; padding: 22rpx 24rpx 22rpx 34rpx;
@ -328,6 +322,7 @@ onShow(() => {
border-top: 14rpx solid #e9edf3; border-top: 14rpx solid #e9edf3;
border-bottom: 1rpx solid #d7dce5; border-bottom: 1rpx solid #d7dce5;
} }
.record-status { .record-status {
position: absolute; position: absolute;
top: 24rpx; top: 24rpx;
@ -335,6 +330,7 @@ onShow(() => {
color: #333; color: #333;
font-size: 26rpx; font-size: 26rpx;
} }
.record-row { .record-row {
display: flex; display: flex;
align-items: flex-start; align-items: flex-start;
@ -342,19 +338,23 @@ onShow(() => {
font-size: 27rpx; font-size: 27rpx;
line-height: 38rpx; line-height: 38rpx;
} }
.row-label { .row-label {
flex-shrink: 0; flex-shrink: 0;
color: #6b7280; color: #6b7280;
font-weight: 700; font-weight: 700;
} }
.row-value { .row-value {
min-width: 0; min-width: 0;
color: #333; color: #333;
word-break: break-all; word-break: break-all;
} }
.strong { .strong {
font-weight: 700; font-weight: 700;
} }
.empty { .empty {
padding: 120rpx 0; padding: 120rpx 0;
text-align: center; text-align: center;