智慧保安互联网APP
shuishen
2021-08-26 47d4935166fdd8cac158c4b054ecd312a63b2270
pages/groupChat/newGroup/newGroup.vue
@@ -1,21 +1,41 @@
<template>
   <view class="registerUser">
      <u-form :model="form" ref="uForm">
         <u-form-item :label="item.title" :prop="item.froms" label-width="200" :left-icon="item.img"
            :required="item.requireds" v-for="(item, index) in list" :key="index">
            <u-input v-model="form[item.froms]" :placeholder="item.placeholder" />
         </u-form-item>
         <u-form-item label="群成员" prop="role" left-icon="man-add" label-width="200" :required="true">
            <u-checkbox-group @change="checkboxGroupChange">
      <view class="group-chat-box">
         <u-form :model="form" ref="uForm">
            <u-checkbox-group @change="checkboxGroupChange" :wrap='true' :size="40">
               <u-checkbox v-model="item.checked" v-for="(item, index) in friend" :key="index"
                  :name="item.friendid">
                  {{item.realName}}
                  :name="item.friendid" shape="circle"
                  style="padding: 16rpx 0; height: 92rpx; position: relative; box-sizing: border-box;">
                  <view class="head-wrap">
                     <image
                        :src="item.avatar == '' ? 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20191109%2F1d3d4d82715444c4b8284f65e3feed10.jpeg&refer=http%3A%2F%2F5b0988e595225.cdn.sohucs.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1632484198&t=1f4086a5894cbf83b311fa37c276405c' : item.avatar" />
                  </view>
                  <view style="margin-left: 106rpx">
                     {{item.realName}}
                  </view>
               </u-checkbox>
            </u-checkbox-group>
         </u-form-item>
      </u-form>
      <u-button class="submit" @click="submit">
         创建</u-button>
         </u-form>
      </view>
      <view class="establish-box">
         <u-button class="submit" type='primary' @click="submit">
            立即创建
         </u-button>
      </view>
   </view>
</template>
@@ -25,53 +45,11 @@
      data() {
         return {
            friend: [],
            list: [{
                  title: '群名称',
                  img: 'chat',
                  froms: 'groupname',
                  requireds: true,
                  placeholder: '请输入群名称'
               },
               {
                  title: '群介绍',
                  img: 'order',
                  froms: 'groupcontent',
                  requireds: true,
                  placeholder: '请输入群介绍'
               },
               {
                  title: '群公告',
                  img: 'bell',
                  froms: 'groupnotice',
                  requireds: true,
                  placeholder: '请输入群公告'
               },
            ],
            form: {
               groupname: '',
               groupcontent: '',
               groupnotice: '',
               groupmember: '',
            },
            rules: {
               groupname: [{
                  required: true,
                  message: '请输入群名称',
                  // 可以单个或者同时写两个触发验证方式
                  trigger: ['change', 'blur'],
               }],
               groupcontent: [{
                  required: true,
                  message: '请输入群介绍',
                  // 可以单个或者同时写两个触发验证方式
                  trigger: ['change', 'blur'],
               }],
               groupnotice: [{
                  required: true,
                  message: '请输入群公告',
                  // 可以单个或者同时写两个触发验证方式
                  trigger: ['change', 'blur'],
               }]
            },
         }
      },
@@ -84,34 +62,30 @@
      methods: {
         submit() {
            var that = this;
            this.$refs.uForm.validate(valid => {
               if (valid) {
                  var d = that.form;
                  if (d.groupmember == "") {
                     uni.showToast({
                        title: '请至少选择一个群成员',
                        icon: "none",
                        duration: 1000
                     });
                     return;
                  }
                  d.time = that.currTime();
                  d.groupid = WxStorage.get("ids");
                  uni.request({
                     url: that.$store.state.piAPI + "/chatgroup/submit",
                     method: "POST",
                     data: d,
                     success: (res) => {
                        uni.showToast({
                           title: '创建成功',
                           icon: "none",
                           duration: 1000
                        });
            var d = that.form;
            if (d.groupmember == "") {
               uni.showToast({
                  title: '请至少选择一个群成员',
                  icon: "none",
                  duration: 1000
               });
               return;
            }
            d.time = that.currTime();
            d.groupid = WxStorage.get("ids");
            uni.request({
               url: that.$store.state.piAPI + "/chatgroup/submit",
               method: "POST",
               data: d,
               success: (res) => {
                  uni.showToast({
                     title: '创建成功',
                     icon: "none",
                     duration: 1000
                  });
                        uni.switchTab({
                           url: '/pages/groupChat/groupChat?'
                        });
                     }
                  uni.switchTab({
                     url: '/pages/groupChat/groupChat?'
                  });
               }
            });
@@ -144,7 +118,19 @@
               },
               success: (res) => {
                  var resdata = res.data.data.records;
                  that.friend = resdata;
                  var str = '';
                  resdata.forEach((item, index) => {
                     if (index > 2) return;
                     str += item.realName + '、';
                  })
                  this.form.groupname = (str.substr(0, str.length - 1) + '···')
               }
            })
         }
@@ -152,7 +138,9 @@
   }
</script>
<style>
<style lang="scss">
   @import '../../../common/style/common.scss';
   .warp {
      display: flex;
      align-items: center;
@@ -167,34 +155,65 @@
   }
   .submit {
      margin: 30rpx 50rpx 50rpx;
      border: none;
      width: 572rpx;
      width: 94%;
      height: 86rpx;
      line-height: 86rpx;
      box-sizing: border-box;
      border-radius: 15rpx;
      background-color: #14b9c8;
      color: #ffffff;
      font-size: 38rpx;
      &::after {
         content: none;
      }
      &::before {
         content: none;
      }
      &[disabled='true'] {
         background: #e4e4e4;
         font-size: 36rpx;
         font-family: Source Han Sans CN;
         font-weight: 500;
         color: #ffffff;
      }
   }
   .registerUser {
      padding: 0 1.2rem;
      height: 100%;
      background: #f7f7f7;
      .group-chat-box {
         height: calc(100% - 116rpx);
         padding: 0 1.2rem;
         box-sizing: border-box;
         overflow-y: auto;
      }
      .establish-box {
         position: relative;
         height: 116rpx;
         background: #fff;
         text-align: center;
         uni-button {
            margin: 0;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
         }
      }
   }
   .head-wrap {
      position: absolute;
      top: 0;
      left: 66rpx;
      bottom: 0;
      right: auto;
      margin: auto;
      width: 66rpx;
      height: 66rpx;
      border-radius: 50%;
      background: #e7e7e7;
      uni-image {
         width: 66rpx;
         height: 66rpx;
         border-radius: 50%;
         vertical-align: middle;
      }
   }
</style>