@@ -5,7 +5,25 @@ Page({ | |||||
* 页面的初始数据 | * 页面的初始数据 | ||||
*/ | */ | ||||
data: { | data: { | ||||
currentIndex: 0, | |||||
swiperList: [ | |||||
{ | |||||
id: "1", | |||||
src: "https://suimang.oss-accelerate.aliyuncs.com/capi/2023-09-21/4f3cf1dea65142a2945d5412bee85ca2.jpg?x-oss-process=image/resize,w_10000/quality,q_60" | |||||
}, | |||||
{ | |||||
id: "2", | |||||
src: "https://suimang.oss-accelerate.aliyuncs.com/capi/2023-09-21/4f3cf1dea65142a2945d5412bee85ca2.jpg?x-oss-process=image/resize,w_10000/quality,q_60" | |||||
}, | |||||
{ | |||||
id: "3", | |||||
src: "https://suimang.oss-accelerate.aliyuncs.com/capi/2023-09-21/4f3cf1dea65142a2945d5412bee85ca2.jpg?x-oss-process=image/resize,w_10000/quality,q_60" | |||||
}, | |||||
{ | |||||
id: "4", | |||||
src: "https://suimang.oss-accelerate.aliyuncs.com/capi/2023-09-21/4f3cf1dea65142a2945d5412bee85ca2.jpg?x-oss-process=image/resize,w_10000/quality,q_60" | |||||
} | |||||
] | |||||
}, | }, | ||||
/** | /** | ||||
@@ -22,9 +40,56 @@ Page({ | |||||
}, | }, | ||||
switchImg(e) { | |||||
const currentIndex = e.currentTarget.dataset.index | |||||
this.setData({ | |||||
currentIndex | |||||
}) | |||||
}, | |||||
previewImage() { | previewImage() { | ||||
const array = [] | |||||
this.data.swiperList.forEach(item => { | |||||
array.push(item.src) | |||||
}) | |||||
wx.previewImage({ | wx.previewImage({ | ||||
urls: array, | |||||
showmenu: true, | |||||
}) | |||||
}, | |||||
swiperChanged(e) { | |||||
const currentIndex = e.detail.current | |||||
this.setData({ | |||||
currentIndex | |||||
}) | |||||
}, | |||||
downloadImage() { | |||||
const index = this.data.currentIndex | |||||
const list = this.data.swiperList | |||||
const filePath = "zhixiangImg.png" | |||||
const url = list[index].src | |||||
wx.downloadFile({ | |||||
url, | |||||
success: res => { | |||||
console.log(res, 'res'); | |||||
if (res.statusCode === 200) { | |||||
wx.saveImageToPhotosAlbum({ | |||||
filePath: res.tempFilePath, | |||||
success: () => { | |||||
wx.showToast({ | |||||
title: '保存成功!', | |||||
icon: "success" | |||||
}) | |||||
} | |||||
}) | |||||
} | |||||
} | |||||
}) | }) | ||||
}, | }, | ||||
@@ -1,4 +1,57 @@ | |||||
/* pages/checkImg/checkImg.wxss */ | /* pages/checkImg/checkImg.wxss */ | ||||
page { | page { | ||||
background-color: #333333; | background-color: #333333; | ||||
padding: 50rpx 0; | |||||
.name { | |||||
text-align: center; | |||||
font-size: 45rpx; | |||||
color: #ffffff; | |||||
margin-bottom: 40rpx; | |||||
} | |||||
.imageList { | |||||
width: 100%; | |||||
height: 800rpx; | |||||
text-align: center; | |||||
overflow: hidden; | |||||
image { | |||||
width: 75%; | |||||
border-radius: 40rpx; | |||||
} | |||||
} | |||||
.indicator { | |||||
display: flex; | |||||
justify-content: space-between; | |||||
padding: 0 280rpx; | |||||
margin-bottom: 100rpx; | |||||
.item { | |||||
width: 20rpx; | |||||
height: 20rpx; | |||||
background-color: #ffffff50; | |||||
border-radius: 10rpx; | |||||
transition: all 0.3s; | |||||
&.active { | |||||
width: 28rpx; | |||||
background-color: #fff; | |||||
} | |||||
} | |||||
} | |||||
.downloadImage { | |||||
width: 70%; | |||||
height: 100rpx; | |||||
line-height: 100rpx; | |||||
font-weight: 600; | |||||
background-color: #ff4f00; | |||||
color: #ffffff; | |||||
font-size: 32rpx; | |||||
text-align: center; | |||||
border-radius: 50rpx; | |||||
margin: auto; | |||||
} | |||||
} | } |
@@ -1,19 +1,17 @@ | |||||
<!--pages/checkImg/checkImg.wxml--> | <!--pages/checkImg/checkImg.wxml--> | ||||
<text>pages/checkImg/checkImg.wxml</text> | |||||
<swiper> | |||||
<swiper-item> | |||||
<image src="../../asset/image/test.png" mode="" /> | |||||
<view class="name">模板名称</view> | |||||
<swiper class="imageList" current="{{ currentIndex }}" bindchange="swiperChanged"> | |||||
<swiper-item wx:for="{{ swiperList }}" wx:key="index"> | |||||
<image src="{{ item.src }}" mode="widthFix" bindtap="previewImage" data-src="{{ item.src }}" /> | |||||
</swiper-item> | </swiper-item> | ||||
<swiper-item> | |||||
<image src="../../asset/image/test.png" mode="" /> | |||||
</swiper-item> | |||||
<swiper-item> | |||||
<image src="../../asset/image/test.png" mode="" /> | |||||
</swiper-item> | |||||
<swiper-item> | |||||
<image src="../../asset/image/test.png" mode="" /> | |||||
</swiper-item> | |||||
<swiper-item> | |||||
<image src="../../asset/image/test.png" mode="" /> | |||||
</swiper-item> | |||||
</swiper> | |||||
</swiper> | |||||
<view class="indicator"> | |||||
<view class="{{ currentIndex == 0 ? 'active item' : 'item' }}" bindtap="switchImg" data-index="0"></view> | |||||
<view class="{{ currentIndex == 1 ? 'active item' : 'item' }}" bindtap="switchImg" data-index="1"></view> | |||||
<view class="{{ currentIndex == 2 ? 'active item' : 'item' }}" bindtap="switchImg" data-index="2"></view> | |||||
<view class="{{ currentIndex == 3 ? 'active item' : 'item' }}" bindtap="switchImg" data-index="3"></view> | |||||
</view> | |||||
<button class="downloadImage" bindtap="downloadImage">保存到手机</button> |
@@ -1,6 +1,6 @@ | |||||
{ | { | ||||
"description": "项目私有配置文件。此文件中的内容将覆盖 project.config.json 中的相同字段。项目的改动优先同步到此文件中。详见文档:https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html", | "description": "项目私有配置文件。此文件中的内容将覆盖 project.config.json 中的相同字段。项目的改动优先同步到此文件中。详见文档:https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html", | ||||
"projectname": "Metavatr_DCIM_Wapp", | |||||
"projectname": "Metavatar_DCIM_Wapp", | |||||
"setting": { | "setting": { | ||||
"compileHotReLoad": true, | "compileHotReLoad": true, | ||||
"urlCheck": true | "urlCheck": true | ||||