Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 | <template>
<div>
<div v-for="purchaseType in purchaseTypes" :key="purchaseType.title">
<div class="d-flex align-items-center justify-content-between">
<div class="w-25">
<input name="push-notifications"
type="radio"
class="mt-2 align-self-start"
:id="`${purchaseType.title} ${cart ? 'cart' : ''}`"
:value="purchaseType.id"
v-model="purchase_type"
v-on:change="setOptions(purchaseType.id)"/>
</div>
<label
:for="`${purchaseType.title} ${cart ? 'cart' : ''}`"
class="w-100 ml-3 d-flex flex-column">
{{ purchaseType.title }}
<p class="mt-1" v-if="purchaseType.description">
{{ purchaseType.description }}
</p>
</label>
</div>
</div>
<div class="mt-1 position-relative" v-if="options.length">
<select class="subscription_types position-relative w-100" v-model="subscription_type" v-on:change="change">
<option v-for="option in options" :value="option.id" :key="option.title">
{{ option.title }}
</option>
</select>
</div>
</div>
</template>
<script>
import { mapGetters } from "vuex";
export default {
props: {
cart: {
type: Boolean,
required: false,
},
purType: {
type: Number,
required: false,
},
subType: {
type: Number,
required: false,
},
},
data() {
return {
options: [],
purchase_type: this.purType ? this.purType : null,
subscription_type: this.subType ? this.subType : null,
purchaseTypes: []
};
},
methods: {
change: function (e) {
const { selectedIndex } = e.target.options;
if (selectedIndex > -1) {
const { id } = this.options[selectedIndex];
this.subscription_type = id;
this.setTypes();
return;
}
this.subscription_type = null;
this.setTypes();
},
setOptions: function (purchaseTypeId) {
const item = this.purchaseTypes.filter(
(item) => item.id === purchaseTypeId
)[0];
if (item && item.subscription_types.length) {
if (!this.subscription_type) {
const { id } = item.subscription_types[0];
this.subscription_type = id;
}
this.options = [...item.subscription_types];
this.setTypes();
return;
}
this.subscription_type = null;
this.options = [];
this.setTypes();
},
setTypes: function () {
this.$emit('setTypes', {
purchase_type: this.purchase_type,
subscription_type: this.subscription_type,
});
},
},
async mounted () {
this.purchaseTypes = await this.$strapi.find('purchase-types');
this.setOptions(this.purchase_type);
}
};
</script>
<style scoped>
.subscription_types {
padding: 10px 5px;
border-radius: 4px;
margin-bottom: 20px;
}
</style> |