| @@ -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 | ||||