liveh5-nuxt/app/pages/liveRoom/components/PaymentInput/index.vue
xingyy 331b4a73b2 refactor(app): 重构 LiveRoom 组件
- 将 LiveRoom 相关组件和文件重命名,统一使用小写开头
- 新增 x-button、x-image 和 x-popup 组件,替代原有 PressableButton 和 ImagePreview
-优化 SideButton 组件,使用新的 x-button 和 tangPopup 组件- 更新 LiveRoom 组件中的引用和使用方式
- 调整 tangPopup 组件,使用 goodStore 替代静态数据
2025-01-22 15:44:50 +08:00

54 lines
1.4 KiB
Vue

<script setup>
const props = defineProps({
show: {
type: Boolean,
default: false
},
price: {
type: Number,
default: 0
}
})
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=()=>{
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>