feat：新增分组

common/js/service.js

@@ -107,4 +107,13 @@ export default {
         })
     },
 
+    // 新增分组
+    addGroup(data) {
+        return request({
+            url: '/member/group',
+            method: 'POST',
+            data: data
+        })
+    },
+
 }

pages/addGroup/addGroup.vue

@@ -6,20 +6,20 @@
 
 				<u--form labelPosition="left" :model="form" :rules="rules" ref="uForm">
 
-					<u-form-item prop="groupName" borderBottom>
+					<u-form-item prop="name" borderBottom>
 						<view class="item">
 							<text class="key">分组名称</text>
 							<view class="flex-row input">
-								<u--input v-model="form.groupName" placeholder="请输入分组名称" border="none"></u--input>
+								<u--input v-model="form.name" placeholder="请输入分组名称" border="none"></u--input>
 							</view>
 						</view>
 					</u-form-item>
 
-					<u-form-item prop="userInfo.sex" borderBottom>
+					<u-form-item prop="userName" borderBottom>
 						<view class="item">
 							<text class="key">负责人</text>
 							<view class="flex-row input" @click="openSelectPerson">
-								<u--input disabled placeholder="请选择负责人" border="none"></u--input>
+								<u--input v-model="form.userName" disabled placeholder="请选择负责人" border="none"></u--input>
 								<u-icon name="arrow-right"></u-icon>
 							</view>
 						</view>
@@ -27,7 +27,7 @@
 				</u--form>
 
 		</view>
-		<view class="addGroup">
+		<view class="addGroup" @click="addGroup">
 			<text>新增</text>
 		</view>
 
@@ -37,20 +37,12 @@
 				<view class="flex-row justify-around popupTitle">
 					<text @click="closePopup('selectPersonPopup')">取消</text>
 					<text>选择分组负责人</text>
-					<text>确定</text>
+					<text @click="getSelectPerson">确定</text>
 				</view>
-				<view class="scroll-y-view">
-					<scroll-view scroll-y class="scroll-y1" >
-						<view class="flex-row justify-between member" v-for="item in 10">
-							<view class="flex-row">
-								<text class="name">张三</text>
-								<text class="name">1736500000</text>
-							</view>
-							<u-icon name="checkbox-mark" color="#FFE05C" size="24"></u-icon>
-						</view>
-					</scroll-view>
+				<view class="scroll-y-view ">
+					<mescroll-item ref="MescrollItem" :i="0"  :index="0"  :height="height">
+					</mescroll-item>
 				</view>
-
 			</view>
 		</uni-popup>
 
@@ -58,30 +50,41 @@
 </template>
 
 <script>
+	import MescrollItem from "./module/mescrollUni-item.vue";
 	export default {
 		components: {
-
+			MescrollItem
 		},
 		data() {
 			return {
-				height: '',
+				height: '650px',
 				form:{
-					groupName:''
+					name:'',
+					userId:'',
+					userName:''
 				},
 				rules: {
-					'groupName': {
+					'name': {
 						type: 'string',
 						required: true,
 						min:1,
 						message: '请输入分组名称',
 						trigger: ['blur', 'change']
+					},
+
+					'userName': {
+						type: 'string',
+						required: true,
+						min:2,
+						message: '请选择分组负责人',
+						trigger: ['blur', 'change']
 					}
 				},
 			}
 		},
 		onLoad(e) {
 			let sysInfo = uni.getSystemInfoSync()
-			this.height = sysInfo.windowHeight - 120 + 'px' //除标题栏栏外的屏幕可用高度
+			this.height = sysInfo.screenWidth/750 * 650 + 'px' //除标题栏栏外的屏幕可用高度
 		},
 		methods: {
 			back() {
@@ -94,8 +97,41 @@
 			openSelectPerson(){
 				this.$refs.selectPersonPopup.open()
 			},
-			closePopup(name){
-				this.$refs[name].close()
+			closePopup(){
+				this.$refs.selectPersonPopup.close()
+			},
+			getSelectPerson(){
+				let a = this.$refs.MescrollItem.getSelectPerson()
+				console.log('选择的负责人',a)
+				if (!a){
+					uni.showToast({
+						icon: 'error',
+						duration: 2000,
+						title: '请选择负责人'
+					});
+					return
+				}
+				this.form.userId = a.id
+				this.form.username = a.name
+				this.$set(this.form,'userName', a.name)
+				this.closePopup()
+			},
+
+			addGroup(){
+				this.$refs.uForm.validate().then(res => {
+					this.$api.service.addGroup(this.form).then(res=>{
+						console.log(res)
+						uni.showToast({
+							icon: 'success',
+							duration: 2000,
+							title: '新增成功'
+						});
+						setTimeout(()=>{
+							this.back()
+						},2000)
+					})
+				})
+
 			}
 
 		}

pages/addGroup/module/index.rpx.css

@@ -0,0 +1,16 @@
+.member{
+    padding: 32rpx;
+    min-height: 50rpx;
+    border-top: 2rpx solid #EEEEEE;
+}
+.member:first-child{
+    border-top: 2rpx solid #FAFAFA;
+}
+.name{
+    height: 40rpx;
+    font-size: 28rpx;
+    font-weight: 400;
+    color: #333333;
+    line-height: 40rpx;
+    margin-left: 20rpx;
+}

pages/addGroup/module/mescrollUni-item.vue

@@ -0,0 +1,140 @@
+<template>
+	<!--
+    swiper中的transfrom会使fixed失效,此时用height固定高度;
+    swiper中无法触发mescroll-mixins.js的onPageScroll和onReachBottom方法,只能用mescroll-uni,不能用mescroll-body
+    -->
+	<!-- ref动态生成: 字节跳动小程序编辑器不支持一个页面存在相同的ref (如不考虑字节跳动小程序可固定值为 ref="mescrollRef") -->
+	<!-- top的高度等于悬浮菜单tabs的高度 -->
+	<mescroll-uni :ref="'mescrollRef' + i" @init="mescrollInit" :height="height" :down="downOption" @down="downCallback"
+		:up="upOption" @up="upCallback" @emptyclick="emptyClick">
+		<view>
+			<view class="flex-row justify-between member" v-for="(item,index) in list" :key="index" @click="selectItem(item,index)">
+				<view class="flex-row">
+					<text class="name">{{item.name}}</text>
+					<text class="name">{{item.phone}}</text>
+				</view>
+				<u-icon name="checkbox-mark" color="#FFE05C" size="24" v-if="item.select"></u-icon>
+			</view>
+		</view>
+
+	</mescroll-uni>
+</template>
+
+<script>
+	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
+	import MescrollMoreItemMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mixins/mescroll-more-item.js"
+	export default {
+		mixins: [MescrollMixin, MescrollMoreItemMixin], // 注意此处还需使用MescrollMoreItemMixin (必须写在MescrollMixin后面)
+		components: {
+		},
+
+		data() {
+			return {
+				downOption: {
+					auto: false // 不自动加载 (mixin已处理第一个tab触发downCallback)
+				},
+				upOption: {
+					auto: false, // 不自动加载
+					// page: {
+					// 	num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
+					// 	size: 10 // 每页数据的数量
+					// },
+					noMoreSize: 4, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
+					empty: {
+						icon: '/static/dataNull.png',
+						tip: '暂无内容', // 提示
+						// btnText: '去看看'
+					},
+					textNoMore: '没有更多了'
+				},
+				list:[],
+				selectIndex:-1,
+			}
+		},
+		props: {
+			i: Number, // 每个tab页的专属下标 (除了支付宝小程序必须在这里定义, 其他平台都可不用写, 因为已在MescrollMoreItemMixin定义)
+			index: { // 当前tab的下标 (除了支付宝小程序必须在这里定义, 其他平台都可不用写, 因为已在MescrollMoreItemMixin定义)
+				type: Number,
+				default () {
+					return 0
+				}
+			},
+
+			height: [Number, String], // mescroll的高度
+
+		},
+		watch:{
+
+		},
+
+		created(){
+
+
+		},
+
+		methods: {
+
+
+			/*下拉刷新的回调 */
+			downCallback() {
+				// 这里加载你想下拉刷新的数据, 比如刷新轮播数据
+				// loadSwiper();
+				// 下拉刷新的回调,默认重置上拉加载列表为第一页 (自动执行 page.num=1, 再触发upCallback方法 )
+				this.mescroll.resetUpScroll()
+			},
+			/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
+			upCallback(page) {
+
+				//联网加载数据
+				let httpData = {
+					pageNum:page.num,
+					pageSize:10
+				}
+
+				this.$api.service.getMyExpandUserList(httpData).then((res) => {
+					//联网成功的回调,隐藏下拉刷新和上拉加载的状态;
+					this.mescroll.endSuccess(res.data.data.length,res.data.data.length === 10);
+					//设置列表数据
+					if (page.num === 1) this.list = []; //如果是第一页需手动制空列表
+					this.list = this.list.concat(res.data.data); //追加新数据
+					this.getImgUrlByOssId(this.list)
+					console.log(this.list)
+				}).catch((err) => {
+					//联网失败, 结束加载
+					this.mescroll.endErr();
+				})
+
+
+			},
+
+			//点击空布局按钮的回调
+			emptyClick() {
+				uni.showToast({
+					title: '点击了按钮,具体逻辑自行实现'
+				})
+			},
+			// 搜索
+			doSearch() {
+				this.list = []; // 先清空列表,显示加载进度
+				this.mescroll.resetUpScroll();
+			},
+
+			selectItem(item,index){
+				this.list.forEach(i=>{
+					i.select = false
+				})
+				item.select = true
+				this.selectIndex = index
+				this.$set(this.list,index,item)
+			},
+			getSelectPerson(){
+				return this.list[this.selectIndex]
+			}
+		}
+	}
+</script>
+<style>
+	@import '/common/css/common.css';
+	@import './index.rpx.css';
+
+</style>

pages/myGroup/index.rpx.css

@@ -72,3 +72,14 @@
 	bottom: 26rpx;
 	right: 26rpx;
 }
+.dataNull{
+	text-align: center;
+	font-size: 28rpx;
+	color: #999999;
+}
+.dataNull image{
+	width: 400rpx;
+	height: 400rpx;
+	margin: 20rpx 0;
+}
+

pages/myGroup/myGroup.vue

@@ -2,25 +2,34 @@
 	<view class="page">
 		<uni-nav-bar  :fixed="true" background-color="#FFE05C" :border="false" :statusBar="true"  left-icon="left" title="我的分组" @clickLeft="back" />
 		<view>
-			<scroll-view scroll-y :style="{height:height}">
-				<view class="flex-col  item" v-for="(item,index) in 100" :key="index" @click="groupDetail">
-					<view class="flex-row justify-between">
-						<text class="storeName">好又多母婴店</text>
-						<text class="time">消费额：1000.55</text>
-					</view>
-					<view class="flex-row icon-num">
-						<u-icon size="24" name="/static/group/fuzeren.png"></u-icon>
-						<text class="key">负责人:</text>
-						<text class="number">张珊</text>
-					</view>
-					<view class="flex-row icon-num">
-						<u-icon size="24" name="/static/group/chengyuan.png"></u-icon>
-						<text class="key">成员:</text>
-						<text class="number">300人</text>
-					</view>
-					<u-icon size="30" name="/static/group/xiugai.png" class="xiugai" @click.native.stop="updateGroup"></u-icon>
+			<view class="flex-col dataNull" v-if="list.length === 0">
+				<view class="flex-row justify-center">
+					<image :src="'/static/dataNull.png'"></image>
 				</view>
-			</scroll-view>
+				<text>暂无分组</text>
+			</view>
+			<view v-else>
+				<scroll-view scroll-y :style="{height:height}" >
+					<view class="flex-col  item" v-for="(item,index) in 100" :key="index" @click="groupDetail">
+						<view class="flex-row justify-between">
+							<text class="storeName">好又多母婴店</text>
+							<text class="time">消费额：1000.55</text>
+						</view>
+						<view class="flex-row icon-num">
+							<u-icon size="24" name="/static/group/fuzeren.png"></u-icon>
+							<text class="key">负责人:</text>
+							<text class="number">张珊</text>
+						</view>
+						<view class="flex-row icon-num">
+							<u-icon size="24" name="/static/group/chengyuan.png"></u-icon>
+							<text class="key">成员:</text>
+							<text class="number">300人</text>
+						</view>
+						<u-icon size="30" name="/static/group/xiugai.png" class="xiugai" @click.native.stop="updateGroup"></u-icon>
+					</view>
+				</scroll-view>
+			</view>
+
 		</view>
 		<view class="addGroup" @click="goAddGroup">
 			<text>新增分组</text>
@@ -34,7 +43,8 @@
 		},
 		data() {
 			return {
-				height:''
+				height:'',
+				list:[]
 			}
 		},
 		onLoad(e) {