<template>
|
<view class="modifybox" :animation="animationData">
|
<view class="mask" :animation="animationData2"></view>
|
<view class="content">
|
<view class="m_title">{{ type }}</view>
|
<view class="close" @tap="show"><image src="../../../static/images/group/close.png" mode="widthFix"></image></view>
|
<view class="name" v-if="type == '群名'">
|
<view class="namebox"><input type="text" v-model="name" /></view>
|
<view class="notice-btn"><view class="modify-btn" @tap="modifyInfo('name')">修改</view></view>
|
</view>
|
<view class="notice" v-if="type == '公告'">
|
<view class="notice-content" v-show="!isModify">{{ notice }}</view>
|
<view class="notice-text" v-show="isModify"><textarea auto-height="true" v-model="notice" placeholder="" /></view>
|
<view class="notice-btn">
|
<view class="modify-btn" @tap="modifyNotice" v-show="!isModify && isManager">修改</view>
|
<view class="confirm-btn" @tap="modifyInfo('notice')" v-show="isModify">确定</view>
|
</view>
|
</view>
|
<view class="nickName" v-if="type == '昵称'">
|
<view class="nickbox"><input type="text" v-model="nickName" /></view>
|
<view class="notice-btn"><view class="modify-btn" @tap="modifyInfo('nickName')">修改</view></view>
|
</view>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
isModify: false,
|
animationData: {},
|
animationData2: {},
|
isShow: false,
|
name: '',
|
notice: '',
|
nickName: ''
|
};
|
},
|
props: ['isManager', 'groupInfo', 'n_Name', 'type'],
|
created() {
|
setTimeout(() => {
|
this.name = this.groupInfo.name;
|
this.notice = this.groupInfo.notice;
|
this.nickName = this.n_Name;
|
}, 100);
|
},
|
methods: {
|
show() {
|
this.isShow = !this.isShow;
|
var animation = uni.createAnimation({
|
duration: 600,
|
timingFunction: 'ease'
|
});
|
var animation2 = uni.createAnimation({
|
duration: 400,
|
timingFunction: 'ease'
|
});
|
if (this.isShow) {
|
animation.bottom(0).step();
|
this.animationData = animation.export();
|
setTimeout(
|
function() {
|
animation2.opacity(1).step();
|
this.animationData2 = animation2.export();
|
}.bind(this),
|
600
|
);
|
} else {
|
animation2.opacity(0).step();
|
this.animationData2 = animation2.export();
|
setTimeout(
|
function() {
|
animation.bottom('-100vh').step();
|
this.animationData = animation.export();
|
setTimeout(() => {
|
this.isModify = false;
|
}, 500);
|
}.bind(this),
|
400
|
);
|
}
|
},
|
modifyNotice() {
|
this.isModify = !this.isModify;
|
},
|
modifyInfo(type) {
|
let key = null;
|
let value = null;
|
if (type == 'name') {
|
key = 'name';
|
value = this.name;
|
} else if (type == 'notice') {
|
key = 'notice';
|
value = this.notice;
|
this.isModify = !this.isModify;
|
} else if(type =="nickName"){
|
key = 'nickName';
|
value = this.nickName;
|
}
|
this.$emit('modify', { [key]: value });
|
this.show()
|
}
|
}
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
.modifybox {
|
position: fixed;
|
bottom: -100vh;
|
left: 0rpx;
|
right: 0rpx;
|
height: 100vh;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
z-index: 1000;
|
.mask {
|
position: absolute;
|
bottom: 0rpx;
|
left: 0rpx;
|
right: 0rpx;
|
height: 100vh;
|
background: rgba(0, 0, 0, 0.5);
|
opacity: 0;
|
}
|
.content {
|
background: white;
|
width: 80vw;
|
height: auto;
|
padding-bottom: 20rpx;
|
box-sizing: border-box;
|
position: relative;
|
display: block;
|
.m_title {
|
height: 80rpx;
|
line-height: 80rpx;
|
width: 100%;
|
border-bottom: 2rpx solid #ccc;
|
text-align: center;
|
// background: red;
|
}
|
.close {
|
position: absolute;
|
top: 0rpx;
|
right: 0;
|
width: 80rpx;
|
height: 80rpx;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
image {
|
height: 50rpx;
|
width: 50rpx;
|
}
|
}
|
}
|
.name {
|
margin: 30rpx;
|
margin-top: 40rpx;
|
width: calc(100% - 60rpx);
|
font-size: 32rpx;
|
.namebox {
|
border: 2rpx solid #ccc;
|
input {
|
padding: 10rpx 5%;
|
text-align: center;
|
}
|
}
|
}
|
.notice-btn {
|
margin-top: 30rpx;
|
display: flex;
|
justify-content: center;
|
.modify-btn {
|
padding: 10rpx;
|
background: red;
|
color: white;
|
width: 100rpx;
|
text-align: center;
|
}
|
.confirm-btn {
|
padding: 10rpx;
|
background: #5a9bec;
|
color: white;
|
width: 100rpx;
|
text-align: center;
|
}
|
}
|
.notice {
|
margin: 0rpx 30rpx;
|
width: calc(100% - 60rpx);
|
font-size: 32rpx;
|
.notice-content {
|
margin-top: 40rpx;
|
}
|
.notice-text {
|
margin-top: 40rpx;
|
// height: 80rpx;
|
border: 2rpx solid #ccc;
|
textarea {
|
max-height: 300rpx;
|
width: 90%;
|
padding: 10rpx 5%;
|
}
|
}
|
}
|
.nickName {
|
margin: 30rpx;
|
margin-top: 40rpx;
|
width: calc(100% - 60rpx);
|
font-size: 32rpx;
|
.nickbox {
|
border: 2rpx solid #ccc;
|
input {
|
padding: 10rpx 5%;
|
text-align: center;
|
}
|
}
|
}
|
}
|
</style>
|
