优化拍照技巧，优化定制尺寸，修复首点击部分功能会出现重复跳转2次的问题

README.md

@@ -17,7 +17,7 @@
 ------
 
 # ⭐最近更新
-- 2024.09.23：增加个人中心
+- 2024.09.23：增加个人中心，优化拍照技巧，优化定制尺寸，修复首点击部分功能会出现重复跳转2次的问题
 - 2024.09.21：修复我的作品无法下载问题
 - 2024.09.20: 根据微信热力图优化体验，加大首页按钮点击范围，修复分页后删除作品页面没变化，增加温馨提示
 - 2024.09.19: 增加看广告视频下载功能

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);
   }
-})
+});

ymhZjz/pages/custom/index.wxml

@@ -1,17 +1,81 @@
-<!--pages/custom/index.wxml-->
 <view class="custom">
-  <view class="size">
+  <view class="title">轻松定制自已专属尺寸</view>
+  <view class="container">
     <van-cell-group>
-      <van-field value="{{ name }}" type="string" label="名称：" placeholder="请输入名称" border="{{ false }}" size="large" maxlength="10" input-align="right" bind:change="changeName" />
-      <van-field value="{{ width }}" type="number" label="宽度：" placeholder="像素：px" border="{{ false }}" size="large" maxlength="4" input-align="right" bind:change="changeWidth" />
-      <van-field value="{{ height }}" type="number" label="高度：" placeholder="像素：px" border="{{ false }}" size="large" maxlength="4" input-align="right" bind:change="changeHeight" />
-      <van-field value="{{ size }} mm" type="string" label="尺寸:" placeholder="尺寸：mm" border="{{ false }}" size="large" input-align="right" readonly="{{true}}" />
-      <van-field value="{{ px }}" type="string" label="像素:" placeholder="像素：px" border="{{ false }}" size="large" input-align="right" readonly="{{true}}" />
 
+      <!-- 名称输入框 -->
+      <van-field 
+        value="{{ name }}" 
+        type="text" 
+        label="名称：" 
+        placeholder="请输入名称" 
+        border 
+        size="large" 
+        maxlength="10" 
+        input-align="right" 
+        bind:input="changeName" 
+        class="input-field"
+      />
+
+      <!-- 宽度输入框 -->
+      <van-field 
+        value="{{ width }}" 
+        type="number" 
+        label="宽度：" 
+        placeholder="像素：px" 
+        border 
+        size="large" 
+        maxlength="4" 
+        input-align="right" 
+        bind:input="changeWidth" 
+        class="input-field"
+      />
+
+      <!-- 高度输入框 -->
+      <van-field 
+        value="{{ height }}" 
+        type="number" 
+        label="高度：" 
+        placeholder="像素：px" 
+        border 
+        size="large" 
+        maxlength="4" 
+        input-align="right" 
+        bind:input="changeHeight" 
+        class="input-field"
+      />
+
+      <!-- 尺寸显示框 -->
+      <van-field 
+        value="{{ size }}" 
+        type="text" 
+        label="尺寸:" 
+        placeholder="尺寸：mm" 
+        border 
+        size="large" 
+        input-align="right" 
+        readonly 
+        class="input-field"
+      />
+
+      <!-- 像素显示框 -->
+      <van-field 
+        value="{{ px }}" 
+        type="text" 
+        label="像素:" 
+        placeholder="像素：px" 
+        border 
+        size="large" 
+        input-align="right" 
+        readonly 
+        class="input-field"
+      />
 
     </van-cell-group>
   </view>
+
+  <!-- 底部按钮 -->
   <view class="bottom">
-    <button bindtap="addSize" class="">保存尺寸</button>
+    <button bindtap="addSize" class="save-button" hover-class="save-button-hover">保存尺寸</button>
   </view>
-</view>
+</view>

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;
-}
+}
+
+/* 响应式设计 */
+@media screen and (max-width: 600px) {
+  .container {
+    width: 95%;
+    padding: 15px;
+  }
+
+  .save-button {
+    font-size: 16px;
+  }
+}

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
-};
+  debounce,
+  throttle
+};

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,
         });
       }
     },

ymhZjz/pages/home/index.wxml

@@ -17,7 +17,7 @@
 				</view>
 				<view class="top-line"></view>
 				<view class="top-right" bindtap="navigateTo" data-url="/pages/sizeList/index">
-					<image style="width: 45px; height: 65px; margin-bottom: 5px " src="../../images/home/build.png" bindtap="navigateTo" data-url="/pages/sizeList/index"></image>
+					<image style="width: 45px; height: 65px; margin-bottom: 5px" src="../../images/home/build.png"></image>
 					<view>快速制作</view>
 				</view>
 			</view>
@@ -25,7 +25,7 @@
 		<view class="bottom">
 			<view class="bottom-block">
 				<view class="bottom-cell" bindtap="navigateTo" data-url="/pages/sizeList/index">
-					<image style="width: 30px; height: 30px; margin-right: 5px " src="../../images/home/hot.png"></image>
+					<image style="width: 30px; height: 30px; margin-right: 5px" src="../../images/home/hot.png"></image>
 					<view>
 						<view>热门推荐</view>
 						<view>近期高频尺寸</view>
@@ -33,8 +33,8 @@
 
 				</view>
 				<view class="bottom-line"></view>
-				<view class="bottom-cell" bindtap="navigateTo" data-url="/pages/custom/index">
-					<image style="width: 30px; height: 30px; margin-right: 5px " src="../../images/home/custom.png"></image>
+				<view class="bottom-cell" bindtap="loginJump" data-url="/pages/custom/index">
+					<image style="width: 30px; height: 30px; margin-right: 5px" src="../../images/home/custom.png"></image>
 					<view>
 						<view>自定义</view>
 						<view>多种尺寸制作</view>
@@ -43,7 +43,7 @@
 				</view>
 				<view class="bottom-line"></view>
 				<view class="bottom-cell" bindtap="navigateTo" data-url="/pages/searchs/index">
-					<image style="width: 30px; height: 30px; margin-right: 5px " src="../../images/home/search.png" bindtap="navigateTo" data-url="/pages/searchs/index"></image>
+					<image style="width: 30px; height: 30px; margin-right: 5px" src="../../images/home/search.png"></image>
 					<view>
 						<view>搜索</view>
 						<view>关键字查找</view>
@@ -53,7 +53,7 @@
 		</view>
 
 	</view>
-	<view class="my-photo" bindtap="mywork">
+	<view class="my-photo" bindtap="loginJump" data-url="/pages/works/index">
 		<view>
 			<image style="width: 25px; height: 20px; margin: 0 10px 0 15px " src="../../images/home/my-photo.png"></image>
 			<view>我的作品</view>

ymhZjz/pages/methods/index.wxml

@@ -1,70 +1,54 @@
 <view class="methods">
+  <!-- 衣服选择模块 -->
   <view class="block">
     <view class="title">衣服选择</view>
     <view class="cont">
       <view class="left">
-        <image src="./images/1.png" style="width:100%;height:100%"></image>
+        <image src="./images/1.png" class="image" mode="widthFix"></image>
       </view>
       <view class="right">
-        <view class="msg">
-          选择能够使脖子显得修长的领子，优先推荐V领，尽量不选择圆领
-        </view>
-        <view class="msg">
-          穿衬衣，应该解开第一个扣子使脖子部分露出多一些
-        </view>
-        <view class="msg">
-          简单干净，避免花里胡哨
-        </view>
+        <view class="msg">选择能够使脖子显得修长的领子，优先推荐V领，尽量不选择圆领。</view>
+        <view class="msg">穿衬衣，应该解开第一个扣子使脖子部分露出多一些。</view>
+        <view class="msg">简单干净，避免花里胡哨。</view>
       </view>
     </view>
-
-
-
   </view>
+
+  <!-- 造型选择模块 -->
   <view class="block">
     <view class="title">造型选择</view>
     <view class="cont">
       <view class="left">
-        <image src="./images/2.png" style="width:100%;height:100%"></image>
+        <image src="./images/2.png" class="image" mode="widthFix"></image>
       </view>
       <view class="right">
-        <view class="msg">
-          妆容一定要简单自然大方，拒绝浓妆艳抹
-        </view>
-        <view class="msg">
-          发型以自然清爽为主
-        </view>
-        <view class="msg">
-          可以选择丸子头，高马尾或者普通直发等
-        </view>
+        <view class="msg">妆容一定要简单自然大方，拒绝浓妆艳抹。</view>
+        <view class="msg">发型以自然清爽为主。</view>
+        <view class="msg">可以选择丸子头、高马尾或者普通直发等。</view>
       </view>
     </view>
-
   </view>
+
+  <!-- 拍照技巧模块 -->
   <view class="block">
     <view class="title">拍照技巧</view>
     <view class="cont">
       <view class="left">
-        <image src="./images/3.png" style="width:100%;height:100%"></image>
+        <image src="./images/3.png" class="image" mode="widthFix"></image>
       </view>
       <view class="right">
-        <view class="msg">
-          微微抬起眼睛，看镜头上方3cm的地方，显得眼睛又大又有神
-        </view>
-        <view class="msg">
-          按快门的时候，深呼吸，会使脖子肌肉与锁骨的线条变得好看
-        </view>
-        <view class="msg">
-          藏住双下巴，稍微仰头，收紧肩胛骨
-        </view>
+        <view class="msg">微微抬起眼睛，看镜头上方3cm的地方，显得眼睛又大又有神。</view>
+        <view class="msg">按快门的时候，深呼吸，会使脖子肌肉与锁骨的线条变得好看。</view>
+        <view class="msg">藏住双下巴，稍微仰头，收紧肩胛骨。</view>
       </view>
     </view>
-
   </view>
 
+  <!-- 底部按钮 -->
   <view class="bottom">
-    <view class="left-line"></view>
-    <text bindtap="navigateTo" data-url="/pages/sizeList/index">去试试</text>
-    <view class="right-line"></view>
-  </view>
-</view>
+  <view class="left-line"></view>
+  <text bindtap="navigateTo" data-url="/pages/sizeList/index" class="navigate-button">去试试</text>
+  <view class="right-line"></view>
+</view>
+
+</view>

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;
-}
+  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;
+}

ymhZjz/pages/sizeList/index.js

@@ -87,6 +87,7 @@ Page({
   },
 
   onLoad: function () {
+    console.log("页面被加载")
     this.getSizeList();
   },