iot-test-app/pages/project-list/project-list.vue

<template>
	<view class="list">
		<u-swipe-action>
			<u-swipe-action-item @click="(e)=>{click(e,item)}" :options="options1" v-for="(item,index) in list"
				:key="item.id">
				<view class="list-item">
					<view class="left">
						{{item.description}}
					</view>
					<view class="right">
						{{item.gatewayDeviceId}}
					</view>
				</view>
			</u-swipe-action-item>
		</u-swipe-action>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>
<script>
	export default {
		props: {

		},
		data() {

			return {
				msg: {
					userId: uni.getStorageSync('userId'),
					pageNo: 1,
					pageSize: 10
				},
				options1: [{
					text: '修改',
					style: {
						backgroundColor: '#3c9cff'
					}
				}, {
					text: '删除',
					style: {
						backgroundColor: '#f56c6c'
					}
				}],
				list: []
			}
		},
		// 触底事件
		onReachBottom() {
			console.log('触底了');
		},
		onLoad() {
			this.getList()
		},
		methods: {
			async getList() {
				uni.showLoading({
					title: '数据加载中...'
				})
				const {
					data: res
				} = await uni.$http.post('/api/v1/test/testProject/queryByCondition', this.msg)
				console.log(res);
				if(res.code===200){
					uni.hideLoading()
					this.list = res.data.records
				}else{
					this.$u.toast(`修改失败`)
				}
				
			},
			async click(e, item) {
				console.log(item);
				if (e.index == 0) {
					this.$u.toast(`点击了更改`);
					let detail = JSON.stringify(item)
					uni.navigateTo({
						url: "/pages/add-project/add-project?item=" + detail
					})
				} else {
					uni.showLoading({
						title:"正在删除中"
					})
					const {
						data: res
					} = await uni.$http.delete(`/api/v1/test/testProject/${item.id}`)
					if(res.code==200){
						uni.hideLoading()
						this.getList()
					}else{
						this.$u.toast(`删除失败，请重新删除`)
					}
				
				}
			}

		},


		onPullDownRefresh() {
			console.log('refresh');
			this.getList()
			setTimeout(function() {

				uni.stopPullDownRefresh();
			}, 1000);
		}
	}
</script>
<style lang="scss">
	.list {
		width: calc(100vw - 40rpx);
		margin: 10rpx 20rpx;
		overflow: hidden;

		.list-item {
			padding: 20rpx;
			height: 100rpx;
			border-bottom: 1px solid #535353;
			display: flex;
			justify-content: space-between;
			align-items: center;



			// margin-bottom: 20rpx;
			.left {
				// background-color: red;
				// flex: 1;
			}

			.right {
				// background-color: blue;
				// flex: 1;
			}
		}
	}
</style>