Client-Teapay/src/pagesB/orderingfood/activationcode.vue

<template>
    <div class='activationcode'>
        <div class="user_info flex_r flex_jb">
            <img class="userimg" :src="userinfo.head_pic" />
            <div class="u_info">
                <div class="p1">{{ userinfo.nickname }}</div>
                <div class="p1">手机号：{{ userinfo.mobile }}</div>
                <div class="p3">加入时间：{{ localInfo.create_time }}</div>
            </div>
        </div>
        <div class="con">
            <div class="box1">
                <div class="tab" :class="{active:level_id==i.i}" v-for="(i,s) in tabs" :key="s" @click="onto(i)">
                    <div class="p1">{{ i.n }}</div>
                    <div class="p2">剩余生成数：{{Purview[i.k]}}</div>
                </div>
            </div>
        </div>
        <div class="bntbar">
            <div class="btn" @click="activationCode">立即生成</div>
        </div>
        <div class="codebox">
            <div class="msg">待使用：</div>
            <div class="codes">
                <div class="code_it" v-for="(i,s) in codes" :key="s">
                    <div class="l_tit">{{ i.name }}</div>
                    <div class="l_li">
                        <div class="code" v-for="(a,b) in i.codes" :key="b" @click="copyText(a)">{{ a }}</div>
                    </div>
                </div>
            </div>
            <!-- <div class="code" @click="copyText(code)">{{ code }}</div> -->
            <div class="smsg">(*点击激活码可复制)</div>
        </div>
    </div>
</template>
<script>
import { post } from "@/request/api.js";
import uniCopy from "@/utils/copy";
export default {
    name: 'activationcode',
    props: {},
    components: {},
    data() {
        return {
            userinfo: uni.getStorageSync('userinfo'),
            localInfo: {},
            Purview: {},
            code: undefined,
            codes: {},

            tabs: [
                { n: "VIP", i: 1, k: "vip_num" },
                { n: "群主", i: 2, k: "lord_num" },
                { n: "合伙人", i: 3, k: "helper_num" },
                { n: "副总", i: 4, k: "vice_num" },
            ],
            level_id: 1,
        }
    },
    methods: {
        async getLU() {
            this.localInfo = await uni.Luserfun()
        },
        getPurview() {
            post("local/getPurview").then(res => {
                if (res.code == 0) {
                    this.Purview = res.data
                }
            })
            post("local/waitActivation").then(res => {
                if (res.code == 0) {
                    this.codes = res.data
                }
            })
        },
        activationCode() {
            post("local/activationCode",{
                level_id: this.level_id
            }).then(res => {
                if (res.code == 0) {
                    this.getPurview();
                }
            })
        },
        copyText(e) {
            uniCopy({
                content: e,
                success: (res) => {},
                error: (e) => {},
            });
        },
        onto(i){
            if(this.Purview[i.k] > 0) this.level_id = i.i
        }
    },
    onLoad(da) {
        this.getPurview();
        this.getLU();
    },
    onShow() {},
    mounted() {},
}
</script>
<style scoped lang='scss'>
page {
    background-color: #fff;
}
.activationcode{
    padding-bottom: 60rpx;
}
.user_info{
    padding: 38rpx 32rpx;
    border-bottom: 1px solid #e5e5e5;
    .userimg{
        width: 160rpx;
        height: 160rpx;
        border-radius: 10rpx;
    }
    .u_info{
        width: calc(100% - 160rpx);
        padding: 4rpx 0 4rpx 30rpx;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .p1{
            font-size: 36rpx;
        }
        .p3{
            font-size: 28rpx;
            color: #999;
        }
    }
}
.con{
    padding: 28rpx 32rpx;
    .box1{
        margin: 0 -15rpx;
    }
    .tab{
        display: inline-block;
        background-color: rgba($color: #000, $alpha: 0.06);
        width: calc(50% - 30rpx);
        margin: 15rpx;
        text-align: center;
        padding: 22rpx 26rpx;
        border-radius: 10rpx;
        .p1{
            font-size: 36rpx;
            font-weight: bold;
            margin-bottom: 10rpx;
        }
        .p2{
            font-size: 24epx;
            color: #666;
        }
        &.active{
            background-color: #d3aa79;
            .p1,.p2{
                color: #fff;
            }
        }
    }
}
.bntbar{
    padding: 0 32rpx;
    .btn{
        font-weight: bold;
        height: 90rpx;
        line-height: 90rpx;
        text-align: center;
        background: radial-gradient(circle, #d3aa79,#ebcda8);
        border-radius: 45rpx;
    }
}
.codebox{
    padding: 0 32rpx;
    margin-top: 50rpx;
    .msg{
        margin-bottom: 30rpx;
        font-size: 32rpx;
        font-weight: bold;
        color: #666;
    }
    .codes{
        background-color: rgba($color: #000, $alpha: 0.08);
        border-radius: 10rpx;
        padding: 26rpx 30rpx;
    }
    .l_tit{
        color: #666;
        font-size: 30rpx;
    }
    .l_li{
        margin: 10rpx -20rpx 30rpx;
    }
    .code_it{
        &:last-child{
            .l_li{
                margin-bottom: 0;
            }
        }
    }
    .code{
        display: inline-block;
        color: #000;
        width: calc((100% - 120rpx) / 3);
        background-color: #fff;
        border-radius: 10rpx;
        margin: 8rpx 20rpx;
        text-align: center;
        padding: 10rpx 0;
    }
    .smsg{
        font-size: 23rpx;
        margin-top: 10rpx;
    }
}
</style>