uni-app 179转发名片功能
Posted 2019ab
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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"></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"></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: ''以上是关于uni-app 179转发名片功能的主要内容，如果未能解决你的问题，请参考以下文章