创建团队

pages/createTeam/index.js

@@ -8,19 +8,53 @@ Page({
      * 页面的初始数据
      */
     data: {
+        showModal: false,
         // 主体高度
         infoHeight: '',
         frameStyle: { useTop: true, name: '创建团队', leftArrow: true, useBar: false },
         form: {
             type: ['乒乓球', '足球', '篮球'],
             objectType: [{ id: 0, name: '乒乓球' }, { id: 1, name: '足球' }, { id: 2, name: '篮球' },],
+            create_time: '2016-09-01',
         },
-        lists: [{ id: '1', menbers: '' }],
-        menbers:[],
+        lists: [],
         index: 0,
+        item: [],
+        check: [],
         // 上传图片
         fileList: [],
     },
+    apply: function (e) {
+        // this.setData({ showModal: false })
+        console.log(this.data.check);
+    },
+    //选择队员
+    checkboxChange: function (e) {
+        const that = this;
+        let data = e.detail.value;
+        let _id = [];
+        let item = that.data.item;
+        let check = [];
+        for (const val of _id) {
+            let arr = item.find((i) => i._id == val);
+            if (arr) check.push({ id: arr._id, nickname: arr.nickname, icon: arr.icon })
+        }
+        that.setData({ check: check })
+    },
+    //显示对话框
+    clickme: function () {
+        this.setData({
+            showModal: true
+        })
+    },
+    preventTouchMove: function () {
+    },
+    //关闭弹窗
+    go: function () {
+        this.setData({
+            showModal: false
+        })
+    },
     //选择
     bindPickerChange: function (e) {
         console.log('picker发送选择改变，携带值为', e.detail.value)
@@ -28,18 +62,16 @@ Page({
             index: e.detail.value
         })
     },
-    back: function () {
-        wx.navigateBack({ url: '/pages/me/index' })
-    },
-    //点击加号添加
-    addList: function () {
-        var lists = this.data.lists;
-        var newData = [];
-        lists.push(newData);//实质是添加lists数组内容，使for循环多一次
+    bindDateChange: function (e) {
+        console.log('picker发送选择改变，携带值为', e.detail.value)
         this.setData({
-            lists: lists,
+            create_time: e.detail.value
         })
     },
+    back: function () {
+        wx.navigateBack({ url: '/pages/me/index' })
+    },
+
     //点击减号删除
     delList: function () {
         var lists = this.data.lists;
@@ -48,51 +80,54 @@ Page({
             lists: lists,
         })
     },
-    //提交
-    formSubmit: function (e) {
-        const value = e.detail.value;
-        const that = this;
-        if (!this.WxValidate.checkForm(value)) {
-            const error = this.WxValidate.errorList[0];
-            wx.showToast({ title: `${error.msg}`, icon: 'error', duration: 2000 })
-            return false
-        } else {
-            value.icon = this.data.fileList;
-            wx.getStorage({
-                key: 'token',
-                success: function (res) {
-                    wx.request({
-                        url: `${app.globalData.publicUrl}/courtAdmin/api/team`, //接口地址
-                        method: "post",//请求方法
-                        data: value,//请求参数
-                        header: {},
-                        success: res => {
-                            // var menbers = JSON.parse(res.data.menbers)
-                            console.log(res);
-                            if (res.data.errcode == 0) {
-                                wx.showToast({
-                                    title: '创建团队成功',
-                                    icon: 'success',
-                                    duration: 2000//延迟两秒
-                                })
-                            } else {
-                                wx.showToast({
-                                    title: '创建团队失败',
-                                    icon: 'error',
-                                    duration: 2000
-                                })
-                            }
-                        },
-                        error: err => {
-                            console.log(err);
-                        }
-                    })
-                }
-            })
-        }
-    },
+    // //提交
+    // formSubmit: function (e) {
+    //     const value = e.detail.value;
+    //     if (!this.WxValidate.checkForm(value)) {
+    //         const error = this.WxValidate.errorList[0];
+    //         wx.showToast({ title: `${error.msg}`, icon: 'error', duration: 2000 })
+    //         return false
+    //     } else {
+    //         value.icon = this.data.fileList;
+    //         wx.getStorage({
+    //             key: 'token',
+    //             success: function (res) {
+    //                 wx.request({
+    //                     url: `${app.globalData.publicUrl}/courtAdmin/api/team`, //接口地址
+    //                     method: "post",//请求方法
+    //                     //请求参数
+    //                     data: value,
+    //                     header: {},
+    //                     success: res => {
+    //                         console.log(res);
+    //                         if (res.data.errcode == 0) {
+    //                             wx.showToast({
+    //                                 title: '创建团队成功',
+    //                                 icon: 'success',
+    //                                 duration: 2000//延迟两秒
+    //                             })
+    //                         } else {
+    //                             wx.showToast({
+    //                                 title: '创建团队失败',
+    //                                 icon: 'error',
+    //                                 duration: 2000
+    //                             })
+    //                         }
+    //                     },
+    //                     error: err => {
+    //                         console.log(err);
+    //                     }
+    //                 })
+    //             }
+    //         })
+    //     }
+    // },
     //上传图片
+    formSubmit(e) {
+        console.log('form发生了submit事件，携带数据为：', e.detail.value)
+    },
     afterRead: function (event) {
+        const that = this;
         const { file } = event.detail;
         // 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式app.globalData.fileUrl：
         console.log(file);
@@ -132,7 +167,6 @@ Page({
         this.watchLogin();
         //验证规则函数
         this.initValidate()
-
     },
     // 监听用户是否登录
     watchLogin: function () {
@@ -141,6 +175,19 @@ Page({
             key: 'token',
             success: res => {
                 //数据请求
+                wx.request({
+                    url: `${app.globalData.publicUrl}/courtAdmin/api/user`, //接口地址
+                    method: "get",
+                    data: {},
+                    header: {},
+                    success: res => {
+                        console.log(res);
+                        that.setData({ item: res.data.data })
+                    },
+                    error: err => {
+                        console.log(err);
+                    }
+                })
             },
             fail: res => {
                 wx.redirectTo({ url: '/pages/login/index', })
@@ -157,7 +204,6 @@ Page({
         if (frameStyle.useBar) infoHeight = infoHeight - 50;
         if (infoHeight) this.setData({ infoHeight: infoHeight })
     },
-
     /**
      * 生命周期函数--监听页面初次渲染完成
      */

pages/createTeam/index.wxml

@@ -23,30 +23,51 @@
                             </view>
                         </picker>
                     </view>
+                    <view class="one">
+                        <view class="text">创建时间</view>
+                        <picker name="create_time" mode="date"  value="{{form.create_time}}" start="2015-09-01" end="2017-09-01" bindchange="bindDateChange">
+                            <view class="input">
+                                {{form.create_time}}<image class="back" src="/image/back.png"></image>
+                            </view>
+                        </picker>
+                    </view>
                 </view>
                 <view class="bottom" style="height:{{infoHeight-270}}px;">
                     <view class="two">
                         <view class="two_title"> 团队队员</view>
                         <view class="two_main">
-                            <view class="two_1" wx:key="item" wx:for="{{lists}}">
+                            <view class="two_1" wx:key="item1" wx:for="{{menbers}}">
                                 <view class="team_1">
-                                    <image class="two_logo1" src="/image/logo1.png"></image>
+                                    <image class="two_logo1" src="{{item1.icon}}"></image>
                                     <image bindtap='delList' class="two_jian" src="/image/jian.png"></image>
                                 </view>
                                 <view class="team_text">
-                                    <input class="input1" bindinput="toMenbers" name="menbers" value="{{menbers}}" placeholder="队员名称" />
+                                    <input class="input1" name="menbers" value="{{item1.nickname}}" placeholder="队员名称" />
                                 </view>
                             </view>
                             <view class="two_1">
                                 <view class="team_1">
                                     <view class="tianjia">
-                                        <text bindtap='addList' class=" icon iconfont icon-jia"></text>
+                                        <text bindtap='clickme' class=" icon iconfont icon-jia"></text>
                                     </view>
+
                                 </view>
                             </view>
                         </view>
                     </view>
                 </view>
+                <view class="mask" catchtouchmove="preventTouchMove" wx:if="{{showModal}}"></view>
+                <view class="modalDlg" wx:if="{{showModal}}">
+                    <text class="modal_text2">选择队员</text>
+                    <checkbox-group bindchange="checkboxChange">
+                        <label class="checkbox" wx:key="item" wx:for="{{item}}">
+                            <text class="modal_box">{{item.nickname}}</text>
+                            <checkbox class="box" value="{{item.nickname}},{{item._id}},{{item.icon}}" checked="{{item.checked}}" />
+                        </label>
+                    </checkbox-group>
+                    <button bindtap="apply" class="modal_button">确定</button>
+                    <text bindtap="go" class="modal_text4">取消</text>
+                </view>
             </view>
             <view class="btn-area">
                 <button class="button" formType="submit">创建团队</button>

pages/createTeam/index.wxss

@@ -9,7 +9,7 @@
   padding: 0 0 10px 0;
   margin: 0 0 20px 0;
   background-color: #ffffff;
-  height: 200px;
+  height: 235px;
 }
 
 .zero {
@@ -56,18 +56,19 @@
   width: 60%;
   font-size: 16px;
 }
+
 .van-uploader__upload {
   border-radius: 50%;
   align-items: center;
-  background-color: var(--uploader-upload-background-color,#f7f8fa);
+  background-color: var(--uploader-upload-background-color, #f7f8fa);
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
-  height: var(--uploader-size,50px);
+  height: var(--uploader-size, 50px);
   justify-content: center;
   margin: 0 8px 8px 0;
   position: relative;
-  width: var(--uploader-size,50px);
+  width: var(--uploader-size, 50px);
   width: 50px !important;
   height: 50px !important;
 }
@@ -75,9 +76,9 @@
 .van-uploader__preview-image {
   border-radius: 50%;
   display: block;
-  height: var(--uploader-size,50px);
+  height: var(--uploader-size, 50px);
   overflow: hidden;
-  width: var(--uploader-size,50px);
+  width: var(--uploader-size, 50px);
   width: 50px !important;
   height: 50px !important;
 }
@@ -85,13 +86,16 @@
 .bottom {
   background-color: #ffffff;
 }
+
 .two_title {
   font-size: 16px;
   padding: 20px 0 0 20px;
 }
-.two_main{
+
+.two_main {
   padding: 0 20px;
 }
+
 .two_1 {
   padding: 10px 8px;
   width: 20%;
@@ -106,9 +110,11 @@
   background-color: #f8f8f8;
   border-radius: 60px;
 }
-.tianjia{
+
+.tianjia {
   padding: 17px 0 0 0;
 }
+
 .two_logo1 {
   margin: 4px 2px;
   width: 45px;
@@ -127,13 +133,15 @@
   font-size: 12px;
   color: #555;
 }
-.btn-area{
+
+.btn-area {
   width: 100%;
   position: absolute;
   bottom: 0px;
   background-color: #fff;
   height: 60px;
 }
+
 .button {
   position: relative;
   top: 10px;
@@ -143,4 +151,59 @@
   color: #ffffff;
   text-align: center;
   font-size: small;
+}
+
+.mask {
+  width: 100%;
+  height: 100%;
+  position: fixed;
+  top: 0;
+  left: 0;
+  background: #000;
+  z-index: 9000;
+  opacity: 0.3;
+}
+
+.modalDlg {
+  width: 300px;
+  height: 490px;
+  position: fixed;
+  left: 0;
+  z-index: 9999;
+  margin: -500px 40px 0 40px;
+  background-color: #fff;
+  border-radius: 36rpx;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.modal_text2 {
+  font-size: 18px;
+  margin: 0px 0 10px 0;
+}
+
+.checkbox {
+  padding: 0 0 0 30px;
+}
+
+.box {
+  padding: 10px 10px 0 0;
+}
+.modal_box{
+  padding: 0 0 0 0;
+}
+.modal_text4 {
+  font-size: 12px;
+  margin: 10px 0 0 0;
+}
+
+.modal_button {
+  width: 120px !important;
+  background-image: linear-gradient(to right, #fd3c1e, #c74df0);
+  border-radius: 30px;
+  color: #ffffff;
+  text-align: center;
+  font-size: small;
+  margin: 30px 0 0 0;
 }

pages/me/index.wxss

@@ -58,6 +58,7 @@
 }
 
 .tou {
+  border-radius: 50%;
   position: absolute;
   width: 28%;
   height: 100%;