<template>
<view class="background-modal">
<!-- <view class="content-title-name-status-style">
<view class="bug-content-title">
{{content_name}}
</view>
<button type="default" @click="toPayImageVideoMember()">
购买
</button>
</view>
<view class="image-model-background-style">
<view class="image-model-one-background-style" v-for="(itemImages,ids) in itemImagesList" :key="ids" >
<image :src="itemImages" lazy-load v-if="isVip" mode="aspectFill" @tap="viewLargeImage(ids)"></image>
<image :src="itemImages" lazy-load v-else :class="[ids>4 ? 'filter':'']" mode="aspectFill" @tap="viewLargeImage(ids)"></image>
</view>
</view> -->
<view class="image-black">
<swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :disable-touch='isSwiper' :duration="duration" :current='current' @transition='itemChange' @change='toPay' @animationfinish='endAni'>
<swiper-item class="swiper-item" v-for="(imgItem,idx) in imgSmaList" :key="idx" >
<movable-area class="swiper-image" :scale-area='isScale' :style="{height: (pageWid/(imgItem.img_wid/imgItem.img_hei))*2 +'upx'}">
<movable-view class="swiper-image-child" :scale-value='sca_val' :disabled="movDis" @touchstart="touched" @scale='scaleFun' out-of-bounds='false' friction='1' inertia='true' animation='true' :scale='isScale' scale-min='1' scale-max='4' :x="x" :y="y" :direction="dir" @change.stop="addChange">
<img :src="image_directory+imgItem.url" ref="innerbox" mode="aspectFit" class="sca-img" @touchmove="imgTouchmove" @touchend="imgTouched" @longpress="saveImg"></img>
</movable-view>
</movable-area>
</swiper-item>
</swiper>
<view class="dots">
<text>{{current+1}}/{{imageListNumber.length}}</text>
</view>
</view>
</view>
</template>
<script>
import app from '@/App.vue'
import api from '@/api/request.js'
var that;
export default {
data() {
return {
images_list_all:[],//所有的图片
itemImagesList:[],
content_name:null,
id:null,//图片id
imageListNumber: [], //swiper的数组
isVip: false, //是否为会员
indicatorDots: false, //是否有指示点
autoplay: false, //是否自动滑动
duration: 10, //动画速度
current: 0, //当前滑块
moveSave: true,
scale: 1,
isSwiper: false,
image_directory: '',
sca_val: 1,
imgSmaList: [],
swipered: 0,
x:0,
y:0,
dir: 'horizontal',
movDis: false,
isScale: true,
reLoadList: {
index: '',
url: ''
},
img_sty:{
height: '100%'
},
img_hei: '',
pageWid: '',
}
},
created(){
that = this;
var imageObject = app.globalData.imageObject
console.log("imageObject:",imageObject);
that.content_name = imageObject.image.release_time+"第"+imageObject.image.periodical+"期"+imageObject.image.subject
that.id = imageObject.image.id
that.image_directory = imageObject.image_directory;
uni.getSystemInfo({
success: function (res) {
that.pageWid = res.windowWidth;
}
});
var imageDataList = imageObject.image.image_path.split(',');
if(app.globalData.userInfo.member_rank == null){
that.isVip = false;
} else {
that.isVip = true;
}
for(let h = 0;h < imageDataList.length;h++){
var imgJson = {
url: '',
img_wid: '',
img_hei: ''
}
console.log("url",imageDataList[h])
imgJson.url = imageDataList[h];
var url = that.image_directory+imageDataList[h];
that.getImgWid(url,h);
that.getImgHei(url,h);
// uni.getImageInfo({
// src: that.image_directory + url,
// success: function (image) {
// console.log(image.width);
// console.log(image.height);
// imgJson.img_wid = image.height;
// imgJson.img_hei = image.width
// console.log('aad',url)
// // imgJson.size = that.pageWid/(image.width/image.height);
// }
// })
imageDataList[h] = imgJson
}
that.imageListNumber = imageDataList;
that.current = 0;
that.swipered = 0;
// if(that.itemImagesList.length<app.globalData.imagesLimitNumber){
if(that.imageListNumber.length < 6){
for(var j=0;j<that.imageListNumber.length;j++){
that.imgSmaList[j] = that.imageListNumber[j];
}
} else {
for(var j=0;j<6;j++){
that.imgSmaList[j] = that.imageListNumber[j];
}
}
console.log(that.imgSmaList);
},
onReady(){
// let div = that.$refs.innerbox;
// that.img_hei = div[0].clientHeight + 'px';
// console.log(that.img_hei);
that = this
},
//页面滚动到底部的事件
// onReachBottom(){
// that.startIndex = that.startIndex+12
// var start =null;
// var end = null;
// if(that.startIndex > that.accountIndex){
// start = that.startIndex-12;
// end = that.accountIndex;
// } else {
// start = that.startIndex-12;
// end = that.startIndex;
// }
// var sliceList = that.images_list_all.slice(start,end);
// for(let i=0;i<sliceList.length;i++){
// that.imgSmaList.push(that.image_directory+sliceList[i]);
// };
// },
methods: {
toPayImageVideoMember(){
that.current = 3;
app.globalData.imageInfoObj = {
buyType:0,
imageObject:app.globalData.imageObject
}
uni.navigateTo({
url:'/pages/payImageVideoMember/payImageVideoMember'
})
},
getImgWid(url,index){
uni.getImageInfo({
src: url,
success: function (image) {
console.log(image);
that.imageListNumber[index].img_wid = image.width
},
fail:function(err){
resolve(false);
}
});
},
getImgHei(url,index){
uni.getImageInfo({
src: url,
success: function (image) {
that.imageListNumber[index].img_hei = image.height;
},
fail:function(err){
resolve(false);
}
});
},
scaleFun(e){
that.scale = e.detail.scale;
// const query = uni.createSelectorQuery().in(that).selectAll('.sca-img');
// query.boundingClientRect(data => {
// that.img_hei = JSON.stringify(data[that.current].height);
// }).exec();
// that.img_sty = {
// height: that.img_hei*2 + 'upx',
// }
// console.log(that.img_sty);
if(that.scale == 1){
that.isSwiper = false;
that.moveSave = true;
that.dir = 'horizontal';
} else {
that.dir = 'all'
// that.reLoadList.index = that.current;
// that.reLoadList.url = that.imgSmaList[that.current];
that.movDis = false;
that.isSwiper = true;
that.moveSave = false;
}
},
saveImg(){
if(app.globalData.userInfo.member_rank!=null){
if(that.moveSave) {
that.movDis = false;
that.isSwiper = true;
uni.showModal({
title: '温馨提示',
cancelText: '取消',
confirmText: '确认',
content: '是否保存图片？',
success: function(res) {
that.movDis = true;
that.isSwiper = false;
if (res.confirm) {
console.log("是否保存?"+that.image_directory + that.imageListNumber[that.current].url);
uni.saveImageToPhotosAlbum({
filePath: that.image_directory + that.imageListNumber[that.current].url,
success: function () {
uni.showToast({
title: '已保存',
icon: 'none',
duration:1000
})
console.log('save success');
}
});
}
}
});
}
}
},
toPay(e){
that.moveSave = true;
that.current = e.detail.current;
that.movDis = false;
if(app.globalData.userInfo.member_rank == null){
if(that.current > 4){
that.toPayImageVideoMember();
}
}
if(that.sca_val == 1){
that.sca_val = 1.01;
} else {
that.sca_val = 1;
}
console.log('adasda，'+that.sca_val)
// if(that.scale > 1){
// console.log(that.reLoadList);
// that.imgSmaList[that.reLoadList.index] = that.reLoadList.url;
// console.log('add'+that.imgSmaList[that.reLoadList.index]);
// }
if(that.current+5 < that.imageListNumber.length){
if(that.swipered < that.current){
that.swipered = that.current;
that.imgSmaList[that.current+5] = that.imageListNumber[that.current+5]
}
}
},
touch(){
that.isSwiper = true;
},
touched(){
if(that.scale > 1){
that.movDis = false;
that.isSwiper = true;
}
},
addChange(e){
if(that.scale > 1){
// console.log(e)
if(e.detail.source == 'out-of-bounds'||e.detail.source == 'touch-out-of-bounds'){
that.isSwiper = false;
} else {
that.touchSource = e.detail.source;
that.isSwiper = true;
}
}
},
itemChange(){
that.isSwiper = false;
that.movDis = true;
that.moveSave = false;
},
imgTouchmove(){
that.moveSave = false;
},
imgTouched(){
that.moveSave = true;
},
endAni(){
that.moveSave = true;
that.movDis = false;
that.sca_val = 1;
},
}
}
</script>
<style scoped lang="less">
* {
margin: 0;
padding: 0;
}
.content-title-name-status-style{
width: 100%;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
}
.bug-content-title{
width: 70%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.content-title-name-status-style button{
width: 15%;
margin-left: 10%;
height: 50%;
display: flex;
justify-content: center;
align-items: center;
background-color: #CE4096;
color: #FFFFFF;
font-size: 13px;
border-radius: 5px;
}
.image-model-background-style{
width: 95%;
margin-left: 2.5%;
margin-top: 10px;
display: flex;
flex-wrap: wrap;
justify-content: left;
align-items: center;
}
.image-model-one-background-style{
width: 30%;
height: 180px;
margin-right: 3%;
margin-top: 10px;
}
.image-model-background-style image{
width: 100%;
height:100%;
margin-right: 3%;
margin-top: 10px;
}
.filter{
filter: blur(10px);
}
.image-black{
display: block;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 10;
background: rgba(0,0,0,1);
}
.page-section-spacing{
width: 100%;
height: 100%;
}
.swiper{
width: 100%;
height: 100%;
}
.swiper-item{
width: 100%;
height: 100%;
}
.swiper-image{
position: absolute;
left: 50%;
top: 50%;
width: 100%;
height: 100%;
transform: translate(-50%, -50%);
}
.swiper-image-child{
width: 100%;
height: 100%;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
.sca-img{
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
max-height: 100%;
max-width: 100%;
}
.dots{
width: 100px;
position: absolute;
top: 10px;
left: 50%;
z-index: 999;
color: #fff;
text-align: center;
margin-left: -50px;
}
</style>
关注我的公众号SpaceObj 领取idea系列激活码
