WindowBird/buddhism
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

我的预约样式优化

Browse Source
This commit is contained in:
WindowBird 2025-08-27 11:09:52 +08:00
parent a5f7f64459
commit 59057d21e1
1 changed files with 68 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

107
pages/personalCenter/myAppointment.vue
View File

@ -33,7 +33,9 @@
<view class="card-header"> <view class="card-header">
<text class="activity-title">{{ item.title }}</text> <text class="activity-title">{{ item.title }}</text>
<view :class="['status-tag', getStatusClass(Number(item.state))]"> <view :class="['status-tag', getStatusClass(Number(item.state))]">
<text class="status-text">{{ getStatusText(Number(item.state)) }}</text> <text class="status-text"
>{{ getStatusText(Number(item.state)) }}
</text>
</view> </view>
</view> </view>
@ -58,17 +60,17 @@
<!-- 操作按钮 --> <!-- 操作按钮 -->
<view class="card-actions"> <view class="card-actions">
<!-- 只有待核销状态才显示出示码券按钮 --> <!-- 只有待核销状态才显示出示码券按钮 -->
<view
v-if="Number(item.state) === 1 || Number(item.state) === 2"
class="action-btn"
></view>
<view <view
v-if="Number(item.state) === 1" v-if="Number(item.state) === 1"
class="action-btn primary" class="action-btn secondary"
@click="showQRCode(item)" @click="showQRCode(item)"
> >
<image <image :src="urls.qrCodeIcon" class="btn-icon" mode="aspectFit" />
class="btn-icon" <text class="btn-text">出示码券</text>
mode="aspectFit"
src="https://api.ccttiot.com/image-1755237410755.png"
/>
<text class="btn-text">核销验证码</text>
</view> </view>
<!-- 只有待核销状态才显示取消预约按钮 --> <!-- 只有待核销状态才显示取消预约按钮 -->
<view <view
@ -77,9 +79,9 @@
@click="cancelAppointment(item)" @click="cancelAppointment(item)"
> >
<image <image
:src="urls.cancelAppointmentIcon"
class="btn-icon" class="btn-icon"
mode="aspectFit" mode="aspectFit"
src="https://api.ccttiot.com/image-1755237410755.png"
/> />
<text class="btn-text">取消预约</text> <text class="btn-text">取消预约</text>
</view> </view>
@ -92,15 +94,15 @@
/> />
<text class="btn-text">已完成</text> <text class="btn-text">已完成</text>
</view> </view>
<!-- 取消预约状态显示已取消提示 --> <!-- &lt;!&ndash; 取消预约状态显示已取消提示 &ndash;&gt;-->
<view v-if="Number(item.state) === 3" class="action-btn canceled"> <!-- <view v-if="Number(item.state) === 3" class="action-btn canceled">-->
<image <!-- <image-->
class="btn-icon" <!-- class="btn-icon"-->
mode="aspectFit" <!-- mode="aspectFit"-->
src="https://api.ccttiot.com/image-1755237410755.png" <!-- src="https://api.ccttiot.com/image-1755237410755.png"-->
/> <!-- />-->
<text class="btn-text">已取消</text> <!-- <text class="btn-text">已取消</text>-->
</view> <!-- </view>-->
</view> </view>
</view> </view>
@ -122,10 +124,10 @@
<!-- 二维码弹窗 --> <!-- 二维码弹窗 -->
<qrcode-modal <qrcode-modal
:visible="showQRCodeModal"
:value="currentSubscribeId"
:ticket-number="currentTicketNumber" :ticket-number="currentTicketNumber"
:title="'核销验证码'" :title="'核销验证码'"
:value="currentSubscribeId"
:visible="showQRCodeModal"
@close="closeQRCodeModal" @close="closeQRCodeModal"
/> />
</view> </view>
@ -136,17 +138,22 @@ import { CommonEnum } from "@/enum/common.js";
import { import {
cancelAppointment, cancelAppointment,
getAppointmentList, getAppointmentList,
verifyAppointmentCode,
} from "@/api/personalCenter/index.js"; } from "@/api/personalCenter/index.js";
import { generateVerificationQRCode } from "@/utils/qrcode.js";
import QRCodeModal from "@/components/qrcode-modal/qrcode-modal.vue"; import QRCodeModal from "@/components/qrcode-modal/qrcode-modal.vue";
import BaseBackground from "../../components/base-background/base-background.vue";
export default { export default {
components: { components: {
QRCodeModal BaseBackground,
QRCodeModal,
}, },
data() { data() {
return { return {
urls: {
qrCodeIcon: "https://api.ccttiot.com/image-1756260317570.png",
cancelAppointmentIcon:
"https://api.ccttiot.com/image-1756260524163.png",
},
CommonEnum, CommonEnum,
// 当前激活的标签页 // 当前激活的标签页
activeTab: "activity", activeTab: "activity",
@ -162,8 +169,8 @@ export default {
}, },
// 二维码弹窗相关 // 二维码弹窗相关
showQRCodeModal: false, showQRCodeModal: false,
currentSubscribeId: '', currentSubscribeId: "",
currentTicketNumber: '', currentTicketNumber: "",
}; };
}, },
onLoad() { onLoad() {
@ -217,7 +224,7 @@ export default {
title: item.title, title: item.title,
state: item.state, state: item.state,
stateType: typeof item.state, stateType: typeof item.state,
stateNumber: Number(item.state) stateNumber: Number(item.state),
}); });
}); });
} else { } else {
@ -271,7 +278,7 @@ export default {
const statusMap = { const statusMap = {
1: "待核销", 1: "待核销",
2: "已核销", 2: "已核销",
3: "取消预约", 3: "已取消",
}; };
return statusMap[state] || "未知状态"; return statusMap[state] || "未知状态";
}, },
@ -279,9 +286,9 @@ export default {
// 获取状态样式类 // 获取状态样式类
getStatusClass(state) { getStatusClass(state) {
const classMap = { const classMap = {
1: "status-pending", // 待核销 - 橙色 1: "status-pending", // 待核销 - 橙色
2: "status-verified", // 已核销 - 绿色 2: "status-verified", // 已核销 - 绿色
3: "status-canceled", // 取消预约 - 灰色 3: "status-canceled", // 取消预约 - 灰色
}; };
return classMap[state] || "status-default"; return classMap[state] || "status-default";
}, },
@ -298,8 +305,8 @@ export default {
// 关闭二维码弹窗 // 关闭二维码弹窗
closeQRCodeModal() { closeQRCodeModal() {
this.showQRCodeModal = false; this.showQRCodeModal = false;
this.currentSubscribeId = ''; this.currentSubscribeId = "";
this.currentTicketNumber = ''; this.currentTicketNumber = "";
}, },
// 取消预约 // 取消预约
@ -310,7 +317,9 @@ export default {
success: async (res) => { success: async (res) => {
if (res.confirm) { if (res.confirm) {
try { try {
const response = await cancelAppointment(item.subscribeId || item.id); const response = await cancelAppointment(
item.subscribeId || item.id,
);
if (response.code === 200) { if (response.code === 200) {
uni.showToast({ uni.showToast({
@ -348,18 +357,16 @@ export default {
align-items: center; align-items: center;
flex-direction: column; flex-direction: column;
min-height: 100vh; min-height: 100vh;
background: #faf8f3;
} }
// 标签页容器 // 标签页容器
.tab-container { .tab-container {
width: 650rpx; width: 750rpx;
margin-top: 24rpx; margin-top: 24rpx;
display: flex; display: flex;
background: #fff; background: #fff;
border-radius: 16rpx;
padding: 8rpx; padding: 8rpx;
border: 2rpx solid #c7a26d;
} }
.tab-item { .tab-item {
@ -415,7 +422,7 @@ export default {
flex: 1; flex: 1;
font-size: 36rpx; font-size: 36rpx;
font-weight: 600; font-weight: 600;
color: #695347; color: $text-font-color-1;
line-height: 1.4; line-height: 1.4;
} }
@ -425,7 +432,7 @@ export default {
margin-left: 20rpx; margin-left: 20rpx;
&.status-pending { &.status-pending {
background: #ff9f43; // 待核销 - 橙色 background: #fef3e0; // 待核销 - 橙色
} }
&.status-verified { &.status-verified {
@ -433,7 +440,7 @@ export default {
} }
&.status-canceled { &.status-canceled {
background: #95a5a6; // 取消预约 - 灰色 background: #000000; // 取消预约 - 灰色
} }
&.status-default { &.status-default {
@ -443,7 +450,7 @@ export default {
.status-text { .status-text {
font-size: 24rpx; font-size: 24rpx;
color: #fff; color: #c7a26d;
font-weight: 400; font-weight: 400;
} }
@ -458,14 +465,16 @@ export default {
margin-bottom: 20rpx; margin-bottom: 20rpx;
&:last-child { &:last-child {
padding-bottom: 24rpx;
margin-bottom: 0; margin-bottom: 0;
border-bottom: #d8d8d8 solid 1px;
} }
} }
.detail-label { .detail-label {
width: 160rpx; width: 160rpx;
font-size: 28rpx; font-size: 28rpx;
color: #8b7355; color: #695347;
font-weight: 400; font-weight: 400;
flex-shrink: 0; flex-shrink: 0;
} }
@ -473,20 +482,22 @@ export default {
.detail-value { .detail-value {
flex: 1; flex: 1;
font-size: 28rpx; font-size: 28rpx;
color: #695347; color: $text-font-color-1;
font-weight: 400; font-weight: 400;
line-height: 1.4; line-height: 1.4;
text-align: right;
} }
// 操作按钮 // 操作按钮
.card-actions { .card-actions {
display: flex; display: flex;
gap: 20rpx; gap: 20rpx;
justify-content: right;
} }
.action-btn { .action-btn {
flex: 1; height: 70rpx;
height: 80rpx; width: 200rpx;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@ -507,11 +518,11 @@ export default {
} }
&.secondary { &.secondary {
background: #f8f4f0; border: 2rpx solid #d8d8d8;
border: 2rpx solid #c7a26d;
.btn-text { .btn-text {
color: #c7a26d; color: #3d3d3d;
font-weight: 400;
} }
&:active { &:active {