<template>
    <div class="directCharge">
        <div class="list">
            <div class="t_item" v-for="(i,s) in brand" :key="s">
                <div class="type_name">{{ i.name }}</div>
                <div class="it_list">
                    <div class="brand" v-for="(a,b) in i.list" :key="b" @click="ontab(a)">
                        <img :src="a.img" class="b_img" alt="">
                        <div class="b_name ellipsis">{{ a.name }}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { post } from "@/request/api.js";
export default {
    name: "directCharge",
    props: {},
    components: {},
    data() {
        return {
            brand: [],
            btype: 0,
        };
    },
    methods: {
        load(da){
            post("local/coupon/brandList",da).then(res=>{
                if (res.code == 0) {
                    this.brand = res.data
                }
            })
        },
        ontab(da){
            uni.setStorageSync("topup_brand",da)
            if(this.btype == 1) {
                this.goto("/pagesB/directCharge/payment")
            }
            else if(this.btype == 2) this.goto("/pagesB/directCharge/coupon")
        }
    },
    onLoad(da) {
        this.load(da);
        this.btype = da.type;
        let tit = ""
        if(da.type == 1) tit = "音视频会员"
        else if(da.type == 2) tit = "优惠券"
        uni.setNavigationBarTitle({ title: tit });
    },
    onShow() {},
    mounted() {},
};
</script>

<style scoped lang='scss'>
.list{
    padding: 30rpx;
    .t_item{
        margin-bottom: 30rpx;
    }
    .type_name{
        font-size: 38rpx;
        font-weight: 600;
        margin-bottom: 10rpx;
    }
    .it_list{
        margin: 0 -15rpx;
    }
    .brand{
        display: inline-block;
        width: calc(50% - 30rpx);
        margin: 12rpx 15rpx;
        background-color: #fff;
        padding: 15rpx 0 15rpx 20rpx;
        box-shadow: 4rpx 4rpx 16rpx 10rpx rgba($color: #000, $alpha: 0.15);
        border-radius: 10rpx;
        .b_img,.b_name{
            display: inline-block;
            vertical-align: middle;
        }
        .b_img{
            width: 120rpx;
            height: 120rpx;
            // border: 1px solid #e5e5e5;
            border-radius: 50%;
            box-sizing: border-box;
            background-color: #e5e5e5;
        }
        .b_name{
            width: calc(100% - 120rpx);
            font-size: 28rpx;
            padding-left: 20rpx;
        }
    }
}
</style>