<template> <view> <view class="swiperMain"> <view class="swiperHead"> <!--组件--> <swiperNavBar :scrollIntoView="scrollIntoView" :swiperTabList='swiperTabList' :swiperTabIdx='swiperTabIdx' :currentSwiperWidth='currentSwiperWidth' :currentSwiperHeight='currentSwiperHeight' :swiperCurrentSize='swiperCurrentSize' :swiperColor='swiperColor' :swiperCurrentColor='swiperCurrentColor' :currentSwiperLineShow="currentSwiperLineShow" :currentSwiperLineActiveWidth="currentSwiperLineActiveWidth" :currentSwiperLineActiveHeight="currentSwiperLineActiveHeight" :currentSwiperLineActiveBg="currentSwiperLineActiveBg" :currentSwiperLineAnimatie="currentSwiperLineAnimatie" v-if=" swiperTabList.length > 0 " @change="CurrentTab"> </swiperNavBar> <!--组件--> </view> <!--内容--> <view class="swiperCont" :style="{ paddingTop:currentSwiperHeight + 'rpx' }"> <swiper class="swiper" :style="{ height:mainHeight + 'px' }" :current="swiperTabIdx" @change="SwiperChange"> <swiper-item class="swiperItem" v-for="(item,index) in swiperTabList" :key='index'> <!-- {{ item }} --> <view class="contsitem" v-for="(item,index) in productList" :key='index' :class="[producval == item.id ? 'activecol' : 'contsitem']" @click="changepro(item)"> <view class="title fcor666">{{item.name}}</view> <view class="price">¥<text style="font-size: 24px;">{{item.costPrice}}</text></view> <view class="fgprice" v-if="item.price != item.costPrice">¥{{item.price}}</view> </view> </swiper-item> </swiper> <view class="subbtn" @click="jumpcom()">提交</view> </view> </view> </view> </template> <script> import swiperNavBar from '../../components/swiperNavBar.vue'; import { getBrandByList, getMemberProducts } from '../../Utils/Api.js'; let app = getApp(); export default { data() { return { //导航 scrollIntoView: 0, //设置哪个方向可滚动,则在哪个方向滚动到该元素 swiperTabList: [], //导航列表 swiperTabIdx: 0, swiperCurrentSize: '26rpx', //导航的字体大小 swiperColor: '#333333', //导航栏字体未选中前颜色 swiperCurrentColor: '#1D63FF', //选中当前导航栏字体颜色 currentSwiperWidth: '23%', //当前导航的宽度 % upx rpx px (导航超出可左右滑动 ) currentSwiperHeight: 100, //当前导航的高度度 rpx px mainHeight: 200, //全屏或者局部滑动设置的高度 currentSwiperLineShow: true, //是否显示导航栏的线条 (线条距离标题太近的话可自行修改.swiperLine的css) currentSwiperLineActiveBg: '#1D63FF', //当前选中的导航栏线条颜色 currentSwiperLineActiveWidth: '30rpx', //当前选中的导航栏线条的宽度 upx rpx px currentSwiperLineActiveHeight: '6rpx', //当前选中的导航栏线条的高度度 upx rpx px currentSwiperLineAnimatie: 300, //当前选中的导航栏线条过渡效果 productList: [], producval: '', //(全屏出现滚动条 去掉paddingTop 但导航栏会遮住部分内容 自行改.swiperCont .swiper里css) //也可获取导航栏的高度 屏幕高度减去导航栏高度 = 你的内容全屏高度 不会出现滚动条 goodsTypeId: '', //商家id goosList: '' //选中参数 } }, onLoad(options) { this.goodsTypeId = options.id; this.getBrandByList(); }, components: { swiperNavBar }, onReady() { this.mainHeight = uni.getSystemInfoSync().windowHeight; //获取屏幕的高度使得全屏左右滑动 }, methods: { //查询二级分类 getBrandByList() { uni.showLoading({ title: '加载中...' }) let params = { pageNum: 1, pageSize: 10000, goodTypeId: this.goodsTypeId } getBrandByList(params).then(res => { uni.hideLoading(); if (res.return_code == '000000') { this.swiperTabList = res.return_data.list; this.getMemberProducts(res.return_data.list[0].id); } else { this.swiperTabList = []; } }) }, //查询产品 getMemberProducts(item) { let datas = { typeId: this.goodsTypeId, brandId: item, regionId: app.globalData.cityId } getMemberProducts(datas).then(res => { uni.hideLoading(); if (res.return_code == '000000' && res.return_data !='') { this.productList = res.return_data; this.goosList = res.return_data[0]; this.producval = res.return_data[0].id; } else { this.productList = []; } }) }, //tab点击事件 自行完善需要的代码 CurrentTab: function(index, item) { this.swiperTabIdx = index; this.scrollIntoView = Math.max(0, index - 1); this.getMemberProducts(item.id); }, //滑动事件 自行完善需要的代码 SwiperChange: function(e) { this.swiperTabIdx = e.detail.current; this.scrollIntoView = Math.max(0, e.detail.current - 1); let brandid = this.swiperTabList[this.swiperTabIdx].id; this.getMemberProducts(brandid); }, //选择充值 changepro(item) { this.producval = item.id; this.goosList = item; }, //跳转确定订单 jumpcom() { uni.navigateTo({ url: '../rec-confirmation/rec-confirmation?goodid=' + this.producval + '&price=' + this .goosList.costPrice + '&oldprice=' + this.goosList.price+'&name='+this.goosList.name }) } } } </script> <style lang="scss"> page { background: #F8F8F8; } .swiperMain { width: 100%; } .swiperHead { position: fixed; top: 0; z-index: 10; width: 100%; background: #FFFFFF; } .swiperHead scroll-view { display: flex; flex-direction: row; flex-wrap: nowrap; white-space: nowrap; } .swiperTab { display: inline-flex; flex-direction: column; text-align: center; } .swiperCont { width: 100%; padding-top: 70rpx; background-color: #f0f0f0; } /* #ifdef H5 */ .swiperHead { position: fixed; top: 44px; z-index: 10; width: 100%; background: #FFFFFF; } /* #endif */ .swiper { width: 100%; height: 400rpx; } .swiperItem { overflow: auto; background: #ffffff; text-align: center; color: #333333; font-size: 30upx; } .contsitem { width: 23%; min-height: 125px; padding-bottom: 10px; padding-left: 10px; padding-right: 10px; border-radius: 5px; margin-top: 20px; display: inline-block; text-align: center; margin-left: 4%; background-color: #f0f0f0; float: left; } .title { font-size: 14px; padding-top: 15px; } .price { font-size: 14px; padding-top: 5px; font-weight: bold; color: #caba60; } .fgprice { color: #999999; text-decoration: line-through; font-size: 14px; } .activecol { background-color: #edd076; } .swiperItem image { width: 100%; height: 100%; display: block; } .subbtn { width: 80%; height: 45px; line-height: 45px; margin-left: 10%; background-color: #1D63FF; color: #FFFFFF; border-radius: 20px; margin-top: 80px; position: absolute; bottom: 40px; text-align: center; } </style>