liushaowen
5 years ago
138 changed files with 7886 additions and 35 deletions
@ -0,0 +1,136 @@ |
|||
const app = getApp() |
|||
|
|||
Component({ |
|||
data: { |
|||
alphabetList: [], // 字母列表
|
|||
listCur: 'A', // 当前显示字母
|
|||
hidden: true, |
|||
listCurID: 'A', |
|||
boxTop: 0, |
|||
btnName: '', |
|||
loadFlag: '' |
|||
}, |
|||
options:{ |
|||
multipleSlots: true |
|||
}, |
|||
properties: { |
|||
scrollViewTop: { |
|||
type: Number, |
|||
value: 0 |
|||
}, |
|||
scrollViewBottom: { |
|||
type: Number, |
|||
value: 0 |
|||
}, |
|||
pageType: { |
|||
type: String, |
|||
value: 'none', |
|||
observer: function (type) { |
|||
let btnContent = '' |
|||
if (type === 'none') { |
|||
btnContent = '' |
|||
} else if (type === 'invite') { |
|||
btnContent = '邀请' |
|||
} else if (type === 'delete') { |
|||
btnContent = '删除' |
|||
} else if (type === 'verify') { |
|||
btnContent = '审核' |
|||
} |
|||
this.setData({ |
|||
btnName: btnContent |
|||
}) |
|||
} |
|||
}, |
|||
dataList: { |
|||
type: Array, |
|||
value: [] |
|||
}, |
|||
groupCategory: { |
|||
type: String, |
|||
value: '1' |
|||
} |
|||
}, |
|||
pageLifetimes: { |
|||
show () { |
|||
this.setData({ |
|||
loadFlag: app.globalData.groupInfo.lordFlag |
|||
}) |
|||
}, |
|||
hide () { |
|||
|
|||
} |
|||
}, |
|||
lifetimes: { |
|||
created () { |
|||
|
|||
}, |
|||
attached () { |
|||
this.alphabetListInit() |
|||
const that = this |
|||
wx.createSelectorQuery().in(this).select('.indexBar-box').boundingClientRect(function (res) { |
|||
that.setData({ |
|||
boxTop: res.top |
|||
}) |
|||
}).exec() |
|||
} |
|||
}, |
|||
methods: { |
|||
// 初始化字母表
|
|||
alphabetListInit () { |
|||
let list = [] |
|||
for (let i = 0; i < 26; i ++) { |
|||
list[i] = String.fromCharCode(65 + i) |
|||
} |
|||
this.setData({ |
|||
alphabetList: list, |
|||
listCur: list[0] |
|||
}) |
|||
}, |
|||
//获取文字信息
|
|||
getCur(e) { |
|||
this.setData({ |
|||
hidden: false, |
|||
listCur: e.target.id, |
|||
}) |
|||
}, |
|||
// 设置文本信息
|
|||
setCur(e) { |
|||
this.setData({ |
|||
hidden: true, |
|||
listCur: this.data.listCur |
|||
}) |
|||
}, |
|||
//滑动选择Item
|
|||
tMove(e) { |
|||
let y = e.touches[0].clientY |
|||
let offsettop = this.data.boxTop |
|||
console.log(offsettop) |
|||
//判断选择区域,只有在选择区才会生效
|
|||
if (y > offsettop) { |
|||
let num = parseInt((y - offsettop) / 20); |
|||
this.setData({ |
|||
listCur: this.data.alphabetList[num] |
|||
}) |
|||
}; |
|||
}, |
|||
//触发全部开始选择
|
|||
tStart() { |
|||
this.setData({ |
|||
hidden: false |
|||
}) |
|||
}, |
|||
//触发结束选择
|
|||
tEnd() { |
|||
this.setData({ |
|||
hidden: true, |
|||
listCurID: this.data.listCur |
|||
}) |
|||
}, |
|||
chooseMember (e) { |
|||
this.triggerEvent('chooseFriend', { userId: e.currentTarget.dataset.userid, alphabet: e.currentTarget.dataset.alphabet}) |
|||
}, |
|||
operationBtn (e) { |
|||
this.triggerEvent('operationBtn', { id: e.currentTarget.dataset.id, userId: e.currentTarget.dataset.userid }) |
|||
} |
|||
} |
|||
}) |
|||
@ -0,0 +1,3 @@ |
|||
{ |
|||
"component": true |
|||
} |
|||
@ -0,0 +1,41 @@ |
|||
<view class="contact" style="height: calc(100vh - {{scrollViewTop}}rpx - {{scrollViewBottom}}rpx);"> |
|||
|
|||
<scroll-view scroll-y="{{true}}" scroll-into-view="member-{{listCurID}}" class="member" scroll-with-animation="true" enable-back-to-top="true"> |
|||
<block wx:for="{{dataList}}" wx:key="{{index}}" wx:for-item="item"> |
|||
<view class="alphabet-item" id="member-{{dataList[index].alphabet}}" data-index="{{dataList[index]}}">{{item.alphabet}}</view> |
|||
<view class="member-item" wx:for="{{item.memberList}}" wx:for-item="items" wx:for-index="sub" wx:key="{{items}}"> |
|||
<view class="item-avatar"> |
|||
<image src="{{items.userAvatar}}" alt="用户头像"/> |
|||
</view> |
|||
<view class="content"> |
|||
<view class="item-info"> |
|||
<view class="name">{{items.nickname}}</view> |
|||
<view class="note" wx:if="{{pageType !== 'delete' && pageType !== 'invite'}}">{{items.createdTime}}</view> |
|||
</view> |
|||
<view class="operation" wx:if="btnName !== ''"> |
|||
<checkbox-group wx:if="{{btnName === '邀请'}}" bindchange="chooseMember" data-alphabet="{{item.alphabet}}" data-userId="{{items.userId}}"> |
|||
<checkbox color="red" value="{{items.userId}}" checked="{{items.checked}}" /> |
|||
</checkbox-group> |
|||
<block wx:elif="{{pageType == 'delete'}}"> |
|||
<view class="lordFlag" wx:if="{{items.lordFlag == 1}}">群主</view> |
|||
<button bindtap="operationBtn" data-userid="{{items.userId}}" data-id="{{items.id}}" wx:elif="{{loadFlag == 1 && groupCategory != '0'}}" hover-class="hover-btn" type="default" size="mini">{{btnName}}</button> |
|||
</block> |
|||
<button bindtap="operationBtn" data-id="{{items.id}}" data-userid="{{items.userId}}" wx:else hover-class="hover-btn" type="default" size="mini">{{btnName}}</button> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</block> |
|||
</scroll-view> |
|||
|
|||
<view class="indexBar"> |
|||
<view class="indexBar-box" bindtouchstart="tStart" bindtouchend="tEnd" catchtouchmove="tMove"> |
|||
<view class="indexBar-item" wx:for="{{alphabetList}}" wx:key id="{{alphabetList[index]}}" bindtouchstart="getCur" bindtouchend="setCur">{{alphabetList[index]}}</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view hidden="{{hidden}}" class="indexToast"> |
|||
{{listCur}} |
|||
</view> |
|||
</view> |
|||
|
|||
|
|||
@ -0,0 +1,141 @@ |
|||
.contact { |
|||
width:100%; |
|||
height: 100%; |
|||
position: relative; |
|||
box-sizing: border-box; |
|||
padding-bottom: 20rpx; |
|||
background: #f7f7f7; |
|||
} |
|||
.member { |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
.member .alphabet-item { |
|||
padding: 30rpx; |
|||
color: #666; |
|||
font-size: 30rpx; |
|||
} |
|||
.member .member-item { |
|||
width: 100%; |
|||
height: 135rpx; |
|||
background: #ffffff; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
} |
|||
.member .member-item .item-avatar { |
|||
width: 96rpx; |
|||
height: 96rpx; |
|||
color: #ffffff; |
|||
background: #ccc; |
|||
border-radius: 50%; |
|||
overflow: hidden; |
|||
text-align:center; |
|||
line-height: 96rpx; |
|||
font-size: 40rpx; |
|||
margin-left: 30rpx; |
|||
} |
|||
.member .member-item .item-avatar image{ |
|||
width:100%; |
|||
height:100%; |
|||
object-fit: cover; |
|||
} |
|||
.member .member-item .content{ |
|||
height: 100%; |
|||
width: calc(100% - 126rpx - 80rpx); |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
box-sizing: border-box; |
|||
margin-right: 80rpx; |
|||
padding-left: 20rpx; |
|||
} |
|||
.member .member-item + .member-item .content { |
|||
border-top: 1rpx solid #e5e5e5; |
|||
} |
|||
.member .member-item .content .operation button { |
|||
width:100rpx; |
|||
height: 48rpx; |
|||
line-height: 48rpx; |
|||
text-align:center; |
|||
color: #fff; |
|||
font-size: 24rpx; |
|||
border-radius: 6rpx; |
|||
border: 0; |
|||
background: linear-gradient(to right, #fd2316, #ff624a); |
|||
padding: 0; |
|||
margin: 0; |
|||
} |
|||
.member .member-item .content .operation .lordFlag { |
|||
font-size: 24rpx; |
|||
color: #999; |
|||
} |
|||
.member .member-item .content .operation .hover-btn { |
|||
background: #c60b00; |
|||
} |
|||
|
|||
.member .member-item .content .item-info { |
|||
width: calc(100% - 96prx - 20rpx); |
|||
height: 100rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
flex-wrap: wrap; |
|||
} |
|||
.member .member-item .content .item-info .name { |
|||
width: 100%; |
|||
font-size: 34rpx; |
|||
color: #333; |
|||
line-height: 34rpx; |
|||
} |
|||
.member .member-item .content .item-info .note { |
|||
width: 100%; |
|||
font-size: 24rpx; |
|||
line-height: 24rpx; |
|||
color: #999; |
|||
} |
|||
|
|||
.indexBar { |
|||
position: fixed; |
|||
right: 0px; |
|||
bottom: 0px; |
|||
padding: 20rpx 20rpx 20rpx 0rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
height: 100vh; |
|||
} |
|||
.indexBar .indexBar-box{ |
|||
width: 40rpx; |
|||
height: auto; |
|||
background: #fff; |
|||
display: flex; |
|||
flex-direction: column; |
|||
box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.1); |
|||
border-radius: 10rpx; |
|||
} |
|||
.indexBar .indexBar-box .indexBar-item { |
|||
flex: 1; |
|||
width: 40rpx; |
|||
height: 40rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
font-size: 24rpx; |
|||
color: #888; |
|||
} |
|||
|
|||
.indexToast { |
|||
position: fixed; |
|||
top: 0; |
|||
right: 80rpx; |
|||
bottom: 0; |
|||
background: rgba(0, 0, 0, 0.5); |
|||
width: 100rpx; |
|||
height: 100rpx; |
|||
border-radius: 10rpx; |
|||
margin: auto; |
|||
color: #fff; |
|||
line-height: 100rpx; |
|||
text-align: center; |
|||
font-size: 48rpx; |
|||
|
|||
} |
|||
@ -0,0 +1,69 @@ |
|||
import { createQRCode } from '../../utils/api' |
|||
|
|||
Component({ |
|||
data: { |
|||
qrcodeValue: 'https://www.baidu.com', |
|||
visible: false, |
|||
qrCodeImage: '' |
|||
}, |
|||
properties: { |
|||
dialogVisible: { |
|||
type: Boolean, |
|||
observer: function (value) { |
|||
this.setData({ |
|||
visible: value |
|||
}) |
|||
}, |
|||
value: false |
|||
}, |
|||
groupInfo: { |
|||
type: Object, |
|||
value: { |
|||
groupAvatar: '', |
|||
groupLeader: '', |
|||
groupName:'', |
|||
groupId: '' |
|||
} |
|||
} |
|||
}, |
|||
pageLifetimes: { |
|||
show () { |
|||
this.createQRCode() |
|||
} |
|||
}, |
|||
methods: { |
|||
// 预览 二维码
|
|||
previewImage() { |
|||
const that = this.selectComponent('#qrcode') |
|||
wx.canvasToTempFilePath({ |
|||
canvasId: 'wux-qrcode', |
|||
success: (res) => { |
|||
wx.previewImage({ |
|||
urls: [res.tempFilePath] |
|||
}) |
|||
} |
|||
}, that) |
|||
}, |
|||
// 关闭 弹框
|
|||
closeDialog () { |
|||
this.triggerEvent('parentVisibleValue', {visibleValue: false}) |
|||
this.setData({ |
|||
visible: false |
|||
}) |
|||
}, |
|||
createQRCode () { |
|||
const para = { |
|||
gridId: '1169158285790900226', |
|||
inviteUserId: '31f31a620399d18a39329f663437da72' |
|||
} |
|||
createQRCode(para).then(res => { |
|||
console.log('生成邀请二维码', res) |
|||
this.setData({ |
|||
qrCodeImage: res.data |
|||
}) |
|||
}).catch(err => { |
|||
console.log(err) |
|||
}) |
|||
} |
|||
} |
|||
}) |
|||
@ -0,0 +1,5 @@ |
|||
{ |
|||
"component": true, |
|||
"usingComponents": { |
|||
} |
|||
} |
|||
@ -0,0 +1,17 @@ |
|||
<view class="invite-friend-dialog" wx:if="{{visible}}"> |
|||
<view class="box"> |
|||
<image class="bg-image" src="../../images/bg-yaoqinghaoyou.png" /> |
|||
<view class="content"> |
|||
<view class="invite-info"> |
|||
<image class="group-avatar" src="{{groupInfo.groupAvatar}}" /> |
|||
<view class="group-name">{{groupInfo.groupName}}</view> |
|||
<view class="group-leader">{{groupInfo.groupLeader}}（群主）</view> |
|||
<view class="qrcode"> |
|||
<image src="{{qrCodeImage}}" /> |
|||
</view> |
|||
</view> |
|||
<view class="tip">邀请您的好友，好友扫码注册党群e家，再邀请好友进入社群</view> |
|||
</view> |
|||
</view> |
|||
<image bindtap="closeDialog" class="close" src="../../images/close.png" /> |
|||
</view> |
|||
@ -0,0 +1,92 @@ |
|||
.invite-friend-dialog { |
|||
width: 100%; |
|||
height: 100vh; |
|||
position: absolute; |
|||
top: 0; |
|||
left: 0; |
|||
z-index: 10; |
|||
background: rgba(0,0,0,0.7); |
|||
overflow: hidden; |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: center; |
|||
align-items: center; |
|||
} |
|||
.invite-friend-dialog .box { |
|||
width: 600rpx; |
|||
height: 910rpx; |
|||
position: relative; |
|||
border-radius: 16rpx; |
|||
overflow: hidden; |
|||
box-sizing: border-box; |
|||
padding: 140rpx 45rpx 0; |
|||
} |
|||
.invite-friend-dialog .box .bg-image { |
|||
width: 100%; |
|||
height: 100%; |
|||
object-fit: cover; |
|||
position: absolute; |
|||
z-index: 10; |
|||
left: 0; |
|||
top: 0; |
|||
} |
|||
.invite-friend-dialog .box .content { |
|||
width: 100%; |
|||
height: 100%; |
|||
position: relative; |
|||
z-index: 100; |
|||
} |
|||
.invite-friend-dialog .box .content .invite-info { |
|||
width: 100%; |
|||
height: 640rpx; |
|||
border-radius: 16rpx; |
|||
background: #fff; |
|||
position: relative; |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
} |
|||
.invite-friend-dialog .box .content .invite-info .group-avatar { |
|||
width: 110rpx; |
|||
height: 110rpx; |
|||
border-radius: 50%; |
|||
overflow: hidden; |
|||
object-fit: cover; |
|||
position: absolute; |
|||
top: -55rpx; |
|||
left: calc(50% - 55rpx); |
|||
} |
|||
.invite-friend-dialog .box .content .invite-info .group-name { |
|||
color: #333; |
|||
font-size: 32rpx; |
|||
line-height: 44rpx; |
|||
margin-top: 68rpx; |
|||
} |
|||
.invite-friend-dialog .box .content .invite-info .group-leader { |
|||
font-size: 22rpx; |
|||
line-height: 34rpx; |
|||
color: #999; |
|||
} |
|||
.invite-friend-dialog .box .content .invite-info .qrcode { |
|||
width: 420rpx; |
|||
height: 420rpx; |
|||
border-radius: 16rpx; |
|||
overflow: hidden; |
|||
margin-top: 35rpx; |
|||
} |
|||
.invite-friend-dialog .box .content .invite-info .qrcode image { |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
.invite-friend-dialog .box .content .tip { |
|||
font-size: 22rpx; |
|||
color: #999; |
|||
line-height: 28rpx; |
|||
margin-top: 18rpx; |
|||
} |
|||
.invite-friend-dialog .close { |
|||
width: 52rpx; |
|||
height: 52rpx; |
|||
object-fit: cover; |
|||
margin-top: 35rpx; |
|||
} |
|||
@ -0,0 +1,14 @@ |
|||
Component({ |
|||
data: { |
|||
}, |
|||
properties: { |
|||
loadMoreVisible: { |
|||
type: Boolean, |
|||
value: false |
|||
}, |
|||
loadMoreType: { |
|||
type: String, |
|||
value: 'loading' |
|||
} |
|||
} |
|||
}) |
|||
@ -0,0 +1,3 @@ |
|||
{ |
|||
"component": true |
|||
} |
|||
@ -0,0 +1,7 @@ |
|||
<view class="load-more" style="visibility: {{loadMoreVisible ? 'visible' : 'hidden'}}"> |
|||
<block wx:if="{{loadMoreType == 'loading'}}"> |
|||
<image class="load-image" src="../../images/loading.gif" /> |
|||
<view class="load-text">正在加载中...</view> |
|||
</block> |
|||
<view wx:else class="load-text">没有更多了~</view> |
|||
</view> |
|||
@ -0,0 +1,18 @@ |
|||
.load-more { |
|||
width: 100%; |
|||
height: 100rpx; |
|||
background: #f7f7f7; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
} |
|||
.load-more .load-text { |
|||
color: #999; |
|||
font-size: 26rpx; |
|||
} |
|||
.load-more .load-image { |
|||
width: 30rpx; |
|||
height: 30rpx; |
|||
object-fit: cover; |
|||
margin-right: 10rpx; |
|||
} |
|||
@ -0,0 +1,65 @@ |
|||
Component({ |
|||
data: { |
|||
visible: false |
|||
}, |
|||
properties: { |
|||
dialogVisible: { |
|||
type: Boolean, |
|||
value: false, |
|||
observer: function (value) { |
|||
this.setData({ |
|||
visible: !this.data.visible |
|||
}) |
|||
} |
|||
}, |
|||
title: { |
|||
type: String, |
|||
value: '' |
|||
}, |
|||
content: { |
|||
type: Array, |
|||
value: [] |
|||
}, |
|||
confirmText: { |
|||
type: String, |
|||
value: '' |
|||
}, |
|||
cancelText: { |
|||
type: String, |
|||
value: '' |
|||
} |
|||
}, |
|||
pageLifetimes: { |
|||
show () { |
|||
|
|||
}, |
|||
hide () { |
|||
|
|||
} |
|||
}, |
|||
lifetimes: { |
|||
attached () { |
|||
|
|||
}, |
|||
detached () { |
|||
|
|||
} |
|||
}, |
|||
methods: { |
|||
close () { |
|||
this.triggerEvent('close') |
|||
this.setData({ |
|||
visible: false |
|||
}) |
|||
}, |
|||
confirm () { |
|||
this.triggerEvent('confirm') |
|||
this.setData({ |
|||
visible: false |
|||
}) |
|||
}, |
|||
catchmove () { |
|||
|
|||
} |
|||
} |
|||
}) |
|||
@ -0,0 +1,6 @@ |
|||
{ |
|||
"component": true, |
|||
"usingComponents": { |
|||
"wux-icon": "../../../../dist/icon/index" |
|||
} |
|||
} |
|||
@ -0,0 +1,16 @@ |
|||
<cover-view class="notice" wx:if="{{visible}}" catchmove="catchmove"> |
|||
<cover-view class="box"> |
|||
<cover-view class="close"> |
|||
<cover-image bindtap="close" src="../../images/delete.png" /> |
|||
</cover-view> |
|||
<cover-view class="title">{{title}}</cover-view> |
|||
<cover-view class="content"> |
|||
<cover-view wx:for="{{content}}" wx:key="index" wx:for-item="item" wx:for-index="index">{{item}}</cover-view> |
|||
</cover-view> |
|||
<cover-view wx:if="{{cancelText !== '' || confirmText !== ''}}" class="border"></cover-view> |
|||
<cover-view class="operation"> |
|||
<cover-view wx:if="{{cancelText !== ''}}" class="cancel" bindtap="close">{{cancelText}}</cover-view> |
|||
<cover-view wx:if="{{confirmText !== ''}}" class="confirm" bindtap="confirm">{{confirmText}}</cover-view> |
|||
</cover-view> |
|||
</cover-view> |
|||
</cover-view> |
|||
@ -0,0 +1,84 @@ |
|||
.notice { |
|||
width: 100%; |
|||
height: 100vh; |
|||
position: fixed; |
|||
z-index: 100; |
|||
left: 0; |
|||
top: 0; |
|||
background: rgba(0,0,0, 0.4); |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
} |
|||
.notice .box { |
|||
width: 490rpx; |
|||
background: #fff; |
|||
border-radius: 16rpx; |
|||
overflow: hidden; |
|||
padding: 0 20rpx; |
|||
position: relative; |
|||
} |
|||
.notice .box .close { |
|||
width:100%; |
|||
height: 60rpx; |
|||
display: flex; |
|||
justify-content: flex-end; |
|||
align-items: center; |
|||
} |
|||
.notice .box .close cover-image { |
|||
width: 40rpx; |
|||
height: 40rpx; |
|||
object-fit: cover; |
|||
} |
|||
.notice .box .title { |
|||
height: 60rpx; |
|||
line-height: 60rpx; |
|||
width: 100%; |
|||
text-align:center; |
|||
font-size: 36rpx; |
|||
color: #333; |
|||
margin-bottom: 23rpx; |
|||
} |
|||
.notice .box .content { |
|||
height: auto; |
|||
width: 100%; |
|||
padding-bottom: 35rpx; |
|||
} |
|||
.notice .box .content cover-view { |
|||
font-size: 30rpx; |
|||
line-height: 50rpx; |
|||
height: 50rpx; |
|||
width: 100%; |
|||
text-align: center; |
|||
color: #666; |
|||
} |
|||
.notice .box .border { |
|||
width: 100%; |
|||
height: 0; |
|||
border: 0.5rpx solid #eaeaea; |
|||
border-bottom: 1rpx solid transparent; |
|||
position: absolute; |
|||
left:0; |
|||
bottom: 105rpx; |
|||
} |
|||
.notice .box .operation { |
|||
width: calc(100% - 40rpx); |
|||
height: 75rpx; |
|||
padding: 15rpx 0; |
|||
display: flex; |
|||
justify-content: space-around; |
|||
align-items: center; |
|||
margin-left: 20rpx |
|||
} |
|||
.notice .box .operation cover-view { |
|||
flex: 1; |
|||
color: #999; |
|||
font-size: 36rpx; |
|||
width: 49%; |
|||
height: 100%; |
|||
line-height: 75rpx; |
|||
text-align:center; |
|||
} |
|||
.notice .box .operation .confirm{ |
|||
color: #04BCA0; |
|||
} |
|||
@ -0,0 +1,89 @@ |
|||
Component({ |
|||
data: { |
|||
visible: false, |
|||
textareaValue: '' |
|||
}, |
|||
properties: { |
|||
noticeVerifyVisible: { |
|||
type: Boolean, |
|||
value: false, |
|||
observer: function (newValue) { |
|||
this.setData({ |
|||
visible: !this.data.visible |
|||
}) |
|||
} |
|||
}, |
|||
title: { |
|||
type: String, |
|||
value: '' |
|||
}, |
|||
cancelText: { |
|||
type: String, |
|||
value: '' |
|||
}, |
|||
confirmText: { |
|||
type: String, |
|||
value: '' |
|||
}, |
|||
tipVisible: { |
|||
type: Boolean, |
|||
value: false |
|||
}, |
|||
tipValue: { |
|||
type: String, |
|||
value: '*通过后直接入群，不通过无法入群' |
|||
} |
|||
}, |
|||
lifetimes: { |
|||
attached () { |
|||
|
|||
}, |
|||
deattached () { |
|||
|
|||
} |
|||
}, |
|||
pageLifetimes: { |
|||
show () { |
|||
|
|||
}, |
|||
hide () { |
|||
|
|||
} |
|||
}, |
|||
methods: { |
|||
close () { |
|||
this.triggerEvent('close', {data: this.data.textareaValue}) |
|||
this.setData({ |
|||
visible: !this.data.visible |
|||
}) |
|||
}, |
|||
confirm () { |
|||
if (this.data.textareaValue === '') { |
|||
wx.showToast({ |
|||
title: '备注不能为空', |
|||
icon: 'none', |
|||
duration: 2000 |
|||
}) |
|||
return false |
|||
} |
|||
this.triggerEvent('confirm', {data: this.data.textareaValue}) |
|||
this.setData({ |
|||
visible: !this.data.visible |
|||
}) |
|||
}, |
|||
textareaInput (e) { |
|||
this.setData({ |
|||
textareaValue: e.detail.value |
|||
}) |
|||
console.log(this.data.textareaValue) |
|||
}, |
|||
closeDialog () { |
|||
this.setData({ |
|||
visible: !this.data.visible |
|||
}) |
|||
}, |
|||
move () { |
|||
|
|||
} |
|||
} |
|||
}) |
|||
@ -0,0 +1,3 @@ |
|||
{ |
|||
"component": true |
|||
} |
|||
@ -0,0 +1,16 @@ |
|||
<view class="notice-verify" wx:if="{{visible}}" capture-catch:touchmove="move"> |
|||
<view class="content"> |
|||
<view class="close" bindtap="closeDialog"> |
|||
<image src="../../images/delete.png" /> |
|||
</view> |
|||
<view class="title">{{title}}</view> |
|||
<view class="textarea"> |
|||
<textarea value="{{textareaValue}}" bindblur="textareaInput" bindinput="textareaInput" placeholder-class="textarea-placeholder" placeholder="备注（必填 30字以内）" maxlength="30"/> |
|||
</view> |
|||
<view class="note" wx:if="{{tipVisible}}">{{tipValue}}</view> |
|||
<view class="footer"> |
|||
<view class="unpass" bindtap="unpass" wx:if="{{cancelText != ''}}" bindtap="close">{{cancelText}}</view> |
|||
<view class="pass" bindtap="pass" wx:if="{{confirmText != ''}}" bindtap="confirm">{{confirmText}}</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
@ -0,0 +1,100 @@ |
|||
.notice-verify { |
|||
width: 100%; |
|||
height: 100vh; |
|||
position: fixed; |
|||
left: 0; |
|||
top: 0; |
|||
background: rgba(0,0,0,0.3); |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
z-index: 1000; |
|||
} |
|||
.notice-verify .content { |
|||
width: 610rpx; |
|||
height: auto; |
|||
border-radius: 16rpx; |
|||
background: #fff; |
|||
box-sizing: border-box; |
|||
padding: 0 30rpx; |
|||
} |
|||
.notice-verify .content .close { |
|||
width: 100%; |
|||
height: 62rpx; |
|||
display: flex; |
|||
justify-content: flex-end; |
|||
align-items: center; |
|||
} |
|||
.notice-verify .content .close image { |
|||
width: 40rpx; |
|||
height: 40rpx; |
|||
object-fit:cover; |
|||
position: relative; |
|||
left: 7px; |
|||
top: 2px; |
|||
} |
|||
.notice-verify .content .title { |
|||
font-size: 40rpx; |
|||
color: #333; |
|||
line-height: 57rpx; |
|||
height: 57rpx; |
|||
width:100%; |
|||
text-align:center; |
|||
margin-bottom: 26rpx; |
|||
} |
|||
.notice-verify .content .textarea { |
|||
width: 100%; |
|||
height: 345rpx; |
|||
border-radius: 16rpx; |
|||
background: #f7f7f7; |
|||
box-sizing: border-box; |
|||
padding: 27rpx 17rpx 0; |
|||
margin-bottom: 20rpx; |
|||
} |
|||
.notice-verify .content .textarea textarea { |
|||
width: 100%; |
|||
height: 100%; |
|||
font-size: 32rpx; |
|||
line-height: 44rpx; |
|||
color: #666; |
|||
} |
|||
.notice-verify .content .textarea .textarea-placeholder { |
|||
font-size: 28rpx; |
|||
color: #999; |
|||
line-height: 40rpx; |
|||
} |
|||
.notice-verify .content .note { |
|||
font-size: 24rpx; |
|||
color: #999; |
|||
height:58rpx; |
|||
line-height: 58rpx; |
|||
} |
|||
.notice-verify .content .footer { |
|||
width: 100%; |
|||
height: 107rpx; |
|||
box-sizing: border-box; |
|||
padding: 15rpx 0; |
|||
display: flex; |
|||
justify-content: space-around; |
|||
align-items: center; |
|||
border-top: 1rpx solid #eaeaea; |
|||
} |
|||
.notice-verify .content .unpass { |
|||
height: 100%; |
|||
line-height: 77rpx; |
|||
font-size: 36rpx; |
|||
flex: 1; |
|||
color: #999; |
|||
text-align: center; |
|||
} |
|||
.notice-verify .content .unpass + .pass { |
|||
border-left: 1rpx solid #eaeaea; |
|||
} |
|||
.notice-verify .content .pass { |
|||
height: 100%; |
|||
line-height: 77rpx; |
|||
font-size: 36rpx; |
|||
flex: 1; |
|||
color: #04BCA0; |
|||
text-align: center; |
|||
} |
|||
@ -0,0 +1,72 @@ |
|||
let lastY = 0 // 上一次滚动的位置
|
|||
let scale = 750 / wx.getSystemInfoSync().windowWidth // rpx转化比例
|
|||
Component({ |
|||
options: { |
|||
multipleSlots: true |
|||
}, |
|||
data: { |
|||
scrollTop: 0, |
|||
translateHeight: 0, // 平移距离
|
|||
state: -1, |
|||
lastY: 0, |
|||
enablePullDown: true |
|||
}, |
|||
properties: { |
|||
// 触发下拉刷新的距离
|
|||
upperDistance: { |
|||
type: Number, |
|||
value: 150 |
|||
} |
|||
}, |
|||
methods: { |
|||
// 监听滚动，获取scrollTop
|
|||
onPageScroll (e) { |
|||
this.data.scrollTop = e.scrollTop |
|||
}, |
|||
touchStart (e) { |
|||
this.data.lastY = e.touches[0].clientY |
|||
if (this.data.scrollTop === 0) { |
|||
this.data.enablePullDown = true |
|||
} else { |
|||
this.data.enablePullDown = false |
|||
} |
|||
}, |
|||
touchMove (e) { |
|||
let clientY = e.touches[0].clientY |
|||
let offset = clientY - this.data.lastY |
|||
if (this.data.scrollTop > 0 || offset < 0) return |
|||
this.data.translateHeight += offset |
|||
this.data.state = 0 |
|||
this.data.lastY = e.touches[0].clientY |
|||
if (this.data.enablePullDown) { |
|||
if (this.data.translateHeight - this.data.scrollTop * scale > this.data.upperDistance) { |
|||
this.data.state = 1 |
|||
} |
|||
this.setData({ |
|||
translateHeight: this.data.translateHeight > 80 ? 80 : this.data.translateHeight, |
|||
state: this.data.state |
|||
}) |
|||
} |
|||
}, |
|||
touchEnd (e) { |
|||
if (this.data.translateHeight - this.data.scrollTop * scale > this.data.upperDistance) { |
|||
if (this.data.enablePullDown) { |
|||
this.setData({ |
|||
translateHeight: 80, |
|||
state: 2 |
|||
}) |
|||
this.triggerEvent('scrolltoupper') |
|||
} |
|||
} else if (this.data.scrollTop <= 0) { |
|||
this.stopRefresh() |
|||
} |
|||
}, |
|||
// 停止刷新
|
|||
stopRefresh () { |
|||
this.setData({ |
|||
translateHeight: 0, |
|||
state: -1 |
|||
}) |
|||
} |
|||
} |
|||
}) |
|||
@ -0,0 +1,3 @@ |
|||
{ |
|||
"component": true |
|||
} |
|||
@ -0,0 +1,9 @@ |
|||
<view class="scroll" bindtouchstart="touchStart" bindtouchmove="touchMove" bindtouchend="touchEnd"> |
|||
<view class="animation"> |
|||
<image class="loading" src="../../images/loading.gif" /> |
|||
<text class="tip">{{state === 0 ? '下拉刷新' : state === 1? '松开刷新' : '刷新中...'}}</text> |
|||
</view> |
|||
<view style="transform: translateY({{translateHeight}}rpx)"> |
|||
<slot name="content"></slot> |
|||
</view> |
|||
</view> |
|||
@ -0,0 +1,30 @@ |
|||
.scroll { |
|||
width: 100%; |
|||
margin-top: 94rpx; |
|||
margin-bottom: 98rpx; |
|||
} |
|||
.animation { |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
width: 100%; |
|||
height: 80rpx; |
|||
background-color: #f7f7f7; |
|||
margin-bottom: -80rpx; |
|||
} |
|||
.loading { |
|||
width: 30rpx; |
|||
height: 30rpx; |
|||
object-fit: cover; |
|||
} |
|||
.loading image { |
|||
width: 100%; |
|||
height: 100%; |
|||
object-fit: cover; |
|||
} |
|||
|
|||
.tip { |
|||
margin-left: 10rpx; |
|||
color: #999; |
|||
font-size: 26rpx; |
|||
} |
|||
|
After Width: | Height: | Size: 36 KiB |
|
After Width: | Height: | Size: 132 KiB |
|
After Width: | Height: | Size: 631 B |
|
After Width: | Height: | Size: 5.8 KiB |
|
After Width: | Height: | Size: 6.7 KiB |
|
After Width: | Height: | Size: 4.6 KiB |
|
After Width: | Height: | Size: 2.3 KiB |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 3.5 KiB |
|
After Width: | Height: | Size: 2.0 KiB |
|
After Width: | Height: | Size: 2.1 KiB |
|
After Width: | Height: | Size: 2.2 KiB |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 12 KiB |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 2.0 KiB |
|
After Width: | Height: | Size: 2.1 KiB |
|
After Width: | Height: | Size: 1.9 KiB |
|
After Width: | Height: | Size: 319 KiB |
|
After Width: | Height: | Size: 19 KiB |
|
After Width: | Height: | Size: 1.6 KiB |
|
After Width: | Height: | Size: 3.8 KiB |
|
After Width: | Height: | Size: 8.4 KiB |
|
After Width: | Height: | Size: 7.3 KiB |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 970 B |
|
After Width: | Height: | Size: 9.2 KiB |
|
After Width: | Height: | Size: 3.5 KiB |
|
After Width: | Height: | Size: 80 KiB |
|
After Width: | Height: | Size: 129 KiB |
|
After Width: | Height: | Size: 14 KiB |
|
After Width: | Height: | Size: 31 KiB |
|
After Width: | Height: | Size: 1.7 KiB |
|
After Width: | Height: | Size: 11 KiB |
|
After Width: | Height: | Size: 604 B |
@ -0,0 +1,299 @@ |
|||
import { $wuxActionSheet } from '../../../../dist/index' |
|||
import { addTopic } from '../../utils/api' |
|||
const QQMapWX = require('../../utils/qqmap-wx-jssdk') |
|||
const config = require('../../../../utils/config') |
|||
|
|||
Page({ |
|||
data: { |
|||
topicValue: '', |
|||
imageList: [], |
|||
qqmapsdk: '', |
|||
addressValue: '', |
|||
imageId: 1, |
|||
location: { |
|||
latitude: '', |
|||
longitude: '' |
|||
}, |
|||
groupId: '', |
|||
groupName: '', |
|||
addTopicPrevious: 0 |
|||
}, |
|||
onShow () { |
|||
|
|||
}, |
|||
onLoad (options) { |
|||
const qqmapsdk = new QQMapWX({ |
|||
key: 'CMJBZ-4DECI-JXGGN-5B4WU-QLV2H-B5BEJ' |
|||
}) |
|||
this.setData({ |
|||
qqmapsdk, |
|||
groupId: options.groupId, |
|||
groupName: options.groupName |
|||
}) |
|||
this.getLocation() |
|||
}, |
|||
// 话题内容框 值双向绑定
|
|||
bindTopicValue (e) { |
|||
this.setData({ |
|||
topicValue: e.detail.value |
|||
}) |
|||
console.log(this.data.topicValue) |
|||
}, |
|||
// 地址框 值双向绑定
|
|||
bindAddressValue (e) { |
|||
this.setData({ |
|||
addressValue: e.detail.value |
|||
}) |
|||
console.log(this.data.addressValue) |
|||
}, |
|||
// 选择图片
|
|||
chooseImage () { |
|||
const that = this |
|||
$wuxActionSheet().showSheet({ |
|||
buttons: [{ |
|||
text: '拍照' |
|||
}, |
|||
{ |
|||
text: '从相册中获取' |
|||
}, |
|||
], |
|||
buttonClicked(index, item) { |
|||
if (index === 0) { |
|||
wx.chooseImage({ |
|||
count: 1, |
|||
sizeType: ['original', 'compressed'], |
|||
sourceType: ['camera'], |
|||
success (res) { |
|||
const imageList = [...that.data.imageList] |
|||
imageList.push({ |
|||
img: res.tempFilePaths[0], |
|||
upload: true, |
|||
id: that.data.imageId++, |
|||
ossUrl: '' |
|||
}) |
|||
that.setData({ |
|||
imageList |
|||
}) |
|||
wx.uploadFile({ |
|||
url: config.BASEURL() + 'group/topic/upload', |
|||
filePath: res.tempFilePaths[0], |
|||
name: 'file', |
|||
header: { |
|||
'Content-Type': 'multipart/form-data' |
|||
}, |
|||
success (fileres) { |
|||
const data = JSON.parse(fileres.data) |
|||
if (data.code === 0 && data.msg === 'success') { |
|||
imageList[imageList.length - 1].ossUrl = data.data |
|||
imageList[imageList.length - 1].upload = false |
|||
} else { |
|||
imageList.pop() |
|||
wx.showToast({ |
|||
title: '上传图片失败，请重试', |
|||
icon: 'none', |
|||
duration: 2000 |
|||
}) |
|||
} |
|||
that.setData({ |
|||
imageList |
|||
}) |
|||
}, |
|||
fail (err) { |
|||
console.log(err) |
|||
imageList.pop() |
|||
wx.showToast({ |
|||
title: '上传图片失败，请重试', |
|||
icon: 'none', |
|||
duration: 2000 |
|||
}) |
|||
that.setData({ |
|||
imageList |
|||
}) |
|||
} |
|||
}) |
|||
} |
|||
}) |
|||
} else if (index === 1) { |
|||
wx.chooseImage({ |
|||
count: 3 - that.data.imageList.length, |
|||
sizeType: ['original', 'compressed'], |
|||
sourceType: ['album'], |
|||
success (res) { |
|||
let imageList = [] |
|||
res.tempFilePaths.forEach(item => { |
|||
imageList.push({ |
|||
img: item, |
|||
upload: true, |
|||
id: that.data.imageId++, |
|||
ossUrl: '' |
|||
}) |
|||
}) |
|||
that.setData({ |
|||
imageList: [...that.data.imageList, ...imageList] |
|||
}) |
|||
imageList.forEach((item, index) => { |
|||
(function (index) { |
|||
wx.uploadFile({ |
|||
url: `${config.BASEURL()}group/topic/upload`, |
|||
filePath: imageList[index].img, |
|||
name: 'file', |
|||
header: { |
|||
'Content-Type': 'multipart/form-data' |
|||
}, |
|||
success (fileRes) { |
|||
const data = JSON.parse(fileRes.data) |
|||
if (data.code === 0 && data.msg === 'success') { |
|||
imageList[index].ossUrl = data.data |
|||
imageList[index].upload = false |
|||
|
|||
} else { |
|||
imageList.splice(index, 1) |
|||
wx.showToast({ |
|||
title: '上传图片失败，请重试', |
|||
icon: 'none', |
|||
duration: 2000 |
|||
}) |
|||
} |
|||
that.data.imageList = that.data.imageList.slice(0, that.data.imageList.length - res.tempFilePaths.length) |
|||
that.setData({ |
|||
imageList: [...that.data.imageList, ...imageList] |
|||
}) |
|||
}, |
|||
fail (err) { |
|||
console.log(err) |
|||
imageList.splice(index, 1) |
|||
wx.showToast({ |
|||
title: '上传图片失败，请重试', |
|||
icon: 'none', |
|||
duration: 2000 |
|||
}) |
|||
that.data.imageList = that.data.imageList.slice(0, that.data.imageList.length - res.tempFilePaths.length) |
|||
that.setData({ |
|||
imageList: [...that.data.imageList, ...imageList] |
|||
}) |
|||
} |
|||
}) |
|||
})(index) |
|||
}) |
|||
} |
|||
}) |
|||
} |
|||
return true |
|||
}, |
|||
cancelText: '取消', |
|||
cancel() {}, |
|||
destructiveButtonClicked() {}, |
|||
}) |
|||
}, |
|||
// 获取经纬度
|
|||
getLocation () { |
|||
wx.getLocation({ |
|||
type: 'gcj02', |
|||
success: (res) => { |
|||
console.log('经纬度', res) |
|||
this.reverseGeocoder(res) |
|||
this.setData({ |
|||
location: { |
|||
latitude: res.latitude, |
|||
longitude: res.longitude |
|||
} |
|||
}) |
|||
} |
|||
}) |
|||
}, |
|||
// 逆地址解析
|
|||
reverseGeocoder ({latitude, longitude}) { |
|||
this.data.qqmapsdk.reverseGeocoder({ |
|||
location: { |
|||
latitude, |
|||
longitude |
|||
}, |
|||
success: (res) => { |
|||
console.log('逆地址解析', res) |
|||
if (res.message === 'query ok') { |
|||
this.setData({ |
|||
addressValue: res.result.address |
|||
}) |
|||
} |
|||
} |
|||
}) |
|||
}, |
|||
throttleAddTopic () { |
|||
let now = new Date() |
|||
if (now - this.data.addTopicPrevious > 2000) { |
|||
this.addTopic() |
|||
this.data.addTopicPrevious = now |
|||
} |
|||
}, |
|||
// 添加话题事件
|
|||
addTopic () { |
|||
if (this.data.topicValue === '') { |
|||
wx.showToast({ |
|||
title: '请输入-话题内容', |
|||
icon: 'none', |
|||
duration: 2000 |
|||
}) |
|||
return false |
|||
} else if (this.data.addressValue === '') { |
|||
wx.showToast({ |
|||
title: '请输入-地址', |
|||
icon: 'none', |
|||
duration: 2000 |
|||
}) |
|||
return false |
|||
} |
|||
const imagesList = [] |
|||
if (this.data.imageList.length > 0) { |
|||
const isUploadingStatus = this.data.imageList.some(item => item.upload) |
|||
if (isUploadingStatus) { |
|||
wx.showToast({ |
|||
title: '请等待图片上传完成', |
|||
icon: 'none', |
|||
duration: 2000 |
|||
}) |
|||
return false |
|||
} |
|||
this.data.imageList.forEach(item => { |
|||
imagesList.push(item.ossUrl) |
|||
}) |
|||
} |
|||
const para = { |
|||
topicContent: this.data.topicValue, |
|||
topicAddress: this.data.addressValue, |
|||
topicLatitude: this.data.location.latitude, |
|||
topicLongitude: this.data.location.longitude, |
|||
groupId: this.data.groupId, |
|||
groupName: this.data.groupName, |
|||
images: imagesList |
|||
} |
|||
wx.showLoading({ |
|||
title: '加载中', |
|||
}) |
|||
addTopic(para).then(res => { |
|||
wx.hideLoading() |
|||
console.log(res) |
|||
wx.showToast({ |
|||
title: '话题发布成功', |
|||
icon: 'none', |
|||
duration: 2000 |
|||
}) |
|||
var pages = getCurrentPages() |
|||
var prePages = pages[pages.length - 2] |
|||
setTimeout(() => { |
|||
prePages.pullRefreshGetTopicList() |
|||
wx.navigateBack() |
|||
}, 1000) |
|||
}).catch(err => { |
|||
console.log(err) |
|||
}) |
|||
}, |
|||
// 删除图片
|
|||
deleteImage (e) { |
|||
const index = this.data.imageList.findIndex((item,index) => index === e.currentTarget.dataset.index) |
|||
this.data.imageList.splice(index, 1) |
|||
const imageList = this.data.imageList |
|||
this.setData({ |
|||
imageList |
|||
}) |
|||
} |
|||
}) |
|||
@ -0,0 +1,6 @@ |
|||
{ |
|||
"usingComponents": { |
|||
"wux-actionsheet": "../../../../dist/actionsheet/index" |
|||
}, |
|||
"navigationBarTitleText": "我有话说" |
|||
} |
|||
@ -0,0 +1,33 @@ |
|||
<view class="add-topic"> |
|||
<view class="topic"> |
|||
<textarea value="{{topicValue}}" bindblur="bindTopicValue" bindinput="bindTopicValue" maxlength="500"> |
|||
<view wx:if="{{topicValue.length == 0}}" class="placeholder-textarea"> |
|||
<view>1、发起您的话题， 请将话题描述清晰</view> |
|||
<view>2、在社群得到帮助、建议，能有助于更快地解决问题</view> |
|||
<view>3、还有机会被转发到【党群议事】让问题解决更快</view> |
|||
</view> |
|||
</textarea> |
|||
<view class="picture"> |
|||
<view class="image-box" wx:for="{{imageList}}" wx:key="index" wx:for-item="item" wx:for-index="index"> |
|||
<image src="{{item.img}}" /> |
|||
<image wx:if="{{item.upload}}" class="loading" src="../../images/loading.gif" /> |
|||
<image bindtap="deleteImage" data-index="{{index}}" wx:else class="delete-image" src="../../images/icon_close.png" /> |
|||
</view> |
|||
<view class="image-box"> |
|||
<image bindtap="chooseImage" wx:if="{{imageList.length <= 2}}" src="../../images/ig_tianjiatupian@2x.png" /> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="address"> |
|||
<textarea value="{{addressValue}}" bindblur="bindAddressValue" bindinput="bindAddressValue" placeholder-class="placeholder-textarea" placeholder="请输入定位地址" /> |
|||
<view class="tip"> |
|||
<image src="../../images/ic_dingwei@2x.png" /> |
|||
<text>话题定位</text> |
|||
</view> |
|||
</view> |
|||
<view class="topic-button"> |
|||
<button bindtap="throttleAddTopic" type="default" size="defaultSize" hover-class="hover-button">发起话题</button> |
|||
</view> |
|||
</view> |
|||
|
|||
<wux-actionsheet id="wux-actionsheet" /> |
|||
@ -0,0 +1,143 @@ |
|||
page { |
|||
width: 100%; |
|||
height:100%; |
|||
} |
|||
.add-topic { |
|||
width: 100%; |
|||
height: 100%; |
|||
background: #f7f7f7; |
|||
box-sizing: border-box; |
|||
padding: 20rpx; |
|||
} |
|||
.add-topic .topic { |
|||
width: 100%; |
|||
height: 640rpx; |
|||
background: #fff; |
|||
border-radius: 16rpx; |
|||
box-sizing: border-box; |
|||
padding: 45rpx 20rpx 0; |
|||
} |
|||
.add-topic .topic textarea { |
|||
color: #333; |
|||
font-size: 34rpx; |
|||
line-height: 46rpx; |
|||
width: 100%; |
|||
height: 340rpx; |
|||
box-sizing: border-box; |
|||
padding-bottom: 20rpx; |
|||
position: relative; |
|||
} |
|||
.add-topic .topic textarea .placeholder-textarea { |
|||
font-size: 28rpx; |
|||
line-height: 46rpx; |
|||
color: #999; |
|||
position: absolute; |
|||
left: 0; |
|||
top: 0; |
|||
} |
|||
.add-topic .topic .picture { |
|||
display: flex; |
|||
height: 255rpx; |
|||
box-sizing: border-box; |
|||
padding: 20rpx 0; |
|||
} |
|||
.add-topic .topic .picture .image-box, .add-topic .topic .picture image { |
|||
width: 215rpx; |
|||
height: 215rpx; |
|||
object-fit:cover; |
|||
border-radius: 8rpx; |
|||
} |
|||
.add-topic .topic .picture .image-box image { |
|||
width: 215rpx; |
|||
height: 215rpx; |
|||
object-fit:cover; |
|||
} |
|||
.add-topic .topic .picture .image-box { |
|||
position: relative; |
|||
} |
|||
.add-topic .topic .picture .image-box .loading { |
|||
position: absolute; |
|||
left: 25%; |
|||
top: 25%; |
|||
width: 50%; |
|||
height: 50%; |
|||
} |
|||
.add-topic .topic .picture .image-box .delete-image { |
|||
width: 40rpx; |
|||
height: 40rpx; |
|||
position: absolute; |
|||
right: -20rpx; |
|||
top: -20rpx; |
|||
} |
|||
.add-topic .topic .picture .image-box + .image-box { |
|||
margin-left: 10rpx; |
|||
} |
|||
|
|||
.add-topic .address { |
|||
width: 100%; |
|||
height: 210rpx; |
|||
background: #fff; |
|||
border-radius: 16rpx; |
|||
margin-top: 20rpx; |
|||
box-sizing: border-box; |
|||
padding: 0 20rpx; |
|||
} |
|||
.add-topic .address textarea { |
|||
width: 100%; |
|||
height: 122rpx; |
|||
box-sizing: border-box; |
|||
padding-top: 35rpx; |
|||
font-size: 34rpx; |
|||
color: #333; |
|||
line-height: 46rpx; |
|||
} |
|||
.add-topic .address .placeholder-textarea { |
|||
font-size: 28rpx; |
|||
line-height: 46rpx; |
|||
color: #999; |
|||
} |
|||
.add-topic .address .tip { |
|||
width: 100%; |
|||
height: 78rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
} |
|||
.add-topic .address .tip image { |
|||
width: 22rpx; |
|||
height: 26rpx; |
|||
object-fit: cover; |
|||
} |
|||
.add-topic .address .tip text { |
|||
font-size: 26rpx; |
|||
color: #999; |
|||
margin-left: 14rpx; |
|||
} |
|||
|
|||
.add-topic .topic-button { |
|||
width: 100%; |
|||
height: 85rpx; |
|||
display:flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
position: fixed; |
|||
bottom: 100rpx; |
|||
left: 0; |
|||
} |
|||
.add-topic .topic-button button { |
|||
width: 560rpx; |
|||
height: 85rpx; |
|||
line-height: 85rpx; |
|||
text-align:center; |
|||
color: #fff; |
|||
font-size: 36rpx; |
|||
border-radius: 16rpx; |
|||
background: linear-gradient(to right, #F40C0C, #FF4E4E) |
|||
} |
|||
.add-topic .topic-button .hover-button { |
|||
background: red; |
|||
} |
|||
|
|||
.wux-actionsheet__button { |
|||
font-size: 34rpx !important; |
|||
color: #333 !important; |
|||
} |
|||
@ -0,0 +1,283 @@ |
|||
import { $wuxActionSheet } from '../../../../dist/index' |
|||
import { getAssociationDetail, modifyAvatar, disbandAssociation, withdrawGroup, getAssociationMember } from '../../utils/api' |
|||
const config = require('../../../../utils/config') |
|||
|
|||
const app = getApp() |
|||
Page({ |
|||
data: { |
|||
groupAvatar: '../../images/ic_tianjiatouxiang@2x.png', |
|||
userInfo: { |
|||
id: '', |
|||
groupName: '', |
|||
groupAvatar: '', |
|||
groupCategory: '1', |
|||
nickname: '', |
|||
totalNum: '', |
|||
topicNum: '', |
|||
changeToIssueNum: '', |
|||
lordFlag: '' |
|||
}, |
|||
groupId: '', |
|||
noticeVerifyVisible: false, |
|||
dialogVisible: false, |
|||
checkPenddingNum: 0 |
|||
}, |
|||
onShow () { |
|||
this.getCheckMemberNum() |
|||
}, |
|||
onLoad (options) { |
|||
this.setData({ |
|||
groupId: options.groupId |
|||
}) |
|||
this.getAssociationDetail() |
|||
}, |
|||
onHide () { |
|||
|
|||
}, |
|||
// 跳转到 群介绍
|
|||
navigateToIntroduce () { |
|||
wx.navigateTo({ |
|||
url: `/subpages/association/pages/joinassociation/joinassociation?type=change&id=${this.data.userInfo.id}` |
|||
}) |
|||
}, |
|||
// 跳转到 群成员
|
|||
navigateToMember () { |
|||
wx.navigateTo({ |
|||
url: `/subpages/association/pages/associationMember/associationMember?id=${this.data.userInfo.id}&groupCategory=${this.data.userInfo.groupCategory}` |
|||
}) |
|||
}, |
|||
// 跳转到 邀请好友
|
|||
navigateToInvitation () { |
|||
wx.navigateTo({ |
|||
url: `/subpages/association/pages/inviteFriend/inviteFriend?id=${this.data.userInfo.id}` |
|||
}) |
|||
}, |
|||
// 跳转到 入群审核
|
|||
navigateToVerify () { |
|||
wx.navigateTo({ |
|||
url: `/subpages/association/pages/incomingVerify/incomingVerify?id=${this.data.userInfo.id}` |
|||
}) |
|||
}, |
|||
// 选择图片
|
|||
chooseImage () { |
|||
if (app.globalData.groupInfo.lordFlag === '0') { |
|||
return false |
|||
} |
|||
const that = this |
|||
$wuxActionSheet().showSheet({ |
|||
buttons: [{ |
|||
text: '拍照' |
|||
}, |
|||
{ |
|||
text: '从相册中获取' |
|||
}, |
|||
], |
|||
className: 'dialog-class', |
|||
buttonClicked(index, item) { |
|||
if (index === 0) { |
|||
wx.chooseImage({ |
|||
count: 1, |
|||
sizeType: ['original', 'compressed'], |
|||
sourceType: ['camera'], |
|||
success (res) { |
|||
wx.uploadFile({ |
|||
url: config.BASEURL() + 'group/topic/upload', |
|||
filePath: res.tempFilePaths[0], |
|||
name: 'file', |
|||
header: { |
|||
'Content-Type': 'multipart/form-data' |
|||
}, |
|||
success (fileres) { |
|||
const data = JSON.parse(fileres.data) |
|||
if (data.code === 0 && data.msg === 'success') { |
|||
that.modifyAvatar(data.data) |
|||
} else { |
|||
wx.showToast({ |
|||
title: '上传图片失败，请重试', |
|||
icon: 'none', |
|||
duration: 2000 |
|||
}) |
|||
} |
|||
}, |
|||
fail (err) { |
|||
console.log(err) |
|||
wx.showToast({ |
|||
title: '上传图片失败，请重试', |
|||
icon: 'none', |
|||
duration: 2000 |
|||
}) |
|||
} |
|||
}) |
|||
|
|||
} |
|||
}) |
|||
} else if (index === 1) { |
|||
wx.chooseImage({ |
|||
count: 1, |
|||
sizeType: ['original', 'compressed'], |
|||
sourceType: ['album'], |
|||
success (res) { |
|||
wx.uploadFile({ |
|||
url: config.BASEURL() + 'group/topic/upload', |
|||
filePath: res.tempFilePaths[0], |
|||
name: 'file', |
|||
header: { |
|||
'Content-Type': 'multipart/form-data' |
|||
}, |
|||
success (fileres) { |
|||
const data = JSON.parse(fileres.data) |
|||
if (data.code === 0 && data.msg === 'success') { |
|||
that.modifyAvatar(data.data) |
|||
} else { |
|||
wx.showToast({ |
|||
title: '上传图片失败，请重试', |
|||
icon: 'none', |
|||
duration: 2000 |
|||
}) |
|||
} |
|||
}, |
|||
fail (err) { |
|||
console.log(err) |
|||
wx.showToast({ |
|||
title: '上传图片失败，请重试', |
|||
icon: 'none', |
|||
duration: 2000 |
|||
}) |
|||
} |
|||
}) |
|||
} |
|||
}) |
|||
} |
|||
return true |
|||
}, |
|||
cancelText: '取消', |
|||
cancel() {}, |
|||
destructiveButtonClicked() {}, |
|||
}) |
|||
}, |
|||
// 获取群详情
|
|||
getAssociationDetail() { |
|||
getAssociationDetail(this.data.groupId).then(res => { |
|||
console.log('群详情', res) |
|||
const userInfo = {} |
|||
for (const key in res.data) { |
|||
userInfo[key] = res.data[key] |
|||
} |
|||
app.globalData.groupInfo = { |
|||
groupAvatar: res.data.groupAvatar, |
|||
groupLeader: res.data.nickname, |
|||
groupName: res.data.groupName, |
|||
groupId: res.data.id, |
|||
lordFlag: res.data.lordFlag |
|||
} |
|||
this.setData({ |
|||
userInfo |
|||
}) |
|||
}).catch(err => { |
|||
console.log(err) |
|||
}) |
|||
}, |
|||
// 修改群头像
|
|||
modifyAvatar(groupAvatar) { |
|||
const para = { |
|||
id: this.data.userInfo.id, |
|||
groupAvatar |
|||
} |
|||
wx.showLoading({ |
|||
title: '加载中', |
|||
}) |
|||
modifyAvatar(para).then(res => { |
|||
wx.hideLoading() |
|||
console.log('修改群头像', res) |
|||
wx.showToast({ |
|||
title: '修改群头像成功', |
|||
icon: 'none', |
|||
duration: 2000 |
|||
}) |
|||
const userInfo = Object.assign(this.data.userInfo, { groupAvatar }) |
|||
this.setData({ |
|||
userInfo |
|||
}) |
|||
}).catch(err => { |
|||
console.log(err) |
|||
}) |
|||
}, |
|||
// 解散群
|
|||
disbandAssociation () { |
|||
this.setData({ |
|||
noticeVerifyVisible: !this.data.noticeVerifyVisible |
|||
}) |
|||
}, |
|||
// 解散群弹框确定
|
|||
confirm (e) { |
|||
const para = { |
|||
id: this.data.userInfo.id, |
|||
processingOpinions: e.detail.value |
|||
} |
|||
wx.showLoading({ |
|||
title: '加载中', |
|||
}) |
|||
disbandAssociation(para).then(res => { |
|||
wx.hideLoading() |
|||
console.log('解散群',res) |
|||
wx.showToast({ |
|||
title: '解散群成功', |
|||
icon: 'none', |
|||
duration: 2000 |
|||
}) |
|||
wx.navigateBack({ |
|||
delta: 2 |
|||
}) |
|||
}).catch(err => { |
|||
console.log(err) |
|||
}) |
|||
}, |
|||
// 解散群弹框取消
|
|||
cancel () { |
|||
console.log('取消') |
|||
}, |
|||
// 退群
|
|||
withdrawGroup () { |
|||
this.setData({ |
|||
dialogVisible: !this.data.dialogVisible |
|||
}) |
|||
}, |
|||
// 退群确认弹框
|
|||
confirmDialog () { |
|||
wx.showLoading({ |
|||
title: '加载中', |
|||
}) |
|||
withdrawGroup(this.data.userInfo.id).then(res => { |
|||
console.log('退群', res) |
|||
wx.hideLoading() |
|||
wx.showToast({ |
|||
title: '退群成功', |
|||
icon: 'none', |
|||
duration: 2000 |
|||
}) |
|||
wx.switchTab({ |
|||
url: '/pages/association/association' |
|||
}) |
|||
}).catch(err => { |
|||
console.log(err) |
|||
}) |
|||
}, |
|||
// 获取 待审核人数
|
|||
getCheckMemberNum () { |
|||
const para = { |
|||
groupId: this.data.groupId, |
|||
state: 0 |
|||
} |
|||
getAssociationMember(para).then(res => { |
|||
console.log('待审核群成员人数', res) |
|||
this.setData({ |
|||
checkPenddingNum: res.data.length |
|||
}) |
|||
}).catch(err => { |
|||
this.setData({ |
|||
checkPenddingNum: 0 |
|||
}) |
|||
console.log(err) |
|||
}) |
|||
} |
|||
}) |
|||
@ -0,0 +1,8 @@ |
|||
{ |
|||
"usingComponents": { |
|||
"wux-actionsheet": "../../../../dist/actionsheet/index", |
|||
"notice-verify": "../../components/noticeVerify/noticeVerify", |
|||
"notice": "../../components/notice/notice" |
|||
}, |
|||
"navigationBarTitleText": "我的群" |
|||
} |
|||
@ -0,0 +1,135 @@ |
|||
<view class="association-detail"> |
|||
|
|||
<view class="group-info"> |
|||
<view class="content"> |
|||
<view class="top-card"> |
|||
<image class="bg-image" src="../../images/bg-image.png" /> |
|||
<view class="card-content"> |
|||
<view class="top"> |
|||
<view class="left"> |
|||
<view class="group-avatar" bindtap="chooseImage"> |
|||
<image class="init-avatar" src="{{userInfo.groupAvatar}}" /> |
|||
<image wx:if="{{userInfo.lordFlag == '1'}}" class="change-avatar" src="../../images/xiugai.png" /> |
|||
</view> |
|||
<view class="personal-info"> |
|||
<view class="group-name">{{userInfo.groupName}}</view> |
|||
<text class="group-leader" wx:if="{{userInfo.nickname}}">{{userInfo.nickname}}（群主）</text> |
|||
</view> |
|||
</view> |
|||
<view class="right" wx:if="{{userInfo.lordFlag == 1 && userInfo.groupCategory != '0'}}" bindtap="disbandAssociation"> |
|||
<image class="dismiss-bg" src="../../images/jiesanqun.png" /> |
|||
<view class="dismiss">解散群</view> |
|||
</view> |
|||
</view> |
|||
<view class="bottom"> |
|||
<view class="member"> |
|||
<view class="num">{{userInfo.totalNum}}</view> |
|||
<view class="title">成员</view> |
|||
</view> |
|||
<view class="member"> |
|||
<view class="num">{{userInfo.topicNum}}</view> |
|||
<view class="title">话题</view> |
|||
</view> |
|||
<view class="member"> |
|||
<view class="num">{{userInfo.changeToIssueNum}}</view> |
|||
<view class="title">已转议题</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="settings"> |
|||
<view class="content"> |
|||
<view class="list-item"> |
|||
<view class="left"> |
|||
<image src="../../images/group.png" /> |
|||
</view> |
|||
<view class="right"> |
|||
<view class="title">群名称</view> |
|||
<view class="right-content"> |
|||
<view>{{userInfo.groupName}}</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="list-item" bindtap="navigateToIntroduce"> |
|||
<view class="left"> |
|||
<image src="../../images/qunjieshao.png" /> |
|||
</view> |
|||
<view class="right"> |
|||
<view class="title">群介绍</view> |
|||
<view class="right-content"> |
|||
<image src="../../images/rightsword-999.png" /> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="list-item" bindtap="navigateToMember"> |
|||
<view class="left"> |
|||
<image src="../../images/qunchengyuan.png" /> |
|||
</view> |
|||
<view class="right"> |
|||
<view class="title">群成员</view> |
|||
<view class="right-content"> |
|||
<view>{{userInfo.totalNum}}人</view> |
|||
<image src="../../images/rightsword-999.png" /> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="list-item" bindtap="navigateToInvitation" wx:if="{{userInfo.lordFlag == 1 && userInfo.groupCategory != '0'}}"> |
|||
<view class="left"> |
|||
<image src="../../images/yaoqinghaoyou.png" /> |
|||
</view> |
|||
<view class="right"> |
|||
<view class="title">邀请好友</view> |
|||
<view class="right-content"> |
|||
<image src="../../images/rightsword-999.png" /> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="list-item" bindtap="navigateToVerify" wx:if="{{userInfo.lordFlag == 1 && userInfo.groupCategory != '0'}}"> |
|||
<view class="left"> |
|||
<image src="../../images/ruqunshenhe.png" /> |
|||
</view> |
|||
<view class="right"> |
|||
<view class="title">入群审核</view> |
|||
<view class="right-content"> |
|||
<view wx:if="{{checkPenddingNum > 0}}" class="checkpendding-num">{{checkPenddingNum}}</view> |
|||
<image src="../../images/rightsword-999.png" /> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="list-item" bindtap="withdrawGroup" wx:if="{{userInfo.lordFlag == 0 && userInfo.groupCategory != '0'}}"> |
|||
<view class="left"> |
|||
<image src="../../images/tuiqun.png" /> |
|||
</view> |
|||
<view class="right"> |
|||
<view class="title">退群</view> |
|||
<view class="right-content"> |
|||
<image src="../../images/rightsword-999.png" /> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<wux-actionsheet id="wux-actionsheet" /> |
|||
|
|||
<notice-verify |
|||
noticeVerifyVisible="{{noticeVerifyVisible}}" |
|||
title="解散群" |
|||
tipVisible="{{false}}" |
|||
cancelText="取消" |
|||
confirmText="确定" |
|||
bind:confirm="confirm" |
|||
bind:close="cancel"> |
|||
</notice-verify> |
|||
|
|||
<notice |
|||
dialogVisible="{{dialogVisible}}" |
|||
title="退群提示" |
|||
content="{{['是否确认退出该群']}}" |
|||
confirmText="确定" |
|||
cancelText="取消" |
|||
bind:confirm="confirmDialog"></notice> |
|||
@ -0,0 +1,220 @@ |
|||
page { |
|||
width: 100%; |
|||
height: 100vh; |
|||
} |
|||
.association-detail { |
|||
width: 100%; |
|||
height: 100%; |
|||
background:#f7f7f7; |
|||
} |
|||
|
|||
.group-info { |
|||
width: 100%; |
|||
height: 360rpx; |
|||
box-sizing: border-box; |
|||
background: #fff; |
|||
padding: 25rpx 40rpx 0 40rpx; |
|||
} |
|||
.group-info .content { |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
.group-info .top-card { |
|||
height: 300rpx; |
|||
width: 100%; |
|||
border-radius: 16rpx; |
|||
overflow: hidden; |
|||
position: relative; |
|||
} |
|||
.group-info .top-card .bg-image { |
|||
width: 100%; |
|||
height: 100%; |
|||
object-fit: cover; |
|||
position: absolute; |
|||
left: 0; |
|||
top: 0; |
|||
z-index: 1; |
|||
} |
|||
.group-info .top-card .card-content { |
|||
width: 100%; |
|||
height: 100%; |
|||
position: relative; |
|||
top: 0; |
|||
left: 0; |
|||
z-index: 10; |
|||
box-sizing: border-box; |
|||
padding-top: 48rpx; |
|||
} |
|||
.group-info .top-card .card-content .top { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
} |
|||
.group-info .top-card .card-content .top .left { |
|||
width: 100%; |
|||
height: 106rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
} |
|||
.group-info .top-card .card-content .top .left .personal-info { |
|||
height: 100%; |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: center; |
|||
} |
|||
.group-info .top-card .card-content .top .left .group-avatar { |
|||
width: 106rpx; |
|||
height: 106rpx; |
|||
margin: 0 12rpx 0 40rpx; |
|||
position: relative; |
|||
} |
|||
.group-info .top-card .card-content .top .left .group-avatar .init-avatar { |
|||
width: 100%; |
|||
height: 100%; |
|||
border-radius: 50%; |
|||
object-fit: cover; |
|||
overflow: hidden; |
|||
} |
|||
.group-info .top-card .card-content .top .left .group-avatar .change-avatar { |
|||
position: absolute; |
|||
bottom: 0; |
|||
right: 0; |
|||
width: 26rpx; |
|||
height: 26rpx; |
|||
} |
|||
.group-info .top-card .card-content .top .left .group-name { |
|||
font-size: 32rpx; |
|||
color: #fff; |
|||
} |
|||
.group-info .top-card .card-content .top .left .group-leader { |
|||
font-size: 20rpx; |
|||
color: #fff; |
|||
} |
|||
.group-info .top-card .card-content .top .right { |
|||
width: 120rpx; |
|||
height: 46rpx; |
|||
position: relative; |
|||
} |
|||
.group-info .top-card .card-content .top .right .dismiss-bg { |
|||
width: 100%; |
|||
height: 100%; |
|||
object-fit: cover; |
|||
position: absolute; |
|||
left: 0; |
|||
right: 0; |
|||
z-index: 1; |
|||
} |
|||
.group-info .top-card .card-content .top .right .dismiss { |
|||
height: 100%; |
|||
line-height: 46rpx; |
|||
width: 100%; |
|||
text-align:center; |
|||
color: #fff; |
|||
font-size: 22rpx; |
|||
position: relative; |
|||
z-index: 10; |
|||
} |
|||
.group-info .top-card .card-content .bottom { |
|||
width: 100%; |
|||
display: flex; |
|||
justify-content: space-around; |
|||
align-items: center; |
|||
margin-top: 30rpx; |
|||
} |
|||
.group-info .top-card .card-content .bottom .member { |
|||
flex: 1; |
|||
} |
|||
.group-info .top-card .card-content .bottom .member .num { |
|||
font-size: 40rpx; |
|||
line-height: 54rpx; |
|||
color: #fff; |
|||
width: 100%; |
|||
text-align:center; |
|||
} |
|||
.group-info .top-card .card-content .bottom .member .title { |
|||
font-size: 22rpx; |
|||
line-height: 36rpx; |
|||
color: #fff; |
|||
text-align:center; |
|||
width: 100%; |
|||
} |
|||
|
|||
.settings { |
|||
width: 100%; |
|||
height: auto; |
|||
padding: 0 20rpx; |
|||
box-sizing: border-box; |
|||
margin-top: 20rpx; |
|||
} |
|||
.settings .content { |
|||
width: 100%; |
|||
height: auto; |
|||
border-radius: 16rpx; |
|||
background: #fff; |
|||
box-sizing: border-box; |
|||
padding: 0 25rpx; |
|||
} |
|||
.settings .list-item { |
|||
width: 100%; |
|||
height: 110rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
} |
|||
.settings .list-item + .list-item .right { |
|||
border-top: 1rpx solid #eaeaea; |
|||
} |
|||
.settings .list-item .left { |
|||
width: 57rpx; |
|||
height: 100%; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
} |
|||
.settings .list-item .left image { |
|||
width: 50rpx; |
|||
height: 50rpx; |
|||
object-fit: cover; |
|||
position: relative; |
|||
top: 4rpx; |
|||
} |
|||
.settings .list-item .right { |
|||
height: 100%; |
|||
margin-left: 10rpx; |
|||
width: calc(100% - 67rpx); |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
box-sizing: border-box; |
|||
} |
|||
.settings .list-item .right .title { |
|||
font-size: 32rpx; |
|||
color: #333; |
|||
} |
|||
.settings .list-item .right .right-content { |
|||
display: flex; |
|||
align-items: center; |
|||
} |
|||
.settings .list-item .right .right-content view { |
|||
color: #999; |
|||
font-size: 32rpx; |
|||
margin-right: 6rpx; |
|||
} |
|||
.settings .list-item .right .right-content .checkpendding-num { |
|||
font-size: 20rpx; |
|||
color: #fff; |
|||
height: 26rpx; |
|||
line-height: 26rpx; |
|||
background: #FE4646; |
|||
border-radius: 14rpx; |
|||
padding: 0 15rpx; |
|||
} |
|||
.settings .list-item .right .right-content image { |
|||
width: 24rpx; |
|||
height: 24rpx; |
|||
object-fit: cover; |
|||
} |
|||
|
|||
.wux-actionsheet__button { |
|||
font-size: 34rpx !important; |
|||
color: #333 !important; |
|||
} |
|||
@ -0,0 +1,79 @@ |
|||
import { getAssociationMember, deleteMember } from '../../utils/api' |
|||
import convertPY from '../../utils/convertPY' |
|||
|
|||
Page({ |
|||
data: { |
|||
associationMemberList: [], |
|||
groupId: '', |
|||
id: '', |
|||
dialogVisible: false, |
|||
groupCategory: '1' |
|||
}, |
|||
onShow () { |
|||
}, |
|||
onLoad (options) { |
|||
this.getAssociationMember(options.id) |
|||
this.setData({ |
|||
groupId: options.id, |
|||
groupCategory: options.groupCategory |
|||
}) |
|||
}, |
|||
getAssociationMember (groupId) { |
|||
const para = { |
|||
state: 10, |
|||
groupId, |
|||
} |
|||
getAssociationMember(para).then(res => { |
|||
console.log('审核通过群成员',res) |
|||
let associationMemberList = [] |
|||
res.data.forEach(item => { |
|||
const alphabet = convertPY.convertPYs(item.nickname) |
|||
const index = associationMemberList.findIndex(item => item.alphabet === alphabet) |
|||
if (index > -1) { |
|||
associationMemberList[index].memberList.push(item) |
|||
} else { |
|||
associationMemberList.push({ |
|||
alphabet: alphabet, |
|||
memberList: [item] |
|||
}) |
|||
} |
|||
}) |
|||
associationMemberList.sort((a,b) => a.alphabet.charCodeAt() - b.alphabet.charCodeAt()) |
|||
this.setData({ |
|||
associationMemberList |
|||
}) |
|||
}).catch(err => { |
|||
console.log(err) |
|||
}) |
|||
}, |
|||
deleteMember (e) { |
|||
this.setData({ |
|||
id: e.detail.userId, |
|||
dialogVisible: !this.data.dialogVisible |
|||
}) |
|||
}, |
|||
confirmDialog () { |
|||
const para = { |
|||
groupId: this.data.groupId, |
|||
userId: this.data.id |
|||
} |
|||
wx.showLoading({ |
|||
title: '加载中', |
|||
}) |
|||
deleteMember(para).then(res => { |
|||
wx.hideLoading() |
|||
wx.showToast({ |
|||
title: '删除群成员成功', |
|||
icon: 'none', |
|||
duration: 2000 |
|||
}) |
|||
this.getAssociationMember(this.data.groupId) |
|||
const pages = getCurrentPages() |
|||
const page = pages[pages.length - 2] |
|||
page.getAssociationDetail() |
|||
console.log('删除群成员',res) |
|||
}).catch(err => { |
|||
console.log(err) |
|||
}) |
|||
} |
|||
}) |
|||
@ -0,0 +1,7 @@ |
|||
{ |
|||
"usingComponents": { |
|||
"contact": "../../components/contact/contact", |
|||
"notice": "../../components/notice/notice" |
|||
}, |
|||
"navigationBarTitleText": "群成员" |
|||
} |
|||
@ -0,0 +1,13 @@ |
|||
<view class="association-member"> |
|||
|
|||
<contact groupCategory="{{groupCategory}}" scrollViewTop="{{0}}" scrollViewBottom="{{0}}" pageType="delete" dataList="{{associationMemberList}}" bind:operationBtn="deleteMember"></contact> |
|||
|
|||
<notice |
|||
dialogVisible="{{dialogVisible}}" |
|||
title="删除群成员" |
|||
content="{{['是否确认删除该群成员']}}" |
|||
confirmText="确定" |
|||
cancelText="取消" |
|||
bind:confirm="confirmDialog"> |
|||
</notice> |
|||
</view> |
|||
@ -0,0 +1,9 @@ |
|||
page { |
|||
width: 100%; |
|||
height: 100vh; |
|||
} |
|||
.association-member { |
|||
width:100%; |
|||
height:100%; |
|||
background: #f7f7f7; |
|||
} |
|||
@ -0,0 +1,74 @@ |
|||
import { changeIntroduce, getAssociationDetail } from '../../utils/api' |
|||
const app = getApp() |
|||
|
|||
Page({ |
|||
data: { |
|||
associationInfo: { |
|||
id: '', |
|||
groupIntroduction: '' |
|||
} |
|||
}, |
|||
onLoad (options) { |
|||
wx.setNavigationBarTitle({ |
|||
title: '修改群介绍' |
|||
}) |
|||
this.getAssociationDetail(options.id) |
|||
}, |
|||
onShow () { |
|||
|
|||
}, |
|||
// textarea 双向绑定
|
|||
bindTextareaValue (e) { |
|||
const associationInfo = Object.assign(this.data.associationInfo, { groupIntroduction: e.detail.value}) |
|||
this.setData({ |
|||
associationInfo |
|||
}) |
|||
}, |
|||
// 修改群介绍
|
|||
changeIntroduce () { |
|||
if (this.data.associationInfo.groupIntroduction === '') { |
|||
wx.showToast({ |
|||
title: '请输入社群介绍', |
|||
icon: 'none', |
|||
duration: 2000 |
|||
}) |
|||
return false |
|||
} |
|||
const para = { |
|||
id: this.data.associationInfo.id, |
|||
groupIntroduction: this.data.associationInfo.groupIntroduction |
|||
} |
|||
wx.showLoading({ |
|||
title: '加载中' |
|||
}) |
|||
changeIntroduce(para).then(res => { |
|||
wx.hideLoading() |
|||
console.log('修改群介绍', res) |
|||
wx.showToast({ |
|||
title: '修改群介绍成功', |
|||
icon: 'none', |
|||
duration: 2000 |
|||
}) |
|||
setTimeout(() => { |
|||
wx.navigateBack() |
|||
}, 500) |
|||
}).catch(err => { |
|||
console.log(err) |
|||
}) |
|||
}, |
|||
// 获取社群详情
|
|||
getAssociationDetail (id) { |
|||
getAssociationDetail(id).then(res=> { |
|||
console.log('社群详情', res) |
|||
const associationInfo = {} |
|||
for(const key in this.data.associationInfo) { |
|||
associationInfo[key] = res.data[key] |
|||
} |
|||
this.setData({ |
|||
associationInfo |
|||
}) |
|||
}).catch(err => { |
|||
console.log(err) |
|||
}) |
|||
} |
|||
}) |
|||
@ -0,0 +1,5 @@ |
|||
{ |
|||
"usingComponents": { |
|||
}, |
|||
"navigationBarTitleText": "修改介绍" |
|||
} |
|||
@ -0,0 +1,19 @@ |
|||
<view class="change-introduce"> |
|||
|
|||
<view class="textarea"> |
|||
<textarea |
|||
maxlength="500" |
|||
placeholder="请输入社群介绍" |
|||
value="{{associationInfo.groupIntroduction}}" |
|||
bindblur="bindTextareaValue" |
|||
bindinput="bindTextareaValue" |
|||
placeholder-class="placeholder-style"> |
|||
</textarea> |
|||
<view class="num">{{associationInfo.groupIntroduction.length}}/500</view> |
|||
</view> |
|||
|
|||
<view class="button-view"> |
|||
<button bindtap="changeIntroduce" type="default" size="mini" hover-class="hover-change">修改介绍</button> |
|||
</view> |
|||
|
|||
</view> |
|||
@ -0,0 +1,64 @@ |
|||
page { |
|||
width:100%; |
|||
height: 100vh; |
|||
} |
|||
.change-introduce { |
|||
width: 100%; |
|||
height: 100%; |
|||
background: #f7f7f7; |
|||
padding: 20rpx; |
|||
box-sizing: border-box; |
|||
} |
|||
.change-introduce .textarea { |
|||
width:100%; |
|||
height: 80%; |
|||
border-radius: 16rpx; |
|||
overflow: hidden; |
|||
background: #fff; |
|||
box-sizing: border-box; |
|||
padding: 25rpx; |
|||
} |
|||
.change-introduce .textarea textarea { |
|||
font-size: 32rpx; |
|||
line-height: 56rpx; |
|||
color: #333; |
|||
width: 100%; |
|||
height: calc(100% - 80rpx); |
|||
} |
|||
.change-introduce .textarea .num { |
|||
width: 100%; |
|||
height: 80rpx; |
|||
line-height: 80rpx; |
|||
text-align: right; |
|||
color: #999; |
|||
font-size: 28rpx; |
|||
} |
|||
.change-introduce .textarea .placeholder-style { |
|||
font-size: 32rpx; |
|||
color: #999; |
|||
line-height: 40rpx; |
|||
} |
|||
|
|||
.button-view { |
|||
width: 100%; |
|||
height: 84rpx; |
|||
position: fixed; |
|||
left: 0; |
|||
bottom: 50px; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
} |
|||
.button-view button { |
|||
width: 560rpx; |
|||
height: 100%; |
|||
line-height: 84rpx; |
|||
text-align: center; |
|||
color: #fff; |
|||
font-size: 36rpx; |
|||
box-sizing: 16rpx; |
|||
background: #01C15C; |
|||
} |
|||
.button-view .hover-change { |
|||
background: green; |
|||
} |
|||
@ -0,0 +1,123 @@ |
|||
import { getClassifyList, changeToIssue } from '../../utils/api' |
|||
|
|||
Page({ |
|||
data: { |
|||
textareaValue: '', |
|||
cascaderVisible: false, |
|||
selectedClassify: { |
|||
value: '', |
|||
label: '' |
|||
}, |
|||
cascaderOptions: [], |
|||
topicId: '', |
|||
timer: '' |
|||
}, |
|||
onShow () { |
|||
|
|||
}, |
|||
onLoad (options) { |
|||
this.getClassifyList() |
|||
this.setData({ |
|||
topicId: options.topicId |
|||
}) |
|||
}, |
|||
// textarea v-model
|
|||
bindTextareaValue (e) { |
|||
this.setData({ |
|||
textareaValue: e.detail.value |
|||
}) |
|||
}, |
|||
// 选择分类
|
|||
chooseClassify () { |
|||
this.setData({ |
|||
cascaderVisible: true |
|||
}) |
|||
}, |
|||
// cascader 关闭回调
|
|||
onClose (e) { |
|||
this.setData({ |
|||
cascaderVisible: false |
|||
}) |
|||
}, |
|||
// cascader change回调
|
|||
onChange (e) { |
|||
const selectedClassify = { |
|||
value: e.detail.options[e.detail.options.length - 1].value || '', |
|||
label: e.detail.options[e.detail.options.length - 1].label || '' |
|||
} |
|||
this.setData({ |
|||
selectedClassify |
|||
}) |
|||
}, |
|||
// 获取分类列表
|
|||
getClassifyList () { |
|||
getClassifyList().then(res => { |
|||
console.log('分类列表', res) |
|||
this.filterClassifyList(res.data) |
|||
this.setData({ |
|||
cascaderOptions: res.data |
|||
}) |
|||
}).catch(err => { |
|||
console.log(err) |
|||
}) |
|||
}, |
|||
// 递归分类列表
|
|||
filterClassifyList (classifyList) { |
|||
classifyList.forEach(item => { |
|||
item.label = item.categoryName |
|||
item.value = item.id |
|||
if (item.children && item.children.length > 0) { |
|||
this.filterClassifyList(item.children) |
|||
} |
|||
}) |
|||
}, |
|||
debounceChangeToIssue () { |
|||
clearTimeout(this.data.timer) |
|||
this.data.timer = setTimeout(() => { |
|||
this.changeToIssue() |
|||
}, 500) |
|||
}, |
|||
// 话题转议题
|
|||
changeToIssue () { |
|||
if (this.data.textareaValue === '') { |
|||
wx.showToast({ |
|||
title: '请输入处理意见', |
|||
icon: 'none', |
|||
duration: 2000 |
|||
}) |
|||
return false |
|||
} else if (this.data.selectedClassify.label === '') { |
|||
wx.showToast({ |
|||
title: '请选择分类', |
|||
icon: 'none', |
|||
duration: 2000 |
|||
}) |
|||
return false |
|||
} |
|||
const para = { |
|||
id: this.data.topicId, |
|||
categoryId: this.data.selectedClassify.value, |
|||
advice: this.data.textareaValue |
|||
} |
|||
wx.showLoading({ |
|||
title: '加载中' |
|||
}) |
|||
changeToIssue(para).then(res => { |
|||
wx.hideLoading() |
|||
console.log('话题转议题', res) |
|||
wx.showToast({ |
|||
title: '话题已转为议题', |
|||
icon: 'none', |
|||
duration: 2000 |
|||
}) |
|||
const pages = getCurrentPages() |
|||
const page = pages[pages.length - 3] |
|||
page.pullRefreshGetTopicList() |
|||
wx.navigateBack({ |
|||
delta: 2 |
|||
}) |
|||
}).catch(err => { |
|||
console.log(err) |
|||
}) |
|||
} |
|||
}) |
|||
@ -0,0 +1,8 @@ |
|||
{ |
|||
"usingComponents": { |
|||
"wux-cascader": "../../../../dist/cascader/index", |
|||
"wux-textarea": "../../../../dist/textarea/index" |
|||
}, |
|||
"navigationBarTitleText": "转议题", |
|||
"disableScroll": true |
|||
} |
|||
@ -0,0 +1,36 @@ |
|||
<view class="change-to-issue"> |
|||
|
|||
<view class="choose-classify" bindtap="chooseClassify"> |
|||
<view class="name">选择分类</view> |
|||
<view class="right"> |
|||
<view class="selected-classify">{{selectedClassify.label}}</view> |
|||
<image class="right-sword, {{cascaderVisible ? 'selected' : ''}}" src="../../images/changeToIssue-rrightsword.png" /> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="handle-abdice"> |
|||
<view class="name">处理意见</view> |
|||
<textarea |
|||
wx:if="{{!cascaderVisible}}" |
|||
disabled="{{cascaderVisible}}" |
|||
maxlength="100" |
|||
value="{{textareaValue}}" |
|||
placeholder="请您填写居民话题转成议题的答复意见，向居民公开展示" |
|||
placeholder-class="hover-class" |
|||
bindblur="bindTextareaValue" |
|||
bindinput="bindTextareaValue"/> |
|||
<view wx:else class="textarea">{{textareaValue}}</view> |
|||
<view class="topline">{{textareaValue.length}}/100</view> |
|||
</view> |
|||
|
|||
<view class="operation"> |
|||
<button hover-class="hover-change" bindtap="debounceChangeToIssue">转成议题</button> |
|||
</view> |
|||
</view> |
|||
|
|||
<wux-cascader |
|||
visible="{{ cascaderVisible }}" |
|||
title="所选分类" |
|||
options="{{ cascaderOptions }}" |
|||
bind:close="onClose" |
|||
bind:change="onChange"/> |
|||
@ -0,0 +1,123 @@ |
|||
page { |
|||
width: 100%; |
|||
height:100vh; |
|||
} |
|||
.change-to-issue { |
|||
width: 100%; |
|||
height:100%; |
|||
background: #f7f7f7; |
|||
box-sizing: border-box; |
|||
padding: 20rpx 20rpx 0; |
|||
} |
|||
.change-to-issue .choose-classify { |
|||
width: 100%; |
|||
height: 100rpx; |
|||
border-radius: 16rpx; |
|||
background: #fff; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
box-sizing: border-box; |
|||
padding: 0 25rpx; |
|||
margin-bottom: 20rpx; |
|||
} |
|||
.change-to-issue .choose-classify .name { |
|||
font-size: 34rpx; |
|||
color:#333; |
|||
width: 150rpx; |
|||
} |
|||
.change-to-issue .choose-classify .right { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: flex-end; |
|||
width: calc(100% - 150rpx); |
|||
|
|||
} |
|||
.change-to-issue .choose-classify .right .selected-classify { |
|||
font-size: 28rpx; |
|||
color: #333; |
|||
margin-right: 10rpx; |
|||
} |
|||
.change-to-issue .choose-classify .right .right-sword { |
|||
width: 18rpx; |
|||
height: 23rpx; |
|||
object-fit: cover; |
|||
transform: rotate(0deg); |
|||
transition: transform linear 0.2s; |
|||
} |
|||
.change-to-issue .choose-classify .right .right-sword.selected { |
|||
transform: rotate(90deg); |
|||
transition: transform linear 0.2s; |
|||
} |
|||
|
|||
.change-to-issue .handle-abdice { |
|||
width: 100%; |
|||
height: 858rpx; |
|||
border-radius: 16rpx; |
|||
background: #fff; |
|||
box-sizing: border-box; |
|||
padding: 0 25rpx; |
|||
} |
|||
.change-to-issue .handle-abdice .name { |
|||
width: 100%; |
|||
height: 100rpx; |
|||
line-height: 100rpx; |
|||
color: #333; |
|||
font-size: 34rpx; |
|||
border-bottom: 1rpx solid #eaeaea; |
|||
} |
|||
.change-to-issue .handle-abdice textarea { |
|||
width: 100%; |
|||
height: calc(858rpx - 100rpx - 67rpx); |
|||
box-sizing: border-box; |
|||
padding-top: 20rpx; |
|||
color: #333; |
|||
font-size: 28rpx; |
|||
line-height: 44rpx; |
|||
} |
|||
.change-to-issue .handle-abdice .textarea { |
|||
width: 100%; |
|||
height: calc(858rpx - 100rpx - 67rpx); |
|||
box-sizing: border-box; |
|||
padding-top: 20rpx; |
|||
color: #333; |
|||
font-size: 28rpx; |
|||
line-height: 44rpx; |
|||
word-break: break-all; |
|||
} |
|||
.change-to-issue .handle-abdice .hover-class { |
|||
color: #999; |
|||
} |
|||
.change-to-issue .handle-abdice .topline { |
|||
height: 65rpx; |
|||
width: 100%; |
|||
text-align: right; |
|||
font-size: 24rpx; |
|||
color: #999; |
|||
} |
|||
|
|||
.change-to-issue .operation { |
|||
width: 100%; |
|||
height: 84rpx; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-content: center; |
|||
margin-top: 45rpx; |
|||
} |
|||
.change-to-issue .operation button { |
|||
width: 560rpx; |
|||
height: 84rpx; |
|||
background: linear-gradient(to right, #f40f0f, #ff4c4c); |
|||
line-height: 84rpx; |
|||
margin: 0; |
|||
padding: 0; |
|||
border: 0; |
|||
outline: 0; |
|||
color: #fff; |
|||
font-size: 36rpx; |
|||
border-radius: 16rpx; |
|||
text-align: center; |
|||
} |
|||
.change-to-issue .operation .hover-change { |
|||
background: red; |
|||
} |
|||
@ -0,0 +1,195 @@ |
|||
import { $wuxActionSheet } from '../../../../dist/index' |
|||
import { createAssociation } from '../../utils/api' |
|||
const config = require('../../../../utils/config') |
|||
|
|||
Page({ |
|||
data: { |
|||
name: '创建社群', |
|||
associationInfo: { |
|||
avatar: '../../images/ic_tianjiatouxiang@2x.png', |
|||
name: '', |
|||
introduce: '' |
|||
}, |
|||
dialogVisible: false, |
|||
userInfo: { |
|||
nickname: '', |
|||
partyFlag: '' |
|||
} |
|||
}, |
|||
onShow () { |
|||
|
|||
}, |
|||
onLoad (options) { |
|||
const { nickname, partyFlag } = options |
|||
this.setData({ |
|||
userInfo: Object.assign(this.data.userInfo, { nickname, partyFlag }) |
|||
}) |
|||
}, |
|||
// 创建社群
|
|||
createAssociation () { |
|||
if (this.data.associationInfo['avatar'] === '../../images/ic_tianjiatouxiang@2x.png') { |
|||
wx.showToast({ |
|||
title: '请上传群头像', |
|||
icon: 'none', |
|||
duration: 1000 |
|||
}) |
|||
return false |
|||
} else if (this.data.associationInfo['name'] === '') { |
|||
wx.showToast({ |
|||
title: '请输入群名称', |
|||
icon: 'none', |
|||
duration: 1000 |
|||
}) |
|||
return false |
|||
} else if (this.data.associationInfo['introduce'] === '') { |
|||
wx.showToast({ |
|||
title: '请输入群介绍', |
|||
icon: 'none', |
|||
duration: 1000 |
|||
}) |
|||
return false |
|||
} |
|||
|
|||
const para = { |
|||
groupName: this.data.associationInfo['name'], |
|||
groupAvatar: this.data.associationInfo['avatar'], |
|||
groupIntroduction: this.data.associationInfo['introduce'] |
|||
} |
|||
wx.showLoading({ |
|||
title: '加载中', |
|||
}) |
|||
createAssociation(para).then(res => { |
|||
wx.hideLoading() |
|||
this.setData({ |
|||
dialogVisible: !this.data.dialogVisible |
|||
}) |
|||
}).catch(err => { |
|||
console.log(err) |
|||
}) |
|||
}, |
|||
// input框双向绑定
|
|||
oberseInput (e) { |
|||
this.data.associationInfo = Object.assign(this.data.associationInfo, { name: e.detail.value}) |
|||
this.setData({ |
|||
associationInfo: this.data.associationInfo |
|||
}) |
|||
}, |
|||
// textarea双向绑定
|
|||
oberseTextarea (e) { |
|||
this.data.associationInfo = Object.assign(this.data.associationInfo, { introduce: e.detail.value}) |
|||
this.setData({ |
|||
associationInfo: this.data.associationInfo |
|||
}) |
|||
}, |
|||
// 选择图片
|
|||
chooseImage () { |
|||
const that = this |
|||
$wuxActionSheet().showSheet({ |
|||
buttons: [{ |
|||
text: '拍照' |
|||
}, |
|||
{ |
|||
text: '从相册中获取' |
|||
}, |
|||
], |
|||
className: 'dialog-class', |
|||
buttonClicked(index, item) { |
|||
if (index === 0) { |
|||
wx.chooseImage({ |
|||
count: 1, |
|||
sizeType: ['original', 'compressed'], |
|||
sourceType: ['camera'], |
|||
success (res) { |
|||
wx.uploadFile({ |
|||
url: config.BASEURL() + 'group/topic/upload', |
|||
filePath: res.tempFilePaths[0], |
|||
name: 'file', |
|||
header: { |
|||
'Content-Type': 'multipart/form-data' |
|||
}, |
|||
success (fileres) { |
|||
const data = JSON.parse(fileres.data) |
|||
if (data.code === 0 && data.msg === 'success') { |
|||
that.data.associationInfo = Object.assign(that.data.associationInfo, { avatar: data.data}) |
|||
that.setData({ |
|||
associationInfo: that.data.associationInfo |
|||
}) |
|||
} else { |
|||
wx.showToast({ |
|||
title: '上传图片失败，请重试' |
|||
}) |
|||
} |
|||
}, |
|||
fail (err) { |
|||
console.log(err) |
|||
imageList.pop() |
|||
wx.showToast({ |
|||
title: '上传图片失败，请重试' |
|||
}) |
|||
that.setData({ |
|||
imageList |
|||
}) |
|||
} |
|||
}) |
|||
} |
|||
}) |
|||
} else if (index === 1) { |
|||
wx.chooseImage({ |
|||
count: 1, |
|||
sizeType: ['original', 'compressed'], |
|||
sourceType: ['album'], |
|||
success (res) { |
|||
wx.uploadFile({ |
|||
url: config.BASEURL() + 'group/topic/upload', |
|||
filePath: res.tempFilePaths[0], |
|||
name: 'file', |
|||
header: { |
|||
'Content-Type': 'multipart/form-data' |
|||
}, |
|||
success (fileres) { |
|||
const data = JSON.parse(fileres.data) |
|||
if (data.code === 0 && data.msg === 'success') { |
|||
that.data.associationInfo = Object.assign(that.data.associationInfo, { avatar: data.data}) |
|||
that.setData({ |
|||
associationInfo: that.data.associationInfo |
|||
}) |
|||
} else { |
|||
wx.showToast({ |
|||
title: '上传图片失败，请重试' |
|||
}) |
|||
} |
|||
}, |
|||
fail (err) { |
|||
console.log(err) |
|||
imageList.pop() |
|||
wx.showToast({ |
|||
title: '上传图片失败，请重试' |
|||
}) |
|||
that.setData({ |
|||
imageList |
|||
}) |
|||
} |
|||
}) |
|||
} |
|||
}) |
|||
} |
|||
return true |
|||
}, |
|||
cancelText: '取消', |
|||
cancel() {}, |
|||
destructiveButtonClicked() {}, |
|||
}) |
|||
}, |
|||
// 关闭弹框
|
|||
closeDialog () { |
|||
wx.switchTab({ |
|||
url: '/pages/association/association' |
|||
}) |
|||
}, |
|||
// 弹框确定按钮
|
|||
confirmDialog () { |
|||
wx.switchTab({ |
|||
url: '/pages/association/association' |
|||
}) |
|||
} |
|||
}) |
|||
@ -0,0 +1,8 @@ |
|||
{ |
|||
"usingComponents": { |
|||
"wux-actionsheet": "../../../../dist/actionsheet/index", |
|||
"wux-button": "../../../../dist/button/index", |
|||
"notice": "../../components/notice/notice" |
|||
}, |
|||
"navigationBarTitleText": "创建群" |
|||
} |
|||
@ -0,0 +1,37 @@ |
|||
<view class="createassociation"> |
|||
<view class="content"> |
|||
|
|||
<view class="group-avatar"> |
|||
<view>群头像</view> |
|||
<image bindtap="chooseImage" src="{{associationInfo.avatar}}" /> |
|||
</view> |
|||
|
|||
<view class="group-info"> |
|||
<view class="group-leader"> |
|||
<view class="title">群主</view> |
|||
<view class="name"> |
|||
<text>{{userInfo.nickname}}</text> |
|||
<image wx:if="{{userInfo.partyFlag == 1}}" src="../../images/ic_dangbiaoqian.png" /> |
|||
</view> |
|||
</view> |
|||
<view class="group-name"> |
|||
<view>群名称</view> |
|||
<input value="{{associationInfo.name}}" bindblur="oberseInput" bindinput="oberseInput" maxlength="10" type="text" placeholder-class="placeholder-style" placeholder="创建后不能修改10字内" /> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="group-introduce"> |
|||
<view>群介绍</view> |
|||
<textarea value="{{associationInfo.introduce}}" bindblur="oberseTextarea" bindinput="oberseTextarea" maxlength="500" placeholder-class="placeholder-style" placeholder="请输入社群介绍" /> |
|||
<text>{{associationInfo.introduce.length}}/500</text> |
|||
</view> |
|||
|
|||
<button bindtap="createAssociation" id="btn" hover-class="hover-button" type="warn">创建社群</button> |
|||
|
|||
</view> |
|||
</view> |
|||
|
|||
<wux-actionsheet id="wux-actionsheet" /> |
|||
|
|||
<notice bind:close="closeDialog" bind:confirm="confirmDialog" dialogVisible="{{dialogVisible}}" title="待审核" content="{{['网格会尽快审核您的建群申请', '请耐心等待']}}" confirmText="知道了"></notice> |
|||
|
|||
@ -0,0 +1,142 @@ |
|||
page { |
|||
width: 100%; |
|||
height:100vh; |
|||
background: #f7f7f7; |
|||
} |
|||
.createassociation { |
|||
width:100%; |
|||
height: 100%; |
|||
box-sizing: border-box; |
|||
padding: 20rpx; |
|||
} |
|||
.createassociation .content { |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
|
|||
.group-avatar { |
|||
width: 100%; |
|||
height: 130rpx; |
|||
border-radius: 16rpx; |
|||
background: #ffffff; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
margin-bottom: 20rpx; |
|||
box-sizing: border-box; |
|||
padding: 0 26rpx 0 24rpx; |
|||
} |
|||
.group-avatar view { |
|||
font-size: 34rpx; |
|||
color: #333; |
|||
} |
|||
.group-avatar image { |
|||
width: 100rpx; |
|||
height: 100rpx; |
|||
object-fit: cover; |
|||
border-radius: 8rpx; |
|||
overflow: hidden; |
|||
} |
|||
|
|||
.group-info { |
|||
width:100%; |
|||
height: 200rpx; |
|||
border-radius: 16rpx; |
|||
background: #ffffff; |
|||
margin-bottom: 20rpx; |
|||
box-sizing: border-box; |
|||
padding: 0 26rpx 0 24rpx; |
|||
overflow: hidden; |
|||
} |
|||
.group-info > view { |
|||
height: 100rpx; |
|||
width: 100%; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
} |
|||
.group-info .group-leader { |
|||
font-size: 34rpx; |
|||
color: #333; |
|||
box-sizing: border-box; |
|||
border-bottom: 1rpx solid #eaeaea; |
|||
} |
|||
.group-info .group-leader .name image { |
|||
width: 34rpx; |
|||
height: 33rpx; |
|||
object-fit: cover; |
|||
margin-left: 7rpx; |
|||
position: relative; |
|||
top: 4rpx; |
|||
} |
|||
.group-info .group-name { |
|||
font-size: 34rpx; |
|||
color: #333; |
|||
} |
|||
.group-info .group-name input { |
|||
text-align:right; |
|||
} |
|||
.group-info .group-name .placeholder-style { |
|||
font-size: 28rpx; |
|||
color: #999; |
|||
} |
|||
|
|||
.group-introduce { |
|||
width: 100%; |
|||
height: 600rpx; |
|||
border-radius: 16rpx; |
|||
background: #fff; |
|||
overflow: hidden; |
|||
box-sizing: border-box; |
|||
padding: 0 26rpx 0 24rpx; |
|||
} |
|||
.group-introduce > view { |
|||
width:100%; |
|||
height: 100rpx; |
|||
line-height: 100rpx; |
|||
font-size: 34rpx; |
|||
color: #333; |
|||
border-bottom: 1rpx solid #eaeaea; |
|||
margin-bottom: 30rpx; |
|||
} |
|||
.group-introduce textarea { |
|||
font-size: 34rpx; |
|||
color: #333; |
|||
width: 100%; |
|||
height: calc(600rpx - 205rpx); |
|||
} |
|||
.group-introduce .placeholder-style { |
|||
font-size: 28rpx; |
|||
color: #999; |
|||
} |
|||
.group-introduce text { |
|||
line-height: 75rpx; |
|||
height: 75rpx; |
|||
width: 100%; |
|||
font-size: 28rpx; |
|||
color: #999; |
|||
text-align: right; |
|||
display: block; |
|||
} |
|||
|
|||
#btn { |
|||
width: 560rpx; |
|||
height: 84rpx; |
|||
line-height: 84rpx; |
|||
text-align:center; |
|||
font-size: 36rpx; |
|||
color: #fff; |
|||
padding: 0; |
|||
margin: 0; |
|||
background:linear-gradient(90deg,#F40C0C,#FF4E4E); |
|||
margin: 0 auto; |
|||
margin-top: 60rpx; |
|||
} |
|||
.hover-button { |
|||
background: red !important; |
|||
} |
|||
|
|||
.wux-actionsheet__button { |
|||
font-size: 34rpx !important; |
|||
color: #333 !important; |
|||
} |
|||
@ -0,0 +1,186 @@ |
|||
import { getAssociationMember, incomingVerify } from '../../utils/api' |
|||
import convertPY from '../../utils/convertPY' |
|||
|
|||
Page({ |
|||
data: { |
|||
chooseAllValue: false, |
|||
noticeVerifyVisible: false, |
|||
incomingMemberList: [], |
|||
initIncomingMemberList: [], |
|||
groupId: '', |
|||
id: '', |
|||
userId: '' |
|||
}, |
|||
onLoad (options) { |
|||
this.getAssociationMember(options.id) |
|||
this.setData({ |
|||
groupId: options.id |
|||
}) |
|||
}, |
|||
chooseAll () { |
|||
if (this.data.initIncomingMemberList.length === 0) { |
|||
wx.showToast({ |
|||
title: '暂无可审核群成员', |
|||
icon: 'none', |
|||
duration: 2000 |
|||
}) |
|||
this.setData({ |
|||
chooseAllValue: false |
|||
}) |
|||
} else { |
|||
this.setData({ |
|||
chooseAllValue: !this.data.chooseAllValue |
|||
}) |
|||
} |
|||
}, |
|||
// 全部通过 审核入群
|
|||
verify () { |
|||
const members = [] |
|||
this.data.initIncomingMemberList.forEach(item => { |
|||
members.push({ |
|||
state: 10, |
|||
auditOpinion: '', |
|||
id: item.id, |
|||
userId: item.userId |
|||
}) |
|||
}) |
|||
const para = { |
|||
groupId: this.data.groupId, |
|||
members |
|||
} |
|||
wx.showLoading({ |
|||
title: '加载中' |
|||
}) |
|||
incomingVerify(para).then(res => { |
|||
wx.hideLoading() |
|||
console.log('审核群成员', res) |
|||
wx.showToast({ |
|||
title: '审核群成员成功', |
|||
icon: 'none', |
|||
duration: 2000 |
|||
}) |
|||
const pages = getCurrentPages() |
|||
const page = pages[pages.length - 2] |
|||
page.getAssociationDetail() |
|||
setTimeout(() => { |
|||
wx.navigateBack({ |
|||
delta: 1 |
|||
}) |
|||
}, 500) |
|||
// this.getAssociationMember(this.data.groupId)
|
|||
console.log(res) |
|||
}).catch(err => { |
|||
console.log(err) |
|||
}) |
|||
}, |
|||
// 审核 未通过
|
|||
unpass (e) { |
|||
this.setData({ |
|||
noticeVerifyVisible: !this.data.noticeVerifyVisible |
|||
}) |
|||
if (e.detail.data === '') { |
|||
wx.showToast({ |
|||
title: '备注不能为空', |
|||
icon: 'none', |
|||
duration: 2000 |
|||
}) |
|||
return false |
|||
} |
|||
const para = { |
|||
groupId: this.data.groupId, |
|||
members: [{ |
|||
state: 5, |
|||
auditOpinion: e.detail.data, |
|||
id: this.data.id, |
|||
userId: this.data.userId |
|||
}] |
|||
} |
|||
wx.showLoading({ |
|||
title: '加载中' |
|||
}) |
|||
incomingVerify(para).then(res => { |
|||
wx.hideLoading() |
|||
console.log('审核群成员', res) |
|||
wx.showToast({ |
|||
title: '审核群成员成功', |
|||
icon: 'none', |
|||
duration: 2000 |
|||
}) |
|||
this.getAssociationMember(this.data.groupId) |
|||
this.setData({ |
|||
noticeVerifyVisible: !this.data.noticeVerifyVisible |
|||
}) |
|||
}).catch(err => { |
|||
console.log(err) |
|||
}) |
|||
}, |
|||
// 审核 通过
|
|||
pass (e) { |
|||
const para = { |
|||
groupId: this.data.groupId, |
|||
members: [{ |
|||
state: 10, |
|||
auditOpinion: e.detail.data, |
|||
id: this.data.id, |
|||
userId: this.data.userId |
|||
}] |
|||
} |
|||
wx.showLoading({ |
|||
title: '加载中' |
|||
}) |
|||
incomingVerify(para).then(res => { |
|||
wx.hideLoading() |
|||
console.log('审核群成员', res) |
|||
wx.showToast({ |
|||
title: '审核群成员成功', |
|||
icon: 'none', |
|||
duration: 2000 |
|||
}) |
|||
const pages = getCurrentPages() |
|||
const page = pages[pages.length - 2] |
|||
page.getAssociationDetail() |
|||
this.getAssociationMember(this.data.groupId) |
|||
}).catch(err => { |
|||
console.log(err) |
|||
}) |
|||
}, |
|||
// 获取群成员列表
|
|||
getAssociationMember (groupId) { |
|||
const para = { |
|||
state: 0, |
|||
groupId, |
|||
} |
|||
getAssociationMember(para).then(res => { |
|||
console.log('待审核群成员',res) |
|||
this.setData({ |
|||
initIncomingMemberList: res.data |
|||
}) |
|||
let incomingMemberList = [] |
|||
res.data.forEach(item => { |
|||
const alphabet = convertPY.convertPYs(item.nickname) |
|||
const index = incomingMemberList.findIndex(item => item.alphabet === alphabet) |
|||
if (index > -1) { |
|||
incomingMemberList[index].memberList.push(item) |
|||
} else { |
|||
incomingMemberList.push({ |
|||
alphabet: alphabet, |
|||
memberList: [item] |
|||
}) |
|||
} |
|||
}) |
|||
incomingMemberList.sort((a,b) => a.alphabet.charCodeAt() - b.alphabet.charCodeAt()) |
|||
this.setData({ |
|||
incomingMemberList |
|||
}) |
|||
}).catch(err => { |
|||
console.log(err) |
|||
}) |
|||
}, |
|||
operationBtn (e) { |
|||
this.setData({ |
|||
id: e.detail.id, |
|||
userId: e.detail.userId, |
|||
noticeVerifyVisible: !this.data.noticeVerifyVisible |
|||
}) |
|||
} |
|||
}) |
|||
@ -0,0 +1,7 @@ |
|||
{ |
|||
"usingComponents":{ |
|||
"contact": "../../components/contact/contact", |
|||
"notice-verify": "../../components/noticeVerify/noticeVerify" |
|||
}, |
|||
"navigationBarTitleText": "入群审核" |
|||
} |
|||
@ -0,0 +1,28 @@ |
|||
<view class="incoming-verify"> |
|||
<contact bind:operationBtn="operationBtn" scrollViewTop="{0}" scrollViewBottom="{{110}}" pageType="verify" dataList="{{incomingMemberList}}"></contact> |
|||
<view class="operation"> |
|||
<view class="left"> |
|||
<checkbox-group bind:change="chooseAll"> |
|||
<checkbox color="red" value="1" checked="{{chooseAllValue}}"/> |
|||
</checkbox-group> |
|||
<text>全选</text> |
|||
</view> |
|||
<button |
|||
style="background: {{chooseAllValue ? 'linear-gradient(to right, #f51111, #fe4a4a)': '#cecece'}}" |
|||
type="default" |
|||
size="mini" |
|||
hover-class="hover-confirm" |
|||
bindtap="verify" |
|||
disabled="{{!chooseAllValue}}">全部通过</button> |
|||
</view> |
|||
</view> |
|||
|
|||
<notice-verify |
|||
noticeVerifyVisible="{{noticeVerifyVisible}}" |
|||
bind:close="unpass" |
|||
bind:confirm="pass" |
|||
title="入群审核" |
|||
tipVisible="{{true}}" |
|||
cancelText="不通过" |
|||
confirmText="通过"> |
|||
</notice-verify> |
|||
@ -0,0 +1,47 @@ |
|||
page { |
|||
width: 100%; |
|||
height: 100vh; |
|||
} |
|||
.incoming-verify { |
|||
width: 100%; |
|||
height: 100%; |
|||
background-color: #f7f7f7; |
|||
} |
|||
.incoming-verify .operation { |
|||
width: 100%; |
|||
height: 110rpx; |
|||
background: #fff; |
|||
position: fixed; |
|||
left: 0; |
|||
bottom: 0; |
|||
box-sizing: border-box; |
|||
padding: 0 20rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
} |
|||
.incoming-verify .operation .left { |
|||
height: 100%; |
|||
display: flex; |
|||
align-items: center; |
|||
} |
|||
.incoming-verify .operation .left text { |
|||
font-size: 32rpx; |
|||
color: 3333； |
|||
} |
|||
.incoming-verify .operation button { |
|||
width: 200rpx; |
|||
height: 72rpx; |
|||
color: #fff; |
|||
padding: 0; |
|||
margin: 0; |
|||
border: 0; |
|||
border-radius: 8rpx; |
|||
font-size: 32rpx; |
|||
text-align:center; |
|||
line-height: 72rpx; |
|||
background: linear-gradient(to right, #f51111, #fe4a4a); |
|||
} |
|||
.incoming-verify .operation .hover-confirm { |
|||
background: #c00d0d; |
|||
} |
|||
@ -0,0 +1,191 @@ |
|||
import { getInviteList, addMember } from '../../utils/api' |
|||
import convertPY from '../../utils/convertPY' |
|||
const app = getApp() |
|||
|
|||
Page({ |
|||
data: { |
|||
chooseAllValue: false, |
|||
dialogVisible: false, |
|||
searchValue: '', |
|||
groupId: '', |
|||
inviteFriendList: [], |
|||
initInviteFriendList: [], |
|||
couldInvite: false, |
|||
groupInfo: { |
|||
groupAvatar: '', |
|||
groupLeader: '', |
|||
groupName:'', |
|||
groupId: '' |
|||
}, |
|||
filterOptionVisible: false, |
|||
selectedOption: 'lastName' |
|||
}, |
|||
onLoad (options) { |
|||
this.setData({ |
|||
groupId: options.id, |
|||
groupInfo: app.globalData.groupInfo |
|||
}) |
|||
this.getInviteList() |
|||
}, |
|||
chooseAll (e) { |
|||
if (this.data.inviteFriendList.length === 0) { |
|||
wx.showToast({ |
|||
title: '暂无可邀请好友', |
|||
icon: 'none', |
|||
duration: 2000 |
|||
}) |
|||
this.setData({ |
|||
chooseAllValue: false |
|||
}) |
|||
} else { |
|||
const inviteFriendList = [...this.data.inviteFriendList] |
|||
for(let i = 0; i < inviteFriendList.length; i ++) { |
|||
for(let j = 0; j < inviteFriendList[i].memberList.length; j ++) { |
|||
if (e.detail.value.length > 0) { |
|||
inviteFriendList[i].memberList[j].checked = true |
|||
} else { |
|||
inviteFriendList[i].memberList[j].checked = false |
|||
} |
|||
|
|||
} |
|||
} |
|||
this.setData({ |
|||
inviteFriendList, |
|||
couldInvite: e.detail.value.length > 0 |
|||
}) |
|||
} |
|||
}, |
|||
inviteFriend () { |
|||
this.setData({ |
|||
dialogVisible: true |
|||
}) |
|||
}, |
|||
parentVisibleValue (e) { |
|||
this.setData({ |
|||
dialogVisible: e.detail.visibleValue |
|||
}) |
|||
}, |
|||
getInviteList (e = {}) { |
|||
let value = '' |
|||
if ('detail' in e) { |
|||
value = e.detail.value |
|||
} |
|||
const para = { |
|||
groupId: this.data.groupId, |
|||
mobile: this.data.selectedOption === 'mobile' ? value : '', |
|||
road: this.data.selectedOption === 'road' ? value : '', |
|||
lastName: this.data.selectedOption === 'lastName' ? value : '' |
|||
} |
|||
getInviteList(para).then(res => { |
|||
console.log('邀请好友列表', res) |
|||
this.setData({ |
|||
initInviteFriendList: res.data |
|||
}) |
|||
let inviteFriendList = [] |
|||
res.data.forEach(item => { |
|||
item.checked = false |
|||
const alphabet = convertPY.convertPYs(item.nickname) |
|||
const index = inviteFriendList.findIndex(item => item.alphabet === alphabet) |
|||
if (index > -1) { |
|||
inviteFriendList[index].memberList.push(item) |
|||
} else { |
|||
inviteFriendList.push({ |
|||
alphabet: alphabet, |
|||
memberList: [item] |
|||
}) |
|||
} |
|||
}) |
|||
inviteFriendList.sort((a,b) => a.alphabet.charCodeAt() - b.alphabet.charCodeAt()) |
|||
this.setData({ |
|||
inviteFriendList |
|||
}) |
|||
}).catch(err => { |
|||
console.log(err) |
|||
}) |
|||
}, |
|||
chooseFriend (e) { |
|||
console.log(e.detail.alphabet, e.detail.userId) |
|||
const index = this.data.inviteFriendList.findIndex(item => item.alphabet === e.detail.alphabet) |
|||
this.data.inviteFriendList[index].memberList.forEach(item => { |
|||
if (item.userId === e.detail.userId) { |
|||
item.checked = !item.checked |
|||
} |
|||
}) |
|||
let chosen = false |
|||
let chooseAll = true |
|||
for(let i = 0; i < this.data.inviteFriendList.length; i ++) { |
|||
for(let j = 0; j < this.data.inviteFriendList[i].memberList.length; j ++) { |
|||
if (this.data.inviteFriendList[i].memberList[j].checked) { |
|||
chosen = true |
|||
break |
|||
} |
|||
} |
|||
} |
|||
for(let i = 0; i < this.data.inviteFriendList.length; i ++) { |
|||
for(let j = 0; j < this.data.inviteFriendList[i].memberList.length; j ++) { |
|||
if (!this.data.inviteFriendList[i].memberList[j].checked) { |
|||
chooseAll = false |
|||
} |
|||
} |
|||
} |
|||
this.setData({ |
|||
chooseAllValue: chooseAll, |
|||
couldInvite: chosen |
|||
}) |
|||
}, |
|||
// 邀请好友 确认弹窗
|
|||
inviteFriendComfirm () { |
|||
const members = [] |
|||
for(let i = 0; i < this.data.inviteFriendList.length; i ++) { |
|||
for(let j = 0; j < this.data.inviteFriendList[i].memberList.length; j ++) { |
|||
if (this.data.inviteFriendList[i].memberList[j].checked) { |
|||
members.push({ |
|||
userId: this.data.inviteFriendList[i].memberList[j].userId, |
|||
userAvatar: this.data.inviteFriendList[i].memberList[j].userAvatar, |
|||
nickname: this.data.inviteFriendList[i].memberList[j].nickname, |
|||
partyMember: this.data.inviteFriendList[i].memberList[j].partyMember, |
|||
mobile: this.data.inviteFriendList[i].memberList[j].mobile |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
const para = { |
|||
groupId: this.data.groupId, |
|||
members |
|||
} |
|||
wx.showLoading({ |
|||
title: '加载中' |
|||
}) |
|||
addMember(para).then(res => { |
|||
wx.hideLoading() |
|||
console.log(res) |
|||
wx.showToast({ |
|||
title: '邀请好友成功', |
|||
icon :'none', |
|||
duration: 2000 |
|||
}) |
|||
const pages = getCurrentPages() |
|||
const page = pages[pages.length - 2] |
|||
page.getAssociationDetail() |
|||
this.getInviteList() |
|||
this.setData({ |
|||
chooseAllValue: false, |
|||
couldInvite: false |
|||
}) |
|||
}).catch(err => { |
|||
console.log(err) |
|||
}) |
|||
}, |
|||
// 筛选过滤条件
|
|||
filterOptions () { |
|||
this.setData({ |
|||
filterOptionVisible: !this.data.filterOptionVisible |
|||
}) |
|||
}, |
|||
chooseOption (e) { |
|||
this.setData({ |
|||
selectedOption: e.currentTarget.dataset.option, |
|||
filterOptionVisible: false |
|||
}) |
|||
} |
|||
}) |
|||
@ -0,0 +1,9 @@ |
|||
{ |
|||
"usingComponents": { |
|||
"contact": "../../components/contact/contact", |
|||
"invite-friend-dialog": "../../components/inviteFriendDialog/inviteFriendDialog", |
|||
"wux-search-bar": "../../../../dist/search-bar/index", |
|||
"wux-filterbar": "../../../../dist/filterbar/index" |
|||
}, |
|||
"navigationBarTitleText": "邀请好友" |
|||
} |
|||
@ -0,0 +1,50 @@ |
|||
<view class="invite-friend"> |
|||
<view class="search"> |
|||
<view class="left" bindtap="filterOptions"> |
|||
<view class="type">{{selectedOption == 'lastName' ? '姓氏' : selectedOption == 'mobile' ? '手机号' : '路名称'}}</view> |
|||
<view class="triangle {{filterOptionVisible ? 'rotate' : ''}}"></view> |
|||
<view class="options {{filterOptionVisible ? 'show' : ''}}"> |
|||
<view class="option" catchtap="chooseOption" data-option="lastName">姓氏</view> |
|||
<view class="option" catchtap="chooseOption" data-option="road">路名称</view> |
|||
<view class="option" catchtap="chooseOption" data-option="mobile">手机号</view> |
|||
</view> |
|||
</view> |
|||
<view class="right"> |
|||
<image class="search" src="../../images/search.png" /> |
|||
<input |
|||
type="text" |
|||
bindconfirm="getInviteList" |
|||
maxlength="20" |
|||
confirm-type="search" |
|||
value="{{searchValue}}" |
|||
placeholder-class="search-input" |
|||
placeholder="{{selectedOption == 'lastName' ? '请输入姓氏' : selectedOption == 'mobile' ? '请输入手机号' : '请输入路名称+号码'}}"/> |
|||
<!-- <wux-search-bar |
|||
bind:confirm="getInviteList" |
|||
style="width: 100%;" |
|||
clear |
|||
maxlength="20" |
|||
controlled |
|||
value="{{searchValue}}" |
|||
placeholder="{{selectedOption == 'lastName' ? '请输入姓氏' : selectedOption == 'mobile' ? '请输入手机号' : '请输入路名称+号码'}}"/> --> |
|||
</view> |
|||
</view> |
|||
<contact bind:chooseFriend="chooseFriend" dataList="{{inviteFriendList}}" scrollViewTop="{{110}}" scrollViewBottom="{{110}}" pageType="invite"></contact> |
|||
<view class="operation"> |
|||
<view class="left"> |
|||
<checkbox-group bind:change="chooseAll"> |
|||
<checkbox color="red" value="1" checked="{{chooseAllValue}}" /> |
|||
</checkbox-group> |
|||
<text>全部</text> |
|||
</view> |
|||
<view class="right"> |
|||
<button class="invite" type="default" size="mini" hover-class="hover-invite" bindtap="inviteFriend">邀请好友</button> |
|||
<button bindtap="inviteFriendComfirm" disabled="{{!couldInvite}}" style="background: {{couldInvite ? 'linear-gradient(to right, #fd2316, #ff624a)': '#cecece'}}" class="confirm" type="default" size="mini" hover-class="hover-confirm">确定</button> |
|||
</view> |
|||
</view> |
|||
<invite-friend-dialog |
|||
dialogVisible="{{dialogVisible}}" |
|||
bind:parentVisibleValue="parentVisibleValue" |
|||
groupInfo="{{groupInfo}}"> |
|||
</invite-friend-dialog> |
|||
</view> |
|||
@ -0,0 +1,153 @@ |
|||
page { |
|||
width: 100%; |
|||
height: 100vh; |
|||
} |
|||
.invite-friend { |
|||
width: 100%; |
|||
height: 100%; |
|||
background-color: #f7f7f7; |
|||
} |
|||
.invite-friend .search { |
|||
width:100%; |
|||
height: 110rpx; |
|||
background: #fff; |
|||
display: flex; |
|||
justify-content: flex-start; |
|||
align-items: center; |
|||
} |
|||
.invite-friend .search .left { |
|||
width: 20%; |
|||
height: 100%; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
position: relative; |
|||
} |
|||
.invite-friend .search .left .type { |
|||
font-size: 28rpx; |
|||
color: #333; |
|||
margin-right: 10rpx; |
|||
} |
|||
.invite-friend .search .left .triangle { |
|||
width: 0; |
|||
height: 0; |
|||
border: 15rpx solid transparent; |
|||
border-top: 15rpx solid #333; |
|||
position: relative; |
|||
top: 10rpx; |
|||
transform: rotate(0deg); |
|||
transition: transform linear .3s; |
|||
transform-origin: center 7rpx; |
|||
} |
|||
.invite-friend .search .left .triangle.rotate { |
|||
transform: rotate(180deg); |
|||
transition: transform linear .3s; |
|||
transform-origin: center 7rpx; |
|||
} |
|||
.invite-friend .search .left .options { |
|||
position: absolute; |
|||
left: 0; |
|||
top: 110rpx; |
|||
width: 100%; |
|||
height: auto; |
|||
z-index: 1000; |
|||
background: #fff; |
|||
height: 0; |
|||
transition: height linear .3s; |
|||
overflow: hidden; |
|||
} |
|||
.invite-friend .search .left .options.show { |
|||
height: 150rpx; |
|||
transition: height linear .3s; |
|||
} |
|||
.invite-friend .search .left .options .option { |
|||
width: 100%; |
|||
height: 50rpx; |
|||
font-size: 28rpx; |
|||
color: #333; |
|||
text-align:center; |
|||
line-height: 50rpx; |
|||
} |
|||
.invite-friend .search .right { |
|||
width: 78%; |
|||
height: 74rpx; |
|||
border-radius: 8rpx; |
|||
background: #F2F2F2; |
|||
display: flex; |
|||
align-items: center; |
|||
} |
|||
.invite-friend .search .right .search { |
|||
width: 26rpx; |
|||
height: 26rpx; |
|||
object-fit: cover; |
|||
margin: 0 10rpx; |
|||
} |
|||
.invite-friend .search .right input { |
|||
width: calc(100% - 40rpx); |
|||
height:74rpx; |
|||
line-height:74rpx; |
|||
font-size: 26rpx; |
|||
color: #666; |
|||
} |
|||
.invite-friend .search .right .search-input { |
|||
font-size: 26rpx; |
|||
color: #a8a8a8; |
|||
} |
|||
.invite-friend .search .right .search-text { |
|||
font-size: 28rpx; |
|||
color:#333; |
|||
margin-left: 5prx; |
|||
} |
|||
.invite-friend .operation { |
|||
width: 100%; |
|||
height: 110rpx; |
|||
position: fixed; |
|||
bottom: 0; |
|||
left: 0; |
|||
background: #fff; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
box-sizing: border-box; |
|||
padding: 0 20rpx; |
|||
} |
|||
.invite-friend .operation .left { |
|||
height: 100%; |
|||
display: flex; |
|||
align-items: center; |
|||
} |
|||
.invite-friend .operation .left text { |
|||
font-size: 32rpx; |
|||
color: #999; |
|||
} |
|||
.invite-friend .operation .right button { |
|||
width: 180rpx; |
|||
height: 66rpx; |
|||
border-radius: 8rpx; |
|||
line-height: 66rpx; |
|||
text-align:center; |
|||
color: #fff; |
|||
font-size: 32rpx; |
|||
padding: 0; |
|||
border: 0; |
|||
} |
|||
.invite-friend .operation .right .invite { |
|||
background: linear-gradient(to right, #02c7b7, #00cd95); |
|||
} |
|||
.invite-friend .operation .right .confirm { |
|||
background: linear-gradient(to right, #fd2316, #ff624a); |
|||
} |
|||
.invite-friend .operation .right .hover-invite { |
|||
background: #00a799; |
|||
} |
|||
.invite-friend .operation .right .hover-confirm { |
|||
background: #c60b00; |
|||
} |
|||
.invite-friend .operation .right button + button { |
|||
margin-left: 10rpx; |
|||
} |
|||
.invite-friend .operation .right { |
|||
height: 100%; |
|||
display: flex; |
|||
align-items: center; |
|||
} |
|||
@ -0,0 +1,81 @@ |
|||
import { getAssociationDetail, joinAssociation } from '../../utils/api' |
|||
const app = getApp() |
|||
|
|||
Page({ |
|||
data: { |
|||
name: '加入社群', |
|||
pageType: 'join', |
|||
associationInfo: { |
|||
groupAvatar: '', |
|||
groupName: '', |
|||
id: '', |
|||
nickname: '', |
|||
groupIntroduction: '' |
|||
}, |
|||
groupIntroductionList: [], |
|||
dialogVisible: false, |
|||
lordFlag: '0' |
|||
}, |
|||
onShow () { |
|||
if (this.data.associationInfo.id !== '') { |
|||
this.getAssociationDetail(this.data.associationInfo.id) |
|||
} |
|||
}, |
|||
onLoad (options) { |
|||
let pageType = '' |
|||
if (options.type === 'change') { |
|||
pageType = 'change' |
|||
} else if (options.type === 'join') { |
|||
pageType = 'join' |
|||
} |
|||
this.getAssociationDetail(options.id) |
|||
this.setData({ |
|||
lordFlag: app.globalData.groupInfo.lordFlag, |
|||
pageType |
|||
}) |
|||
}, |
|||
// 修改群介绍
|
|||
navigateToChangeIntroduce () { |
|||
wx.navigateTo({ |
|||
url: `/subpages/association/pages/changeIntroduce/changeIntroduce?id=${this.data.associationInfo.id}` |
|||
}) |
|||
}, |
|||
// 获取社群详情
|
|||
getAssociationDetail (id) { |
|||
getAssociationDetail(id).then(res => { |
|||
console.log('社群详情', res) |
|||
const associationInfo = {} |
|||
for(const key in this.data.associationInfo) { |
|||
associationInfo[key] = res.data[key] |
|||
} |
|||
let groupIntroductionList = [] |
|||
if (associationInfo.groupIntroduction.length > 0) { |
|||
groupIntroductionList = associationInfo.groupIntroduction.split('\n') |
|||
} |
|||
this.setData({ |
|||
associationInfo, |
|||
groupIntroductionList |
|||
}) |
|||
}).catch(err => { |
|||
console.log(err) |
|||
}) |
|||
}, |
|||
confirmDialog () { |
|||
wx.navigateBack() |
|||
}, |
|||
joinAssociation () { |
|||
wx.showLoading({ |
|||
title: '加载中' |
|||
}) |
|||
joinAssociation(this.data.associationInfo.id).then(res => { |
|||
wx.hideLoading() |
|||
console.log('审核加入社群', res) |
|||
this.setData({ |
|||
dialogVisible: !this.data.dialogVisible |
|||
}) |
|||
}).catch(err => { |
|||
console.log(err) |
|||
}) |
|||
|
|||
} |
|||
}) |
|||
@ -0,0 +1,6 @@ |
|||
{ |
|||
"usingComponents": { |
|||
"notice": "../../components/notice/notice" |
|||
}, |
|||
"navigationBarTitleText": "群介绍" |
|||
} |
|||
@ -0,0 +1,30 @@ |
|||
<view class="join-association"> |
|||
<view class="content"> |
|||
|
|||
<view class="introduce"> |
|||
<image class="bgimage" src="../../images/ig_qunxiangqingjiesao@2x.png" /> |
|||
<view class="info"> |
|||
<image src="{{associationInfo.groupAvatar}}" /> |
|||
<view class="name">{{associationInfo.groupName}}</view> |
|||
<view class="leader">{{associationInfo.nickname}}（群主）</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="introduce-content"> |
|||
<view class="tip" wx:for="{{groupIntroductionList}}" wx:key="{{index}}" wx:for-index="index" wx:for-item="item"> |
|||
{{item}} |
|||
</view> |
|||
</view> |
|||
|
|||
<view wx:if="{{pageType === 'join'}}" class="button-view"> |
|||
<button type="warn" hover-class="hover-button" bindtap="joinAssociation">加入社群</button> |
|||
</view> |
|||
|
|||
<view wx:elif="{{pageType === 'change' && lordFlag === '1'}}" class="button-change"> |
|||
<button type="default" size="mini" hover-class="hover-change" bindtap="navigateToChangeIntroduce">修改介绍</button> |
|||
</view> |
|||
|
|||
</view> |
|||
</view> |
|||
|
|||
<notice bind:confirm="confirmDialog" dialogVisible="{{dialogVisible}}" title="入群申请" content="{{['群主会尽快审核您的入群申请','请耐心等待！']}}" confirmText="知道了"></notice> |
|||
@ -0,0 +1,117 @@ |
|||
page{ |
|||
width: 100%; |
|||
height: 100vh; |
|||
background: #f7f7f7; |
|||
} |
|||
.join-association { |
|||
width:100%; |
|||
height:100%; |
|||
box-sizing: border-box; |
|||
padding: 32rpx 30rpx; |
|||
} |
|||
.join-association .content { |
|||
width:100%; |
|||
height:100%; |
|||
background: #fff; |
|||
border-radius: 16rpx; |
|||
} |
|||
.join-association .introduce { |
|||
width: 100%; |
|||
height: 354rpx; |
|||
border-radius: 16rpx 16rpx 0 0; |
|||
overflow: hidden; |
|||
position: relative; |
|||
} |
|||
.introduce .bgimage { |
|||
width:100%; |
|||
height: 100%; |
|||
object-fit: cover; |
|||
position: absolute; |
|||
z-index: 1; |
|||
} |
|||
.introduce .info { |
|||
width:100%; |
|||
height: 100%; |
|||
position: relative; |
|||
z-index: 10; |
|||
} |
|||
.introduce .info image { |
|||
width: 116rpx; |
|||
height: 116rpx; |
|||
border-radius: 50%; |
|||
overflow: hidden; |
|||
position: relative; |
|||
left: calc(50% - 58rpx); |
|||
margin-top: 45rpx; |
|||
} |
|||
.introduce .info .name { |
|||
font-size: 32rpx; |
|||
line-height: 32rpx; |
|||
margin: 10rpx 0 7rpx 0; |
|||
width:100%; |
|||
text-align:center; |
|||
color: #fff; |
|||
} |
|||
.introduce .info .leader { |
|||
font-size: 20rpx; |
|||
line-height: 20rpx; |
|||
width: 100%; |
|||
text-align:center; |
|||
color: rgba(255,255,255, 0.8); |
|||
} |
|||
.introduce-content { |
|||
box-sizing: border-box; |
|||
padding: 0 30rpx; |
|||
position: relative; |
|||
top: -40rpx; |
|||
max-height: calc(100vh - 600rpx); |
|||
min-height: calc(100vh - 600rpx); |
|||
overflow-y: auto; |
|||
} |
|||
.introduce-content .tip { |
|||
width: 100%; |
|||
font-size: 34rpx; |
|||
line-height: 56rpx; |
|||
color: #333; |
|||
text-indent: 68rpx; |
|||
} |
|||
.introduce-content > .tip + .tip { |
|||
margin-top: 12rpx; |
|||
} |
|||
|
|||
.button-view { |
|||
position: fixed; |
|||
width: calc(100% - 60rpx); |
|||
bottom: 100rpx; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
} |
|||
button { |
|||
width: 560rpx; |
|||
height: 84rpx; |
|||
font-size: 34rpx; |
|||
color: #fff; |
|||
background: linear-gradient(90deg,#F40C0C,#FF4E4E); |
|||
} |
|||
.hover-button { |
|||
background: #e64340; |
|||
} |
|||
.button-change { |
|||
position: fixed; |
|||
width: calc(100% - 60rpx); |
|||
bottom: 100rpx; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
} |
|||
.button-change button { |
|||
width: 560rpx; |
|||
height: 84rpx; |
|||
font-size: 34rpx; |
|||
color: #fff; |
|||
background: #01C15C; |
|||
} |
|||
.button-change .hover-change { |
|||
background: green; |
|||
} |
|||
@ -0,0 +1,60 @@ |
|||
import { remarkOrReply } from '../../utils/api' |
|||
|
|||
Page({ |
|||
data: { |
|||
textareaValue: '', |
|||
topicId: '', |
|||
faCommentId: '' |
|||
}, |
|||
onLoad (options) { |
|||
const { topicId, faCommentId } = options |
|||
this.setData({ |
|||
topicId, |
|||
faCommentId |
|||
}) |
|||
}, |
|||
onShow () { |
|||
|
|||
}, |
|||
onReady () { |
|||
wx.setNavigationBarTitle({ |
|||
title: '评论' |
|||
}) |
|||
}, |
|||
// textarea 双向绑定
|
|||
bindTextareaValue (e) { |
|||
this.setData({ |
|||
textareaValue: e.detail.value |
|||
}) |
|||
}, |
|||
publish () { |
|||
if (this.data.textareaValue === '') { |
|||
wx.showToast({ |
|||
title: '请输入评论内容', |
|||
icon: 'none', |
|||
duration: 2000 |
|||
}) |
|||
return false |
|||
} |
|||
const para = { |
|||
topicId: this.data.topicId, |
|||
faCommentId: this.data.faCommentId, |
|||
content: this.data.textareaValue |
|||
} |
|||
wx.showLoading({ |
|||
title: '加载中' |
|||
}) |
|||
remarkOrReply(para).then(res => { |
|||
wx.hideLoading() |
|||
console.log('评论或者回复', res) |
|||
wx.showToast({ |
|||
title: '评论成功', |
|||
icon: 'none', |
|||
duration: 2000 |
|||
}) |
|||
wx.navigateBack() |
|||
}).catch(err => { |
|||
console.log(err) |
|||
}) |
|||
} |
|||
}) |
|||
@ -0,0 +1,3 @@ |
|||
{ |
|||
"navigationBarTitleText": "回复" |
|||
} |
|||
Some files were not shown because too many files changed in this diff
Loading…
Reference in new issue