107 lines
2.3 KiB
Vue
107 lines
2.3 KiB
Vue
<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>
|