增加群相册功能,长按朋友圈文字可以复制
This commit is contained in:
cansnow
@@ -0,0 +1,354 @@
|
||||
<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>
|
||||
<view v-for="(item,index) in fileList" :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>
|
||||
<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=>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);
|
||||
for (let i = 0; i < lists.length; i++) {
|
||||
const result = await upload(lists[i].url,{
|
||||
savePath: "album" ,
|
||||
url:"/group/album_create",
|
||||
groupID:_this.param.groupID
|
||||
},(res)=>{
|
||||
_this.fileList[i].progress = res.progress;
|
||||
});
|
||||
_this.fileList.splice(i,1);
|
||||
_this.list.unshift(result.data);
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
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>
|
||||
Reference in New Issue
Block a user