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