zhywpt-sp/pages/common/select-data-list.vue

<template>
	<next-indexed-xlist
		:dataList="state.dataList"
		:showAvatar="false"
		@itemclick="itemclick">
	</next-indexed-xlist>
</template>

<script setup lang="ts">
	import { reactive, ref, computed, onMounted } from "vue";
	import { onLoad, onShow } from "@dcloudio/uni-app";
	import { getDicWithType } from '@/datas/queryKey.js'
	import { commonStore } from '@/stores/common.js'
	
	const { setSelectIndex } = commonStore()
	
	// 地址数据形式
	const state = reactive({
		selectType: '1',
		keyObj: {
			type: '',
			key: '',
			title: '',
			storeKey: ''
		},
		dataList: []
	})
	
	const selectTypeMap = [
		{type: '1', key: 'PROVINCE_TYPE', title: '省份选择', storeKey: 'province'},
		{type: '2', key: 'BANK_TYPE', title: '银行选择', storeKey: 'bank'},
	]
	
	// selectType 1：选择省份 2：选择银行
	onLoad(({selectType}) => {
		if (selectType) state.selectType = selectType
		setSelectData()
	})
	
	onMounted(() => {
	})
	
	const setSelectData = () => {
		let keyObj = selectTypeMap.find(item => item.type === state.selectType)
		
		if (!keyObj) return
		
		state.keyObj = keyObj
		
		uni.setNavigationBarTitle({
			title: keyObj.title
		})
		let list = getDicWithType(keyObj.key)
		console.log(list)
		state.dataList = list.map(item => {
			return {
				id: item.code,
				name: item.name,
				code: item.code,
				abbr: item.code
			}
		})
	}
	
	const itemclick = (e) => {
		console.log('点击列表回调：', e)
		setSelectIndex(state.keyObj.storeKey, { name: e.name, code: e.id })
		uni.navigateBack()
	}
</script>

<style lang="scss" scoped>
    .content-block {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        background-color: #fff;
        .title {
            color: #333;
            padding: 20rpx;
            margin-right: 20rpx;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
        .btn {
            color: #ccc;
            padding: 10rpx;
            border: 1rpx solid #ccc;
            border-radius: 10rpx;
            margin: 20rpx 10rpx;
            font-size: 28rpx;
            display: flex;
            flex-direction: column;
            justify-content: center;

        }
    }
</style>