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>
|
||||
|
||||
+26
-11
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<view class="map-container" :class="{ 'full-width': props.fullWidth }" :style="{ '--map-height': props.customHeight || '72vh' }">
|
||||
<view class="map-container" :class="{ 'full-width': props.fullWidth }">
|
||||
<!-- 地图容器 -->
|
||||
<view class="map-wrapper">
|
||||
<!-- 使用小程序原生地图组件 -->
|
||||
@@ -26,16 +26,18 @@
|
||||
</cover-view>
|
||||
|
||||
<cover-view class="map-side-controls" v-if="!props.hideControls && !props.hideMapOverlays">
|
||||
<cover-view class="side-btn guide" @tap="handleGuide">
|
||||
<cover-image class="side-icon" src="/static/use_help.png" style="border-radius: 50%;"></cover-image>
|
||||
</cover-view>
|
||||
<cover-view class="side-btn locate" @tap="handleRelocate">
|
||||
<cover-image class="side-icon" src="/static/location.png"></cover-image>
|
||||
</cover-view>
|
||||
<cover-view class="side-btn service" @tap="handleService">
|
||||
<cover-image class="side-icon" src="/static/customer-service.png"></cover-image>
|
||||
</cover-view>
|
||||
<cover-view class="side-btn search" @tap="handleSearch">
|
||||
<cover-image class="side-icon" src="/static/other_device.png"></cover-image>
|
||||
</cover-view>
|
||||
|
||||
<cover-view class="side-btn service" @tap="handleService">
|
||||
<cover-image class="side-icon" src="/static/customer-service.png"></cover-image>
|
||||
</cover-view>
|
||||
</cover-view>
|
||||
</map>
|
||||
|
||||
@@ -128,7 +130,8 @@
|
||||
'showList',
|
||||
'markerTap',
|
||||
'mapCenterChange',
|
||||
'bannerClick'
|
||||
'bannerClick',
|
||||
'guide'
|
||||
])
|
||||
|
||||
// 响应式数据
|
||||
@@ -380,6 +383,10 @@ const handleSearch = () => {
|
||||
})
|
||||
}
|
||||
|
||||
const handleGuide = () => {
|
||||
emit('guide')
|
||||
}
|
||||
|
||||
const handleJoinTap = () => {
|
||||
uni.navigateTo({
|
||||
url: '/pages/join/index'
|
||||
@@ -494,13 +501,21 @@ const handleSearch = () => {
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 94vw;
|
||||
height: var(--map-height, calc(100% - 20rpx)); /* 使用变量或默认高度 */
|
||||
// height: var(--map-height, calc(100% - 20rpx)); /* 使用变量或默认高度 */
|
||||
margin: 20rpx;
|
||||
margin-bottom: 0; /* 底部不需要边距 */
|
||||
border-radius: 20rpx;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
// #ifdef H5
|
||||
height:78vh;
|
||||
// #endif
|
||||
|
||||
// #ifdef MP-WEIXIN
|
||||
height: 72vh;
|
||||
// #endif
|
||||
|
||||
&.full-width {
|
||||
width: 100%;
|
||||
@@ -596,13 +611,13 @@ const handleSearch = () => {
|
||||
margin: auto;
|
||||
// height: 72rpx;
|
||||
background: rgba(255, 255, 255, 0.96);
|
||||
border-radius: 36rpx;
|
||||
border-radius: 24rpx;
|
||||
display: inline-flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
// box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.12);
|
||||
padding: 20rpx;
|
||||
padding: 13rpx;
|
||||
border: 2rpx solid #e0e0e0;
|
||||
|
||||
&:active {
|
||||
@@ -634,8 +649,8 @@ const handleSearch = () => {
|
||||
}
|
||||
|
||||
.side-icon {
|
||||
width: 44rpx;
|
||||
height: 44rpx;
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
}
|
||||
|
||||
.index-swiper {
|
||||
|
||||
+5021
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user