地址替换

zengh

2022-06-21 4efeb31d5b4921d7e851c256009486ad86bc70e2

 pages/groupChat/newGroup/newGroup.vue

New file
@@ -0,0 +1,238 @@
<template>
   <view class="registerUser">

      <view class="group-chat-box" id="groupChatBox" :style="{ height: swiperHeight + 'px' }">

         <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" 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>

      </view>


      <view class="establish-box">

         <u-button class="submit" type='primary' @click="submit">
            立即创建
         </u-button>

      </view>

   </view>
</template>

<script>
   import WxStorage from "../../../static/lib/wxStorage.js"
   export default {
      data() {
         return {
            friend: [],
            form: {
               groupname: '',
               groupcontent: '',
               groupnotice: '',
               groupmember: '',
            },
            swiperHeight: 0
         }
      },
      onReady() {
         this.$refs.uForm.setRules(this.rules);
         let that = this;
         uni.getSystemInfo({
            success(e) {
               console.log(e);
               let {
                  windowWidth,
                  windowHeight,
                  safeArea
               } = e;
               const query = uni.createSelectorQuery().in(that);
               query
                  .select('#groupChatBox')
                  .boundingClientRect(data => {
					
                     that.swiperHeight = (safeArea.bottom - 58);
					
                  })
                  .exec();
            }
         });
      },
      onLoad() {
         this.getFriend();
      },
      methods: {
         submit() {
            var that = this;
            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?'
                  });
               }
            });
         },
         currTime() {
            var date = new Date();
            var Y = date.getFullYear() + '-';
            var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
            var D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' ';
            var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
            var m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
            var s = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());
            return Y + M + D + h + m + s;
         },
         checkboxGroupChange(e) {
            var arr = "";
            for (var i = 0; i < e.length; i++) {
               arr += e[i] + ",";
            }
            var obj = arr.substr(0, arr.length - 1);
            this.form.groupmember = obj;
         },
         getFriend() {
            var that = this;
            uni.request({
               url: this.$store.state.piAPI + "/friend/page?current=1&size=9999",
               method: "get",
               data: {
                  applicant: WxStorage.get("ids")
               },
               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) + '···')
               }
            })
         }
      }
   }
</script>

<style lang="scss">
   @import '../../../common/style/common.scss';
	
   .warp {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100%;
   }

   .rect {
      text-align: center;
      width: 120px;
      height: 120px;
   }

   .submit {
      border: none;
      width: 94%;
      height: 86rpx;
      line-height: 86rpx;
      box-sizing: border-box;
      border-radius: 15rpx;
      color: #ffffff;
      font-size: 38rpx;

   }

   .registerUser {
      background: #f7f7f7;

      .group-chat-box {
         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>