feat:优化

This commit is contained in:
2026-07-23 18:22:22 +08:00
parent df7cdce7cb
commit 6042342641
7 changed files with 85 additions and 66 deletions
+1 -1
View File
@@ -180,7 +180,7 @@ export default {
background-color: #ffffff; background-color: #ffffff;
border-radius: 24rpx; border-radius: 24rpx;
margin-bottom: 20rpx; margin-bottom: 20rpx;
width: 100%; width: 700rpx;
} }
.seckill_card_left { .seckill_card_left {
+15 -18
View File
@@ -261,7 +261,14 @@ export default {
newsShow: false, // 是否显示公告弹窗 newsShow: false, // 是否显示公告弹窗
seckillGoodsList: [], // 秒杀商品列表 seckillGoodsList: [], // 秒杀商品列表
superGoodsList: [], // 超级补贴商品列表 superGoodsList: [], // 超级补贴商品列表
homeActivedList: [ homeActivedList: [{
id: 1,
title: "超级补贴",
title_icon: "https://static.tbmall.xin/static/new-home/home_9.png",
path: "super-subsidy",
rightText: "官方补贴 .100%正品",
activedType: "super",
},
{ {
id: 2, id: 2,
title: "活动预告", title: "活动预告",
@@ -270,13 +277,6 @@ export default {
path: "limited-time", path: "limited-time",
rightText: "专属补贴 . 低价秒杀", rightText: "专属补贴 . 低价秒杀",
activedType: "seckill", activedType: "seckill",
}, {
id: 1,
title: "超级补贴",
title_icon: "https://static.tbmall.xin/static/new-home/home_9.png",
path: "super-subsidy",
rightText: "官方补贴 .100%正品",
activedType: "super",
} }
], // 首页活动列表 ], // 首页活动列表
activedTabId: "seckill", // 当前选中的活动类型 activedTabId: "seckill", // 当前选中的活动类型
@@ -341,13 +341,11 @@ export default {
const menuButtonLeft = menuButton.left; const menuButtonLeft = menuButton.left;
const windowWidth = systemInfo.windowWidth; const windowWidth = systemInfo.windowWidth;
// Calculate padding-right to avoid the capsule button (add extra margin of 10px) // Calculate top offset below capsule button specifically for WeChat Mini Program
const paddingRight = windowWidth - menuButtonLeft + 10; const headerTop = menuButtonTop + menuButtonHeight + 8;
// Dynamic styles for MP
this.mpHeaderStyle = { this.mpHeaderStyle = {
paddingTop: `${menuButtonTop}px`, paddingTop: `${headerTop}px`,
paddingRight: `${paddingRight}px`, paddingRight: '15px',
paddingBottom: '10px', paddingBottom: '10px',
paddingLeft: '15px', paddingLeft: '15px',
height: `${menuButtonHeight}px`, height: `${menuButtonHeight}px`,
@@ -363,7 +361,7 @@ export default {
alignItems: 'center' alignItems: 'center'
}; };
const warpPaddingTop = menuButtonTop + menuButtonHeight + 15; const warpPaddingTop = headerTop + menuButtonHeight;
this.mpHeaderWarpStyle = { this.mpHeaderWarpStyle = {
paddingTop: `${warpPaddingTop}px` paddingTop: `${warpPaddingTop}px`
}; };
@@ -767,9 +765,8 @@ export default {
background: linear-gradient(270deg, #af39c4 0%, #7732ff 100%); background: linear-gradient(270deg, #af39c4 0%, #7732ff 100%);
padding: calc(var(--status-bar-height) + 20rpx) 30rpx 20rpx; padding: calc(var(--status-bar-height) + 20rpx) 30rpx 20rpx;
box-sizing: border-box; box-sizing: border-box;
/* 解决部分机型下 fixed 定位底部出现 1px 渲染缝隙(白线)的问题 */ /* 消除 fixed 定位与下方重叠层之间的 1px GPU 子像素渲染缝隙(白线) */
border-bottom: 1px solid transparent; box-shadow: 0 2rpx 0 #9336df;
border-image: linear-gradient(270deg, #af39c4 0%, #7732ff 100%) 1;
} }
.header_right_warp { .header_right_warp {
+7 -8
View File
@@ -454,18 +454,17 @@ export default {
const menuButton = uni.getMenuButtonBoundingClientRect(); const menuButton = uni.getMenuButtonBoundingClientRect();
const sysInfo = uni.getSystemInfoSync(); const sysInfo = uni.getSystemInfoSync();
if (menuButton && menuButton.top && menuButton.top > 0) { if (menuButton && menuButton.top && menuButton.top > 0) {
paddingTop = (menuButton.top + 2) + 'px'; const menuButtonHeight = menuButton.height || 32;
if (sysInfo && sysInfo.windowWidth && menuButton.left) { paddingTop = (menuButton.top + menuButtonHeight + 12) + 'px';
paddingRight = (sysInfo.windowWidth - menuButton.left + 10) + 'px'; paddingRight = '30rpx';
}
} else { } else {
const statusBarHeight = (sysInfo && sysInfo.statusBarHeight) || 20; const statusBarHeight = (sysInfo && sysInfo.statusBarHeight) || 20;
paddingTop = (statusBarHeight + 10) + 'px'; paddingTop = (statusBarHeight + 54) + 'px';
paddingRight = '96px'; paddingRight = '30rpx';
} }
} catch (e) { } catch (e) {
paddingTop = '90rpx'; paddingTop = '180rpx';
paddingRight = '96px'; paddingRight = '30rpx';
} }
// #endif // #endif
@@ -3,8 +3,10 @@
<!-- <image v-if="tmpImg" :src="tmpImg" style="width:620rpx;height:960rpx"></image> --> <!-- <image v-if="tmpImg" :src="tmpImg" style="width:620rpx;height:960rpx"></image> -->
<!-- 头部产品描述图 --> <!-- 头部产品描述图 -->
<view class="product_info_header_warp" :style="{ height: swiperHeight + 'rpx' }"> <view class="product_info_header_warp" :style="{ height: swiperHeight + 'rpx' }">
<up-swiper :list="swiperList" class="product_info_header_swiper" @click="onSwiper"
@change="(e) => (currentNum = e.current)" :height="swiperHeight + 'rpx'" img-mode="widthFix"> <up-swiper v-if="swiperList && swiperList.length > 0" :key="swiperHeight + '_' + swiperList.length"
:list="swiperList" class="product_info_header_swiper" @click="onSwiper"
@change="(e) => (currentNum = e.current)" :height="swiperHeight + 'rpx'">
<template #indicator> <template #indicator>
<view class="indicator-num"> <view class="indicator-num">
<text class="indicator-num__text">{{ currentNum + 1 }}/{{ swiperList.length }}</text> <text class="indicator-num__text">{{ currentNum + 1 }}/{{ swiperList.length }}</text>
@@ -12,6 +14,8 @@
</template> </template>
</up-swiper> </up-swiper>
<view class="img_comm left_warp"> <view class="img_comm left_warp">
<up-image src="/static/common/left_b_st.png" width="30" height="30" bgColor="#f1f6ff00" v-if="!isShareUrl" <up-image src="/static/common/left_b_st.png" width="30" height="30" bgColor="#f1f6ff00" v-if="!isShareUrl"
@click="jumpLeft"></up-image> @click="jumpLeft"></up-image>
@@ -534,10 +538,13 @@ export default {
const res = await uni.getImageInfo({ const res = await uni.getImageInfo({
src: imgUrl src: imgUrl
}); });
if (res && res.width && res.height) {
const ratio = res.height / res.width; const ratio = res.height / res.width;
this.swiperHeight = Math.round(750 * ratio); this.swiperHeight = Math.round(750 * ratio);
}
} catch (e) { } catch (e) {
console.error('calcSwiperHeight error:', e); console.error('calcSwiperHeight error:', e);
this.swiperHeight = 750;
} }
}, },
@@ -975,9 +982,10 @@ export default {
this.isShowCart = this.activedType === 'seckill' || data.type == 3 ? 1 : 0; this.isShowCart = this.activedType === 'seckill' || data.type == 3 ? 1 : 0;
// 商品图 // 商品图
if (data.goodsGraph) { if (data.goodsGraph) {
this.swiperList = data.goodsGraph.split(","); this.swiperList = data.goodsGraph.split(",").map(item => item.trim()).filter(Boolean);
this.calcSwiperHeight(); this.calcSwiperHeight();
} }
console.log('----', data.goodsGraph, this.swiperList)
data.addressObj = {}; // 收件人地址 data.addressObj = {}; // 收件人地址
data.quantity = 1; // 数量 data.quantity = 1; // 数量
data.inventory = 0; // 库存 data.inventory = 0; // 库存
@@ -1382,6 +1390,12 @@ export default {
border-radius: 16rpx !important; border-radius: 16rpx !important;
} }
::v-deep(.u-swiper__wrapper) {
.u-swiper__wrapper__item__wrapper {
height: 100%;
}
}
.product_info_warp { .product_info_warp {
min-height: 100vh; min-height: 100vh;
background-color: $app-bj; background-color: $app-bj;
+10 -9
View File
@@ -12,12 +12,12 @@
</template> </template>
</Header> </Header>
<view class="swiper-view"> <scroll-view scroll-x class="swiper-view">
<view :class="['swiper-item', { 'active': currentItem === item.key }]" v-for="(item, index) in swiperList" <view :class="['swiper-item', { 'active': currentItem === item.key }]" v-for="(item, index) in swiperList"
:key="index" @click="onClickItem(item)"> :key="index" @click="onClickItem(item)">
<view class="swiper-item-content">{{ item.label }}</view> <view class="swiper-item-content">{{ item.label }}</view>
</view> </view>
</view> </scroll-view>
<view class="name-box"> <view class="name-box">
<mescroll-uni ref="mescrollRef" @down="downCallback" @up="upCallback" :up="upOption" :down="downOption" <mescroll-uni ref="mescrollRef" @down="downCallback" @up="upCallback" :up="upOption" :down="downOption"
@@ -187,17 +187,18 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.header-left-content { .header-left-content {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
} }
.header-text { .header-text {
font-size: 28rpx; font-size: 28rpx;
color: #333; color: #333;
margin-left: 18rpx; margin-left: 18rpx;
} }
.purse_amount { .purse_amount {
width: 36rpx; width: 36rpx;
height: 36rpx; height: 36rpx;
@@ -207,6 +208,7 @@ export default {
justify-content: center; justify-content: center;
vertical-align: middle; vertical-align: middle;
} }
.bottom-btn { .bottom-btn {
width: 100%; width: 100%;
margin-bottom: 92rpx; margin-bottom: 92rpx;
@@ -221,11 +223,8 @@ export default {
.swiper-view { .swiper-view {
width: 100%; width: 100%;
height: 70rpx; height: 80rpx;
display: flex;
flex-direction: row;
background: #FFFFFF; background: #FFFFFF;
overflow-x: auto;
white-space: nowrap; white-space: nowrap;
padding: 0 16rpx; padding: 0 16rpx;
box-sizing: border-box; box-sizing: border-box;
@@ -233,7 +232,6 @@ export default {
.swiper-item { .swiper-item {
padding: 0 16rpx; padding: 0 16rpx;
height: 100%; height: 100%;
min-height: 40px;
color: #666; color: #666;
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
@@ -241,6 +239,7 @@ export default {
flex-shrink: 0; flex-shrink: 0;
box-sizing: border-box; box-sizing: border-box;
font-size: 28rpx; font-size: 28rpx;
border-bottom: 4rpx solid transparent;
.swiper-item-content { .swiper-item-content {
font-size: 28rpx; font-size: 28rpx;
@@ -249,7 +248,8 @@ export default {
&.active { &.active {
color: #7A35F6; color: #7A35F6;
border-bottom: 4rpx solid #7A35F6; font-weight: bold;
border-bottom-color: #7A35F6;
} }
} }
} }
@@ -262,6 +262,7 @@ export default {
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
overflow-y: auto; overflow-y: auto;
margin-top: 20rpx;
} }
.mescrollUniView { .mescrollUniView {
+3
View File
@@ -441,6 +441,9 @@ export default {
.shopping_cart_warp { .shopping_cart_warp {
background-color: $app-bj; background-color: $app-bj;
padding: 104rpx 30rpx 0; padding: 104rpx 30rpx 0;
/* #ifdef MP-WEIXIN */
padding-top: calc(var(--status-bar-height) + 140rpx) !important;
/* #endif */
overflow: hidden; overflow: hidden;
height: 100%; height: 100%;
display: flex; display: flex;
+15 -10
View File
@@ -17,10 +17,10 @@
}">{{ item.name }}</view> }">{{ item.name }}</view>
</view> </view>
</view> </view>
<mescroll-uni ref="mescrollRef" :top="mescrollTop" @down="downCallback" @up="upCallback" :up="upOption"
:down="downOption" @init="mescrollInit">
<view class="setting-view"> <view class="setting-view">
<view class="name-box"> <view class="name-box">
<mescroll-uni ref="mescrollRef" @down="downCallback" @up="upCallback" :up="upOption" :down="downOption"
@init="mescrollInit" :fixed="false">
<!-- 原来单个 v-for 替换成两列 --> <!-- 原来单个 v-for 替换成两列 -->
<view class="mescrollUniView"> <view class="mescrollUniView">
<view class="fall-col"> <view class="fall-col">
@@ -32,9 +32,9 @@
style="margin-top: 24rpx" /> style="margin-top: 24rpx" />
</view> </view>
</view> </view>
</view>
</view>
</mescroll-uni> </mescroll-uni>
</view>
</view>
<!-- #ifndef H5 || MP-WEIXIN--> <!-- #ifndef H5 || MP-WEIXIN-->
<CustomTabBar :tabIndex="2" /> <CustomTabBar :tabIndex="2" />
<!-- #endif --> <!-- #endif -->
@@ -55,6 +55,16 @@ import MescrollUni from "@/components/mescroll-uni/mescroll-uni.vue";
export default { export default {
mixins: [MescrollMixin], mixins: [MescrollMixin],
components: { Header, TopSafe, MyBtn, PingItem, CustomTabBar, MescrollUni }, components: { Header, TopSafe, MyBtn, PingItem, CustomTabBar, MescrollUni },
computed: {
mescrollTop() {
// #ifdef MP-WEIXIN
return '420rpx';
// #endif
// #ifndef MP-WEIXIN
return '336rpx';
// #endif
},
},
data() { data() {
return { return {
dataList: [], dataList: [],
@@ -328,19 +338,14 @@ export default {
.setting-view { .setting-view {
width: 100%; width: 100%;
height: calc(100vh - 88rpx - 80rpx - 100rpx - var(--status-bar-height));
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
overflow-y: auto; padding: 0 32rpx 40rpx;
padding: 0 32rpx;
box-sizing: border-box; box-sizing: border-box;
position: relative;
.name-box { .name-box {
width: 100%; width: 100%;
height: calc(100vh - 88rpx - 80rpx - 100rpx - var(--status-bar-height));
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;