Client-Teapay/src/components/activation/activation.vue

<template>
    <uni-popup ref="popup" :mask-click="false">
        <div class="popup_con">
            <div class="p_tit">
                <span class="tit">{{ tit }}</span>
                <span @click="close" class="close iconfont">&#xe609;</span>
            </div>
            <div class="p_con">
                <div class="con_txt">请输入激活码</div>
                <input class="activation_code dinB" :focus="focus" v-model="code" />
            </div>
            <div class="btnbar">
                <div class="btn" @click="jihuo">立即激活</div>
            </div>
        </div>
    </uni-popup>
</template>
<script>
import { post } from "@/request/api.js";
export default {
    name: "activation",
    props: {},
    props: {
        tit: {
            type: String,
            default: "激活"
        },
    },
    components: {},
    data() {
        return {
            code: "", //激活码

            focus: false
        };
    },
    methods: {
        jihuo() {
            let code = this.code
            post("local/activation", { code }).then(res => {
                if (res.code == 0) {
                    uni.showToast({ title: "激活成功", icon: "none" });
                    this.close()
                }
            })
        },
        open() {
            this.$refs.popup.open('center');
            this.focus = true
        },
        close() {
            this.$refs.popup.close()
            this.$emit('close');
        }
    },
    onLoad(da) {},
    onShow() {},
    mounted() {},
};
</script>
<style scoped lang='scss'>
.popup_con {
    background-color: #fff;
    width: 80vw;
    border-radius: 16rpx;
    padding: 0 30rpx 28rpx;

    .p_tit {
        min-height: 80rpx;
        line-height: 80rpx;
        text-align: center;

        .close {
            color: #666;
            font-size: 40rpx;
            font-weight: bold;
            float: right;
        }
    }

    .p_con {
        padding: 50rpx 0;

        .con_txt {
            color: #999;
            font-size: 30rpx;
            text-align: center;
            margin-bottom: 16rpx;
        }

        .activation_code {
            height: 70rpx;
            background-color: rgba($color: #000, $alpha: 0.05);
            border-radius: 12rpx;
            text-align: center;
            font-weight: bold;
            letter-spacing: 4rpx;
            font-size: 38rpx;
        }

    }

    .btnbar {

        // margin-top: 28rpx;
        .btn {
            font-weight: bold;
            height: 70rpx;
            line-height: 70rpx;
            text-align: center;
            background: radial-gradient(circle, #d3aa79, #ebcda8);
            border-radius: 35rpx;
        }
    }
}
</style>