Pichome/dzz/details/template/pc/components/right.htm

<div class="information-box">
	<el-scrollbar class="page-component__scroll">
		<div style="padding-right: 20px;">
			<div class="title">
				<template v-if="parseInt(imagesData.level)==1">
					<el-image style="width: 25px; height: 25px;vertical-align: bottom;" src="dzz/pichome/image/grade/1.png" fit="contain">
						<template #error><div class="el-image__placeholder"></div></template>
					</el-image>
				</template>
				<template v-else-if="parseInt(imagesData.level)==2">
					<el-image style="width: 25px; height: 25px;vertical-align: bottom;" src="dzz/pichome/image/grade/2.png" fit="contain">
						<template #error><div class="el-image__placeholder"></div></template>
					</el-image>
				</template>
				<template v-else-if="parseInt(imagesData.level)==3">
					<el-image style="width: 25px; height: 25px;vertical-align: bottom;" src="dzz/pichome/image/grade/3.png" fit="contain">
						<template #error><div class="el-image__placeholder"></div></template>
					</el-image>
				</template>
				<template v-else-if="parseInt(imagesData.level)==4">
					<el-image style="width: 25px; height: 25px;vertical-align: bottom;" src="dzz/pichome/image/grade/4.png" fit="contain">
						<template #error><div class="el-image__placeholder"></div></template>
					</el-image>
				</template>
				<template v-else-if="parseInt(imagesData.level)==5">
					<el-image style="width: 25px; height: 25px;vertical-align: bottom;" src="dzz/pichome/image/grade/5.png" fit="contain">
						<template #error><div class="el-image__placeholder"></div></template>
					</el-image>
				</template>
				<span v-cloak>{{imagesData.name}}.{{imagesData.ext}}</span>
			</div>
			<div class="operation clearfix" >
				<el-button 
					plain 
					v-cloak 
					size="large"
					v-if="imagesData.download"
					@click="rightDown"
					style="width: 100%;">立即下载</el-button>
				<el-tooltip 
				v-if="(imagesData.iniframe || imagesData.icondata || imagesData.originalimg) && imagesData.download" 
				class="item" 
				effect="dark" 
				content="查看原图" 
				placement="bottom">
					<el-button plain circle icon="View" size="large" @click="rightView"></el-button>
				</el-tooltip>
				
				<el-tooltip v-if="imagesData.share" class="item" effect="dark" content="分享" placement="bottom">
					<el-button plain @click="rightShare" size="large" v-if="imagesData.share" circle icon="Share"></el-button>
				</el-tooltip>
				<el-tooltip v-if="parseInt(imagesData.collection)" class="item" effect="dark" content="收藏" placement="bottom">
					<el-button plain @click="rightCollection" size="large" v-if="parseInt(imagesData.collection)" circle icon="Star"></el-button>
				</el-tooltip>
			</div>
			
			<div class="message">
				<div class="thesis-wrap" v-if="imagesData.colors && imagesData.colors.length">
					<el-text v-cloak truncated tag="b" class="tip-title" size="large" style="color: var(--el-text-color-primary);">颜色</el-text>
					<ul class="color clearfix" v-cloak>
						<li class="color-list" v-for="citem in imagesData.colors">
							<el-dropdown v-cloak trigger="click" @visible-change="rightShowPopoverColor(citem.val)" @command="rightCommandColor" placement="bottom">
								<div style="width: 100%;">
									<el-tooltip :content="'#'+citem.val" effect="light" placement="top" popper-class="color-top">
										<div class="bg" :style="{background: '#'+citem.val}"></div>
									</el-tooltip>
								</div>
								<template #dropdown>
									<el-dropdown-menu class="el-popover-color">
										<el-dropdown-item command="common" v-if="DocumentHref">搜索相似颜色的项目</el-dropdown-item>
										<el-dropdown-item :divided="DocumentHref" :command="ColorPopver.base">复制&nbsp;{{ColorPopver.base}}</el-dropdown-item>
										<el-dropdown-item :command="ColorPopver.rgb">复制&nbsp;{{ColorPopver.rgb}}</el-dropdown-item>
										<el-dropdown-item :command="ColorPopver.rgba">复制&nbsp;{{ColorPopver.rgba}}</el-dropdown-item>
										<el-dropdown-item :command="ColorPopver.hsl">复制&nbsp;{{ColorPopver.hsl}}</el-dropdown-item>
										<el-dropdown-item divided :command="ColorPopver.hsv">复制&nbsp;{{ColorPopver.hsv}}</el-dropdown-item>
										<el-dropdown-item :command="ColorPopver.cmyk">复制&nbsp;{{ColorPopver.cmyk}}</el-dropdown-item>
									</el-dropdown-menu>
								</template>
								
							</el-dropdown>
						</li>
					</ul>
				</div>
				
				<div class="thesis-wrap" v-if="imagesData.tag && imagesData.tag.length">
					<el-text v-cloak truncated tag="b" class="tip-title" size="large" style="color: var(--el-text-color-primary);">标签</el-text>
					<div v-if="imagesData.tag" class="label clearfix" v-cloak>
						<el-tag v-for="item in imagesData.tag" size="large" effect="light" type="info" @click="rightClickTag(item.key)">{{item.val}}</el-tag>
					</div>
				</div>
				<div class="thesis-wrap" v-if="imagesData.desc" v-cloak>
					<el-text v-cloak truncated tag="b" class="tip-title" size="large" style="color: var(--el-text-color-primary);">描述</el-text>
					<div v-if="imagesData.desc" class="notes" style="white-space: pre-wrap;">{{imagesData.desc}}</div>
				</div>
			
				<div class="thesis-wrap" v-if="imagesData.link" v-cloak>
					<el-text v-cloak truncated tag="b" size="large" class="tip-title" style="color: var(--el-text-color-primary);">链接</el-text>
					<p class="link">
						<el-link :underline="false" :href="imagesData.link" truncated style="font-size: 12px;" target="_blank">{{imagesData.link}}</el-link>
						<el-icon @click="rightcopyText(imagesData.link)"><Copy-Document /></el-icon>
					</p>
				</div>
				<div class="thesis-wrap" v-if="imagesData.realfianllypath" v-cloak>
					<el-text v-cloak truncated tag="b" size="large" class="tip-title" style="color: var(--el-text-color-primary);">固定地址</el-text>
					<p class="link">
						<el-text v-cloak truncated size="small">{{imagesData.realfianllypath}}</el-text>
						<el-icon @click="rightrealfianllypath(imagesData.realfianllypath)"><Copy-Document /></el-icon>
					</p>
				</div>
				<div class="thesis-wrap" v-if="imagesData.foldernames && imagesData.foldernames.length">
					<el-text v-cloak truncated tag="b" size="large" class="tip-title" style="color: var(--el-text-color-primary);">分类</el-text>
					<div class="label clearfix" style="padding: 0;" v-cloak>
						<el-tag v-for="item in imagesData.foldernames" size="large" effect="light" type="info" @click="rightClickClass(item.key)">
							{{item.val.fname}}</el-tag>
					</div>
				</div>
			
			</div>
			<div class="information">
				<el-text v-cloak truncated tag="b" class="tip" size="large" style="color: var(--el-text-color-primary);">基本信息</el-text>
				<el-row type="flex" class="field">
					<el-col :span="12">
						<el-text v-cloak truncated size="small">评分</el-text>
					</el-col>
					<el-col :span="12" style="text-align: right;">
						<div class="record" v-cloak>
							<div class="el-rate el-rate--small">
								<span class="el-rate__item" v-for="s in parseInt(imagesData.grade)" style="cursor: default;">
									<el-icon class="el-rate__icon is-active"><Star-Filled></Star-Filled></el-icon>
								</span>
								<span class="el-rate__item" v-for="s in 5-parseInt(imagesData.grade)" style="cursor: default;">
									<el-icon class="el-rate__icon"><Star></Star></el-icon>
								</span>
							</div>
						</div>
					</el-col>
				</el-row>
				<el-row type="flex" class="field">
					<el-col :span="12">
						<el-text v-cloak truncated size="small">尺寸</el-text>
					</el-col>
					<el-col :span="12" style="text-align: right;">
						<el-text size="small" style="color: var(--el-text-color-primary);">{{imagesData.width}}×{{imagesData.height}}</el-text>
					</el-col>
				</el-row>
				<el-row type="flex" class="field">
					<el-col :span="12">
						<el-text v-cloak truncated size="small">文件大小</el-text>
					</el-col>
					<el-col :span="12" style="text-align: right;">
						<el-text size="small" style="color: var(--el-text-color-primary);">{{imagesData.fsize}}</el-text>
					</el-col>
				</el-row>
				<el-row type="flex" class="field">
					<el-col :span="12">
						<el-text v-cloak truncated size="small">类型</el-text>
					</el-col>
					<el-col :span="12" style="text-align: right;">
						<el-text size="small" style="color: var(--el-text-color-primary);">{{imagesData.ext}}</el-text>
					</el-col>
				</el-row>
				<el-row type="flex" class="field">
					<el-col :span="12">
						<el-text v-cloak truncated size="small">创建时间</el-text>
					</el-col>
					<el-col :span="12" style="text-align: right;">
						<el-text size="small" style="color: var(--el-text-color-primary);">{{imagesData.mtime}}</el-text>
					</el-col>
				</el-row>
				<el-row type="flex" class="field">
					<el-col :span="12">
						<el-text v-cloak truncated size="small">添加时间</el-text>
					</el-col>
					<el-col :span="12" style="text-align: right;">
						<el-text size="small" style="color: var(--el-text-color-primary);">{{imagesData.btime}}</el-text>
					</el-col>
				</el-row>
				<el-row type="flex" class="field">
					<el-col :span="12">
						<el-text v-cloak truncated size="small">修改时间</el-text>
					</el-col>
					<el-col :span="12" style="text-align: right;">
						<el-text size="small" style="color: var(--el-text-color-primary);">{{imagesData.dateline}}</el-text>
					</el-col>
				</el-row>
			</div>
		</div>
	</el-scrollbar>
	<Dzz-Collectdialog 
        :visible="ImageCollect.visible" 
        :rids="ImageCollect.rid"
		@success="ImageCollectClose"
        @close="ImageCollectClose"></Dzz-Collectdialog>
</div>
<script type="text/javascript">
	var rightMixin = {
		data(){
			return {
				ImageCollect:{
					visible:false,
					rid:[],
				}
			}
		},
		methods:{
			rightShowPopoverColor(val) {
				var rgb = this.rightColorHexToRgb('#' + val);
				var hsl = this.rightColorRgbToHsl(rgb.r, rgb.g, rgb.b);
				var cmyk = this.rightColorRgbToCmyk(rgb.r, rgb.g, rgb.b);
				var hsv = this.rightColorRgbToHsv(rgb.r, rgb.g, rgb.b);
				this.ColorPopver = {
					base: '#' + val,
					rgb: 'rgb(' + rgb.r + ', ' + rgb.g + ', ' + rgb.b + ')',
					rgba: 'rgba(' + rgb.r + ', ' + rgb.g + ', ' + rgb.b + ', 1)',
					hsl: hsl,
					hsv: hsv,
					cmyk: cmyk
				};
			},
			
			async rightCommandColor(val){
				var self = this;
				if(val == 'common'){
					if(!this.DocumentHref)return false;
					<!--{if $opentype=='current'}-->
					window.parent.location.href = this.DocumentHref+'&color=' + this.ColorPopver.base;
					window.parent.location.reload()
					<!--{else}-->
					window.location.href = this.DocumentHref+'&color=' + this.ColorPopver.base;
					<!--{/if}-->
				}else{
					CopyTxt(this,val)
				}
			},
			rightView(){
				if(this.imagesData.realfianllypath){
					window.open(this.imagesData.realfianllypath);
				}else if(this.imagesData.iniframe){
					window.open(this.imagesData.iniframe);
				}else if(this.imagesData.originalimg){
					window.open(this.imagesData.originalimg);
				}else{
					window.open(this.imagesData.icondata);
				}
			},
			async rightShare() {
				var self = this;
				if (self.imagesData.dpath){
					var res = await axios.post('index.php?mod=banner&op=appajax&do=createshare',{path: self.imagesData.dpath});
					var data = res.data;
					if (data.success) {
						CopyTxt(self, data.success);
					} else {
						self.$message({
							message: '分享失败',
							type: 'error'
						});
					}
				} else {
					this.$message({
						message: '数据错误',
						type: 'error'
					});
				}
			
			},
			rightCollection(){
				this.ImageCollect.rid = [this.imagesData.rid]
				this.ImageCollect.visible = true;
			},
			ImageCollectClose(){//收藏关闭
                this.ImageCollect.visible = false;
            },
			async rightDown() {
				var self = this;
				if (self.imagesData.dpath) {
					if(self.isadmin){
						window.open('index.php?mod=pichome&op=download&dpath=' + self.imagesData.dpath);
					}else{
						window.open('index.php?mod=banner&op=download&dpath=' + self.imagesData.dpath);
					}
				} else {
					self.$message({
						message: '数据错误',
						type: 'error'
					});
				}
			
			},
			async rightClickTag(tid){
				var self = this;
				if(!this.DocumentHref)return false;
				<!--{if $opentype=='current'}-->
				window.parent.location.href = this.DocumentHref+'&tag=' + tid;
				window.parent.location.reload()
				<!--{else}-->
				window.location.href = this.DocumentHref+'&tag=' + tid;
				<!--{/if}-->
			},
			async rightClickClass(cid){
				var self = this;
				if(!this.DocumentHref)return false;
				let fidname = sessionStorage.getItem('fidname');
				if(!fidname){
					fidname = 'fid';
				}
				<!--{if $opentype=='current'}-->
				window.parent.location.href = this.DocumentHref+'&'+fidname+'=' + cid;
				window.parent.location.reload()
				<!--{else}-->
				window.location.href = this.DocumentHref+'&'+fidname+'=' + cid;
				<!--{/if}-->
				
			},
			rightcopyText(val) {
				CopyTxt(this, val);
			},
			rightrealfianllypath(val) {
				CopyTxt(this, val);
			},
			rightColorHexToRgb(hex) {
				var str = {
					r: parseInt('0x' + hex.slice(1, 3)),
					g: parseInt('0x' + hex.slice(3, 5)),
					b: parseInt('0x' + hex.slice(5, 7))
				};
				return str;
			},
			rightColorRgbToHsl(r, g, b) {
				r /= 255, g /= 255, b /= 255;
				var max = Math.max(r, g, b),
					min = Math.min(r, g, b);
				var h, s, l = (max + min) / 2;
				if (max == min) {
					h = s = 0; // achromatic
				} else {
					var d = max - min;
					s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
					switch (max) {
						case r:
							h = (g - b) / d + (g < b ? 6 : 0);
							break;
						case g:
							h = (b - r) / d + 2;
							break;
						case b:
							h = (r - g) / d + 4;
							break;
					}
					h *= 6;
				}
				return 'hsl(' + Math.round(parseInt(h * 100) / 10) + ', ' + Math.round(parseInt(s * 1000) / 10) +
					'%, ' + Math.round(parseInt(l * 1000) / 10) + '%)';
			},
			rightColorRgbToHsv(R, G, B) {
				R /= 255
				G /= 255
				B /= 255
				var max = Math.max(R, G, B)
				var min = Math.min(R, G, B)
				var range = max - min
				var V = max
				var S = V === 0 ? 0 : range / V
				var H = 0
				if (R === V) H = (60 * (G - B)) / range
				if (G === V) H = 120 + (60 * (B - R)) / range
				if (B === V) H = 240 + (60 * (R - G)) / range
				if (range === 0) H = 0
				if (H < 0) H += 360
				return 'hsv(' + Math.round(H) + ', ' + Math.round(parseInt(S * 1000) / 10) + '%, ' + Math.round(
					parseInt(V * 1000) / 10) + '%)';
			},
			rightColorRgbToCmyk(R, G, B) {
				if ((R == 0) && (G == 0) && (B == 0)) {
					return [0, 0, 0, 1];
				} else {
					var calcR = 1 - (R / 255),
						calcG = 1 - (G / 255),
						calcB = 1 - (B / 255);
			
					var K = Math.min(calcR, Math.min(calcG, calcB)),
						C = (calcR - K) / (1 - K),
						M = (calcG - K) / (1 - K),
						Y = (calcB - K) / (1 - K);
			
					return 'cmyk(' + Math.round(parseInt(C * 1000) / 10) + '%, ' + Math.round(parseInt(M * 1000) /
						10) + '%, ' + Math.round(parseInt(Y * 1000) / 10) + '%, ' + Math.round(parseInt(K *
						1000) / 10) + '%)';
				}
			},
		}
	};
</script>