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

feat(goods): 获取用户艺术品并优化首页布局

Browse Source 
- 在 goods API 中添加 userArtworks 函数- 更新 auth store，将 userInfo 默认值改为对象
- 优化 LiveRoom 页面布局，添加安全区域支持
- 修改 AppFooter 组件，修复路由判断逻辑
- 更新首页 Column 组件，调整图片显示样式
- 在 Profile 页面添加用户信息展示
This commit is contained in:
xingyy 2025-01-21 14:16:54 +08:00
parent e23fed8c74
commit dee871759e
8 changed files with 68 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
app/api/goods/index.js
View File

@ -21,3 +21,10 @@ export async function artworkDetail(data) {
body: data,
})
}
export async function userArtworks(data) {
const http = getHttp()
return await http('/api/v1/m/user/artworks', {
method: 'POST',
body: data,
})
}

3
app/app.vue
View File

@ -78,4 +78,7 @@ provide('slideDirection', slideDirection)
.slide-right-leave-to {
transform: translateX(100%);
}
:root{
--safe-area-inset-bottom: env(safe-area-inset-bottom);
}
</style>

8
app/components/AppFooter.vue
View File

@ -11,13 +11,17 @@ const show = computed(() => {
return false
})
const initData=()=>{
active.value=route.path==='/'?0:1
active.value=route.path==='/profile'?1:0
}
initData()
onMounted(()=>{
initData()
})
</script>
<template>
<div v-if="show">
<van-tabbar v-model="active" route placeholder fixed>
<van-tabbar-item replace to="/">
<span>{{ $t('tabbar.home') }}</span>

55
app/pages/LiveRoom/index.client.vue
View File

@ -89,30 +89,33 @@ const goPay = () => {
</div>
<!-- <div :id="playerId" class="w-screen"
:style="fullLive?'height: calc(100vh - var(&#45;&#45;van-nav-bar-height))':'height:100%'"></div>-->
<template v-if="fullLive">
<sideButton class="absolute top-196px right-0 z-999"></sideButton>
<div class="absolute top-505px left-1/2 transform -translate-x-1/2 flex flex-col items-center">
<div class="text-16px text-#FFB25F font-600">
当前价：RMB
<van-rolling-text class="my-rolling-text" :start-num="0" :target-num="3000" direction="up"/>
</div>
<div class="text-16px text-#fff font-600">
下口价：RMB
<van-rolling-text class="my-rolling-text1" :start-num="0" :target-num="3500" direction="up"/>
</div>
<PressableButton>
<div
:class="`w-344px h-[40px] ${quoteStatus ? 'bg-#FFB25F' : 'bg-#D6D6D8'} rounded-4px ${quoteStatus ? 'text-#fff' : 'text-#7D7D7F'} text-14px flex justify-center items-center mt-10px mb-10px`">
{{ quoteStatus ? '确认出价 RMB 3,000' : '点击"开启出价"，即刻参与竞拍 ' }}
<transition>
<div v-if="fullLive">
<sideButton class="absolute top-196px right-0 z-999"></sideButton>
<div class="absolute left-1/2 transform -translate-x-1/2 flex flex-col items-center" style="bottom:calc(var(--safe-area-inset-bottom) + 26px)">
<div class="text-16px text-#FFB25F font-600">
当前价：RMB
<van-rolling-text class="my-rolling-text" :start-num="0" :target-num="3000" direction="up"/>
</div>
</PressableButton>
<broadcast></broadcast>
<div class="text-16px text-#fff font-600">
下口价：RMB
<van-rolling-text class="my-rolling-text1" :start-num="0" :target-num="3500" direction="up"/>
</div>
<PressableButton>
<div
:class="`w-344px h-[40px] ${quoteStatus ? 'bg-#FFB25F' : 'bg-#D6D6D8'} rounded-4px ${quoteStatus ? 'text-#fff' : 'text-#7D7D7F'} text-14px flex justify-center items-center mt-10px mb-10px`">
{{ quoteStatus ? '确认出价 RMB 3,000' : '点击"开启出价"，即刻参与竞拍 ' }}
</div>
</PressableButton>
<broadcast></broadcast>
</div>
<paymentInput v-model:show="show"/>
<div>
</div>
<paymentResults v-model:show="show1" type="error"/>
</div>
<paymentInput v-model:show="show"/>
<div>
</div>
<paymentResults v-model:show="show1" type="error"/>
</template>
</transition>
</div>
</template>
@ -122,7 +125,15 @@ const goPay = () => {
}
</style>
<style scoped>
.v-enter-active,
.v-leave-active {
transition: opacity 0.5s ease;
}
.v-enter-from,
.v-leave-to {
opacity: 0;
}
.my-rolling-text {
--van-rolling-text-item-width: 10px;
--van-rolling-text-font-size: 16px;

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

@ -7,10 +7,10 @@
@click="openShow(item,index)"
>
<div class="relative w-full">
<van-image
<img
:src="item.artwork?.hdPic"
fit="cover"
class="w-full"
class="w-full object-cover rounded-4px"
/>
<div
class="absolute left-[8px] top-[8px] h-[17px] w-[45px] flex items-center justify-center bg-[#2b53ac] text-[12px] text-[#fff]"

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

@ -1,9 +1,20 @@
<script setup>
import {userArtworks} from "~/api/goods/index.js";
import {authStore} from "~/stores/auth/index.js";
definePageMeta({
layout: 'default',
title: '我的',
i18n: 'menu.profile',
})
const {userInfo}= authStore()
const initData=async ()=>{
const res=await userArtworks({})
if (res.status===0){
}
}
initData()
</script>
<template>
@ -13,8 +24,8 @@ definePageMeta({
<img class="w-57px h-57px" src="@/static/images/5514@2x.png" alt="">
</div>
<div class="flex flex-col">
<div class="text-18px text-#181818">张三</div>
<div class="text-#575757 text-14px">15834362333</div>
<div class="text-18px text-#181818">{{userInfo.realName}}</div>
<div class="text-#575757 text-14px">{{userInfo.telNum}}</div>
</div>
</div>
<div class="flex-grow-1">

2
app/stores/auth/index.js
View File

@ -2,7 +2,7 @@ import { createGlobalState,useLocalStorage } from '@vueuse/core'
export const authStore = createGlobalState(() => {
const token=useLocalStorage('token','')
const RefreshToken=useLocalStorage('RefreshToken','')
const userInfo=useLocalStorage('userInfo','')
const userInfo=useLocalStorage('userInfo',{})
return{
userInfo,
RefreshToken,

2
app/stores/goods/index.js
View File

@ -6,6 +6,7 @@ export const goodStore = createGlobalState(() => {
const fullLive = ref(false)
const liveRef = ref(null);
const currentItem=ref({})
const myArtWorks=ref([])
const pageRef = ref({
page: 1,
pageSize: 5,
@ -24,6 +25,7 @@ export const goodStore = createGlobalState(() => {
return artworkList({auctionUuid: auctionDetail.value.uuid, ...page})
}
return {
myArtWorks,
currentItem,
artWorkDetail,
liveRef,