123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374 |
- <template>
- <view class="previewImage" :style="{ 'background-color': 'rgba(0,0,0,' + opacity + ')' }" v-if="show" @tap.stop="close" @touchmove.stop.prevent>
- <swiper class="swiper" :current="index" @change="swiperChange" :disable-touch="swiper" :circular="circular">
- <swiper-item v-for="(img, i) in imgs" :key="'swiper-item-'+i" :id="'swiper-item-'+i">
- <movable-area class="marea" scale-area>
- <movable-view
- :id="'movable-view-'+i"
- :key="'movable-view-'+i"
- class="mview"
- direction="all"
- :out-of-bounds="false"
- :inertia="true"
- damping="90"
- friction="2"
- scale="true"
- scale-min="1"
- scale-max="4"
- :scale-value="scale"
- @scale="onScale"
- @change="movableChange"
- >
- <image
- :id="'image-'+i"
- :key="'movable-view'+i"
- class="image"
- :src="img"
- :style="{ transform: 'rotateZ(' + deg + 'deg)' }"
- :data-index="i"
- :data-src="img"
- mode="widthFix"
- @touchmove="handletouchmove"
- @touchstart="handletouchstart"
- @touchend="handletouchend"
- />
- </movable-view>
- </movable-area>
- </swiper-item>
- </swiper>
- <view class="page" v-if="imgs.length > 0">
- <text class="text">{{ index + 1 }} / {{ imgs.length }}</text>
- <view class="text">长按保存</view>
- </view>
-
-
- <view class="desc" v-if="descs.length > 0 && descs.length == imgs.length && descs[index].length > 0">{{ descs[index] }}</view>
-
- </view>
- </template>
- <script>
- export default {
- name: 'ksj-previewImage',
- props: {
- imgs: {
-
- type: Array,
- required: true,
- default: () => {
- return [];
- }
- },
- descs: {
-
- type: Array,
- required: false,
- default: () => {
- return [];
- }
- },
-
- opacity: {
- type: Number,
- default: 0.8
- },
-
- saveBtn: {
- type: Boolean,
- default: true
- },
-
- rotateBtn: {
- type: Boolean,
- default: true
- },
-
- circular:{
- type: Boolean,
- default: false
- }
- },
- data() {
- return {
- swiper:false,
- show: false,
- index: 0,
- deg: 0,
- time: 0,
- interval: 1000,
- scale: 1
- };
- },
- methods: {
-
- onScale(e) {
-
- },
-
-
- handletouchstart(e) {
- var tchs = e.touches.length;
- if (tchs != 1) {
- return false;
- }
- this.time = setTimeout(() => {
- this.onLongPress(e);
- }, this.interval);
- return false;
- },
-
- handletouchend() {
- clearTimeout(this.time);
- if (this.time != 0) {
-
- }
- return false;
- },
-
- handletouchmove() {
- clearTimeout(this.time);
- this.time = 0;
- },
-
- onLongPress(e) {
- var src = e.currentTarget.dataset.src;
- var index = e.currentTarget.dataset.index;
- var data = { src: src, index: index };
- this.$emit('longPress', data);
- },
-
-
- swiperChange(e) {
- this.index = e.target.current;
-
- this.$nextTick(function() {
- this.scale = 1;
- })
-
-
-
- },
-
-
- movableChange(e) {
-
-
- },
-
-
- save(e) {
- var _this = this;
- var src = this.imgs[this.index];
-
-
- uni.authorize({
- scope: 'scope.writePhotosAlbum',
- success() {
- console.log('kxj-previewImage:允许储存');
- _this.downloadImg(src);
- }
- });
-
-
- this.downloadImg(src);
-
-
-
- var abtn = document.createElement('a');
- abtn.href = src;
- abtn.download = '';
- abtn.target = '_blank';
- abtn.click();
-
- },
-
- downloadImg(src) {
-
- uni.showLoading({
- title: '大图提取中'
- });
- uni.downloadFile({
- url: src,
- success: function(res) {
- console.log('kxj-previewImage:下载成功');
- uni.hideLoading();
- uni.saveImageToPhotosAlbum({
- filePath: res.tempFilePath,
- success: () => {
- uni.showToast({
- title: '已保存至相册',
- duration: 1000
- });
- }
- });
- },
- fail: function() {
- uni.hideLoading();
- uni.showToast({
- title: '图片下载失败',
- icon: 'none',
- duration: 1000
- });
- }
- });
- },
-
- rotate(e) {
- this.deg = this.deg == 270 ? 0 : this.deg + 90;
- },
-
- open(e) {
- if (e === null || e === '') {
- console.log('kxj-previewImage:打开参数无效');
- return;
- }
- if (!isNaN(e)) {
- if(e>=this.imgs.length){
- console.log('kxj-previewImage:打开参数无效');
- }else{
- this.index = e;
- }
- } else {
- var index = this.imgs.indexOf(e);
- if(index===-1){
- this.imgs = [e];
- this.index = 0;
- console.log('kxj-previewImage:未在图片地址数组中找到传入的图片,已为你自动打开单张预览模式')
- }else{
- this.index = this.imgs.indexOf(e);
- }
- }
- console.log('kxj-previewImage:当前预览图片序号'+this.index);
- this.show = true;
- },
-
- close(e) {
- this.show = false;
- this.index = 0;
- this.deg = 0;
- this.time = 0;
- this.interval = 1000;
- this.scale = 1;
- }
- }
- };
- </script>
- <style lang="scss" scoped>
- .previewImage {
- z-index: 999;
- position: fixed;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- background-color: #000000;
- user-select: none;
- .swiper {
- width: 100%;
- height: 100%;
- .marea {
- height: 100%;
- width: 100%;
- position: fixed;
- overflow: hidden;
- .mview {
- display: flex;
- align-items: center;
- justify-content: center;
- width: 100%;
- height: auto;
- min-height: 100%;
- .image {
- width: 100%;
- }
- }
- }
- }
- .page {
- position: absolute;
- width: 100%;
- bottom: 20rpx;
- text-align: center;
- .text {
- color: #fff;
- font-size: 26rpx;
- background-color: rgba(0, 0, 0, 0.5);
- padding: 3rpx 16rpx;
- border-radius: 20rpx;
- user-select: none;
- }
- }
- .save {
- position: absolute;
- left: 10rpx;
- width: 120rpx;
- height: 56rpx;
- bottom: 10rpx;
- text-align: center;
- padding: 10rpx;
- .text {
- background-color: rgba(0, 0, 0, 0.5);
- color: #fff;
- font-size: 30rpx;
- border-radius: 20rpx;
- border: 1rpx solid #f1f1f1;
- padding: 6rpx 22rpx;
- user-select: none;
- }
- .text:active {
- background-color: rgba(100, 100, 100, 0.5);
- }
- }
- .rotate {
- position: absolute;
- right: 10rpx;
- width: 120rpx;
- height: 56rpx;
- bottom: 10rpx;
- text-align: center;
- padding: 10rpx;
- .text {
- background-color: rgba(0, 0, 0, 0.5);
- color: #fff;
- font-size: 30rpx;
- border-radius: 20rpx;
- border: 1rpx solid #f1f1f1;
- padding: 6rpx 22rpx;
- user-select: none;
- }
- .text:active {
- background-color: rgba(100, 100, 100, 0.5);
- }
- }
- .desc {
- position: absolute;
- top: 0;
- width: 100%;
- padding: 5rpx 10rpx;
- text-align: center;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- background-color: rgba(0, 0, 0, 0.5);
- color: #fff;
- font-size: 28rpx;
- letter-spacing: 3rpx;
- user-select: none;
- }
- }
- </style>
|