301 lines
7.7 KiB
Vue
301 lines
7.7 KiB
Vue
<template>
|
|
<view class="K-Album-Content">
|
|
<template v-for="(item,index) in lists">
|
|
<view :key='index' class="Album-Img-Item" :style="{
|
|
'width': `${width}rpx`,
|
|
'height': `${height}rpx`,
|
|
'margin-right': MarginDistance(index+1),
|
|
'margin-bottom': Margin,
|
|
'border-radius':`${radius}rpx`
|
|
}">
|
|
<!-- 图片 -->
|
|
<view v-if="item['filetype'] == 'image'" class="Album-Img-Item-Img" @tap.stop="previewImage(index)">
|
|
<image class="img" :src="item['url']" mode="aspectFill"></image>
|
|
<!-- <u--image :showLoading="true" :src="item['url']"></u--image> -->
|
|
</view>
|
|
<view class="Album-Img-Item-video" v-if="item['filetype'] == 'video'">
|
|
<!-- 视频 -->
|
|
<!-- <video :id="`Video${index}`" :src="item['url']"></video> -->
|
|
<!-- 视频封面 -->
|
|
<image class="img" :src="item['video_cover']" mode="aspectFill"></image>
|
|
</view>
|
|
<!-- 删除元素 -->
|
|
<view v-if="deletable" class="Album-Img-Item-deletable" @click="deleteBtn(index)">
|
|
<text class="icon iconfont icon-shanchu Album-Img-Item-deletable-icon"></text>
|
|
<!-- <image class="Album-Img-Item-deletable-icon" src="/static/image/nolineimage/deletable-icon.png"
|
|
mode=""></image> -->
|
|
</view>
|
|
</view>
|
|
</template>
|
|
<view class="append" @click="AddImages" v-if="lists.length < (Max-0) && isadd" :style="{
|
|
'width': `${width}rpx`,
|
|
'height': `${height}rpx`,
|
|
'margin-right': MarginDistance(lists.length+1),
|
|
'margin-bottom': Margin,
|
|
'border-radius':`${radius}rpx`
|
|
}">
|
|
<!-- <image class="img" src="/static/image/add.png" mode=""></image> -->
|
|
<view class="freight-row-up-img-el">
|
|
+
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import props from './props.js';
|
|
/**
|
|
* Album 图片展示/上传组件
|
|
*
|
|
* @width 展示图片/视频宽度
|
|
* @height 展示图片/视频高度
|
|
* @list 展示数组
|
|
* @deletable 是否显示删除按钮
|
|
* @WAdaptive 展示宽度是否自适应,当该属性为true时width无效,会根据所给左间距来动态计算每个块的宽度
|
|
* @rightM 左间距(xx)
|
|
* @bottoM 下间距(xx)
|
|
* @Max 做多展示几张
|
|
* @radius 圆角
|
|
*/
|
|
export default {
|
|
mixins: [props],
|
|
name: "K-Album",
|
|
data() {
|
|
return {
|
|
lists: [],
|
|
Margin: 0,
|
|
linenumber: 0,
|
|
index: -1,
|
|
videotype: ['wmv', 'asf', 'asx', 'rm', 'rmvb', 'mp4', '3gp', 'mov', 'm4v', 'avi', 'dat', 'mkv', 'flv',
|
|
'vob'
|
|
],
|
|
imgtype: ['bmp', 'jpg', 'png', 'tif', 'gif', 'pcx', 'tga', 'exif', 'fpx', 'svg', 'psd',
|
|
'cdr', 'pcd', 'dxf', 'ufo', 'eps', 'ai', 'raw', 'WMF', 'webp', 'avif', 'apng'
|
|
]
|
|
};
|
|
},
|
|
async onReady() {
|
|
let Element = await this.getElSize.call(this, 'K-Album-Content');
|
|
// 单个元素宽度转为px
|
|
let w = uni.upx2px(this['width']);
|
|
// 每行几个
|
|
let l = parseInt(Element['width'] / w);
|
|
// 父元素宽度 - (每行几个 * 单个元素宽度) / 除最边元素以外的元素数量（因为最边元素不需要外边距）
|
|
let Margin = ((Element['width'] - (w * l)) / (l - 1)) / (uni.upx2px(100) / 100) + 'rpx';
|
|
this['linenumber'] = l;
|
|
this['Margin'] = Margin;
|
|
},
|
|
computed: {
|
|
// Style() {
|
|
// this['index'] += 1;
|
|
// console.log(this['index'], '12312');
|
|
// return `width:${this['width']}rpx;height:${this['height']}rpx;margin-right:${((this['index'] + 1) % this['linenumber'] == 0) ? '' : this['Margin']}`
|
|
// },
|
|
},
|
|
mounted() {
|
|
console.log(this,'this');
|
|
// 加载时判断展示数组是否存在元素
|
|
if (this['list']['length'] > 0) {
|
|
this['lists'] = this.DataReset(this['list']);
|
|
console.log(this.DataReset(this['list']), '列表');
|
|
}
|
|
},
|
|
methods: {
|
|
/**
|
|
* @获取元素高度
|
|
* */
|
|
getElSize(em) {
|
|
return new Promise((res, rej) => {
|
|
uni.createSelectorQuery().in(this).select(`.${em}`)
|
|
.boundingClientRect(rect => {
|
|
res(rect);
|
|
})
|
|
.exec();
|
|
});
|
|
},
|
|
|
|
/**
|
|
* @删除按钮
|
|
* */
|
|
async deleteBtn(i) {
|
|
if (!this['deletable']) return;
|
|
this['lists'].splice(i, 1);
|
|
this.$emit('UpImg', this['lists'])
|
|
},
|
|
|
|
/**
|
|
* @检测类型
|
|
* */
|
|
detectionType(file) {
|
|
|
|
},
|
|
|
|
MarginDistance(index) {
|
|
return (index % this['linenumber'] == 0) ? '' : this['Margin']
|
|
},
|
|
|
|
/**
|
|
* @数据格式重置
|
|
* */
|
|
DataReset(d) {
|
|
let list = d.map(item => {
|
|
if (Object.prototype.toString.call(item) == '[object String]') {
|
|
if (!!item) {
|
|
return {
|
|
url: item,
|
|
filetype: this.detectionType(item)
|
|
}
|
|
}
|
|
|
|
} else if (Object.prototype.toString.call(item) == '[object Object]') {
|
|
return {
|
|
url: item[this['keyName']] || item['path'],
|
|
filetype: this.detectionType(item[this['keyName']] || item['path']),
|
|
video_cover: item['video_cover']
|
|
}
|
|
|
|
}
|
|
});
|
|
// console.log(list);
|
|
return list;
|
|
},
|
|
|
|
/**
|
|
* @添加图片
|
|
* */
|
|
AddImages() {
|
|
console.log(this.tool.uploadFile);
|
|
this.tool.uploadFile().then(data => {
|
|
let i = this.DataReset(data);
|
|
this['lists'].push(...i);
|
|
this.$emit('UpImg', this['lists'])
|
|
})
|
|
},
|
|
|
|
/**
|
|
* @预览
|
|
* */
|
|
previewImage(current) {
|
|
let tempFilePaths = this['lists'].map(item => {
|
|
return item['url']
|
|
})
|
|
uni.previewImage({
|
|
current,
|
|
urls: tempFilePaths,
|
|
longPressActions: {
|
|
// itemList: ['发送给朋友', '保存图片', '收藏'],
|
|
success: function(data) {
|
|
// console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
|
|
},
|
|
fail: function(err) {
|
|
// console.log(err.errMsg);
|
|
}
|
|
}
|
|
});
|
|
},
|
|
|
|
detectionType(url) {
|
|
let xj = url.substring(url.lastIndexOf('.') + 1);
|
|
if (this.imgtype.indexOf(xj) !== -1) {
|
|
return 'image';
|
|
} else if (this.videotype.indexOf(xj) !== -1) {
|
|
return 'video'
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.K-Album-Content {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
|
|
.Album-Img-Item {
|
|
// background-color: red;
|
|
overflow: hidden;
|
|
position: relative;
|
|
|
|
&-Img {
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
.img {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
&-video {
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
.img {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
&-deletable {
|
|
width: 30rpx;
|
|
height: 30rpx;
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
display: flex;
|
|
border-radius: 0 0 0 15rpx;
|
|
z-index: 100;
|
|
text-align: center;
|
|
line-height: 30rpx;
|
|
|
|
&-icon {
|
|
width: 100%;
|
|
height: 100%;
|
|
font-size: 20rpx !important;
|
|
color: #ffffff;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.append {
|
|
.img {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
|
|
@font-face {
|
|
font-family: "iconfont";
|
|
/* Project id 2903098 */
|
|
src: url('https://at.alicdn.com/t/font_2903098_lk7t0kvsx3k.woff2?t=1654136213785') format('woff2'),
|
|
url('https://at.alicdn.com/t/font_2903098_lk7t0kvsx3k.woff?t=1654136213785') format('woff'),
|
|
url('https://at.alicdn.com/t/font_2903098_lk7t0kvsx3k.ttf?t=1654136213785') format('truetype');
|
|
}
|
|
|
|
.iconfont {
|
|
font-family: "iconfont" !important;
|
|
font-size: 16px;
|
|
font-style: normal;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
|
|
.icon-shanchu:before {
|
|
content: "\e6f0";
|
|
}
|
|
.freight-row-up-img-el{
|
|
width: 88rpx;
|
|
height: 88rpx;
|
|
background-color: #DEDEDE;
|
|
margin-top: 20rpx;
|
|
color: #999999;
|
|
text-align: center;
|
|
line-height: 80rpx;
|
|
font-size: 80rpx;
|
|
}
|
|
</style>
|