logpm/pagesUser/pages/systemSettings/systemSettings.vue

<template>
	<view class="container">
		<u-navbar title="系统设置" bgColor='#D3832A' leftIconColor='#ffffff' titleStyle='color:#ffffff' placeholder
			:autoBack="true" leftIconSize='35'></u-navbar>
		<view class="list">
			<view class="list_item" style="display: flex;">
				<view class="uni-list-cell-left">
					<u-icon name="moments" color="#47beff"></u-icon>
					<view>
						扫描后台监听状态：
					</view>
				</view>
				<view class="uni-list-cell-db">
					<picker @change="bindPickerChange" :value="details.scanStateChooseIndex"
						:range="details.scanStateList.map(val => val.title)">
						<view class="uni-input">{{details.scanStateList.map(val => val.title)[details.scanStateChooseIndex]}}
						</view>
					</picker>
				</view>
			</view>

		</view>
	</view>
</template>

<script lang="ts" setup>
	import {
		onShow,
		onLoad,
		onHide,
		onPullDownRefresh
	} from '@dcloudio/uni-app'
	import { reactive, ref, toRefs } from 'vue';
	import useSystemSettingsStore from '@/store/useSystemSettingsStore.js';
	import { storeToRefs } from 'pinia';

	// 获取系统设置存储仓库
	const systemSettingsStore = useSystemSettingsStore()
	const { scanStateList, scanState } = storeToRefs(systemSettingsStore)
	const { HANDLE_SCANSTATE } = systemSettingsStore


	onPullDownRefresh(() => {
		const timer = setTimeout(() => {
			// 关闭下拉刷新
			uni.stopPullDownRefresh()
			clearTimeout(timer)
		}, 500)
	})

	const details = reactive({
		// 
		scanStateList: [],
		// 选中的索引 -- 默认为关闭
		scanStateChooseIndex: 0
	})

	// 初始化后台监听扫描数组的值
	details.scanStateList = scanStateList.value

	// 获取用户选择的监听状态
	details.scanStateChooseIndex = scanStateList.value.findIndex(val => Number(val.value) === Number(scanState.value))

	/**
	 * 处理扫描后台监听状态
	 */
	function bindPickerChange(e) {
		console.log('picker发送选择改变，携带值为', e.detail.value)
		details.scanStateChooseIndex = e.detail.value
		// 传入索引, 修改仓库中存储的状态
		HANDLE_SCANSTATE(details.scanStateChooseIndex)
	}

	const { } = toRefs(details)
</script>

<style lang="scss" scoped>
	.container {
		width: 100vw;
		height: 100vh;
		// background: #fff;
	}

	.list {}

	.list_item {
		display: flex;
		justify-content: space-between;
		padding: 20upx;
		border-bottom: 2upx solid #eee;
		background: #fff;
		position: relative;

		.uni-list-cell-db {
			position: absolute;
			top: 0;
			left: 0;
			padding: 20upx;
			width: 100%;
			height: 100%;
			text-align: right;
			box-sizing: border-box;
		}

		&:last-child {
			border-bottom: 0px;
		}

		.uni-list-cell-left {
			display: inline-flex;
		}
	}
</style>