Compare commits
No commits in common. "07752394eb71c2f5745d54509965dcacac11fd9e" and "24206e8d79b752d5cf6c4ddb25f7aad49a8b4ed1" have entirely different histories.
07752394eb
...
24206e8d79
@ -1,106 +0,0 @@
|
|||||||
<template>
|
|
||||||
<view>
|
|
||||||
<view v-if="goodsData.commodityPurchaseInstruction" class="use-notice">
|
|
||||||
<ModuleTitle
|
|
||||||
v-if="showTitle"
|
|
||||||
:title="goodsData.commodityPurchaseInstruction.templateTitle"
|
|
||||||
/>
|
|
||||||
<view
|
|
||||||
class="use-notice-content"
|
|
||||||
v-for="(moduleItem, index) in goodsData.commodityPurchaseInstruction
|
|
||||||
.commodityPurchaseInstructionModuleEntityList"
|
|
||||||
:key="index"
|
|
||||||
>
|
|
||||||
<view
|
|
||||||
class="module-item"
|
|
||||||
:class="{
|
|
||||||
'border-bottom':
|
|
||||||
index <
|
|
||||||
goodsData.commodityPurchaseInstruction
|
|
||||||
.commodityPurchaseInstructionModuleEntityList.length -
|
|
||||||
1,
|
|
||||||
}"
|
|
||||||
>
|
|
||||||
<view class="module-icon">
|
|
||||||
<uni-icons fontFamily="znicons" size="20" color="#333">{{
|
|
||||||
zniconsMap[moduleItem.moduleIcon]
|
|
||||||
}}</uni-icons>
|
|
||||||
<text class="module-title">{{ moduleItem.moduleTitle }}</text>
|
|
||||||
</view>
|
|
||||||
<text class="module-desc">{{ moduleItem.moduleContent }}</text>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<zero-markdown-view
|
|
||||||
v-else
|
|
||||||
:markdown="goodsData.commodityTip"
|
|
||||||
:aiMode="true"
|
|
||||||
/>
|
|
||||||
</view>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import ModuleTitle from "@/components/ModuleTitle/index.vue";
|
|
||||||
import { zniconsMap } from "@/static/fonts/znicons.js";
|
|
||||||
import { defineProps } from "vue";
|
|
||||||
|
|
||||||
// Props定义
|
|
||||||
const props = defineProps({
|
|
||||||
goodsData: {
|
|
||||||
type: Object,
|
|
||||||
default: () => ({}),
|
|
||||||
},
|
|
||||||
showTitle: {
|
|
||||||
type: Boolean,
|
|
||||||
default: true,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped lang="scss">
|
|
||||||
@font-face {
|
|
||||||
font-family: znicons;
|
|
||||||
src: url("@/static/fonts/znicons.ttf");
|
|
||||||
}
|
|
||||||
|
|
||||||
// 使用须知样式
|
|
||||||
.use-notice {
|
|
||||||
margin: 16px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.use-notice-content {
|
|
||||||
.module-item {
|
|
||||||
display: flex;
|
|
||||||
align-items: flex-start;
|
|
||||||
flex-direction: column;
|
|
||||||
padding: 12px 0;
|
|
||||||
|
|
||||||
.module-icon {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
align-items: center;
|
|
||||||
margin-right: 8px;
|
|
||||||
flex-shrink: 0;
|
|
||||||
|
|
||||||
.module-title {
|
|
||||||
font-size: 14px;
|
|
||||||
color: #333;
|
|
||||||
text-align: center;
|
|
||||||
word-wrap: break-word;
|
|
||||||
margin-left: 4px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.module-desc {
|
|
||||||
flex: 1;
|
|
||||||
font-size: 12px;
|
|
||||||
color: #666;
|
|
||||||
line-height: 1.5;
|
|
||||||
margin-top: 4px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.border-bottom {
|
|
||||||
border-bottom: 1px solid #f0f0f0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -3,15 +3,29 @@
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
margin: 6px 0;
|
margin: 6px 0;
|
||||||
padding: 16px 12px;
|
padding: 16px 12px;
|
||||||
|
background-color: #f8f9fa;
|
||||||
background-image: url("./images/loc_bg_img.png"); // 预留背景图片位置,用户手动导入
|
background-image: url("./images/loc_bg_img.png"); // 预留背景图片位置,用户手动导入
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
background-position: center;
|
background-position: center;
|
||||||
border-radius: 20px;
|
border-radius: 12px;
|
||||||
|
// box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
color: #333;
|
color: #333;
|
||||||
position: relative;
|
position: relative;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
|
||||||
|
// 添加半透明遮罩层确保文字可读性
|
||||||
|
&::before {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
background: rgba(255, 255, 255, 0.8);
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
// 左侧文本容器
|
// 左侧文本容器
|
||||||
.text-container {
|
.text-container {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|||||||
@ -29,8 +29,42 @@
|
|||||||
:nights="selectedDate.totalDays"
|
:nights="selectedDate.totalDays"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<!-- 商品详情组件 -->
|
<view v-if="goodsData.commodityPurchaseInstruction" class="use-notice">
|
||||||
<GoodDetail :goodsData="goodsData" />
|
<ModuleTitle
|
||||||
|
:title="goodsData.commodityPurchaseInstruction.templateTitle"
|
||||||
|
/>
|
||||||
|
<view
|
||||||
|
class="use-notice-content"
|
||||||
|
v-for="(moduleItem, index) in goodsData.commodityPurchaseInstruction
|
||||||
|
.commodityPurchaseInstructionModuleEntityList"
|
||||||
|
:key="index"
|
||||||
|
>
|
||||||
|
<view
|
||||||
|
class="module-item"
|
||||||
|
:class="{
|
||||||
|
'border-bottom':
|
||||||
|
index <
|
||||||
|
goodsData.commodityPurchaseInstruction
|
||||||
|
.commodityPurchaseInstructionModuleEntityList.length -
|
||||||
|
1,
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
<view class="module-icon">
|
||||||
|
<uni-icons fontFamily="znicons" size="20" color="#333">{{
|
||||||
|
zniconsMap[moduleItem.moduleIcon]
|
||||||
|
}}</uni-icons>
|
||||||
|
<text class="module-title">{{ moduleItem.moduleTitle }}</text>
|
||||||
|
</view>
|
||||||
|
<text class="module-desc">{{ moduleItem.moduleContent }}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<zero-markdown-view
|
||||||
|
v-else
|
||||||
|
:markdown="goodsData.commodityTip"
|
||||||
|
:aiMode="true"
|
||||||
|
/>
|
||||||
</view>
|
</view>
|
||||||
</scroll-view>
|
</scroll-view>
|
||||||
|
|
||||||
@ -73,11 +107,12 @@ import {
|
|||||||
import TopNavBar from "@/components/TopNavBar/index.vue";
|
import TopNavBar from "@/components/TopNavBar/index.vue";
|
||||||
import ImageSwiper from "@/components/ImageSwiper/index.vue";
|
import ImageSwiper from "@/components/ImageSwiper/index.vue";
|
||||||
import GoodInfo from "./components/GoodInfo/index.vue";
|
import GoodInfo from "./components/GoodInfo/index.vue";
|
||||||
|
import ModuleTitle from "@/components/ModuleTitle/index.vue";
|
||||||
import GoodConfirm from "./components/GoodConfirm/index.vue";
|
import GoodConfirm from "./components/GoodConfirm/index.vue";
|
||||||
import Calender from "@/components/Calender/index.vue";
|
import Calender from "@/components/Calender/index.vue";
|
||||||
|
import { zniconsMap } from "@/static/fonts/znicons.js";
|
||||||
import LocationCard from "@/components/LocationCard/index.vue";
|
import LocationCard from "@/components/LocationCard/index.vue";
|
||||||
import DateSelector from "./components/DateSelector/index.vue";
|
import DateSelector from "./components/DateSelector/index.vue";
|
||||||
import GoodDetail from "@/components/GoodDetail/index.vue";
|
|
||||||
|
|
||||||
const calendarVisible = ref(false);
|
const calendarVisible = ref(false);
|
||||||
const goodsData = ref({});
|
const goodsData = ref({});
|
||||||
@ -279,4 +314,8 @@ const handleDateSelect = (data) => {
|
|||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
@import "./styles/index.scss";
|
@import "./styles/index.scss";
|
||||||
|
@font-face {
|
||||||
|
font-family: znicons;
|
||||||
|
src: url("@/static/fonts/znicons.ttf");
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -1,13 +1,17 @@
|
|||||||
<template>
|
<template>
|
||||||
<view class="notice-info mb12">
|
<view class="notice-info mb12">
|
||||||
<view class="notice-title"> 购买须知 </view>
|
<view class="notice-title"> 购买须知 </view>
|
||||||
<GoodDetail :goodsData="orderData" :showTitle="false" />
|
|
||||||
|
<zero-markdown-view
|
||||||
|
:markdown="orderData.commodityTip"
|
||||||
|
:fontSize="14"
|
||||||
|
:aiMode="true"
|
||||||
|
/>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { defineProps } from "vue";
|
import { defineProps } from "vue";
|
||||||
import GoodDetail from "@/components/GoodDetail/index.vue";
|
|
||||||
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
orderData: {
|
orderData: {
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user