地址替换

zengh

2022-06-21 4efeb31d5b4921d7e851c256009486ad86bc70e2

 pages/groupChat/modify/modify.vue

New file
@@ -0,0 +1,223 @@
<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>