fission-star-applet-250304/components/center/popupActivate.vue

<template>
    <uv-popup ref="popup" :overlayOpacity="0.8" :customStyle="{
        backgroundColor: 'transparent',
    }">
        <view class="flex content">
            <template v-if="mode === 'activate'">
                <image class="popup-bg" src="@/pages_order/static/center/activate-code.png"></image>

                <view class="flex popup-btns">
                    <button plain class="btn-simple" @click="close">
                        <image class="popup-btn" src="@/pages_order/static/center/cancel.png"></image>
                    </button>
                    <button plain class="btn-simple" @click="onConfirm">
                        <image class="popup-btn" src="@/pages_order/static/center/confirm.png"></image>
                    </button>
                </view>

                <uv-input v-model="code" :focus="true" inputAlign="center" color="#3DFEE0" fontSize="45rpx"
                    border="none" :customStyle="{
                        backgroundColor: 'transparent',
                        width: '250rpx',
                        height: '63rpx',
                        position: 'absolute',
                        top: '216rpx',
                        left: '160rpx',
                    }"></uv-input>
            </template>
            <template v-else>
                <image class="popup-bg" src="@/pages_order/static/center/not-agent.png"></image>
                <view class="flex popup-btns">
                    <button plain class="btn-simple" @click="close">
                        <image class="popup-btn" src="@/pages_order/static/center/cancel.png"></image>
                    </button>
                    <button plain class="btn-simple" @click="mode = 'activate'">
                        <image class="popup-btn" src="@/pages_order/static/center/activate.png"></image>
                    </button>
                </view>
            </template>
        </view>
    </uv-popup>
</template>

<script>
export default {
    props: {
        role: {
            default: null
        },
    },
    data() {
        return {
            mode: '',
            code: '',
        }
    },
    methods: {
        open(role) {
            this.mode = role ? 'activate' : ''
            this.$refs.popup.open();
        },
        close() {
            this.$refs.popup.close();
        },
        async onConfirm() {

            try {

                await this.$fetch('openVip', { code: this.code })

                this.$store.commit('getUserInfo')

                uni.showToast({
                    title: '激活成功',
                    icon: 'none'
                })

                this.close()
            } catch (err) {

            }

        }
    },
}
</script>

<style scoped lang="scss">
.content {
    position: relative;
    flex-direction: column;
    width: 570rpx;
}

.popup {
    &-bg {
        width: 514rpx;
        height: 355rpx;
    }

    &-btns {
        justify-content: space-between;
        margin-top: 56rpx;
        width: 100%;
    }

    &-btn {
        width: 265rpx;
        height: 84rpx;
    }
}
</style>