xmt/pages/cart/zmt.vue

<template>
	<view class="container">
		<scroll-view scroll-x="true" class="class-box flex b-t" :scroll-left="scrollLeft" :scroll-with-animation="true">
			<view @click="tabClass(idx)" class="item" :style="{ width: topNavWidth }" v-for="(item, idx) in navList" :key="idx">
				<view class="status" :class="{ action: idx == classIndex }">{{ item.title }}</view>
			</view>
		</scroll-view>
		<swiper :interval="3000" :duration="500" class="nav-swiper" :current="classIndex" :style="{'height':height}" disable-touch>
			<swiper-item v-for="navItem in navList">
				<scroll-view scroll-y="true" :style="{'height':height}" @scrolltolower="getZmtList()">
					<!-- 轮播图and搜索 start-->
					<view class="Search-box" @click="navTo('/pages/index/searchZmt')">
						<view class="Search-box-size">
							<image class="box-img" src="../../static/img/img01.png"></image>
							<input type="text" class="box-word" disabled placeholder="请输入关键字" v-model="keyword"  />
						</view>
						<!-- <view class="Search-box-sort" @click="messagesearch">搜索</view> -->
					</view>
					<!-- <view class="top-swiper">
						<swiper :autoplay="true" :interval="3000" :duration="1000" class="banner-swiper">
							<swiper-item>
								<image src="../../static/error/emptyCart.png" mode="" class="swiper-img"></image>
							</swiper-item>
							<swiper-item>
								<image src="../../static/img/bargainBg.jpg" mode="" class="swiper-img"></image>
							</swiper-item>
						</swiper>
						<view class="input-box flex" @click="clickSearch">
							<view class=" input-content flex">
								<view class="iconfont iconsearch"></view>
								<view class="input"><input type="text" disabled placeholder="有什么新鲜事" /></view>
							</view>
						</view>
					</view> -->
					<!-- 轮播图and搜索 end-->
					<!-- 自媒体列表 start -->
					<view class="dy-wrap flex" v-for="item in navItem.list" @click="navTo('/pages/user/dydetail?id=' + item.id)">
						<view class="user-logo">
							<image :src="item.headimg" mode=""></image>
						</view>
						<view class="user-num">
							<view class="user-name">
								{{item.name}}
							</view>
							<view class="sub-num">
								发表文章：{{item.count}}
							</view>
							<view class="read-num">
								阅读量：{{item.visit}}
							</view>
						</view>
						<view class="flex flex_direction">
							<view class="dy-btn" :class="{'dying':item.is_sub == 1}" @click.stop="dingYue(item)">
								{{item.is_sub == 1?'已订阅':'订阅'}}
							</view>
							<!-- <view v-show="item.join" class="jr-btn" class="dying}">
								{{'已加入'}}
							</view> -->
							<view class="jr-btn" v-if="item.join" :class="{'dying':item.join == 1}"  @click.stop='toJoin(item)'>
								已加入
							</view>
							<view class="jr-btn" v-if="!item.joins&&!item.join" :class="dying" @click.stop='toJoin(item)'>
								加入
							</view>
						</view>
					</view>
					<!-- 自媒体列表 end -->
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import {
		loadIndexs
	} from '@/api/index.js';
	import {
		getUserInfo
	} from '@/api/user.js';
	import {
		interceptor
	} from '@/utils/loginUtils';
	import {
		mapState
	} from 'vuex';
	
	import { getZmtList, getQyType, dingYue } from '@/api/art.js'
	export default {
		data() {
			return {
				isDy:false,
				height: '',
				classIndex: 0,
				topNavWidth: '25%', //设置导航默认宽度
				navList: [{
						id: 0,
						title: '推荐',
						loadingType: 'more',
						list: [],
						page: 1, //当前页数
						limit: 10 //每次信息条数
					}
				],
				pageProportion: 0, //保存页面基于750宽度的比例
				swiperHeight: 0,
				checkid: 0,
				titleNViewBackground: '',
				swiperCurrent: 0,
				swiperLength: 0,
				bargainlist: [], //砍价商品
				carouselList: [], //轮播列表
				goodsList: [], //最新商品列表
				bastList: [], //精品推荐列表
				bastBanner: [], //促销商品列表
				menusList: [], //头部菜单
				page: 1,
				limit: 5,
				userServant: [{
					image: ''
				}], //用户推广服务
				couponArray: [], //可领取优惠券
				recommend: [{
						id: 0,
						re_title: '精选',
						re_name: '为你推荐'
					},
					{
						id: 1,
						re_title: '最新',
						re_name: '最新好货优选'
					},
					{
						id: 2,
						re_title: '便宜好货',
						re_name: '90天便宜好货'
					}
				],
				actTime: new Date(),
				keyword: '',
				merId:''
			};
		},
		computed: {
			...mapState(['loginInterceptor']),
			...mapState('user', ['hasLogin', 'userInfo']),
			// 计算左侧距离
			scrollLeft() {
				if (this.classIndex > 1) {
					return this.itemWidht * (this.classIndex - 1.5);
				} else {
					return 0;
				}
			}
		},
		onLoad: function(option) {
			let obj = this
			// #ifndef MP
			if (option.spread) {
				// 存储其他邀请人
				uni.setStorageSync('spread', option.spread);
			}
			// #endif
			// #ifdef MP
			if (option.scene) {
				// 存储小程序邀请人
				uni.setStorage({
					key: 'spread_code',
					data: option.scene
				});
			}
			// #endif
			this.getArtTypeList()
			getUserInfo({}).then(res=>{
				let userInfo=res.data
				if(userInfo.mer_id!=undefined && userInfo.mer_id!=null && userInfo.mer_id!=0 && userInfo.mer_id!=''){
					obj.merId=userInfo.mer_id
				}
			})
		},
		onShow: function() {
			// 判断是否强制登录
			if (this.loginInterceptor && !this.hasLogin) {
				// 登录拦截
				interceptor();
			}
			this.loadData();
		},
		//下拉刷新
		onPullDownRefresh() {
			this.loadData();
		},
		// #ifndef MP
		// 监听导航栏输入框点击事件
		onNavigationBarSearchInputClicked(e) {
			//跳转到搜索页面
			this.clickSearch();
		},
		//点击导航栏 buttons 时触发
		onNavigationBarButtonTap(e) {
			const index = e.index;
			if (index === 0) {
				this.$api.msg('点击了扫描');
			} else if (index === 1) {
				// #ifdef APP-PLUS
				const pages = getCurrentPages();
				const page = pages[pages.length - 1];
				const currentWebview = page.$getAppWebview();
				currentWebview.hideTitleNViewButtonRedDot({
					index
				});
				// #endif
				uni.navigateTo({
					url: '/pages/user/notice'
				});
			}
		},
		onReady(res) {
			var obj = this;
			uni.getSystemInfo({
				success: resu => {
					const query = uni.createSelectorQuery();
					query.select('.good-content').boundingClientRect();
					query.exec(function(res) {
						obj.height = resu.windowHeight - res[0].top + 'px';
					});
				},
				fail: res => {}
			});
		},
		// #endif
		// 计算页面剩余高度
		onReady(res) {
			var obj = this;
			uni.getSystemInfo({
				success: resu => {
					const query = uni.createSelectorQuery();
					query.select('.nav-swiper').boundingClientRect();
					query.exec(function(res) {
						obj.height = resu.windowHeight - res[0].top + 'px';
					});
				},
				fail: res => {}
			});
		},
		onReachBottom() {
			this.getZmtList()
		},
		methods: {
			// 获取项目宽度
			numClassWidht() {
				uni.createSelectorQuery()
					.select('.container')
					.fields(
						{
							size: true
						},
						data => {
							// 设置项目宽度
							this.itemWidht = Math.floor((data.width / 750) * 187.5);
						}
					)
					.exec();
			},
			navTo(url) {
				console.log(url)
				uni.navigateTo({
					url: url
				})
			},
			tabClass(ind) {
				// 保存当前选中的对象
				this.classIndex = ind;
				this.getZmtList('tab')
			},
			// 點擊搜索框
			clickSearch() {
				
			},
			// 监听图片加载完成
			onImageError(key, index) {
				this[key][index].image = '/static/error/errorImage.jpg';
			},
			// 请求载入数据
			async loadData() {
				loadIndexs({})
					.then(({
						data
					}) => {
						let goods = data.info;
						this.carouselList = data.banner;
						this.swiperLength = this.carouselList.length;
						this.menusList = data.menus;
						this.goodsList = goods.firstList; //最新商品
						this.bastList = goods.bastList; //精品推荐
						this.bastBanner = data.benefit; //促销单品
						this.$set(this, 'couponArray', data.couponList); //保存卡包券

						uni.stopPullDownRefresh();
					})
					.catch(e => {
						uni.stopPullDownRefresh();
					});
			},
			//轮播图切换修改背景色
			swiperChange(e) {
				const index = e.detail.current;
				this.swiperCurrent = index;
				this.titleNViewBackground = this.carouselList[index].background;
			},
			//详情页
			navToDetailPage(item) {
				let id = item.id;
				uni.navigateTo({
					url: '/pages/product/product?id=' + id
				});
			},

			// 轮播图跳转
			bannerNavToUrl(item) {
				// #ifdef H5
				if (item.wap_url.indexOf('http') > 0) {
					window.location.href = item.wap_url;
				}
				// #endif
				//测试数据没有写id，用title代替
				uni.navigateTo({
					url: item.wap_url
				});
			},
			// 获取企业分类
			getArtTypeList() {
				let obj = this
				getQyType().then(res => {
					console.log(res,'获取')
					// 获取头部nav
					let arr = res.data.map(e => {
						e.loadingType = 'more'
						e.page = 1
						e.limit = 10
						e.loaded = false
						e.list = []
						return e
					})
					obj.navList = obj.navList.concat(arr)
					console.log(obj.navList)
					obj.$nextTick(() => {
						obj.numClassWidht();
					});
					this.getZmtList()
				})
			},
			// 获取自媒体列表
			getZmtList(type) {
				let obj = this
				let index = obj.classIndex
				let navItem = obj.navList[index]
				if(type == 'tab' && navItem.loaded) {
					return
				}
				if(navItem.loadingType == 'loading' || navItem.loadingType == 'noMore') {
					return
				}
				navItem.loadingType = 'loading'
				let searchData = {}
				if(navItem.id == 0) {
					searchData = {
						page: navItem.page,
						rows: navItem.limit,
					}
				}else {
					searchData = {
						page: navItem.page,
						rows: navItem.limit,
						type: navItem.id
					}
				}
				getZmtList(searchData).then(res => {
					console.log(res)
					navItem.list = navItem.list.concat(res.data.list)
					navItem.page++
					if(res.data.list.length == navItem.limit) {
						navItem.loadingType = 'more'
					}else {
						navItem.loadingType = 'noMore'
					}
					navItem.loaded = true
				})
			},
			// 订阅
			dingYue(item) {
				let obj = this
				// is_sub 为1 时为关注状态
				if(item.is_sub == 1) {
					uni.showModal({
						title:'提示',
						content: '是否取消关注？',
						complete(e) {
							if(e.confirm) {
								// 取消关注
								dingYue({
									id:item.id
								}).then(res => {
									console.log(res)
									let s = obj.navList[obj.classIndex].list.indexOf(item);
									obj.navList[obj.classIndex].list[s].is_sub = 0
									obj.$api.msg('已取消关注')
								})
								
							}
						}
					})
				}else {
					// 关注
					dingYue({
						id:item.id
					}).then(res => {
						let s = obj.navList[obj.classIndex].list.indexOf(item);
						obj.navList[obj.classIndex].list[s].is_sub = 1
						obj.$api.msg('已关注')
					})
					
				}
				
			},
			//加入
			toJoin(item){
				if(!this.merId){
					this.navTo('/pages/user/joinMedia?id=' + item.id)
				}
				
			}
							
		}
	};
</script>

<style lang="scss">
	page {
		background: #f7f8f7;
	}
	.navbar {
		display: flex;
		height: 40px;
		padding: 0 5px;
		background: #fff;
		box-shadow: 0 1px 5px rgba(0, 0, 0, 0.06);
		position: relative;
		z-index: 10;

		.nav-item {
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100%;
			font-size: 15px;
			color: $font-color-dark;
			position: relative;

			&.current {
				color: #000;
				font-weight: bold;

				&:after {
					content: '';
					position: absolute;
					left: 50%;
					bottom: 0;
					transform: translateX(-50%);
					width: 44px;
					height: 0;
					border-bottom: 2px solid #E60012;
				}
			}
		}
	}

	.nav-swiper {
		background-color: #fff;
	}

	.top-swiper {
		position: relative;

		.banner-swiper {
			width: 750rpx;
			height: 390rpx;

			.swiper-img {
				display: block;
				width: 750rpx;
				height: 390rpx;
			}

			swiper-item {
				width: 750rpx;
				height: 390rpx;

			}

		}

		
	}
	// 头部时间段样式
	.class-box {
		white-space: nowrap;
		height: 40px;
		position: relative;
		background-color: #fff;
		.item {
			text-align: center;
			display: inline-block;
			color: $font-color-base;
			height: 100%;
			background-color: #ffffff;
			line-height: 1;
			.status {
				font-size:30rpx;
				margin: 0 auto;
				width: 60px;
				height: 100%;
				line-height: 40px;
				&.action {
					color: #000;
					font-weight: bold;
					position: relative;
					&:after {
						content: '';
						position: absolute;
						left: 50%;
						bottom:5px;
						transform: translateX(-50%);
						width: 33px;
						height: 0;
						border-bottom: 2px solid #E60012;
					}
				}
			}
		}
	}
	.dy-wrap {
		width: 707rpx;
		background: #fff;
		margin: auto;
		border-bottom: #E9E9E9 solid 1px;
		padding: 20rpx 0;
		.user-logo {
			flex-shrink: 0;
			height: 100rpx;
			width: 100rpx;
			border-radius: 50%;
			image {
				width: 100%;
				height: 100%;
				border-radius: 50%;
			}
		}
		.user-num {
			flex-grow: 1;
			padding-left: 10rpx;
			font-size: 24rpx;
			font-weight: 500;
			color: #999999;
			.user-name {
				font-size: 34rpx;
				font-weight: 600;
				color: #333333;
				padding-right: 20rpx;
				padding: 0 20rpx 20rpx 0;
			}
		}
		.dy-btn {
			flex-shrink: 0;
			text-align: center;
			width: 136rpx;
			line-height: 66rpx;
			
			border-radius: 10rpx;
			font-size: 28rpx;
			font-weight: 500;
			
			background: #E6645F;
			color: #fff;
		}
		.jr-btn {
			flex-shrink: 0;
			text-align: center;
			width: 136rpx;
			line-height: 66rpx;
			
			border-radius: 10rpx;
			font-size: 28rpx;
			font-weight: 500;
			margin-top: 20rpx;
			
			background: #E6645F;
			color: #fff;
		}
		.flex_direction{
			flex-direction: column;
			justify-content: center;
		}
		.dying {
			
			color: #999999;
			background: #E9E9E9;
		}
	}
	.input-box {
		width: 100%;
		padding: 25rpx;
		z-index: 999;
		height: 44px;
	
		.iconsearch {
			font-size: 50rpx;
		}
	
		.input-content {
			border-radius: 99rpx;
			flex-grow: 1;
			padding: 10rpx 30rpx;
			background-color: rgba(255, 255, 255, 0.7);
			border: 1px solid #000000;
			.input {
				flex-grow: 1;
	
				input {
					font-size: $font-lg;
				}
			}
		}
	
		.input-button {
			padding-left: 20rpx;
			font-size: $font-lg;
			height: 100%;
		}
	}
	.Search-box {
		padding-left: 20rpx;
		padding-right: 20rpx;
		height: 100rpx;
		background: #ffffff;
		display: flex;
		justify-content: center;
		align-items: center;

		.Search-box-sort {
			font-size: 30rpx;
	
			font-weight: 500;
			color: rgba(102, 102, 102, 1);
	
			.sort-text {
				width: 57rpx;
				height: 29rpx;
				font-size: 30rpx;
				font-weight: 500;
				color: rgba(51, 51, 51, 1);
				line-height: 58rpx;
				margin-right: 19rpx;
			}
			.sort-img {
				width: 21rpx;
				height: 11rpx;
				margin-bottom: 4rpx;
			}
		}
	
		.Search-box-size {
			width: 700rpx;
			height: 65rpx;
			border-radius: 32rpx;
			background-color: #f1f1f1;
			padding-left: 36rpx;
			display: flex;
			align-items: center;
	
			.box-img {
				height: 32rpx;
				width: 32rpx;
				margin-right: 16rpx;
			}
			.box-word {
				width: 100%;
				font-size: 22rpx;
				font-weight: 500;
				color: rgba(205, 203, 203, 1);
				line-height: 55rpx;
			}
		}
	}
</style>