uni-app 15推荐名片功能
Posted 2019ab
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了uni-app 15推荐名片功能相关的知识，希望对你有一定的参考价值。
实现推荐名片的设计，并且把推荐名片弹出层封装成组件
send-card.nvue
<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;'">
<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 title="更多联系人" :showLeftIcon="false" :border="false"></free-list-item>
<view class="px-2 py-1 bg-light">
<text class="font-sm text-muted">{{keyword ? '搜索结果' : '最近联系人'}}</text>
</view>
<!-- <free-list-item v-for="(item,index) in list" :key="index" :title="item.username" :cover="item.avatar" 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> -->
<free-list-item v-for="(item,index) in allList" :key="index" :title="item.username" :cover="item.avatar" 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 scroll-x="true" class="flex" :show-scrollbar='false'>
<view class="mr-1" v-for="i in 10" :key="i">
<free-avatar src="/static/images/mail/friend.png" size="60"></free-avatar>
</view>
</scroll-view>
<view class="my-3 bg-light rounded p-2">
<text class="font text-light-muted">[个人名片] 昵称</text>
</view>
<input type="text" value="" class="border-bottom font-md" style="height: 60rpx;" placeholder="给朋友留言" />
</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';
export default {
components:{
freeNavBar,
freeMainButton,
freeListItem,
freeConfirm,
freeAvatar
},
data() {
return {
keyword:'',
muliSelect:false,
top:0,
list:[{
username:'昵称',
avatar:'/static/images/mail/friend.png',
checked:false
},
{
username:'昵称',
avatar:'/static/images/mail/friend.png',
checked:false
},
{
username:'昵称',
avatar:'/static/images/mail/friend.png',
checked:false
},
{
username:'昵称',
avatar:'/static/images/mail/friend.png',
checked:false
},
{
username:'昵称',
avatar:'/static/images/mail/friend.png',
checked:false
},
{
username:'昵称1',
avatar:'/static/images/mail/friend.png',
checked:false
},
{
username:'昵称2',
avatar:'/static/images/mail/friend.png',
checked:false
},
{
username:'昵称3',
avatar:'/static/images/mail/friend.png',
checked:false
},
{
username:'昵称',
avatar:'/static/images/mail/friend.png',
checked:false
},
{
username:'昵称',
avatar:'/static/images/mail/friend.png',
checked:false
}]
}
},
computed:{
// 最终列表
allList(){
return this.keyword === '' ? this.list : this.searchList;
},
// 搜索结果列表
searchList(){
if(this.keyword === ''){
return [];
}
return this.list.filter(item=>{
return item.username.indexOf(this.keyword) !== -1;
})
},
// 选中列表
selectList(){
return this.list.filter(item=>item.checked)
},
// 选中数量
selectCount(){
return this.selectList.length;
}
},
methods: {
// 点击导航栏
handlenNav(){
if(!this.muliSelect){
return this.muliSelect = true;
}
// 发送
console.log('发送')
},
// 选中、取消选中
selectItem(item){
// 选中、取消选中
if(this.muliSelect){
// 选中
if(!item.checked && (this.selectCount === 9)){
// 限制选中数量
return uni.showToast({
title:'最多选中9个',
icon:'none'
})
}
// 取消选中
return item.checked = !item.checked;
}
// 发送
this.$refs.confirm.show((close)=>{
console.log('点击了确定');
close();
});
}
},
onLoad() {
let res = uni.getSystemInfoSync();
this.top = res.statusBarHeight + uni.upx2px(90);
}
}
</script>
<style>
</style>
用到的组件
//free-nav-bar.vue
<template>
<view>
<view :class="getClass">
<!-- 状态栏 -->
<view :style="'height:'+statusBarHeight+'px;'"></view>
<!-- 导航 -->
<view class="w-100 flex align-center justify-between" style="height: 90rpx;">
<!-- 左边 -->
<view class="flex align-center">
<!-- 返回按钮 -->
<free-icon-button v-if="showBack" @click="back"><text class="iconfont font-md"></text></free-icon-button>
<!-- 标题 -->
<text v-if="title" class="font-md ml-3" >{{getTitle}}</text>
</view>
<!-- 右边 -->
<view class="flex align-center" v-if="showRight">
<slot name="right">
<free-icon-button @click="search"><text class="iconfont font-md"></text></free-icon-button>
<free-icon-button @click="openExtend"><text class="iconfont font-md"></text></free-icon-button>
</slot>
</view>
<!--\\ue6e3 \\ue682 -->
</view>
</view>
<!-- 站位 -->
<view v-if="fixed" :style="fixedStyle"></view>
<!-- 扩展菜单 -->
<free-popup v-if="showRight" ref="extend" maskColor bottom :bodyWidth="320" :bodyHeight="525" bodyBgColor="bg-dark" transformOrigin="right top">
<view class="flex flex-column" style="width:320rpx;height: 525rpx;">
<view v-for="(item,index) in menus" :key="index" class="flex-1 flex align-center" hover-class="bg-hover-dark" @click="clickEvent(item.event)">
<text class="pl-3 pr-2 iconfont font-md text-white">{{item.icon}}</text>
<text class="font-md text-white">{{item.name}}</text>
</view>
</view>
</free-popup>
</view>
</template>
<script>
import freeIconButton from './free-icon-button.vue';
import freePopup from './free-popup.vue';
export default {
components: {
freeIconButton,
freePopup
},
props: {
showBack:{
type:Boolean,
default:false
},
title: {
type: String,
default: ''
},
fixed:{
type:Boolean,
default:false
},
noreadnum:{
type:Number,
default:0
},
bgColor:{
type:String,
default:"bg-light"
},
showRight:{
type:Boolean,
default:true
}
},
data() {
return {
statusBarHeight: 0,
navBarHeight: 0,
menus:[
{
name:'发起群聊',
event:"",
icon:"\\ue633"
},
{
name:'添加好友',
event:"",
icon:"\\ue65d"
},
{
name:'扫一扫',
event:"",
icon:"\\ue614"
},
{
name:'收付款',
event:"",
icon:"\\ue66c"
},
{
name:'帮助与反馈',
event:"",
icon:"\\ue61c"
}
],
}
},
mounted() {
// 获取任务栏高度
// #ifdef APP-PLUS-NVUE
this.statusBarHeight = plus.navigator.getStatusbarHeight()
// #endif
this.navBarHeight = this.statusBarHeight + uni.upx2px(90)
},
computed: {
fixedStyle() {
return `height:${this.navBarHeight}px`;
},
getTitle(){
let noreadnum = this.noreadnum>0 ? '('+this.noreadnum+')' : '';
return this.title + noreadnum;
},
getClass(){
let fixed = this.fixed?"fixed-top":"";
return `${fixed} ${this.bgColor}`;
}
},
methods:{
openExtend(){
this.$refs.extend.show(uni.upx2px(415),uni.upx2px(150));
},
// 返回
back(){
uni.navigateBack({
delta:1
})
}
}
}
</script>
<style>
</style>
//free-main-button.vue
<template>
<view class="rounded mr-2 px-2 py-1"
@click="clickEvent"
:class="disabled ? 'bg-light border' : 'main-bg-color'">
<text class="font"
:class="disabled ? 'text-light-muted':'text-white'">{{name}}</text>
</view>
</template>
<script>
export default {
props: {
name: {
type: String,
default: ""
},
disabled:{
type:Boolean,
default:false
}
},
methods: {
clickEvent() {
if(!this.disabled){
this.$emit('click')
}
}
},
}
</script>
<style>
</style>
//free-list-item.vue
<template>
<view class="bg-white flex align-stretch" hover-class="bg-light" @click="$emit('click')">
<view class="flex align-center justify-center py-2 pl-3" v-if="showLeftIcon">
<slot name="icon"></slot>
<image :src="cover" v-if="cover" style="width: 75rpx;height: 75rpx;" mode="widthFix" :style="coverStyle"></image>
</view>
<view class="flex-1 flex align-center justify-between py-3 pl-3" :class="border ? 'border-bottom' : ''">
<slot>
<text class="font-md text-dark">{{title}}</text>
</slot>
<view class="flex align-center pr-3" v-if="showRight">
<slot name="right"></slot>
<!-- 右 -->
<text class="iconfont text-light-muted font-md" v-if="showRightIcon" ></text>
</view>
</view>
</view>
</template>
<script>
export default{
props:{
// 是否开启下边线
border:{
type:Boolean,
default:true
},
// 封面
cover:{
type:String,
default:""
},
// 标题
title:{
type:String,
default:""
},
// 显示右边
showRight:{
type:Boolean,
default:false
},
// 封面大小
coverSize:{
type:[String,Number],
default:75
},
// 显示左边图标
showLeftIcon:{
type:Boolean,
default:true
},
showRightIcon:{
type:Boolean,
default:true
}
},
computed:{
coverStyle(){
return `width:${this.coverSize}rpx;height:${this.coverSize}rpx;`;
}
}
}
</script>
<style>
</style>
// free-confirm.vue
<template>
<free-popup ref="confirm" center maskColor transformOrigin='center'>
<view class="bg-white rounded" style="width: 600rpx;">
<!-- 头部 -->
<view class="p-4 flex flex-column">
<text class="font-md font-weight-bold mb-3">{{title}}</text>
<slot></slot>
<!-- <scroll-view scroll-x="true" class="flex" :show-scrollbar='false'>
<view class="mr-1" v-for="i in 10" :key="i">
<free-avatar src="/static/images/mail/friend.png" size="60"></free-avatar>
</view>
</scroll-view>
<view class="my-3 bg-light rounded p-2">
<text class="font text-light-muted">[个人名片] 昵称</text>
</view>
<input type="text" value="" class="border-bottom font-md" style="height: 60rpx;" placeholder="给朋友留言" /> -->
</view>
<!-- 底部 -->
<view style="height:100rpx;" class="flex border-top align-stretch">
<view @click="cancel" class="flex-1 border-right align-center justify-center">
<text class="font-md text-muted">取消</text>
</view>
<view @click="confirm" class="flex-1 align-center justify-center">
<text class="font-md main-text-color">确定</text>
</view>
</view>
</view>
</free-popup>
</template>
<script>
import freePopup from '@/components/free-ui/free-popup.vue';
export default{
components:{
freePopup
},
props:{
title:{
type:String,
default:'提示：'
}
},
data(){
return {
callback:false
}
},
methods:{
// 显示
show(callback=false){
this.callback = callback;
this.$refs.confirm.show();
},
// 取消
cancel(){
this.$refs.confirm.hide();
},
// 确定
confirm(){
if(typeof this.callback === 'function'){
this.callback(()=>{
this.cancel();
});
}
}
}
}
</script>
<style>
</style>
// free-avatar.vue
<template>
<image :src="src" mode="widthFix" :style="getStyle" :class="type" :clickType="clickType" @click="clickEvent"></image>
</template>
<script>
export default{
props:{
size:{
type:[String,Number],
default:90
},
src:{
type:String,
default:""
},
type:{
type:String,
default:"rounded"
},
clickType:{
type:String,
default:"none"
}
},
computed:{
getStyle(){
return `width: ${this.size}rpx;height: ${this.size}rpx;`;
}
},
methods:{
clickEvent(){
switch(this.clickType){
case 'navigateTo':
uni.navigateTo({
url:'/pages/mail/user-base/user-base',
});
break;
default:
this.$emit('click');
break;
}
}
}
}
</script>
<style>
</style>
实现之后是酱紫的
感谢大家观看，我们下次见。
以上是关于uni-app 15推荐名片功能的主要内容，如果未能解决你的问题，请参考以下文章