备案控制台
探索云世界
开发者社区 云计算 文章 正文

uni-app 179转发名片功能

2024-03-06 18
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： uni-app 179转发名片功能

/pages/chat/chat-list/chat-list.vue

<template>
  <view class="page">
    <!-- 导航栏 -->
    <free-nav-bar title="选择" showBack :showRight="true">
      <free-main-button :name="muliSelect ? '发送 ('+selectCount+')' : '多选'" slot="right" @click="handlenNav">
      </free-main-button>
    </free-nav-bar>
    <!-- 搜索框 -->
    <view class="p-3 bg-light position-fixed left-0 right-0" :style="'top:'+top+'px;'" style="z-index: 2;">
      <input type="text" value="" v-model="keyword" placeholder="搜索" class="bg-white rounded"
        placeholder-class="text-center" style="height: 80rpx;" />
    </view>
    <view style="height:140rpx;"></view>
    <free-list-item v-for="(item,index) in allList" :key="index" :title="item.name"
      :cover="item.avatar || '/static/images/userpic.png'" showRight :showRightIcon="false"
      @click="selectItem(item)">
      <view v-if="muliSelect" slot="right" class="border rounded-circle flex align-center"
        style="width: 40rpx;height: 40rpx;">
        <view v-if="item.checked" class="main-bg-color rounded-circle" style="width: 39rpx;height: 39rpx;">
        </view>
      </view>
    </free-list-item>
    <view style="height:100rpx;" class="flex align-center justify-center"
      v-if="keyword !== '' && searchList.length === 0">
      <text class="font text-light-muted">暂无搜索结果</text>
    </view>
    <free-confirm ref="confirm" title="发送给:">
      <scroll-view v-if="selectCount > 0" scroll-x="true" :show-scrollbar='false'>
        <view class="flex">
          <view class="mr-1" v-for="(item,index) in selectList" :key="index">
            <free-avatar :src="item.avatar" size="60"></free-avatar>
          </view>
        </view>
      </scroll-view>
      <view class="flex" v-else>
        <free-avatar :src="sendItem.avatar" size="60"></free-avatar>
        <text class="font text-muted ml-2">{{sendItem.name}}</text>
      </view>
      <view class="my-3 bg-light rounded p-2">
        <text class="font text-light-muted">{{message}}</text>
      </view>
      <input type="text" value="" class="border-bottom font-md" style="height: 60rpx;" placeholder="给朋友留言" v-model="content" />
    </free-confirm>
  </view>
</template>
<script>
  import freeNavBar from '@/components/free-ui/free-nav-bar.vue';
  import freeMainButton from '@/components/free-ui/free-main-button.vue';
  import freeListItem from '@/components/free-ui/free-list-item.vue';
  import freeConfirm from '@/components/free-ui/free-confirm.vue';
  import freeAvatar from '@/components/free-ui/free-avatar.vue';
  import {
    mapState
  } from 'vuex';
  export default {
    components: {
      freeNavBar,
      freeMainButton,
      freeListItem,
      freeConfirm,
      freeAvatar
    },
    data() {
      return {
        keyword: '',
        muliSelect: false,
        top: 0,
        list: [],
        detail: {},
        sendItem: {},
        content:''
      }
    },
    computed: {
      ...mapState({
        chatList: state => state.user.chatList,
        chat: state => state.user.chat,
      }),
      // 最终列表
      allList() {
        return this.keyword === '' ? this.list : this.searchList;
      },
      // 搜索结果列表
      searchList() {
        if (this.keyword === '') {
          return [];
        }
        return this.list.filter(item => {
          return item.name.indexOf(this.keyword) !== -1;
        })
      },
      // 选中列表
      selectList() {
        return this.list.filter(item => item.checked)
      },
      // 选中数量
      selectCount() {
        return this.selectList.length;
      },
      message() {
        let obj = {
          image: '[图片]',
          video: '[视频]',
          audio: '[语音]',
          card: '[名片]',
          emoticon: '[表情]'
        };
        return this.detail.type === 'text' ? this.detail.data : obj[this.detail.type];
      }
    },
    methods: {
      // 点击导航栏 (群发)
      handlenNav() {
        if (!this.muliSelect) {
          return this.muliSelect = true;
        }
        // 发送
        if (this.selectCount === 0) {
          return uni.showToast({
            title: '请先选择',
            icon: 'none'
          });
        }
        this.$refs.confirm.show((close) => {
          this.selectList.forEach(item => {
            this.send(item)
            
            if (this.content) {
              this.send(item, this.content, 'text')
            }
          });
          close();
          uni.reLaunch({
            url: "../../tabbar/index/index"
          })
        });
      },
      // 选中、取消选中
      selectItem(item) {
        // 选中、取消选中
        if (this.muliSelect) {
          // 选中
          if (!item.checked && (this.selectCount === 9)) {
            // 限制选中数量
            return uni.showToast({
              title: '最多选中9个',
              icon: 'none'
            })
          }
          
          // 取消选中
          return item.checked = !item.checked;
        }
        // 发送
        this.sendItem = item;
        this.$refs.confirm.show((close) => {
          this.send(item);
          if (this.content) {
            // this.send(item, this.content, 'text')
            this.send(item, this.content, this.detail.type)
          }
          
          close();
          uni.reLaunch({
            url: "../../tabbar/index/index"
          })
        });
      },
      send(item,data=false,type = false) {
        // console.log(this.detail.options.id);return;
        let message = this.chat.formatSendData({
          to_id: item.id,
          to_name: item.name,
          to_avatar: item.avatar,
          data:data || this.detail.data,
          type:type || this.detail.type,
          chat_type:item.chat_type,
          options: {
            id:this.detail.options.id,
            avatar:this.detail.options.avatar
          } 
        });
        
        this.chat.send(message);
        uni.$emit('updateHistory',false);
        
      }
    },
    onLoad(e) {
      let res = uni.getSystemInfoSync();
      this.top = res.statusBarHeight + uni.upx2px(90);
      this.list = this.chatList.map(item => {
        return {
          ...item,
          checked: false
        }
      })
      if (e.params) {
        this.detail = JSON.parse(decodeURIComponent(e.params));
      }
    }
  }
</script>
<style>
</style>

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

<template>
  <view class="page">
    <!-- 导航栏 -->
    <free-nav-bar showBack :showRight="detail.friend" bgColor="bg-white">
      <view slot="right">
        <free-icon-button  v-if="detail.friend"><text class="iconfont font-md"
            @click="openAction">&#xe6fd;</text></free-icon-button>
      </view>
      
    </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: "chat/chat-list/chat-list?params="+encodeURIComponent(JSON.stringify({
            type: "card",
            data: this.detail.nickname || this.detail.username,
            options: {
              avatar: this.detail.avatar,
              id: this.detail.id
            }
          }))
        }, {
          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>

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

关键词：
APP功能
APP名片
APP名片功能
2019ab
目录
相关文章
2019ab
|
1月前
uni-app 155朋友圈评论功能（二）
uni-app 155朋友圈评论功能（二）
2019ab
40 0
2019ab
|
1月前
uni-app 152朋友圈动态实时通知功能
uni-app 152朋友圈动态实时通知功能
2019ab
17 0
2019ab
|
1月前
uni-app 165查看聊天记录功能
uni-app 165查看聊天记录功能
2019ab
15 1
2019ab
|
1月前
uni-app 154朋友圈评论功能（一 )
uni-app 154朋友圈评论功能（一 )
2019ab
14 0
2019ab
|
1月前
uni-app 162初始化会话列表功能
uni-app 162初始化会话列表功能
2019ab
12 0
2019ab
|
1月前
uni-app 160提醒谁看功能
uni-app 160提醒谁看功能
2019ab
10 0
2019ab
|
1月前
|
存储 数据库
uni-app 156朋友圈评论表情包功能
uni-app 156朋友圈评论表情包功能
2019ab
45 0
2019ab
|
1月前
uni-app 153读取朋友圈动态功能
uni-app 153读取朋友圈动态功能
2019ab
11 0
2019ab
|
1月前
uni-app 150朋友圈点赞功能
uni-app 150朋友圈点赞功能
2019ab
12 0
白及88
|
UED 数据管理 安全
如何分析APP功能需求、结构
<p><br></p> <p style="text-align:center"><span style="font-size:24px; color:#3366ff">如何分析APP功能需求、结构</span><br></p> <p></p> <p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-
白及88
3751 0

热门文章

最新文章

  • 1
    深入理解 uni-app 中的加载提示：uni.showLoading
  • 2
    uni-app使用v-html输出富文本图片溢出解决
  • 3
    云擎技术---分析工信部APP备案的“传闻”
  • 4
    App测试中，强制等待和隐式等待谁更强？
  • 5
    安卓即时应用(Instant Apps)开发指南
  • 6
    【Hbuilder】Hbuilder 插件[App]云打包安装失败--已解决
  • 7
    深入理解 uni-app 页面生命周期（三）：onHide vs onUnload
  • 8
    Android App获取不到pkgInfo信息问题原因
  • 9
    智慧工地SaaS可视化平台源码，PC端+APP端，支持二开，项目使用，微服务+Java++vue+mysql
  • 10
    Vue和uni-app的区别
  • 1
    HC05蓝牙模块与手机APP连接
    42
  • 2
    【微信小程序】-- uni-app 项目-- 购物车 -- 首页 - 轮播图效果（五十二）
    46
  • 3
    【微信小程序】-- uni-app 项目--- 购物车 -- 配置 tabBar 效果（五十一）
    49
  • 4
    【微信小程序】-- uni-app 项目创建 & 目录结构讲解（四十九）
    57
  • 5
    【微信小程序】-- 配置uni-app的开发环境（四十八）
    37
  • 6
    python爬虫之app爬取-微信朋友圈
    82
  • 7
    python爬虫之app爬取-mitmproxy 的使用
    42
  • 8
    python爬虫之app爬取-charles的使用
    61
  • 9
    【问题篇】打包Vue-cli3创建的vue项目成App的apk文件
    27
  • 10
    短剧系统开发（网页版/APP/小程序）丨短剧系统开发运营版及源码出售
    99

    • 相关课程

    更多
  • 互联网安全-移动APP漏洞风险与解决方案

    • 相关电子书

    更多
  • 女性移动App安全攻防战
  • 汇聚云计算的生态核能——云市场，云上APP Store
  • 千万级用户直播App——服务端架构设计和思考

    • 相关实验场景

    更多
  • 星轨-钉钉APP分发实训
    • 下一篇
    2024年阿里云免费云服务器及学生云服务器申请教程参考