ryx/pages/peopleList/peopleList.vue

<template>
	<view class="addpeople">
		<view class="list">
			<!-- <u-checkbox-group v-model="checkboxValue1" placement="column" @change="checkboxChange" shape="circle" size=32> -->
			<view class="list-item" v-for="(item, index) in checkboxList" :key="index">
				<!-- <u-checkbox v-if="peopelList" iconSize=32 style="padding: 0 100rpx;" :name="item"  activeColor="#1E9F6A"></u-checkbox> -->
				<radio v-if="peopelList" color="#1E9F6A" style="font-size: 26rpx;" :checked="item.checked"
					:value="index" @click="checkbox(index)" :disabled="item.default"></radio>
				<view class="" style="margin:0 64rpx 0 32rpx;width:100rpx;">
					{{item.name}}
				</view>
				<view class="">
					{{item.phone}}
				</view>
				<view class="image" style="flex: 1;text-align: right;align-items: center;">
					<text class=""
						style="font-size: 28rpx;color: #1E9F6A;border-right: 1rpx solid #1E9F6A;padding-right: 30rpx;margin-right: 30rpx;"
						@click="dele(item.id)">
						删除
					</text>
					<image src="../../static/editIcon.png" mode="widthFix" @click="edit(item)"></image>
					<!-- <image src="../../static/editIcon.png" mode="widthFix"></image> -->
				</view>
			</view>
			<!-- </u-checkbox-group> -->
		</view>
		
		<view style="margin-top: 140rpx;">
			<u-loadmore v-if="checkboxList.length==0" :status="nomore" fontSize="30" :line="true" nomoreText="暂无出行人" />
		</view>

		<view class="navbar">
			<view class="navbar-item" @click="addpeople">
				+ 新增出行人
			</view>
			<view class="navbar-item sure" v-if="peopelList" @click="surePeople">
				确定出行人
			</view>
		</view>
	</view>
</template>

<script>
	// import peopelInfo from "../components/peopleInfo.vue"
	export default {
		data() {
			return {
				// 选择列表
				peopelList: false,
				//出行人表单显示隐藏
				peopelInfoShow: 1,
				// 出行人选择
				checkboxValue1: [],
				// 出行人列表
				checkboxList: [
					// {name: '吴某某',disabled: false,number:"1568945752"},
					// {name: '吴某某',disabled: false,number:"1568945752"},
				],
				value: 0,
				getpeopleList: [],
				defaultIndex: ''
			}
		},
		components: {
			// peopelInfo
		},

		onLoad(options) {
			// console.log(options)
			if (options.id == 0) {
				this.peopelList = false
			} else {
				this.peopelList = true
			}
			this.init()
			setTimeout(()=>{
				if (options.obj) {
					let obj=JSON.parse(options.obj)
					this.value = obj.value
					if(obj.list.length>0){
						this.checkboxList=obj.list
					}
				}
			},500)
			
		
		},
		onShow() {
			let token = uni.getStorageSync("token")
			if (!token) {
				//未登录
				uni.showToast({
					title: "请先登录",
					icon: 'none'
				})
				setTimeout(() => {
					uni.navigateTo({
						url: "/pages/login"
					})
				}, 1500)

				return false
			}
			uni.showLoading({
				title: '加载中'
			});
		},
		
		methods: {
			init() {
				uni.$u.http.post('/api/traveler/list', {
					custom: {
						auth: true
					}
				}).then((res) => {
					// console.log(res)
					this.checkboxList = res
					// this.$store.commit("getlist",res)
					let nawarr = this.checkboxList
					nawarr.forEach(item => {
						item.checked = false
						item.default=false
					})
					this.checkboxList = nawarr
					uni.hideLoading();

				}).catch((err) => {
					console.log(err)
				})
			},
			// // 选择
			//  checkboxChange(e) {
			//      console.log('change', e);
			// },
			// 选择
			checkbox(index) {
				
				let data = this.checkboxList
				if (data[index].checked) {
					data[index].checked = false;
				} else {
					data[index].checked = true;
				}
				this.checkboxList = JSON.parse(JSON.stringify(data))
				let newarr = this.checkboxList
				let arr = []
				newarr.forEach(item => {
					if (item.checked) {
						arr.push(item)
					}
				})
				this.getpeopleList = arr
				console.log(this.getpeopleList, this.value)
				if (this.getpeopleList.length ==this.value) {
					// this.$toast('只能选择' + this.value + '人')
					this.checkboxList.forEach(item=>{
						if(!item.checked){
							item.default=true
						}
					})
					console.log(this.checkboxList,5555)
				}else{
					this.checkboxList.forEach(item=>{
							item.default=false
					})
				}
				
				this.$store.commit('getpeopleList', this.checkboxList)
				console.log(this.$store.state.openpeopleList,454)
				this.$store.commit("getopenpeopleList", 1)
			},
			// 确定添加联系人
			surePeople() {
				uni.navigateBack({
					delta: 1
				});
			},
			// 查看出行人
			edit(item) {
				let info = JSON.stringify(item)
				uni.navigateTo({
					url: `/pages/peopleList/addPeople?info=${info}&state=0`
				})
			},
			// 删除出行人
			dele(id) {
				uni.showModal({
					title: "提示",
					content: "确认删除吗？",
					success: (res) => {
						if (res.confirm) {
							this.$showLoadding("删除中")
							uni.$u.http.post('/api/traveler/delete', {
								id
							}, {
								custom: {
									auth: true
								}
							}).then((res) => {
								uni.hideLoading()
								this.$toast("删除成功")
								this.init()
							}).catch((err) => {
								console.log(err)
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				})
			},
			// 添加出行人
			addpeople() {
				uni.navigateTo({
					url: "/pages/peopleList/addPeople?state=1"
				})
			}
		}
	}
</script>

<style lang="scss">
	.u-cell__body--large.data-v-913eaa32 {
		padding: 48rpx 0 !important;
		box-sizing: border-box;
	}

	page {
		font-size: 32rpx;
	}

	.list {

		// margin: 50rpx 30rpx;
		.list-item {
			display: flex;
			justify-content: space-between;
			align-items: center;

			image {
				width: 36rpx;
				height: 36rpx;
				margin-bottom: 0;
			}

			border-top: 1rpx solid #E3E3E3;
			padding: 30rpx;

			&:first-child {
				border-top: none
			}
		}

	}

	.navbar {
		width: 100%;
		height: 104rpx;
		line-height: 104rpx;
		display: flex;
		border-top: 1rpx solid #E3E3E3;
		position: fixed;
		left: 0;
		bottom: 0;

		.navbar-item {
			// width: 50%;
			flex: 1;
			text-align: center;
		}

		.sure {
			background: #1E9F6A;
			border-radius: 0px 16rpx 0px 0px;
			color: #FFFFFF;
		}
	}
</style>