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-uni ref="mescrollRef" :top="120" :up="upOption" :down="downOption" @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="wd-list">
				<view v-for="(item,index) in circleList1" :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="aspectFill" class="img"></image>
						</view>
						<view class="right">
							<view class="top">{{item.circleName}}（{{item.cardNum}}人）</view>
							<view style='flex-wrap: wrap;' class="bottom flex">
								<view v-for="item1 in item.circleLabelArray" class="text">
									{{item1}}
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<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="tj-list">
				<view 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="aspectFill" class="img"></image>
						</view>
						<view class="right">
							<view class="top">{{item.circleName}}（{{item.cardNum}}人）</view>
							<view style='flex-wrap: wrap;' class="bottom flex">
								<view v-for="item1 in item.circleLabelArray" class="text">
									{{item1}}
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</mescroll-uni>
		<image src="../../static/imgs/cirlce/add.png" mode="widthFix" class="add" @click="toCreateCircle"></image>
		<u-toast ref="uToast"></u-toast>
		<!-- #ifdef MP-WEIXIN -->
		<u-modal :show="showAuthorizePhone" :showConfirmButton="false">
			<view class="slot-content">
				<view class="auth-card">
					<view class="img">
						<img class="avatar-img" src="@/static/imgs/logo.png" mode="widthFix">
					</view>
					<view class="content">手机登录后才能查看名片哦~</view>
				</view>
				<view class="auth-btncard">
					<view class="btn-unok">
						<u-button :customStyle="customStyleUnOk" @click="showAuthorizePhone=false" :plain="true">
							拒绝</u-button>
					</view>
					<view class="btn-ok">
						<u-button :customStyle="customStyleOk" open-type="getPhoneNumber"
							@getphonenumber="getPhoneNumber"> 立即登录</u-button>
					</view>
				</view>
			</view>
		</u-modal>
		<u-modal :show="showAuthorizeUser" :showConfirmButton="false">
			<view class="slot-content">
				<view class="auth-card">
					<view class="img">
						<img class="avatar-img" src="/static/imgs/logo.png" mode="widthFix">
					</view>
					<view class="content">邀请您补全个人信息<br></br>（昵称、头像）</view>
					<view style="margin-left: 100rpx;margin-right: 100rpx">
						<u-form :model="userInfo" ref="uForm">
							<u-form-item label="头像">
								<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar"
									slot="right">
									<image class="avatar"
										:src="userInfo.head?userInfo.head:'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0'">
									</image>
								</button>
							</u-form-item>
							<u-form-item label="昵称">
								<u-input inputAlign='right' v-model="userInfo.nickname" class="weui-input"
									@blur="userNameInput" placeholder="请输入昵称" border="false" />
								<!-- <input type="nickname" :value="userInfo.nickname" class="weui-input" @blur="userNameInput" placeholder="请输入昵称"/> -->
							</u-form-item>
						</u-form>
					</view>
				</view>
				<view class="auth-btncard">
					<view class="btn-unok"><u-button :customStyle="customStyleUnOk" @click="authUser(0)">
							拒绝</u-button>
					</view>
					<view class="btn-ok">
						<u-button :customStyle="customStyleOk" @click="authUser(1)"> 允许</u-button>
					</view>
				</view>
			</view>
		</u-modal>

		<!-- #endif -->
	</view>
</template>

<script>
	var that;
	import {
		pathToBase64,
		base64ToPath
	} from 'image-tools'
	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 {
				showAuthorizeUser: false,
				showAuthorizePhone: false,
				customStyleUnOk: {
					marginTop: '20rpx',
					color: '#18254C',
					border: '2px solid #18254C',
					"border-radius": "10px",
					fontSize: "32rpx"
				},
				customStyleOk: {
					marginTop: '20rpx',
					color: '#fff',
					border: '2px solid #18254C',
					"border-radius": "10px",
					fontSize: "32rpx",
					background: "#18254C"
				},
				searchVal: '',
				circleList: [],
				userInfo: {},
				canReset: false,
				cardList: [],
				circleList1: [],
				downOption: {
					auto: false,
					textColor: '#bbb'
				},
				upOption: {
					page: {
						size: 10 // 每页数据的数量,默认10
					},
					auto: false,
					noMoreSize: 1,
					textNoMore: '没有更多了~',
					textColor: '#bbb'
				}
			};
		},
		onLoad() {
			that = this
			if (uni.getStorageSync("userInfo").phone) {
				this.userInfo = uni.getStorageSync("userInfo")
				this.$nextTick(function() {
					that.mescroll.resetUpScroll()
				});
				this.$request.baseRequest('admin.unimall.cardExchangeInfo', 'list', {
					receiveId: this.userInfo.id,
					status: 1
				}, failres => {
					console.log('res+++++', failres.errmsg)
					uni.showToast({
						icon: "none",
						title: failres.errmsg,
						duration: 3000
					});

				}).then(res => {
					this.cardList = res.data.items.filter((item) => {
						return item.status == 0
					})
					console.log(this.cardList)
				})

			}
		},
		onShow() {
			if (uni.getStorageSync("userInfo").phone) {
				this.userInfo = uni.getStorageSync("userInfo")
				this.$request.baseRequest('admin.unimall.cardExchangeInfo', 'list', {
					receiveId: this.userInfo.id,
					status: 1
				}, failres => {
					console.log('res+++++', failres.errmsg)
					uni.showToast({
						icon: "none",
						title: failres.errmsg,
						duration: 3000
					});

				}).then(res => {
					this.searchVal = uni.getStorageSync("cirlce_search_val") ? uni.getStorageSync(
						"cirlce_search_val") : ''
					if (this.searchVal) this.mescroll.resetUpScroll();
				})
			
			} else {
				this.showAuthorizePhone = true
			}

		},
		methods: {
			//获取昵称输入内容
			userNameInput(e) {
				this.userInfo.nickname = e.detail.value
			},
			async onChooseAvatar(e) {
				this.$set(this.userInfo, "head", await this.toBase64(e.detail.avatarUrl))
			},
			toBase64(url) {
				return new Promise(resolve => {
					pathToBase64(url).then(path => {
						resolve(path);
					}).catch(error => {
						console.log(error)
					})
				})
			},
			async authUser(type) {
				//同步信息，没有头像和昵称自动生成
				this.userInfo =  await this.$request.syncInfo(this.userInfo)
				if(this.userInfo.openId) {
					uni.setStorageSync("userInfo", that.userInfo)
					that.showAuthorizeUser = false
					that.mescroll.resetUpScroll()
				}
			},
			
			downCallback() {
				if (uni.getStorageSync("userInfo").phone) {
					this.mescroll.resetUpScroll()
				} else {
					this.mescroll.endBySize(0, 0)
					this.showAuthorizePhone = true
				}
			
			},
			async getPhoneNumber(e) {
				that.userInfo = await this.$request.wxlogin()
				this.$nextTick(function() {
					that.userInfo.phone = that.$request.getPhone(e, that.userInfo)
					that.showAuthorizePhone = false
					that.showAuthorizeUser = true
				});

			},
			delSearchVal() {
				this.searchVal = ""
				uni.removeStorageSync('cirlce_search_val')
				this.mescroll.resetUpScroll()
			},
			toChangeCard() {
				if (this.userInfo.phone) {
					uni.navigateTo({
						url: "/pageA/circle/changeCard"
					})
				} else {
					this.showAuthorizePhone = true
				}
				
			},
			toCreateCircle() {
				if (this.userInfo.phone) {
					uni.navigateTo({
						url: "/pageA/circle/createCirclce"
					})
				} else {
					this.showAuthorizePhone = true
				}
			},
			micOpen: function() {
				this.$refs.asr.show();
			},
			search() {
				if (this.userInfo.phone) {
					uni.navigateTo({
						url: "/pageA/circle/search"
					})
				} else {
					this.showAuthorizePhone = true
				}
				
			},
			toDetail(val) {
				uni.navigateTo({
					url: "/pageA/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)
					uni.showToast({
						icon: "none",
						title: failres.errmsg,
						duration: 3000
					});
					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)
					//追加新数据
					for (let i = 0; i < this.circleList.length; i++) {
						if (this.circleList[i].circleLabel) {
							if (this.circleList[i].circleLabel.split(',').length >= 3) {
								var arr = this.circleList[i].circleLabel.split(',')
								console.log(arr)
								this.circleList[i].circleLabelArray = arr.filter((item, index) => {
									return index <= 2
								})
							} else {
								this.circleList[i].circleLabelArray = this.circleList[i].circleLabel.split(',')
							}
						}
					}

					if (page.num == 1) this.circleList1 = [];
					this.circleList = []; //如果是第一页需手动置空列表
					var tjarr = curPageData.filter((item) => {
						return item.addedFlag == 0
					})
					var wdarr = curPageData.filter((item) => {
						return item.addedFlag == 1
					})
					this.circleList1 = this.circleList1.concat(wdarr);
					this.circleList = this.circleList.concat(tjarr);

				})
			},
			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;
			height: auto;
			margin-left: 40rpx;
		}

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

		.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: 0px 10rpx 10rpx 0;
				}
			}
		}
	}

	.add {
		width: 84rpx;
		height: auto;
		position: fixed;
		bottom: 26rpx;
		right: 26rpx;
		height: auto;
		z-index: 999;
	}

	.wd-list,
	.tj-list {
		border-radius: 20rpx;
		background: #fff;
		margin: 0 34rpx;
	}

	.slot-content {
		width: 100%;
	}

	.auth-btncard {
		display: flex !important;
		justify-content: space-between !important;

		.btn-unok {
			width: 40%;
		}

		.btn-ok {
			width: 40%;
		}
	}

	.auth-card {
		text-align: center;

		.avatar-img {
			width: 250rpx;
		}

		.title {
			font-size: 20rpx;
		}

		.content {
			font-size: 32rpx;
			font-weight: bold;
			color: #1A1A1A;
			margin-bottom: 30rpx;
		}
	}

	.avatar-wrapper {
		color: #333 !important;
		border: none !important;
		border-radius: 0 !important;
		background-color: transparent !important;
		padding: 0;
	}

	.avatar-wrapper::after {
		border: none !important;
	}

	.avatar {
		width: 100rpx;
		height: 100rpx;
		overflow: hidden;
		border-radius: 100%;
	}

	/deep/.u-popup__content {
		border-radius: 20rpx !important;
	}
</style>