|
|
<script setup>
|
|
|
/**
|
|
|
* name：
|
|
|
* user：sa0ChunLuyu
|
|
|
* date：2024年9月11日 19:24:50
|
|
|
*/
|
|
|
import { ref } from "vue";
|
|
|
import { $api, $response } from "@/api";
|
|
|
import { onShow } from "@dcloudio/uni-app";
|
|
|
import { useStore } from "@/store";
|
|
|
const $store = useStore();
|
|
|
|
|
|
let leftList = ref({}); // 左侧列表
|
|
|
let tabIndex = ref(""); // 默认选中
|
|
|
let rightLeft = ref([]); // 右侧列表
|
|
|
let selectList = ref([]); // 选中列表
|
|
|
|
|
|
const getAllItems = async (e) => {
|
|
|
const response = await $api("GetAllItems", {
|
|
|
search: e?.value,
|
|
|
});
|
|
|
$response(response, () => {
|
|
|
leftList.value = response.data.list;
|
|
|
if (Object.keys(leftList.value).length) {
|
|
|
let keys = Object.keys(leftList.value);
|
|
|
tabIndex.value = keys[0];
|
|
|
rightLeft.value = leftList.value[keys[0]].children;
|
|
|
}
|
|
|
});
|
|
|
};
|
|
|
|
|
|
const mountedAction = () => {
|
|
|
getAllItems();
|
|
|
};
|
|
|
|
|
|
const config_ref = ref(null);
|
|
|
const configRef = (e) => {
|
|
|
if (!config_ref.value) {
|
|
|
config_ref.value = e;
|
|
|
mountedAction();
|
|
|
}
|
|
|
};
|
|
|
|
|
|
onShow(() => {
|
|
|
if (!!config_ref.value) {
|
|
|
mountedAction();
|
|
|
}
|
|
|
});
|
|
|
</script>
|
|
|
<template>
|
|
|
<view>
|
|
|
<view v-if="!!$store.config">
|
|
|
<view :ref="configRef"></view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="bg-#d8edf2">
|
|
|
<uni-search-bar
|
|
|
class="search"
|
|
|
radius="100"
|
|
|
placeholder="请输入关键字搜索"
|
|
|
@clear="getAllItems()"
|
|
|
@cancel="getAllItems()"
|
|
|
@confirm="getAllItems"
|
|
|
/>
|
|
|
</view>
|
|
|
<view class="mt-20rpx flex min-h-100%">
|
|
|
<view class="min-w-214rpx max-w-214rpx mr-20rpx h-100% text-center">
|
|
|
<view
|
|
|
class="w-100% rounded-r-full text-#0E0E0E text-25rpx px-20rpx w-100% center h-84rpx box-border"
|
|
|
v-for="(item, index) in leftList"
|
|
|
:key="index"
|
|
|
:class="{
|
|
|
'bg-gradient-to-r from-#edf6f5 to-#bbdfe2': tabIndex == index,
|
|
|
}"
|
|
|
@click="(tabIndex = index), (rightLeft = item.children)"
|
|
|
>
|
|
|
{{ item.title }}
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="grow h-100% bg-#fff">
|
|
|
<view
|
|
|
v-for="(item, index) in rightLeft"
|
|
|
:key="index"
|
|
|
:class="{
|
|
|
'!b-0': index == rightLeft.length - 1,
|
|
|
}"
|
|
|
class="flex justify-between center py-30rpx px-20rpx b-b-1px b-b-solid b-b-#e5e5e5"
|
|
|
@click="
|
|
|
() => {
|
|
|
selectList.push(item.id);
|
|
|
}
|
|
|
"
|
|
|
>
|
|
|
<text class="w-40% text-#0E0E0E text-25rpx">{{ item.title }}</text>
|
|
|
<view class="w-50% items-center flex justify-end">
|
|
|
<text class="text-#EC3D15 text-26rpx mr-40rpx"
|
|
|
>¥ {{ item.price }}</text
|
|
|
>
|
|
|
<view
|
|
|
:class="{
|
|
|
'!bg-#EEA61E !b-#EEA61E': selectList.includes(item.id),
|
|
|
}"
|
|
|
class="w-24rpx h-24rpx b-1 b-solid b-#DCDCDC bg-#F8F8F8 rounded-3rpx center"
|
|
|
>
|
|
|
<image
|
|
|
v-if="selectList.includes(item.id)"
|
|
|
class="w-20rpx"
|
|
|
src="@/static/assets/select.png"
|
|
|
mode="widthFix"
|
|
|
/>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</template>
|
|
|
<style scoped>
|
|
|
.search > .uni-searchbar__box {
|
|
|
justify-content: flex-start !important;
|
|
|
}
|
|
|
</style>
|