cashier_app/pagesCreateOrder/choose-user/choose-user.vue

<template>
	<view class="page-gray u-font-28">
		<view class="search bg-fff u-flex u-col-center ">
			<view class="u-flex-1">
				<uni-search-bar bgColor="#F9F9F9" cancelButton="none" placeholder="搜索" @confirm="search" @clear="search"
					v-model="query.name">
				</uni-search-bar>
			</view>
			<view class="u-flex">
				<image src="/pagesCreateOrder/static/images/icon-saoma.svg" class="icon-saoma" mode=""></image>
			</view>
		</view>
		<view class="list ">
			<view class="bg-fff u-row-between u-flex no-choose border-r-12" @tap="chooseUser">
				<view>不选择用户</view>
				<my-radio v-model="nouser" :size="18" border-color="#d1d1d1" @change="chooseUser"></my-radio>
			</view>
			<template v-if="list.length>0">
				<view class="u-m-t-32 bg-fff box bg-fff">
					<view class="u-flex item u-row-between" v-for="(item,index) in list" :key="index"
						@tap="chooseUser(index,item)">
						<view class="u-flex">
							<view class="headimg u-flex u-row-center u-col-center">
								<image v-if="item.headImg" :src="item.headImg" class="img" mode=""></image>
							</view>
							<view class="u-m-l-32">
								<view class="u-flex">
									<view>{{item.nickName}}</view>
								</view>
								<view class="u-m-t-12  ">手机号:{{item.phone}}</view>
								<view class=" u-font-24 u-m-t-12 u-flex">
									<text class="color-999" v-if="!item.isVip">非会员</text>
									<text class="color-main" v-else>会员</text>
									<view class="u-m-l-30 u-flex">
										<text class="">余额：</text>
										<text class="color-main">{{item.amount}}</text>
									</view>
									<view class="u-m-l-30 u-flex">
										<text class="">积分：</text>
										<text class="color-main">{{item.accountPoints}}</text>
									</view>
								</view>
							</view>
						</view>
						<my-radio @change="chooseUser(index,item)" v-model="item.checked" :size="18"
							border-color="#d1d1d1"></my-radio>
					</view>
				</view>
				<view class="u-m-t-32">
					<my-pagination :page="query.page" :totalElements="query.totalElements" :size="query.size"
						@change="pageChange"></my-pagination>
				</view>

			</template>
			<template v-if="hasAjax&&list.length<=0">
				<my-img-empty tips="未找到相关用户"></my-img-empty>
			</template>



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

<script setup>
	import { onLoad } from '@dcloudio/uni-app'
	import { reactive, onBeforeMount, ref } from 'vue';
	import { shopUserList } from '@/http/api/shopUser.js';
	
	let nouser = ref(false)
	let timer = null

	onBeforeMount(() => {
		clearInterval(timer)
	})

	const query = reactive({
		page: 1,
		name: '',
		totalElements: 0,
		size: 10,
		isVip: 1
	})
	const list = reactive([])
	let hasAjax = ref(false)
	
	/**
	 * 获取用户列表
	 */
	async function getUser() {
		const res = await shopUserList(query)
		hasAjax.value = true
		list.length = res.records.length
		for (let i in res.records) {
			list[i] = {
				...res.records[i],
				checked: false
			}
		}
		query.totalElements = res.totalRow
		console.log(list);
	}
	
	/**
	 * 用户选择
	 * @param {Object} index
	 * @param {Object} item
	 */
	function chooseUser(index, item) {
		if (index === undefined || item === undefined) {
			nouser.value = true
			return emitChooser({
				id: '',
				headImg: '',
				telephone: '',
				amount: '0.00',
				accountPoints: '0.00'
			})
		} else {
			list[index].checked = true
			emitChooser(item)
		}
	}
	function emitChooser(data) {
		uni.$emit('choose-user', data)
		timer = setTimeout(() => {
			uni.navigateBack()
		}, 100)
	}
	function pageChange(e) {
		query.page = e
		getUser()
	}

	function search() {
		query.page = 1
		getUser()
	}
	onLoad(() => {
		getUser()
	})
</script>

<style lang="scss" scoped>
	.scale7 {
		transform: scale(0.7);
	}

	.search {
		padding-right: 28rpx;

		.icon-saoma {
			margin-left: 20rpx;
			width: 34rpx;
			height: 32rpx;
		}
	}

	.list {
		padding: 32rpx 24rpx;

		.no-choose {
			padding: 36rpx 30rpx 36rpx 24rpx;
		}

		.box {
			padding: 32rpx 30rpx 78rpx 24rpx;

			.item {
				padding: 24rpx 0;

				.headimg {
					border-radius: 12rpx 12rpx 12rpx 12rpx;
					font-size: 0;
					width: 84rpx;
					height: 84rpx;
					background-color: #eee;
					overflow: hidden;

					.img {
						width: 84rpx;
						height: 84rpx;
					}
				}
			}

			.item:not(:first-child) {
				border-top: 1px solid #E5E5E5;
			}
		}


	}
</style>