feat: 订单详情功能完善
This commit is contained in:
duanshuwen
BIN
pages/order/components/GoodsInfo/images/food.png
Normal file
BIN
pages/order/components/GoodsInfo/images/food.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 782 B |
BIN
pages/order/components/GoodsInfo/images/ticket.png
Normal file
BIN
pages/order/components/GoodsInfo/images/ticket.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 689 B |
@@ -1,8 +1,8 @@
|
||||
<template>
|
||||
<view class="goods-info mb12">
|
||||
<view class="hotel-header">
|
||||
<image class="hotel-icon" src="./images/icon_house.png"></image>
|
||||
<text class="hotel-name">{{ orderData.commodityAddress }}</text>
|
||||
<image class="hotel-icon" :src="orderTypeIcon"></image>
|
||||
<text class="hotel-name">{{ orderData.storeName }}</text>
|
||||
</view>
|
||||
<view class="goods-detail">
|
||||
<image
|
||||
@@ -13,9 +13,21 @@
|
||||
></image>
|
||||
<view class="goods-description">
|
||||
<text class="goods-title">{{ commodityName }}</text>
|
||||
<text class="goods-date" v-if="checkInData"
|
||||
>预定时间：{{ checkInData }}</text
|
||||
>
|
||||
<!-- 门店地址 -->
|
||||
<view class="store-address" @click="openMap">
|
||||
<uni-icons type="location" size="18" color="#999" />
|
||||
<text>{{ orderData.commodityAddress }}</text>
|
||||
<uni-icons type="right" size="14" color="#999" />
|
||||
</view>
|
||||
<!-- 酒店类型 -->
|
||||
<template v-if="orderData.orderType === '0'">
|
||||
<view class="in-date" v-if="checkInData">
|
||||
入住时间：{{ checkInData }}
|
||||
</view>
|
||||
<view class="out-date" v-if="checkOutData">
|
||||
离店时间：{{ checkOutData }}
|
||||
</view>
|
||||
</template>
|
||||
</view>
|
||||
</view>
|
||||
<view class="included-services" v-if="hasServices">
|
||||
@@ -36,6 +48,9 @@
|
||||
|
||||
<script setup>
|
||||
import { defineProps, computed } from "vue";
|
||||
import iconHouse from "./images/icon_house.png";
|
||||
import iconFood from "./images/food.png";
|
||||
import iconTicket from "./images/ticket.png";
|
||||
|
||||
const props = defineProps({
|
||||
orderData: {
|
||||
@@ -45,7 +60,7 @@ const props = defineProps({
|
||||
id: "",
|
||||
commodityServiceList: [],
|
||||
orderStatus: "0", // 订单状态 0-待支付 1-待确认 2-待使用 3-已取消 4-退款中 5-已退款 6-已完成
|
||||
orderType: undefined, // 0-酒店订单, 1-门票订单, 2-餐饮
|
||||
orderType: "0", // 0-酒店订单, 1-门票订单, 2-餐饮
|
||||
}),
|
||||
},
|
||||
});
|
||||
@@ -63,6 +78,9 @@ const commodityCoverPhoto = computed(() => {
|
||||
// 计算属性：入住时间
|
||||
const checkInData = computed(() => props.orderData.checkInData || "");
|
||||
|
||||
// 计算属性：离店时间
|
||||
const checkOutData = computed(() => props.orderData.checkOutData || "");
|
||||
|
||||
// 计算属性：服务列表
|
||||
const serviceList = computed(() => props.orderData.commodityServiceList || []);
|
||||
|
||||
@@ -84,11 +102,50 @@ const shouldShowImage = computed(() => {
|
||||
return !!commodityCoverPhoto.value;
|
||||
});
|
||||
|
||||
// 计算属性：根据订单类型动态显示图标
|
||||
const orderTypeIcon = computed(() => {
|
||||
const orderType = props.orderData.orderType;
|
||||
|
||||
switch (orderType) {
|
||||
case "0":
|
||||
return iconHouse; // 酒店订单
|
||||
case "1":
|
||||
return iconTicket; // 门票订单
|
||||
case "2":
|
||||
return iconFood; // 餐饮订单
|
||||
default:
|
||||
return iconHouse; // 默认显示酒店图标
|
||||
}
|
||||
});
|
||||
|
||||
// 格式化服务数量
|
||||
const formatServiceAmount = (amount) => {
|
||||
if (!amount) return "";
|
||||
return typeof amount === "number" ? `×${amount}` : amount;
|
||||
};
|
||||
|
||||
// 打开地图
|
||||
const openMap = () => {
|
||||
const address = props.orderData.commodityAddress;
|
||||
const latitude = Number(props.orderData.commodityLatitude);
|
||||
const longitude = Number(props.orderData.commodityLongitude);
|
||||
|
||||
uni.getLocation({
|
||||
type: "gcj02", //返回可以用于uni.openLocation的经纬度
|
||||
success: (res) => {
|
||||
console.log("当前经纬度", latitude, longitude);
|
||||
|
||||
uni.openLocation({
|
||||
latitude: latitude,
|
||||
longitude: longitude,
|
||||
address: address,
|
||||
success: () => {
|
||||
console.log("success");
|
||||
},
|
||||
});
|
||||
},
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
@@ -1,77 +1,154 @@
|
||||
.goods-info {
|
||||
background-color: #fff;
|
||||
border-radius: 10px;
|
||||
padding: 12px 16px 20px;
|
||||
}
|
||||
// ===== SASS变量定义 =====
|
||||
// 颜色系统
|
||||
$color-white: #fff;
|
||||
$color-primary: #333;
|
||||
$color-secondary: #666;
|
||||
$color-placeholder: pink;
|
||||
|
||||
.hotel-header {
|
||||
// 字体大小
|
||||
$font-size-xs: 12px;
|
||||
$font-size-sm: 14px;
|
||||
$font-size-base: 16px;
|
||||
|
||||
// 字体粗细
|
||||
$font-weight-normal: 400;
|
||||
$font-weight-medium: 500;
|
||||
$font-weight-bold: 600;
|
||||
|
||||
// 间距系统
|
||||
$spacing-xs: 8px;
|
||||
$spacing-sm: 10px;
|
||||
$spacing-md: 12px;
|
||||
$spacing-lg: 15px;
|
||||
$spacing-xl: 16px;
|
||||
$spacing-xxl: 20px;
|
||||
|
||||
// 圆角
|
||||
$border-radius-sm: 8px;
|
||||
$border-radius-md: 10px;
|
||||
|
||||
// 尺寸
|
||||
$icon-size-sm: 24px;
|
||||
$image-size-md: 65px;
|
||||
|
||||
// ===== SASS混合器 =====
|
||||
@mixin flex-center {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.hotel-icon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.hotel-name {
|
||||
color: #333;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.goods-detail {
|
||||
display: flex;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.goods-image {
|
||||
background-color: pink;
|
||||
width: 65px;
|
||||
height: 65px;
|
||||
border-radius: 8px;
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
.goods-description {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.goods-title {
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.goods-date {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.included-services {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.services-title {
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.service-item {
|
||||
@mixin flex-between {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.service-name {
|
||||
font-size: 14px;
|
||||
@mixin text-style($size, $color: $color-primary, $weight: $font-weight-normal) {
|
||||
font-size: $size;
|
||||
color: $color;
|
||||
font-weight: $weight;
|
||||
}
|
||||
|
||||
.service-quantity {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
@mixin card-container {
|
||||
background-color: $color-white;
|
||||
border-radius: $border-radius-md;
|
||||
padding: $spacing-md $spacing-xl $spacing-xxl;
|
||||
}
|
||||
|
||||
// ===== 主要样式 =====
|
||||
.goods-info {
|
||||
@include card-container;
|
||||
|
||||
// 酒店头部信息
|
||||
.hotel-header {
|
||||
@include flex-center;
|
||||
margin-bottom: $spacing-sm;
|
||||
|
||||
.hotel-icon {
|
||||
width: $icon-size-sm;
|
||||
height: $icon-size-sm;
|
||||
margin-right: $spacing-xs;
|
||||
}
|
||||
|
||||
.hotel-name {
|
||||
@include text-style($font-size-xs, $color-primary, $font-weight-medium);
|
||||
}
|
||||
}
|
||||
|
||||
// 商品详情区域
|
||||
.goods-detail {
|
||||
display: flex;
|
||||
margin-bottom: $spacing-xxl;
|
||||
|
||||
.goods-image {
|
||||
background-color: $color-placeholder;
|
||||
width: $image-size-md;
|
||||
height: $image-size-md;
|
||||
border-radius: $border-radius-sm;
|
||||
margin-right: $spacing-lg;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.goods-description {
|
||||
flex: 1;
|
||||
min-width: 0; // 防止flex子项溢出
|
||||
|
||||
.goods-title {
|
||||
display: block;
|
||||
@include text-style($font-size-sm, $color-primary, $font-weight-medium);
|
||||
margin-bottom: $spacing-xs;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.store-address {
|
||||
@include flex-center;
|
||||
@include text-style($font-size-xs, $color-primary);
|
||||
|
||||
text {
|
||||
flex: 1;
|
||||
padding: 0 6px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.in-date,
|
||||
.out-date {
|
||||
@include text-style($font-size-xs, $color-secondary);
|
||||
margin-top: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 包含服务区域
|
||||
.included-services {
|
||||
margin-top: $spacing-sm;
|
||||
|
||||
.services-title {
|
||||
display: block;
|
||||
@include text-style($font-size-xs, $color-primary, $font-weight-medium);
|
||||
margin-bottom: $spacing-md;
|
||||
}
|
||||
|
||||
.service-item {
|
||||
@include flex-between;
|
||||
align-items: center;
|
||||
margin-bottom: $spacing-sm;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.service-name {
|
||||
@include text-style($font-size-sm, $color-primary);
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.service-quantity {
|
||||
@include text-style($font-size-xs, $color-secondary);
|
||||
flex-shrink: 0;
|
||||
margin-left: $spacing-xs;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user