businessCard/xiaochengxu/pages/circle/circle.vue

<template>
	<view class="content">
		<view class="content1 flex flex-between">
			<view class="search flex">
				<view class="left flex" @click="search">
					<image src="../../static/imgs/cirlce/search.png" mode="widthFix" class="search-img"></image>
					<text class="search-val"> {{searchVal?searchVal:'搜索圈子'}}</text>
					<image class='search-del' style='width:32rpx;height:32rpx;' v-if="searchVal" @click.native.stop="delSearchVal" src="../../static/imgs/card/searchdel.png" mode="widthFix" ></image>
				</view>
			</view>
			<view class="right relative">
				<image src="../../static/imgs/cirlce/hy.png" mode="widthFix" class="hy-search-img"
					@click="toChangeCard"></image>
				<u-badge v-if='cardList.length>0' :isDot="true" type="error" class="point position"></u-badge>
			</view>
		</view>
		<mescroll-body ref="mescrollRef" @init="mescrollInit" @up="upCallback" @down="downCallback">
			<view class="content2 flex flex-between">

				<view class="left flex title">
					<view class="line"></view>
					<view class="text-title">
						我的圈子
					</view>
				</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="flex title" v-if="item.name">
					<view class="line"></view>
					<view class="text-title">
						{{item.name}}
					</view>
				</view>
				<view class="row-tiem flex" v-if="!item.name" @click="toDetail(item.id)">
					<view class="left">
						<image :src="item.circleHead?item.circleHead:'../../static/imgs/mySet/ewm.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(',')" class="text">
								{{item1}}
							</span>
						</view>
					</view>
				</view>
			</view>
		</mescroll-body>
		<image src="../../static/imgs/cirlce/add.png" mode="widthFix" class="add" @click="toCreateCircle"></image>
		<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: {},
				canReset: false,
				cardList:[],
			};
		},
		onLoad() {
		},
		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
			});
			this.searchVal = uni.getStorageSync("cirlce_search_val") ? uni.getStorageSync("cirlce_search_val") : ''
			this.$request.baseRequest('admin.unimall.cardExchangeInfo', 'list', {
				receiveId:this.userInfo.id,
				status:1
			}, failres => {
				console.log('res+++++', failres.errmsg)
				this.$refs.uToast.show({
					type: 'error',
					message: failres.errmsg,
				})
				uni.hideLoading()
			}).then(res => {
				uni.hideLoading()
				this.cardList = res.data.items.filter((item)=>{return item.status==0})
				console.log(this.cardList)
			})
		},
		methods: {
			delSearchVal() {
				this.searchVal = ""
				uni.removeStorageSync('cirlce_search_val')
				this.mescroll.resetUpScroll()
			},
			toChangeCard() {
				uni.navigateTo({
					url: "/pages/circle/changeCard"
				})
			},
			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?val=" + val
				})
			},
			upCallback(page) {
				uni.showLoading({
					title: '数据加载中'
				})
				let _data = {
					commonId: this.userInfo.id,
					page: page.num,
					limit: page.size,
					status:1
				}
				if (this.searchVal) {
					_data.circleName = this.searchVal
				}
				this.$request.baseRequest('admin.unimall.circleManagementInfo', 'list', _data, 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.circleList[i].addedFlag == 0) {
							if (i == 0) {
								this.circleList.unshift({
									name: '推荐圈子'
								});
							} else {
								this.circleList.splice(i, 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 {
		margin: 50rpx 25rpx 14rpx 25rpx;

		.search {
			width: 100%;

			.left {
				background: #F0F0F0;
				border-radius: 38rpx;
				padding: 18rpx;
				width: 100%;
				position:relative;
			}

			.search-val {
				color: #B3B3B3;
			}
			.search-del{
				position:absolute;
				right:10px;
			}
		}

		.hy-search-img {
			width: 38rpx;
			margin-left: 40rpx;
		}

		.search-img {
			width: 38rpx;
			margin-right: 40rpx;
		}

		.right {
			/deep/.u-badge {
				position: absolute;
				top: 0;
				right: -10rpx;
			}
		}
	}

	.line {
		width: 8rpx;
		height: 34rpx;
		background: #112253;
		border-radius: 3px;
		margin: 20rpx;
	}

	.title {
		margin: 20rpx 0;
	}

	.text-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #1A1A1A;
	}

	.row-tiem {
		background: #fff;
		padding: 24rpx;
		margin: 0 34rpx;
		align-items: unset;

		.img {
			width: 122rpx;
			height: 122rpx;
			border-radius: 10px;
			margin-right: 30rpx;

		}

		.right {
			display: flex;
			flex-direction: column;
			justify-content: space-evenly;

			.top {
				font-size: 32rpx;
				color: #1A1A1A;
				font-family: PingFang SC;
				font-weight: bold;
			}

			.bottom {
				margin-top: 10rpx;
				.text {
					background: #FAFAFA;
					border-radius: 10rpx;
					font-size: 26rpx;
					font-weight: 700;
					color: #666666;
					padding: 10rpx 20rpx;
					margin-right: 10rpx;
				}
			}
		}
	}

	.add{
		width:84rpx;
		position: fixed;
		bottom: 26rpx;
		right: 26rpx;
	}
</style>