LJ-ancient-city-h5/pages/tourist/index.vue

<template>
	<view class="app-container">
		<u-navbar title="选择游玩人" bgColor="#fff" :fixed="true" :autoBack="false" leftIconColor="#333333" leftIconSize="28"
			@leftClick="handleLeftClick">
		</u-navbar>
		<view class="app-container-item flex-column-center">
			<view class="time_period-card ">
				<view class="time_period-card_item flex-between" v-for="(item,index) in touristList" :key="index">
					<view style="width: calc(100% - 50px);" class="flex-between" @click="onCheckTourist(item,index)">
						<view :class="[isChecked(item.id) ? 'checked_box' : 'unchecked_box', 'flex']">
							<text v-show="isChecked(item.id)" class="iconfont icon-c_checked"
								style="font-size: 10px;color: #fff"></text>
						</view>
						<view class="card_item">
							<text>{{ item.username }}</text>
							<text>【身份证】{{ item.idNumber }}</text>
						</view>
					</view>
					<view class="delete_box flex" @click="deleteTourist(item,index)">
						<text class="iconfont icon-delete" style="font-size: 20px;color: #BCC4DB"></text>
					</view>
				</view>
			</view>
		</view>

		<view class="app-container-btn flex-between">
			<view class="btn-item">
				<u-button class="btn" :plain="true" color="#2EDAF1" text="新增游玩人" @tap="addTourist()"></u-button>
			</view>
			<view class="btn-item">
				<u-button v-if="touristIdList.length > 0" text="确定" class="btn" type="primary"
					@tap="chooseTourist()"></u-button>
				<u-button v-else text="确定" class="btn" color="#DDE2EC"></u-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				touristList: [{
					id: 1,
					username: '刘琳琳', // 姓名
					idNumber: '430822********0465', // 身份证号
					IDType: '',
					checked: false,
				}, {
					id: 2,
					username: '刘琳X', // 姓名
					idNumber: '430822********0464', // 身份证号
					IDType: '',
					checked: false,
				}, {
					id: 3,
					username: '刘琳Y', // 姓名
					idNumber: '430822********0463', // 身份证号
					IDType: '',
					checked: false,
				}],
				touristIdList: [],
			};
		},
		computed: {
			isSubmitEnabled() {
				return true;
			},
		},
		onLoad(options) {
			// this.touristIdList = JSON.parse(options.touristIdList);
			console.log('onLoad', this.touristIdList)
		},
		onShow() {},
		methods: {
			isChecked(id) {
				return this.touristIdList.findIndex(v => v == id) > -1
			},
			/**
			 * 删除游玩人
			 * @param item
			 * @param index
			 */
			deleteTourist(item, index) {
				uni.showModal({
					title: '提示',
					content: `确定删除${item.username}吗?`,
					success: res => {
						if (res.confirm) {
							let cIndex = this.touristIdList.findIndex(v => v == item.id);
							let tIndex = this.touristList.findIndex(v => v.id == item.id);
							console.log(cIndex)
							if (cIndex > -1) {
								this.touristIdList.splice(cIndex, 1);
							}
							if (tIndex > -1) {
								this.touristList.splice(tIndex, 1);
							}
							uni.showToast({
								title: '操作成功',
								icon: 'none',
								duration: 1000,
								mask: true,
								success: () => {}
							})

						}
					}
				});
			},
			/**
			 * 切换选择游玩人
			 * @param item
			 * @param index
			 */
			onCheckTourist(item, index) {
				let cIndex = this.touristIdList.findIndex(v => v == item.id);
				console.log(cIndex)
				if (cIndex > -1) {
					this.touristIdList.splice(cIndex, 1);
				} else {
					this.touristIdList.push(item.id)
				}
			},
			/**
			 * 添加游玩人
			 */
			addTourist() {
				console.log('添加游玩人')
				uni.navigateTo({
					url: '/pages/tourist/add'
				});
			},
			/**
			 * 选择游玩人
			 */
			chooseTourist() {

			},
			handleLeftClick() {
        //获取页面栈的长度
        const canNavBack = getCurrentPages()
        //判断是否刷新了浏览器，刷新了浏览器，页面栈只有当前一个
        if (canNavBack && canNavBack.length > 1) {
          uni.navigateBack({
            delta: 1
          })
        } else {
          history.back()
        }
			},
		}
	};
</script>
<style lang="scss" scoped>
	.app-container {
		width: 100vw;
		//background: #fff;
		position: relative;
		height: 100vh;

		&-item {
			position: absolute;
			top: 44px;
			padding: 10px 20px 100px 20px;
			width: calc(100%);
			box-sizing: border-box;

			.time_period-card {
				width: calc(100%);
				margin-top: 10px;
				position: relative;
				display: flex;
				flex-direction: column;

				&_item {
					border-radius: 8px;
					box-sizing: border-box;
					padding: 0 10px;
					background: #fff;

					&:not(:last-child) {
						margin-bottom: 10px;
					}
				}

				.checked_box {
					width: 18px;
					height: 18px;
					background: #2EDAF1;
					border-radius: 50%;
					box-sizing: border-box;
				}

				.unchecked_box {
					width: 18px;
					height: 18px;
					border: 1px solid #DADEEC;
					background: #F8FAFD;
					border-radius: 50%;
					box-sizing: border-box;
				}

				.delete_box {
					width: 50px;
					height: 70px;
					//background: #2EDAF1;
				}

				.card_item {
					//width: calc(100% - 18px - 50px);
					flex: 1;
					display: flex;
					flex-direction: column;
					padding: 10px 20px;
					font-size: 14px;
					color: #333333;
					border-radius: 8px;
					box-sizing: border-box;

					text {
						height: 26px;
						line-height: 26px;
					}
				}
			}

			.top-card {
				width: calc(100%);
				box-sizing: border-box;
				margin-top: 10px;
				background: #fff;
				border-radius: 8px;
				position: relative;
				display: flex;
				flex-direction: column;
				padding: 20px 10px;
				box-sizing: border-box;

				.title {
					width: 100%;
					font-size: 20px;
					color: #1D2633;
				}

				.time {
					color: #1D2633;
					font-size: 15px;
				}
			}
		}

		&-btn {
			position: fixed;
			bottom: 0;
			height: 80px;
			text-align: center;
			background: white;
			width: 100%;
			padding: 0 24px;
			box-sizing: border-box;

			.btn-item {
				width: calc(50% - 10px);

				.btn {
					width: 100%;
					border-top-right-radius: 25px !important;
					border-top-left-radius: 25px !important;
					border-bottom-left-radius: 25px !important;
					border-bottom-right-radius: 25px !important;
				}
			}
		}
	}
</style>