123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157 |
- <template>
- <view class="content" :style="[{background:backGround}]">
- <view class="nav_wrap">
- <view class="nav_item" v-for="(item,index) in tabInfo" :key="index" @click="changeTab(index,item.categoryId)">
- <view :class="currIndex == index?'active_nav nav_text':'nav_text'">{{item.categoryName}}</view>
- <image :src="icon" mode="" class="nav_icon" v-if="currIndex == index"></image>
- </view>
- </view>
- <view class="gap_line"></view>
- <view class="sort_wrap" @click="toSortPage">
- <image :src="sortImg" mode=""></image>
- <text>分类</text>
- </view>
- </view>
- </template>
- <script>
- export default{
- name:'tabMenu',
- data(){
- return {
- icon:getApp().globalData.imgUrl+'index/icon.png',
- sortImg:getApp().globalData.imgUrl+'index/sort.png',
- currIndex:0
- }
- },
- props: ['backGround','tabInfo'],
- methods:{
- changeTab(index,categoryId){
- this.currIndex = index
- if(index>0){
- let param = {}
- param.method = 'GET'
- param.url = 'v3/goods/front/goods/category/list?categoryId1='+categoryId
- this.$request(param).then(res=>{
- if(res.state == 200){
- this.$emit('getChildList',res.data.list[index-1],index)
- }
- })
- }else{
- this.$emit('getChildList',null,index)
- }
- },
- toSortPage(){
- uni.switchTab({
- url:`/pages/category/category`
- })
- }
- }
- }
- </script>
- <style lang='scss'>
- .content{
- position:fixed;
- top:0;
- /* left:0; */
- /* #ifdef APP-PLUS */
- top: var(--status-bar-height);
- /* #endif */
- width:750rpx;
- padding:0 20rpx;
- box-sizing: border-box;
- display: flex;
- align-items: center;
- /* #ifndef MP */
- padding-top:110rpx;
- /* #endif */
- /* #ifdef MP */
- padding-top:50px;
- /* #endif */
- background: linear-gradient(90deg, #6984a4 0%, #3a4b5c 100%);
- z-index: 1000;
- /* #ifndef H5 */
- left: 0;
- /* #endif */
- /* #ifndef MP */
- height: 160rpx;
- /* #endif */
- /* #ifdef MP */
- height: calc(50px + 60rpx);
- /* #endif */
- overflow-y: hidden;
- .nav_wrap{
- width:580rpx;
- /* #ifdef MP-WEIXIN */
- height:auto;
- /* #endif */
- /* #ifndef MP-WEIXIN */
- height:84rpx;
- /* #endif */
- display:flex;
- overflow-x: scroll;
- padding-top: -9rpx;
- float: left;
- .nav_item{
- margin-right:35rpx;
- display:flex;
- flex-direction: column;
- align-items: center;
- /* #ifndef MP-WEIXIN */
- padding-top: 12rpx;
- /* #endif */
- box-sizing: border-box;
- .nav_text{
- font-size:32rpx;
- color:#fff;
- white-space: nowrap;
- line-height: 38rpx;
- }
- .nav_icon{
- width:27rpx;
- height:9rpx;
- }
- }
- }
- .gap_line{
- width:13rpx;
- height:30rpx;
- background: linear-gradient(-90deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%);
- opacity: 0.8;
- float: left;
- margin-right:6rpx;
- margin-left: 4rpx;
- align-self: end;
- /* #ifdef MP-WEIXIN */
- margin-top: 10rpx;
- /* #endif */
- }
- .sort_wrap{
- font-size:30rpx;
- color:#fff;
- display: flex;
- justify-content: flex-start;
- box-sizing: border-box;
- float: right;
- text-align: right;
- width: max-content;
- margin-top: -20rpx;
- image{
- width:32rpx;
- height:26rpx;
- margin:8rpx 7rpx 0 7rpx;
- }
- text{
- line-height:30rpx;
- display: inline-block;
- margin-top: 8rpx;
- }
- }
- }
- .active_nav{
- font-weight: bold;
- margin-bottom:6rpx;
- }
- </style>
|