cansnow
366 lines
8.3 KiB
Vue
366 lines
8.3 KiB
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> |