<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>