charles/frontend-app
1
0
Fork 0
Code Issues Pull Requests Actions Projects Releases Wiki Activity

feat：优化

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