254 lines
6.4 KiB
Vue
254 lines
6.4 KiB
Vue
<template>
|
||
<view class="class_select">
|
||
<view class="classList">
|
||
<view
|
||
class="classItem"
|
||
@click="changeClass(item.id)"
|
||
v-for="item in classList"
|
||
>
|
||
<image class="classIcon" :src="item.photo" />
|
||
<view class="text" :class="{ activeText: item.id == classId }">{{
|
||
item.title
|
||
}}</view>
|
||
</view>
|
||
</view>
|
||
<view class="secondClass">
|
||
<view class="secondClassTitle">筛选项</view>
|
||
<view class="secondClassList">
|
||
<view
|
||
class="secondClassItem"
|
||
:class="{ secondClassItemActive: secondClassId.includes(item.id) }"
|
||
v-for="item in secondClassList"
|
||
@click="changeSecondClass(item.id)"
|
||
>{{ item.title }}</view
|
||
>
|
||
</view>
|
||
</view>
|
||
<view class="tips">
|
||
<text class="red">注意：</text>
|
||
<text>
|
||
商家可按需发布工位出租的信息。若不同服务（如快洗与烫发）工位价格存在差异，需分别发布对应工位出租信息；若价格相同，则仅需发布一次工位出租信息，并同时勾选“快洗”和“烫发”两项服务。</text
|
||
>
|
||
</view>
|
||
<view class="fixBottomBtn">
|
||
<view class="btn" @click="handleClose">确定</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: "class_select",
|
||
|
||
props: {
|
||
classId: {
|
||
type: Number,
|
||
},
|
||
secondClassId: {
|
||
type: Array,
|
||
},
|
||
},
|
||
data() {
|
||
return {
|
||
secondClassList: [],
|
||
classList: [],
|
||
};
|
||
},
|
||
created() {
|
||
this.getClass();
|
||
},
|
||
computed: {},
|
||
watch: {
|
||
secondClassId() {
|
||
if (
|
||
!this.secondClassId ||
|
||
(this.secondClassId && this.secondClassId.length == 0)
|
||
)
|
||
return;
|
||
this.getClass();
|
||
let typeText = "";
|
||
if (this.classId) {
|
||
this.classList.forEach((item) => {
|
||
if (item.id == this.classId) {
|
||
typeText += item.title;
|
||
}
|
||
});
|
||
}
|
||
if (this.secondClassId && this.secondClassId.length > 0) {
|
||
this.secondClassList.forEach((item) => {
|
||
if (this.secondClassId.includes(item.id)) {
|
||
typeText = typeText + " " + item.title;
|
||
}
|
||
});
|
||
}
|
||
this.$emit("changeTypeText", typeText);
|
||
},
|
||
},
|
||
methods: {
|
||
handleClose() {
|
||
let typeText = "";
|
||
if (this.classId) {
|
||
this.classList.forEach((item) => {
|
||
if (item.id == this.classId) {
|
||
typeText += item.title;
|
||
}
|
||
});
|
||
}
|
||
if (this.secondClassId) {
|
||
this.secondClassList.forEach((item) => {
|
||
if (this.secondClassId.includes(item.id)) {
|
||
typeText = typeText + "、" + item.title;
|
||
}
|
||
});
|
||
}
|
||
this.$emit("closeClassSelect", typeText);
|
||
},
|
||
changeClass(id) {
|
||
if (id == this.classId) return;
|
||
this.$emit("changeClass", id);
|
||
this.$emit("changeSecondClass", []);
|
||
this.getSecondClass(id);
|
||
},
|
||
changeSecondClass(id) {
|
||
const ids = this.secondClassId;
|
||
const isCurArray = hasMatchingId(ids, this.secondClassList);
|
||
if (!isCurArray) {
|
||
this.$emit("changeSecondClass", [id]);
|
||
} else {
|
||
if (ids.includes(id)) {
|
||
this.$emit(
|
||
"changeSecondClass",
|
||
ids.filter((item) => item != id)
|
||
);
|
||
} else {
|
||
this.$emit("changeSecondClass", [...ids, id]);
|
||
}
|
||
}
|
||
function hasMatchingId(numberArray, objectArray) {
|
||
// 检查输入是否为有效数组
|
||
if (!Array.isArray(numberArray) || !Array.isArray(objectArray)) {
|
||
return false;
|
||
}
|
||
// 遍历数字数组，检查是否有任何数字匹配对象数组中的id
|
||
return numberArray.some((number) => {
|
||
// 检查对象数组中是否有对象的id与当前数字匹配
|
||
return objectArray.some((obj) => {
|
||
// 确保对象有id属性，并且转换为数字进行比较（处理可能的字符串id）
|
||
return obj && obj.id !== undefined && Number(obj.id) === number;
|
||
});
|
||
});
|
||
}
|
||
},
|
||
getSecondClass(id) {
|
||
console.log("获取二级分类", item);
|
||
const item = this.classList.find((it) => it.id == id);
|
||
this.secondClassList = item.data;
|
||
},
|
||
getClass() {
|
||
this.classList = this.$store.state.workSpaceSJClassList;
|
||
if (!this.classId) {
|
||
|
||
this.changeClass(this.classList[0].id);
|
||
} else {
|
||
this.getSecondClass(this.classId);
|
||
}
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
.class_select {
|
||
width: 100%;
|
||
.classList {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 28rpx 30rpx 43rpx;
|
||
gap: 14rpx;
|
||
overflow-x: auto;
|
||
.classItem {
|
||
background: #ffffff;
|
||
border-radius: 20rpx;
|
||
width: 140rpx;
|
||
height: 140rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 20rpx;
|
||
flex-shrink: 0;
|
||
.classIcon {
|
||
width: 64rpx;
|
||
height: 64rpx;
|
||
}
|
||
.text {
|
||
font-size: 24rpx;
|
||
color: #333333;
|
||
}
|
||
.activeText {
|
||
color: #FF4767;
|
||
}
|
||
}
|
||
}
|
||
.secondClass {
|
||
background-color: #fff;
|
||
padding: 30rpx 0 40rpx 30rpx;
|
||
.secondClassTitle {
|
||
font-weight: 500;
|
||
font-size: 30rpx;
|
||
color: #333333;
|
||
}
|
||
.secondClassList {
|
||
display: flex;
|
||
margin-top: 30rpx;
|
||
flex-wrap: wrap;
|
||
gap: 19rpx;
|
||
.secondClassItem {
|
||
width: 214rpx;
|
||
height: 64rpx;
|
||
background: #f5f5f5;
|
||
border-radius: 34rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
border: 2rpx solid transparent;
|
||
}
|
||
.secondClassItemActive {
|
||
border: 1rpx solid #FF4767;
|
||
background: rgba(252, 67, 124, 0.1);
|
||
color: #FF4767;
|
||
}
|
||
}
|
||
}
|
||
.tips {
|
||
background-color: #fff;
|
||
padding: 30rpx 48rpx 30rpx;
|
||
margin-top: 30rpx;
|
||
font-size: 26rpx;
|
||
.red {
|
||
color: #FF4767;
|
||
}
|
||
}
|
||
.fixBottomBtn {
|
||
position: fixed;
|
||
bottom: 0;
|
||
width: 100%;
|
||
height: 166rpx;
|
||
background-color: #fff;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
box-sizing: border-box;
|
||
padding: 0 24rpx 0 30rpx;
|
||
.btn {
|
||
width: 100%;
|
||
height: 39rpx;
|
||
border: 2rpx solid #FF4767;
|
||
border-radius: 39rpx;
|
||
font-size: 30rpx;
|
||
color: #FF4767;
|
||
}
|
||
}
|
||
}
|
||
</style>
|