businessCard/xiaochengxu/pages/circle/circle.vue

<template>
	<view class="content">
		<view class="content1 flex">
			<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>
		<mescroll-body ref="mescrollRef" @init="mescrollInit" @up="upCallback" @down="downCallback">
			<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>
			<view class="" v-for="(item,index) in circleList" :key="index">
				<view class="" v-if="item.name">
					{{item.name}}
				</view>
				<view class="content3 flex" v-if="!item.name">
					<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">{{item.circleName}}（{{item.cardNum}}）</view>
							<view class="bottom">
								<span v-for="item1 in item.circleLabel.split(',')">
									{{item1}}
								</span>
							</view>
						</view>
					</view>
				</view>
			</view>
		</mescroll-body>
		<u-toast ref="uToast"></u-toast>
	</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: '',
				circleList: [],
				userInfo: {},
				firstTitle: false
			};
		},
		onShow() {
			this.searchVal = uni.getStorageSync("cirlce_search_val") ? uni.getStorageSync("cirlce_search_val") : ''
			this.userInfo = uni.getStorageSync("userInfo")
			this.$nextTick(function() {
				this.canReset && this.mescroll.resetUpScroll() // 重置列表数据为第一页  
				this.canReset && this.mescroll.scrollTo(0, 0) // 重置列表数据为第一页时,建议把滚动条也重置到顶部,避免无法再次翻页的问题  
				this.canReset = true // 过滤第一次的onShow事件,避免初始化界面时重复触发upCallback, 无需配置auto:false
			});
		},
		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('admin.unimall.circleManagementInfo', 'list', {
					commonId: this.userInfo.id,
					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 => {
					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.circleList = []; //如果是第一页需手动置空列表
					this.circleList = this.circleList.concat(curPageData); //追加新数据
					for (let i = 0; i < this.circleList.length; i++) {
						if (!this.firstTitle && this.circleList[i].addedFlag == 0) {
							this.firstTitle = true
							if (i == 0) {
								this.circleList.unshift({
									name: '推荐圈子'
								});
							} else {
								this.circleList.splice(i - 1, 0, {
									name: '推荐圈子'
								})
							}
							
							console.log(this.circleList)
							return
						}
					}
				})
			},
			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>