scout666/liveh5-nuxt
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(components): 重构弹窗组件和详情页展示逻辑

Browse Source 
- 修改实名认证详情页布局- 优化 item 详情展示方式
- 调整弹窗组件样式
- 重命名 ItemDetailSheet 为 DetailPopup
- 更新相关组件引用
This commit is contained in:
xingyy 2025-01-22 16:56:44 +08:00
parent a36a98c576
commit 3225d91ecb
6 changed files with 33 additions and 118 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
app/components/itemDetail/index.vue
View File

@ -1,5 +1,6 @@
<script setup>
import { showImagePreview } from 'vant';
import xImage from '@/components/x-image/index.vue'
const images = [
'https://e-cdn.fontree.cn/fonchain-main/prod/file/default/setting/637d95b4-2ae9-4a74-bd60-a3a9d2ca2ca0.png',
'https://e-cdn.fontree.cn/fonchain-main/prod/file/default/setting/f7b65e23-ce21-41b4-8e58-9e6dc6950727.png',
@ -15,7 +16,10 @@ const clickSwipe=(index)=>{
<template>
<div>
<van-swipe style="height: 188px" indicator-color="#B4B4B4" lazy-render >
<div class="flex justify-center">
<xImage class="h-188px" src="https://e-cdn.fontree.cn/fonchain-main/prod/file/default/setting/637d95b4-2ae9-4a74-bd60-a3a9d2ca2ca0.png"></xImage>
</div>
<!-- <van-swipe style="height: 188px" indicator-color="#B4B4B4" lazy-render >
<van-swipe-item v-for="(image,index) in images" :key="image" @click="clickSwipe(index)">
<van-image
fit="contain"
@ -24,7 +28,7 @@ const clickSwipe=(index)=>{
:src="image"
/>
</van-swipe-item>
</van-swipe>
</van-swipe>-->
<div class="px-[16px] bg-[#fff] pt-[11px] mb-6px">
<div class="text-[#000] text-[16px] mb-[12px]">日出而作，日落而息</div>
<div class="text-#575757 text-[14px] pb-8px">

8
app/components/x-popup/index.vue
View File

@ -25,13 +25,13 @@ const close=()=>{
>
<div class="flex flex-col h-full">
<!-- 标题栏 -->
<div class="flex items-center pl-16px pr-19px h-40px border-b-1px border-gray-300 shrink-0">
<div class="flex items-center pl-16px pr-19px h-40px border-b-1px border-gray-300 shrink-0 relative w-full">
<slot v-if="$slots.title" name="title">
</slot>
<div v-else class="text-black text-16px">{{ title }}</div>
<div v-else class="text-black text-16px text-center flex-grow-1">{{ title }}</div>
<van-icon
class="ml-auto"
style="position: absolute"
class="right-19px"
size="20"
name="cross"
color="#939393"

20
app/pages/home/components/DetailPopup/index.vue Normal file
View File

@ -0,0 +1,20 @@
<script setup>
import xPopup from '@/components/x-popup/index.vue'
import ItemDetail from "@/components/itemDetail/index.vue";
const props = defineProps({
show: {
type: Boolean,
default: false
}
})
const emit = defineEmits(['update:show'])
const handleClose = () => {
emit('update:show', false)
}
</script>
<template>
<xPopup :show="show" title="拍品详情" @update:show="handleClose">
<ItemDetail />
</xPopup>
</template>

96
app/pages/home/components/ItemDetailSheet/index.vue
View File

@ -1,96 +0,0 @@
<template>
<van-popup
v-model:show="props.show"
position="bottom"
:style="{ height: props.height }"
round
closeable
@closed="handleClose"
>
<div class="p-[16px] overflow-y-auto h-full">
<!-- 商品基本信息 -->
<div class="flex flex-col gap-[12px]">
<img
:src="props.detail?.artwork?.hdPic"
class="w-full rounded-[4px] object-cover"
:alt="props.detail?.name"
/>
<div class="text-[16px] font-medium text-[#000]">
{{ props.detail?.name }}
</div>
<!-- 价格信息 -->
<div class="flex flex-col gap-[8px]">
<div class="text-[14px] text-[#575757]">
起拍价：{{ formatPrice(props.detail?.startPrice) }}
</div>
<div v-if="props.detail?.soldPrice" class="text-[14px] text-[#b58047]">
成交价：{{ formatPrice(props.detail?.soldPrice) }}
</div>
</div>
<!-- 商品详情 -->
<div class="mt-[16px]">
<div class="text-[16px] font-medium mb-[12px]">商品详情</div>
<div class="flex flex-col gap-[8px]">
<div class="flex justify-between text-[14px]">
<span class="text-[#575757]">尺寸</span>
<span>{{ props.detail?.artwork?.size || '-' }}</span>
</div>
<div class="flex justify-between text-[14px]">
<span class="text-[#575757]">年代</span>
<span>{{ props.detail?.artwork?.year || '-' }}</span>
</div>
<div class="flex justify-between text-[14px]">
<span class="text-[#575757]">材质</span>
<span>{{ props.detail?.artwork?.material || '-' }}</span>
</div>
</div>
</div>
<!-- 作品描述 -->
<div v-if="props.detail?.artwork?.description" class="mt-[16px]">
<div class="text-[16px] font-medium mb-[12px]">作品描述</div>
<div class="text-[14px] text-[#575757] whitespace-pre-wrap">
{{ props.detail?.artwork?.description }}
</div>
</div>
</div>
</div>
</van-popup>
</template>
<script setup>
import { formatPrice } from '~/utils/format'
const props = defineProps({
show: {
type: Boolean,
default: false
},
height: {
type: String,
default: '90vh'
},
detail: {
type: Object,
default: () => ({})
}
})
const emit = defineEmits(['update:show'])
const handleClose = () => {
emit('update:show', false)
}
</script>
<style scoped>
:deep(.van-popup) {
max-height: 90vh;
}
:deep(.van-popup__close-icon) {
color: #000;
}
</style>

17
app/pages/home/components/ItemList/index.vue
View File

@ -3,7 +3,7 @@ import { ref, computed } from 'vue'
import { useRect } from "@vant/use"
import { goodStore } from "@/stores/goods"
import Column from "../Column/index.vue"
import ItemDetail from "@/components/itemDetail/index.vue"
import DetailPopup from '../DetailPopup/index.vue'
const {
itemList,
@ -90,20 +90,7 @@ const openShow = async (item) => {
</div>
</van-list>
</van-pull-refresh>
<van-action-sheet
teleport="#__nuxt"
:round="false"
v-model:show="localState.showDetail"
title="拍品详情"
>
<div
class="content bg-[#F0F0F0]"
:style="`height: calc(100vh - ${localState.showHeight + 85}px)`"
>
<ItemDetail />
</div>
</van-action-sheet>
<DetailPopup v-model:show="localState.showDetail"></DetailPopup>
</div>
</template>

2
app/pages/realAuth/components/detail.vue
View File

@ -14,7 +14,7 @@ const {userInfo}= authStore()
<template>
<div class="text-#1A1A1A text-16px">
<template v-if="type===0">
<div class="flex mb-20px" >
<div class="flex mb-20px">
<div class="mr-10px">姓名：</div>
<div>{{userInfo.realName}}</div>
</div>