xshop/resources/js/client-vue/Qindex.vue

<template>
    <div id="qIndex">
        <button type="button" v-for="(q,i) in qz" :class="getClass(i)" @click="changeIndex(i)">
            <q-preview :q="q"></q-preview>
            {{priceing(q.price)}}
        </button>
        <input type="hidden" :name="xname" v-if="xname != null" :value="id">
    </div>
</template>

<script>
import QPreview from "./Qpreview.vue";

function commafy(num) {
    if (typeof num !== 'string') {
        return '';
    }
    let str = uncommafy(num.toString()).split('.');
    if (str[0].length >= 4) {
        str[0] = str[0].replace(/(\d)(?=(\d{3})+$)/g, '$1,');
    }
    if (str[1] && str[1].length >= 4) {
        str[1] = str[1].replace(/(\d{3})/g, '$1 ');
    }
    return str.join('.');
}

function uncommafy(txt) {
    return txt.split(',').join('');
}

export default {
    name: "qIndex",
    components: {QPreview},
    data: () => {
        return {
            index:0,
            id: null,
        }
    },
    props: {
        qz:{
            required:[],
        },
        basePrice:{
            default:0,
        },
        symbol:{
            required: true,
        },
        onChange:{
            type: Function,
            default: function (i,q){},
        },
        i:{
            default: 0,
            type: Number,
        },
        xname:{
            default: null,
        }
    },
    mounted() {
        for( const i in this.qz) {
            const q = this.qz[i];
           if (q.price == this.basePrice){
               this.index = i;
               this.id = q.id;
           }
        }

    },
    computed: {},
    methods: {
        changeIndex(i){
            this.index = i;
            this.onChange(this.i, this.qz[i]);
            this.id =  this.qz[i].id;
        },
        priceing(p) {
            if (p == null || p == undefined) {
                return '';
            }
            return commafy(p.toString()) + ' ' + this.symbol;
        },
        getClass(i){
            let cls = 'q';
            if (i == this.index){
                cls += ' selected';
            }

            return cls;
        }
    }
}
</script>

<style scoped>
#qIndex {
}
.q{
    border: 1px solid var(--xshop-secondary);
    border-radius: var(--xshop-border-radius);
    margin-bottom: 4px;
    background: transparent;
    display: block;
    color: var(--xshop-text);
    width: 100%;
    div{
        display: inline-block;
    }


    &.selected{
        background: var(--xshop-primary);
        color: var(--xshop-diff);
    }
}


</style>