gzh_chuanyuan/pages/shijie/index.vue

<template>
	<view class="circle">
		<view class="circle-hd" v-if="isShow == true">
			<view class="a">
				<view class="item" :class="selectIndex == 1?'item-on':''" @click="tabItem(1)">发现</view>
				<view class="item" :class="selectIndex == 2?'item-on':''" @click="tabItem(2)">我的</view>
			</view>
			<view class="b" @click="toRelease()">
				<image src="/static/icon-upload.png"></image>新增
			</view>
		</view>
		<view class="circle-bd" v-if="isShow == true">
			<view class="item" v-for="(i,index) in list" :key="index">
				<view class="a">
					<view class="l">
						<image :src="i.avatar?i.avatar:'/static/avater.png'"></image>
						<view class="n">{{i.nickname}}</view>
						<view class="t">{{i.created_at}}</view>
					</view>
					<view class="r" v-if="selectIndex == 2" @click="toDel(index)">
						<image src="/static/icon-del.png"></image>删除
					</view>
				</view>
				<view class="b">
					{{i.title}}
				</view>
				<view class="c">
					<image v-for="(o,i) in i.image" :key="i" :src="o"  @click="previewImage(o,i.image)"></image>
				</view>
			</view>
		</view>
		<view class="empty" style="margin-top: 260rpx;" v-if="list.length == 0">
			<u-empty mode="data" text="暂无相关信息">
			</u-empty>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				selectIndex: 1,
				list: [],
				page: 1,
				isShow: false,
				images: []
			};
		},
		onReady() {
			const that = this;
			
			uni.$on("reloadQuanzi",function(res){
				that.page = 1;
				that.list = [];
				that.getCircleList();
			})
			this.getConfig();
		},
		onPullDownRefresh() {
			this.page = 1;
			this.list = [];
			this.getConfig();
			setTimeout(() => {
				uni.stopPullDownRefresh();
			}, 1000)
		},
		methods: {
			//图片预览
			previewImage(i,images){
				this.images = images
				uni.previewImage({
					current: i,
					urls: this.images
				})
			},
			tabItem(i) {
				if(i == 2){
					if(!uni.getStorageSync("userToken")){
						uni.navigateTo({
							url: "/pages/login/login"
						})
						return ;
					}
				}
				this.selectIndex = i;
				this.page = 1;
				this.list = [];
				this.getCircleList();
			},
			toDel(index){
				const that = this;
				uni.showModal({
					title: "温馨提示",
					content: "确定要删除吗？",
					success(res) {
						if(res.confirm) {
							that.delCircle(index)
						}
					}
				})
			},
			toRelease() {
				if(!uni.getStorageSync("userToken")){
					uni.navigateTo({
						url: "/pages/login/login"
					})
					return ;
				}
				uni.navigateTo({
					url: "/pages/shijie/edit"
				})
			},
			//删除圈子
			async delCircle(index) {
				const { code, msg } = await this.$api.delCircle({
					circle_id: this.list[index].id
				})
				if(code == 200){
					uni.showToast({
						title: "删除成功"
					})
					this.list.splice(index,1);
				}else{
					uni.showToast({
						icon: "none",
						title: msg
					})
				}
			},
			//开关
			async getConfig() {
				const { code, data, msg } = await this.$api.getConfigIndex({})
				if (code == 200) {
					this.isShow = data.is_open;
					if(this.isShow){
						this.getCircleList();
					}
				}
			},
			//获取圈子列表
			async getCircleList() {
				uni.showLoading({
					title: "加载中"
				})
				const { code, data, msg } = await this.$api.circleList({
					is_me: this.selectIndex==2?1:0,
					page: this.page
				})
				if (code == 200) {
					uni.hideLoading()
					this.list = this.arrayUnique(this.list.concat(data.list),'id');
					this.total = data.total;
				} else {
					uni.hideLoading()
					uni.showToast({
						icon: "none",
						title: msg
					})
				}
			},
			//数组对象去重
			arrayUnique(arr, name) {
			    var hash = {};
			    return arr.reduce(function (item, next) {
			        hash[next[name]]
			            ? ""
			            : (hash[next[name]] = true && item.push(next));
			        return item;
			    }, []);
			},
		},
		onReachBottom() {
			if(this.list.length <= this.total){
				this.page ++
				this.getCircleList();
			}
		}
	}
</script>

<style lang="scss" scoped>
	.circle {
		width: 100%;
		padding: 0 25rpx 25rpx;
		overflow: hidden;
		box-sizing: border-box;

		&-hd {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.a {
				display: flex;
				align-items: center;

				.item {
					padding: 20rpx 0;
					width: 100rpx;
					text-align: center;
					font-size: 30rpx;
					font-weight: 400;
					color: #666666;
					position: relative;

					&-on {
						color: #323232;
						font-weight: 500;
						font-size: 34rpx;

						&::after {
							content: "";
							width: 52rpx;
							height: 10rpx;
							background: #2080F9;
							border-radius: 10rpx;
							position: absolute;
							left: 50%;
							bottom: 0;
							z-index: 2;
							margin-left: -26rpx;
						}
					}
				}
			}

			.b {
				display: flex;
				align-items: center;
				font-size: 30rpx;
				font-weight: 400;
				color: #666666;
				image {
					width: 44rpx;
					height: 44rpx;
					margin-right: 10rpx;
				}
			}
		}

		&-bd {
			overflow: hidden;

			.item {
				background-color: #fff;
				border-radius: 20rpx;
				margin-top: 20rpx;
				overflow: hidden;
				padding: 0 20rpx 20rpx;
				box-sizing: border-box;

				.a {
					display: flex;
					align-items: flex-start;
					justify-content: space-between;
					padding: 30rpx 0;

					.l {
						flex: 1;

						image {
							width: 80rpx;
							height: 80rpx;
							float: left;
							margin-right: 25rpx;
						}

						.n {
							font-size: 30rpx;
							font-weight: 400;
							color: #222222;
						}

						.t {
							margin-top: 10rpx;
							font-size: 24rpx;
							font-weight: 400;
							color: #999999;
						}
					}

					.r {
						font-size: 24rpx;
						color: #F01B1B;
						display: flex;
						align-items: center;

						image {
							width: 45rpx;
							height: 45rpx;
							margin-right: 10rpx;
						}
					}
				}

				.b {
					overflow: hidden;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					font-size: 28rpx;
					font-weight: 400;
					color: #222222;
					line-height: 42rpx;
				}

				.c {
					display: flex;
					width: 110%;
					flex-wrap: wrap;
					image {
						width: 210rpx;
						height: 210rpx;
						border-radius: 10rpx;
						margin-top: 20rpx;
						margin-right: 18rpx;
					}
				}
			}
		}
	}
</style>