|
|
@@ -0,0 +1,502 @@
|
|
|
+<template>
|
|
|
+ <view class="container instrument">
|
|
|
+ <!--选项卡-->
|
|
|
+ <view class="home-hotmaintab-fixed">
|
|
|
+ <view class="home-flex-tab show">
|
|
|
+ <view class="flex text-white">
|
|
|
+ <view class="basis-xxl">
|
|
|
+ <scroll-view scroll-x class="nav z" scroll-with-animation :scroll-left="headTab.scrollLeft">
|
|
|
+ <block v-for="(item,index) in headTab.list" :key="index">
|
|
|
+ <view class="cu-item" :class="index==headTab.TabCur?'select':''" @tap="tabSelect(index,item)" :data-id="index">
|
|
|
+ <view>{{item.name}}</view>
|
|
|
+ <view class="tab-dot bg-white"/>
|
|
|
+ </view>
|
|
|
+ </block>
|
|
|
+ </scroll-view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="container-main">
|
|
|
+ <!-- 商品专题 -->
|
|
|
+ <template v-if="isActivityFlag">
|
|
|
+ <view class="activity-container">
|
|
|
+ <scroll-view scroll-y="true" >
|
|
|
+ <view class="list" v-for="(item, index) in activityList" :key="index">
|
|
|
+ <image class="list-image" :src="item.image" mode="scaleToFill"></image>
|
|
|
+ <view class="title">{{item.title}}</view>
|
|
|
+ <view class="time" v-show="item.status!=3">
|
|
|
+ <view class="text">{{item.detail }}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!--加载loadding-->
|
|
|
+ <tui-loadmore :visible="loadding" :index="3" type="black"></tui-loadmore>
|
|
|
+ <tui-nomore :visible="!pullUpOn" bgcolor="#F7F7F7" :text='nomoreText'></tui-nomore>
|
|
|
+ <!--加载loadding-->
|
|
|
+ </scroll-view>
|
|
|
+ </view>
|
|
|
+ </template>
|
|
|
+ <!-- 列表 -->
|
|
|
+ <template v-else>
|
|
|
+ <tui-skeleton v-if="skeletonShow" backgroundColor="#fafafa" borderRadius="10rpx" :isLoading ="true" :loadingType="9"></tui-skeleton>
|
|
|
+ <template v-else>
|
|
|
+ <view class="banner">
|
|
|
+ <view class="banner-image">
|
|
|
+ <image :src="banner" mode=""></image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="instrument-list">
|
|
|
+ <view class="list-item-cell" v-for="(item,index) in list" :key="index">
|
|
|
+ <view class="list-item-title">
|
|
|
+ <view class="title" :class="item.link ? 'float' : ''">
|
|
|
+ <text>{{ item.title }}</text>
|
|
|
+ </view>
|
|
|
+ <view class="more" v-if="item.link" @click="NavToDetailPage(item)">
|
|
|
+ <text>查看更多</text>
|
|
|
+ <text class="iconfont icon-xiangyou"></text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="list-item-pros">
|
|
|
+ <view class="item-pros" v-for="(pros,prosIndex) in item.floorData" :key="prosIndex" @click="NavToDetailPage(pros)">
|
|
|
+ <view class="item-pros-image">
|
|
|
+ <image :src="pros.image" mode=""></image>
|
|
|
+ </view>
|
|
|
+ <view class="item-pros-name">{{ pros.title }}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </template>
|
|
|
+ </template>
|
|
|
+ </view>
|
|
|
+ <!-- 侧边 -->
|
|
|
+ <scroll-top v-if="isScrollTop"></scroll-top>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+ import tuiLoadmore from "@/components/tui-components/loadmore/loadmore"
|
|
|
+ import tuiNomore from "@/components/tui-components/nomore/nomore"
|
|
|
+ export default{
|
|
|
+ components:{
|
|
|
+ tuiLoadmore,
|
|
|
+ tuiNomore,
|
|
|
+ },
|
|
|
+ data(){
|
|
|
+ return{
|
|
|
+ banner:'',
|
|
|
+ headTab: {
|
|
|
+ TabCur: 0,
|
|
|
+ scrollLeft: 0,
|
|
|
+ list: [],
|
|
|
+ },
|
|
|
+ headTabId:0,
|
|
|
+ list:[],
|
|
|
+ navMenuId:0,
|
|
|
+ isScrollTop:false,
|
|
|
+ listQuery:{
|
|
|
+ pageNum:1,
|
|
|
+ pageSize:10,
|
|
|
+ },
|
|
|
+ nomoreText: '上拉显示更多',
|
|
|
+ hasNextPage:false,
|
|
|
+ loadding: false,
|
|
|
+ pullUpOn: true,
|
|
|
+ pullFlag: true,
|
|
|
+ isActivityFlag:false,
|
|
|
+ skeletonShow:true,
|
|
|
+ activityList:[]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad(option) {
|
|
|
+ console.log(option)
|
|
|
+ this.navMenuId = option.linkId
|
|
|
+ this.GetHomeSubMenu()
|
|
|
+ },
|
|
|
+ methods:{
|
|
|
+ GetHomeSubMenu(){//获取数据
|
|
|
+ let _self = this
|
|
|
+ this.CommonService.GetHomeSubMenu({navMenuId:this.navMenuId}).then(response =>{
|
|
|
+ let data = response.data
|
|
|
+ this.headTab.list = data
|
|
|
+ uni.setNavigationBarTitle({title:_self.headTab.list[0].name});
|
|
|
+ if(this.headTab.list[0].linkType === 8){
|
|
|
+ this.isActivityFlag = true
|
|
|
+ this.GetPromotionsrList()
|
|
|
+ }else{
|
|
|
+ this.GetPageTopicInfo(this.headTab.list[0].linkParam.id)
|
|
|
+ }
|
|
|
+ }).catch(error =>{
|
|
|
+ this.$util.msg(error.msg,2000)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ GetPageTopicInfo(type){//获取数据
|
|
|
+ this.ProductService.GetPageTopic({type:type}).then(response =>{
|
|
|
+ let data = response.data
|
|
|
+ this.list = data
|
|
|
+ this.GetPageTopicBanner(type)
|
|
|
+ this.skeletonShow = false
|
|
|
+ }).catch(error =>{
|
|
|
+ this.$util.msg(error.msg,2000)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ GetPageTopicBanner(type){//获取banner
|
|
|
+ this.ProductService.GetPageTopicBanner({type:type}).then(response =>{
|
|
|
+ let data = response.data
|
|
|
+ this.banner = data.image
|
|
|
+ }).catch(error =>{
|
|
|
+ this.$util.msg(error.msg,2000)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ GetPromotionsrList(){//获取专题列表
|
|
|
+ this.ProductService.GetPromotionsrList(this.listQuery).then(response =>{
|
|
|
+ let responseData = response.data
|
|
|
+ if(responseData.list&&responseData.list.length > 0){
|
|
|
+ this.isEmpty = false
|
|
|
+ this.hasNextPage = responseData.hasNextPage
|
|
|
+ this.activityList = responseData.list
|
|
|
+ this.pullFlag = false;
|
|
|
+ setTimeout(()=>{this.pullFlag = true;},500)
|
|
|
+ if(this.hasNextPage){
|
|
|
+ this.pullUpOn = false
|
|
|
+ this.nomoreText = '上拉显示更多'
|
|
|
+ }else{
|
|
|
+ this.pullUpOn = true
|
|
|
+ this.loadding = false
|
|
|
+ this.nomoreText = '已至底部'
|
|
|
+ }
|
|
|
+ }else{
|
|
|
+ this.isEmpty = true
|
|
|
+ }
|
|
|
+ }).catch(error =>{
|
|
|
+ this.$util.msg(error.msg,2000)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ GetPromotionsrListBottomData(){
|
|
|
+ this.listQuery.pageNum+=1
|
|
|
+ this.ProductService.GetPromotionsrList(this.listQuery).then(response =>{
|
|
|
+ let responseData = response.data
|
|
|
+ if(responseData.list&&responseData.list.length > 0){
|
|
|
+ this.hasNextPage = response.data.hasNextPage
|
|
|
+ this.activityList = this.activityList.concat(responseData.list)
|
|
|
+ this.pullFlag = false;// 防上拉暴滑
|
|
|
+ setTimeout(()=>{this.pullFlag = true;},500)
|
|
|
+ if(this.hasNextPage){
|
|
|
+ this.pullUpOn = false
|
|
|
+ this.nomoreText = '上拉显示更多'
|
|
|
+ }else{
|
|
|
+ this.pullUpOn = false
|
|
|
+ this.loadding = false
|
|
|
+ console.log('2222222222222')
|
|
|
+ this.nomoreText = '已至底部'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }).catch(error =>{
|
|
|
+ this.$util.msg(error.msg,2000)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ tabSelect(index,item) {//tab菜单被点击
|
|
|
+ console.log(item)
|
|
|
+ this.headTab.TabCur = index;
|
|
|
+ this.headTab.scrollLeft = (index - 1) * 50;
|
|
|
+ this.headTabId = item.linkParam.id;
|
|
|
+ console.log(this.headTabId)
|
|
|
+ uni.setNavigationBarTitle({title:item.name});
|
|
|
+ if(item.linkType === 8){
|
|
|
+ this.isActivityFlag = true
|
|
|
+ this.GetPromotionsrList()
|
|
|
+ }else{
|
|
|
+ this.isActivityFlag = false
|
|
|
+ this.GetPageTopicInfo(this.headTabId)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ NavToDetailPage(floor) {//跳转
|
|
|
+ console.log(floor)
|
|
|
+ /**
|
|
|
+ * 页面跳转类型
|
|
|
+ * 1、二级页面,2、搜索项目仪器,3、直播页面,4、自由页面,5、商品详情,6、仪器项目详情,7、供应商主页
|
|
|
+ * 8、专题活动页,9、二手市场介绍,10、二手商品列表,11、二手商品发布,12、商品搜索,13、信息详情
|
|
|
+ * 14、品牌招商介绍页,15、维修保养介绍页,16、首页,17、注册页,18、信息中心,19、供应商列表
|
|
|
+ **/
|
|
|
+ if(floor.linkType){
|
|
|
+ const typeMap = {
|
|
|
+ 1:`/pages/goods/goods-instrument?linkId=${floor.linkParam.id}&title=${floor.title}`,
|
|
|
+ 2:`/pages/search/search-instrument?keyword=${floor.title}`,
|
|
|
+ 5:`/pages/goods/product?id=${floor.linkParam.id}`,
|
|
|
+ 6:`/pages/goods/instrument-details?id=${floor.linkParam.id}`,
|
|
|
+ 7:`/supplier/pages/user/my-shop?shopId=${floor.linkParam.id}`,
|
|
|
+ 8:`/h5/pages/activity/activity-list`,
|
|
|
+ 9:`/second/pages/form/introduce`,
|
|
|
+ 10:`/second/pages/product/product-list`,
|
|
|
+ 11:`/second/pages/form/form`,
|
|
|
+ 12:`/pages/search/search?keyWord=${floor.title}`,
|
|
|
+ 13:`/h5/pages/article/page?link=${floor.link}`,
|
|
|
+ 14:`/h5/pages/article/page?link=${floor.link}`,
|
|
|
+ 15:`/h5/pages/article/page?link=${floor.link}`,
|
|
|
+ 17:`/pages/login/register-select`,
|
|
|
+ 18:`/h5/pages/article/page?link=${floor.link}`,
|
|
|
+ 19:`/pages/search/search-supplier?keyWord=${floor.title}`
|
|
|
+ }
|
|
|
+ const url = typeMap[floor.linkType];
|
|
|
+ this.$api.navigateTo(url)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onReachBottom() {
|
|
|
+ if(this.isActivityFlag){
|
|
|
+ if(this.hasNextPage){
|
|
|
+ this.loadding = true
|
|
|
+ this.pullUpOn = true
|
|
|
+ this.GetPromotionsrListBottomData()
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onPageScroll(e){//实时获取到滚动的值
|
|
|
+ if(e.scrollTop>600){
|
|
|
+ this.isScrollTop = true
|
|
|
+ }else{
|
|
|
+ this.isScrollTop = false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onShow() {
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+ page{
|
|
|
+ background-color: #F7F7F7;
|
|
|
+ }
|
|
|
+ .container-main{
|
|
|
+ padding-top: 100rpx;
|
|
|
+ }
|
|
|
+ // 活动专题列表
|
|
|
+ .activity-container{
|
|
|
+ width: 100%;
|
|
|
+ height: auto;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 0 24rpx;
|
|
|
+ }
|
|
|
+ .list{
|
|
|
+ width: 100%;
|
|
|
+ height: 318rpx;
|
|
|
+ float: left;
|
|
|
+ margin-bottom: 10rpx;
|
|
|
+ position: relative;
|
|
|
+ .list-image{
|
|
|
+ width: 100%;
|
|
|
+ height: 318rpx;
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+ .title{
|
|
|
+ width: 100%;
|
|
|
+ height: 72rpx;
|
|
|
+ line-height: 72rpx;
|
|
|
+ text-align: center;
|
|
|
+ background: rgba(254,246,243,0.8);
|
|
|
+ color: $color-system;
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ font-size: $font-size-26;
|
|
|
+ }
|
|
|
+ .time{
|
|
|
+ width: 100%;
|
|
|
+ height: 48rpx;
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ .text{
|
|
|
+ width: 475rpx;
|
|
|
+ height: 48rpx;
|
|
|
+ font-size: $font-size-24;
|
|
|
+ margin: 0 auto;
|
|
|
+ line-height: 48rpx;
|
|
|
+ background: linear-gradient(315deg, #f94b4b 0%, #bc3cff 100%);
|
|
|
+ color: #FFFFFF;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ //二级分类
|
|
|
+ .instrument{
|
|
|
+ width: 100%;
|
|
|
+ height: auto;
|
|
|
+ .banner{
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding:24rpx;
|
|
|
+ background-color: #FFFFFF;
|
|
|
+ width: 100%;
|
|
|
+ .banner-image{
|
|
|
+ width: 100%;
|
|
|
+ height: 248rpx;
|
|
|
+ border-radius: 4rpx;
|
|
|
+ }
|
|
|
+ image{
|
|
|
+ width: 100%;
|
|
|
+ height: 248rpx;
|
|
|
+ border-radius: 4rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .instrument-list{
|
|
|
+ width: 100%;
|
|
|
+ height: auto;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 0 24rpx;
|
|
|
+ .list-item-cell{
|
|
|
+ width: 100%;
|
|
|
+ height: auto;
|
|
|
+ float: left;
|
|
|
+ .list-item-title{
|
|
|
+ width: 100%;
|
|
|
+ height: 88rpx;
|
|
|
+ line-height: 88rpx;
|
|
|
+ float: left;
|
|
|
+ .title{
|
|
|
+ font-size: $font-size-28;
|
|
|
+ line-height: 80rpx;
|
|
|
+ color: $text-color;
|
|
|
+ font-weight: bold;
|
|
|
+ &.float{
|
|
|
+ float: left;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .more{
|
|
|
+ font-size: $font-size-26;
|
|
|
+ line-height: 80rpx;
|
|
|
+ color: #999999;
|
|
|
+ height: 80rpx;
|
|
|
+ float: right;
|
|
|
+ .icon-xiangyou{
|
|
|
+ font-size: $font-size-28;
|
|
|
+ margin-left: 10rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .list-item-pros{
|
|
|
+ width: 100%;
|
|
|
+ height: auto;
|
|
|
+ float: left;
|
|
|
+ .item-pros{
|
|
|
+ width: 340rpx;
|
|
|
+ height: 414rpx;
|
|
|
+ float: left;
|
|
|
+ margin-right: 20rpx;
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+ background-color: #FFFFFF;
|
|
|
+ border-radius: 4rpx;
|
|
|
+ &:nth-child(2n){
|
|
|
+ margin-right: 0;
|
|
|
+ }
|
|
|
+ .item-pros-image{
|
|
|
+ width: 340rpx;
|
|
|
+ height: 340rpx;
|
|
|
+ float: left;
|
|
|
+ image{
|
|
|
+ width: 340rpx;
|
|
|
+ height: 340rpx;
|
|
|
+ display: block;
|
|
|
+ border-radius: 4rpx 4rpx 0 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .item-pros-name{
|
|
|
+ width: 100%;
|
|
|
+ height: 74rpx;
|
|
|
+ line-height: 74rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 0 24rpx;
|
|
|
+ white-space: normal;
|
|
|
+ word-break: break-all;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ display: -webkit-box;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ -webkit-line-clamp: 1;
|
|
|
+ text-align: center;
|
|
|
+ font-size: $font-size-26;
|
|
|
+ line-height: 74rpx;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .home-hotmaintab-fixed{
|
|
|
+ width: 100%;
|
|
|
+ height:auto;
|
|
|
+ overflow: hidden;
|
|
|
+ background: #FFFFFF;
|
|
|
+ padding-bottom: 20rpx;
|
|
|
+ position: fixed;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ z-index: 999;
|
|
|
+ .home-flex-tab {
|
|
|
+ width: 100%;
|
|
|
+ position: relative;
|
|
|
+ transition: opacity .25s;
|
|
|
+ .text-white{
|
|
|
+ color: #666666;
|
|
|
+ }
|
|
|
+ .flex {
|
|
|
+ .basis-xxl {
|
|
|
+ flex-basis: 100%;
|
|
|
+ width: 100%;
|
|
|
+ z-index: 1;
|
|
|
+ }
|
|
|
+ .basis-xxs {
|
|
|
+ flex-basis: 10%;
|
|
|
+ z-index: 1;
|
|
|
+ width: 10%;
|
|
|
+ }
|
|
|
+ .sort-icon {
|
|
|
+ font-size: 55rpx;
|
|
|
+ height: 64rpx;
|
|
|
+ line-height: 64rpx;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .nav{
|
|
|
+ white-space:nowrap;
|
|
|
+ }
|
|
|
+ .nav .cu-item {
|
|
|
+ display: inline-block;
|
|
|
+ margin: 0 5rpx;
|
|
|
+ padding: 0 15rpx;
|
|
|
+ }
|
|
|
+ .nav.z .cu-item.select {
|
|
|
+ font-size: $font-size-28;
|
|
|
+ color: $color-system;
|
|
|
+ }
|
|
|
+ .nav.z .cu-item {
|
|
|
+ height: 80rpx;
|
|
|
+ font-size: $font-size-26;
|
|
|
+ line-height: 80rpx;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ }
|
|
|
+ .nav.z .cu-item.select .tab-dot {
|
|
|
+ position: absolute;
|
|
|
+ height: 8rpx;
|
|
|
+ border-radius: 20rpx;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ width: 40rpx;
|
|
|
+ margin: auto;
|
|
|
+ }
|
|
|
+ .bg-white{
|
|
|
+ background-color: $color-system;
|
|
|
+ }
|
|
|
+ ::-webkit-scrollbar {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ .flex {
|
|
|
+ display: -webkit-box;
|
|
|
+ display: -webkit-flex;
|
|
|
+ display: flex;
|
|
|
+ }
|
|
|
+</style>
|
