mirror of https://github.com/4xmen/xshop.git
You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
98 lines
2.6 KiB
Vue
98 lines
2.6 KiB
Vue
<template>
|
|
<div id="area-designer">
|
|
<div class="card mt-2" v-for="(part,p) in partsData">
|
|
<div class="card-header">
|
|
Part {{p+1}}
|
|
</div>
|
|
<div class="part-body">
|
|
<div class="row">
|
|
<template v-for="(valid,i) in valids">
|
|
<div @click="changePart(p,valid.segment,valid.part)" :class="`col-md-3 `+(valid.data.name == part.part?'selected-part':'can-select')" >
|
|
<img class="img-fluid mt-2" :src="imageLink+'/'+valid.segment+'/'+valid.part" alt="screeshot">
|
|
{{valid.part}} [v{{valid.data.version}}]
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
<div class="card-footer">
|
|
<button type="button" class="btn btn-danger" @click="rem(p)">
|
|
<i class="ri-close-line"></i>
|
|
</button>
|
|
</div>
|
|
<input type="hidden" name="parts[]" :value="JSON.stringify(part)" class="form-control">
|
|
</div>
|
|
<div v-if="parts.length < parseInt(area.max)" class="p-2">
|
|
<div class="btn btn-primary w-100" @click="addPart">
|
|
<i class="ri-add-line"></i>
|
|
</div>
|
|
</div>
|
|
<input type="hidden" name="removed" :value="JSON.stringify(removed)" class="form-control">
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "area-designer",
|
|
components: {},
|
|
data: () => {
|
|
return {
|
|
partsData:[],
|
|
removed:[],
|
|
}
|
|
},
|
|
props: {
|
|
valids:{
|
|
default:[],
|
|
type: Array,
|
|
},
|
|
parts:{
|
|
default:[],
|
|
type: Array,
|
|
},
|
|
area:{
|
|
required: true,
|
|
type: Object,
|
|
},
|
|
imageLink:{
|
|
required: true,
|
|
}
|
|
},
|
|
mounted() {
|
|
this.partsData = this.parts;
|
|
},
|
|
computed: {},
|
|
methods: {
|
|
changePart(p,segment,part){
|
|
this.partsData[p].segment = segment;
|
|
this.partsData[p].part = part;
|
|
},
|
|
addPart(){
|
|
this.partsData.push({
|
|
id: null,
|
|
segment: this.valids[0].segment,
|
|
part: this.valids[0].part,
|
|
});
|
|
},
|
|
rem(i){
|
|
if (!confirm('Are sure to remove?')){
|
|
return ;
|
|
}
|
|
this.removed.push(this.partsData[i].id);
|
|
this.partsData.splice(i,1);
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
#area-designer {
|
|
|
|
}
|
|
.selected-part{
|
|
background: #32CD3233;
|
|
}
|
|
.can-select{
|
|
cursor: pointer;
|
|
}
|
|
</style>
|