实现推荐名片的设计，并且把推荐名片弹出层封装成组件
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>
实现之后是酱紫的
感谢大家观看，我们下次见。
