qjd-shell-uniapp/pagesMain/authorizeList.vue

<template>
	<view class="container">
		<view class="authorize-head">授权用户</view>
		<view class="authorize-box">
			<view class="authorize-card" v-for="(item, index) in authorizeList" :key="index" @click="handleAuthorize(item)">
				<image class="authorize-image" :src="item.merchantImg"></image>
				<view class="authorize-info">
					<view class="authorize-name">{{item.merchantNickname}}</view>
					<view class="authorize-phone">{{item.merchantPhone ? item.merchantPhone : ' '}}</view>
				</view>
				<view class="authorize-arrow">
					<text class="iconfont iconfangxiang"></text>
				</view>
			</view>
			<u-divider :style="{marginTop : authorizeList.length ? '' : '80px'}" :color="isOver ? '#ffffff' : '#51A539'"
			 :border-color="isOver ? '#ffffff' : '#51A539'" @click="handleLoadMore()">
				<u-loading mode="circle" v-if="loadingData"></u-loading>{{loadingData ? '加载中' : (isOver ? '没有更多了' : '点击加载更多')}}
			</u-divider>
		</view>
		<view class="form-handle">
			<u-button type="success" shape="circle" :ripple="true" @click="creatAuthorize" class="handle-custom">生成授权码</u-button>
		</view>
		<u-modal v-model="modalShow" :content="modalContent"></u-modal>
		<u-top-tips ref="uTips"></u-top-tips>
	</view>
</template>

<script>
	const NET = require('@/utils/request')
	const API = require('@/config/api')
	export default {
		data() {
			return {
				pageIndex: 1,
				isOver: false,
				loadingData: false,
				authorizeList: [],
				modalShow: false,
				modalContent: '',
			}
		},
		onShow() {
			this.pageIndex = 1
			this.isOver = false
			this.loadingData = false
			this.authorizeList = []
			this.getList()
		},
		onPullDownRefresh() {
			this.pageIndex = 1
			this.isOver = false
			this.loadingData = false
			this.authorizeList = []
			this.getList('refresh')
		},
		methods: {
			//  生成授权码
			creatAuthorize() {
				NET.request(API.createAuthorizeCode, {}, 'GET').then(res => {
					this.modalContent = '您当前生成的授权码为：' + res.data
					this.modalShow = true
				}).catch(error => {
					this.$refs.uTips.show({
						title: error.data.msg,
						type: 'warning',
					})
				})
			},
			//  权限操作
			handleAuthorize(item) {
				uni.navigateTo({
					url: '/pagesMain/authorizeForm?id=' + item.id
				});
			},
			//  懒加载
			handleLoadMore() {
				if (!this.isOver) {
					this.pageIndex++
					this.getList()
				}
			},
			//  获取列表数据
			getList(type) {
				this.loadingData = true
				NET.request(API.getAuthorizeList + this.pageIndex + '/10', {}, 'GET').then(res => {
					if (type == 'refresh') {
						uni.stopPullDownRefresh();
					}
					this.loadingData = false
					this.isOver = res.data.list.length != 10
					this.authorizeList = this.authorizeList.concat(res.data.list)
				}).catch(error => {
					this.loadingData = false
					this.$refs.uTips.show({
						title: error.data.msg,
						type: 'warning',
					})
				})
			},
		},
	}
</script>

<style lang="less" scoped>
	page {
		width: 100%;
		height: 100%;
	}

	.container {
		width: 100%;
		height: 100%;
		float: left;
		box-sizing: border-box;
		padding-bottom: 60px;
		background-color: #f7f7f7;
		position: relative;

		.authorize-head {
			width: 100%;
			height: 115px;
			float: left;
			background: #52A63A;
			border-radius: 0px 0px 20px 20px;
			box-sizing: border-box;
			padding: 18px 15px;
			font-size: 15px;
			font-family: PingFang SC;
			color: #FFFFFF;
			line-height: 16px;
		}

		.authorize-box {
			width: 100%;
			height: calc(100% - 52px);
			float: left;
			overflow-y: auto;
			box-sizing: border-box;
			padding: 0 15px;
			margin-top: -63px;

			.authorize-card {
				width: 100%;
				height: 96px;
				float: left;
				background: #FFFFFF;
				border-radius: 10px;
				box-sizing: border-box;
				padding: 15px;
				margin-bottom: 10px;

				.authorize-image {
					width: 66px;
					height: 66px;
					float: left;
					border-radius: 50%;
					overflow: hidden;
				}

				.authorize-info {
					width: calc(100% - 94px);
					height: 66px;
					float: left;
					margin-left: 15px;

					.authorize-name {
						width: 100%;
						height: 42px;
						float: left;
						font-size: 18px;
						font-family: PingFang SC;
						color: #333333;
						line-height: 42px;
					}

					.authorize-phone {
						width: 100%;
						height: 24px;
						float: left;
						font-size: 15px;
						font-family: PingFang SC;
						color: #666666;
						line-height: 24px;
					}
				}

				.authorize-arrow {
					width: 12px;
					height: 66px;
					float: left;
					line-height: 66px;
					text-align: center;

					.iconfont {
						font-size: 16px;
						color: #999999;
					}
				}
			}

			/deep/.u-divider {
				background-color: transparent !important;
			}
		}

		.form-handle {
			width: 100%;
			height: 60px;
			position: absolute;
			z-index: 10;
			padding: 10px 15px 20px 15px;
			box-sizing: border-box;
			bottom: 0;
			background-color: #FFFFFF;
			border-top: 1px solid #EEEEEE;

			.handle-custom {
				background-color: #51A539;

				/deep/button {
					background-color: #56a83a;
				}

				/deep/.u-btn--success--disabled {
					background-color: #74bd60 !important;
				}
			}
		}
	}
</style>