dreamland/lib/dever/components/position.vue

<template name="dever-position">
	<view>
		<block v-for="(v, k) in item" :key="k">
			<view :class="['position-tag', position[v.text-1]]" v-if="v.name" @click="view(v.goods_id)">
				<view v-for="(v1, k1) in v.name_array" :key="k1">
					<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="position-save" :data-url="down" @click="download" v-if="button == 1"></view>
	</view>
</template>

<script>
export default {
	props: {
		button : {
			type : String,
			value : null
		},
		down : {
			type : String,
			value : null,
		},
		item : {
			type    : Array,
			value	: null
		},
	},
	data() {
		return {
			position: ["tl","tc","tr","cl","cc","cr","bl","bc","br"],
		};
	},
	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.Dever.alert('保存成功');
							},
							fail: function() {
								self.Dever.alert('保存失败，请稍后重试');
							}
						});
					} else {
						self.Dever.alert('下载失败');
					}
				}
			});
		},
		view : function(id) {
			this.Dever.location('dream/product?id=' + id + '&table=&code=' + this.Dever.config.code);
		}
	},
}
</script>

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

.position-tag.tl {
  top: 88rpx;
  left: 30rpx;
  top: 5%;
  left: 5%;
}

.position-tag.tr {
  top: 88rpx;
  right: 30rpx;
  top: 5%;
  left: 5%;
  text-align: right;
}

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

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

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

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

.position-tag.bl {
  bottom: 125rpx;
  left: 30rpx;
  bottom: 10%;
  left: 5%;
}

.position-tag.br {
  bottom: 125rpx;
  bottom: 10%;
  right: 30rpx;
  text-align: right;
}

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

.position-save {
  position: absolute;
  bottom: 30rpx;
  left: 135rpx;
  left: 30rpx;
  position: fixed;
  left: 30rpx;
  bottom: 30rpx;
  background: url(@/static/icon/position-save.png) no-repeat;
  background-size: 80rpx 80rpx;
  width: 80rpx;
  height: 80rpx;
}
</style>