创建圈子

xiaochengxu/pages/circle/circle.vue

@@ -1,9 +1,6 @@
 <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>
@@ -18,37 +15,61 @@
 				<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>
+		<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>
-		<!-- <mescroll-body ref="mescrollRef" @init="mescrollInit" @up="upCallback" @down="downCallback">
-					<view class="content3" v-for="(item,index) in circleList">
-			
+			<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>
-				</mescroll-body> -->
-		<view class="content3 flex">
-			<view class="row-tiem" @click="toDetail">
+				</view>
+			</view>
+			<!-- 		<view class="content2 flex flex-between">
 				<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>
+					<uni-icons type="personadd-filled" size="30" @click="toCreateCircle"></uni-icons>
 				</view>
 			</view>
-
-		</view>
-	</view>
+			<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> -->
+		</mescroll-body>
+		<u-toast ref="uToast"></u-toast>
 	</view>
 </template>
 
@@ -65,30 +86,23 @@
 		},
 		data() {
 			return {
-					searchVal: '',
-				searchValue: '',
+				searchVal: '',
 				circleList: [],
 				userInfo: {},
+				firstTitle: false
 			};
 		},
 		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"
-			// 	})
-			// }
+			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(){
+			toCreateCircle() {
 				uni.navigateTo({
 					url: "/pages/circle/createCirclce"
 				})
@@ -110,10 +124,8 @@
 				uni.showLoading({
 					title: '数据加载中'
 				})
-				this.$request.baseRequest('pincheCarSharingApp', 'list', {
-					remark2: this.route,
-					carpoolingType: this.type,
-					companyId: 1,
+				this.$request.baseRequest('admin.unimall.circleManagementInfo', 'list', {
+					commonId: this.userInfo.id,
 					pageNum: page.num,
 					pageSize: page.size,
 				}, failres => {
@@ -124,7 +136,6 @@
 					})
 					uni.hideLoading()
 				}).then(res => {
-					// if (res.errno == 200) {
 					uni.hideLoading()
 					console.log(11)
 					let curPageData = res.data.items;
@@ -133,9 +144,25 @@
 					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); //追加新数据
-					// }
+					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) {

xiaochengxu/pages/circle/createCirclce.vue

@@ -4,7 +4,7 @@
 		<uni-forms :modelValue="formData">
 			<view class="content1">
 				<uni-forms-item label="圈子名称" name="name">
-					<uni-easyinput type="text" v-model="formData.name" placeholder="输入圈子名称" />
+					<uni-easyinput type="text" v-model="formData.circleName" placeholder="输入圈子名称" />
 				</uni-forms-item>
 			</view>
 			<view class="content2">
@@ -12,29 +12,119 @@
 					圈子标签
 				</view>
 				<view class="">
-					<uni-forms-item label="标签1" name="name">
+					<uni-forms-item :label="'标签'+(index+1)" name="labelName" v-for="(item,index) in labelList"
+						:key="index">
 						<view class="flex">
-							<uni-easyinput type="text" v-model="formData.name" placeholder="输入圈子标签,2-4个字" />
-							<uni-icons type="plus-filled"></uni-icons>
-							<uni-icons type="minus-filled"></uni-icons>
+							<uni-easyinput type="text" v-model="item.labelName" placeholder="输入圈子标签,2-4个字" />
+							<uni-icons type="plus-filled" @click="add(item)" size="40"></uni-icons>
+							<uni-icons type="minus-filled" @click="subtract(index)" size="40"></uni-icons>
 						</view>
-						
 					</uni-forms-item>
 				</view>
 			</view>
-			<view class="">
-				<button type="primary">提交</button>
-			</view>
 		</uni-forms>
+
+		<view class="">
+			<button type="primary" @click="submit">提交</button>
+		</view>
+		<u-toast ref="uToast"></u-toast>
 	</view>
 </template>
 
 <script>
+	var that;
 	export default {
 		data() {
 			return {
-				formData: {}
+				labelList: [{
+						labelName: ''
+					},
+					{
+						labelName: ''
+					}
+				],
+				formData: {
+					circleName: '',
+					circleLabel: [],
+					commonId: ''
+
+				}
 			};
+		},
+		onLoad() {
+			that = this
+			this.userInfo = uni.getStorageSync("userInfo")
+			this.formData.commonId = this.userInfo.id
+		},
+		methods: {
+			submit() {
+				this.formData.circleLabel = []
+				if (!this.formData.circleName) {
+					this.$refs.uToast.show({
+						type: 'error',
+						message: '圈子名称不能为空！',
+					})
+					return
+				}
+				for (let i = 0; i < this.labelList.length; i++) {
+					if (!this.labelList[i].labelName) {
+						this.$refs.uToast.show({
+							type: 'error',
+							message: '标签内容不能为空！',
+						})
+						return
+					}
+					if (this.labelList[i].labelName.length > 4 || this.labelList[i].labelName.length < 2) {
+						this.$refs.uToast.show({
+							type: 'error',
+							message: '标签内容2-4个字！',
+						})
+						return
+					}
+					this.formData.circleLabel.push(this.labelList[i].labelName)
+				}
+				this.formData.circleLabel = this.formData.circleLabel.toString()
+
+				this.$request.baseRequest('admin.unimall.circleManagementInfo', 'add', {
+					circleManagementInfo: JSON.stringify(this.formData)
+				}, failres => {
+					this.$refs.uToast.show({
+						type: 'error',
+						message: failres.errmsg,
+					})
+					uni.hideLoading()
+				}).then(res => {
+					this.$refs.uToast.show({
+						type: 'success',
+						message: '提交成功！',
+					})
+					setTimeout(() => {
+						uni.navigateBack()
+					}, 500)
+				})
+			},
+			add() {
+				if (this.labelList.length > 3) {
+					this.$refs.uToast.show({
+						type: 'error',
+						message: '“标签数量2-4个！',
+					})
+					return
+				}
+				this.labelList.push({
+					labelName: ''
+				})
+			},
+			subtract(index) {
+				if (this.labelList.length < 3) {
+					this.$refs.uToast.show({
+						type: 'error',
+						message: '“标签数量2-4个！',
+					})
+					return
+				}
+				this.labelList.splice(index, 1)
+			},
 		}
 	}
 </script>

xiaochengxu/pages/index/index.vue

@@ -9,6 +9,7 @@
 
 			</view>
 		</mescroll-body> -->
+		<u-toast ref="uToast"></u-toast>
 	</view>
 </template>
 
@@ -32,6 +33,10 @@
 			}
 		},
 		onShow() {
+			// this.$refs.uToast.show({
+			// 	type: 'success',
+			// 	message: '提交成功！',
+			// })
 			// this.$nextTick(function() {
 			// 	this.canReset && this.mescroll.resetUpScroll() // 重置列表数据为第一页  
 			// 	this.canReset && this.mescroll.scrollTo(0, 0) // 重置列表数据为第一页时,建议把滚动条也重置到顶部,避免无法再次翻页的问题