dreamland/pages/dream/view/pic.vue

<template name="pic">
	<view class="cover">
		<image :src="item.pic" mode="widthFix" :class="['default', 'slide-image-'+item.type]"></image>
		<block v-for="(v, k) in item.text">
			<view :class="['abs-tag', config.position[v.text-1]]" v-if="v.name">
				<view v-for="(v1, k1) in v.name_array">
					<text v-bind:style="{backgroundColor:(v.bgcolor || 'transparent'),color:v.color,fontSize:v.size+'px'}" v-if="v1">{{v1}}</text>
				</view>
			</view>
		</block>
		<view class="btn-save-img" :data-url="item.pic" @click="download" v-if="item.is_button == 1"></view>
	</view>
</template>

<script>
export default {
	name: "pic",
	props: {
		config : {
			type : Object,
			value : null
		},
		item : {
			type    : Object,
			value	: null
		},
	},
	methods:{
		download : function(e) {
			var url = e.target.dataset.url;
			var self = this;
			uni.downloadFile({
				url,
				success: res => {
					if (res.statusCode === 200) {
						console.info(res);
						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
							success: function() {
								self.alert('保存成功');
							},
							fail: function() {
								self.alert('保存失败，请稍后重试');
							}
						});
					} else {
						self.alert('下载失败');
					}
				}
			});
		}
	},
}
</script>

<style>
.cover{
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
}
.slide-image-1 {
  width: 750rpx;
  height: 1386rpx;
  display: block;
}
.slide-image-2 {
  width: 750rpx;
  height: 100%;
  display: block;
}
.slide-image-3 {
  width: 100%;
  height: 1386rpx;
  display: block;
}
.slide-image-4 {
  width: 100%;
  height: 100%;
  display: block;
}
.long-wrapper {
  position: relative;
}

.abs-tag {
  position: fixed;
  color: #fff;
  display: flex;
  flex-direction: column;
}
.abs-tag view{
  line-height: 1em;
  overflow: hidden;
}
.abs-tag text {
  background-color: #000;
  margin-bottom: 10rpx;
  font-size: 28rpx;
  line-height: 1;
  padding: 0 2rpx;
}

.abs-tag.tl {
  top: 88rpx;
  left: 30rpx;
}

.abs-tag.tr {
  top: 88rpx;
  right: 30rpx;
  text-align: right;
}

.abs-tag.tc {
  top: 88rpx;
  left: 50%;
  transform: translate(-50%, 0);
  text-align: center;
}

.abs-tag.cl {
  top: 50%;
  transform: translate(0, -50%);
  left: 30rpx;
}

.abs-tag.cc {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.abs-tag.cr {
  top: 50%;
  transform: translate(0, -50%);
  right: 30rpx;
  text-align: right;
}

.abs-tag.bl {
  bottom: 125rpx;
  left: 30rpx;
}

.abs-tag.br {
  bottom: 125rpx;
  right: 30rpx;
  text-align: right;
}

.abs-tag.bc {
  bottom: 125rpx;
  left: 50%;
  transform: translate(-50%, 0);
  text-align: center;
}

.btn-save-img {
  position: absolute;
  bottom: 30rpx;
  left: 135rpx;
  left: 30rpx;
  position: fixed;
  left: 30rpx;
  bottom: 30rpx;
  background: url(../../../static/icon/ico-download.png) no-repeat;
  background-size: 80rpx 80rpx;
  width: 80rpx;
  height: 80rpx;
}

.default{
  background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAArCAYAAACXblYnAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QjQxN0Y2QUNFMTZEMTFFODk5RkM5MDEzRUIwNTZBNzkiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QjQxN0Y2QURFMTZEMTFFODk5RkM5MDEzRUIwNTZBNzkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpCNDE3RjZBQUUxNkQxMUU4OTlGQzkwMTNFQjA1NkE3OSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpCNDE3RjZBQkUxNkQxMUU4OTlGQzkwMTNFQjA1NkE3OSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PtTor7AAABAOSURBVHja7F0HuBXF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) no-repeat center center #e5e5e5;
  background-size: 256rpx 43rpx;
}
</style>