uni-app 171部分小细节优化

简介: uni-app 171部分小细节优化

/pages/mail/user-base/user-base.vue

<template>
  <view class="page">
    <!-- 导航栏 -->
    <free-nav-bar showBack :showRight="detail.friend" bgColor="bg-white">
      <free-icon-button slot="right" v-if="detail.friend"><text class="iconfont font-md"
          @click="openAction">&#xe6fd;</text></free-icon-button>
    </free-nav-bar>
    <view class="px-3 py-4 flex align-center bg-white border-bottom">
      <free-avatar :src="detail.avatar" size="120"></free-avatar>
      <view class="flex flex-column ml-3 flex-1">
        <view class="font-lg font-weight-bold flex justify-between">
          <text class="font-lg font-weight-bold mb-1">{{detail.nickname}}</text>
          <image v-if="detail.star" src="/static/images/star.png" style="width: 40rpx;height: 40rpx;"></image>
        </view>
        <text class="font-md text-light-muted mb-1">账号:{{detail.username}}</text>
        <!-- <text class="font-md text-light-muted">地区:广东广州</text> -->
      </view>
    </view>
    <free-list-item v-if="detail.friend" showRight :showLeftIcon="false" @click="navigate(tagPath)">
      <view class="flex align-center">
        <text class="font-md text-dark mr-3">标签</text>
        <text class="font-md text-light-muted mr-2" v-for="(item,index) in detail.tags"
          :key="index">{{item}}</text>
      </view>
    </free-list-item>
    <free-divider></free-divider>
    <free-list-item v-if="detail.friend" showRight :showLeftIcon="false">
      <view class="flex align-center">
        <text class="font-md text-dark mr-3">朋友圈</text>
        <image src="/static/images/demo/cate_01.png" style="width: 90rpx; height: 90rpx;" class=" mr-2"></image>
        <image src="/static/images/demo/cate_01.png" style="width: 90rpx; height: 90rpx;" class=" mr-2"></image>
        <image src="/static/images/demo/cate_01.png" style="width: 90rpx; height: 90rpx;" class=" mr-2"></image>
      </view>
    </free-list-item>
    <free-list-item title="更多信息" showRight :showLeftIcon="false"></free-list-item>
    <free-divider></free-divider>
    <view v-if="detail.friend" class="py-3 flex align-center justify-center bg-white" hover-class="bg-light" @click="doEvent">
      <text class="iconfont text-primary mr-1" v-if="!detail.isBlack">&#xe64e;</text>
      <text class="font-md text-primary">{{detail.isblack ? '移除黑名单' : '发信息'}}</text>
    </view>
    <view v-else class="py-3 flex align-center justify-center bg-white" hover-class="bg-light"
      @click="navigate(addFriend())">
      <text class="font-md text-primary">添加好友</text>
    </view>
    <!-- 扩展菜单 -->
    <free-popup ref="action" bottom transformOrigin="center bottom" maskColor>
      <scroll-view style="height: 580rpx;" scroll-y="true" class="bg-white" :show-scrollbar="false">
        <free-list-item v-for="(item,index) in actions" :key="index" :title="item.title" :showRight="false"
          :border="false" @click="popupEvent(item)">
          <text slot="icon" class="iconfont font-lg py-1">{{item.icon}}</text>
        </free-list-item>
      </scroll-view>
    </free-popup>
  </view>
</template>
<script>
  import freeNavBar from '@/components/free-ui/free-nav-bar.vue';
  import freeIconButton from '@/components/free-ui/free-icon-button.vue';
  import freeChatItem from '@/components/free-ui/free-chat-item.vue';
  import freePopup from '@/components/free-ui/free-popup.vue';
  import freeListItem from '@/components/free-ui/free-list-item.vue';
  import freeDivider from '@/components/free-ui/free-divider.vue';
  import freeAvatar from '@/components/free-ui/free-avatar.vue';
  import auth from '@/common/mixin/auth.js';
  import $H from '@/common/free-lib/request.js';
  export default {
    mixins: [auth],
    components: {
      freeNavBar,
      freeIconButton,
      freeChatItem,
      freePopup,
      freeListItem,
      freeDivider,
      freeAvatar
    },
    data() {
      return {
        detail: {
          id: 0,
          username: '',
          nickname: '',
          avatar: '',
          sex: '',
          sign: '',
          area: '',
          friend: false,
          lookhim: 1,
          lookme: 1,
          star: 0,
          isblack: 0,
          tags: []
        },
      }
    },
    onShow() {
      this.getData();
    },
    onLoad(e) {
      uni.$on('saveRemarkTag', (e) => {
        this.detail.tagList = e.detail.tagList
        this.nickname = e.nickname;
      })
      if (!e.user_id) {
        return this.backToast();
      }
      this.detail.id = e.user_id;
      // 获取当前用户资料
      this.getData();
    },
    beforeDestroy() {
      this.$refs.action.hide();
      uni.$off('saveRemarkTag')
    },
    computed: {
      tagPath() {
        return "mail/user-remark-tag/user-remark-tag?params="+JSON.stringify({
          user_id:this.detail.id,
          nickname:this.detail.nickname,
          tags:this.detail.tags ? this.detail.tags.join(',') : ''
        })
      },
      actions() {
        return [{
          icon: "\ue6b3",
          title: "设置备注和标签",
          type: "navigate",
          path: "mail/user-remark-tag/user-remark-tag?params="+JSON.stringify({
            user_id:this.detail.id,
            nickname:this.detail.nickname,
            tags:this.detail.tags ? this.detail.tags.join(',') : ''
          })
        }, {
          icon: "\ue613",
          title: "把他推荐给朋友",
          type: "navigate",
          path: "mail/send-card/send-card"
        }, {
          icon: "\ue6b0",
          title: this.detail.star ? '取消星标好友' : "设为星标朋友",
          type: "event",
          event: "setStar"
        }, {
          icon: "\ue667",
          title: "设置朋友圈和动态权限",
          type: "navigate",
          path: "mail/user-moments-auth/user-moments-auth?user_id="+this.detail.id+"&params="+JSON.stringify({
            lookme:this.detail.lookme,
            lookhim:this.detail.lookhim,
          })
        }, {
          icon: "\ue638",
          title: this.detail.isblack ? '移出黑名单' : "加入黑名单",
          type: "event",
          event: "setBlack"
        }, {
          icon: "\ue61c",
          title: "投诉",
          type: "navigate",
          path: "mail/user-report/user-report?params="+JSON.stringify({
            user_id:this.detail.id,
            type:'user'
          })
        }, {
          icon: "\ue638",
          title: "删除",
          type: "event",
          event: "deleteItem"
        }]
      }
    },
    methods: {
      addFriend() {
        let obj = {
          friend_id: this.detail.id,
          nickname: this.detail.nickname,
          lookme: typeof this.detail.lookme === 'number' ? this.detail.lookme : 1,
          lookhim: typeof this.detail.lookhim === 'number' ? this.detail.lookhim : 1,
        };
        return 'mail/add-friend/add-friend?params=' + JSON.stringify(obj);
      },
      getData() {
        $H.get('/friend/read/' + this.detail.id).then(res => {
          if (!res) {
            return this.backToast('该用户不存在');
          }
          this.detail = res;
          console.log(res);
        });
      },
      openAction() {
        this.$refs.action.show()
      },
      navigate(url) {
        console.log(url)
        uni.navigateTo({
          url: '/pages/' + url,
        });
      },
      // 操作菜单事件
      popupEvent(e) {
        if (!e.type) {
          return;
        }
        setTimeout(() => {
          // 关闭弹出层
          this.$refs.action.hide()
        }, 300)
        switch (e.type) {
          case 'navigate':
            this.navigate(e.path);
            break;
          case 'event':
            this[e.event](e);
            break;
        }
      },
      // 删除好友
      deleteItem(){
        uni.showModal({
          title: '是否要删除好友?',
          success: res => {
            if(res.confirm){
              $H.post('/friend/destroy',{friend_id:this.detail.id}).then(res=>{
                uni.showToast({
                  title:'删除好友成功',
                  icon:'none'
                });
                uni.reLaunch({
                  url:'/pages/tabbar/index/index'
                })
              })
            }
          },
          fail: () => {},
          complete: () => {}
        });
      },
      // 设为星标
      setStar(e) {
        let star = this.detail.star == 0 ? 1 : 0;
        $H.post('/friend/setstar/' + this.detail.id, {
          star
        }).then(res => {
          this.detail.star = star;
          e.title = this.detail.star ? '取消标星好友' : '设为标星好友';
        });
      },
      // 加入黑名单
      setBlack(e) {
        let msg = this.detail.isblack ? '移出黑名单' : '加入黑名单';
      
        uni.showModal({
          content: '是否要' + msg,
          success: (res) => {
            if (res.confirm) {
              let isblack = this.detail.isblack == 0 ? 1:0
              $H.post('/friend/setblack/' + this.detail.id, {
                isblack
              }).then(res => {
                this.detail.isblack = isblack;
              });
              // this.detail.isBlack = !this.detail.isBlack;
              // e.title = this.isBlack ? '移出黑名单' : '加入黑名单';
              uni.showToast({
                title: msg + '成功',
                icon: 'none'
              })
            }
          }
        })
      },
        // 发送消息
      doEvent(e){
        if(this.detail.isblack){
          return this.setBlack();
        }
        uni.navigateTo({
          url:'../../chat/chat/chat?params='+encodeURIComponent(JSON.stringify({
            id:this.detail.id,
            name:this.detail.nickname ?  this.detail.nickname : this.detail.username,
            avatar:this.detail.avatar,
            chat_type:'user'
          }))
        })
      }
    }
  }
</script>
<style>
</style>

/pages/chat/chat-set/chat-set.vue

<template>
  <view style="background-color: #EDEDED;">
    <!-- 导航栏 -->
    <free-nav-bar title="聊天信息" showBack :showRight="false"></free-nav-bar>
    <view class="flex flex-wrap py-3 bg-white">
      <!-- 私聊 -->
      <view v-if="detail.chat_type === 'user'" class="flex flex-column align-center justify-center mb-2" style="width: 150rpx;">
        <free-avatar :src="detail.avatar || '/static/images/userpic.png'" size="110"></free-avatar>
        <text class="font text-muted mt-1" >{{detail.name}}</text>
      </view>
      <!-- 群聊 -->
      <view v-else class="flex flex-column align-center justify-center mb-2" style="width: 150rpx;" v-for="(item,index) in list" :key='index'>
        <free-avatar :src="item.avatar || '/static/images/userpic.png'" size="110"></free-avatar>
        <text class="font text-muted mt-1" >{{item.name}}</text>
      </view>
      
      <view class="flex flex-column align-center justify-center mb-2" style="width: 150rpx;"  @click="openMail">
        <view class="flex align-center justify-center border"  hover-class="bg-light" style="width: 120rpx;height: 120rpx;">
          <text class="text-light-muted" style="font-size: 100rpx;" >+</text>
        </view>
      </view>
      
      <view class="flex flex-column align-center justify-center mb-2" style="width: 150rpx;"  @click="deleteUser">
        <view class="flex align-center justify-center border"  hover-class="bg-light" style="width: 120rpx;height: 120rpx;">
          <text class="text-light-muted" style="font-size: 100rpx;" >-</text>
        </view>
      </view>
      
    </view>
    
    <free-divider></free-divider>
    <view v-if="detail.chat_type==='group'">
      <free-list-item title="群聊名称" showRight :showLeftIcon="false" @click="updateName()">
        <text slot="right" class="font text-muted">{{detail.name}}</text>
      </free-list-item>
      <free-list-item title="群二维码" showRight :showLeftIcon="false" @click="openCode">
        <text slot="right" class="iconfont font-md text-light-muted">&#xe647;</text>
      </free-list-item>
      <free-list-item title="群公告" showRight :showLeftIcon="false" @click="openGroupRemark"></free-list-item>
    </view>
    
    <free-divider></free-divider>
    <free-list-item title="查找聊天记录" showRight :showLeftIcon="false" @click="openHistory"></free-list-item>
    <free-divider></free-divider>
    <free-list-item title="消息免打扰" showRight :showLeftIcon="false" :showRightIcon="false">
      <switch slot="right" :checked="detail.nowarn" @change="updateChatItem($event,'nowarn')" color="#08C060" />
    </free-list-item>
    <free-list-item title="置顶聊天" showRight :showLeftIcon="false" :showRightIcon="false">
      <switch slot="right" :checked="detail.istop" @change="updateChatItem($event,'istop')" color="#08C060"/>
    </free-list-item>
    <free-list-item title="强提醒" showRight :showLeftIcon="false" :showRightIcon="false">
      <switch slot="right" :checked="detail.strongwarn" @change="updateChatItem($event,'strongwarn')" color="#08C060"/>
    </free-list-item>
    <free-divider></free-divider>
    <free-list-item title="清空聊天记录" showRight :showLeftIcon="false" @click="clear"></free-list-item>
    <free-divider></free-divider>
    
    <view v-if="detail.chat_type==='group'">
      <free-divider></free-divider>
      <free-list-item title="我在本群的昵称" showRight :showLeftIcon="false" @click="updatenickName">
        <text slot="right" class="font text-muted">{{nickname}}</text>
      </free-list-item>
      <free-list-item title="显示群成员昵称" showRight :showLeftIcon="false" :showRightIcon="false">
        <switch slot="right" :checked="detail.shownickname" @change="updateChatItem($event,'shownickname')" color="#08C060"/>
      </free-list-item>
      </view>
    
    
    
    <free-divider></free-divider>
    <free-list-item title="投诉" showRight :showLeftIcon="false" @click="openReport"></free-list-item>
    
    <free-divider></free-divider>
    <view v-if="detail.chat_type === 'group'" class="py-3 flex align-center justify-center bg-white" hover-class="bg-light" @click="quit">
      <text class="font-md text-danger">删除并退出</text>
    </view>
    
    <free-confirm :title="'修改'+confirmTitle" ref="confirm">
        <input type="text" class="border-bottom font-md" :placeholder="confirmTitle" v-model="confirmText"/>
    </free-confirm>
    
    <view style="height: 200rpx;"></view>
  </view>
</template>
<script>
  import freeNavBar from '@/components/free-ui/free-nav-bar.vue';
  import freeAvatar from '@/components/free-ui/free-avatar.vue';
  import freeDivider from '@/components/free-ui/free-divider.vue';
  import freeListItem from '@/components/free-ui/free-list-item.vue';
  import freeConfirm from '@/components/free-ui/free-confirm.vue';
  import auth from '@/common/mixin/auth.js';
  import { mapState } from 'vuex';
  import $H from '@/common/free-lib/request.js';
  export default {
    mixins:[auth],
    components:{
      freeNavBar,
      freeAvatar,
      freeDivider,
      freeListItem,
      freeConfirm
    },
    computed:{
      ...mapState({
        chat:state=>state.user.chat,
        user:state=>state.user.user
      }),
      confirmTitle(){
        return this.confirmType === 'name' ? '群名称' : '昵称';
      }
    },
    data() {
      return {
        list:[],
        confirmText:'',
        nickname:'',
        detail:{
              id:0,  // 接收人/群 id
              chat_type:'user', // 接收类型 user 单聊 group群聊
              name:'', // 接收人/群 昵称
              avatar:"", // 接收人/群 头像
              type:'',// 最后一条消息类型
              istop:false, // 是否置顶
              shownickname:false, // 是否显示昵称
              nowarn:false, // 是否免打扰
              strongwarn:false, //  是否强提醒
              user_id:0,//管理员id,
              remark:'', // 群公告
              invite_confirm:0, // 邀请确认
        }
      }
    },
    methods: {
      clear(){
        uni.showModal({
          content:'是否要清空聊天记录?',
          success:(res)=>{
            if(res.confirm){
              this.chat.clearChatDetail(this.detail.id,this.detail.chat_type);
              uni.showToast({
                title:'清除成功',
                icon:'none'
              })
              uni.$emit('updateHistory');
            } 
          }
        })
      },
      openCode(){
        uni.navigateTo({
          url:'../../my/code/code?params='+encodeURIComponent(JSON.stringify({
            id:this.detail.id,
            name:this.detail.name,
            avatar:this.detail.avatar
          }))+'&type=group',
        })
      },
      updateChatItem(e,k){
        console.log(e.detail.value,k);
        this.detail[k] = e.detail.value;
        this.chat.updateChatItem({
          id:this.detail.id,
          chat_type:this.detail.chat_type
        },this.detail);
      },
      quit(){
        uni.showModal({
          content:'是否要删除或退出群聊?',
          success: (res) => {
            if(res.cancel) return;
            $H.post('/group/quit',{
              id:this.detail.id
            }).then(res=>{
              uni.showToast({
                title: '操作成功',
                icon:'none'
              });
              uni.navigateBack({
                delta:1
              })
            })
          }
        })
      },
      updatenickName(){
        this.confirmType = 'nickname';
        this.confirmText = this.nickname
          this.$refs.confirm.show((close)=>{
            if(this.confirmText == ''){
              return uni.showToast({
                title:'昵称不能为空',
                icon:'none'
              })
            }
            $H.post('/group/nickname',{
              id:this.detail.id,
              nickname:this.confirmText
            }).then(res=>{
              uni.showToast({
                title:'修改成功',
                icon:'none'
              });
              this.nickname = this.confirmText;
              close();
            })
          });
      },
      openGroupRemark(){
        uni.navigateTo({
          url: '../group-remark/group-remark?params='+encodeURIComponent(JSON.stringify({
            id:this.detail.id,
            remark:this.detail.remark
          }))
        });
      },
      openReport(){
        uni.navigateTo({
          url:'/pages/mail/user-report/user-report?params='+JSON.stringify({
            user_id:this.detail.id,
            type:this.detail.chat_type
          })
        });
      },
      openMail(){
        let params = this.detail.chat_type === 'user' ? '?type=createGroup' : '?type=inviteGroup&id='+this.detail.id;
        uni.navigateTo({
          url:'/pages/mail/mail/mail'+params
        });
      },
      openHistory(){
        uni.navigateTo({
          url:`../chat-history/chat-history?chat_tpe=${this.detail.chat_type}&id=${this.detail.id}`,
        })
      },
      deleteUser(){
        uni.navigateTo({
          url:'../group-user/group-user?id='+this.detail.id
        })
      },
      updateName(){
        this.confirmText = this.detail.name
        this.$refs.confirm.show((close)=>{
          if(this.confirmText == ''){
            return uni.showToast({
              title:'群名称不能为空',
              icon:'none'
            })
          }
          $H.post('/group/rename',{
            id:this.detail.id,
            name:this.confirmText
          }).then(res=>{
            uni.showToast({
              title:'修改成功',
              icon:'none'
            });
            this.detail.name = this.confirmText;
            close();
          })
        });
      }
    },
    onShow() {
      if(this.detail.chat_type === 'group'){
          $H.get('/group_info/'+this.detail.id).then(res=>{
            this.detail.remark = res.remark;
            this.list = res.group_users.map(item=>{
              if(item.user_id === this.user.id){
                this.nickname = item.nickname;
              }
              return {
                id:item.user_id,
                name:item.nickname || item.user.nickname || item.user.username,
                avatar:item.user.avatar
              }
            })
            
          })
        }
    },
    onLoad(e) {
      if(!e.params){
        return this.backToast();
      }
      let detail = JSON.parse(e.params);
      // 获取当前会话的详细资料
      detail = this.chat.getChatListItem(detail.id,detail.chat_type);
      if(!detail){
        return this.backToast()
      }
      this.detail = detail;
    }
  }
</script>
<style>
</style>

感谢大家观看,我们下次见

目录
相关文章
|
7月前
|
JSON Dart 安全
Flutter App混淆加固、保护与优化原理
Flutter App混淆加固、保护与优化原理
131 0
|
7月前
|
架构师 Java
jvm性能调优实战 - 35电商APP后台系统如何对Full GC进行深度优化
jvm性能调优实战 - 35电商APP后台系统如何对Full GC进行深度优化
104 0
|
Web App开发 数据安全/隐私保护 iOS开发
app优化ios,iOS app上架流程问题集锦,ASO新手小白必看(上)
app优化ios,iOS app上架流程问题集锦,ASO新手小白必看(上)
|
4天前
|
机器学习/深度学习 前端开发 算法
婚恋交友系统平台 相亲交友平台系统 婚恋交友系统APP 婚恋系统源码 婚恋交友平台开发流程 婚恋交友系统架构设计 婚恋交友系统前端/后端开发 婚恋交友系统匹配推荐算法优化
婚恋交友系统平台通过线上互动帮助单身男女找到合适伴侣,提供用户注册、个人资料填写、匹配推荐、实时聊天、社区互动等功能。开发流程包括需求分析、技术选型、系统架构设计、功能实现、测试优化和上线运维。匹配推荐算法优化是核心,通过用户行为数据分析和机器学习提高匹配准确性。
26 3
|
25天前
|
传感器 iOS开发 UED
探索iOS生态系统:从App Store优化到用户体验提升
本文旨在深入探讨iOS生态系统的多个方面,特别是如何通过App Store优化(ASO)和改进用户体验来提升应用的市场表现。不同于常规摘要仅概述文章内容的方式,我们将直接进入主题,首先介绍ASO的重要性及其对开发者的意义;接着分析当前iOS平台上用户行为的变化趋势以及这些变化如何影响应用程序的设计思路;最后提出几点实用建议帮助开发者更好地适应市场环境,增强自身竞争力。
|
1月前
|
数据采集 网络协议 算法
移动端弱网优化专题(十四):携程APP移动网络优化实践(弱网识别篇)
本文从方案设计、代码开发到技术落地,详尽的分享了携程在移动端弱网识别方面的实践经验,如果你也有类似需求,这篇文章会是一个不错的实操指南。
60 1
|
4月前
|
Web App开发 移动开发 前端开发
如何优化运行在webkit上的web app
如何优化运行在webkit上的web app
|
6月前
|
ARouter IDE 开发工具
Android面试题之App的启动流程和启动速度优化
App启动流程概括: 当用户点击App图标,Launcher通过Binder IPC请求system_server启动Activity。system_server指示Zygote fork新进程,接着App进程向system_server申请启动Activity。经过Binder通信,Activity创建并回调生命周期方法。启动状态分为冷启动、温启动和热启动,其中冷启动耗时最长。优化技巧包括异步初始化、避免主线程I/O、类加载优化和简化布局。
86 3
Android面试题之App的启动流程和启动速度优化
|
6月前
|
缓存 JSON 网络协议
Android面试题:App性能优化之电量优化和网络优化
这篇文章讨论了Android应用的电量和网络优化。电量优化涉及Doze和Standby模式,其中应用可能需要通过用户白名单或电池广播来适应限制。Battery Historian和Android Studio的Energy Profile是电量分析工具。建议减少不必要的操作,延迟非关键任务,合并网络请求。网络优化包括HTTPDNS减少DNS解析延迟,Keep-Alive复用连接,HTTP/2实现多路复用,以及使用protobuf和gzip压缩数据。其他策略如使用WebP图像格式,按网络质量提供不同分辨率的图片,以及启用HTTP缓存也是有效手段。
95 9
|
6月前
|
XML 监控 安全
Android App性能优化之卡顿监控和卡顿优化
本文探讨了Android应用的卡顿优化,重点在于布局优化。建议包括将耗时操作移到后台、使用ViewPager2实现懒加载、减少布局嵌套并利用merge标签、使用ViewStub减少资源消耗,以及通过Layout Inspector和GPU过度绘制检测来优化。推荐使用AsyncLayoutInflater异步加载布局,但需注意线程安全和不支持特性。卡顿监控方面,提到了通过Looper、ChoreographerHelper、adb命令及第三方工具如systrace和BlockCanary。总结了Choreographer基于掉帧计算和BlockCanary基于Looper监控的原理。
112 3

热门文章

最新文章

下一篇
DataWorks