uvui使用

<template>
	<view>
	    <!-- 下拉菜单，设置value可以不是蓝色 -->
	    <uv-drop-down
	      sign="dropDown_1"
	      :defaultValue="[0, '0', 'all']">
	      <uv-drop-down-item
	        name="order"
	        type="2"
	        :label="order.label"
	        :value="order.value">
	      </uv-drop-down-item>
	    </uv-drop-down>
	    <!-- 弹窗内容 -->
	    <uv-drop-down-popup
	      sign="dropDown_1"
		  :currentDropItem="order"
	      @clickItem="selectItem">
	    </uv-drop-down-popup>
	</view>
</template>
<script setup>
import { ref,onMounted,computed } from 'vue';

// 排序选项
const order = ref({
  label: '综合排序',
  value: 'all',
  activeIndex: 0,
  color: '#333',
  activeColor: '#2878ff',
  child: [
    { label: '综合排序', value: 'all' },
    { label: '最新发布', value: 'new' },
    { label: '低价优先', value: 'money' }
  ]
});

// 当前激活的下拉项
const activeName = ref('order');

// 选择排序项
const selectItem = (item) => {
	order.value.value = item.value;
	order.value.label = item.label;
	// 这里要触发一个重新请求的逻辑
};

</script>

<template>
	<view>
		<!-- 下拉菜单 -->
		<uv-drop-down
		  sign="sellDropDown_1"
		  :defaultValue="[0, '0', 'all']">
		  <uv-drop-down-item
		    name="dropModel"
		    type="2"
		    :label="dropModel.label"
			value="0"
			@click="toggleDrop('dropModel')"
		  >
		  </uv-drop-down-item>
		  <uv-drop-down-item
		    name="dropNew"
		    type="2"
			value="0"
		    :label="dropNew.label"
			@click="toggleDrop('dropNew')"
		  >
		  </uv-drop-down-item>
		  <uv-drop-down-item
		    name="dropClass"
		    type="2"
			value="0"
		    :label="dropClass.label"
			@click="toggleDrop('dropClass')"
		  >
		  </uv-drop-down-item>
		</uv-drop-down>
		<!-- 弹窗内容 -->
		<uv-drop-down-popup
		  sign="sellDropDown_1"
		  :currentDropItem="currentDrop"
		  @clickItem="selectItem">
		</uv-drop-down-popup>
	</view>
</template>

<script setup>
import { ref,onMounted,computed } from 'vue';
import { request } from '@/common/request.js';

// 模型排序选项
const dropModel = ref({
  label: '所有型号',
  activeIndex: 0, //激活展开菜单的排序
  color: '#333',
  activeColor: '#2878ff',
  child: [] //这里字段，要从setDropModel中赋值
});

// 期现排序选项
const dropNew = ref({
  label: '所有期现',
  activeIndex: 3, //激活展开菜单的排序
  color: '#333',
  activeColor: '#2878ff',
  child: [
	  {label: "现货"},
	  {label: "期货"},
	  {label: "二手"},
	  {label: "所有期现"}
  ]
});

// 类型排序选项
const dropClass = ref({
  label: '所有类型',
  activeIndex: 3, //激活展开菜单的排序
  color: '#333',
  activeColor: '#2878ff',
  child: [
	  {label: "GPU"},
	  {label: "整机"},
	  {label: "模组"},
	  {label: "所有类型"}
  ]
});

// 处理 gpu列表的函数
const setDropModel = (data) => {
	// 初始化结果数组，包含第一个固定值
	const result = [];
	
	// 遍历 JSON 对象的每一个键值对
	for (const key in data) {
	    if (data.hasOwnProperty(key)) {
	      // 遍历数组值，将其转换为 { label: '值' } 的格式
	      data[key].forEach((item) => {
	        result.push({ label: item });
	      });
	    }
	}
	result.push({ label: '所有型号' });
	// 将处理的结果赋值给dropModel
	dropModel.value.child = result;
	// 取最后一个值的序号
	dropModel.value.activeIndex = result.length - 1;
};


// 当前显示的展开菜单项
const currentDrop = ref([]);

// 切换下拉菜单
const toggleDrop = (name) => {
  if (name === 'dropModel') {
    currentDrop.value = dropModel.value;
  } else if (name === 'dropNew') {
    currentDrop.value = dropNew.value;
  } else {
    currentDrop.value = dropClass.value;
  };
};

// 选择子项内容后的触发事件
const selectItem = (item) => {
  if (currentDrop.value === dropModel.value) {
    dropModel.value.label = item.label;
  } else if (currentDrop.value === dropNew.value) {
    dropNew.value.label = item.label;
  } else if (currentDrop.value === dropClass.value) {
    dropClass.value.label = item.label;
  }
  list.value = [];
  getList(); // 重新加载数据
};

// 加载完成初始化
onMounted(()=>{
	getGpuModel();
	getList();
});
// 请求gpu模型
const getGpuModel = () =>{
	//开始请求
	uni.request({
		url: 'https://file.fyinfor.com/static/gpulist.json?2',
		method: 'GET',
		success: (res) => {
			// 将值将给函数处理
			setDropModel(res.data);
		},
		fail: (err) => {
			//弹出错误
			uni.showToast({
			    title: '获取gpu.json失败',
			    duration: 3000,
			    icon: "none"
			});
		}
	});
	
};
</script>

<view>
	<uv-load-more :line="true" :status="status" loading-text="加载中" loadmore-text="加载更多" nomore-text="到底了"/>
</view>
<script setup>
import { ref,onMounted } from 'vue';
import { onReachBottom } from '@dcloudio/uni-app';
import { request } from '@/common/request.js';

const list = ref([]);
const page = ref(1); // 当前页
const totalPages =ref(0);
const status = ref(''); //加载状态
	
// 下滑到底触发
onReachBottom((e) => {
	console.log('触发到底');
	// 如果是加载前则页码+获取列表
  if (status.value === 'loadmore') {
        page.value++;
		getList();
  };
});

// 加载完成初始化
onMounted(()=>{
	getList();
	
});

const getList = () =>{
	//开始请求
	request('/getSolutionList?class='+dropDownList.value.value+'&page='+page.value,'get')
	.then(data => {
		// 判断data是否有数据,如果有则追加到list
		if (data.list) {
			list.value = list.value.concat(data.list);
		};
		// console.log('返回列表：',list.value)
		totalPages.value=data.totalPages;
		
		// 判断是否到底
		if (page.value >= totalPages.value) {
			status.value = 'nomore';
		} else {
			status.value = 'loadmore';
		}
	});
};

// 选择排序项，这个函数戴代表重新选择了排序
const selectItem = (item) => {
	// 其他逻辑
	list.value = []; // 清空列表重新开始
	getList();
};
</script>

<template>
	<!-- 滑块选择器组件 -->
	<uv-picker ref="picker" :columns="addrsData1" @confirm="confirm" @change="change"></uv-picker>
	<view>
		<!-- 下拉菜单,只是单个按钮用 -->
		<uv-drop-down sign="dropDown_1" :defaultValue="[0, '0', 'all']">
			<uv-drop-down-item type="0" :label="addrTitle" value="0" @click="$refs.picker.open()">
			</uv-drop-down-item>
		</uv-drop-down>
	</view>
</template>

<script setup>
	import {ref,onMounted} from 'vue';
	import {request} from '@/common/request.js';
	// 加载完成初始化
	onMounted(() => {
		getAddrs(); //取地区数据
	});

	// 地区标题
	const addrTitle = ref('所有地区');
	// 城市临时数据,如果要提交数据，就取这里的
	const addrs = ref({
		addr: '所有地区',
		city: '所有城市'
	});

	// 地区数据
	const addrsData1 = ref( []);
	const addrsData2 = ref( []);
	
	const picker = ref(); //引用picker绑定的组件
	// 选择确定后触发的事件
	const confirm =(e) => {
		addrs.value.addr = e.value[0];
		addrs.value.city = e.value[1];
		// 判断标题应该显示的值
		if (addrs.value.city == '所有城市' && addrs.value.addr == '所有地区') {
			addrTitle.value= '所有地区'
		} else if (addrs.value.city != '所有城市' ) {
			addrTitle.value= addrs.value.city
		} else {
			addrTitle.value= addrs.value.addr
		};
	};
	// 滑动改变值触发的事件，该事件会将数据2对应的数据设置为数据1的子数据
	const change = (e) => {
		const { columnIndex , index} = e;
		if (columnIndex === 0) {
			picker.value.setColumnValues(1, addrsData2.value[index])
		};
	};

	// 处理地址的函数
	const setAddrs = (data) =>{
		const addr1 = ['所有地区'];
		const addr2 = [];
		// 首先为addrsData2在顶部追加所有城市
		addrsData2.value.push(['所有城市']);
		// 下面是开始遍历对象
		Object.entries(data).forEach(([key, array]) => {
			// 判断数组是否只有一个值，如果是则是直辖市
			if (array.length > 1) {
				// 如果有多个城市则在城市前添加所有城市
				array.unshift('所有城市');
			};
			// 将市区数组追加给数据2
			addrsData2.value.push(array);
		    addr1.push(key)//向addr1中追加省份
		});
		// 把addr1中的数据赋值给addrsData1
		addrsData1.value.push(addr1);
		// 最后为addrsData1结尾追加所有城市，因为addr1的第二个数据是初始化
		addrsData1.value.push(['所有城市']);
		// console.log('地址1的数据：',addrsData1.value);
		// console.log('地址2的数据：',addrsData2.value);
		// 它们看起来要像这样:
		// addrsData1: // 这里就两个数组对象
		// ['所有地区', '湖南'], // 这里是第组数据的选项,对应addr1
		// ['所有城市'], // 对应初始化的所有地区

		// addrsData2: //这里根据地址数据会有很多数组对象
		// ['所有城市'], //对应第一个选项所有地区，自然就是所有城市
		// ['所有城市','邵阳', '娄底', '怀化'] //对应addrsData1的选项,这里的数据是addr2
		// ['所有城市','广州', '深圳', '东莞'] //对应addrsData1的选项,这里的数据是addr2
		// ['上海市'] // 如果是直辖市，那就默认只有一个，这个要在遍历中处理
	};
	// 请求地址
	const getAddrs = () => {
		//开始请求
		uni.request({
			url: 'https://file.fyinfor.com/static/address.json?2',
			method: 'GET',
			success: (res) => {
				// 将值将给函数处理
				setAddrs(res.data);
			},
			fail: (err) => {
				//弹出错误
				uni.showToast({
					title: '获取gpu.json失败',
					duration: 3000,
					icon: "none"
				});
			}
		});
	};
</script>