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-16 15:54:26 +08:00
parent 4a669ec670
commit aa2f1009e8
12 changed files with 538 additions and 623 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/sort/sort.vue
+29 -67
View File
@@ -1,16 +1,13 @@
<template>
<view class="sort_warp" :class="platformType ? '' : 'iosplatformType'">
<TopSafe></TopSafe>
<view class="sort_header">
<!-- 分类切换 -->
<view class="sort_category_header">
<view
:class="
selCategory === 1
? 'category_item category_item_sel'
: 'category_item'
"
@click="checkCategory(1)"
>
<view :class="selCategory === 1
? 'category_item category_item_sel'
: 'category_item'
" @click="checkCategory(1)">
<view>分类</view>
<view v-if="selCategory === 1" class="category_item_sel_but"></view>
</view>
@@ -21,31 +18,16 @@
</view>
<!-- 搜索 -->
<view style="width: 200rpx" @click="jumpSearch" class="jump-search">
<up-search
shape="square"
bgColor="#EEEEEEFF"
color="#666666FF"
:showAction="false"
placeholder="搜索"
></up-search>
<up-search shape="square" bgColor="#EEEEEEFF" color="#666666FF" :showAction="false"
placeholder="搜索"></up-search>
</view>
</view>
<view class="u-menu-wrap">
<!-- 左侧类别 -->
<scroll-view
scroll-y
scroll-with-animation
class="u-tab-view menu-scroll-view"
:scroll-top="scrollTop"
>
<view
v-for="(item, index) in tabbarList"
:key="index"
class="u-tab-item"
:class="[current == index ? 'u-tab-item-active' : '']"
:data-current="index"
@tap.stop="swichMenu(item, index)"
>
<scroll-view scroll-y scroll-with-animation class="u-tab-view menu-scroll-view" :scroll-top="scrollTop">
<view v-for="(item, index) in tabbarList" :key="index" class="u-tab-item"
:class="[current == index ? 'u-tab-item-active' : '']" :data-current="index"
@tap.stop="swichMenu(item, index)">
<text class="u-line-1">{{ item.name }}</text>
</view>
</scroll-view>
@@ -58,42 +40,20 @@
<view class="page-view">
<!-- 这里还有一层循环 -->
<up-loading-page :loading="tabbarContentLoading"></up-loading-page>
<view
class="class-item"
v-for="(item, index) in tabbarContentList"
:key="index"
>
<view class="class-item" v-for="(item, index) in tabbarContentList" :key="index">
<view class="item-title">
<text>{{ item.name }}</text>
</view>
<view
class="item-container"
v-if="item.foods && item.foods.length !== 0"
>
<view
class="thumb-box"
v-for="(item1, index1) in item.foods"
:key="index1"
@click="jumpInfo(item1)"
>
<image
class="item-menu-image"
:src="item1.icon ? item1.icon : '/static/common/def_img.jpg'"
mode=""
>
<view class="item-container" v-if="item.foods && item.foods.length !== 0">
<view class="thumb-box" v-for="(item1, index1) in item.foods" :key="index1" @click="jumpInfo(item1)">
<image class="item-menu-image" :src="item1.icon ? item1.icon : '/static/common/def_img.jpg'" mode="">
</image>
<view class="item-menu-name">{{ item1.name }}</view>
</view>
</view>
<view v-else class="not_order_warp">
<view class="not_order_warp_img"
><up-image
src="https://static.tbmall.xin/static/not_shopping.png"
width="100"
height="100"
bgColor="#f1f6ff00"
></up-image
></view>
<view class="not_order_warp_img"><up-image src="https://static.tbmall.xin/static/not_shopping.png"
width="100" height="100" bgColor="#f1f6ff00"></up-image></view>
<view class="not_order_msg_warp">暂无分类，快去添加吧~</view>
</view>
</view>
@@ -110,9 +70,10 @@
import { getCascadeCategory, getCarouselImage } from "@/api/common.js";
import CustomTabBar from "@/components/custom-tab-bar.vue";
import { APP_PAGE_TYPE } from "@/utils/enumUtils.js";
import TopSafe from '@/components/common/top-safe.nvue';
export default {
components: { CustomTabBar },
components: { CustomTabBar, TopSafe },
data() {
return {
selCategory: 1,
@@ -193,11 +154,11 @@ export default {
},
// 查询分类
async getSort(pId) {
const params = {
parentId: pId,
};
console.log('查询分类', params,pId);
console.log('查询分类', params, pId);
const resp = await getCascadeCategory(params);
if (resp && resp.bizcode === 100) {
return resp.data;
@@ -209,7 +170,7 @@ export default {
},
// 点击左边的栏目切换
async swichMenu(item, index) {
console.log('点击左边的栏目切换',item, index, "item, index");
console.log('点击左边的栏目切换', item, index, "item, index");
if (index == this.current) return;
this.tabbarContentLoading = true;
const firstData = await this.getSort(item.id);
@@ -257,13 +218,14 @@ export default {
<style lang="scss" scoped>
.sort_warp {
padding-top:env(safe-area-inset-top) ;
padding-top: env(safe-area-inset-top);
height: calc(100vh - env(safe-area-inset-bottom) - 50rpx);
display: flex;
flex-direction: column;
overflow-y: auto;
&.iosplatformType {
.right-box {
padding-bottom: 100rpx !important;
}
@@ -281,7 +243,7 @@ export default {
align-items: center;
}
.jump-search{
.jump-search {
display: flex;
}
@@ -308,8 +270,7 @@ export default {
}
}
.sort_content {
}
.sort_content {}
.u-menu-wrap {
flex: 1;
@@ -317,7 +278,7 @@ export default {
// overflow: hidden;
// margin-top: 20rpx;
// height: calc(100vh - 216rpx - env(safe-area-inset-bottom));
padding-bottom:calc(100rpx + env(safe-area-inset-bottom));
padding-bottom: calc(100rpx + env(safe-area-inset-bottom));
}
.u-search-inner {
@@ -388,6 +349,7 @@ export default {
background-color: #fff;
padding: 16rpx;
border-radius: 8rpx;
&:last-child {
margin-bottom: 0;
}