mirror of
https://github.com/no1xuan/photo.git
synced 2026-08-28 17:50:40 +08:00
大更新来喽！全局优化代码，页面UI优化，增加探索中心/通用抠图，修复搜索页无法一键到顶，调整我的作品登录逻辑
This commit is contained in:
贫困的蚊子
@@ -5,7 +5,7 @@
|
||||
# 项目介绍
|
||||
|
||||
# <p align="center">证件照伴侣</p>
|
||||
<p align="center">我给你的，就是我想要的，我爱你的方式，就是我希望被爱的方式.</p>
|
||||
<p align="center">缘分让我们相遇，命中无缘让我们离开.</p>
|
||||
<p align="center"><img src="./assets/1.png"></p>
|
||||
|
||||
|
||||
@@ -18,6 +18,7 @@
|
||||
------
|
||||
|
||||
# ⭐最近更新
|
||||
- 2024.11.15: 大更新来喽！全局优化代码，页面UI优化，增加探索中心/通用抠图，修复搜索页无法一键到顶，调整我的作品登录逻辑
|
||||
- 2024.11.08: 增加黑白图片上色功能，从此版本开始为长期稳定版本，基本不会频繁更新
|
||||
- 2024.11.05: 增加登录失败时控制台打印错误原因
|
||||
- 2024.10.18: 修复高清照一直没生效的问题
|
||||
|
||||
+9
-3
@@ -6,14 +6,14 @@
|
||||
"pages/preEdit/index",
|
||||
"pages/edit/index",
|
||||
"pages/camera/index",
|
||||
"pages/edit/complete/index",
|
||||
"pages/works/index",
|
||||
"pages/searchs/index",
|
||||
"pages/custom/index",
|
||||
"pages/login/index",
|
||||
"pages/admin/index",
|
||||
"pages/colourize/index",
|
||||
"pages/colourize/complete/index"
|
||||
"pages/explore/index",
|
||||
"pages/exploreHandle/index",
|
||||
"pages/exploreHandle/complete/index"
|
||||
],
|
||||
"window": {
|
||||
"backgroundColor": "#F6F6F6",
|
||||
@@ -49,6 +49,12 @@
|
||||
"iconPath": "images/tabs/home.png",
|
||||
"selectedIconPath": "images/tabs/home-fil.png"
|
||||
},
|
||||
{
|
||||
"pagePath": "pages/explore/index",
|
||||
"text": "探索",
|
||||
"iconPath": "images/tabs/service.png",
|
||||
"selectedIconPath": "images/tabs/service-fil.png"
|
||||
},
|
||||
{
|
||||
"pagePath": "pages/mine/index",
|
||||
"text": "我的",
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 22 KiB After Width: | Height: | Size: 28 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 28 KiB After Width: | Height: | Size: 190 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 444 KiB After Width: | Height: | Size: 144 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 126 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 33 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
@@ -1,3 +0,0 @@
|
||||
{
|
||||
"usingComponents": {}
|
||||
}
|
||||
@@ -1,14 +0,0 @@
|
||||
<view class="container">
|
||||
<view class="container-content" style="width: 727rpx; display: block; box-sizing: content-box">
|
||||
<view class="container-content-img" style="width: 662rpx; display: flex; box-sizing: content-box">
|
||||
<image bindtap="preView" mode="heightFix" src="{{url}}" style="position: relative; left: 29rpx; top: 0rpx; height: 847rpx; display: block; box-sizing: border-box; width: 664rpx"></image>
|
||||
</view>
|
||||
<view class="img-msg" style="position: relative; left: 1rpx; top: 44rpx">
|
||||
点击图片可放大查看
|
||||
</view>
|
||||
</view>
|
||||
<view class="bottom">
|
||||
<button bindtap="goHome">返回</button>
|
||||
<button bindtap="downloadPic">下载</button>
|
||||
</view>
|
||||
</view>
|
||||
@@ -1,70 +0,0 @@
|
||||
.container {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
overflow: hidden;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.container-content {
|
||||
width: 100%;
|
||||
/* height: 100%; */
|
||||
margin-top: 10vh;
|
||||
}
|
||||
|
||||
.container-content-img {
|
||||
margin: 50rpx 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.img-msg {
|
||||
text-align: center;
|
||||
font-size: 30px;
|
||||
color: #2c2c2c;
|
||||
}
|
||||
|
||||
|
||||
.msg {
|
||||
margin-top: 50rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.icon_complete {
|
||||
font-size: 80rpx;
|
||||
color: #2c2c22;
|
||||
}
|
||||
|
||||
.bottom {
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
bottom: 40px;
|
||||
}
|
||||
|
||||
.bottom button:first-child {
|
||||
width: 40%;
|
||||
height: 55px;
|
||||
margin-left: 30px;
|
||||
background-color: #eee;
|
||||
border-radius: 10px;
|
||||
font-size: 18px;
|
||||
text-align: center;
|
||||
line-height: 55px;
|
||||
}
|
||||
|
||||
.bottom button:last-child {
|
||||
width: 40%;
|
||||
height: 55px;
|
||||
margin-right: 30px;
|
||||
background-color: #2c2c2c;
|
||||
border-radius: 10px;
|
||||
color: #fff;
|
||||
font-size: 18px;
|
||||
text-align: center;
|
||||
line-height: 55px
|
||||
}
|
||||
@@ -1,80 +0,0 @@
|
||||
Page({
|
||||
data: {
|
||||
msg: '',
|
||||
tempFilePath: '',
|
||||
url: ''
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面加载
|
||||
*/
|
||||
onLoad: function (options) {
|
||||
this.setData({
|
||||
msg: options.msg,
|
||||
tempFilePath: options.tempFilePath,
|
||||
url: options.url
|
||||
})
|
||||
},
|
||||
preView() {
|
||||
wx.previewImage({
|
||||
urls: [this.data.url],
|
||||
current: this.data.url
|
||||
})
|
||||
},
|
||||
|
||||
// 跳转到首页
|
||||
goHome() {
|
||||
wx.reLaunch({
|
||||
url: '/pages/home/index'
|
||||
})
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面初次渲染完成
|
||||
*/
|
||||
onReady: function () {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面显示
|
||||
*/
|
||||
onShow: function () {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面隐藏
|
||||
*/
|
||||
onHide: function () {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面卸载
|
||||
*/
|
||||
onUnload: function () {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 页面相关事件处理函数--监听用户下拉动作
|
||||
*/
|
||||
onPullDownRefresh: function () {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 页面上拉触底事件的处理函数
|
||||
*/
|
||||
onReachBottom: function () {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 用户点击右上角分享
|
||||
*/
|
||||
onShareAppMessage: function () {
|
||||
|
||||
}
|
||||
})
|
||||
@@ -1,3 +0,0 @@
|
||||
{
|
||||
"usingComponents": {}
|
||||
}
|
||||
@@ -1,14 +0,0 @@
|
||||
<view class="container">
|
||||
<view class="container-content">
|
||||
<view class="container-content-img">
|
||||
<image bindtap="preView" mode="heightFix" src="{{url}}"></image>
|
||||
</view>
|
||||
<view class="img-msg">
|
||||
{{msg}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="bottom">
|
||||
<button open-type="share">分享给朋友</button>
|
||||
<button bindtap="goHome" class="">返回首页</button>
|
||||
</view>
|
||||
</view>
|
||||
@@ -1,71 +0,0 @@
|
||||
/* pages/edit/complete/index.wxss */
|
||||
.container {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
overflow: hidden;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.container-content {
|
||||
width: 100%;
|
||||
/* height: 100%; */
|
||||
margin-top: 10vh;
|
||||
}
|
||||
|
||||
.container-content-img {
|
||||
margin: 50rpx 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.img-msg {
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
color: #ddd;
|
||||
}
|
||||
|
||||
|
||||
.msg {
|
||||
margin-top: 50rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.icon_complete {
|
||||
font-size: 80rpx;
|
||||
color: #2c2c22;
|
||||
}
|
||||
|
||||
.bottom {
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
bottom: 40px;
|
||||
}
|
||||
|
||||
.bottom button:first-child {
|
||||
width: 40%;
|
||||
height: 55px;
|
||||
margin-left: 30px;
|
||||
background-color: #eee;
|
||||
border-radius: 10px;
|
||||
font-size: 18px;
|
||||
text-align: center;
|
||||
line-height: 55px;
|
||||
}
|
||||
|
||||
.bottom button:last-child {
|
||||
width: 40%;
|
||||
height: 55px;
|
||||
margin-right: 30px;
|
||||
background-color: #2c2c2c;
|
||||
border-radius: 10px;
|
||||
color: #fff;
|
||||
font-size: 18px;
|
||||
text-align: center;
|
||||
line-height: 55px
|
||||
}
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 42 KiB |
@@ -356,16 +356,6 @@ Page({
|
||||
},
|
||||
|
||||
|
||||
// 去分享页面(待开发分享下载)
|
||||
async composeImage() {
|
||||
wx.showLoading({
|
||||
title: '制作中...'
|
||||
});
|
||||
wx.navigateTo({
|
||||
url: './complete/index?url=https://www.haimati.cn/img/1_7_1.98819809.jpg',
|
||||
});
|
||||
},
|
||||
|
||||
// 初始化激励视频广告
|
||||
initRewardedVideoAd(adUnitId) {
|
||||
if (wx.createRewardedVideoAd) {
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<view class="container">
|
||||
<view class="photo-edit-content">
|
||||
<view class="canvas-view" style="background-color:{{bgc}}; width: 240px; height: 336px">
|
||||
<image class="nowx_mask" style="width: 292px; left: 120px; top: 164px; transform: translate(-50%, -50%) scale(1) rotate(0deg); z-index: 99; height: 163.52px" src="./images/wmark.png" mode="widthFix"></image>
|
||||
<image class="nowx_mask" style="width: 292px; left: 120px; top: 164px; transform: translate(-50%, -50%) scale(1) rotate(0deg); z-index: 99; height: 163.52px" src="../../images/wmark.png" mode="widthFix"></image>
|
||||
<!-- 保证图片完全覆盖 canvas-view -->
|
||||
<image class="people-photo" src="{{imageData.cimg}}" bindload="bindload"></image>
|
||||
</view>
|
||||
@@ -97,12 +97,12 @@
|
||||
|
||||
<!-- 保存按钮区域 -->
|
||||
<view class="download-view">
|
||||
<!-- 在“背景”选项卡显示两个保存按钮 -->
|
||||
|
||||
<view wx:if="{{ active == 1 }}" class="button-group">
|
||||
<button bindtap="openSavePhoto" data-type="1" type="default" class="save-btn">保存预览照</button>
|
||||
<button bindtap="openSavePhoto" data-type="2" type="default" class="save-btn">保存AI高清照</button>
|
||||
<button bindtap="openSavePhoto" data-type="2" type="default" class="save-btn">保存高清照</button>
|
||||
</view>
|
||||
<!-- 在“高级参数”选项卡显示一个保存参数按钮 -->
|
||||
|
||||
<view wx:elif="{{ active == 2 }}" class="button-group">
|
||||
<button bindtap="saveParams" type="default" class="save-btn single-btn">保存修改</button>
|
||||
</view>
|
||||
|
||||
@@ -0,0 +1,87 @@
|
||||
const app = getApp()
|
||||
|
||||
Page({
|
||||
data: {
|
||||
zjzCount: 0,
|
||||
colourizeCount: 0,
|
||||
mattingCount: 0
|
||||
},
|
||||
|
||||
onShow() {
|
||||
this.getExploreData()
|
||||
},
|
||||
|
||||
getExploreData() {
|
||||
wx.request({
|
||||
url: app.url + 'otherApi/exploreCount',
|
||||
method: 'GET',
|
||||
header: {
|
||||
'content-type': 'application/json',
|
||||
'token': wx.getStorageSync('token')
|
||||
},
|
||||
success: (res) => {
|
||||
this.setData({
|
||||
zjzCount: res.data.data.zjzCount,
|
||||
colourizeCount: res.data.data.colourizeCount,
|
||||
mattingCount: res.data.data.mattingCount
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
sizeListTo(){
|
||||
wx.navigateTo({
|
||||
url: "/pages/sizeList/index"
|
||||
});
|
||||
},
|
||||
|
||||
wait(){
|
||||
wx.showToast({
|
||||
title: '该功能正在内测中，即将上线，敬请期待',
|
||||
icon: 'none',
|
||||
duration: 3000
|
||||
})
|
||||
},
|
||||
stop(){
|
||||
wx.showToast({
|
||||
title: '该功能维护中，暂停使用',
|
||||
icon: 'none',
|
||||
duration: 3000
|
||||
})
|
||||
},
|
||||
|
||||
navigateTo(e) {
|
||||
const type = e.currentTarget.dataset.type;
|
||||
let title;
|
||||
let title2;
|
||||
let description;
|
||||
if(type==4){
|
||||
title = '老照片上色';
|
||||
title2 = '一键让图片充满色彩';
|
||||
description = '适用于老照片，旧照片，黑白照片等，进行AI上色';
|
||||
}else if(type==5){
|
||||
title = '智能抠图';
|
||||
title2 = '一键轻松抠出图像';
|
||||
description = '适用于人像，宠物，物品，植物等照片进行抠图';
|
||||
}else if(type==6){
|
||||
title = '照片清晰度增强';
|
||||
title2 = '一键让模糊图片变清晰';
|
||||
description = '适用于模糊图变清晰，老照片清晰化，质量低照片，无损放大';
|
||||
}else if(type==7){
|
||||
title = '粘土风写真';
|
||||
title2 = '';
|
||||
description = '';
|
||||
}else if(type==8){
|
||||
title = '照片转卡通形象';
|
||||
title2 = '';
|
||||
description = '';
|
||||
}
|
||||
wx.navigateTo({
|
||||
url: '/pages/exploreHandle/index?type='+type+'&title='+title+'&title2='+title2+'&description='+description,
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
})
|
||||
@@ -0,0 +1,5 @@
|
||||
{
|
||||
"usingComponents": {},
|
||||
"navigationBarTitleText": "探索系列",
|
||||
"navigationStyle": "default"
|
||||
}
|
||||
@@ -0,0 +1,94 @@
|
||||
<view class="explore-container">
|
||||
<view class="explore-header">
|
||||
<view class="explore-header-left">
|
||||
<text class="explore-header-title">探索AI的魔力🪄 </text>
|
||||
<text class="explore-header-subtitle">让照片处理变得简单有趣✨ </text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="explore-grid">
|
||||
<view class="explore-row">
|
||||
<view class="explore-card" bindtap="sizeListTo" data-type="3">
|
||||
<image class="card-image" mode="aspectFill" src="../../images/home/3.png">
|
||||
<view class="other-msg">
|
||||
<view class="card-stats">✨ 推荐 | {{zjzCount}}次使用</view>
|
||||
</view>
|
||||
</image>
|
||||
<view class="card-content">
|
||||
<view class="card-title">AI证件照🎭</view>
|
||||
<view class="card-desc">支持多种尺寸+自定义背景</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="explore-card" bindtap="navigateTo" data-type="4">
|
||||
<image class="card-image" mode="aspectFill" src="../../images/home/4.png">
|
||||
<view class="other-msg">
|
||||
<view class="card-stats">✨ 推荐 | {{colourizeCount}}次使用</view>
|
||||
</view>
|
||||
</image>
|
||||
<view class="card-content">
|
||||
<view class="card-title">老照片上色🎨</view>
|
||||
<view class="card-desc">一键让黑白照片充满色彩</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
<view class="explore-row">
|
||||
<view class="explore-card" bindtap="navigateTo" data-type="5">
|
||||
<image class="card-image" mode="aspectFill" src="../../images/home/5.png">
|
||||
<view class="other-msg">
|
||||
<view class="card-stats">🔥 热门 | {{mattingCount}}次使用</view>
|
||||
</view>
|
||||
</image>
|
||||
<view class="card-content">
|
||||
|
||||
<view class="card-title">智能抠图✂️</view>
|
||||
<view class="card-desc">一键迅捷抠图，智能抠图</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="explore-card" bindtap="stop" data-type="6">
|
||||
<image class="card-image" mode="aspectFill" src="../../images/home/6.png">
|
||||
<view class="other-msg">
|
||||
<view class="card-stats">🔥 维护中 | 暂停使用</view>
|
||||
</view>
|
||||
</image>
|
||||
<view class="card-content">
|
||||
<view class="card-title">照片清晰增强✨</view>
|
||||
<view class="card-desc">一键让模糊图片变清晰</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
<view class="explore-row">
|
||||
<view class="explore-card" bindtap="wait" data-type="7">
|
||||
<image class="card-image" mode="aspectFill" src="../../images/home/7.png">
|
||||
<view class="other-msg">
|
||||
<view class="card-stats">🔜 即将上线 | 0次使用</view>
|
||||
</view>
|
||||
</image>
|
||||
<view class="card-content">
|
||||
<view class="card-title">粘土风写真🎭</view>
|
||||
<view class="card-desc">又丑又萌的粘土风格照片</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="explore-card" bindtap="wait" data-type="8">
|
||||
<image class="card-image" mode="aspectFill" src="../../images/home/8.png">
|
||||
<view class="other-msg">
|
||||
<view class="card-stats">🔜 即将上线 | 0次使用</view>
|
||||
</view>
|
||||
</image>
|
||||
<view class="card-content">
|
||||
<view class="card-title">照片转卡通形象🎨</view>
|
||||
<view class="card-desc">将照片转换成卡通形象</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
</view>
|
||||
</view>
|
||||
@@ -0,0 +1,76 @@
|
||||
.explore-container {
|
||||
padding: 20rpx;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.explore-header {
|
||||
padding: 30rpx 0;
|
||||
}
|
||||
|
||||
.explore-header-title {
|
||||
font-size: 40rpx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.explore-header-subtitle {
|
||||
font-size: 28rpx;
|
||||
color: #666;
|
||||
margin-top: 10rpx;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.explore-grid {
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
|
||||
.explore-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.explore-card {
|
||||
width: 48%;
|
||||
background: #fff;
|
||||
border-radius: 16rpx;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.card-image {
|
||||
width: 100%;
|
||||
height: 200rpx;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.card-content {
|
||||
padding: 20rpx;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.card-desc {
|
||||
font-size: 24rpx;
|
||||
color: #666;
|
||||
margin-top: 8rpx;
|
||||
}
|
||||
|
||||
.other-msg {
|
||||
position: absolute;
|
||||
bottom: 8rpx;
|
||||
left: 8rpx;
|
||||
}
|
||||
|
||||
.card-stats {
|
||||
font-size: 21rpx;
|
||||
color: #fff;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
padding: 6rpx 16rpx;
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
+1
@@ -8,6 +8,7 @@ Page({
|
||||
url: options.url
|
||||
})
|
||||
},
|
||||
|
||||
preView() {
|
||||
wx.previewImage({
|
||||
urls: [this.data.url]
|
||||
@@ -0,0 +1,5 @@
|
||||
{
|
||||
"usingComponents": {},
|
||||
"navigationBarTitleText": "",
|
||||
"navigationStyle": "default"
|
||||
}
|
||||
@@ -0,0 +1,21 @@
|
||||
<view class="container">
|
||||
<!-- 顶部标题区域 -->
|
||||
<view class="header">
|
||||
<text class="title">处理完成 🎉</text>
|
||||
<text class="subtitle">点击图片可放大查看 ✨</text>
|
||||
</view>
|
||||
|
||||
<!-- 图片展示区域 -->
|
||||
<view class="image-container">
|
||||
<image mode="aspectFit" bindtap="preView" src="{{url}}" class="result-image"></image>
|
||||
<view class="image-overlay">
|
||||
<view class="overlay-text">处理成功</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 操作按钮区域 -->
|
||||
<view class="bottom">
|
||||
<button bindtap="goHome">返回</button>
|
||||
<button bindtap="downloadPic">下载</button>
|
||||
</view>
|
||||
</view>
|
||||
@@ -0,0 +1,90 @@
|
||||
.container {
|
||||
min-height: 100vh;
|
||||
background: #f8f9fa;
|
||||
padding: 30rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.header {
|
||||
text-align: center;
|
||||
margin-bottom: 40rpx;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 36rpx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 28rpx;
|
||||
color: #666;
|
||||
margin-top: 10rpx;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.image-container {
|
||||
width: 90%;
|
||||
height: 60vh;
|
||||
position: relative;
|
||||
background: #fff;
|
||||
border-radius: 20rpx;
|
||||
box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.1);
|
||||
overflow: hidden;
|
||||
margin: 20rpx 0;
|
||||
}
|
||||
|
||||
.result-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.image-overlay {
|
||||
position: absolute;
|
||||
top: 20rpx;
|
||||
right: 20rpx;
|
||||
background: rgba(76, 175, 80, 0.9);
|
||||
padding: 10rpx 20rpx;
|
||||
border-radius: 30rpx;
|
||||
}
|
||||
|
||||
.overlay-text {
|
||||
color: #fff;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.bottom {
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
bottom: 40px;
|
||||
}
|
||||
|
||||
.bottom button:first-child {
|
||||
width: 40%;
|
||||
height: 55px;
|
||||
margin-left: 30px;
|
||||
background-color: #eee;
|
||||
border-radius: 10px;
|
||||
font-size: 18px;
|
||||
text-align: center;
|
||||
line-height: 55px;
|
||||
}
|
||||
|
||||
.bottom button:last-child {
|
||||
width: 40%;
|
||||
height: 55px;
|
||||
margin-right: 30px;
|
||||
background-color: #2c2c2c;
|
||||
border-radius: 10px;
|
||||
color: #fff;
|
||||
font-size: 18px;
|
||||
text-align: center;
|
||||
line-height: 55px
|
||||
}
|
||||
@@ -1,9 +1,46 @@
|
||||
const app = getApp()
|
||||
Page({
|
||||
data: {},
|
||||
data: {
|
||||
title:'',
|
||||
title2:'',
|
||||
description:'',
|
||||
pic:'',
|
||||
url:'',
|
||||
type:''
|
||||
},
|
||||
|
||||
|
||||
onLoad: function (options) {
|
||||
this.setData({
|
||||
type: options.type,
|
||||
pic: '/images/home/'+options.type+'.png',
|
||||
title: options.title,
|
||||
title2: options.title2,
|
||||
description: options.description
|
||||
});
|
||||
|
||||
if(this.data.type==4){
|
||||
this.setData({
|
||||
url: "colourize"
|
||||
});
|
||||
}else if(this.data.type==5){
|
||||
this.setData({
|
||||
url: "matting"
|
||||
});
|
||||
}else if(this.data.type==6){
|
||||
}else if(this.data.type==7){
|
||||
}else if(this.data.type==8){
|
||||
}
|
||||
},
|
||||
|
||||
// 相册选择
|
||||
chooseImage() {
|
||||
if (wx.getStorageSync("token") == "") {
|
||||
wx.navigateTo({
|
||||
url: "/pages/login/index",
|
||||
});
|
||||
return;
|
||||
}
|
||||
wx.chooseMedia({
|
||||
count: 1,
|
||||
mediaType: 'image',
|
||||
@@ -73,12 +110,12 @@ Page({
|
||||
|
||||
imageDivision(tu) {
|
||||
wx.showLoading({
|
||||
title: 'AI上色中...',
|
||||
title: '处理中...',
|
||||
});
|
||||
wx.request({
|
||||
url: app.url + 'otherApi/colourize',
|
||||
url: app.url + 'otherApi/' + this.data.url,
|
||||
data: {
|
||||
"image": tu
|
||||
processedImage: tu
|
||||
},
|
||||
header: {
|
||||
"token": wx.getStorageSync("token")
|
||||
@@ -93,7 +130,8 @@ Page({
|
||||
} else if (res.data.code == 404) {
|
||||
wx.showToast({
|
||||
title: res.data.data,
|
||||
icon: 'none'
|
||||
icon: 'none',
|
||||
duration: 2000
|
||||
});
|
||||
} else {
|
||||
wx.navigateTo({
|
||||
@@ -1,5 +1,5 @@
|
||||
{
|
||||
"navigationBarTitleText": "黑白图片上色",
|
||||
"navigationBarTitleText": "",
|
||||
"navigationStyle": "default",
|
||||
"usingComponents": {}
|
||||
}
|
||||
@@ -4,24 +4,24 @@
|
||||
<van-icon name="photo" />
|
||||
</view>
|
||||
<view style="display:flex;flex-direction:column;margin-left:10px;">
|
||||
<text class="top-bar-title">黑白图片上色</text>
|
||||
<text class="top-bar-title">{{title}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="effect-image">
|
||||
<image src="/images/home/5.png" class="effect-img"></image>
|
||||
<image src="{{pic}}" class="effect-img"></image>
|
||||
</view>
|
||||
<view class="effect-content">
|
||||
<view class="content-view-a">
|
||||
<text class="view-icon-a icon-collection"></text>
|
||||
<text class="view-text-a">一键让图片充满色彩</text>
|
||||
<text class="view-text-a">{{title2}}</text>
|
||||
</view>
|
||||
<view class="content-view">
|
||||
<van-icon name="good-job" />
|
||||
<text class="view-text">适用于老照片，旧照片，黑白照片等，进行AI上色</text>
|
||||
<text class="view-text">{{description}}</text>
|
||||
</view>
|
||||
<view class="content-view">
|
||||
<van-icon name="photo" />
|
||||
<text class="view-text">原图大小不能超10M，图片越大上色越慢</text>
|
||||
<text class="view-text">原图大小不能超10MB，图片越大处理时间越长</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="effect-button">
|
||||
+67
-68
@@ -1,77 +1,76 @@
|
||||
Page({
|
||||
data: {
|
||||
autoplay: true,
|
||||
interval: 3000,
|
||||
duration: 1200,
|
||||
authorized: false
|
||||
},
|
||||
|
||||
/**
|
||||
* 页面的初始数据
|
||||
*/
|
||||
data: {
|
||||
//轮播图配置
|
||||
autoplay: true,
|
||||
interval: 3000,
|
||||
duration: 1200,
|
||||
},
|
||||
onLoad: function () {
|
||||
const data = {
|
||||
"swiperDatas": [{
|
||||
"id": 1,
|
||||
"imgurl": "../../images/home/1.jpg"
|
||||
},
|
||||
{
|
||||
"id": 2,
|
||||
"imgurl": "../../images/home/2.jpg"
|
||||
}
|
||||
]
|
||||
};
|
||||
this.setData({
|
||||
swiperDatas: data.swiperDatas
|
||||
})
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面加载
|
||||
*/
|
||||
onLoad: function (options) {
|
||||
const that = this;
|
||||
const data = {
|
||||
"swiperDatas": [{
|
||||
"id": 1,
|
||||
"imgurl": "../../images/home/1.jpg"
|
||||
},
|
||||
{
|
||||
"id": 2,
|
||||
"imgurl": "../../images/home/2.jpg"
|
||||
}
|
||||
]
|
||||
};
|
||||
that.setData({
|
||||
swiperDatas: data.swiperDatas
|
||||
})
|
||||
},
|
||||
|
||||
// 路由跳转
|
||||
navigateTo(e) {
|
||||
wx.navigateTo({
|
||||
url: e.currentTarget.dataset.url,
|
||||
})
|
||||
},
|
||||
examineTo(){
|
||||
wx.navigateTo({
|
||||
url: '/pages/preEdit/index?category=1&data={"id":759,"name":"中考报名","widthPx":240,"heightPx":320,"widthMm":20,"heightMm":27,"icon":1,"sort":100,"category":1,"dpi":300}',
|
||||
});
|
||||
},
|
||||
|
||||
loginJump(e){
|
||||
if (wx.getStorageSync("token") == "") {
|
||||
wx.navigateTo({
|
||||
url: "/pages/login/index",
|
||||
});
|
||||
}else{
|
||||
wx.navigateTo({
|
||||
url: e.currentTarget.dataset.url,
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
//即将上线项目弹出
|
||||
toBeLaunched(){
|
||||
wx.showToast({
|
||||
title: "您未解锁本功能",
|
||||
icon: 'none',
|
||||
duration: 1500
|
||||
onShow: function () {
|
||||
if (wx.getStorageSync("token") == "") {
|
||||
this.setData({
|
||||
authorized: false
|
||||
});
|
||||
}else{
|
||||
this.setData({
|
||||
authorized: true
|
||||
});
|
||||
},
|
||||
|
||||
onShareAppMessage() {
|
||||
return {
|
||||
title: '哇塞，这个证件照小程序也太好用了吧！好清晰，还免费',
|
||||
path: 'pages/home/index',
|
||||
imageUrl: '../../images/share.jpg'
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
|
||||
|
||||
navigateTo(e) {
|
||||
wx.navigateTo({
|
||||
url: e.currentTarget.dataset.url,
|
||||
})
|
||||
},
|
||||
|
||||
|
||||
examineTo(){
|
||||
wx.navigateTo({
|
||||
url: '/pages/preEdit/index?category=1&data={"id":759,"name":"中考报名","widthPx":240,"heightPx":320,"widthMm":20,"heightMm":27,"icon":1,"sort":100,"category":1,"dpi":300}',
|
||||
});
|
||||
},
|
||||
|
||||
loginJump(e){
|
||||
if (wx.getStorageSync("token") == "") {
|
||||
wx.navigateTo({
|
||||
url: "/pages/login/index",
|
||||
});
|
||||
}else{
|
||||
wx.navigateTo({
|
||||
url: e.currentTarget.dataset.url,
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
onShareAppMessage() {
|
||||
return {
|
||||
title: '哇塞，这个证件照小程序也太好用了吧！好清晰，还免费',
|
||||
path: 'pages/home/index',
|
||||
imageUrl: '../../images/share.jpg'
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
})
|
||||
@@ -62,42 +62,11 @@
|
||||
<van-icon name="flower-o" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="other">
|
||||
<view class="other-title">探索系列</view>
|
||||
|
||||
<view class="other-content">
|
||||
<view class="other-block">
|
||||
<image class="other-img" bindtap="navigateTo" data-url="/pages/sizeList/index" src="../../images/home/3.png"></image>
|
||||
<view class="other-msg">AI证件照</view>
|
||||
<view class="other-msg2">支持多种尺寸+自定义背景</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="other-content">
|
||||
<view class="other-block">
|
||||
<image class="other-img" bindtap="loginJump" data-url="/pages/colourize/index" src="../../images/home/5.png"></image>
|
||||
<view class="other-msg">黑白照片上色</view>
|
||||
<view class="other-msg2">黑白照片一键上色变清晰</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="other-content">
|
||||
<view class="other-block">
|
||||
<image class="other-img" bindtap="toBeLaunched" src="../../images/home/6.png"></image>
|
||||
<view class="other-msg">粘土风写真</view>
|
||||
<view class="other-msg2">又丑又萌的粘土风格照片</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="other-content">
|
||||
<view class="other-block">
|
||||
<image class="other-img" bindtap="toBeLaunched" src="../../images/home/4.png"></image>
|
||||
<view class="other-msg">人像抠图</view>
|
||||
<view class="other-msg2">智能识别人像，一键迅捷抠图</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="login-prompt" wx:if="{{!authorized}}" bindtap="loginJump" data-url="/pages/home/index">
|
||||
<text style="position: relative; left: 8rpx; top: 3rpx">你不登录，我就不走啦 (｡•́︿•̀｡)</text>
|
||||
<button class="login-button" bindtap="handleLogin" style="position: relative; left: -29rpx; top: 1rpx">立即登录</button>
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
</view>
|
||||
</view>
|
||||
+99
-133
@@ -1,183 +1,149 @@
|
||||
/* 轮博图样式 */
|
||||
.swiper-component {
|
||||
width: 100%;
|
||||
height: 60vh;
|
||||
width: 100%;
|
||||
height: 60vh;
|
||||
}
|
||||
|
||||
.swiper-content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.slide-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* 内容区域 */
|
||||
.content {
|
||||
width: 90%;
|
||||
height: 400rpx;
|
||||
background-color: #fff;
|
||||
margin: 0 auto;
|
||||
border-radius: 30rpx;
|
||||
position: relative;
|
||||
top: -100rpx;
|
||||
box-shadow: 0px 5px 8px #ccc;
|
||||
width: 90%;
|
||||
height: 400rpx;
|
||||
background-color: #fff;
|
||||
margin: 0 auto;
|
||||
border-radius: 30rpx;
|
||||
position: relative;
|
||||
top: -100rpx;
|
||||
box-shadow: 0px 5px 8px #ccc;
|
||||
}
|
||||
|
||||
.top {
|
||||
height: 65%;
|
||||
border-bottom: 1rpx solid #eee;
|
||||
|
||||
height: 65%;
|
||||
border-bottom: 1rpx solid #eee;
|
||||
}
|
||||
|
||||
.top-block {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.top-left {
|
||||
width: 33.333%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 30rpx;
|
||||
font-weight: 500;
|
||||
|
||||
width: 33.333%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 30rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.top-line {
|
||||
height: 80%;
|
||||
border: 1rpx solid #eee;
|
||||
height: 80%;
|
||||
border: 1rpx solid #eee;
|
||||
}
|
||||
|
||||
.top-right {
|
||||
width: 66.666%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 30rpx;
|
||||
font-weight: 500;
|
||||
width: 66.666%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 30rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.bottom {
|
||||
height: 35%;
|
||||
/* background-color: #0f0; */
|
||||
border-radius: 40rpx;
|
||||
height: 35%;
|
||||
border-radius: 40rpx;
|
||||
}
|
||||
|
||||
.bottom-block {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.bottom-line {
|
||||
height: 70%;
|
||||
border: 1rpx solid #eee;
|
||||
height: 70%;
|
||||
border: 1rpx solid #eee;
|
||||
}
|
||||
|
||||
.bottom-cell {
|
||||
width: 33.3%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 20rpx;
|
||||
width: 33.3%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 20rpx;
|
||||
}
|
||||
|
||||
.bottom-cell>view view:last-child {
|
||||
font-size: 18rpx;
|
||||
color: #ccc;
|
||||
font-size: 18rpx;
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.my-photo {
|
||||
width: 90%;
|
||||
height: 100rpx;
|
||||
background-color: #fff;
|
||||
margin: 0 auto;
|
||||
border-radius: 30rpx;
|
||||
position: relative;
|
||||
top: -70rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
width: 90%;
|
||||
height: 100rpx;
|
||||
background-color: #fff;
|
||||
margin: 0 auto;
|
||||
border-radius: 30rpx;
|
||||
position: relative;
|
||||
top: -70rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.my-photo view:first-child {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.other {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #fff;
|
||||
position: relative;
|
||||
top: -40rpx;
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
||||
.other-title {
|
||||
font-weight: 500;
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
.other-content {
|
||||
display: flex;
|
||||
|
||||
}
|
||||
|
||||
.other-content .other-block:first-child {
|
||||
height: 250px;
|
||||
width: 50%;
|
||||
margin: 20px 20px 0 20px;
|
||||
background-color: #000;
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
.other-content .other-block:last-child {
|
||||
height: 250px;
|
||||
width: 93%;
|
||||
margin: 20px 20px 5px 22px;
|
||||
background-color: #30323C;
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
.other-block {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.other-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0 auto;
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
.other-msg {
|
||||
height: 20%;
|
||||
position: absolute;
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
left: 8px;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.other-msg2 {
|
||||
height: 11%;
|
||||
position: absolute;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
left: 8px;
|
||||
}
|
||||
|
||||
/* 登录提示条样式 */
|
||||
.login-prompt {
|
||||
width: 100%;
|
||||
height: 80rpx;
|
||||
background-color: rgba(0, 0, 0, 0.6); /* 半透明黑色背景 */
|
||||
color: #ffffff;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
}
|
||||
left: 0;
|
||||
padding: 0 20rpx;
|
||||
font-size: 26rpx;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
/* 文字样式 */
|
||||
.login-text {
|
||||
margin-left: 30rpx; /* 文字向后移动 */
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
/* 登录按钮样式 */
|
||||
.login-button {
|
||||
padding: 8rpx 24rpx;
|
||||
background-color: #000000; /* 青蓝色 */
|
||||
color: #ffffff;
|
||||
border-radius: 50rpx;
|
||||
font-size: 24rpx;
|
||||
border: none;
|
||||
margin-right: 30rpx; /* 按钮向左靠近文字 */
|
||||
opacity: 0.9; /* 半透明按钮 */
|
||||
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
+12
-12
@@ -126,18 +126,18 @@ Page({
|
||||
});
|
||||
},
|
||||
|
||||
// 计算天数的函数
|
||||
calculateDays: function (time) {
|
||||
// 将时间字符串中的 '-' 替换为 '/'，以兼容 IOS 系统
|
||||
const formattedStartTimeStr = time.replace(/-/g, '/');
|
||||
const startDate = new Date(formattedStartTimeStr);
|
||||
const currentDate = new Date();
|
||||
const diffTime = currentDate - startDate;
|
||||
const diffDays = Math.abs(Math.floor(diffTime / (1000 * 60 * 60 * 24)));
|
||||
this.setData({
|
||||
days: diffDays,
|
||||
});
|
||||
},
|
||||
// 计算天数的函数
|
||||
calculateDays: function (time) {
|
||||
// 将时间字符串中的 '-' 替换为 '/'，以兼容 IOS 系统
|
||||
const formattedStartTimeStr = time.replace(/-/g, '/');
|
||||
const startDate = new Date(formattedStartTimeStr);
|
||||
const currentDate = new Date();
|
||||
const diffTime = currentDate - startDate;
|
||||
const diffDays = Math.abs(Math.floor(diffTime / (1000 * 60 * 60 * 24)));
|
||||
this.setData({
|
||||
days: diffDays+1,
|
||||
});
|
||||
},
|
||||
|
||||
goLogin: function () {
|
||||
wx.navigateTo({
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<view class="my-page">
|
||||
<view class="top">
|
||||
<!-- 用户头像 未登录 -->
|
||||
<view class="user-image" wx:if="{{!authorized}}">
|
||||
<view class="user-image" wx:if="{{!authorized}}" bindtap="goLogin">
|
||||
<image style="width: 100%; height: 100%;" mode="aspectFill" src="{{avatarUrl}}"></image>
|
||||
</view>
|
||||
<!-- 用户头像 已登录 -->
|
||||
@@ -60,12 +60,6 @@
|
||||
<text>分享</text>
|
||||
</view>
|
||||
</button>
|
||||
<button class="button-item" bindtap="easterEgg">
|
||||
<view class="icon-text">
|
||||
<van-icon name="ellipsis" size="30px" />
|
||||
<text>待开发</text>
|
||||
</view>
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
@@ -77,7 +71,7 @@
|
||||
<view class="modal-list">
|
||||
<text>● 你目前已经解锁基础功能，并无限制使用;</text>
|
||||
<text>● 你目前享受一对一专属客服，7x24全年极速响应;</text>
|
||||
<text>● 待解锁：排版照，人像抠图，黑白上色，粘土风写真;</text>
|
||||
<text>● 待解锁：排版照，粘土风写真，将照片转换成卡通形象;</text>
|
||||
<text>● 请多多分享小程序，系统将自动为您解锁。</text>
|
||||
</view>
|
||||
<button bindtap="closeModal">我明白了</button>
|
||||
@@ -121,17 +115,4 @@
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 彩蛋 -->
|
||||
<view class="modal" wx:if="{{modalType === 'easterEgg'}}">
|
||||
<view class="modal-content easter-egg-content">
|
||||
<view class="modal-body">
|
||||
<view class="modal-title">❤️ 恭喜您触发彩蛋 ❤️</view>
|
||||
<view class="modal-message">
|
||||
我给你的，就是我想要的，我爱你的方式，就是我希望被爱的方式。
|
||||
</view>
|
||||
<button bindtap="closeModal">一定会被爱的</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
@@ -220,41 +220,6 @@
|
||||
color: #999;
|
||||
}
|
||||
|
||||
/* 彩蛋弹窗 */
|
||||
.easter-egg-content {
|
||||
background-color: #ffe6f0;
|
||||
border: 2px solid #ffb6c1;
|
||||
border-radius: 15px;
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.easter-egg-content::before {
|
||||
content: "💕";
|
||||
font-size: 30px;
|
||||
position: absolute;
|
||||
top: -15px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.easter-egg-content .modal-title {
|
||||
font-size: 20px;
|
||||
color: #ff69b4;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.easter-egg-content .modal-message {
|
||||
font-size: 16px;
|
||||
color: #d6336c;
|
||||
margin-bottom: 30px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.easter-egg-content .modal-body button {
|
||||
background-color: #ff69b4;
|
||||
}
|
||||
|
||||
button {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
|
||||
@@ -194,7 +194,6 @@ Page({
|
||||
wx.showLoading({
|
||||
title: '制作中...',
|
||||
});
|
||||
console.log(this.data.detail)
|
||||
wx.request({
|
||||
url: app.url + 'api/createIdPhoto',
|
||||
data: {
|
||||
|
||||
@@ -74,18 +74,15 @@ Page({
|
||||
});
|
||||
},
|
||||
|
||||
//有问题，没有回到顶部，待修复
|
||||
scrollToTop: function () {
|
||||
const that = this;
|
||||
wx.pageScrollTo({
|
||||
scrollTop: 0,
|
||||
duration: 300
|
||||
});
|
||||
this.setData({
|
||||
scrollTop: 1
|
||||
}, () => {
|
||||
that.setData({
|
||||
scrollTop: 0
|
||||
});
|
||||
scrollTop: 0
|
||||
});
|
||||
},
|
||||
|
||||
|
||||
onLoad: function (options) {},
|
||||
|
||||
|
||||
@@ -2,20 +2,20 @@
|
||||
<view class="s-input">
|
||||
<van-search value="{{ value }}" bind:change="onChange" placeholder="请输入关键词,如：一寸" shape="round" />
|
||||
</view>
|
||||
<scroll-view class="container" scroll-y bindscrolltolower="moredata" scroll-top="{{scrollTop}}">
|
||||
<view wx:for="{{photoSizeList}}" wx:for-index="id" wx:key="id" data-index="{{id}}" bindtap="goNextPage">
|
||||
<view class="list">
|
||||
<view>
|
||||
<scroll-view class="container" scroll-y bindscrolltolower="moredata" scroll-top="{{scrollTop}}" enhanced show-scrollbar="{{false}}">
|
||||
<view class="grid-container">
|
||||
<view class="grid-item" wx:for="{{photoSizeList}}" wx:key="name" data-index="{{index}}" bindtap="goNextPage" hover-class="grid-item-hover">
|
||||
<image class="grid-image" src="../sizeList/sizes/{{item.icon}}.png" mode="aspectFit" lazy-load></image>
|
||||
<view class="grid-content">
|
||||
<view class="title">{{ item.name }}</view>
|
||||
<view class="description">{{item.widthPx}}*{{item.heightPx}} | {{item.widthMm}}*{{item.heightMm}}</view>
|
||||
<view class="description">{{item.widthPx}}*{{item.heightPx}}</view>
|
||||
<view class="description">{{item.widthMm}}*{{item.heightMm}} | {{item.dpi}}dpi</view>
|
||||
</view>
|
||||
<image style="width: 50px; height: 50px" src="../sizeList/sizes/{{item.icon}}.png"></image>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<view class="none" wx:if="{{!photoSizeList.length}}">
|
||||
<image src="./images/none.png" style="width: 100%;height: 100%;"></image>
|
||||
</view>
|
||||
<!-- 有问题，没有回到顶部，待修复 -->
|
||||
<!-- <view class="scroll-to-top" bindtap="scrollToTop">⬆</view> -->
|
||||
<view class="scroll-to-top" bindtap="scrollToTop" hover-class="scroll-to-top-hover">⬆</view>
|
||||
</view>
|
||||
|
||||
@@ -17,17 +17,46 @@
|
||||
|
||||
.container {
|
||||
margin-top: 15px;
|
||||
background-color: #f8f8f8;
|
||||
}
|
||||
|
||||
.list {
|
||||
.grid-container {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 16px;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.grid-item {
|
||||
background-color: #fff;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
|
||||
padding: 16px;
|
||||
display: flex;
|
||||
height: 10vh;
|
||||
background-color: #2c2c2c;
|
||||
margin: 0 20px 20px 20px;
|
||||
border-radius: 15px;
|
||||
justify-content: space-between;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
color: #fff;
|
||||
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
||||
}
|
||||
|
||||
.grid-item:active {
|
||||
transform: scale(0.98);
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
.grid-image {
|
||||
width: 72px;
|
||||
height: 72px;
|
||||
margin-bottom: 12px;
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
.grid-item:active .grid-image {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
.grid-content {
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.none {
|
||||
@@ -36,37 +65,37 @@
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.list image {
|
||||
margin-right: 20px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.list view {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 18px;
|
||||
margin-bottom: 10px;
|
||||
font-weight: 500;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 6px;
|
||||
color: #2c2c2c;
|
||||
}
|
||||
|
||||
.description {
|
||||
font-size: 14px;
|
||||
font-size: 12px;
|
||||
color: #888;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.scroll-to-top {
|
||||
position: fixed;
|
||||
bottom: 60px;
|
||||
right: 30px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background-color: #2c2c2c;
|
||||
bottom: 64px;
|
||||
right: 24px;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
background-color: #4a95e0;
|
||||
color: white;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 100;
|
||||
box-shadow: 0 0 10px rgba(0,0,0,0.2);
|
||||
box-shadow: 0 2px 12px rgba(74, 149, 224, 0.3);
|
||||
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
||||
}
|
||||
|
||||
.scroll-to-top:active {
|
||||
transform: scale(0.95);
|
||||
box-shadow: 0 1px 6px rgba(74, 149, 224, 0.2);
|
||||
}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<view class="top">
|
||||
<van-tabs active="{{ active }}" bind:click="clickTab" color="#2c2c2c">
|
||||
<van-tabs active="{{ active }}" bind:click="clickTab" color="#2c2c2c" sticky animated swipeable>
|
||||
<van-tab title="常用尺寸" name="1"></van-tab>
|
||||
<van-tab title="各类证件" name="3"></van-tab>
|
||||
<van-tab title="各类签证" name="2"></van-tab>
|
||||
@@ -7,15 +7,16 @@
|
||||
<van-tab title="搜索" name="5"></van-tab>
|
||||
</van-tabs>
|
||||
</view>
|
||||
<scroll-view class="container" scroll-y bindscrolltolower="moredata" scroll-top="{{scrollTop}}">
|
||||
<view wx:for="{{photoSizeList}}" wx:key="name" data-index="{{index}}" bindtap="goNextPage">
|
||||
<view class="list">
|
||||
<view>
|
||||
<scroll-view class="container" scroll-y bindscrolltolower="moredata" scroll-top="{{scrollTop}}" enhanced show-scrollbar="{{false}}">
|
||||
<view class="grid-container">
|
||||
<view class="grid-item" wx:for="{{photoSizeList}}" wx:key="name" data-index="{{index}}" bindtap="goNextPage" hover-class="grid-item-hover">
|
||||
<image class="grid-image" src="./sizes/{{item.icon}}.png" mode="aspectFit" lazy-load></image>
|
||||
<view class="grid-content">
|
||||
<view class="title">{{ item.name }}</view>
|
||||
<view class="description">{{item.widthPx}}*{{item.heightPx}} | {{item.widthMm}}*{{item.heightMm}} | {{item.dpi}}dpi</view>
|
||||
<view class="description">{{item.widthPx}}*{{item.heightPx}}</view>
|
||||
<view class="description">{{item.widthMm}}*{{item.heightMm}} | {{item.dpi}}dpi</view>
|
||||
</view>
|
||||
<image style="width: 50px; height: 50px" src="./sizes/{{item.icon}}.png"></image>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<view class="scroll-to-top" bindtap="scrollToTop">⬆</view>
|
||||
<view class="scroll-to-top" bindtap="scrollToTop" hover-class="scroll-to-top-hover">⬆</view>
|
||||
|
||||
@@ -3,60 +3,77 @@
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 8vh;
|
||||
height: 7vh;
|
||||
background-color: #fff;
|
||||
font-size: 16px;
|
||||
z-index: 10;
|
||||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
.container {
|
||||
margin-top: 8vh;
|
||||
height: 92vh;
|
||||
background-color: #f8f8f8;
|
||||
}
|
||||
|
||||
.grid-container {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 16px;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.grid-item {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.list {
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
|
||||
padding: 16px;
|
||||
display: flex;
|
||||
height: 10vh;
|
||||
background-color: #2c2c2c;
|
||||
margin: 0 20px 20px 20px;
|
||||
border-radius: 15px;
|
||||
justify-content: space-between;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
color: #fff;
|
||||
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
||||
}
|
||||
|
||||
.list image {
|
||||
margin-right: 20px;
|
||||
border-radius: 50%;
|
||||
.grid-item:active {
|
||||
transform: scale(0.98);
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
.list view {
|
||||
margin-left: 10px;
|
||||
.grid-image {
|
||||
width: 72px;
|
||||
height: 72px;
|
||||
margin-bottom: 12px;
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
.grid-item:active .grid-image {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
.grid-content {
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 18px;
|
||||
margin-bottom: 10px;
|
||||
font-weight: 500;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 6px;
|
||||
color: #2c2c2c;
|
||||
}
|
||||
|
||||
.description {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.none {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
margin: 0 auto;
|
||||
font-size: 12px;
|
||||
color: #888;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.scroll-to-top {
|
||||
position: fixed;
|
||||
bottom: 60px;
|
||||
right: 30px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
bottom: 64px;
|
||||
right: 24px;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
background-color: #4a95e0;
|
||||
color: white;
|
||||
border-radius: 50%;
|
||||
@@ -64,5 +81,11 @@
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 100;
|
||||
box-shadow: 0 0 10px rgba(0,0,0,0.2);
|
||||
box-shadow: 0 2px 12px rgba(74, 149, 224, 0.3);
|
||||
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
||||
}
|
||||
|
||||
.scroll-to-top:active {
|
||||
transform: scale(0.95);
|
||||
box-shadow: 0 1px 6px rgba(74, 149, 224, 0.2);
|
||||
}
|
||||
|
||||
@@ -13,6 +13,12 @@ Page({
|
||||
|
||||
// 页面加载时请求第一页数据
|
||||
onLoad() {
|
||||
if (wx.getStorageSync("token") == "") {
|
||||
wx.navigateTo({
|
||||
url: "/pages/login/index",
|
||||
});
|
||||
return;
|
||||
}
|
||||
Notify({ type: 'success', message: '只有下载过，才会出现在这里哦~' });
|
||||
this.getSizeList();
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user