uniapp-shunfengche/my/classes/PassengerList.vue

<template>
	<view class="boxs">
		<!-- 外层容器 -->
		<view class="flex align-center padding-tb-sm" v-for="(item, index) in selectdata" :key="index">
			<!-- 显示头像 -->
			<view>
				<image v-if="globalImages" :src="globalImages + 'images/order/chengcheren.png'" style="width: 80rpx;height: 80rpx;" mode=""></image>
			</view>
			<!-- 显示姓名和关系、电话 -->
			<view style="margin-left: 30rpx; line-height: 40rpx;">
				<view>{{ item.name }}</view>
				<view style="color: #999;">{{ item.idCard }}</view>
			</view>
			<!-- 编辑图标 -->
			<view style="position: absolute; right: 130rpx;" @tap="handleEdit(item)">
				<image v-if="globalImages" :src="globalImages + 'images/order/xiugai.png'" style="width: 36rpx;height: 36rpx;" mode="">
				</image>
			</view>
			<!-- 删除图标 -->
			<view style="position: absolute; right: 60rpx;" @tap="handleDelete(item.id, index)">
				<image v-if="globalImages" :src="globalImages + 'images/order/shanchu.png'" style="width: 36rpx;height: 36rpx;" mode="">
				</image>
			</view>
		</view>
		<!-- 底部操作栏 -->
		<view class="footer">
			<button class="submit-btn" @click="goNav('/my/classes/adddetailsList?type=add')">+ 新增乘车人</button>
		</view>
	</view>
	
</template>

<script>
	import { waitForGlobalImages } from '@/utils/globalImageLoader'
	export default {
		data() {
			return {
				selectdata: [],
				globalImages: ''
			}
		},
		onLoad(options) {
			waitForGlobalImages().then((path) => {
			    console.log('✅ 全局图片路径:', path)
			    this.globalImages = path
			  })
			
			this.fetchPassengerList(); // 初始化加载一次
			
			  uni.$on('refreshPassengerList', () => {
				this.fetchPassengerList(); // 被添加页通知时刷新
			  });
		},
		onUnload() {
		  uni.$off('refreshPassengerList'); // 销毁监听，避免重复绑定
		},
		methods: {
			fetchPassengerList() {
			    this.$Request.getT('/app/passenger/selectList').then(res => {
			      if (res.code === 0) {
			        this.selectdata = res.data;
			      }
			    });
		    },
			handleEdit(contact) {
			  const token = this.$queue.getData("token");
			  if (token) {
			    uni.navigateTo({
			      url: `/my/classes/adddetailsList?type=edit&data=${encodeURIComponent(JSON.stringify(contact))}`
			    });
			  }
			},
			handleDelete(ids, index) {
			    uni.showModal({
			      title: '确认删除',
			      content: '是否删除该乘车人？',
			      success: (res) => {
			        if (res.confirm) {
						let data = {
							id: ids
						}
			           this.$Request.postT('/app/passenger/delete', data)
						.then(res => {
						  if (res.code === 0) {
							uni.showToast({ title: '删除成功', icon: 'success' });
							this.fetchPassengerList()
						  } else {
							uni.showToast({ title: res.msg || '删除失败', icon: 'none' });
						  }
						})
						.catch(err => {
						  console.error('删除失败:', err);
						  uni.showToast({ title: '网络错误', icon: 'none' });
						});
			        }
			      }
			    });
			},
			goNav(url) {
				// #ifdef MP-WEIXIN
				if (uni.getStorageSync('sendorderMsg')) {
					uni.requestSubscribeMessage({
						tmplIds: this.arr,
						success(re) {
							// console.log(re,'**********')
							var datas = JSON.stringify(re);
							if (datas.indexOf("accept") != -1) {
								console.log(re)
							}
						},
						fail: (res) => {
							console.log(res)
						}
					})
				}
				// #endif
				let token = this.$queue.getData("token");
				if (token) {
					uni.navigateTo({
						url: url
					})
				} else {
					this.bindlogin();
				}
			}
		}
	}
</script>

<style scoped>
	.boxs {
		background: #FFFFFF;
		border-radius: 24rpx;
		margin: 30rpx;
		padding: 30rpx;
	}
	.footer {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background: #fff;
		padding: 20rpx 30rpx;
		box-shadow: 0 -4rpx 10rpx rgba(0, 0, 0, 0.05);
	}
	
	.submit-btn {
		background: #fe6b01;
		color: #fff;
		border-radius: 50rpx;
		font-size: 32rpx;
		height: 80rpx;
		line-height: 80rpx;
	}
</style>