فهرست منبع

✨ feat(home): 优化首页轮播图样式和配置
- 设置轮播图高度为400rpx并使用aspectFill模式
- 移除冗余的flex布局样式,简化结构

♻️ refactor(cart): 重构购物车广告图展示位置
- 将广告图从空购物车组件移至购物车主页面
- 调整广告图高度为200rpx,优化显示效果

🔥 feat(ui): 统一移除多处冗余广告组件
- 删除购物车空态、用户中心、订单确认页的广告位
- 清理相关CSS样式和数据加载逻辑

🔧 chore(log): 优化控制台日志输出
- 移除重复的日志前缀标识
- 注释掉不必要的调试日志

🗑️ feat(components): 精简用户中心卡片组件
- 移除卡片内广告图展示区域
- 清理相关props和样式代码

🚚 refactor(utils): 优化图片处理工具导入
- 仅导入必要的getSingleCloudImageTempUrl方法
- 删除未使用的getCloudImageTempUrl方法

🔨 fix(swiper): 修复轮播图组件冗余属性
- 移除mini/src/pages/index页面轮播图多余样式
- 统一设置图片高度为300rpx,优化显示效果

yourname 2 ماه پیش
والد
کامیت
98164bdfad

+ 1 - 9
mini/src/pages/index/index.css

@@ -30,19 +30,11 @@
 /* 轮播图样式 */
 .home-page-header .swiper-wrap {
   margin-top: 20rpx;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.home-page-header .tdesign-swiper {
-  width: 100%;
 }
 
 .home-page-header .tdesign-swiper__image {
   width: 100%;
-  display: block;
-  margin: 0 auto;
+  height: 300rpx;
   border-radius: 10rpx;
 }
 

+ 1 - 0
mini/src/pages/index/index.tsx

@@ -129,6 +129,7 @@ const HomePage: React.FC = () => {
                   autoplay={true}
                   interval={5000}
                   indicatorDots={true}
+                  height="300rpx"
                 />
               )}
             </View>

+ 0 - 4
tcb-shop-demo/pages/cart/components/cart-empty/index.js

@@ -13,10 +13,6 @@ Component({
       type: String,
       value: '去首页',
     },
-    advertisementImage: {
-      type: String,
-      value: '',
-    }
   },
   data: {},
   methods: {

+ 0 - 5
tcb-shop-demo/pages/cart/components/cart-empty/index.wxml

@@ -2,10 +2,5 @@
 	<t-image t-class="cart-img" src="{{imgUrl}}" />
 	<view class="tip">{{tip}}</view>
 	<view class="btn" bind:tap="handleClick">{{btnText}}</view>
-
-  <view class="cart-advertisement"  >
-    <t-image src="{{advertisementImage}}" t-class="ad-image" mode="aspectFill" />
-  </view>
-
 </view>
 

+ 0 - 21
tcb-shop-demo/pages/cart/components/cart-empty/index.wxss

@@ -31,24 +31,3 @@
   font-size: 28rpx;
   font-weight: bold;
 }
-
-.cart-advertisement {
-  position: fixed;
-  bottom: 14%;
-  right: 3%;
-  width: 50%;
-  padding: 20rpx;
-  box-sizing: border-box;
-  z-index: 10;
-  background-color: white;
-  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1);
-}
-
-.cart-advertisement .ad-image {
-  width: 100%;
-  height: 550rpx;
-  border-radius: 8rpx;
-  background-color: #f5f5f5;
-  object-fit: cover;
-  display: block;
-}

+ 1 - 1
tcb-shop-demo/pages/cart/index.js

@@ -198,7 +198,7 @@ Component({
     async loadAdvertisementImages() {
       try {
         const { images } = await getSwipe();
-        console.log("获取到的广告图数据0:", images);
+        console.log("获取到的广告图数据:", images);
         
         // 确保images是数组格式
         let handledImages = [];

+ 5 - 3
tcb-shop-demo/pages/cart/index.wxml

@@ -7,12 +7,14 @@
   <!-- 商品小计以及结算按钮 -->
   <cart-bar is-all-selected="{{allSelected}}" total-amount="{{totalAmount * 100}}" total-goods-num="{{selectedCartItemNum}}" fixed="{{true}}" bottomHeight="{{112}}" bindhandleSelectAll="onSelectAll" bindhandleToSettle="onToSettle" />
 
+ <!-- 广告图显示区域 -->
+ <view class="cart-advertisement"  >
+    <t-image src="https://via.placeholder.com/300x150" t-class="ad-image" mode="aspectFill" />
+  </view>
 
 </block>
 <!-- 购物车空态 -->
-<cart-empty wx:else bind:handleClick="onGotoHome" 
-advertisementImage="{{imgSrcs[0]}}"
-/>
+<cart-empty wx:else bind:handleClick="onGotoHome" />
 <t-toast id="t-toast" />
 <t-dialog id="t-dialog" />
 <view wx:if="{{loading}}">

+ 1 - 1
tcb-shop-demo/pages/cart/index.wxss

@@ -26,7 +26,7 @@
 
 .cart-advertisement .ad-image {
   width: 100%;
-  height: 900rpx;
+  height: 200rpx;
   border-radius: 8rpx;
   background-color: #f5f5f5;
   object-fit: cover;

+ 3 - 3
tcb-shop-demo/pages/home/home.js

@@ -16,9 +16,9 @@ Page({
     duration: '500',
     interval: 5000,
     navigation: { type: 'dots' },
-     //swiperImageProps: { mode: 'scaleToFill' },
-    swiperImageProps: { mode: 'heightFix' },
-    swiperHeight: 500 
+    // swiperImageProps: { mode: 'scaleToFill' },
+    swiperImageProps: { mode: 'aspectFill' },
+    swiperHeight: 400 // 设置轮播图高度为自适应
   },
 
   goodListPagination: {

+ 1 - 3
tcb-shop-demo/pages/home/home.wxml

@@ -9,9 +9,7 @@
     </t-search>
   </view>
   <view class="swiper-wrap">
-    <t-swiper wx:if="{{imgSrcs.length > 0}}" current="{{current}}" autoplay="{{autoplay}}" duration="{{duration}}" interval="{{interval}}" navigation="{{navigation}}" imageProps="{{swiperImageProps}}" height="{{swiperHeight}}" list="{{imgSrcs}}" >
-     
-    </t-swiper>
+    <t-swiper wx:if="{{imgSrcs.length > 0}}" current="{{current}}" autoplay="{{autoplay}}" duration="{{duration}}" interval="{{interval}}" navigation="{{navigation}}" imageProps="{{swiperImageProps}}" height="{{swiperHeight}}" list="{{imgSrcs}}" />
   </view>
 </view>
 <view class="home-page-container">

+ 2 - 23
tcb-shop-demo/pages/home/home.wxss

@@ -33,32 +33,12 @@ page {
 
 .home-page-header .swiper-wrap {
   margin-top: 20rpx;
-  display: flex;
-  justify-content: center;
-  align-items: center;
 }
 
-.home-page-header .t-swiper {
+.home-page-header .t-image__swiper {
   width: 100%;
-}
-
-.home-page-header .t-swiper-host {
+  height: 300rpx;
   border-radius: 10rpx;
-  display: flex;
-  justify-content: center;
-}
-
-.home-page-header .t-swiper__image {
-  width: 100%;
-  display: block;
-  margin: 0 auto;
-}
-
-.home-page-header .t-swiper__image-host {
-  width: 100%;
-  height: auto;
-  display: flex;
-  justify-content: center;
 }
 
 .home-page-container .t-tabs {
@@ -125,4 +105,3 @@ page {
   --td-tab-item-color: #666;
   --td-tab-track-color: red;
 }
-

+ 1 - 23
tcb-shop-demo/pages/order/order-confirm/index.js

@@ -1,17 +1,15 @@
 import Toast from 'tdesign-miniprogram/toast/index';
 import { createOrderItem } from '../../../services/order/orderItem';
 import { createOrder, ORDER_STATUS, updateOrderStatus } from '../../../services/order/order';
-import { getSwipe } from '../../../services/order/orderConfirm';
 import { getCartItem, deleteCartItem } from '../../../services/cart/cart';
 import { getSkuDetail, updateSku } from '../../../services/sku/sku';
 import { getAddressPromise } from '../../usercenter/address/list/util';
-import { getCloudImageTempUrl,getSingleCloudImageTempUrl } from '../../../utils/cloudImageHandler';
+import { getSingleCloudImageTempUrl } from '../../../utils/cloudImageHandler';
 import { cartShouldFresh } from '../../../utils/cartFresh';
 import { pay } from '../../../services/pay/pay';
 
 const stripeImg = `https://cdn-we-retail.ym.tencent.com/miniapp/order/stripe.png`;
 
-
 async function createOrderItemFromSku({ count, orderId, skuId }) {
   const latestSku = await getSkuDetail(skuId);
   const finalCount = latestSku.count - count;
@@ -147,24 +145,6 @@ Page({
     }
   },
 
-    // 加载广告图数据
-    async loadAdvertisementImages() {
-      try {
-        const { images } =  await getSwipe();
-        console.log("获取到的广告图数据2:", images);
-        
-        // 确保images是数组格式
-        let handledImages = [];
-        if (Array.isArray(images)) {
-          handledImages = await getCloudImageTempUrl(images);
-        }
-        console.log("handledImages2",handledImages[0]);
-        this.setData({ imgSrcs: handledImages });
-      } catch (error) {
-        console.error("加载广告图失败:", error);
-      }
-    },
-
   async onLoad(options) {
     this.type = options?.type;
     if (this.type === 'cart') {
@@ -178,7 +158,6 @@ Page({
     this.setData({
       loading: false,
     });
-    this.loadAdvertisementImages();
   },
 
   init() {
@@ -187,7 +166,6 @@ Page({
     });
     const { goodsRequestList } = this;
     this.handleOptionsParams({ goodsRequestList });
-    
   },
 
   toast(message) {

+ 0 - 5
tcb-shop-demo/pages/order/order-confirm/index.wxml

@@ -26,11 +26,6 @@
       <price class="total-price" price="{{totalSalePrice * 100}}" fill="{{false}}" decimalSmaller />
     </view>
   </view>
-
-  <view class="cart-advertisement">
-      <t-image src="{{imgSrcs[0]}}" t-class="ad-image" mode="aspectFill" />
-    </view>
-
   <view class="wx-pay-cover">
     <view class="wx-pay">
       <price decimalSmaller fill class="price" price="{{totalSalePrice * 100}}" />

+ 0 - 23
tcb-shop-demo/pages/order/order-confirm/index.wxss

@@ -219,26 +219,3 @@
   font-weight: bold;
   padding-left: 8rpx;
 }
-
-.cart-advertisement {
-  position: fixed;
-  bottom: 14%;
-  right: 3%;
-  width: 50%;
-  padding: 20rpx;
-  box-sizing: border-box;
-  z-index: 10;
-  background-color: white;
-  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1);
-}
-
-.cart-advertisement .ad-image {
-  width: 100%;
-  height: 550rpx;
-  border-radius: 8rpx;
-  background-color: #f5f5f5;
-  object-fit: cover;
-  display: block;
-}
-
-

+ 0 - 4
tcb-shop-demo/pages/usercenter/components/user-center-card/index.js

@@ -21,10 +21,6 @@ Component({
       type: Boolean,
       value: false,
     },
-    advertisementImage: {
-      type: String,
-      value: '',
-    },
   },
   data: {
     defaultAvatarUrl:

+ 1 - 2
tcb-shop-demo/pages/usercenter/components/user-center-card/index.json

@@ -2,7 +2,6 @@
   "component": true,
   "usingComponents": {
     "t-icon": "tdesign-miniprogram/icon/icon",
-    "t-avatar": "tdesign-miniprogram/avatar/avatar",
-    "t-image": "/components/webp-image/index"
+    "t-avatar": "tdesign-miniprogram/avatar/avatar"
   }
 }

+ 0 - 17
tcb-shop-demo/pages/usercenter/components/user-center-card/index.wxml

@@ -5,11 +5,6 @@
       <t-avatar image="{{userInfo.avatarUrl || defaultAvatarUrl}}" class="user-center-card__header__avatar" />
       <view class="user-center-card__header__name">{{'请登录'}}</view>
     </view>
-
-    <view class="cart-advertisement">
-      <t-image src="{{advertisementImage}}" t-class="ad-image" mode="aspectFill" />
-    </view>
-
   </block>
   <!-- 已登录但未授权用户信息情况 -->
   <block wx:if="{{currAuthStep === AuthStepType.TWO}}">
@@ -23,11 +18,6 @@
       <!-- 不需要授权用户信息,仍然触发gotoUserEditPage事件 -->
       <view class="user-center-card__header__transparent" bind:tap="gotoUserEditPage" wx:else></view>
     </view>
-
-    <view class="cart-advertisement">
-      <t-image src="{{advertisementImage}}" t-class="ad-image" mode="aspectFill" />
-    </view>
-
   </block>
   <!-- 已登录且已经授权用户信息的情况 -->
   <block wx:if="{{currAuthStep === AuthStepType.THREE}}">
@@ -40,12 +30,5 @@
       />
       <view class="user-center-card__header__name">{{userInfo.nickName || '微信用户'}}</view>
     </view>
-
-    <view class="cart-advertisement">
-      <t-image src="{{advertisementImage}}" t-class="ad-image" mode="aspectFill" />
-    </view>
-
   </block>
-
-
 </view>

+ 0 - 22
tcb-shop-demo/pages/usercenter/components/user-center-card/index.wxss

@@ -46,25 +46,3 @@
 .user-center-card__icon {
   line-height: 96rpx;
 }
-
-
-.cart-advertisement {
-  position: fixed;
-  bottom: 12%;
-  right: 3%;
-  width: 50%;
-  padding: 20rpx;
-  box-sizing: border-box;
-  z-index: 10;
-  background-color: white;
-  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1);
-}
-
-.cart-advertisement .ad-image {
-  width: 100%;
-  height: 550rpx;
-  border-radius: 8rpx;
-  background-color: #f5f5f5;
-  object-fit: cover;
-  display: block;
-}

+ 2 - 23
tcb-shop-demo/pages/usercenter/index.js

@@ -1,8 +1,7 @@
-import { fetchUserCenter,getSwipe } from '../../services/usercenter/fetchUsercenter';
+import { fetchUserCenter } from '../../services/usercenter/fetchUsercenter';
 import { getToPayOrderCount, getToSendOrderCount, getToReceiveOrderCount } from '../../services/order/order';
 import { ORDER_STATUS } from '../../services/order/order';
 import Toast from 'tdesign-miniprogram/toast/index';
-import { getCloudImageTempUrl,getSingleCloudImageTempUrl } from '../../utils/cloudImageHandler';
 
 const menuData = [
   [
@@ -95,27 +94,7 @@ Page({
   init() {
     this.fetUseriInfoHandle();
     this.initOrderCount();
-    this.loadAdvertisementImages();
-  },
-
-
-    // 加载广告图数据
-     async loadAdvertisementImages() {
-      try {
-        const { images } =  await getSwipe();
-        console.log("获取到的广告图数据1:", images);
-        
-        // 确保images是数组格式
-        let handledImages = [];
-        if (Array.isArray(images)) {
-          handledImages = await getCloudImageTempUrl(images);
-        }
-        console.log("handledImages1",handledImages[0]);
-        this.setData({ imgSrcs: handledImages });
-      } catch (error) {
-        console.error("加载广告图失败:", error);
-      }
-    },
+  },
 
   async initOrderCount() {
     const [pay, send, receive] = await Promise.all([

+ 0 - 1
tcb-shop-demo/pages/usercenter/index.wxml

@@ -7,7 +7,6 @@
   currAuthStep="{{currAuthStep}}" 
   bind:gotoUserEditPage="gotoUserEditPage"
   style="background-image: url('https://we-retail-static-1300977798.cos.ap-guangzhou.myqcloud.com/retail-mp/common/user-center-bg.png'); background-size: cover;"
-  advertisementImage="{{imgSrcs[0]}}"
 />
 <view class="content-wrapper">
   <view class="order-group-wrapper">

+ 1 - 1
tcb-shop-demo/services/cart/cart.js

@@ -37,7 +37,7 @@ export async function getSwipe() {
   }
   // 实际环境中获取所有记录,然后提取所有图片
   const records = (await model()[HOME_SWIPER_MODEL_KEY].list({ select: { images: true } })).data.records;
-  //console.log("records:",records);
+ // console.log("records:",records);
  // console.log("records[1].images:",records[1].images);
   // 合并所有记录中的images数组
   const allImages = records[1].images; //records.flatMap(record => record.images || []);

+ 1 - 1
tcb-shop-demo/services/cate/cate.js

@@ -82,7 +82,7 @@ export async function getSwipe() {
   }
   // 实际环境中获取所有记录,然后提取所有图片
   const records = (await model()[HOME_SWIPER_MODEL_KEY].list({ select: { images: true } })).data.records;
-  console.log("records:",records);
+ // console.log("records:",records);
  // console.log("records[1].images:",records[1].images);
   // 合并所有记录中的images数组
   const allImages = records[1].images; //records.flatMap(record => record.images || []);

+ 1 - 27
tcb-shop-demo/services/order/orderConfirm.js

@@ -1,9 +1,5 @@
-import { config,cloudbaseTemplateConfig } from '../../config/index';
+import { config } from '../../config/index';
 import { mockIp, mockReqId } from '../../utils/mock';
-import { DATA_MODEL_KEY } from '../../config/model';
-import { model, getAll } from '../_utils/model';
-
-const HOME_SWIPER_MODEL_KEY = DATA_MODEL_KEY.HOME_SWIPER;
 
 /** 获取结算mock数据 */
 function mockFetchSettleDetail(params) {
@@ -71,25 +67,3 @@ export function dispatchSupplementInvoice() {
     resolve('real api');
   });
 }
-
-export async function getSwipe() {
-  // console.log("cloudbaseTemplateConfig.useMock",cloudbaseTemplateConfig.useMock);
-  if (cloudbaseTemplateConfig.useMock) {
-    // 返回包含多张模拟图片的数据
-    return {
-      images: [
-        'https://qcloudimg.tencent-cloud.cn/raw/1e793c70bb4f521fe277b2c207ab81b4.png',
-        'https://qcloudimg.tencent-cloud.cn/raw/063123361b3a397f4ba6894591c3a006.png',
-        'https://qcloudimg.tencent-cloud.cn/raw/62eb1d8d8ea3b05302c199636f787438.png'
-      ]
-    };
-  }
-  // 实际环境中获取所有记录,然后提取所有图片
-  const records = (await model()[HOME_SWIPER_MODEL_KEY].list({ select: { images: true } })).data.records;
- // console.log("records:",records);
- // console.log("records[1].images:",records[1].images);
-  // 合并所有记录中的images数组
-  const allImages = records[1].images; //records.flatMap(record => record.images || []);
-  return { images: allImages.length > 0 ? allImages : [] };
-}
-

+ 1 - 27
tcb-shop-demo/services/usercenter/fetchUsercenter.js

@@ -1,8 +1,4 @@
-import { config, cloudbaseTemplateConfig } from '../../config/index';
-import { DATA_MODEL_KEY } from '../../config/model';
-import { model, getAll } from '../_utils/model';
-
-const HOME_SWIPER_MODEL_KEY = DATA_MODEL_KEY.HOME_SWIPER;
+import { config } from '../../config/index';
 
 /** 获取个人中心信息 */
 function mockFetchUserCenter() {
@@ -20,25 +16,3 @@ export function fetchUserCenter() {
     resolve('real api');
   });
 }
-
-
-export async function getSwipe() {
-  // console.log("cloudbaseTemplateConfig.useMock",cloudbaseTemplateConfig.useMock);
-  if (cloudbaseTemplateConfig.useMock) {
-    // 返回包含多张模拟图片的数据
-    return {
-      images: [
-        'https://qcloudimg.tencent-cloud.cn/raw/1e793c70bb4f521fe277b2c207ab81b4.png',
-        'https://qcloudimg.tencent-cloud.cn/raw/063123361b3a397f4ba6894591c3a006.png',
-        'https://qcloudimg.tencent-cloud.cn/raw/62eb1d8d8ea3b05302c199636f787438.png'
-      ]
-    };
-  }
-  // 实际环境中获取所有记录,然后提取所有图片
-  const records = (await model()[HOME_SWIPER_MODEL_KEY].list({ select: { images: true } })).data.records;
- // console.log("records:",records);
- // console.log("records[1].images:",records[1].images);
-  // 合并所有记录中的images数组
-  const allImages = records[1].images; //records.flatMap(record => record.images || []);
-  return { images: allImages.length > 0 ? allImages : [] };
-}