dz-app/components/mx-buy-vip/mx-buy-vip.vue

<template>
    <uv-popup ref="popup" mode="center" bg-color="transparent" @close="close" :close-on-click-overlay="false">
        <view class="fx-col items-center">
            <view class="relative">
                <uv-image width="280px" height="406px" mode="widthFix" :src="buyVipPopup"/>
                <uv-button shape="circle" size="large" :text="`￥${price} 立即开通`" :style="btnBuyStyle"
                           @click="gotoPay"/>
            </view>
            <uv-icon size="32" color="white" name="close-circle" @click="close" class="mt-80"/>
        </view>
    </uv-popup>
</template>

<script setup>
import {ref} from 'vue'
import {usePayment} from "@/hooks/usePayment";
import {useTransfer} from "@/hooks/useTransfer";
import buyVipPopup from '@/static/personal/buy_vip_popup.png'

const popup = ref(null)
const {price, payment} = usePayment()


const btnBuyStyle = {
    position: 'absolute',
    backgroundColor: 'transparent',
    border: 'none',
    width: '180px',
    bottom: '-2px',
    left: '50px'
}

const open = function () {
    popup.value.open()
}

const close = function () {
    popup.value.close()
    // NOTE: 只调用了popup的显示与隐藏
    // usePayment会持续监听订单信息，直到获取到一个终止态，否则不能进行下一次payment响应
    // TODO：待后续观察是否合适，看是否需要在这里释放支付的一些状态
}

function gotoPay() {
  close();
  const {transferTo} = useTransfer();
  transferTo("/pages/personal-center/pay/pay");
}

defineExpose({open, close})
</script>

<style scoped></style>