2022-12-20 22:17:12 +00:00
|
|
|
|
<template>
|
|
|
|
|
|
<div>
|
2022-12-20 23:01:19 +00:00
|
|
|
|
<div class="row">
|
2023-06-11 19:20:39 +00:00
|
|
|
|
|
2022-12-20 22:17:12 +00:00
|
|
|
|
<div class="col-12">
|
2023-02-27 16:51:33 +00:00
|
|
|
|
<h4 class="text-center fw-bold pt-5">{{ t('Do your headphones have ANC?') }}</h4>
|
|
|
|
|
|
<h6 class="text-center text-muted">{{t('What’s that?')}}</h6>
|
2022-12-20 22:17:12 +00:00
|
|
|
|
</div>
|
2023-02-03 09:27:36 +00:00
|
|
|
|
<div class="col-12 text-center">
|
|
|
|
|
|
<div class="d-flex justify-content-center ">
|
2023-06-11 19:20:39 +00:00
|
|
|
|
<a @click.prevent="saveSetting('No')" href="/onboarding/onboarding3" class="checkmark pt-2 px-1 d-block d-sm-inline-block d-inline-block">
|
2023-01-03 22:38:43 +00:00
|
|
|
|
<input type="radio" class="btn-check" name="options-outlined" id="success-outlined1" autocomplete="off" >
|
2023-03-06 20:11:13 +00:00
|
|
|
|
<label class="btn pt-4 checklabel" for="success-outlined1">
|
2023-02-15 03:36:51 +00:00
|
|
|
|
<svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
|
|
|
|
<g clip-path="url(#clip0_73_763)">
|
|
|
|
|
|
<path d="M15.4874 7.1624C15.4358 7.17178 15.3843 7.18584 15.3374 7.1999C14.7796 7.32647 14.3858 7.82803 14.3999 8.3999V51.5999C14.3952 52.0312 14.6202 52.4343 14.9952 52.6546C15.3702 52.8702 15.8296 52.8702 16.2046 52.6546C16.5796 52.4343 16.8046 52.0312 16.7999 51.5999V8.3999C16.8139 8.05303 16.6733 7.72022 16.4249 7.48584C16.1718 7.24678 15.8296 7.12959 15.4874 7.1624ZM44.2874 7.1624C44.2358 7.17178 44.1843 7.18584 44.1374 7.1999C43.5796 7.32647 43.1858 7.82803 43.1999 8.3999V51.5999C43.1952 52.0312 43.4202 52.4343 43.7952 52.6546C44.1702 52.8702 44.6296 52.8702 45.0046 52.6546C45.3796 52.4343 45.6046 52.0312 45.5999 51.5999V8.3999C45.6139 8.05303 45.4733 7.72022 45.2249 7.48584C44.9718 7.24678 44.6296 7.12959 44.2874 7.1624ZM8.28738 17.9624C8.23581 17.9718 8.18425 17.9858 8.13738 17.9999C7.57956 18.1265 7.18581 18.628 7.19988 19.1999V40.7999C7.19519 41.2312 7.42019 41.6343 7.79519 41.8546C8.17019 42.0702 8.62956 42.0702 9.00456 41.8546C9.37956 41.6343 9.60456 41.2312 9.59988 40.7999V19.1999C9.61394 18.853 9.47331 18.5202 9.22488 18.2858C8.97175 18.0468 8.62956 17.9296 8.28738 17.9624ZM51.4874 17.9624C51.4358 17.9718 51.3843 17.9858 51.3374 17.9999C50.7796 18.1265 50.3858 18.628 50.3999 19.1999V40.7999C50.3952 41.2312 50.6202 41.6343 50.9952 41.8546C51.3702 42.0702 51.8296 42.0702 52.2046 41.8546C52.5796 41.6343 52.8046 41.2312 52.7999 40.7999V19.1999C52.8139 18.853 52.6733 18.5202 52.4249 18.2858C52.1718 18.0468 51.8296 17.9296 51.4874 17.9624ZM22.6874 19.1624C22.6358 19.1718 22.5843 19.1858 22.5374 19.1999C21.9796 19.3265 21.5858 19.828 21.5999 20.3999V29.9999V39.5999C21.5952 40.0312 21.8202 40.4343 22.1952 40.6546C22.5702 40.8702 23.0296 40.8702 23.4046 40.6546C23.7796 40.4343 24.0046 40.0312 23.9999 39.5999V20.3999C24.0139 20.053 23.8733 19.7202 23.6249 19.4858C23.3718 19.2468 23.0296 19.1296 22.6874 19.1624ZM37.0874 19.1624C37.0358 19.1718 36.9843 19.1858 36.9374 19.1999C36.3796 19.3265 35.9858 19.828 35.9999 20.3999V39.5999C35.9952 40.0312 36.2202 40.4343 36.5952 40.6546C36.9702 40.8702 37.4296 40.8702 37.8046 40.6546C38.1796 40.4343 38.4046 40.0312 38.3999 39.5999V20.3999C38.4139 20.053 38.2733 19.7202 38.0249 19.4858C37.7718 19.2468 37.4296 19.1296 37.0874 19.1624ZM1.08738 25.1624C1.03581 25.1718 0.984252 25.1858 0.937377 25.1999C0.379564 25.3265 -0.0141859 25.828 -0.000123334 26.3999V33.5999C-0.00481083 34.0312 0.220189 34.4343 0.59519 34.6546C0.97019 34.8702 1.42956 34.8702 1.80456 34.6546C2.17956 34.4343 2.40456 34.0312 2.39988 33.5999V26.3999C2.41394 26.053 2.27331 25.7202 2.02488 25.4858C1.77175 25.2468 1.42956 25.1296 1.08738 25.1624ZM29.8874 25.1624C29.8358 25.1718 29.7843 25.1858 29.7374 25.1999C29.1796 25.3265 28.7858 25.828 28.7999 26.3999V33.5999C28.7952 34.0312 29.0202 34.4343 29.3952 34.6546C29.7702 34.8702 30.2296 34.8702 30.6046 34.6546C30.9796 34.4343 31.2046 34.0312 31.1999 33.5999V26.3999C31.2139 26.053 31.0733 25.7202 30.8249 25.4858C30.5718 25.2468 30.2296 25.1296 29.8874 25.1624ZM58.6874 25.1624C58.6358 25.1718 58.5843 25.1858 58.5374 25.1999C57.9796 25.3265 57.5858 25.828 57.5999 26.3999V33.5999C57.5952 34.0312 57.8202 34.4343 58.1952 34.6546C58.5702 34.8702 59.0296 34.8702 59.4046 34.6546C59.7796 34.4343 60.0046 34.0312 59.9999 33.5999V26.3999C60.0139 26.053 59.8733 25.7202 59.6249 25.4858C59.3718 25.2468 59.0296 25.1296 58.6874 25.1624Z" fill="white"/>
|
|
|
|
|
|
<rect x="5.47949" y="2.36826" width="73.529" height="4.4" rx="2.2" transform="rotate(45 5.47949 2.36826)" fill="white" stroke="#E9C046" stroke-width="2"/>
|
|
|
|
|
|
</g>
|
|
|
|
|
|
<defs>
|
|
|
|
|
|
<clipPath id="clip0_73_763">
|
|
|
|
|
|
<rect width="60" height="60" fill="white"/>
|
|
|
|
|
|
</clipPath>
|
|
|
|
|
|
</defs>
|
2022-12-27 21:19:12 +00:00
|
|
|
|
</svg>
|
2023-02-15 03:36:51 +00:00
|
|
|
|
|
2023-02-27 16:51:33 +00:00
|
|
|
|
<p class=" text-center">{{t("No")}}</p>
|
2022-12-27 21:19:12 +00:00
|
|
|
|
</label>
|
2023-02-15 03:36:51 +00:00
|
|
|
|
</a>
|
2022-12-20 22:17:12 +00:00
|
|
|
|
|
2023-06-11 19:20:39 +00:00
|
|
|
|
<a @click.prevent="saveSetting('Yes')" href="/onboarding/onboarding3" class="checkmark pt-2 px-1 d-inline-block">
|
2022-12-27 21:19:12 +00:00
|
|
|
|
<input type="radio" class="btn-check checkmark" name="options-outlined" id="danger-outlined1" autocomplete="off">
|
2023-03-06 20:11:13 +00:00
|
|
|
|
<label class="btn checklabel ms-0 ms-sm-3 pt-4" for="danger-outlined1">
|
2023-01-04 20:54:06 +00:00
|
|
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="60" height="60" viewBox="0 0 60 46" fill="none">
|
2022-12-27 21:19:12 +00:00
|
|
|
|
<path d="M15.4874 0.162403C15.4358 0.171779 15.3843 0.18584 15.3374 0.199903C14.7796 0.326466 14.3858 0.828029 14.3999 1.3999V44.5999C14.3952 45.0312 14.6202 45.4343 14.9952 45.6546C15.3702 45.8702 15.8296 45.8702 16.2046 45.6546C16.5796 45.4343 16.8046 45.0312 16.7999 44.5999V1.3999C16.8139 1.05303 16.6733 0.720216 16.4249 0.48584C16.1718 0.246778 15.8296 0.12959 15.4874 0.162403ZM44.2874 0.162403C44.2358 0.171779 44.1843 0.18584 44.1374 0.199903C43.5796 0.326466 43.1858 0.828029 43.1999 1.3999V44.5999C43.1952 45.0312 43.4202 45.4343 43.7952 45.6546C44.1702 45.8702 44.6296 45.8702 45.0046 45.6546C45.3796 45.4343 45.6046 45.0312 45.5999 44.5999V1.3999C45.6139 1.05303 45.4733 0.720216 45.2249 0.48584C44.9718 0.246778 44.6296 0.12959 44.2874 0.162403ZM8.28738 10.9624C8.23581 10.9718 8.18425 10.9858 8.13738 10.9999C7.57956 11.1265 7.18581 11.628 7.19988 12.1999V33.7999C7.19519 34.2312 7.42019 34.6343 7.79519 34.8546C8.17019 35.0702 8.62956 35.0702 9.00456 34.8546C9.37956 34.6343 9.60456 34.2312 9.59988 33.7999V12.1999C9.61394 11.853 9.47331 11.5202 9.22488 11.2858C8.97175 11.0468 8.62956 10.9296 8.28738 10.9624ZM51.4874 10.9624C51.4358 10.9718 51.3843 10.9858 51.3374 10.9999C50.7796 11.1265 50.3858 11.628 50.3999 12.1999V33.7999C50.3952 34.2312 50.6202 34.6343 50.9952 34.8546C51.3702 35.0702 51.8296 35.0702 52.2046 34.8546C52.5796 34.6343 52.8046 34.2312 52.7999 33.7999V12.1999C52.8139 11.853 52.6733 11.5202 52.4249 11.2858C52.1718 11.0468 51.8296 10.9296 51.4874 10.9624ZM22.6874 12.1624C22.6358 12.1718 22.5843 12.1858 22.5374 12.1999C21.9796 12.3265 21.5858 12.828 21.5999 13.3999V22.9999V32.5999C21.5952 33.0312 21.8202 33.4343 22.1952 33.6546C22.5702 33.8702 23.0296 33.8702 23.4046 33.6546C23.7796 33.4343 24.0046 33.0312 23.9999 32.5999V13.3999C24.0139 13.053 23.8733 12.7202 23.6249 12.4858C23.3718 12.2468 23.0296 12.1296 22.6874 12.1624ZM37.0874 12.1624C37.0358 12.1718 36.9843 12.1858 36.9374 12.1999C36.3796 12.3265 35.9858 12.828 35.9999 13.3999V32.5999C35.9952 33.0312 36.2202 33.4343 36.5952 33.6546C36.9702 33.8702 37.4296 33.8702 37.8046 33.6546C38.1796 33.4343 38.4046 33.0312 38.3999 32.5999V13.3999C38.4139 13.053 38.2733 12.7202 38.0249 12.4858C37.7718 12.2468 37.4296 12.1296 37.0874 12.1624ZM1.08738 18.1624C1.03581 18.1718 0.984252 18.1858 0.937377 18.1999C0.379564 18.3265 -0.0141859 18.828 -0.000123334 19.3999V26.5999C-0.00481083 27.0312 0.220189 27.4343 0.59519 27.6546C0.97019 27.8702 1.42956 27.8702 1.80456 27.6546C2.17956 27.4343 2.40456 27.0312 2.39988 26.5999V19.3999C2.41394 19.053 2.27331 18.7202 2.02488 18.4858C1.77175 18.2468 1.42956 18.1296 1.08738 18.1624ZM29.8874 18.1624C29.8358 18.1718 29.7843 18.1858 29.7374 18.1999C29.1796 18.3265 28.7858 18.828 28.7999 19.3999V26.5999C28.7952 27.0312 29.0202 27.4343 29.3952 27.6546C29.7702 27.8702 30.2296 27.8702 30.6046 27.6546C30.9796 27.4343 31.2046 27.0312 31.1999 26.5999V19.3999C31.2139 19.053 31.0733 18.7202 30.8249 18.4858C30.5718 18.2468 30.2296 18.1296 29.8874 18.1624ZM58.6874 18.1624C58.6358 18.1718 58.5843 18.1858 58.5374 18.1999C57.9796 18.3265 57.5858 18.828 57.5999 19.3999V26.5999C57.5952 27.0312 57.8202 27.4343 58.1952 27.6546C58.5702 27.8702 59.0296 27.8702 59.4046 27.6546C59.7796 27.4343 60.0046 27.0312 59.9999 26.5999V19.3999C60.0139 19.053 59.8733 18.7202 59.6249 18.4858C59.3718 18.2468 59.0296 18.1296 58.6874 18.1624Z" fill="white"/>
|
|
|
|
|
|
</svg>
|
2023-02-27 16:51:33 +00:00
|
|
|
|
<p class="text-center">{{t("Yes")}}</p>
|
2022-12-27 21:19:12 +00:00
|
|
|
|
</label>
|
2023-02-15 03:36:51 +00:00
|
|
|
|
</a>
|
2022-12-27 21:19:12 +00:00
|
|
|
|
</div>
|
2022-12-20 22:17:12 +00:00
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
2022-12-23 14:42:30 +00:00
|
|
|
|
|
2022-12-20 22:17:12 +00:00
|
|
|
|
</div>
|
|
|
|
|
|
</template>
|
|
|
|
|
|
<script>
|
2023-01-01 18:33:52 +00:00
|
|
|
|
import {useCounterStore} from '@/stores/counter';
|
|
|
|
|
|
import {mapState,mapActions} from "pinia";
|
2022-12-20 22:17:12 +00:00
|
|
|
|
export default {
|
2023-02-27 16:51:33 +00:00
|
|
|
|
|
2023-02-27 04:54:49 +00:00
|
|
|
|
setup() {
|
|
|
|
|
|
const { t } = useI18n()
|
|
|
|
|
|
const localePath = useLocalePath()
|
|
|
|
|
|
|
|
|
|
|
|
return {
|
|
|
|
|
|
t,
|
|
|
|
|
|
localePath,
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
2023-01-03 22:38:43 +00:00
|
|
|
|
mounted() {
|
|
|
|
|
|
this.increment(50);
|
|
|
|
|
|
},
|
2023-01-01 18:33:52 +00:00
|
|
|
|
computed:{...mapState(useCounterStore,['count'])},
|
2022-12-20 23:01:19 +00:00
|
|
|
|
data(){
|
|
|
|
|
|
return{
|
|
|
|
|
|
bar_val:25,
|
2023-02-15 03:36:51 +00:00
|
|
|
|
form:{
|
|
|
|
|
|
anc_type:'No',
|
|
|
|
|
|
}
|
2022-12-20 23:01:19 +00:00
|
|
|
|
}
|
2023-02-15 03:36:51 +00:00
|
|
|
|
},
|
|
|
|
|
|
methods:{
|
|
|
|
|
|
...mapActions(useCounterStore,['increment']),
|
|
|
|
|
|
saveSetting(value){
|
|
|
|
|
|
this.form.anc_type=value;
|
|
|
|
|
|
this.$axios.post('/api/update-setting',this.form).then(({data})=>{
|
|
|
|
|
|
console.log(data);
|
|
|
|
|
|
if(data.success){
|
2023-06-11 19:20:39 +00:00
|
|
|
|
//this.$toast.success(data.message);
|
2023-02-27 04:54:49 +00:00
|
|
|
|
this.$router.push(this.localePath('/onboarding/onboarding3'));
|
2023-02-15 03:36:51 +00:00
|
|
|
|
}
|
|
|
|
|
|
}).catch((e)=>{
|
|
|
|
|
|
this.$toast.error("something went wrong while saving...");
|
|
|
|
|
|
})
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
|
2022-12-20 22:17:12 +00:00
|
|
|
|
}
|
|
|
|
|
|
</script>
|
|
|
|
|
|
|
2022-12-27 21:19:12 +00:00
|
|
|
|
<style scoped>
|
2022-12-20 22:17:12 +00:00
|
|
|
|
.bar{
|
2023-03-07 04:28:32 +00:00
|
|
|
|
background-color: #e9c046 !important;
|
2022-12-20 22:17:12 +00:00
|
|
|
|
}
|
2022-12-27 21:19:12 +00:00
|
|
|
|
.checklabel:hover{
|
|
|
|
|
|
border-color: #e9c046;
|
|
|
|
|
|
}
|
|
|
|
|
|
.checklabel {
|
|
|
|
|
|
color: #e9c046 !important;
|
|
|
|
|
|
border: 1px solid #e9c046;
|
|
|
|
|
|
}
|
|
|
|
|
|
.checkmark .checklabel svg path{
|
|
|
|
|
|
/*background-color: white;*/
|
|
|
|
|
|
fill: #e9c046;
|
|
|
|
|
|
}
|
|
|
|
|
|
.checkmark input:checked ~ .checklabel {
|
|
|
|
|
|
background-color: #e9c046;
|
|
|
|
|
|
border: 1px solid #e9c046;
|
|
|
|
|
|
color: #f4f5f7 !important;
|
|
|
|
|
|
}
|
|
|
|
|
|
.checkmark input:checked ~ .checklabel svg path {
|
|
|
|
|
|
fill: white;
|
2023-01-03 22:38:43 +00:00
|
|
|
|
}
|
|
|
|
|
|
.checkmark input:hover ~ .checklabel {
|
|
|
|
|
|
background-color: #e9c046;
|
|
|
|
|
|
border: 1px solid #e9c046;
|
|
|
|
|
|
color: #f4f5f7 !important;
|
|
|
|
|
|
}
|
|
|
|
|
|
.checkmark input:hover ~ .checklabel svg path {
|
|
|
|
|
|
fill: white;
|
2022-12-27 21:19:12 +00:00
|
|
|
|
}
|
2022-12-20 22:17:12 +00:00
|
|
|
|
</style>
|
