hospital/app/pages/user/bind/index.vue

<template>
	<view class="main">
		<view class="list">
			<view class="item" v-for="(item, index) in list" :key="index" @click="go('/pages/user/bind/detail?id=' + item.id)">
				<view class="title omit">
					<text>{{ item.patientName }}</text>
					<text class="check" v-if="item.relationship">{{item.relationship}}</text>
					<text class="check" v-if="item.state == 1">(当前就诊人)</text>
				</view>
				<view class="icon del" @click.stop="del(item)">&#xe641;</view>
			</view>
			<u-empty v-if="list.length == 0" text="请先绑定就诊人"></u-empty>
		</view>
		<view class="mfooter">
			<button class="btn" @click="go('/pages/user/bind/add')">
				<text class="icon">&#xe8d5;</text>
				<text>去绑定</text>
			</button>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			list: []
		};
	},
	onLoad(e) {
		this.getData();
		uni.$on('bind', (res) => {
			this.getData();
		});
	},
	methods: {
		getData() {
			this.http.request({
				url: '/app/user/bind/list',
				data: this.param,
				success: (res) => {
					this.list = res.data.data;
				}
			});
		},
		del(item) {
			uni.showModal({
				title: '提示',
				content: '确定移除当前就诊人?',
				success: (res) => {
					if (res.confirm) {
						this.http.request({
							url: '/app/user/bind/remove/' + item.id,
							success: (res) => {
								uni.showToast({ title: '移除成功' });
								this.list.splice(this.list.indexOf(item), 1);
							}
						});
					}
				}
			});
		},
		go(url) {
			uni.navigateTo({ url: url });
		}
	}
};
</script>

<style lang="scss">
.list {
	background-color: white;
	border-radius: 10px;
	.item {
		padding: 16px 12px 16px 12px;
		border-bottom: 1px solid $line;
		overflow: hidden;
		.title {
			font-size: 15px;
			font-weight: bold;
			.check {
				color: #737373;
				font-size: 13px;
				font-weight: normal;
				padding-left: 5px;
			}
		}
		.del {
			color: #f44336;
			float: right;
			margin-top: -20px;
			font-size: 20px;
		}
	}
}
</style>