refactor(app): 重构 LiveRoom 组件
- 将 LiveRoom 相关组件和文件重命名，统一使用小写开头 - 新增 x-button、x-image 和 x-popup 组件，替代原有 PressableButton 和 ImagePreview -优化 SideButton 组件，使用新的 x-button 和 tangPopup 组件- 更新 LiveRoom 组件中的引用和使用方式 - 调整 tangPopup 组件，使用 goodStore 替代静态数据
This commit is contained in:
xingyy
parent
c74ba7bcb3
commit
331b4a73b2
@ -1,5 +1,5 @@
|
||||
<script setup>
|
||||
import { ImagePreview } from 'vant';
|
||||
import { showImagePreview } from 'vant';
|
||||
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',
|
||||
|
||||
27
app/components/x-image/index.vue
Normal file
27
app/components/x-image/index.vue
Normal file
@ -0,0 +1,27 @@
|
||||
<script setup>
|
||||
/*
|
||||
* 此组件的目的是使用该图片组件自带预览大图
|
||||
* */
|
||||
import { showImagePreview } from 'vant';
|
||||
const props = defineProps({
|
||||
src: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
preview: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
})
|
||||
const showImage = () => {
|
||||
if (props.preview) {
|
||||
showImagePreview([props.src]);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<img
|
||||
v-bind="{ ...props, ...$attrs }"
|
||||
@click="showImage"
|
||||
>
|
||||
</template>
|
||||
@ -1,4 +1,5 @@
|
||||
<script setup>
|
||||
|
||||
const props = defineProps({
|
||||
show: {
|
||||
type: Boolean,
|
||||
@ -15,27 +16,31 @@ const close=()=>{
|
||||
<template>
|
||||
<van-popup
|
||||
:show="show"
|
||||
teleport="#__nuxt"
|
||||
position="bottom"
|
||||
:style="{ height: '74%' }"
|
||||
v-bind="{...$attrs,...$props}"
|
||||
@close="close"
|
||||
>
|
||||
<div class="flex flex-col h-full">
|
||||
<!-- 固定的标题栏 -->
|
||||
<div class="flex items-center pl-16px pr-19px h-40px border-b-1px border-b-[#D3D3D3] shrink-0">
|
||||
<template v-if="$slots.title">
|
||||
<slot name="title"></slot>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="text-#000 text-16px">{{title}}</div>
|
||||
</template>
|
||||
<div class="ml-auto flex items-center">
|
||||
<van-icon size="20" name="cross" color="#939393" @click="close"/>
|
||||
</div>
|
||||
<!-- 标题栏 -->
|
||||
<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>
|
||||
<van-icon
|
||||
class="ml-auto"
|
||||
size="20"
|
||||
name="cross"
|
||||
color="#939393"
|
||||
@click="close"
|
||||
/>
|
||||
</div>
|
||||
<!-- 可滚动的内容区域 -->
|
||||
<div class="flex-1 overflow-y-auto ">
|
||||
<slot/>
|
||||
|
||||
<!-- 内容区域 -->
|
||||
<div class="flex-1 px-16px py-18px overflow-hidden relative">
|
||||
<div class="h-full overflow-y-auto relative">
|
||||
<slot/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</van-popup>
|
||||
|
||||
@ -1,114 +0,0 @@
|
||||
<script setup>
|
||||
import xPopup from '@/components/x-popup/index.vue'
|
||||
const props = defineProps({
|
||||
show: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<x-popup :show="show">
|
||||
<template #title>
|
||||
<div class="text-#000 text-16px">拍品列表</div>
|
||||
<div class="text-#939393 text-16px ml-14px">共188个拍品</div>
|
||||
</template>
|
||||
<div class="px-16px py-18px">
|
||||
<div class="flex mb-21px">
|
||||
<div class="mr-10px flex-shrink-0 rounded-4px overflow-hidden">
|
||||
<img class="w-80px h-80px" src="@/static/images/ddfdcaer.png" alt="">
|
||||
</div>
|
||||
<div>
|
||||
<div class="ellipsis line-height-20px text-16px font-600 min-h-40px">
|
||||
张天赐 | 日出而作，日落而息撒打算撒打算撒打决赛多久啊是世奥兰日落而息撒打算撒打算撒打决赛多久啊是世奥兰
|
||||
</div>
|
||||
<div class="text-14px text-#575757">起拍价：RMB 1,000</div>
|
||||
<div class="text-14px text-#B58047">成交价：等待更新</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex mb-21px">
|
||||
<div class="mr-10px flex-shrink-0 rounded-4px overflow-hidden">
|
||||
<img class="w-80px h-80px" src="@/static/images/ddfdcaer.png" alt="">
|
||||
</div>
|
||||
<div>
|
||||
<div class="ellipsis line-height-20px text-16px font-600 min-h-40px">
|
||||
张天赐 | 日出而作，日落而息撒打算撒打算撒打决赛多久啊是世奥兰日落而息撒打算撒打算撒打决赛多久啊是世奥兰
|
||||
</div>
|
||||
<div class="text-14px text-#575757">起拍价：RMB 1,000</div>
|
||||
<div class="text-14px text-#B58047">成交价：等待更新</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex mb-21px">
|
||||
<div class="mr-10px flex-shrink-0 rounded-4px overflow-hidden">
|
||||
<img class="w-80px h-80px" src="@/static/images/ddfdcaer.png" alt="">
|
||||
</div>
|
||||
<div>
|
||||
<div class="ellipsis line-height-20px text-16px font-600 min-h-40px">
|
||||
张天赐 | 日出而作
|
||||
</div>
|
||||
<div class="text-14px text-#575757">起拍价：RMB 1,000</div>
|
||||
<div class="text-14px text-#B58047">成交价：等待更新</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex mb-21px">
|
||||
<div class="mr-10px flex-shrink-0 rounded-4px overflow-hidden">
|
||||
<img class="w-80px h-80px" src="@/static/images/ddfdcaer.png" alt="">
|
||||
</div>
|
||||
<div>
|
||||
<div class="ellipsis line-height-20px text-16px font-600 min-h-40px">
|
||||
张天赐 | 日出而作
|
||||
</div>
|
||||
<div class="text-14px text-#575757">起拍价：RMB 1,000</div>
|
||||
<div class="text-14px text-#B58047">成交价：等待更新</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex mb-21px">
|
||||
<div class="mr-10px flex-shrink-0 rounded-4px overflow-hidden">
|
||||
<img class="w-80px h-80px" src="@/static/images/ddfdcaer.png" alt="">
|
||||
</div>
|
||||
<div>
|
||||
<div class="ellipsis line-height-20px text-16px font-600 min-h-40px">
|
||||
张天赐 | 日出而作
|
||||
</div>
|
||||
<div class="text-14px text-#575757">起拍价：RMB 1,000</div>
|
||||
<div class="text-14px text-#B58047">成交价：等待更新</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex mb-21px">
|
||||
<div class="mr-10px flex-shrink-0 rounded-4px overflow-hidden">
|
||||
<img class="w-80px h-80px" src="@/static/images/ddfdcaer.png" alt="">
|
||||
</div>
|
||||
<div>
|
||||
<div class="ellipsis line-height-20px text-16px font-600 min-h-40px">
|
||||
张天赐 | 日出而作
|
||||
</div>
|
||||
<div class="text-14px text-#575757">起拍价：RMB 1,000</div>
|
||||
<div class="text-14px text-#B58047">成交价：等待更新</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex mb-21px">
|
||||
<div class="mr-10px flex-shrink-0 rounded-4px overflow-hidden">
|
||||
<img class="w-80px h-80px" src="@/static/images/ddfdcaer.png" alt="">
|
||||
</div>
|
||||
<div>
|
||||
<div class="ellipsis line-height-20px text-16px font-600 min-h-40px">
|
||||
张天赐 | 日出而作
|
||||
</div>
|
||||
<div class="text-14px text-#575757">起拍价：RMB 1,000</div>
|
||||
<div class="text-14px text-#B58047">成交价：等待更新</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</x-popup>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@ -18,7 +18,7 @@ const openShow = (item,index) => {
|
||||
<div class="flex flex-1 flex-col gap-[16px]">
|
||||
<div
|
||||
v-for="(item, index) in items"
|
||||
:key="index"
|
||||
:key="item.uuid"
|
||||
class="w-full"
|
||||
@click="openShow(item,index)"
|
||||
>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<script setup>
|
||||
import LiveRoom from '@/pages/LiveRoom/index.client.vue';
|
||||
import liveRoom from '@/pages/liveRoom/index.client.vue';
|
||||
import {goodStore} from "@/stores/goods/index.js";
|
||||
import ItemList from './components/ItemList/index.vue'
|
||||
import Cescribe from './components/Cescribe/index.vue'
|
||||
@ -21,8 +21,9 @@ const showBottom = ref(true)
|
||||
|
||||
<template>
|
||||
<div class="flex-grow-1">
|
||||
|
||||
<client-only>
|
||||
<LiveRoom @click="changeLive" :class="['changeLive', fullLive ? 'expanded' : 'collapsed']" ref="liveRef"
|
||||
<liveRoom @click="changeLive" :class="['changeLive', fullLive ? 'expanded' : 'collapsed']" ref="liveRef"
|
||||
:fullLive="fullLive"/>
|
||||
</client-only>
|
||||
<div v-show="!fullLive" class="bg-#fff">
|
||||
|
||||
@ -1,24 +1,31 @@
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
import lockClosed from "~/static/images/lockdfd@2x.png";
|
||||
import lockOpen from "~/static/images/lock4@2x.png";
|
||||
import { liveStore } from "~/stores/live/index.js";
|
||||
import PressableButton from './PressableButton.vue'
|
||||
const { quoteStatus, changeStatus,show,show1 } = liveStore();
|
||||
|
||||
import lockClosed from "@/static/images/lockdfd@2x.png";
|
||||
import lockOpen from "@/static/images/lock4@2x.png";
|
||||
import { liveStore } from "@/stores/live/index.js";
|
||||
import xButton from '@/components/x-button/index.vue'
|
||||
import tangPopup from './tangPopup.vue'
|
||||
import {goodStore} from "~/stores/goods/index.js";
|
||||
const { quoteStatus, changeStatus,show } = liveStore();
|
||||
const {pageRef} = goodStore();
|
||||
const showTang=ref(false)
|
||||
const openOne=()=>{
|
||||
showTang.value=true
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="bg-white w-60px rounded-l-4px overflow-hidden">
|
||||
<!-- 拍品信息 -->
|
||||
<PressableButton>
|
||||
<x-button @click="openOne">
|
||||
<div class="w-60px h-60px text-center border-b border-gray-300 flex flex-col justify-center items-center text-#7D7D7F text-12px">
|
||||
<div>拍品</div>
|
||||
<div>(1/188)</div>
|
||||
<div>(1/{{pageRef.itemCount??0}})</div>
|
||||
</div>
|
||||
</PressableButton>
|
||||
</x-button>
|
||||
<tangPopup v-model:show="showTang"></tangPopup>
|
||||
<!-- 出价开关 -->
|
||||
<PressableButton @click="changeStatus">
|
||||
<x-button @click="changeStatus">
|
||||
<div class="w-60px h-60px text-center border-b border-gray-300 flex flex-col justify-center items-center">
|
||||
<div class="mb-1">
|
||||
<img
|
||||
@ -31,15 +38,15 @@ const { quoteStatus, changeStatus,show,show1 } = liveStore();
|
||||
{{ quoteStatus ? '关闭出价' : '开启出价' }}
|
||||
</div>
|
||||
</div>
|
||||
</PressableButton>
|
||||
</x-button>
|
||||
<!-- 支付 -->
|
||||
<PressableButton @click="show = true">
|
||||
<div class="w-60px h-60px text-center border-b border-gray-300 flex flex-col justify-center items-center text-yellow-600">
|
||||
<x-button @click="show = true">
|
||||
<div class="w-60px h-60px text-center flex flex-col justify-center items-center text-yellow-600">
|
||||
<div class="text-10px">RMB</div>
|
||||
<div class="text-12px">5,000</div>
|
||||
<div class="text-10px">去支付</div>
|
||||
</div>
|
||||
</PressableButton>
|
||||
</x-button>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
64
app/pages/liveRoom/components/SideButton/tangPopup.vue
Normal file
64
app/pages/liveRoom/components/SideButton/tangPopup.vue
Normal file
@ -0,0 +1,64 @@
|
||||
<script setup>
|
||||
import xPopup from '@/components/x-popup/index.vue'
|
||||
import {goodStore} from "~/stores/goods/index.js";
|
||||
import { showImagePreview } from 'vant';
|
||||
const {pageRef,itemList} = goodStore();
|
||||
const props = defineProps({
|
||||
show: Boolean,
|
||||
title: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
})
|
||||
const emit = defineEmits(['update:show'])
|
||||
|
||||
const close = () => emit('update:show', false);
|
||||
const openImage = (url) => {
|
||||
showImagePreview([url]);
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<x-popup :show="show" @update:show="close">
|
||||
<template #title>
|
||||
<div class="text-#000 text-16px">拍品列表</div>
|
||||
<div class="text-#939393 text-16px ml-14px">共{{ pageRef.itemCount }}个拍品</div>
|
||||
</template>
|
||||
<div>
|
||||
<div
|
||||
v-for="(item,index) of itemList"
|
||||
:key="item.uuid"
|
||||
class="flex mb-21px"
|
||||
>
|
||||
<div
|
||||
class="mr-10px flex-shrink-0 rounded-4px overflow-hidden cursor-pointer"
|
||||
@click="openImage(item.artwork.hdPic)"
|
||||
>
|
||||
<img
|
||||
class="w-80px h-80px"
|
||||
:src="item.artwork.hdPic"
|
||||
:alt="item.artworkTitle"
|
||||
loading="lazy"
|
||||
>
|
||||
</div>
|
||||
<div>
|
||||
<div class="ellipsis line-height-20px text-16px font-600 min-h-40px">
|
||||
{{ item.artworkTitle }}
|
||||
</div>
|
||||
<div class="text-14px text-#575757">起拍价：RMB 1,000</div>
|
||||
<div class="text-14px text-#B58047">成交价：等待更新</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</x-popup>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.ellipsis {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
</style>
|
||||
@ -2,13 +2,12 @@
|
||||
import {ref, onMounted, onBeforeUnmount} from 'vue'
|
||||
import Aliplayer from 'aliyun-aliplayer'
|
||||
import 'aliyun-aliplayer/build/skins/default/aliplayer-min.css'
|
||||
import sideButton from '~/pages/LiveRoom/components/SideButton/index.vue'
|
||||
import broadcast from '~/pages/LiveRoom/components/Broadcast/index.vue'
|
||||
import sideButton from '~/pages/liveRoom/components/SideButton/index.vue'
|
||||
import broadcast from '~/pages/liveRoom/components/Broadcast/index.vue'
|
||||
import {liveStore} from "~/stores/live/index.js";
|
||||
import paymentResults from '~/pages/LiveRoom/components/PaymentResults/index.vue'
|
||||
import paymentInput from '~/pages/LiveRoom/components/PaymentInput/index.vue'
|
||||
import PressableButton from '~/pages/LiveRoom/components/SideButton/PressableButton.vue'
|
||||
|
||||
import paymentResults from '~/pages/liveRoom/components/PaymentResults/index.vue'
|
||||
import paymentInput from '~/pages/liveRoom/components/PaymentInput/index.vue'
|
||||
import xButton from '@/components/x-button/index.vue'
|
||||
const player = ref(null)
|
||||
const {quoteStatus, changeStatus, show, playerId, show1} = liveStore()
|
||||
const isPlayerReady = ref(false)
|
||||
@ -116,12 +115,12 @@ watch(()=>{
|
||||
下口价：RMB
|
||||
<van-rolling-text class="my-rolling-text1" :start-num="0" :duration="0.5" :target-num="3500" direction="up"/>
|
||||
</div>
|
||||
<PressableButton>
|
||||
<x-button>
|
||||
<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>
|
||||
</x-button>
|
||||
<broadcast></broadcast>
|
||||
</div>
|
||||
<paymentInput v-model:show="show"/>
|
||||
@ -7,11 +7,12 @@ definePageMeta({
|
||||
title: '我的',
|
||||
i18n: 'menu.profile',
|
||||
})
|
||||
const myList=ref([])
|
||||
const {userInfo}= authStore()
|
||||
const initData=async ()=>{
|
||||
const res=await userArtworks({})
|
||||
if (res.status===0){
|
||||
|
||||
myList.value=res.data.data
|
||||
}
|
||||
}
|
||||
initData()
|
||||
|
||||
Loading…
Reference in New Issue
Block a user