Kaynağa Gözat

把vantui去除掉了,减少包体积

张田田 1 hafta önce
ebeveyn
işleme
ff9b6806bf

+ 1 - 2
miniprogram/module/article/pages/add-address/add-address.json

@@ -13,7 +13,6 @@
     "t-cell-group": "tdesign-miniprogram/cell-group/cell-group",
     "t-textarea": "tdesign-miniprogram/textarea/textarea",
     "t-picker-item": "tdesign-miniprogram/picker-item/picker-item",
-    "van-area": "@vant/weapp/area/index",
-    "van-popup": "@vant/weapp/popup/index"
+    "t-cascader": "tdesign-miniprogram/cascader/cascader"
   }
 }

+ 44 - 10
miniprogram/module/article/pages/add-address/add-address.ts

@@ -11,6 +11,37 @@ import {
   deleteAddressMethod,
   updateAddressMethod,
 } from "../../request";
+
+// 将 @vant/area-data 扁平格式转为 TDesign Cascader 树形格式
+function convertAreaDataToTree(areaList: { province_list: Record<string, string>; city_list: Record<string, string>; county_list: Record<string, string> }) {
+  const { province_list, city_list, county_list } = areaList;
+
+  const cityMap: Record<string, any[]> = {};
+  for (const cityCode in city_list) {
+    const prefix = cityCode.substring(0, 2);
+    if (!cityMap[prefix]) cityMap[prefix] = [];
+    cityMap[prefix].push({ label: city_list[cityCode], value: cityCode, children: [] });
+  }
+
+  const countyMap: Record<string, any[]> = {};
+  for (const countyCode in county_list) {
+    const prefix = countyCode.substring(0, 4);
+    if (!countyMap[prefix]) countyMap[prefix] = [];
+    countyMap[prefix].push({ label: county_list[countyCode], value: countyCode });
+  }
+
+  const result: any[] = [];
+  for (const provinceCode in province_list) {
+    const children = (cityMap[provinceCode.substring(0, 2)] || []).map((city: any) => ({
+      ...city,
+      children: countyMap[city.value.substring(0, 4)] || [],
+    }));
+    if (children.length > 0) {
+      result.push({ label: province_list[provinceCode], value: provinceCode, children });
+    }
+  }
+  return result;
+}
 // module/diet/pages/delivery-address/delivery-address.ts
 // import parseAddress from '../../utils/smart-parse-address';
 Page({
@@ -20,6 +51,7 @@ Page({
   data: {
     type: "",
     areaList,
+    areaTreeData: convertAreaDataToTree(areaList),
     id: "",
     formData: {
       id: "",
@@ -52,21 +84,23 @@ Page({
     this.setData({ detail: "" });
   },
   onRegionConfirm(e: any) {
+    const selectedOptions = e.detail.selectedOptions;
+    if (!selectedOptions || selectedOptions.length < 3) return;
     this.setData({
       region:
-        e.detail.values[0].name +
+        selectedOptions[0].label +
         ", " +
-        e.detail.values[1].name +
+        selectedOptions[1].label +
         "," +
-        e.detail.values[2].name,
-      regionValue: e.detail.values,
+        selectedOptions[2].label,
+      regionValue: e.detail.value,
       regionPickerVisible: false,
-      "formData.provinceCode": e.detail.values[0].code,
-      "formData.provinceName": e.detail.values[0].name,
-      "formData.cityCode": e.detail.values[1].code,
-      "formData.cityName": e.detail.values[1].name,
-      "formData.areaCode": e.detail.values[2].code,
-      "formData.areaName": e.detail.values[2].name,
+      "formData.provinceCode": selectedOptions[0].value,
+      "formData.provinceName": selectedOptions[0].label,
+      "formData.cityCode": selectedOptions[1].value,
+      "formData.cityName": selectedOptions[1].label,
+      "formData.areaCode": selectedOptions[2].value,
+      "formData.areaName": selectedOptions[2].label,
     });
   },
   onRegionCancel(e: any) {

+ 1 - 7
miniprogram/module/article/pages/add-address/add-address.wxml

@@ -111,13 +111,7 @@
   </view>
 </scroll-view>
 
-<van-popup show="{{ regionPickerVisible }}" position="bottom" bind:close="onRegionCancel">
-  <van-area
-    area-list="{{ areaList }}"
-    bind:confirm="onRegionConfirm"
-    bind:cancel="onRegionCancel"
-  />
-</van-popup>
+<t-cascader visible="{{ regionPickerVisible }}" title="选择地区" options="{{ areaTreeData }}" value="{{ regionValue }}" bind:change="onRegionConfirm" bind:close="onRegionCancel" />
 
 
 <!-- 底部按钮 -->

+ 1 - 3
miniprogram/module/order/pages/appointment-success/appointment-success.json

@@ -3,8 +3,6 @@
   "component": true,
   "usingComponents": {
     "t-navbar": "tdesign-miniprogram/navbar/navbar",
-    "van-calendar": "@vant/weapp/calendar/index",
-    "van-cell": "@vant/weapp/cell/index",
-    "van-icon": "@vant/weapp/icon/index"
+    "t-icon": "tdesign-miniprogram/icon/icon"
   }
 }

+ 2 - 3
miniprogram/module/order/pages/appointment/appointment.json

@@ -4,7 +4,6 @@
   "usingComponents": {
     "t-navbar": "tdesign-miniprogram/navbar/navbar",
     "t-icon": "tdesign-miniprogram/icon/icon",
-    "t-calendar": "tdesign-miniprogram/calendar/calendar",
-    "van-calendar": "@vant/weapp/calendar/index"
+    "t-calendar": "tdesign-miniprogram/calendar/calendar"
   }
-}
+}

+ 49 - 40
miniprogram/module/order/pages/appointment/appointment.scss

@@ -45,7 +45,6 @@
 .service-info {
   flex: 1;
   display: flex;
-  // flex-direction: column;
   align-items: center;
   justify-content: space-between;
   gap: 12rpx;
@@ -59,14 +58,13 @@
 
 .service-duration {
   font-size: 28rpx;
-  color: #666;
+  color: #999;
 }
 
 // 时间选择卡片
 .time-selection-card {
   background: #fff;
   margin: 0 20rpx 20rpx 20rpx;
-  // padding: 32rpx;
   padding: 20rpx;
   border-radius: 16rpx;
   box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
@@ -85,7 +83,7 @@
 .time-selection-title {
   font-size: 30rpx;
   font-weight: 500;
-  color: black;
+  color: #333;
   text-align: center;
   width: 100%;
 }
@@ -103,25 +101,23 @@
 .date-selector {
   display: flex;
   gap: 12rpx;
-  margin-bottom: 32rpx;
+  margin: 24rpx 0 32rpx 0;
   overflow-x: auto;
   padding-bottom: 8rpx;
   align-items: center;
-  justify-content: space-between;
 }
 
 .date-item {
-  flex-shrink: 0;
+  flex: 1;
+  min-width: 0;
   display: flex;
   flex-direction: column;
   align-items: center;
   padding: 16rpx 18rpx;
   border-radius: 12rpx;
-  // background: #f7f8fa;
   background: white;
   border: 2rpx solid transparent;
   transition: all 0.3s ease;
-  // min-width: 100rpx;
 
   &:active {
     transform: scale(0.95);
@@ -129,13 +125,14 @@
 }
 
 .date-item--selected {
-  // 选中状态样式在子元素中定义
-  position: relative;
+  background: #f0faf0;
+  border-color: #4caf50;
+  border-radius: 12rpx;
 }
 
 .date-label {
   font-size: 24rpx;
-  color: #666;
+  color: #999;
   margin-bottom: 6rpx;
 }
 
@@ -155,44 +152,34 @@
   font-weight: 600;
 }
 
-// 时间选择网格 - 5行5列表格
+// 时间选择网格 - 5列
+// 用背景色+gap实现网格线,避免border导致rpx舍入溢出
 .time-grid {
   display: flex;
   flex-wrap: wrap;
-  border: 1rpx solid #e0e0e0;
-  border-radius: 0;
-  background: #fff;
+  background: #e8e8e8;
+  gap: 1rpx;
   width: 100%;
   box-sizing: border-box;
+  border: 1rpx solid #e8e8e8;
+  border-bottom: none;
 }
 
 .time-slot {
-  width: 20%;
+  width: calc((100% - 4rpx) / 5);
   text-align: center;
-  font-size: 28rpx;
-  color: #000;
+  font-size: 26rpx;
+  color: #333;
   background: #fff;
-  border-right: 1rpx solid #e0e0e0;
-  border-bottom: 1rpx solid #e0e0e0;
+  border-bottom: 1rpx solid #e8e8e8;
   border-radius: 0;
   transition: all 0.3s ease;
   display: flex;
   align-items: center;
   justify-content: center;
-  min-height: 88rpx;
+  min-height: 96rpx;
   box-sizing: border-box;
   padding: 0;
-  flex-shrink: 0;
-
-  // 每行最后一个去掉右边框
-  &:nth-child(5n) {
-    border-right: none;
-  }
-
-  // 最后一行去掉下边框
-  &:nth-child(n+21) {
-    border-bottom: none;
-  }
 
   &:active:not(.time-slot--disabled):not(.time-slot--selected) {
     background: #fafafa;
@@ -201,7 +188,6 @@
 
 .time-slot--selected {
   background: #1d6ff6 !important;
-  border-color: #1d6ff6 !important;
   color: #fff !important;
   font-weight: 500;
   z-index: 1;
@@ -210,7 +196,6 @@
 
 .time-slot--disabled {
   background: #fff;
-  border-color: #e0e0e0;
   color: #ccc;
   opacity: 0.6;
 }
@@ -228,7 +213,7 @@
   right: 0;
   width: 100%;
   background: #fff;
-  padding: 20rpx;
+  padding: 20rpx 20rpx calc(20rpx + env(safe-area-inset-bottom));
   box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.08);
   z-index: 100;
   box-sizing: border-box;
@@ -239,17 +224,41 @@
   height: 88rpx;
   line-height: 88rpx;
   text-align: center;
-  background: linear-gradient(135deg, #1d6ff6 0%, #4a90ff 100%);
+  background: #1d6ff6;
   color: #fff;
   font-size: 32rpx;
   font-weight: 600;
   border-radius: 44rpx;
-  box-shadow: 0 4rpx 12rpx rgba(29, 111, 246, 0.3);
   transition: all 0.3s ease;
 
   &:active {
     opacity: 0.9;
     transform: scale(0.98);
-    box-shadow: 0 2rpx 8rpx rgba(29, 111, 246, 0.4);
   }
-}
+}
+
+// ========================================
+// TDesign Calendar Skyline 兼容性覆盖
+// Skyline 不支持 CSS Grid,用 flexbox 替代
+// 利用组件 styleIsolation: apply-shared 注入样式
+// ========================================
+.t-calendar__days {
+  display: flex !important;
+  flex-wrap: wrap !important;
+}
+
+.t-calendar__days-item {
+  width: 14.2857% !important;
+  box-sizing: border-box !important;
+  text-align: center !important;
+}
+
+.t-calendar__dates {
+  display: flex !important;
+  flex-wrap: wrap !important;
+}
+
+.t-calendar__dates-item {
+  width: 14.2857% !important;
+  box-sizing: border-box !important;
+}

+ 37 - 46
miniprogram/module/order/pages/appointment/appointment.ts

@@ -329,55 +329,46 @@ Page({
     date = new Date(date);
     return `${date.getMonth() + 1}/${date.getDate()}`;
   },
-  // 确认选择日期
-  onConfirm(event: any) {
-    const selectedDate = event.detail;
-
-    if (selectedDate) {
-      // 解析日期
-      const dateObj = new Date(selectedDate);
-      dateObj.setHours(0, 0, 0, 0);
-
-      // 格式化日期字符串用于比较
-      const dateValue = `${dateObj.getFullYear()}-${String(dateObj.getMonth() + 1).padStart(2, '0')}-${String(dateObj.getDate()).padStart(2, '0')}`;
-
-      // 检查选择的日期是否在当前展示的5天中
-      const existingDateIndex = this.data.dateList.findIndex(item => item.date === dateValue);
-
-      if (existingDateIndex !== -1) {
-        // 如果选择的日期在已展示的5天中,只更新选中状态
-        const dateList = this.data.dateList.map((item, index) => ({
-          ...item,
-          isSelected: index === existingDateIndex,
-        }));
-
-        // 重新初始化时间列表,根据选中的日期禁用已过去的时间
-        this.initTimeSlots(dateValue);
-
-        // 清空已选时间
-        this.setData({
-          show: false,
-          dateList,
-          selectedDate: dateValue,
-          date: this.formatDate(selectedDate),
-          selectedTime: "",
-        });
-      } else {
-        // 如果选择的日期不在已展示的5天中,重新生成日期列表
-        this.initDateList(dateObj);
+  // 日历弹窗选择日期(同时监听 change 和 select,双保险)
+  _calendarLock: false,
+  onCalendarSelect(event: any) {
+    // 防止 change 和 select 同时触发导致重复执行
+    if ((this as any)._calendarLock) return;
+    (this as any)._calendarLock = true;
+    setTimeout(() => { (this as any)._calendarLock = false; }, 300);
+
+    const timestamp = event.detail.value;
+    if (!timestamp) return;
+
+    const dateObj = new Date(timestamp);
+    dateObj.setHours(0, 0, 0, 0);
+    const dateValue = `${dateObj.getFullYear()}-${String(dateObj.getMonth() + 1).padStart(2, '0')}-${String(dateObj.getDate()).padStart(2, '0')}`;
+
+    // 关闭弹窗
+    this.setData({ show: false });
 
-        // 重新初始化时间列表,根据选中的日期禁用已过去的时间
-        this.initTimeSlots(dateValue);
+    // 检查选择的日期是否在当前展示的5天中
+    const existingDateIndex = this.data.dateList.findIndex(item => item.date === dateValue);
 
-        // 清空已选时间
-        this.setData({
-          show: false,
-          date: this.formatDate(selectedDate),
-          selectedTime: "",
-        });
-      }
+    if (existingDateIndex !== -1) {
+      // 日期在已展示的5天中,更新选中状态
+      const dateList = this.data.dateList.map((item, index) => ({
+        ...item,
+        isSelected: index === existingDateIndex,
+      }));
+      this.initTimeSlots(dateValue);
+      this.setData({
+        dateList,
+        selectedDate: dateValue,
+        selectedTime: "",
+      });
     } else {
-      this.setData({ show: false });
+      // 日期不在已展示的5天中,重新生成日期列表
+      this.initDateList(new Date(dateObj.getTime())); // 传副本,避免 initDateList 修改原对象
+      this.setData({
+        selectedDate: dateValue,
+        selectedTime: "",
+      });
     }
   },
 });

+ 2 - 2
miniprogram/module/order/pages/appointment/appointment.wxml

@@ -44,10 +44,10 @@
 </scroll-view>
 
 <!-- 提交按钮 -->
-<view class="submit-footer" style="padding-bottom: {{container.safeBottomOffset}}px;">
+<view class="submit-footer">
   <view class="submit-btn" bindtap="onSubmit">
     提交预约
   </view>
 </view>
 <!-- 日期选择弹窗 -->
-<van-calendar show="{{ show }}" show-title title="日期选择" bind:close="onClose" bind:confirm="onConfirm" color="#1d6ff6" />
+<t-calendar visible="{{ show }}" title="日期选择" bind:close="onClose" bind:confirm="onCalendarSelect" />

+ 1 - 2
miniprogram/module/order/pages/goods-evaluate/goods-evaluate.json

@@ -3,7 +3,6 @@
   "usingComponents": {
     "t-navbar": "tdesign-miniprogram/navbar/navbar",
     "t-icon": "tdesign-miniprogram/icon/icon",
-    "t-rate": "tdesign-miniprogram/rate/rate",
-    "van-rate": "@vant/weapp/rate/index"
+    "t-rate": "tdesign-miniprogram/rate/rate"
   }
 }

+ 2 - 3
package.json

@@ -8,13 +8,12 @@
   "license": "",
   "dependencies": {
     "@vant/area-data": "^2.0.0",
-    "@vant/weapp": "^1.11.7",
     "address-parse": "^1.2.19",
-    "mp-html": "^2.5.2",
     "tdesign-miniprogram": "^1.9.7"
   },
   "devDependencies": {
     "babel-plugin-import": "^1.13.8",
-    "miniprogram-api-typings": "^2.12.0"
+    "miniprogram-api-typings": "^2.12.0",
+    "typescript": "^6.0.3"
   }
 }

+ 1 - 2
tsconfig.json

@@ -26,8 +26,7 @@
   "paths": {
     "tdesign-miniprogram/*": [
       "./miniprogram/miniprogram_npm/tdesign-miniprogram/*"
-    ],
-    "@vant/weapp/*": ["path/to/node_modules/@vant/weapp/dist/*"]
+    ]
   },
   "include": [
     "./**/*.ts",