businessCard/xiaochengxu/pages/circle/circle.vue

<template>
	<view class="content">
		<view class="content1 flex">
			<!-- <uni-search-bar @confirm="search" v-model="searchValue" @blur="blur" @focus="focus" @input="input"
				@cancel="cancel" @clear="clear" cancelButton="false" placeholder="搜索圈子">
			</uni-search-bar> -->
			<view class="search flex flex-between" @click="search">
				<view class="left flex">
					<uni-icons type="search" size="24"></uni-icons>
					<text class="search-val"> {{searchVal?searchVal:'搜索名片'}}</text>
				</view>
				<view class="right">
					<uni-icons type="mic" size="24" @click.stop="micOpen"></uni-icons>
				</view>
			</view>
			<view class="right flex relative">
				<uni-icons type="personadd-filled" size="30"></uni-icons>
				<u-badge :isDot="true" type="error" class="point"></u-badge>
			</view>
		</view>
		<view class="content2 flex flex-between">
			<view class="left">
				我得圈子
			</view>
			<view class="right">
				<uni-icons type="personadd-filled" size="30" @click="toCreateCircle"></uni-icons>
			</view>
		</view>
		<!-- <mescroll-body ref="mescrollRef" @init="mescrollInit" @up="upCallback" @down="downCallback">
					<view class="content3" v-for="(item,index) in circleList">
			
					</view>
				</mescroll-body> -->
		<view class="content3 flex">
			<view class="row-tiem" @click="toDetail">
				<view class="left">
					<image src="../../static/logo.png" mode="widthFix" class="img"></image>
				</view>
				<view class="right">
					<view class="top">北京技术（155）</view>
					<view class="bottom">
						<span>粮食贸易</span>
						<span>粮食贸易</span>
						<span>粮食贸易</span>
						<span>粮食贸易</span>
					</view>
				</view>
			</view>

		</view>
	</view>
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		mixins: [MescrollMixin], // 使用mixin
		computed: {
			...mapState(['hasLogin'])
		},
		data() {
			return {
					searchVal: '',
				searchValue: '',
				circleList: [],
				userInfo: {},
			};
		},
		onShow() {
			this.searchVal = uni.getStorageSync("cirlce_search_val") ? uni.getStorageSync("cirlce_search_val") : ''
			// this.$nextTick(function() {
			// 	this.canReset && this.mescroll.resetUpScroll() // 重置列表数据为第一页  
			// 	this.canReset && this.mescroll.scrollTo(0, 0) // 重置列表数据为第一页时,建议把滚动条也重置到顶部,避免无法再次翻页的问题  
			// 	this.canReset = true // 过滤第一次的onShow事件,避免初始化界面时重复触发upCallback, 无需配置auto:false
			// });
			// if (this.hasLogin || uni.getStorageSync("userInfo").username) {
			// 	this.userInfo = uni.getStorageSync("userInfo")
			// 	this.isLogin = true
			// } else {
			// 	uni.navigateTo({
			// 		url: "/pages/login/login"
			// 	})
			// }
		},
		methods: {
			toCreateCircle(){
				uni.navigateTo({
					url: "/pages/circle/createCirclce"
				})
			},
			micOpen: function() {
				this.$refs.asr.show();
			},
			search() {
				uni.navigateTo({
					url: "/pages/circle/search"
				})
			},
			toDetail(val) {
				uni.navigateTo({
					url: "/pages/circle/detail"
				})
			},
			upCallback(page) {
				uni.showLoading({
					title: '数据加载中'
				})
				this.$request.baseRequest('pincheCarSharingApp', 'list', {
					remark2: this.route,
					carpoolingType: this.type,
					companyId: 1,
					pageNum: page.num,
					pageSize: page.size,
				}, failres => {
					console.log('res+++++', failres.errmsg)
					this.$refs.uToast.show({
						type: 'error',
						message: failres.errmsg,
					})
					uni.hideLoading()
				}).then(res => {
					// if (res.errno == 200) {
					uni.hideLoading()
					console.log(11)
					let curPageData = res.data.items;
					let totalPage = res.data.total;
					let curPageLen = curPageData.length;
					this.mescroll.endByPage(curPageLen, totalPage);
					console.log(res.data)
					// this.makeData(res.data)
					if (page.num == 1) this.infoList = []; //如果是第一页需手动置空列表
					this.infoList = this.infoList.concat(curPageData); //追加新数据
					// }
				})
			},
			input(res) {
				console.log('----input:', res)
			},
			clear(res) {
				uni.showToast({
					title: 'clear事件，清除值为：' + res.value,
					icon: 'none'
				})
			},
			blur(res) {
				uni.showToast({
					title: 'blur事件，输入值为：' + res.value,
					icon: 'none'
				})
			},
			focus(e) {
				uni.showToast({
					title: 'focus事件，输出值为：' + e.value,
					icon: 'none'
				})
			},
			cancel(res) {
				uni.showToast({
					title: '点击取消，输入值为：' + res.value,
					icon: 'none'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content1 {
		.right {
			/deep/.u-badge {
				position: absolute;
				top: 0;
				right: 6rpx;
			}
		}
	}

	.content3 {
		.img {
			width: 100rpx;
		}

		.right {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
		}
	}
</style>