不废话先看效果图,由于我们没有二维码名片所以先用一个照片代替
下面是代码部分
code.nvue
<template> <view class="page"> <!-- 导航栏 --> <free-nav-bar title="二维码名片" showBack :showRight="false"></free-nav-bar> <view class="p-5"> <view class="bg-white rounded p-4"> <view class="flex align-center mb-4"> <free-avatar src="/static/images/demo/demo6.jpg"></free-avatar> <view class="pl-4 flex flex-column"> <text class="font-md">昵称</text> <text class="font text-light-muted">地区</text> </view> </view> <view class="flex flex-column align-center justify-center"> <image src="/static/images/qrcode_for_gh_82c777d227b9_258.jpg" mode="" style="width: 550rpx;height: 550rpx;" class="bg-secondary mb-4"></image> <text class="font text-light-muted">扫一扫上面的二维码,加我的微信</text> </view> </view> </view> </view> </template> <script> import freeNavBar from '@/components/free-ui/free-nav-bar.vue'; import freeAvatar from '@/components/free-ui/free-avatar.vue'; export default { components:{ freeNavBar, freeAvatar }, data() { return { } }, methods: { } } </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-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>
好了感谢大家观看,我们下期见