feat: 项目初始化
This commit is contained in:
tianyongbao
219
src/components/other/fish.vue
Normal file
219
src/components/other/fish.vue
Normal file
@@ -0,0 +1,219 @@
|
||||
<template>
|
||||
<nut-row class="fishBody">
|
||||
<view class="sticky-header">
|
||||
<nut-col :span="24" class="view_f_between" :style="{ padding: '10px' }">
|
||||
<view class="font_28 c_222" @click="cancel">取消</view>
|
||||
<view class="font_28 c_17B4B2" @click="confirm">确定</view>
|
||||
</nut-col>
|
||||
<nut-col :span="24">
|
||||
<nut-searchbar
|
||||
v-model="fishName"
|
||||
max-length="20"
|
||||
placeholder="请输入鱼类名称"
|
||||
clearable
|
||||
background="#efefef"
|
||||
@search="search"
|
||||
@clear="resTypeList"
|
||||
>
|
||||
<template #leftin>
|
||||
<Search2 />
|
||||
</template>
|
||||
<template #rightin>
|
||||
<nut-button type="primary" size="small" @click="search(fishName)"
|
||||
>搜索</nut-button
|
||||
>
|
||||
</template>
|
||||
</nut-searchbar>
|
||||
</nut-col>
|
||||
</view>
|
||||
<nut-col :span="24">
|
||||
<nut-config-provider :theme-vars="themeVars">
|
||||
<nut-category :category="data.category" @change="changeText">
|
||||
<template #default>
|
||||
<nut-checkbox-group
|
||||
ref="group"
|
||||
v-model="props.fishIds"
|
||||
:style="{ marginLeft: '10px' }"
|
||||
>
|
||||
<nut-checkbox
|
||||
:label="item.catId"
|
||||
v-for="item in data.customCategory"
|
||||
shape="button"
|
||||
:style="{ paddingTop: '10px' }"
|
||||
>
|
||||
{{ item.catName }}
|
||||
</nut-checkbox>
|
||||
</nut-checkbox-group>
|
||||
</template>
|
||||
</nut-category>
|
||||
</nut-config-provider>
|
||||
</nut-col>
|
||||
</nut-row>
|
||||
</template>
|
||||
<script setup lang="ts" name="Fish">
|
||||
import { fishList } from "@/api/pond";
|
||||
import { Search2, Left, Photograph, Message } from "@nutui/icons-vue-taro";
|
||||
|
||||
import Taro from "@tarojs/taro";
|
||||
const props = defineProps({
|
||||
// 选中的鱼类
|
||||
fishIds: {
|
||||
type: Array,
|
||||
default: function () {
|
||||
return [];
|
||||
},
|
||||
},
|
||||
});
|
||||
const fishArr = ref<any>([]);
|
||||
const data = reactive({
|
||||
categoryInfo: {},
|
||||
category: [{}],
|
||||
customCategory: [{}],
|
||||
});
|
||||
// 鱼类名称-检索
|
||||
const fishName = ref("");
|
||||
const fishTypeNameMap = ref({
|
||||
1: "常见鱼种",
|
||||
2: "名优鱼",
|
||||
3: "虾蟹类",
|
||||
4: "观赏鱼",
|
||||
5: "海水鱼",
|
||||
6: "贝类",
|
||||
7: "龟鳖类",
|
||||
8: "蛙类",
|
||||
9: "其它",
|
||||
});
|
||||
// 鱼类列表信息
|
||||
const fishArray = ref<any>([]);
|
||||
|
||||
// 主题样式
|
||||
const themeVars = ref({
|
||||
checkboxLabelColor: "#222222",
|
||||
checkboxLabelMarginLeft: "20px",
|
||||
checkboxButtonFontSize: "14px",
|
||||
checkboxButtonBorderRadius: "10px",
|
||||
checkboxButtonBorderColor: "#ccc",
|
||||
});
|
||||
const emit = defineEmits(["cancel", "confirm"]);
|
||||
/** -----------------method start----------------- */
|
||||
onMounted(() => {
|
||||
getFishList();
|
||||
});
|
||||
// 鱼类列表
|
||||
function getFishList() {
|
||||
fishList().then((res: any) => {
|
||||
if (res.statusCode == 200) {
|
||||
fishArray.value = res.data;
|
||||
resTypeList();
|
||||
}
|
||||
});
|
||||
}
|
||||
// 点击文字
|
||||
function changeText(index) {
|
||||
data.customCategory = [].concat(data.categoryInfo.category[index].children);
|
||||
}
|
||||
// 检索鱼类
|
||||
function search(e) {
|
||||
if (e) {
|
||||
data.category = [];
|
||||
const customCategory: any = [];
|
||||
data.categoryInfo.category.forEach((res) => {
|
||||
res.children.forEach((child) => {
|
||||
if (child.catName.includes(e)) {
|
||||
const obj = {
|
||||
catType: 1,
|
||||
catId: child.catId,
|
||||
catName: child.catName,
|
||||
};
|
||||
customCategory.push(obj);
|
||||
}
|
||||
});
|
||||
});
|
||||
data.customCategory = customCategory;
|
||||
} else {
|
||||
resTypeList();
|
||||
}
|
||||
}
|
||||
// 初始化类别列表
|
||||
function resTypeList() {
|
||||
const resList = fishArray.value;
|
||||
// 初始化临时结果容器
|
||||
const typeMap = {};
|
||||
// 遍历数据并按类型进行分组
|
||||
for (const item of resList) {
|
||||
const fishType = item.fishType;
|
||||
const typeName = fishTypeNameMap.value[fishType];
|
||||
if (!typeMap[fishType]) {
|
||||
typeMap[fishType] = {
|
||||
id: typeName,
|
||||
name: typeName,
|
||||
children: [],
|
||||
};
|
||||
}
|
||||
typeMap[fishType].children.push({
|
||||
id: item.id,
|
||||
name: item.fishName,
|
||||
catId: item.id,
|
||||
catName: item.fishName,
|
||||
});
|
||||
}
|
||||
const category: any = [];
|
||||
const customCategory: any = [];
|
||||
for (let [key, value] of Object.entries(fishTypeNameMap.value)) {
|
||||
category.push({ catId: value, catName: value });
|
||||
const arr = {};
|
||||
arr["catId"] = String(value);
|
||||
arr["catName"] = value;
|
||||
arr["catType"] = 1;
|
||||
const children: any = [];
|
||||
resList.forEach((item) => {
|
||||
if (item.fishType == key) {
|
||||
children.push({ catId: String(item.id), catName: item.fishName });
|
||||
}
|
||||
});
|
||||
arr["children"] = children;
|
||||
customCategory.push(arr);
|
||||
}
|
||||
// 转换为所需数组格式
|
||||
const dataArr = Object.values(typeMap);
|
||||
fishArr.value = dataArr;
|
||||
data.category = category;
|
||||
data.customCategory = customCategory[0].children;
|
||||
data.categoryInfo = {
|
||||
level: 1,
|
||||
showPic: true,
|
||||
catType: 1,
|
||||
category: customCategory,
|
||||
};
|
||||
}
|
||||
// 取消
|
||||
function cancel() {
|
||||
emit("cancel", "");
|
||||
}
|
||||
// 确定
|
||||
function confirm() {
|
||||
const resList = fishArray.value;
|
||||
const fishNameList = [];
|
||||
resList.forEach((item) => {
|
||||
if (props.fishIds.includes(String(item.id))) {
|
||||
fishNameList.push(item.fishName);
|
||||
}
|
||||
});
|
||||
const fishInfo = fishNameList.length > 0 ? fishNameList.join("，") : "";
|
||||
emit("confirm", { res: props.fishIds, fishInfo });
|
||||
}
|
||||
/** -----------------method end------------------- */
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.fishBody{
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.sticky-header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 1000;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user