crmcard/tm-vuetify/components/tm-album/tm-album.vue

<template>
	<view class="tm-album">
		
		<view class="tm-album-body flex flex-wrap" :class="[`ml--${gutter}`]" :style="{width:alb_wk_body_size+'rpx'}">
			<block v-for="(item,index) in listData" :key="index">
				<view v-if="index<max-1" :style="{width:alb_body_size+'rpx'}"  class="tm-album-item">
					<view @click="clickAlbum(item,index)" :class="[`py-${item[textKey]?0:gutter}`,`px-${gutter}`]">
						<view :style="{width:alb_size+'rpx',height:height||alb_size+'rpx'}" class="relative flex-center">
							<tm-images :model="model" :round="round"  :width="alb_size" :height="(height||alb_size)" :src="item[rangKey]"></tm-images>
							<view class="tm-album-action absolute fulled fulled-height t-0 l-0" :class="[
								actionsPos=='top'?'flex-top-end':'',
								actionsPos=='bottom'?'flex-end-right':'',
							]">
								<slot name="actions" :item="{data:item,index:index}"></slot>
							</view>
						</view>
						<view v-if="item[textKey]" class="py-24 text-align-center text-overflow">
							<slot name="default" :text="{text:item[textKey]}">
								<text class="text-size-s ">{{item[textKey]}}</text>
							</slot>
						</view>
					</view>
					
				</view>
			</block>
			
			<view v-if="listData.length>max-1" :style="{width:alb_body_size+'rpx'}" class="tm-album-item " :class="[`round-${round}`,black_tmeme?'bk':'']">
				<view @click="more" :class="[`px-${gutter}`]">
					<view :style="{width:alb_size+'rpx',height:height||alb_size+'rpx'}" class="relative flex-center flex-col" :class="[`round-${round}`,color_tmeme]">
						<view><text class="iconfont icon-angle-right text-size-xl"></text></view>
						<view class="text-size-s mt-12">更多</view>
					</view>
				</view>
				
			</view>
		</view>
	</view>
</template>

<script>
	/**
	 * 相册集
	 * @property {Array} list = [] 数据列表，可以是对象数组，也可以是字符串数组，也可对象和字符串数组混合型。
	 * @property {Number} grid = [] 默认：4，默认一行几个。
	 * @property {Number} height = [] 默认：0，默认宽度和高度是相同的。指定相册集的高度。如果指定了高度将不使用计算的高度。
	 * @property {Number} gutter = [] 默认：4，图片之间的间隙。
	 * @property {Number} round = [] 默认：3，项目的圆角
	 * @property {Number} max = [] 默认：999，最大可展示数量，超过不显示，以更多项目代替。
	 * @property {String} rang-key = [] 默认：'src'，如果list的项目是对象，则需要提供图片字段名称
	 * @property {String} text-key = [] 默认：'text'，如果list的项目是对象，则需要提供图片标题字段名称
	 * @property {Boolean|String} preview = [] 默认：true，点击图片是否可以预览。
	 * @property {Boolean|String} actions-pos = [bottom|top] 默认：bottom，可选bottom,top,内部压在图片上方的元素位置。内容可在插槽actions中布局。
	 * @property {String} color = [] 默认：primary，主题色名称，显示更多项目的背景主题色。
	 */
	import tmImages from '@/tm-vuetify/components/tm-images/tm-images.vue';
	export default {
		name:"tm-album",
		components: {
			tmImages
		},
		props: {
			list: {
				type: Array,
				default: ()=>[]
			},
			//指定相册集的高度。如果指定了高度将不使用计算的高度。
			height:{
				type:Number,
				default:0
			},
			grid:{
				type:Number,
				default:4
			},
			gutter:{
				type:Number,
				default:4
			},
			round:{
				type:Number,
				default:3
			},
			max:{
				type:Number,
				default:999
			},
			rangKey: {
				type: String,
				default: 'src'
			},
			textKey: {
				type: String,
				default: 'text'
			},
			preview:{
				type:Boolean,
				default:true
			},
			actionsPos:{
				type:String,
				default:'bottom',//bottom，top
			},
			black:{
				type:Boolean,
				default:null
			},
			// 跟随主题色的改变而改变。
			fllowTheme:{
				type:Boolean|String,
				default:true
			},
			color:{
				type:String,
				default:"primary"
			},
			model:{
				type:String,
				default:'scaleToFill',//bottom，top
			}
		},
		data() {
			return {
				alb_size:0,
				alb_body_size:0,
				alb_wk_body_size:0,
				listAlbum:[]
			};
		},
		watch:{
			list:{
				deep:true,
				handler(){
					
					this.listData = this.chuliList(this.list) 
				}
			}
		},
		created(){
			this.listData = this.chuliList(this.list)
		},
		computed: {
			black_tmeme: function() {
				if (this.black !== null) return this.black;
				return this.$tm.vx.state().tmVuetify.black;
			},
			color_tmeme:function(){
				if(this.$tm.vx.state().tmVuetify.color!==null&&this.$tm.vx.state().tmVuetify.color && this.fllowTheme){
					return this.$tm.vx.state().tmVuetify.color;
				}
				return this.color;
			},
			listData:{
				get:function () {
					return this.listAlbum; 
				},
				set:function (val) {
					this.listAlbum = val;
				}
			}
		},
		async mounted() {
			await this.setInits();
		},
		methods: {
			//处理数据，以标准化。
			chuliList(){
				let list = [...this.list];
				let p = [];
				for (var i = 0; i < list.length; i++) {
					if(typeof list[i] == 'string'){
						let ls = {}
						ls[this.rangKey] = list[i];
						ls[this.textKey] = null;
						p.push(ls)
					}else if(typeof list[i] == 'object'){
						let ls = {}
						ls[this.rangKey] = '';
						ls[this.textKey] = null;
						ls={...ls,...list[i]}
						p.push(ls)
					}
				}
				
				return p;
			},
			async setInits(){
				this.$nextTick(async function() {
					let t = this;
					this.$tm.sleep(150).then(async function(){
						let p = await t.$Querey('.tm-album',t).catch(e =>{});
						if (!p[0]) return;
						let grid = t.grid || 1;
						let size = (p[0].width+t.gutter)/grid;
						let gutter = t.gutter*2
						let ratio = 750/uni.upx2px(750);
						let blv = size * ratio - gutter;
						t.alb_body_size = size * ratio;
						t.alb_wk_body_size = p[0].width*ratio+t.gutter*2+(grid*2);
						t.alb_size = blv;
					})
					
					
				
				});
			},
			clickAlbum(item,index){
				if(this.preview){
					uni.$tm.preview(item[this.rangKey],this.listData,this.rangKey);
				}
				this.$emit('click',{item,index})
			},
			more(){
				this.$emit('more')
			}
			
		},
	}
</script>

<style lang="scss" scoped>
.tm-album{
	.tm-album-action{
		
	}
}
</style>