| @@ -5,7 +5,25 @@ Page({ | |||
| * 页面的初始数据 | |||
| */ | |||
| 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() { | |||
| const array = [] | |||
| this.data.swiperList.forEach(item => { | |||
| array.push(item.src) | |||
| }) | |||
| 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 */ | |||
| page { | |||
| 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--> | |||
| <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> | |||
| <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", | |||
| "projectname": "Metavatr_DCIM_Wapp", | |||
| "projectname": "Metavatar_DCIM_Wapp", | |||
| "setting": { | |||
| "compileHotReLoad": true, | |||
| "urlCheck": true | |||