我的预约样式优化
This commit is contained in:
WindowBird
parent
a5f7f64459
commit
59057d21e1
|
|
@ -33,7 +33,9 @@
|
|||
<view class="card-header">
|
||||
<text class="activity-title">{{ item.title }}</text>
|
||||
<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>
|
||||
|
||||
|
|
@ -58,28 +60,28 @@
|
|||
<!-- 操作按钮 -->
|
||||
<view class="card-actions">
|
||||
<!-- 只有待核销状态才显示出示码券按钮 -->
|
||||
<view
|
||||
v-if="Number(item.state) === 1"
|
||||
class="action-btn primary"
|
||||
<view
|
||||
v-if="Number(item.state) === 1 || Number(item.state) === 2"
|
||||
class="action-btn"
|
||||
></view>
|
||||
<view
|
||||
v-if="Number(item.state) === 1"
|
||||
class="action-btn secondary"
|
||||
@click="showQRCode(item)"
|
||||
>
|
||||
<image
|
||||
class="btn-icon"
|
||||
mode="aspectFit"
|
||||
src="https://api.ccttiot.com/image-1755237410755.png"
|
||||
/>
|
||||
<text class="btn-text">核销验证码</text>
|
||||
<image :src="urls.qrCodeIcon" class="btn-icon" mode="aspectFit" />
|
||||
<text class="btn-text">出示码券</text>
|
||||
</view>
|
||||
<!-- 只有待核销状态才显示取消预约按钮 -->
|
||||
<view
|
||||
v-if="Number(item.state) === 1"
|
||||
class="action-btn secondary"
|
||||
<view
|
||||
v-if="Number(item.state) === 1"
|
||||
class="action-btn secondary"
|
||||
@click="cancelAppointment(item)"
|
||||
>
|
||||
<image
|
||||
:src="urls.cancelAppointmentIcon"
|
||||
class="btn-icon"
|
||||
mode="aspectFit"
|
||||
src="https://api.ccttiot.com/image-1755237410755.png"
|
||||
/>
|
||||
<text class="btn-text">取消预约</text>
|
||||
</view>
|
||||
|
|
@ -92,15 +94,15 @@
|
|||
/>
|
||||
<text class="btn-text">已完成</text>
|
||||
</view>
|
||||
<!-- 取消预约状态显示已取消提示 -->
|
||||
<view v-if="Number(item.state) === 3" class="action-btn canceled">
|
||||
<image
|
||||
class="btn-icon"
|
||||
mode="aspectFit"
|
||||
src="https://api.ccttiot.com/image-1755237410755.png"
|
||||
/>
|
||||
<text class="btn-text">已取消</text>
|
||||
</view>
|
||||
<!-- <!– 取消预约状态显示已取消提示 –>-->
|
||||
<!-- <view v-if="Number(item.state) === 3" class="action-btn canceled">-->
|
||||
<!-- <image-->
|
||||
<!-- class="btn-icon"-->
|
||||
<!-- mode="aspectFit"-->
|
||||
<!-- src="https://api.ccttiot.com/image-1755237410755.png"-->
|
||||
<!-- />-->
|
||||
<!-- <text class="btn-text">已取消</text>-->
|
||||
<!-- </view>-->
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
|
@ -119,13 +121,13 @@
|
|||
<text class="loading-text">加载中...</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
<!-- 二维码弹窗 -->
|
||||
<qrcode-modal
|
||||
:visible="showQRCodeModal"
|
||||
:value="currentSubscribeId"
|
||||
:ticket-number="currentTicketNumber"
|
||||
:title="'核销验证码'"
|
||||
:value="currentSubscribeId"
|
||||
:visible="showQRCodeModal"
|
||||
@close="closeQRCodeModal"
|
||||
/>
|
||||
</view>
|
||||
|
|
@ -136,17 +138,22 @@ import { CommonEnum } from "@/enum/common.js";
|
|||
import {
|
||||
cancelAppointment,
|
||||
getAppointmentList,
|
||||
verifyAppointmentCode,
|
||||
} from "@/api/personalCenter/index.js";
|
||||
import { generateVerificationQRCode } from "@/utils/qrcode.js";
|
||||
import QRCodeModal from "@/components/qrcode-modal/qrcode-modal.vue";
|
||||
import BaseBackground from "../../components/base-background/base-background.vue";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
QRCodeModal
|
||||
BaseBackground,
|
||||
QRCodeModal,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
urls: {
|
||||
qrCodeIcon: "https://api.ccttiot.com/image-1756260317570.png",
|
||||
cancelAppointmentIcon:
|
||||
"https://api.ccttiot.com/image-1756260524163.png",
|
||||
},
|
||||
CommonEnum,
|
||||
// 当前激活的标签页
|
||||
activeTab: "activity",
|
||||
|
|
@ -162,8 +169,8 @@ export default {
|
|||
},
|
||||
// 二维码弹窗相关
|
||||
showQRCodeModal: false,
|
||||
currentSubscribeId: '',
|
||||
currentTicketNumber: '',
|
||||
currentSubscribeId: "",
|
||||
currentTicketNumber: "",
|
||||
};
|
||||
},
|
||||
onLoad() {
|
||||
|
|
@ -209,7 +216,7 @@ export default {
|
|||
? rows
|
||||
: [...this.appointmentList, ...rows];
|
||||
this.pageParams.total = total;
|
||||
|
||||
|
||||
// 调试信息：打印预约数据状态
|
||||
console.log("预约列表数据:", this.appointmentList);
|
||||
this.appointmentList.forEach((item, index) => {
|
||||
|
|
@ -217,7 +224,7 @@ export default {
|
|||
title: item.title,
|
||||
state: item.state,
|
||||
stateType: typeof item.state,
|
||||
stateNumber: Number(item.state)
|
||||
stateNumber: Number(item.state),
|
||||
});
|
||||
});
|
||||
} else {
|
||||
|
|
@ -270,8 +277,8 @@ export default {
|
|||
getStatusText(state) {
|
||||
const statusMap = {
|
||||
1: "待核销",
|
||||
2: "已核销",
|
||||
3: "取消预约",
|
||||
2: "已核销",
|
||||
3: "已取消",
|
||||
};
|
||||
return statusMap[state] || "未知状态";
|
||||
},
|
||||
|
|
@ -279,9 +286,9 @@ export default {
|
|||
// 获取状态样式类
|
||||
getStatusClass(state) {
|
||||
const classMap = {
|
||||
1: "status-pending", // 待核销 - 橙色
|
||||
2: "status-verified", // 已核销 - 绿色
|
||||
3: "status-canceled", // 取消预约 - 灰色
|
||||
1: "status-pending", // 待核销 - 橙色
|
||||
2: "status-verified", // 已核销 - 绿色
|
||||
3: "status-canceled", // 取消预约 - 灰色
|
||||
};
|
||||
return classMap[state] || "status-default";
|
||||
},
|
||||
|
|
@ -294,12 +301,12 @@ export default {
|
|||
this.currentTicketNumber = item.subscribeId || item.id;
|
||||
this.showQRCodeModal = true;
|
||||
},
|
||||
|
||||
|
||||
// 关闭二维码弹窗
|
||||
closeQRCodeModal() {
|
||||
this.showQRCodeModal = false;
|
||||
this.currentSubscribeId = '';
|
||||
this.currentTicketNumber = '';
|
||||
this.currentSubscribeId = "";
|
||||
this.currentTicketNumber = "";
|
||||
},
|
||||
|
||||
// 取消预约
|
||||
|
|
@ -310,7 +317,9 @@ export default {
|
|||
success: async (res) => {
|
||||
if (res.confirm) {
|
||||
try {
|
||||
const response = await cancelAppointment(item.subscribeId || item.id);
|
||||
const response = await cancelAppointment(
|
||||
item.subscribeId || item.id,
|
||||
);
|
||||
|
||||
if (response.code === 200) {
|
||||
uni.showToast({
|
||||
|
|
@ -348,18 +357,16 @@ export default {
|
|||
align-items: center;
|
||||
flex-direction: column;
|
||||
min-height: 100vh;
|
||||
background: #faf8f3;
|
||||
}
|
||||
|
||||
// 标签页容器
|
||||
.tab-container {
|
||||
width: 650rpx;
|
||||
width: 750rpx;
|
||||
margin-top: 24rpx;
|
||||
display: flex;
|
||||
background: #fff;
|
||||
border-radius: 16rpx;
|
||||
|
||||
padding: 8rpx;
|
||||
border: 2rpx solid #c7a26d;
|
||||
}
|
||||
|
||||
.tab-item {
|
||||
|
|
@ -415,7 +422,7 @@ export default {
|
|||
flex: 1;
|
||||
font-size: 36rpx;
|
||||
font-weight: 600;
|
||||
color: #695347;
|
||||
color: $text-font-color-1;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
|
|
@ -425,7 +432,7 @@ export default {
|
|||
margin-left: 20rpx;
|
||||
|
||||
&.status-pending {
|
||||
background: #ff9f43; // 待核销 - 橙色
|
||||
background: #fef3e0; // 待核销 - 橙色
|
||||
}
|
||||
|
||||
&.status-verified {
|
||||
|
|
@ -433,7 +440,7 @@ export default {
|
|||
}
|
||||
|
||||
&.status-canceled {
|
||||
background: #95a5a6; // 取消预约 - 灰色
|
||||
background: #000000; // 取消预约 - 灰色
|
||||
}
|
||||
|
||||
&.status-default {
|
||||
|
|
@ -443,7 +450,7 @@ export default {
|
|||
|
||||
.status-text {
|
||||
font-size: 24rpx;
|
||||
color: #fff;
|
||||
color: #c7a26d;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
|
|
@ -458,14 +465,16 @@ export default {
|
|||
margin-bottom: 20rpx;
|
||||
|
||||
&:last-child {
|
||||
padding-bottom: 24rpx;
|
||||
margin-bottom: 0;
|
||||
border-bottom: #d8d8d8 solid 1px;
|
||||
}
|
||||
}
|
||||
|
||||
.detail-label {
|
||||
width: 160rpx;
|
||||
font-size: 28rpx;
|
||||
color: #8b7355;
|
||||
color: #695347;
|
||||
font-weight: 400;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
|
@ -473,20 +482,22 @@ export default {
|
|||
.detail-value {
|
||||
flex: 1;
|
||||
font-size: 28rpx;
|
||||
color: #695347;
|
||||
color: $text-font-color-1;
|
||||
font-weight: 400;
|
||||
line-height: 1.4;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
// 操作按钮
|
||||
.card-actions {
|
||||
display: flex;
|
||||
gap: 20rpx;
|
||||
justify-content: right;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
flex: 1;
|
||||
height: 80rpx;
|
||||
height: 70rpx;
|
||||
width: 200rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
|
@ -507,11 +518,11 @@ export default {
|
|||
}
|
||||
|
||||
&.secondary {
|
||||
background: #f8f4f0;
|
||||
border: 2rpx solid #c7a26d;
|
||||
border: 2rpx solid #d8d8d8;
|
||||
|
||||
.btn-text {
|
||||
color: #c7a26d;
|
||||
color: #3d3d3d;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
&:active {
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user