ZYC-mobile/pagesA/device/share/list.vue

<template>
	<page-meta>
		<navigation-bar :title="$tt('share.deviceShare')" title-align="center" background-color="#007AFF" />
	</page-meta>
	<view class="device-share-list-wrap">
		<u-sticky>
			<view class="search-wrap">
				<u-search v-model="phoneNumber" shape="square" maxlength="11" :placeholder="$tt('share.inputUserPhone')" :actionText="$tt('share.query')"
					@search="handleUserSearch" @custom="handleUserSearch" :inputStyle="{padding: '4rpx 0'}"
					:actionStyle="{ backgroundColor: '#398ade', color: '#fff', padding: '16rpx', borderRadius: '6rpx' }">
				</u-search>
				<view class="message-wrap" v-if="message != ''">
					<u--text :text="message" prefixIcon="info-circle" iconStyle="margin-right:5px; color: #f56c6c;"
						type="error" size="14" margin="0 0 0 20rpx"></u--text>
				</view>
			</view>
		</u-sticky>
		<view class="list-wrap" v-if="dataList.length > 0">
			<view class="title-wrap">
				<u--text prefixIcon="share-fill" iconStyle="size:16px;margin-right:5px;" bold size="16" color="#666"
					:text="$tt('share.sharedUsers')"></u--text>
			</view>
			<view class="container-wrap">
				<u-cell-group :border="false">
					<view class="cell-wrap" v-for="(item,index) in dataList" :key="index" @click="gotoEdit(item)">
						<u-row>
							<view class="image">
								<u--image src="/static/avatar.png" shape="square" radius="5" width="38" height="38">
								</u--image>
							</view>
							<view class="middle">
								<u--text prefixIcon="account" iconStyle="font-size: 40rpx; margin-right: 10rpx;"
									:text="item.userName" size="14"></u--text>
								<u--text type="info" prefixIcon="phone"
									iconStyle="font-size: 40rpx; margin-right: 10rpx;" :text="item.phonenumber"
									size="14"></u--text>
							</view>
							<view class="right">
								<text v-if="item.isOwner === 1" class="title"
									style="color: #3c9cff; margin-right: 48rpx">{{$tt('share.master')}}</text>
								<text v-else class="title" style="color: #13ce66;">{{$tt('share.share')}}</text>
								<u--text v-if="item.isOwner !== 1" margin="0 10rpx" suffixIcon="arrow-right"
									align="right"></u--text>
							</view>
						</u-row>
					</view>
				</u-cell-group>
				<u-loadmore :status="loadmoreStatus" v-if="total > queryParams.pageSize"
					:loading-text="$tt('scene.tryingToLoad')" :loadmoreText="$tt('scene.gentlyPullUp')"
					:nomoreText="$tt('scene.emptyData')" marginTop="20" />
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getShareUser,
		getUserList
	} from '@/apis/modules/deviceUser';

	export default {
		data() {
			return {
				deviceId: 0, //设备信息
				productId: 0,
				deviceName: '',
				phoneNumber: null, // 手机号码查询
				message: '', // 消息提示
				loadStatus: 'loadmore', // 加载更多
				queryParams: {
					pageNum: 1,
					pageSize: 6,
					deviceId: 0
				},
				total: 0, // 总条数
				dataList: [], // 列表数据
			};
		},
		onLoad(option) {
			this.queryParams.deviceId = option.deviceId;
			this.deviceId = option.deviceId;
			this.productId = option.productId;
			this.deviceName = option.deviceName;
			this.getList();
		},
		methods: {
			// 获取列表数据
			getList() {
				getUserList(this.queryParams).then(response => {
					const {
						rows,
						total
					} = response;
					if (this.queryParams.pageNum == 1) {
						this.dataList = rows;
					} else {
						this.dataList = this.dataList.concat(rows);
					}
					this.total = total;
					const {
						pageNum,
						pageSize
					} = this.queryParams;
					this.loadStatus = total > pageNum * pageSize ? 'loadmore' : 'nomore';
					uni.stopPullDownRefresh();
				});
			},
			// 查询用户列表
			handleUserSearch() {
				if (this.phoneNumber && uni.$u.test.mobile(this.phoneNumber)) {
					let params = {
						phonenumber: this.phoneNumber,
						deviceId: this.deviceId
					};
					getShareUser(params).then(response => {
						if (response.data) {
							this.message = '';
							let user = response.data;
							uni.$u.route({
								url: '/pagesA/device/share/detail',
								params: {
									userName: user.userName,
									phonenumber: user.phonenumber,
									createTime: user.createTime,
									perms: user.perms,
									userId: user.userId,
									remark: user.remark,
									deviceId: this.deviceId,
									deviceName: this.deviceName,
									productId: this.productId,
									type: 1 // 类型,1=新增，2=更新
								}
							});
						} else {
							this.message = this.$tt('share.unable');
						}
					});
				} else {
					this.message = this.$tt('share.correct');
				}
			},
			// 编辑
			gotoEdit(item) {
				if (item.isOwner !== 1) {
					uni.$u.route({
						url: '/pagesA/device/share/detail',
						params: {
							userName: item.userName,
							phonenumber: item.phonenumber,
							createTime: item.createTime,
							remark: item.remark,
							userId: item.userId,
							deviceId: this.deviceId,
							deviceName: this.deviceName,
							productId: this.productId,
							perms: item.perms,
							type: 2, // 类型: 1=新增，2=更新
						}
					});
				}
			},
			// 下拉刷新
			onPullDownRefresh() {
				this.dataList = [];
				this.queryParams.pageNum = 1;
				this.getList();
			},
			// 上拉加载
			onReachBottom() {
				this.queryParams.pageNum = this.queryParams.pageNum + 1;
				if ((this.queryParams.pageNum - 1) * this.queryParams.pageSize > this.total) {
					this.loadStatus = 'nomore';
				} else {
					this.getList();
					this.loadStatus = 'loading';
				}
			}
		}
	};
</script>

<style lang="scss">
	page {
		background: #eef3f7;
	}

	.device-share-list-wrap {
		.search-wrap {
			margin-top: 40rpx;
			padding: 60rpx 40rpx;
			background: #ffffff;
			box-shadow: 0 2rpx 1px 0 rgba(0, 0, 0, 0.1);

			.message-wrap {
				padding: 26rpx 0 0;
			}
		}

		.list-wrap {
			margin-top: 40rpx;

			.title-wrap {
				padding: 20rpx;
			}

			.container-wrap {
				padding: 20rpx 40rpx;
				background-color: #ffffff;

				.cell-wrap {
					background-color: #fff;
					border-radius: 10rpx;
					padding: 40rpx 20rpx;
					box-shadow: 0 2rpx 0 0 rgba(0, 0, 0, 0.1);

					&:not(:first-child) {
						margin-top: 30rpx;
					}

					.middle {
						flex: 1;
						margin-left: 14rpx;
					}

					.right {
						display: flex;
						justify-content: flex-end;

						.title {
							color: #606266;
							font-size: 28rpx;
						}

						.icon {
							margin-left: 10rpx;
						}
					}
				}


				.item-wrap {
					border: 2rpx solid #ddd;
					border-radius: 20rpx;
					padding: 30rpx 20rpx;

					&:not(:first-child) {
						margin-top: 30rpx;
					}
				}
			}
		}
	}
</style>