From 21bf10fdc08d97b9303235bfd2bf4fc4c00aaf8a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=B4=AB=E5=9B=B0=E7=9A=84=E8=9A=8A=E5=AD=90?=
<24677102@qq.com>
Date: Mon, 23 Sep 2024 21:29:04 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E6=8B=8D=E7=85=A7=E6=8A=80?=
=?UTF-8?q?=E5=B7=A7=EF=BC=8C=E4=BC=98=E5=8C=96=E5=AE=9A=E5=88=B6=E5=B0=BA?=
=?UTF-8?q?=E5=AF=B8=EF=BC=8C=E4=BF=AE=E5=A4=8D=E9=A6=96=E7=82=B9=E5=87=BB?=
=?UTF-8?q?=E9=83=A8=E5=88=86=E5=8A=9F=E8=83=BD=E4=BC=9A=E5=87=BA=E7=8E=B0?=
=?UTF-8?q?=E9=87=8D=E5=A4=8D=E8=B7=B3=E8=BD=AC2=E6=AC=A1=E7=9A=84?=
=?UTF-8?q?=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
README.md | 2 +-
ymhZjz/pages/custom/index.js | 275 ++++++++++++++------------------
ymhZjz/pages/custom/index.wxml | 82 ++++++++--
ymhZjz/pages/custom/index.wxss | 83 +++++++---
ymhZjz/pages/custom/util.js | 53 +++---
ymhZjz/pages/home/index.js | 5 +-
ymhZjz/pages/home/index.wxml | 12 +-
ymhZjz/pages/methods/index.wxml | 64 +++-----
ymhZjz/pages/methods/index.wxss | 115 +++++++------
ymhZjz/pages/sizeList/index.js | 1 +
10 files changed, 383 insertions(+), 309 deletions(-)
diff --git a/README.md b/README.md
index 8406e42..fa22541 100644
--- a/README.md
+++ b/README.md
@@ -17,7 +17,7 @@
------
# ⭐最近更新
-- 2024.09.23：增加个人中心
+- 2024.09.23：增加个人中心，优化拍照技巧，优化定制尺寸，修复首点击部分功能会出现重复跳转2次的问题
- 2024.09.21：修复我的作品无法下载问题
- 2024.09.20: 根据微信热力图优化体验，加大首页按钮点击范围，修复分页后删除作品页面没变化，增加温馨提示
- 2024.09.19: 增加看广告视频下载功能
diff --git a/ymhZjz/pages/custom/index.js b/ymhZjz/pages/custom/index.js
index bb02985..46e3652 100644
--- a/ymhZjz/pages/custom/index.js
+++ b/ymhZjz/pages/custom/index.js
@@ -1,179 +1,138 @@
import tool from '././util'
-const app = getApp()
+const app = getApp();
Page({
-
- /**
- * 页面的初始数据
- */
data: {
- width: 0,
- height: 0,
+ width: '',
+ height: '',
name: '',
- px: '295*413 px',
- size: '25*35'
+ px: '0*0 px',
+ size: '0*0 mm'
},
- changeName: tool.debounce(function (e) {
- if (e[0].detail) {
- this.setData({
- name: e[0].detail
- })
- }
- }, 500),
-
- changeWidth: tool.debounce(function (e) {
- if (e[0].detail) {
- this.setData({
- width: Number(e[0].detail),
- px: `${Number(e[0].detail)}*${this.data.height} px`,
- size: `${Math.floor(Number(e[0].detail)/11.8)}*${Math.floor(this.data.height/11.8)}`
- })
- }
- }, 500),
-
- changeHeight: tool.debounce(function (e) {
- if (e[0].detail) {
- this.setData({
- height: Number(e[0].detail),
- px: `${this.data.width}*${Number(e[0].detail)} px`,
- size: `${Math.floor(this.data.width/11.8)}*${Math.floor(Number(e[0].detail)/11.8)}`
- })
- }
- }, 500),
-
- addSize() {
- if(this.data.width==0 || this.data.height==0){
- wx.showToast({
- title: '宽或高不能为0',
- icon: 'error',
- duration: 2000,
- mask: true
- })
- return;
- }
- if(this.data.name==''){
- wx.showToast({
- title: '名字为必填',
- icon: 'error',
- duration: 2000,
- mask: true
- })
- return;
- }
- if (!this.isNull(this.data)) {
- wx.showToast({
- title: '不能有特殊符号',
- icon: 'error',
- duration: 2000,
- mask: true
- })
- } else {
- wx.request({
- url: app.url + 'item/saveCustom',
- method: "POST",
- data:{
- "name":this.data.name,
- "widthPx":this.data.width,
- "heightPx":this.data.height,
- "size":this.data.size
- },
- header: {
- "token": wx.getStorageSync("token")
- },
- success(res) {
- if (res.data.code == 200) {
- wx.showToast({
- title: '定制成功',
- duration: 2000,
- mask: true
- })
-
- } else {
- wx.showToast({
- title: '定制失败，请重试',
- duration: 2000,
- icon:"none",
- mask: true
- })
- }
-
- }
- })
- }
- },
-
- isNull() {
- const {
- width,
- height,
- name
- } = this.data
- const reg = /^\d+$/;
- if (!name || !reg.test(width) || !reg.test(height)) {
- return false
- } else {
- return true
- }
- },
-
- /**
- * 生命周期函数--监听页面加载
- */
- onLoad: function (options) {
- if(wx.getStorageSync("token") == ""){
+ onLoad: function () {
+ if (!wx.getStorageSync('token')) {
wx.navigateTo({
- url: '/pages/login/index',
+ url: '/pages/login/index'
});
}
},
- /**
- * 生命周期函数--监听页面初次渲染完成
- */
- onReady: function () {
-
+ changeName(e) {
+ const value = e.detail || '';
+ this.setData({
+ name: value
+ });
},
- /**
- * 生命周期函数--监听页面显示
- */
- onShow: function () {
+ changeWidth: tool.debounce(function (e) {
+ const value = e.detail;
+ this.setData({
+ width: value
+ });
+ this.updateSize();
+ }, 300),
+ changeHeight: tool.debounce(function (e) {
+ const value = e.detail;
+ this.setData({
+ height: value
+ });
+ this.updateSize();
+ }, 300),
+
+ updateSize() {
+ let width = parseInt(this.data.width, 10);
+ let height = parseInt(this.data.height, 10);
+ let width_px = isNaN(width) ? 0 : width;
+ let height_px = isNaN(height) ? 0 : height;
+ let width_mm = Math.floor(width_px / 11.8);
+ let height_mm = Math.floor(height_px / 11.8);
+ this.setData({
+ px: `${width_px}*${height_px} px`,
+ size: `${width_mm}*${height_mm} mm`
+ });
},
- /**
- * 生命周期函数--监听页面隐藏
- */
- onHide: function () {
+ addSize() {
+ const name = this.data.name.trim();
+ const width = parseInt(this.data.width, 10);
+ const height = parseInt(this.data.height, 10);
+
+ if (!name) {
+ wx.showToast({
+ title: '名称为必填',
+ icon: 'none',
+ duration: 2000,
+ mask: true
+ });
+ return;
+ }
+ if (isNaN(width) || isNaN(height) || width <= 0 || height <= 0) {
+ wx.showToast({
+ title: '宽或高必须大于0',
+ icon: 'none',
+ duration: 2000,
+ mask: true
+ });
+ return;
+ }
+
+ if (!this.isValidName(name)) {
+ wx.showToast({
+ title: '名称不能包含特殊符号',
+ icon: 'none',
+ duration: 2000,
+ mask: true
+ });
+ return;
+ }
+
+ wx.request({
+ url: app.url + 'item/saveCustom',
+ method: 'POST',
+ data: {
+ name: name,
+ widthPx: width,
+ heightPx: height,
+ size: this.data.size
+ },
+ header: {
+ token: wx.getStorageSync('token')
+ },
+ success: (res) => {
+ if (res.data.code == 200) {
+ wx.showToast({
+ title: '定制成功',
+ duration: 2000,
+ mask: true
+ });
+ this.setData({
+ name: '',
+ width: '',
+ height: '',
+ px: '0*0 px',
+ size: '0*0 mm'
+ });
+ } else if(res.data.code == 404){
+ wx.showToast({
+ title: res.data.data,
+ duration: 2000,
+ icon: 'none',
+ mask: true
+ });
+ }else{
+ wx.navigateTo({
+ url: "/pages/login/index",
+ });
+ }
+ },
+ });
},
- /**
- * 生命周期函数--监听页面卸载
- */
- onUnload: function () {
-
- },
-
- /**
- * 页面相关事件处理函数--监听用户下拉动作
- */
- onPullDownRefresh: function () {
-
- },
-
- /**
- * 页面上拉触底事件的处理函数
- */
- onReachBottom: function () {
-
- },
-
- /**
- * 用户点击右上角分享
- */
- onShareAppMessage: function () {
-
+ isValidName(name) {
+ const reg = /^[a-zA-Z0-9\u4e00-\u9fa5]+$/;
+ return reg.test(name);
}
-})
\ No newline at end of file
+});
diff --git a/ymhZjz/pages/custom/index.wxml b/ymhZjz/pages/custom/index.wxml
index 4a3d09a..b1bd020 100644
--- a/ymhZjz/pages/custom/index.wxml
+++ b/ymhZjz/pages/custom/index.wxml
@@ -1,17 +1,81 @@
-
-
+ 轻松定制自已专属尺寸
+
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
+
-
\ No newline at end of file
+
diff --git a/ymhZjz/pages/custom/index.wxss b/ymhZjz/pages/custom/index.wxss
index a3ef5fc..a8fad45 100644
--- a/ymhZjz/pages/custom/index.wxss
+++ b/ymhZjz/pages/custom/index.wxss
@@ -1,34 +1,75 @@
-/* pages/custom/index.wxss */
.custom {
- height: 100vh;
+ min-height: 83vh;
+ background-color: #f5f5f5;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+}
+
+.container {
+ width: 90%;
+ max-width: 500px;
background-color: #fff;
+ border-radius: 15px;
+ padding: 20px;
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
-.size {
- width: 70vw;
- height: 30vh;
- margin: 0 auto;
- /* margin: 0 70px; */
- margin-top: 20vh;
- color: #2c2c2c !important;
-}
-
-
-.van-field__label {
- font-size: 18px;
+.input-field {
+ margin-bottom: 15px;
}
.bottom {
- margin: 100px auto;
+ width: 90%;
+ max-width: 500px;
+ display: flex;
+ justify-content: center;
+ margin-top: 20px;
}
-.bottom button:first-child {
- margin: 0 70px;
- height: 45px;
- color: #fff;
+.save-button {
+ width: 100%;
+ padding: 12px 0;
background-color: #2c2c2c;
+ color: #fff;
+ border: none;
border-radius: 10px;
font-size: 18px;
+ font-weight: bold;
+ cursor: pointer;
+ transition: background-color 0.3s ease;
+}
+
+/* 使用微信小程序的 hover-class 进行样式修改 */
+.save-button-hover {
+ background-color: #1a1a1a;
+}
+
+/* 添加 active 状态的反馈 */
+.save-button:active {
+ background-color: #0d0d0d;
+}
+
+
+/* 标题样式 */
+.title {
+ font-size: 30px;
+ font-weight: bold;
+ color: #333;
+ margin-top: 20px;
+ margin-bottom: 20px;
text-align: center;
- line-height: 45px;
-}
\ No newline at end of file
+}
+
+/* 响应式设计 */
+@media screen and (max-width: 600px) {
+ .container {
+ width: 95%;
+ padding: 15px;
+ }
+
+ .save-button {
+ font-size: 16px;
+ }
+}
diff --git a/ymhZjz/pages/custom/util.js b/ymhZjz/pages/custom/util.js
index 885e1d7..300306e 100644
--- a/ymhZjz/pages/custom/util.js
+++ b/ymhZjz/pages/custom/util.js
@@ -1,32 +1,31 @@
-/*函数节流*/
-function throttle(fn, interval) {
- var enterTime = 0; //触发的时间
- var gapTime = interval || 300; //间隔时间，如果interval不传，则默认300ms
- return function () {
- var context = this;
- var backTime = new Date(); //第一次函数return即触发的时间
- if (backTime - enterTime > gapTime) {
- fn.call(context, arguments);
- enterTime = backTime; //赋值给第一次触发的时间，这样就保存了第二次触发的时间
+/* utils/util.js */
+
+/* 函数防抖 */
+function debounce(fn, delay = 300) {
+ let timer = null;
+ return function (...args) {
+ const context = this; // 保存 this 上下文
+ if (timer) clearTimeout(timer);
+ timer = setTimeout(() => {
+ fn.apply(context, args); // 使用 apply 确保正确的 this 并传递参数
+ }, delay);
+ };
+}
+
+/* 函数节流 */
+function throttle(fn, interval = 300) {
+ let lastTime = 0;
+ return function (...args) {
+ const context = this; // 保存 this 上下文
+ const now = Date.now();
+ if (now - lastTime >= interval) {
+ fn.apply(context, args); // 使用 apply 确保正确的 this 并传递参数
+ lastTime = now;
}
};
}
-/*函数防抖*/
-function debounce(fn, interval) {
- var timer;
- var gapTime = interval || 1000; //间隔时间，如果interval不传，则默认1000ms
- return function () {
- clearTimeout(timer);
- var context = this;
- var args = arguments; //保存此处的arguments，因为setTimeout是全局的，arguments不是防抖函数需要的。
- timer = setTimeout(function () {
- fn.call(context, args);
- }, gapTime);
- };
-}
-
export default {
- throttle,
- debounce
-};
\ No newline at end of file
+ debounce,
+ throttle
+};
diff --git a/ymhZjz/pages/home/index.js b/ymhZjz/pages/home/index.js
index ab3d2d8..4e85573 100644
--- a/ymhZjz/pages/home/index.js
+++ b/ymhZjz/pages/home/index.js
@@ -37,14 +37,15 @@ Page({
url: e.currentTarget.dataset.url,
})
},
- mywork(){
+
+ loginJump(e){
if (wx.getStorageSync("token") == "") {
wx.navigateTo({
url: "/pages/login/index",
});
}else{
wx.navigateTo({
- url: "/pages/works/index",
+ url: e.currentTarget.dataset.url,
});
}
},
diff --git a/ymhZjz/pages/home/index.wxml b/ymhZjz/pages/home/index.wxml
index 0f6a499..ba52a1b 100644
--- a/ymhZjz/pages/home/index.wxml
+++ b/ymhZjz/pages/home/index.wxml
@@ -17,7 +17,7 @@
-
+
快速制作
@@ -25,7 +25,7 @@
-
+
热门推荐
近期高频尺寸
@@ -33,8 +33,8 @@
-
-
+
+
自定义
多种尺寸制作
@@ -43,7 +43,7 @@
-
+
搜索
关键字查找
@@ -53,7 +53,7 @@
-
+
我的作品
diff --git a/ymhZjz/pages/methods/index.wxml b/ymhZjz/pages/methods/index.wxml
index 339dbe5..e953621 100644
--- a/ymhZjz/pages/methods/index.wxml
+++ b/ymhZjz/pages/methods/index.wxml
@@ -1,70 +1,54 @@
+
衣服选择
-
+
-
- 选择能够使脖子显得修长的领子，优先推荐V领，尽量不选择圆领
-
-
- 穿衬衣，应该解开第一个扣子使脖子部分露出多一些
-
-
- 简单干净，避免花里胡哨
-
+ 选择能够使脖子显得修长的领子，优先推荐V领，尽量不选择圆领。
+ 穿衬衣，应该解开第一个扣子使脖子部分露出多一些。
+ 简单干净，避免花里胡哨。
-
-
-
+
+
造型选择
-
+
-
- 妆容一定要简单自然大方，拒绝浓妆艳抹
-
-
- 发型以自然清爽为主
-
-
- 可以选择丸子头，高马尾或者普通直发等
-
+ 妆容一定要简单自然大方，拒绝浓妆艳抹。
+ 发型以自然清爽为主。
+ 可以选择丸子头、高马尾或者普通直发等。
-
+
+
拍照技巧
-
+
-
- 微微抬起眼睛，看镜头上方3cm的地方，显得眼睛又大又有神
-
-
- 按快门的时候，深呼吸，会使脖子肌肉与锁骨的线条变得好看
-
-
- 藏住双下巴，稍微仰头，收紧肩胛骨
-
+ 微微抬起眼睛，看镜头上方3cm的地方，显得眼睛又大又有神。
+ 按快门的时候，深呼吸，会使脖子肌肉与锁骨的线条变得好看。
+ 藏住双下巴，稍微仰头，收紧肩胛骨。
-
+
-
- 去试试
-
-
-
\ No newline at end of file
+
+ 去试试
+
+
+
+
diff --git a/ymhZjz/pages/methods/index.wxss b/ymhZjz/pages/methods/index.wxss
index e1b3b12..823aadd 100644
--- a/ymhZjz/pages/methods/index.wxss
+++ b/ymhZjz/pages/methods/index.wxss
@@ -1,65 +1,90 @@
+/* 页面整体样式 */
+.methods {
+ padding: 20px;
+ background-color: #f5f5f5;
+}
+
+/* 每个模块的卡片样式 */
.block {
- margin: 20px 20px 0 20px;
- height: 190px;
+ margin-bottom: 20px;
background-color: #fff;
- border-radius: 15px;
- color: #2c2c2c;
- padding-top: 6px;
+ border-radius: 10px;
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* 轻微阴影 */
+ padding: 15px;
+}
+
+/* 标题样式 */
+.title {
+ font-size: 18px;
+ font-weight: 600;
+ color: #333;
+ margin-bottom: 10px;
+}
+
+/* 内容容器样式 */
+.cont {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+
+/* 左侧图片样式 */
+.left {
+ flex-shrink: 0; /* 防止图片被压缩 */
+ width: 120px; /* 固定图片宽度 */
+ height: auto;
+}
+
+.image {
+ width: 100%;
+ height: auto;
+ object-fit: contain; /* 确保图片按比例缩放 */
+}
+
+/* 右侧文本区域样式 */
+.right {
+ flex-grow: 1;
+ padding-left: 20px;
}
.msg {
- display: flex;
- align-items: flex-start;
- line-height: 22px;
font-size: 14px;
+ color: #666;
+ line-height: 1.6;
+ margin-bottom: 10px;
}
-.title {
- font-size: 16px;
- font-weight: 500;
- margin: 10px 0 10px 20px;
-}
-
-.cont {
- display: flex;
- width: 100%;
- align-items: center;
-}
-
-.left {
- height: 130px;
- margin: 0 10px 0 10px;
- width: 30%;
-}
-
-
-.right {
- width: 70%;
- height: 130px;
- display: flex;
- flex-direction: column;
- justify-content: space-between;
-}
-
+/* 底部按钮样式 */
.bottom {
- font-size: 16px;
display: flex;
justify-content: center;
align-items: center;
- margin-top: 10px;
- color: #165dff;
+ margin-top: 20px;
+ color: #2c2c2c;
}
.left-line {
- background: linear-gradient(to left, #165dff, #fff);
+ background: linear-gradient(to left, #2c2c2c, #fff);
height: 1px;
- width: 100px;
- margin-right: 5px;
+ width: 80px;
+ margin-right: 10px;
}
.right-line {
- background: linear-gradient(to left, #fff, #165dff);
+ background: linear-gradient(to right, #2c2c2c, #fff);
height: 1px;
- width: 100px;
- margin-left: 5px;
-}
\ No newline at end of file
+ width: 80px;
+ margin-left: 10px;
+}
+
+.navigate-button {
+ font-size: 16px;
+ color: #2c2c2c;
+ cursor: pointer;
+ font-weight: bold;
+ transition: color 0.3s ease;
+}
+
+.navigate-button:hover {
+ color: #2c2c2c;
+}
diff --git a/ymhZjz/pages/sizeList/index.js b/ymhZjz/pages/sizeList/index.js
index 21c11ab..29d34ec 100644
--- a/ymhZjz/pages/sizeList/index.js
+++ b/ymhZjz/pages/sizeList/index.js
@@ -87,6 +87,7 @@ Page({
},
onLoad: function () {
+ console.log("页面被加载")
this.getSizeList();
},