liveh5-nuxt/app/pages/liveRoom/components/PaymentInput/index.vue
xingyy 10cba595b0 refactor(live): 优化直播室功能和交互
- 修改艺术品状态更新逻辑,仅在未售出时允许改变状态
- 添加支付按钮点击后跳转到签名协议页面
- 优化侧边按钮组件,增加支付按钮的显示逻辑
2025-02-10 17:02:58 +08:00

56 lines
1.4 KiB
Vue

<script setup>
const props = defineProps({
show: {
type: Boolean,
default: false
},
price: {
type: Number,
default: 0
}
})
const router = useRouter()
const emit = defineEmits(['update:show'])
const payStatus=ref(0)
const changePayStatus=()=>{
payStatus.value=payStatus.value===0?1:0
}
const close=()=>{
emit('update:show',false)
}
const confirm=()=>{
router.push('/signature/protocol')
emit('update:show',false)
}
</script>
<template>
<div>
<van-dialog :show="show" show-cancel-button @close="close" @confirm="confirm">
<div class="flex flex-col pt-18px pb-13px justify-between items-center h-144px">
<template v-if="payStatus===0">
<div class="text-#000 text-16px font-600 ">支付全部</div>
<div class="text-#000 text-16px ">RMB 5,000</div>
</template>
<template v-if="payStatus===1">
<div class="text-#000 text-16px font-600 ">支付部分</div>
<input class="w-272px h-48px bg-#F3F3F3 px-11px text-16px" type="text" placeholder="最多RMB5,000">
</template>
<div class="text-#2B53AC text-14px" @click="changePayStatus">{{payStatus===0 ? '支付部分' : '支付全部'}}</div>
</div>
</van-dialog>
</div>
</template>
<style scoped lang="scss">
:deep(.van-hairline--top.van-dialog__footer){
&>.van-button{
border-top: 1px solid #E7E7E7;
&.van-dialog__cancel{
border-right: 1px solid #E7E7E7;
}
}
}
</style>