im/pages/conversation/groupAlbum/groupAlbum.vue

<template>
	<view class="group_album_page">
		<uni-nav-bar left-icon="back" @clickLeft="back" @clickRight="manage" title="群相册" statusBar fixed>
			<view slot="left">
				<uni-icons type="back"></uni-icons>
			</view>
			<view slot="right" v-if="isAdmin">
				<text v-if="manageStatus">取消</text>
				<text v-else>管理</text>
			</view>
		</uni-nav-bar>
		<view class="list">
			<view class="item" v-if="isAdmin">
				<view class="pickfile" @click="pickMedia">
					<u-icon
						color="#D3d3d3"
						size="40"
						name="plus"
					></u-icon>
				</view>
			</view>
			<template  v-for="(item,index) in fileList">
			<view v-if="item.status!=1" :key="'fileList'+index" class="item">
				<c-CacheImage :src="item.url" width="234rpx" height="234rpx"></c-CacheImage>
				<view class="overlay"></view>
				<u-line-progress :percentage="item.progress" showText></u-line-progress>
			</view>
			</template>
			<view v-for="(item,index) in list" :key="index" class="item" @click="itemClick(item,index)" :class="{cancheck:manageStatus,checked:selectedItemIds.includes(item.id)}">
				<c-CacheImage :src="item.url" width="234rpx" height="234rpx" @click="itemClick(item,index)" ></c-CacheImage>
			</view>
		</view>
		<u-loadmore :status="load_status" />
		<view class="footer" v-if="manageStatus">
			<button @click="selectAll" size="mini">全选</button>
			<button @click="deleteItem" type="warn" size="mini">删除({{selectedItemIds.length}})</button>
		</view>
	</view>
</template>

<script>
	import util from "@/util/index.js"
	import {upload} from "@/api/login.js"
	import {mapGetters} from "vuex";
	import {GroupMemberRole} from "openim-uniapp-polyfill";
	
	export default {
		data() {
			return {
				albumWidth: 0,
				fileList: [],
				list: [
					{
						id:1,
						url: "https://cdn.uviewui.com/uview/album/1.jpg",
					}, 
					{
						id:2,
						url: "https://cdn.uviewui.com/uview/album/2.jpg",
					}, 
					{
						id:3,
						url: "https://cdn.uviewui.com/uview/album/3.jpg",
					}, 
					{
						id:4,
						url: "https://cdn.uviewui.com/uview/album/4.jpg",
					}, 
					{
						id:5,
						url: "https://cdn.uviewui.com/uview/album/5.jpg",
					}, 
					{
						id:6,
						url: "https://cdn.uviewui.com/uview/album/6.jpg",
					}, 
					{
						id:7,
						url: "https://cdn.uviewui.com/uview/album/7.jpg",
					}, 
					{
						id:8,
						url: "https://cdn.uviewui.com/uview/album/8.jpg",
					}, 
					{
						id:9,
						url: "https://cdn.uviewui.com/uview/album/9.jpg",
					}, 
				],
				manageStatus: false,
				selectedItemIds:[],
				uploadButtonWidth:0,
				load_status:"loadmore",
				param: {
					groupID: "",
					offset: 0,
					limit: 10,
					trace: 1,
				}
			};
		},
		computed: {
			...mapGetters([
				"storeCurrentConversation",
				"storeCurrentMemberInGroup",
				"storeCurrentGroup",
			]),
			isAdmin() {
				return this.storeCurrentMemberInGroup.roleLevel > GroupMemberRole.Normal;
			},
		},
		onLoad(opt) {
			this.param.groupID = opt.groupID
			//this.param.groupID = opt.storeCurrentConversation.groupID;
			this.init();
			this.uploadButtonWidth = uni.$u.getPx('234rpx');
		},
		methods: {
			init() {
				this.getList(true);
			},
			getList(isFirstPage = false) {
				if (isFirstPage === true) {
					this.list = [];
					this.param.offset = 0;
				}
				this.load_status = 'loading';
				uni.$u.http.post('/group/album_list', this.param).then(res => {
					if(res.length>0){
						this.param.offset = res[0].id;
						this.list = this.list.concat(res);
						this.load_status = 'loadmore';
						if(res.length < this.param.limit){
							this.load_status = 'nomore';
						}
						return ;
					}
					this.load_status = 'nomore';
				}).catch(e => {
					this.load_status = 'loadmore';
				})
			},
			itemClick(item,index) {
				if(this.manageStatus && this.isAdmin){
					if(this.selectedItemIds.includes(item.id)){
						this.selectedItemIds = this.selectedItemIds.filter(id=>item.id!=id)
					}else{
						this.selectedItemIds.push(item.id);
					}
					return ;
				}
				const urls = this.list.map(item=>util.cdn(item.url));
				uni.previewImage({
					urls:urls,
					current:index,
				})
			},
			deleteItem(){
				if(!this.isAdmin || this.selectedItemIds.length == 0){
					return ;
				}
				const _this = this;
				uni.showModal({
					content:"确定删除吗?一旦删除不能恢复",
					success(res) {
						if(res.confirm){
							_this.doDelete();
						}
					}
				})
			},
			selectAll(){
				if(!this.isAdmin){
					return ;
				}
				const arr = [];
				this.list.forEach(item=>{
					arr.push(item.id);
				})
				this.selectedItemIds = [...arr];
			},
			doDelete(){
				if(!this.isAdmin || this.selectedItemIds.length == 0){
					return ;
				}
				uni.$u.http.post('/group/album_delete', {ids:this.selectedItemIds}).then(res => {
					this.list = this.list.filter(item=>!this.selectedItemIds.includes(item.id));
					this.selectedItemIds = [];
					this.manageStatus = false;
				}).catch(e => {
					uni.$u.toast(e?.msg || e);
				})
			},
			back() {
				if (this.manageStatus) {
					this.manageStatus = false;
					return;
				}
				util.goto(1);
			},
			manage() {
				if(!this.isAdmin){
					return ;
				}
				this.manageStatus = !this.manageStatus;
			},
			pickMedia(){
				if(!this.isAdmin){
					return ;
				}
				const _this = this;
				uni.chooseImage({
					success(res) {
						//res.tempFilePaths[0]
						//res.tempFiles[0].path
						//res.tempFiles[0].size
						let i = 0;
						_this.fileList = res.tempFilePaths.map(path=>{
							i++;
							return {
								"id": 'temp_'+i,
								"group_id": 0,
								"user_id": 0,
								"url": path,
								"title": path,
								"progress": 0,
								"status": 0,
							};
						});
						_this.batchUpload();
					}
				});
				// uni.chooseMedia({
				// 	count: 9,
				// 	mediaType: ['image'],
				// 	sourceType: ['album', 'camera'],
				// 	success(res) {
				// 		console.log(res.tempFiles[0].tempFilePath)
				// 	}
				// })
			},
			async batchUpload(){
				if(!this.isAdmin){
					return ;
				}
				const _this = this;
				const lists = [].concat(this.fileList);
				let result = {};
				for (let i = 0; i < lists.length; i++) {
					result = await upload(lists[i].url,{
						savePath: "album" ,
						url:"/group/album_create",
						groupID:_this.param.groupID
					},(res)=>{
						try{
							_this.fileList[i].progress = res.progress;
						}catch(e){
							
						}
					});
					if(data.code == 0){
						_this.fileList[i].status = 1;
						_this.list.unshift(result.data);
					}else{
						uni.$u.toast(data.msg);
					}
				}
				_this.fileList = [];
			}
			
		},
		onPullDownRefresh() {
			this.getList(true);
		},
		onReachBottom() {
			this.getList();
		}
	}
</script>

<style lang="scss" scoped>
	.group_album_page{
		.footer{
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			height: 44px;
			background-color: #fff;
			z-index: 10;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 20rpx;
			uni-button{
				margin: 0;
			}
		}
		.list{
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			margin-top: 12rpx;
			padding-right: 12rpx;
			.item{
				position: relative;
				margin-bottom: 12rpx;
				margin-left: 12rpx;
				::v-deep .u-upload__button{
					margin: 0;
				}
				&.cancheck::after{
					content: " ";
					font-family: uicon-iconfont;
					position: relative;
					display: flex;
					flex-direction: row;
					align-items: center;
					width: 18px;
					height: 18px;
					font-size: 20px;
					text-align: center;
					background-color: rgb(255, 255, 255);
					border-color: rgb(200, 201, 204);
					border-style: solid;
					border-width: 1px;
					border-radius: 100%;
					position: absolute;
					bottom: 0;
					left: 0;
				}
				&.cancheck.checked::after{
					content: "";
					background-color: rgb(41, 121, 255);
					border-color: rgb(41, 121, 255);
					color:#FFF;
				}
				.overlay{
					background: rgba(0, 0, 0, 0.6);
					position: absolute;
					z-index: 9;
					left: 0;
					top: 0;
					width: 100%;
					height: 100%;
				}
				.u-line-progress{
					position: absolute;
					z-index: 10;
					top:50%;
					margin-top: -6px;
					width: 80%;
					left: 10%;
				}
				.pickfile{
					display: flex;
					align-items: center;
					justify-content: center;
					background-color: #f6f6f6;
					width: 234rpx;
					height: 234rpx;
				}
			}
		}
	}
</style>