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

refactor(components): 优化多个组件的结构和功能

Browse Source 
- 为 x-button 和 x-popup 组件添加注释说明
- 在 x-image 组件中添加 lazy 加载属性
- 优化 profile 页面的我的拍品列表展示
- 更新 tang
This commit is contained in:
xingyy 2025-01-22 16:23:48 +08:00
parent 331b4a73b2
commit d3cb4d55b4
6 changed files with 44 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
app/components/x-button/index.vue
View File

@ -1,4 +1,7 @@
<script setup>
/*
* 此组件的目的是使用该组件包裹的内容具有按压状态效果
* */
import {ref, defineEmits} from "vue";
const emit = defineEmits(["click"]);

1
app/components/x-image/index.vue
View File

@ -21,6 +21,7 @@ const showImage = () => {
</script>
<template>
<img
loading="lazy"
v-bind="{ ...props, ...$attrs }"
@click="showImage"
>

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

@ -1,5 +1,7 @@
<script setup>
/*
* 封装一个带标题栏的弹窗
* */
const props = defineProps({
show: {
type: Boolean,
@ -24,9 +26,10 @@ 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">
<slot name="title">
<div class="text-black text-16px">{{ title }}</div>
<slot v-if="$slots.title" name="title">
</slot>
<div v-else class="text-black text-16px">{{ title }}</div>
<van-icon
class="ml-auto"
size="20"

1
app/pages/home/components/Column/index.vue
View File

@ -1,5 +1,6 @@
<script setup>
const props = defineProps({
items: Array,
colIndex: {

15
app/pages/liveRoom/components/SideButton/tangPopup.vue
View File

@ -1,7 +1,7 @@
<script setup>
import xPopup from '@/components/x-popup/index.vue'
import {goodStore} from "~/stores/goods/index.js";
import { showImagePreview } from 'vant';
import xImage from '@/components/x-image/index.vue'
const {pageRef,itemList} = goodStore();
const props = defineProps({
show: Boolean,
@ -13,9 +13,7 @@ const props = defineProps({
const emit = defineEmits(['update:show'])
const close = () => emit('update:show', false);
const openImage = (url) => {
showImagePreview([url]);
}
</script>
<template>
@ -32,14 +30,13 @@ const openImage = (url) => {
>
<div
class="mr-10px flex-shrink-0 rounded-4px overflow-hidden cursor-pointer"
@click="openImage(item.artwork.hdPic)"
>
<img
<xImage
class="w-80px h-80px"
:src="item.artwork.hdPic"
:alt="item.artworkTitle"
:src="item.artwork?.hdPic"
:alt="item?.artworkTitle"
loading="lazy"
>
/>
</div>
<div>
<div class="ellipsis line-height-20px text-16px font-600 min-h-40px">

69
app/pages/profile/index.vue
View File

@ -1,18 +1,36 @@
<script setup>
import {userArtworks} from "~/api/goods/index.js";
import {authStore} from "~/stores/auth/index.js";
import xImage from '@/components/x-image/index.vue'
definePageMeta({
layout: 'default',
title: '我的',
i18n: 'menu.profile',
})
const myList=ref([])
const showMyList=ref([])
const {userInfo}= authStore()
const groupAndSortByDate=(data)=> {
if (!Array.isArray(data)) {
return
}
return Object.values(data.reduce((acc, curr) => {
if (!acc[curr.userCreatedAt]) {
acc[curr.userCreatedAt] = {
userCreatedAt: curr.userCreatedAt,
list: []
};
}
acc[curr.userCreatedAt].list.push(curr);
return acc;
}, {}))
.sort((a, b) => new Date(b.userCreatedAt) - new Date(a.userCreatedAt));
}
const initData=async ()=>{
const res=await userArtworks({})
if (res.status===0){
myList.value=res.data.data
showMyList.value=groupAndSortByDate(myList.value)
}
}
initData()
@ -29,55 +47,22 @@ initData()
<div class="text-#575757 text-14px">{{userInfo.telNum}}</div>
</div>
</div>
<div class="flex-grow-1">
<div class="flex-grow-1 ">
<div class="border-b-1px border-b-#D3D3D3 px-16px flex">
<div class="text-#000 text-16px border-b-3 border-b-#2B53AC h-36px">我的拍品</div>
</div>
<van-pull-refresh>
<van-pull-refresh @refresh="initData">
<van-list
finished-text="没有更多了"
>
<div class="px-16px pt-14px">
<div class="text-#575757 text-14px mb-3px">2025.01.12</div>
<div class="flex mb-22px">
<div class="flex-shrink-0 mr-10px">
<img class="w-80px h-80px" src="@/static/images/ddfdcaer.png" alt="">
<div class="px-16px pt-14px" v-for="(item,index) of showMyList">
<div class="text-#575757 text-14px mb-3px">{{item.userCreatedAt}}</div>
<div class="flex mb-22px" v-for="(item1,index1) of item.list">
<div class="flex-shrink-0 mr-10px rounded-4px overflow-hidden">
<x-image class="w-80px h-80px" :src="item1?.auctionArtworkInfo?.artwork?.hdPic" alt=""/>
</div>
<div class="flex flex-col justify-between">
<div class="text-#000 text-16px ellipsis line-height-21px">张天赐 | 日出而作，日落而息撒打算撒打算撒打决赛多久啊是世奥兰…</div>
<div class="text-#575757 text-14px line-height-none ">起拍价：RMB 1,000</div>
<div class="text-#B58047 text-14px line-height-none">成交价：RMB 10,000</div>
</div>
</div>
<div class="flex">
<div class="flex-shrink-0 mr-10px">
<img class="w-80px h-80px" src="@/static/images/ddfdcaer.png" alt="">
</div>
<div class="flex flex-col justify-between">
<div class="text-#000 text-16px ellipsis line-height-21px">张天赐 | 日出而作，日落而息撒打算撒打算撒打决赛多久啊是世奥兰…</div>
<div class="text-#575757 text-14px line-height-none ">起拍价：RMB 1,000</div>
<div class="text-[#fdc181ff] line-height-none">成交价：RMB 10,000</div>
</div>
</div>
</div>
<div class="px-16px pt-14px">
<div class="text-#575757 text-14px mb-3px">2025.01.12</div>
<div class="flex mb-22px">
<div class="flex-shrink-0 mr-10px">
<img class="w-80px h-80px" src="@/static/images/ddfdcaer.png" alt="">
</div>
<div class="flex flex-col justify-between">
<div class="text-#000 text-16px ellipsis line-height-21px">张天赐 | 日出而作，日落而息撒打算撒打算撒打决赛多久啊是世奥兰…</div>
<div class="text-#575757 text-14px line-height-none ">起拍价：RMB 1,000</div>
<div class="text-#B58047 text-14px line-height-none">成交价：RMB 10,000</div>
</div>
</div>
<div class="flex">
<div class="flex-shrink-0 mr-10px">
<img class="w-80px h-80px" src="@/static/images/ddfdcaer.png" alt="">
</div>
<div class="flex flex-col justify-between">
<div class="text-#000 text-16px ellipsis line-height-21px">张天赐 | 日出而作，日落而息撒打算撒打算撒打决赛多久啊是世奥兰…</div>
<div class="text-#000 text-16px ellipsis line-height-21px">{{item1?.auctionArtworkInfo?.artworkTitle}}</div>
<div class="text-#575757 text-14px line-height-none ">起拍价：RMB 1,000</div>
<div class="text-#B58047 text-14px line-height-none">成交价：RMB 10,000</div>
</div>