-
{{ checkOutDate }}
-
{{ checkOutDay }}
+
+
退房日期
+
+
+ {{ checkOutDate }}
+ {{ checkOutDay }}
diff --git a/src/pages/goods/components/DateSelector/styles/index.scss b/src/pages/goods/components/DateSelector/styles/index.scss
deleted file mode 100644
index 7651dda..0000000
--- a/src/pages/goods/components/DateSelector/styles/index.scss
+++ /dev/null
@@ -1,64 +0,0 @@
-.date-selector {
- display: flex;
- align-items: flex-end;
- justify-content: space-between;
- margin: 12px 0;
- padding: 0 12px;
-}
-
-.date-item {
- flex: 1;
- position: relative;
-}
-
-.date-label {
- position: absolute;
- top: -12rpx;
- left: 24rpx;
- font-size: 20rpx;
- color: #333-grey;
- background-color: #fff;
- padding: 0 8rpx;
- z-index: 1;
-}
-
-.date-box {
- padding: 20rpx 24rpx;
- background-color: #fff;
- border-radius: 16rpx;
- border: 2rpx solid #f0f0f0;
- display: flex;
- align-items: center;
- justify-content: start;
-}
-
-.date-content {
- display: flex;
- align-items: baseline;
- gap: 8rpx;
-}
-
-.date-text {
- font-size: 32rpx;
- font-weight: 500;
- color: #333;
-}
-
-.day-text {
- font-size: 20rpx;
- color: #666666;
-}
-
-.nights-info {
- display: flex;
- align-items: center;
- justify-content: center;
- min-width: 80rpx;
- margin: 0 16rpx;
- margin-bottom: 20rpx;
-}
-
-.nights-text {
- font-size: 24rpx;
- color: #666666;
-}
diff --git a/src/pages/goods/components/GoodFacility/index.vue b/src/pages/goods/components/GoodFacility/index.vue
index 3ea039e..f2bb88e 100644
--- a/src/pages/goods/components/GoodFacility/index.vue
+++ b/src/pages/goods/components/GoodFacility/index.vue
@@ -1,19 +1,19 @@
-
-
-
+
+
-
-
- {{ zniconsMap[moduleItem.icon] }}
-
-
+
+
+
+
+
{{ moduleItem.title }}
-
-
+
{{ span }}
@@ -35,10 +35,3 @@ const props = defineProps({
},
});
-
-
diff --git a/src/pages/goods/components/GoodInfo/README.md b/src/pages/goods/components/GoodInfo/README.md
deleted file mode 100644
index 02af5c1..0000000
--- a/src/pages/goods/components/GoodInfo/README.md
+++ /dev/null
@@ -1,255 +0,0 @@
-# GoodInfo 商品信息组件
-
-## 概述
-
-`GoodInfo` 是一个高性能的商品信息展示组件，专为电商、旅游、服务类应用设计。组件采用现代化的UI设计，支持响应式布局和暗色模式，提供优秀的用户体验。
-
-## 功能特性
-
-### 🎯 核心功能
-
-- **价格展示**: 突出显示商品价格，支持货币符号和价格标签
-- **商品标题**: 清晰展示商品名称和相关标签
-- **地址信息**: 显示商品/服务地址，支持图标和交互
-- **设施展示**: 网格布局展示商品特色设施或服务项目
-
-### ⚡ 性能优化
-
-- **计算属性缓存**: 使用 `computed` 优化设施列表渲染
-- **按需渲染**: 条件渲染减少不必要的DOM节点
-- **轻量级设计**: 最小化组件体积和依赖
-- **懒加载支持**: 支持图标和内容的懒加载
-
-### 🎨 UI特性
-
-- **现代化设计**: 圆角卡片、阴影效果、渐变背景
-- **响应式布局**: 适配不同屏幕尺寸
-- **暗色模式**: 自动适配系统主题
-- **交互反馈**: 悬停效果和过渡动画
-
-## 基础用法
-
-### 简单使用
-
-```vue
-
-
-
-
-
-```
-
-### 完整配置
-
-```vue
-
-
-
-
-
-```
-
-## API 文档
-
-### Props
-
-| 参数 | 类型 | 默认值 | 说明 |
-| --------- | ------ | ------ | ------------ |
-| goodsInfo | Object | `{}` | 商品信息对象 |
-
-### goodsInfo 对象结构
-
-| 字段 | 类型 | 必填 | 默认值 | 说明 |
-| ---------- | ------------- | ---- | --------------------------------------------- | ------------------------------ |
-| price | Number/String | 否 | `399` | 商品价格 |
-| title | String | 否 | `'【成人票】云从朵花温泉门票'` | 商品标题 |
-| tag | String | 否 | - | 价格标签（如：热销、限时优惠） |
-| timeTag | String | 否 | `'随时可退'` | 时间相关标签 |
-| address | String | 否 | `'距您43.1公里 黔南州布依族苗族自治州龙里县'` | 地址信息 |
-| facilities | Array | 否 | 默认设施列表 | 设施/特色列表 |
-
-### facilities 数组结构
-
-```javascript
-[
- {
- icon: "home", // uni-icons 图标名称
- name: "48个泡池", // 设施名称
- },
-];
-```
-
-## 样式定制
-
-### CSS 变量
-
-组件支持通过 CSS 变量进行主题定制：
-
-```scss
-.good-info {
- --primary-color: #ff6b35; // 主色调
- --background-color: #fff; // 背景色
- --text-color: #333; // 文字颜色
- --border-radius: 16rpx; // 圆角大小
- --shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08); // 阴影
-}
-```
-
-### 响应式断点
-
-- **小屏设备**: `max-width: 750rpx`
-- **暗色模式**: `prefers-color-scheme: dark`
-
-## 性能优化建议
-
-### 1. 数据结构优化
-
-```javascript
-// ✅ 推荐：使用 reactive 包装数据
-const goodsData = reactive({
- price: 399,
- title: "商品标题",
-});
-
-// ❌ 避免：频繁的深层对象更新
-const goodsData = ref({
- nested: {
- deep: {
- value: "data",
- },
- },
-});
-```
-
-### 2. 设施列表优化
-
-```javascript
-// ✅ 推荐：预定义设施列表
-const FACILITY_PRESETS = {
- spa: [
- { icon: "home", name: "48个泡池" },
- { icon: "water", name: "恒温泳池" },
- ],
- hotel: [
- { icon: "bed", name: "豪华客房" },
- { icon: "car", name: "免费停车" },
- ],
-};
-
-// 使用预设
-const goodsData = {
- facilities: FACILITY_PRESETS.spa,
-};
-```
-
-### 3. 图标优化
-
-```javascript
-// ✅ 推荐：使用常见图标
-const commonIcons = ["home", "person", "heart", "star"];
-
-// ❌ 避免：使用过多不同图标增加包体积
-```
-
-## 最佳实践
-
-### 1. 数据验证
-
-```javascript
-// 添加数据验证
-const validateGoodsInfo = (data) => {
- return {
- price: Number(data.price) || 0,
- title: String(data.title || ""),
- facilities: Array.isArray(data.facilities) ? data.facilities : [],
- };
-};
-```
-
-### 2. 错误处理
-
-```vue
-
-
-
-
-
-```
-
-### 3. 无障碍访问
-
-```vue
-
-
-
-
-
-```
-
-## 注意事项
-
-1. **图标依赖**: 组件依赖 `uni-icons`，请确保项目中已安装
-2. **单位适配**: 样式使用 `rpx` 单位，适配小程序和H5
-3. **性能考虑**: 设施列表较多时建议分页或虚拟滚动
-4. **主题适配**: 支持暗色模式，但需要系统支持
-
-## 更新日志
-
-### v1.0.0 (2024-01-XX)
-
-- ✨ 初始版本发布
-- 🎨 现代化UI设计
-- ⚡ 性能优化
-- 📱 响应式布局
-- 🌙 暗色模式支持
-
-## 技术栈
-
-- **框架**: Vue 3 Composition API
-- **样式**: SCSS
-- **图标**: uni-icons
-- **构建**: Vite/Webpack
-
-## 浏览器支持
-
-- ✅ Chrome 80+
-- ✅ Firefox 75+
-- ✅ Safari 13+
-- ✅ Edge 80+
-- ✅ 微信小程序
-- ✅ 支付宝小程序
-- ✅ H5
diff --git a/src/pages/goods/components/GoodInfo/images/商品详情.png b/src/pages/goods/components/GoodInfo/images/商品详情.png
deleted file mode 100644
index aa76422..0000000
Binary files a/src/pages/goods/components/GoodInfo/images/商品详情.png and /dev/null differ
diff --git a/src/pages/goods/components/GoodInfo/index.vue b/src/pages/goods/components/GoodInfo/index.vue
index 969f0e9..910158d 100644
--- a/src/pages/goods/components/GoodInfo/index.vue
+++ b/src/pages/goods/components/GoodInfo/index.vue
@@ -1,24 +1,27 @@
-
+
-
-
- {{ goodsData.commodityName || "【成人票】云从朵花温泉门票" }}
+
+
+ {{ goodsData.commodityName }}
-
-
{{ goodsData.timeTag || "随时可退" }}
+
+
+ {{ goodsData.timeTag }}
+
-
-
-
-
{{ facility }}
+
@@ -48,7 +51,3 @@ const facilitiesList = computed(() => {
return [];
});
-
-
diff --git a/src/pages/goods/components/GoodInfo/styles/index.scss b/src/pages/goods/components/GoodInfo/styles/index.scss
index c1719f5..0bc8e0a 100644
--- a/src/pages/goods/components/GoodInfo/styles/index.scss
+++ b/src/pages/goods/components/GoodInfo/styles/index.scss
@@ -1,40 +1,5 @@
.good-info {
- background: #fff;
-
// 标题区域
- .title-section {
- display: flex;
- align-items: center;
- margin-bottom: 12px;
-
- .title {
- font-size: 16px;
- color: #333;
- font-weight: 600;
- line-height: 1.4;
- flex: 0 280px;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- }
-
- .tag-wrapper {
- display: flex;
- align-items: center;
-
- .time-tag {
- color: #f55726;
- padding: 3px 6px;
- border-radius: 6px;
- font-size: 9px;
- border: 1px solid #f55726;
- }
- }
-
- .calender-icon {
- margin-left: auto;
- }
- }
// 设施信息区域
.facilities-section {
diff --git a/src/pages/goods/components/GoodPackage/index.vue b/src/pages/goods/components/GoodPackage/index.vue
index e2486f3..185d450 100644
--- a/src/pages/goods/components/GoodPackage/index.vue
+++ b/src/pages/goods/components/GoodPackage/index.vue
@@ -1,17 +1,17 @@
-
+
-
-
-
{{ item.name }}
-
-
{{ item.count }}{{ item.unit }}
+
+
+
+ {{ item.name }}
+
+
+
+
+ {{ item.count }}{{ item.unit }}
+
@@ -33,7 +33,3 @@ const props = defineProps({
},
});
-
-
diff --git a/src/pages/goods/components/GoodPackage/styles/index.scss b/src/pages/goods/components/GoodPackage/styles/index.scss
deleted file mode 100644
index dbc2721..0000000
--- a/src/pages/goods/components/GoodPackage/styles/index.scss
+++ /dev/null
@@ -1,20 +0,0 @@
-.title-row {
- display: flex;
- align-items: center;
- justify-content: flex-start;
-}
-
-.title-row .left,
-.title-row .right {
- white-space: nowrap;
- flex: 0 0 auto;
-}
-
-.title-row .sep {
- flex: 1 1 auto;
- height: 1px;
- margin: 0 8px;
- background-image: repeating-linear-gradient(to right, #CACFD8 0 10px, transparent 10px 16px);
- background-repeat: repeat-x;
- background-position: center;
-}
\ No newline at end of file
diff --git a/src/pages/goods/components/LocationCard/index.vue b/src/pages/goods/components/LocationCard/index.vue
new file mode 100644
index 0000000..b22813b
--- /dev/null
+++ b/src/pages/goods/components/LocationCard/index.vue
@@ -0,0 +1,53 @@
+
+
+
+ 位于 {{ orderData.oneLevelAddress }}
+ {{ orderData.commodityAddress }}
+
+
+
+
+
+
diff --git a/src/pages/goods/images/商品详情.png b/src/pages/goods/images/商品详情.png
deleted file mode 100644
index 761cb68..0000000
Binary files a/src/pages/goods/images/商品详情.png and /dev/null differ
diff --git a/src/pages/goods/index.vue b/src/pages/goods/index.vue
index d44a363..f2effba 100644
--- a/src/pages/goods/index.vue
+++ b/src/pages/goods/index.vue
@@ -1,11 +1,11 @@
-