修复支付未设置密码时关闭支付前需要输入密码未立即生效问题，修复会员页面周期福利弹窗显示问题
This commit is contained in:
BIN
components/xb-swiper-preview/images/icon-back.png
Normal file
BIN
components/xb-swiper-preview/images/icon-back.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
385
components/xb-swiper-preview/index.vue
Normal file
385
components/xb-swiper-preview/index.vue
Normal file
@@ -0,0 +1,385 @@
|
||||
<template>
|
||||
<view class="swiper-content" v-if="visable">
|
||||
<view class="hander-top p-lr-32 w-s flex-j-sb--a-ct">
|
||||
<view class="icon-back-wrap" @click="onBack">
|
||||
<image class="icon-back" src="./images/icon-back.png" mode="widthFix" />
|
||||
</view>
|
||||
<view class="count">{{ currentImg + 1 }} / {{ imgs.length }}</view>
|
||||
</view>
|
||||
|
||||
<swiper
|
||||
class="swiper-img"
|
||||
:current="currentImg"
|
||||
:duration="300"
|
||||
@change="changeSwiper"
|
||||
>
|
||||
<swiper-item
|
||||
class="swiper-item"
|
||||
v-for="(item, index) in imgs"
|
||||
:key="index"
|
||||
>
|
||||
<view class="img-page">
|
||||
<movable-area scale-area>
|
||||
<movable-view
|
||||
direction="all"
|
||||
scale="true"
|
||||
scale-min="1"
|
||||
scale-max="4"
|
||||
@click.stop="onBack"
|
||||
|
||||
>
|
||||
<image
|
||||
@click.stop="()=>{}"
|
||||
class="max-img"
|
||||
:src="item"
|
||||
:lazy-load="true"
|
||||
mode="aspectFill"
|
||||
/>
|
||||
</movable-view>
|
||||
</movable-area>
|
||||
</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
<view class="item-bottom" v-if="false">
|
||||
<scroll-view
|
||||
class="scroll-view_H"
|
||||
:scroll-x="true"
|
||||
:scroll-into-view="scrollTopIndex"
|
||||
:scroll-with-animation="true"
|
||||
scroll-left="20"
|
||||
>
|
||||
<view
|
||||
class="img-page-box scroll-view-item_H"
|
||||
:class="currentImg == index ? 'img-page-checked' : ''"
|
||||
v-for="(item, index) in imgs"
|
||||
:key="index"
|
||||
:id="`scrollToIndex${index}`"
|
||||
@click.stop="toImg(index)"
|
||||
>
|
||||
<image class="img" :src="item" mode="aspectFill" />
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
|
||||
<view class="pop" v-if="isPop">
|
||||
<view class="item" @click.stop="share()">分享图片</view>
|
||||
<!-- #ifndef H5 -->
|
||||
<view class="item" @click.stop="saveImg(false)">保存图片</view>
|
||||
<view class="item" @click.stop="saveImg(true)">保存全部图片</view>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
imgs: {
|
||||
type: [],
|
||||
default: () => [],
|
||||
},
|
||||
visable: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
emits: ['update:visable'],
|
||||
data() {
|
||||
return {
|
||||
currentImg: 0,
|
||||
isPop: false,
|
||||
scrollTopIndex: "",
|
||||
|
||||
isScale: false,
|
||||
isCollect: false,
|
||||
isLike: false,
|
||||
};
|
||||
},
|
||||
onLoad(options) {
|
||||
// let { imgs, current } = options;
|
||||
// this.imgs = JSON.parse(imgs);
|
||||
// this.currentImg = current;
|
||||
},
|
||||
methods: {
|
||||
changeSwiper(e) {
|
||||
this.currentImg = e.detail.current;
|
||||
console.log("e", e);
|
||||
|
||||
this.scrollTopIndex = `scrollToIndex${e.detail.current}`;
|
||||
},
|
||||
toImg(index) {
|
||||
this.currentImg = index;
|
||||
},
|
||||
onBack() {
|
||||
this.$emit('update:visable', false);
|
||||
},
|
||||
share() {
|
||||
uni.downloadFile({
|
||||
// 下面一行时拼接预览PDF的地址！！！
|
||||
url: this.imgs[this.currentImg],
|
||||
success: function (res) {
|
||||
var filePath = res.tempFilePath;
|
||||
if (!filePath) return;
|
||||
uni.openDocument({
|
||||
filePath: filePath,
|
||||
success: function (res) {
|
||||
console.log(res);
|
||||
console.log("打开文档成功");
|
||||
},
|
||||
});
|
||||
},
|
||||
});
|
||||
},
|
||||
saveImg(isAll = false) {
|
||||
const that = this;
|
||||
if (!isAll) {
|
||||
uni.downloadFile({
|
||||
url: this.imgs[this.currentImg],
|
||||
success: (res) => {
|
||||
if (res.statusCode === 200) {
|
||||
uni.saveImageToPhotosAlbum({
|
||||
filePath: res.tempFilePath,
|
||||
success: function () {
|
||||
uni.showToast({
|
||||
icon: "none",
|
||||
title: "保存成功",
|
||||
});
|
||||
that.isPop = false;
|
||||
},
|
||||
fail: function () {},
|
||||
});
|
||||
} else {
|
||||
}
|
||||
},
|
||||
});
|
||||
return;
|
||||
}
|
||||
this.imgs.forEach((item) => {
|
||||
uni.downloadFile({
|
||||
url: item,
|
||||
success: (res) => {
|
||||
if (res.statusCode === 200) {
|
||||
uni.saveImageToPhotosAlbum({
|
||||
filePath: res.tempFilePath,
|
||||
success: function () {
|
||||
uni.showToast({
|
||||
icon: "none",
|
||||
title: "保存全部成功",
|
||||
});
|
||||
that.isPop = false;
|
||||
},
|
||||
fail: function () {},
|
||||
});
|
||||
} else {
|
||||
}
|
||||
},
|
||||
});
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.swiper-content {
|
||||
width: 100vw;
|
||||
top: 0;
|
||||
height: 100vh;
|
||||
position: fixed;
|
||||
background: #000;
|
||||
z-index: 99999;
|
||||
}
|
||||
movable-view {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
movable-area {
|
||||
position: fixed;
|
||||
|
||||
overflow: hidden;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
transform: scale();
|
||||
}
|
||||
|
||||
movable-view image {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
uni-image > img {
|
||||
z-index: -1 !important;
|
||||
}
|
||||
|
||||
.hander-top {
|
||||
position: absolute;
|
||||
z-index: 1000;
|
||||
top: 48rpx;
|
||||
left: 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
padding: 0 32rpx;
|
||||
box-sizing: border-box;
|
||||
.icon-back-wrap {
|
||||
width: 64rpx;
|
||||
height: 64rpx;
|
||||
.icon-back {
|
||||
width: 64rpx;
|
||||
height: 64rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.count {
|
||||
box-sizing: border-box;
|
||||
padding: 8rpx 24rpx;
|
||||
|
||||
color: #fff;
|
||||
border-radius: 24rpx;
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.swiper-img {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
|
||||
background-color: #000;
|
||||
|
||||
.swiper-item {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
|
||||
.img-page {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
|
||||
.max-img {
|
||||
// width: 100%;
|
||||
// height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.handle-wrap {
|
||||
position: absolute;
|
||||
z-index: 100;
|
||||
bottom: 40rpx;
|
||||
left: 0;
|
||||
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 32rpx;
|
||||
box-sizing: border-box;
|
||||
image {
|
||||
width: 64rpx;
|
||||
height: 64rpx;
|
||||
}
|
||||
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.item-bottom {
|
||||
position: fixed;
|
||||
z-index: 9999;
|
||||
bottom: 110rpx;
|
||||
left: 0rpx;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
|
||||
width: 100vw;
|
||||
|
||||
// height: 200rpx;
|
||||
padding: 30rpx;
|
||||
|
||||
transition: ease-in-out 0.3s;
|
||||
}
|
||||
|
||||
.small-list-page {
|
||||
min-height: 60rpx;
|
||||
}
|
||||
|
||||
.scroll-Y {
|
||||
height: 300rpx;
|
||||
}
|
||||
|
||||
.scroll-view_H {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding-right: 32rpx;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.scroll-view-item_H {
|
||||
display: inline-block;
|
||||
|
||||
margin-right: 10rpx;
|
||||
|
||||
transition: ease-in 0.1s;
|
||||
transform: scale(0.8);
|
||||
|
||||
border-radius: 11rpx;
|
||||
background: #c2c2c2;
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.img {
|
||||
display: block;
|
||||
|
||||
width: 160rpx;
|
||||
height: 272rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.img-page-checked {
|
||||
transform: translateY(-28rpx) scale(1);
|
||||
}
|
||||
|
||||
.pop {
|
||||
position: fixed;
|
||||
z-index: 999999;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
|
||||
overflow: hidden;
|
||||
|
||||
width: 500rpx;
|
||||
|
||||
transform: translate(-50%, -50%);
|
||||
|
||||
border-radius: 20rpx;
|
||||
background-color: #fff;
|
||||
|
||||
.item {
|
||||
height: 100rpx;
|
||||
padding: 0 50rpx;
|
||||
|
||||
transition: all 0.2s;
|
||||
|
||||
border-radius: 20rpx;
|
||||
|
||||
line-height: 100rpx;
|
||||
|
||||
&:active {
|
||||
background-color: #eee;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user