gaoxs
5 years ago
31 changed files with 1293 additions and 1137 deletions
@ -1,145 +1,153 @@
|
||||
<template> |
||||
<view class="distribution-posters"> |
||||
<view class="slider-banner banner"> |
||||
<swiper indicatorDots="true"> |
||||
<block v-for="(item, infoIndex) in info" :key="infoIndex"> |
||||
<swiper-item> |
||||
<image class="slide-image" :src="item.wap_poster" mode="widthFix" show-menu-by-longpress /> |
||||
</swiper-item> |
||||
</block> |
||||
</swiper> |
||||
</view> |
||||
<view class="keep bg-color-red" @click="saveImg">保存海报</view> |
||||
</view> |
||||
<view class="distribution-posters"> |
||||
<view class="slider-banner banner"> |
||||
<swiper indicatorDots="true"> |
||||
<block v-for="(item, infoIndex) in info" :key="infoIndex"> |
||||
<swiper-item> |
||||
<image class="slide-image" :src="item.wap_poster" mode="widthFix" show-menu-by-longpress /> |
||||
</swiper-item> |
||||
</block> |
||||
</swiper> |
||||
</view> |
||||
<view class="keep bg-color-red" @click="saveImg">保存海报</view> |
||||
</view> |
||||
</template> |
||||
<script> |
||||
// import { swiper, swiperSlide } from "vue-awesome-swiper"; |
||||
import { getSpreadImg } from "@/api/user"; |
||||
// import { swiper, swiperSlide } from "vue-awesome-swiper"; |
||||
import { |
||||
getSpreadImg |
||||
} from "@/api/user"; |
||||
|
||||
export default { |
||||
name: "Poster", |
||||
components: { |
||||
// swiper, |
||||
// swiperSlide |
||||
}, |
||||
props: {}, |
||||
data: function() { |
||||
return { |
||||
swiperPosters: { |
||||
speed: 1000, |
||||
effect: "coverflow", |
||||
slidesPerView: "auto", |
||||
centeredSlides: true, |
||||
coverflowEffect: { |
||||
rotate: 0, // 旋转的角度 |
||||
stretch: -20, // 拉伸 图片间左右的间距和密集度 |
||||
depth: 100, // 深度 切换图片间上下的间距和密集度 |
||||
modifier: 3, // 修正值 该值越大前面的效果越明显 |
||||
slideShadows: false // 页面阴影效果 |
||||
}, |
||||
observer: true, |
||||
observeParents: true |
||||
}, |
||||
info: [], |
||||
activeIndex: 0 |
||||
}; |
||||
}, |
||||
mounted: function() { |
||||
this.getIndex(); |
||||
let that = this; |
||||
// this.swiper.on("slideChange", function() { |
||||
// that.activeIndex = that.swiper.activeIndex; |
||||
// }); |
||||
}, |
||||
computed: { |
||||
swiper() { |
||||
// return this.$refs.mySwiper.swiper; |
||||
} |
||||
}, |
||||
methods: { |
||||
getIndex: function() { |
||||
let that = this; |
||||
getSpreadImg().then( |
||||
res => { |
||||
that.info = res.data; |
||||
}, |
||||
err => { |
||||
uni.showToast({ |
||||
title: err.msg || err.response.data.msg, |
||||
icon: 'none', |
||||
duration: 2000 |
||||
}); |
||||
} |
||||
); |
||||
}, |
||||
downloadIamge: function(imgsrc, name) { |
||||
var that = this; |
||||
this.isDown = true; |
||||
var downloadUrl = imgsrc; |
||||
export default { |
||||
name: "Poster", |
||||
components: { |
||||
// swiper, |
||||
// swiperSlide |
||||
}, |
||||
props: {}, |
||||
data: function() { |
||||
return { |
||||
swiperPosters: { |
||||
speed: 1000, |
||||
effect: "coverflow", |
||||
slidesPerView: "auto", |
||||
centeredSlides: true, |
||||
coverflowEffect: { |
||||
rotate: 0, // 旋转的角度 |
||||
stretch: -20, // 拉伸 图片间左右的间距和密集度 |
||||
depth: 100, // 深度 切换图片间上下的间距和密集度 |
||||
modifier: 3, // 修正值 该值越大前面的效果越明显 |
||||
slideShadows: false // 页面阴影效果 |
||||
}, |
||||
observer: true, |
||||
observeParents: true |
||||
}, |
||||
info: [], |
||||
activeIndex: 0 |
||||
}; |
||||
}, |
||||
mounted: function() { |
||||
this.getIndex(); |
||||
let that = this; |
||||
// this.swiper.on("slideChange", function() { |
||||
// that.activeIndex = that.swiper.activeIndex; |
||||
// }); |
||||
}, |
||||
computed: { |
||||
swiper() { |
||||
// return this.$refs.mySwiper.swiper; |
||||
} |
||||
}, |
||||
methods: { |
||||
getIndex: function() { |
||||
let that = this; |
||||
let form = {} |
||||
if (this.$deviceType == 'app') { |
||||
form.form = 'app' |
||||
} |
||||
getSpreadImg(form).then( |
||||
res => { |
||||
that.info = res.data; |
||||
}, |
||||
err => { |
||||
uni.showToast({ |
||||
title: err.msg || err.response.data.msg, |
||||
icon: 'none', |
||||
duration: 2000 |
||||
}); |
||||
} |
||||
); |
||||
}, |
||||
downloadIamge: function(imgsrc, name) { |
||||
var that = this; |
||||
this.isDown = true; |
||||
var downloadUrl = imgsrc; |
||||
|
||||
if (!wx.saveImageToPhotosAlbum) { |
||||
uni.showModal({ |
||||
title: "提示", |
||||
content: |
||||
"当前微信版本过低,无法使用该功能,请升级到最新微信版本后重试。" |
||||
}); |
||||
that.openDialogVisible = true; |
||||
if (!wx.saveImageToPhotosAlbum) { |
||||
uni.showModal({ |
||||
title: "提示", |
||||
content: "当前微信版本过低,无法使用该功能,请升级到最新微信版本后重试。" |
||||
}); |
||||
that.openDialogVisible = true; |
||||
|
||||
return; |
||||
} |
||||
return; |
||||
} |
||||
|
||||
// 可以通过 wx.getSetting 先查询一下用户是否授权了 "scope.writePhotosAlbum" 这个 scope |
||||
wx.getSetting({ |
||||
success(res) { |
||||
if (!res.authSetting["scope.writePhotosAlbum"]) { |
||||
that.openDialogVisible = true; |
||||
// 可以通过 wx.getSetting 先查询一下用户是否授权了 "scope.writePhotosAlbum" 这个 scope |
||||
wx.getSetting({ |
||||
success(res) { |
||||
if (!res.authSetting["scope.writePhotosAlbum"]) { |
||||
that.openDialogVisible = true; |
||||
|
||||
// 接口调用询问 |
||||
wx.authorize({ |
||||
scope: "scope.writePhotosAlbum", |
||||
success() { |
||||
that.downloadImage(downloadUrl); |
||||
}, |
||||
fail() { |
||||
// 用户拒绝了授权 |
||||
// 打开设置页面 |
||||
wx.openSetting({ |
||||
success: function(data) {}, |
||||
fail: function(data) {} |
||||
}); |
||||
} |
||||
}); |
||||
} else { |
||||
that.downloadImage(downloadUrl); |
||||
} |
||||
}, |
||||
fail(res) { |
||||
that.openDialogVisible = true; |
||||
} |
||||
}); |
||||
}, |
||||
saveImg: function() { |
||||
this.downloadIamge( |
||||
this.info[this.activeIndex].wap_poster, |
||||
"poster" + this.activeIndex |
||||
); |
||||
} |
||||
} |
||||
}; |
||||
// 接口调用询问 |
||||
wx.authorize({ |
||||
scope: "scope.writePhotosAlbum", |
||||
success() { |
||||
that.downloadImage(downloadUrl); |
||||
}, |
||||
fail() { |
||||
// 用户拒绝了授权 |
||||
// 打开设置页面 |
||||
wx.openSetting({ |
||||
success: function(data) {}, |
||||
fail: function(data) {} |
||||
}); |
||||
} |
||||
}); |
||||
} else { |
||||
that.downloadImage(downloadUrl); |
||||
} |
||||
}, |
||||
fail(res) { |
||||
that.openDialogVisible = true; |
||||
} |
||||
}); |
||||
}, |
||||
saveImg: function() { |
||||
this.downloadIamge( |
||||
this.info[this.activeIndex].wap_poster, |
||||
"poster" + this.activeIndex |
||||
); |
||||
} |
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style scoped lang="less"> |
||||
.distribution-posters { |
||||
height: 100%; |
||||
} |
||||
.banenr { |
||||
height: 100%; |
||||
} |
||||
.banner swiper { |
||||
height: 100%; |
||||
} |
||||
.banner .slide-image { |
||||
width: 100%; |
||||
height: auto; |
||||
} |
||||
</style> |
||||
.distribution-posters { |
||||
height: 100%; |
||||
} |
||||
|
||||
.banenr { |
||||
height: 100%; |
||||
} |
||||
|
||||
.banner swiper { |
||||
height: 100%; |
||||
} |
||||
|
||||
.banner .slide-image { |
||||
width: 100%; |
||||
height: auto; |
||||
} |
||||
</style> |
||||
|
Loading…
Reference in new issue