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