| | |
| | | <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> |
| | | |
| | |
| | | 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'], |
| | | }] |
| | | }, |
| | | } |
| | | }, |
| | |
| | | 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?' |
| | | }); |
| | | } |
| | | }); |
| | |
| | | }, |
| | | 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> |
| | | <style lang="scss"> |
| | | @import '../../../common/style/common.scss'; |
| | | |
| | | .warp { |
| | | display: flex; |
| | | align-items: center; |
| | |
| | | } |
| | | |
| | | .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> |