fix:修复bug
This commit is contained in:
@@ -0,0 +1,262 @@
|
||||
<template>
|
||||
<view class="device-order-card" @click="onCardClick">
|
||||
<!-- 头部：标题和状态 -->
|
||||
<view class="card-header">
|
||||
<view class="header-left">
|
||||
<view class="tag-bar"></view>
|
||||
<text class="title">定制化订单</text>
|
||||
</view>
|
||||
<view class="status-badge">{{ statusText }}</view>
|
||||
</view>
|
||||
|
||||
<!-- 产品信息区域 -->
|
||||
<view class="product-section">
|
||||
<image
|
||||
:src="order.pictureUrl || order.productImage || '/static/default-product.png'"
|
||||
mode="aspectFill"
|
||||
class="product-image"
|
||||
></image>
|
||||
<view class="product-info">
|
||||
<view class="product-name">{{ order.productName || order.deviceName || '风电者2026新款' }}</view>
|
||||
<view style="display: flex;justify-content: space-between;">
|
||||
<view class="product-style">款式：{{ order.optionName || order.style || order.deviceStyle || '标准' }}</view>
|
||||
<view class="product-price">¥ {{ totalAmount }}</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 分割线 -->
|
||||
<view class="divider-wrapper">
|
||||
<uv-divider :hairline="false" lineColor="#f5f5f5"></uv-divider>
|
||||
</view>
|
||||
|
||||
<!-- 底部时间和删除按钮 -->
|
||||
<view class="card-footer">
|
||||
<text class="order-time">{{ order.startTime || order.createTime }}</text>
|
||||
<view class="footer-actions">
|
||||
<!-- 待付款状态显示立即支付按钮 -->
|
||||
<view v-if="isWaitingPayment" class="pay-btn" @click.stop="onPay">
|
||||
<text>立即支付</text>
|
||||
</view>
|
||||
<view class="delete-btn" @click.stop="onDelete">
|
||||
<uv-icon name="trash" size="20" color="#999"></uv-icon>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed } from 'vue';
|
||||
import { useI18n } from '@/utils/i18n.js'
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
const props = defineProps({
|
||||
order: {
|
||||
type: Object,
|
||||
required: true
|
||||
}
|
||||
});
|
||||
|
||||
const emit = defineEmits(['click', 'delete', 'pay']);
|
||||
|
||||
// 订单状态文本
|
||||
const statusText = computed(() => {
|
||||
const status = props.order.orderStatus || props.order.status;
|
||||
if (status === 0 || status === '0') {
|
||||
return '待付款';
|
||||
}
|
||||
if (status === 1 || status === '1') {
|
||||
return '待发货';
|
||||
}
|
||||
if (status === 2 || status === '2') {
|
||||
return '待收货';
|
||||
}
|
||||
if (status === 3 || status === '3') {
|
||||
return '已完成';
|
||||
}
|
||||
if (status === 4 || status === '4') {
|
||||
return '已取消';
|
||||
}
|
||||
if (status === 5 || status === '5') {
|
||||
return '退款中';
|
||||
}
|
||||
return '待付款';
|
||||
});
|
||||
|
||||
// 判断是否为待付款状态
|
||||
const isWaitingPayment = computed(() => {
|
||||
const status = props.order.orderStatus || props.order.status;
|
||||
return status === 0 || status === '0';
|
||||
});
|
||||
|
||||
// 总金额
|
||||
const totalAmount = computed(() => {
|
||||
return props.order.totalAmount || props.order.amount || props.order.payAmount || '99.0';
|
||||
});
|
||||
|
||||
// 卡片点击事件
|
||||
const onCardClick = () => {
|
||||
emit('click', props.order);
|
||||
};
|
||||
|
||||
// 删除订单
|
||||
const onDelete = () => {
|
||||
emit('delete', props.order);
|
||||
};
|
||||
|
||||
// 立即支付
|
||||
const onPay = () => {
|
||||
emit('pay', props.order);
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.device-order-card {
|
||||
background: #fff;
|
||||
border-radius: 16rpx;
|
||||
margin-bottom: 20rpx;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
|
||||
|
||||
// 头部区域
|
||||
.card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 24rpx 24rpx 0 24rpx;
|
||||
// border-bottom: 1rpx solid #f5f5f5;
|
||||
|
||||
.header-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.tag-bar {
|
||||
width: 6rpx;
|
||||
height: 32rpx;
|
||||
background: #07c160;
|
||||
border-radius: 12rpx;
|
||||
margin-right: 12rpx;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 30rpx;
|
||||
color: #3EAB64;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.status-badge {
|
||||
padding: 8rpx 20rpx;
|
||||
background: rgba(7, 193, 96, 0.1);
|
||||
color: #07c160;
|
||||
font-size: 24rpx;
|
||||
border-radius: 24rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
// 产品信息区域
|
||||
.product-section {
|
||||
display: flex;
|
||||
padding: 24rpx 24rpx 0 24rpx;
|
||||
|
||||
.product-image {
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
border-radius: 12rpx;
|
||||
background: #f5f5f5;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.product-info {
|
||||
flex: 1;
|
||||
margin-left: 20rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
justify-content: space-between;
|
||||
|
||||
.product-name {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
line-height: 1.4;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.product-style {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.product-price {
|
||||
font-size: 36rpx;
|
||||
color: #07c160;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 分割线区域
|
||||
.divider-wrapper {
|
||||
padding: 0 24rpx;
|
||||
}
|
||||
|
||||
// 底部区域
|
||||
.card-footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0rpx 24rpx 24rpx;
|
||||
background: #fff;
|
||||
|
||||
.order-time {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.footer-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16rpx;
|
||||
|
||||
.pay-btn {
|
||||
padding: 12rpx 32rpx;
|
||||
background: linear-gradient(135deg, #07c160, #10d673);
|
||||
border-radius: 24rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
text {
|
||||
font-size: 24rpx;
|
||||
color: #fff;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
&:active {
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
|
||||
.delete-btn {
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 50%;
|
||||
|
||||
&:active {
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user