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;
}
</style>