Skip to content

飞
飞鹤小程序
Commit 845b536f authored by spc's avatar spc
Browse files
Options

fixed

parent eb2a5dea
Hide whitespace changes
Inline Side-by-side
Showing with 531 additions and 142 deletions
api/address.js
View file @ 845b536f
...@@ -163,4 +163,29 @@ export const getAddressDetail = (data) => api.get('/c/user/address/detail', data ...@@ -163,4 +163,29 @@ export const getAddressDetail = (data) => api.get('/c/user/address/detail', data
* @response {number} response.data[].code - 地区代码 * @response {number} response.data[].code - 地区代码
* @response {string} response.data[].name - 地区名称 * @response {string} response.data[].name - 地区名称
*/ */
export const getRegionList = (params = {}) => api.get('/c/regions/query', params); export const getRegionList = (params = {}) => api.get('/c/regions/query', params);
\ No newline at end of file
/**
* 获取订单物流信息
* @param {Object} data - 请求参数
* @param {string} data.order_no - 订单号 (必须)
* @returns {Promise} API响应
* @description 根据订单号查询订单物流信息
* @response {Object} 响应数据
* @response {boolean} response.ok - 请求是否成功
* @response {boolean} response.success - 操作是否成功
* @response {string} response.msg - 响应消息
* @response {string} response.code - 响应代码
* @response {Object} response.data - 物流信息数据
* @response {string} response.data.order_no - 订单号
* @response {string} response.data.express_company - 快递公司名称
* @response {string} response.data.express_no - 快递公司单号
* @response {Array} response.data.traces - 物流轨迹列表
* @response {string} response.data.traces[].time - 物流事件时间
* @response {string} response.data.traces[].context - 物流事件描述
*/
export const getOrderLogistics = (data) => api.get('/c/order/express/route', data);
pages.json
View file @ 845b536f
...@@ -404,6 +404,13 @@ ...@@ -404,6 +404,13 @@
"style": { "style": {
"navigationBarTitleText": "我的订单" "navigationBarTitleText": "我的订单"
} }
},
{
"path" : "logisticsPage/logisticsPage",
"style" :
{
"navigationBarTitleText" : ""
}
} }
] ]
} }
......
v3/logisticsPage/logisticsPage.vue 0 → 100644
View file @ 845b536f
<template>
<view class="logistics-container">
<!-- 顶部信息 -->
<view class="logistics-header">
<view class="logistics-info">
<view class="company-info">
<text class="company-name">{{ logisticsData.logisticsCompanyName || '快递公司' }}</text>
<text class="express-code">{{ logisticsData.expressCode || '暂无运单号' }}</text>
</view>
<view class="status-info" v-if="logisticsData.statusDesc">
<text class="status-desc">{{ logisticsData.statusDesc }}</text>
</view>
</view>
</view>
<!-- 物流时间轴 -->
<view class="logistics-timeline" v-if="logisticsData.processDetailList && logisticsData.processDetailList.length > 0">
<view class="timeline-item" v-for="(item, index) in logisticsData.processDetailList" :key="index">
<!-- 时间轴点和线 -->
<view class="timeline-line">
<view class="timeline-dot" :class="{ 'active': index === 0 }">
<view class="dot-inner" v-if="index === 0"></view>
</view>
<view class="timeline-line-vertical" v-if="index < logisticsData.processDetailList.length - 1"></view>
</view>
<!-- 物流信息内容 -->
<view class="timeline-content">
<view class="timeline-text" :class="{ 'active': index === 0 }">
<!-- 处理时间 -->
<text class="timeline-time">{{ formatTime(item.processDate) }}</text>
<!-- 物流信息 -->
<text class="timeline-info">{{ item.text || '暂无信息' }}</text>
</view>
</view>
</view>
</view>
<!-- 暂无数据提示 -->
<view class="empty-logistics" v-else>
<text>暂无物流信息</text>
</view>
<!-- 底部间距 -->
<view class="bottom-space"></view>
</view>
</template>
<script>
import { getOrderLogistics } from '@/api/address';
export default {
data() {
return {
// 物流数据
logisticsData: {
logisticsCompanyName: '',
logisticsCompanyCode: '',
expressCode: '',
statusDesc: '',
parcelStatusDesc: '',
lastUpdateTime: '',
processDetailList: []
},
// 加载状态
loading: true
}
},
onLoad(options) {
// 从页面参数获取订单ID或物流单号
this.orderId = options.orderId || '';
this.getLogisticsInfo();
},
methods: {
// 获取物流信息
async getLogisticsInfo() {
try {
this.loading = true;
// 调用物流查询接口
const res = await getOrderLogistics({
orderId: this.orderId
});
if (res && res.data) {
// 假设接口返回的数据结构为 { ok, data: { processDetailList, ... } }
// 调整为页面需要的数据结构
this.logisticsData = {
logisticsCompanyName: res.data.logisticsCompanyName || '',
logisticsCompanyCode: res.data.logisticsCompanyCode || '',
expressCode: res.data.expressCode || '',
statusDesc: res.data.statusDesc || res.data.parcelStatusDesc || '',
parcelStatusDesc: res.data.parcelStatusDesc || '',
lastUpdateTime: res.data.lastUpdateTime || '',
processDetailList: res.data.processDetailList || []
};
} else {
console.error('物流数据获取失败');
}
} catch (error) {
console.error('获取物流信息异常:', error);
} finally {
this.loading = false;
}
},
// 格式化时间
formatTime(timeStr) {
if (!timeStr) return '';
// 假设时间格式为 yyyy-MM-dd HH:mm:ss
// 需要转换为 MM.dd HH:mm 格式
const date = new Date(timeStr);
if (isNaN(date.getTime())) return timeStr;
const month = (date.getMonth() + 1).toString().padStart(2, '0');
const day = date.getDate().toString().padStart(2, '0');
const hours = date.getHours().toString().padStart(2, '0');
const minutes = date.getMinutes().toString().padStart(2, '0');
return `${month}.${day} ${hours}:${minutes}`;
}
}
}
</script>
<style scoped>
.logistics-container {
min-height: 100vh;
background-color: #f5f5f5;
}
/* 顶部信息样式 */
.logistics-header {
background-color: #ffffff;
padding: 30rpx 30rpx 20rpx;
border-bottom: 1rpx solid #e5e5e5;
}
.logistics-info {
padding-bottom: 10rpx;
}
.company-info {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20rpx;
}
.company-name {
font-size: 28rpx;
color: #333333;
font-weight: 500;
}
.express-code {
font-size: 26rpx;
color: #999999;
}
.status-info {
padding-bottom: 10rpx;
}
.status-desc {
font-size: 28rpx;
color: #666666;
}
/* 物流时间轴样式 */
.logistics-timeline {
margin-top: 20rpx;
background-color: #ffffff;
padding: 30rpx 0;
}
.timeline-item {
display: flex;
padding: 0 30rpx;
position: relative;
padding-bottom: 40rpx;
}
/* 时间轴点和线 */
.timeline-line {
display: flex;
flex-direction: column;
align-items: center;
margin-right: 30rpx;
min-width: 20rpx;
}
.timeline-dot {
width: 20rpx;
height: 20rpx;
border-radius: 50%;
background-color: #e5e5e5;
position: relative;
z-index: 2;
}
.timeline-dot.active {
background-color: #ffffff;
border: 2rpx solid #ff6600;
width: 18rpx;
height: 18rpx;
}
.dot-inner {
position: absolute;
width: 10rpx;
height: 10rpx;
background-color: #ff6600;
border-radius: 50%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.timeline-line-vertical {
width: 2rpx;
background-color: #e5e5e5;
flex: 1;
margin-top: -1rpx;
position: relative;
z-index: 1;
}
/* 物流内容样式 */
.timeline-content {
flex: 1;
padding-bottom: 40rpx;
}
.timeline-text {
font-size: 26rpx;
color: #999999;
line-height: 40rpx;
word-break: break-all;
}
.timeline-text.active {
color: #333333;
}
.timeline-time {
display: block;
margin-bottom: 10rpx;
font-size: 24rpx;
}
.timeline-info {
font-size: 26rpx;
}
/* 暂无数据样式 */
.empty-logistics {
padding: 100rpx 0;
test-align: center;
color: #999999;
font-size: 28rpx;
background-color: #ffffff;
margin-top: 20rpx;
}
/* 底部间距 */
.bottom-space {
height: 40rpx;
}
</style>
v3/orderDetail/orderDetail.vue
View file @ 845b536f
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
<view class="content"> <view class="content">
<!-- 订单状态 --> <!-- 订单状态 -->
<view class="status-section" :class="statusClass"> <view class="status-section" :class="statusClass">
<view class="status-icon" :class="statusIconClass">{{ statusIcon }}</view> <image class="status-icon" :src="getStatusIcon()" mode="aspectFit"></image>
<text class="status-text">{{ orderData.status }}</text> <text class="status-text">{{ orderData.status }}</text>
<text v-if="orderData.failureReason" class="failure-reason">{{ orderData.failureReason }}</text> <text v-if="orderData.failureReason" class="failure-reason">{{ orderData.failureReason }}</text>
</view> </view>
...@@ -164,6 +164,24 @@ ...@@ -164,6 +164,24 @@
</view> </view>
</view> </view>
</view> </view>
<!-- 退货确认弹窗 -->
<view class="modal-overlay" v-if="showRefundModal" @click="closeRefundModal">
<view class="modal-content" @click.stop>
<view class="modal-title">确认退货</view>
<view class="modal-message">确定要申请退货吗？</view>
<view class="modal-buttons">
<button class="modal-btn cancel-btn" @click="closeRefundModal">取消</button>
<button class="modal-btn confirm-btn" @click="confirmRefund">确定</button>
</view>
<view class="modal-disclaimer">申请退货后将由客服进行审核处理</view>
</view>
<!-- 关闭按钮 -->
<view class="modal-close-btn" @click="closeRefundModal">
<text class="modal-close-icon">×</text>
</view>
</view>
</template> </template>
...@@ -173,7 +191,6 @@ ...@@ -173,7 +191,6 @@
import { getOrderDetail } from '@/api/user.js'; import { getOrderDetail } from '@/api/user.js';
import { useHomeStore } from '@/stores/home'; import { useHomeStore } from '@/stores/home';
import { jump, JumpType } from '@/utils/index'; import { jump, JumpType } from '@/utils/index';
import { storeToRefs } from 'pinia';
import { fetchOrderCancel } from '../../api/goods'; import { fetchOrderCancel } from '../../api/goods';
export default { export default {
...@@ -235,7 +252,8 @@ export default { ...@@ -235,7 +252,8 @@ export default {
errMsg: '', errMsg: '',
virtualConfig: {} virtualConfig: {}
}, },
isLoading: true isLoading: true,
showRefundModal: false
} }
}, },
// onLoad是生命周期钩子，应该直接放在组件对象下 // onLoad是生命周期钩子，应该直接放在组件对象下
...@@ -318,6 +336,18 @@ export default { ...@@ -318,6 +336,18 @@ export default {
} }
}, },
methods: { methods: {
// 获取状态图标
getStatusIcon() {
const iconMap = {
'waiting_ship': this.$baseUrl + 'homepage/Q3Res/icon_order_wait.png',
'shipped': this.$baseUrl + 'homepage/Q3Res/icon_order_sendGoods.png',
'completed': this.$baseUrl + 'homepage/Q3Res/icon_order_compelete.png',
'success': this.$baseUrl + 'homepage/Q3Res/icon_order_compelete.png',
'failed': this.$baseUrl + 'homepage/Q3Res/icon_order_warn.png'
};
return iconMap[this.orderData.statusCode] || (this.$baseUrl + 'homepage/Q3Res/icon_order_compelete.png');
},
// 加载订单详情 // 加载订单详情
async loadOrderDetail(orderId) { async loadOrderDetail(orderId) {
this.isLoading = true; this.isLoading = true;
...@@ -614,41 +644,8 @@ export default { ...@@ -614,41 +644,8 @@ export default {
// 处理操作按钮点击 // 处理操作按钮点击
async handleAction() { async handleAction() {
if (this.orderData.productType === 'physical' && this.orderData.statusCode === 'waiting_ship') { if (this.orderData.productType === 'physical' && this.orderData.statusCode === 'waiting_ship') {
// 显示确认弹窗 // 显示自定义确认弹窗
uni.showModal({ this.showRefundModal = true;
title: '确认退货',
content: '确定要申请退货吗？',
success: async (res) => {
if (res.confirm) {
try {
// 调用退货接口
const response = await fetchOrderCancel({
order_no: this.orderData.orderNo || this.orderData.orderNumber
});
if (response.ok && response.data) {
uni.showToast({
title: '申请退货成功',
icon: 'success'
});
// 刷新订单状态
this.loadOrderDetail(this.orderData.orderNo || this.orderData.orderNumber);
} else {
uni.showToast({
title: response.msg || '申请退货失败',
icon: 'none'
});
}
} catch (error) {
console.error('申请退货失败:', error);
uni.showToast({
title: '网络错误，请重试',
icon: 'none'
});
}
}
}
});
} }
// 优选券（coupon）的"去使用"按钮点击跳转 // 优选券（coupon）的"去使用"按钮点击跳转
if (this.orderData.productType === 'virtual' && this.orderData.virtualType === 'coupon' && if (this.orderData.productType === 'virtual' && this.orderData.virtualType === 'coupon' &&
...@@ -658,6 +655,44 @@ export default { ...@@ -658,6 +655,44 @@ export default {
} }
}, },
// 关闭退货确认弹窗
closeRefundModal() {
this.showRefundModal = false;
},
// 确认退货
async confirmRefund() {
try {
// 调用退货接口
const response = await fetchOrderCancel({
order_no: this.orderData.orderNo || this.orderData.orderNumber
});
console.log('退货接口响应:', response, this.orderData.orderNo, this.orderData.orderNumber, this.orderData);
if (response.ok && response.data) {
uni.showToast({
title: '申请退货成功',
icon: 'success'
});
// 刷新订单状态
this.loadOrderDetail(this.orderData.orderNo || this.orderData.orderNumber);
// 关闭弹窗
this.closeRefundModal();
} else {
uni.showToast({
title: response.msg || '申请退货失败',
icon: 'none'
});
}
} catch (error) {
console.error('申请退货失败:', error);
uni.showToast({
title: '网络错误，请重试',
icon: 'none'
});
}
},
// 设置订单状态 - 供外部调用 // 设置订单状态 - 供外部调用
setOrderStatus(productType, statusCode, statusText, failureReason = '') { setOrderStatus(productType, statusCode, statusText, failureReason = '') {
this.orderData.productType = productType; this.orderData.productType = productType;
...@@ -717,104 +752,62 @@ export default { ...@@ -717,104 +752,62 @@ export default {
/* 内容区域 */ /* 内容区域 */
.content { .content {
padding: 0; padding: 0 20rpx;
box-sizing: border-box; box-sizing: border-box;
} }
/* 订单状态 */ /* 订单状态 */
.status-section { .status-section {
padding: 40rpx 30rpx; padding: 40rpx 20rpx;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; background: linear-gradient(180deg, #ECC990 0%, rgba(211, 164, 88, 0) 100%);
} position: relative;
margin: 0 -20rpx;
.status-section.status-waiting { width: calc(100% + 40rpx);
background-color: #f0e6d2; overflow: hidden;
}
.status-section.status-shipped {
background-color: #f0e6d2;
}
.status-section.status-completed {
background-color: #f0e6d2;
}
.status-section.status-success {
background-color: #f0e6d2;
}
.status-section.status-failed {
background-color: #ffe6e6;
} }
.status-icon { .status-icon {
width: 60rpx; width: 44rpx;
height: 60rpx; height: 44rpx;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-right: 20rpx; margin-right: 20rpx;
font-size: 32rpx; flex-shrink: 0;
font-weight: bold;
}
.status-icon.icon-waiting {
background-color: #d3a458;
color: #fff;
}
.status-icon.icon-shipped {
background-color: #d3a458;
color: #fff;
}
.status-icon.icon-completed {
background-color: #d3a458;
color: #fff;
}
.status-icon.icon-success {
background-color: #4CAF50;
color: #fff;
}
.status-icon.icon-failed {
background-color: #f44336;
color: #fff;
} }
.status-text { .status-text {
font-size: 32rpx; font-size: 36rpx;
font-weight: bold; font-weight: bold;
color: #fff;
flex-shrink: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
} }
/* 覆盖所有状态下的文本颜色为白色 */
.status-section.status-waiting .status-text, .status-section.status-waiting .status-text,
.status-section.status-shipped .status-text, .status-section.status-shipped .status-text,
.status-section.status-completed .status-text { .status-section.status-completed .status-text,
color: #d3a458; .status-section.status-success .status-text,
}
.status-section.status-success .status-text {
color: #4CAF50;
}
.status-section.status-failed .status-text { .status-section.status-failed .status-text {
color: #f44336; color: #fff;
} }
.failure-reason { .failure-reason {
font-size: 24rpx; font-size: 26rpx;
color: #f44336; color: #fff;
text-align: center; margin-left: 20rpx;
flex-shrink: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
} }
/* 收货地址 */ /* 收货地址 */
.address-section { .address-section {
background-color: #fff; background-color: #fff;
padding: 30rpx; padding: 30rpx 20rpx;
margin-bottom: 20rpx; margin-bottom: 20rpx;
display: flex; display: flex;
align-items: center; align-items: center;
...@@ -839,10 +832,10 @@ export default { ...@@ -839,10 +832,10 @@ export default {
} }
.address-text { .address-text {
font-size: 28rpx; font-size: 30rpx;
color: #333; color: #333;
line-height: 40rpx; line-height: 44rpx;
margin-bottom: 10rpx; margin-bottom: 12rpx;
display: block; display: block;
} }
...@@ -853,7 +846,7 @@ export default { ...@@ -853,7 +846,7 @@ export default {
.recipient-name, .recipient-name,
.recipient-phone { .recipient-phone {
font-size: 26rpx; font-size: 28rpx;
color: #666; color: #666;
} }
...@@ -901,7 +894,7 @@ export default { ...@@ -901,7 +894,7 @@ export default {
} }
.product-name { .product-name {
font-size: 28rpx; font-size: 30rpx;
color: #333; color: #333;
line-height: 1.4; line-height: 1.4;
margin-bottom: 12rpx; margin-bottom: 12rpx;
...@@ -910,7 +903,7 @@ export default { ...@@ -910,7 +903,7 @@ export default {
} }
.product-spec { .product-spec {
font-size: 24rpx; font-size: 26rpx;
color: #999; color: #999;
margin-bottom: 12rpx; margin-bottom: 12rpx;
display: block; display: block;
...@@ -921,9 +914,9 @@ export default { ...@@ -921,9 +914,9 @@ export default {
} }
.content-text { .content-text {
font-size: 24rpx; font-size: 26rpx;
color: #666; color: #666;
line-height: 1.4; line-height: 1.5;
max-height: 200rpx; max-height: 200rpx;
overflow-y: auto; overflow-y: auto;
} }
...@@ -935,13 +928,13 @@ export default { ...@@ -935,13 +928,13 @@ export default {
} }
.product-price { .product-price {
font-size: 32rpx; font-size: 34rpx;
color: #d3a458; color: #d3a458;
font-weight: bold; font-weight: bold;
} }
.product-quantity { .product-quantity {
font-size: 24rpx; font-size: 26rpx;
color: #999; color: #999;
} }
...@@ -958,12 +951,12 @@ export default { ...@@ -958,12 +951,12 @@ export default {
} }
.payment-label { .payment-label {
font-size: 28rpx; font-size: 30rpx;
color: #333; color: #333;
} }
.payment-value { .payment-value {
font-size: 28rpx; font-size: 30rpx;
color: #333; color: #333;
} }
...@@ -976,13 +969,13 @@ export default { ...@@ -976,13 +969,13 @@ export default {
} }
.total-label { .total-label {
font-size: 28rpx; font-size: 30rpx;
color: #333; color: #333;
margin-right: 10rpx; margin-right: 10rpx;
} }
.total-value { .total-value {
font-size: 32rpx; font-size: 34rpx;
color: #d3a458; color: #d3a458;
font-weight: bold; font-weight: bold;
} }
...@@ -1004,7 +997,7 @@ export default { ...@@ -1004,7 +997,7 @@ export default {
} }
.info-label { .info-label {
font-size: 28rpx; font-size: 30rpx;
color: #333; color: #333;
} }
...@@ -1015,16 +1008,16 @@ export default { ...@@ -1015,16 +1008,16 @@ export default {
} }
.info-value { .info-value {
font-size: 28rpx; font-size: 30rpx;
color: #666; color: #666;
} }
/* 已统一到上方的.copy-btn样式 */ /* 已统一到上方的.copy-btn样式 */
/* 物流信息 */ /* 物流信息 */
.logistics-section { .address-section {
background-color: #fff; background-color: #fff;
padding: 30rpx; padding: 30rpx 20rpx;
margin-bottom: 20rpx; margin-bottom: 20rpx;
display: flex; display: flex;
align-items: center; align-items: center;
...@@ -1033,6 +1026,13 @@ export default { ...@@ -1033,6 +1026,13 @@ export default {
border-radius: 20rpx; border-radius: 20rpx;
} }
.module-logistics {
background-color: #fff;
padding: 30rpx 20rpx;
margin-bottom: 20rpx;
border-radius: 20rpx;
}
.logistics-row { .logistics-row {
display: flex; display: flex;
align-items: center; align-items: center;
...@@ -1046,7 +1046,7 @@ export default { ...@@ -1046,7 +1046,7 @@ export default {
} }
.logistics-label { .logistics-label {
font-size: 28rpx; font-size: 30rpx;
color: #333; color: #333;
} }
...@@ -1057,7 +1057,7 @@ export default { ...@@ -1057,7 +1057,7 @@ export default {
} }
.logistics-value { .logistics-value {
font-size: 28rpx; font-size: 30rpx;
color: #666; color: #666;
} }
...@@ -1132,7 +1132,7 @@ export default { ...@@ -1132,7 +1132,7 @@ export default {
} }
.coupon-label { .coupon-label {
font-size: 26rpx; font-size: 28rpx;
color: #666; color: #666;
text-align: left; text-align: left;
white-space: nowrap; white-space: nowrap;
...@@ -1147,32 +1147,32 @@ export default { ...@@ -1147,32 +1147,32 @@ export default {
} }
.expire-time { .expire-time {
font-size: 26rpx; font-size: 28rpx;
color: #333; color: #333;
text-align: right; text-align: right;
} }
.coupon-code { .coupon-code {
font-size: 24rpx; font-size: 26rpx;
color: #333; color: #333;
letter-spacing: 2rpx; letter-spacing: 2rpx;
} }
.expire-time { .expire-time {
flex: 1; flex: 1;
font-size: 26rpx; font-size: 28rpx;
color: #666; color: #666;
text-align: right; text-align: right;
} }
/* 复制按钮样式 - 统一调整为与图2一致 */ /* 复制按钮样式 - 统一调整为与图2一致 */
.copy-btn { .copy-btn {
font-size: 24rpx; font-size: 26rpx;
color: #666; color: #666;
white-space: nowrap; white-space: nowrap;
padding: 6rpx 20rpx; padding: 8rpx 24rpx;
border: 1rpx solid #ddd; border: 1rpx solid #ddd;
border-radius: 16rpx; border-radius: 18rpx;
background-color: #f5f5f5; background-color: #f5f5f5;
} }
...@@ -1180,9 +1180,10 @@ export default { ...@@ -1180,9 +1180,10 @@ export default {
.module-product-info, .module-product-info,
.module-instructions, .module-instructions,
.module-payment, .module-payment,
.module-order-info { .module-order-info,
.module-logistics {
background-color: #fff; background-color: #fff;
padding: 30rpx; padding: 30rpx 20rpx;
margin-bottom: 20rpx; margin-bottom: 20rpx;
border-radius: 20rpx; border-radius: 20rpx;
} }
...@@ -1200,18 +1201,18 @@ export default { ...@@ -1200,18 +1201,18 @@ export default {
} }
.section-title { .section-title {
font-size: 28rpx; font-size: 30rpx;
color: #333; color: #333;
font-weight: bold; font-weight: bold;
margin-bottom: 20rpx; margin-bottom: 24rpx;
display: block; display: block;
} }
.instruction-content, .instruction-content,
.instruction-text { .instruction-text {
font-size: 26rpx; font-size: 28rpx;
color: #666; color: #666;
line-height: 40rpx; line-height: 44rpx;
} }
.instruction-content img { .instruction-content img {
...@@ -1238,4 +1239,92 @@ export default { ...@@ -1238,4 +1239,92 @@ export default {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
/* 弹窗样式 */
.modal-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
z-index: 9999;
}
.modal-content {
background-color: #fff;
border-radius: 20rpx;
width: 80%;
max-width: 500rpx;
padding: 40rpx;
position: relative;
}
.modal-title {
font-size: 36rpx;
font-weight: bold;
color: #333;
text-align: center;
margin-bottom: 30rpx;
}
.modal-message {
font-size: 28rpx;
color: #666;
text-align: center;
line-height: 44rpx;
margin-bottom: 40rpx;
}
.modal-buttons {
display: flex;
justify-content: space-between;
gap: 30rpx;
}
.modal-btn {
flex: 1;
height: 88rpx;
line-height: 88rpx;
text-align: center;
font-size: 32rpx;
border-radius: 44rpx;
border: none;
}
.cancel-btn {
background-color: #f5f5f5;
color: #666;
}
.confirm-btn {
background-color: #d3a458;
color: #fff;
}
.modal-disclaimer {
font-size: 24rpx;
color: #999;
text-align: center;
margin-top: 20rpx;
}
.modal-close-btn {
position: absolute;
top: -80rpx;
right: 20rpx;
width: 60rpx;
height: 60rpx;
display: flex;
align-items: center;
justify-content: center;
}
.modal-close-icon {
font-size: 60rpx;
color: #fff;
}
</style> </style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment