uni-app 190扫一扫加入群聊功能
Posted 2019ab
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了uni-app 190扫一扫加入群聊功能相关的知识,希望对你有一定的参考价值。
/pages/chat/scan-add/scan-add.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">
<free-avatar :src="detail.avatar || '/static/images/demo/demo6.jpg'"></free-avatar>
<view class="pl-4 flex flex-column">
<text class="font-md">detail.name</text>
<text class="font-sm text-muted" >群成员数:detail.users_count</text>
</view>
</view>
<view class="flex flex-column align-center justify-center">
<image :src="src" mode="" style="width: 550rpx;height: 550rpx;" class="bg-secondary mb-4"></image>
<text class="font text-light-muted">扫一扫上面的二维码,加我的微信</text>
</view>
</view>
<view class="py-3 flex align-center justify-center main-bg-color" hover-class="main-bg-hover-color" @click="join">
<text class="font-md text-white">加入群聊</text>
</view>
</view>
</view>
</template>
<script>
import freeNavBar from '@/components/free-ui/free-nav-bar.vue';
import freeAvatar from '@/components/free-ui/free-avatar.vue';
import mapState from 'vuex';
import $C from '@/common/free-lib/config.js';
export default
components:
freeNavBar,
freeAvatar
,
computed:
...mapState(
user:state=>state.user.user
)
,
data()
return
detail:
id:0,
name:"",
avatar:'',
users_count:0
,
onLoad(e)
if(e.params)
this.detail = JSON.parse(decodeURIComponent(e.params));
,
methods:
join()
</script>
<style>
</style>
/components/free-ui/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">
<!-- 返回按钮 -->
<!-- #ifndef MP -->
<free-icon-button v-if="showBack" @click="back"><text class="iconfont font-md"></text></free-icon-button>
<!-- #endif -->
<!-- 标题 -->
<slot>
<text v-if="title" class="font-md ml-3">getTitle</text>
</slot>
</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>
</view>
</view>
<!-- 占位 -->
<view v-if="fixed" :style="fixedStyle"></view>
<!-- 扩展菜单 -->
<free-popup v-if="showRight" ref="extend" :bodyWidth="320" :bodyHeight="525"
bodyBgColor="bg-dark" transformOrigin="right top">
<view class="flex flex-column"
style="width: 320rpx;height: 525rpx;">
<view class="flex-1 flex align-center"
hover-class="bg-hover-dark"
v-for="(item,index) in menus"
:key="index"
@click="clickEvent(item)">
<text class="iconfont pl-3 pr-2 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
props:
showBack:
type:Boolean,
default:false
,
backEvent:
type:Boolean,
default:true
,
title:
type: [String,Boolean],
default:false
,
fixed:
type:Boolean,
default:true
,
noreadnum:
type:[Number,String],
default:0
,
bgColor:
type:String,
default:"bg-light"
,
showRight:
type:Boolean,
default:true
,
components:
freeIconButton,
freePopup
,
data()
return
statusBarHeight:0,
navBarHeight:0,
menus:[
name:"发起群聊",
event:"navigateTo",
path:"/pages/mail/mail/mail?type=createGroup",
icon:"\\ue633"
,
name:"添加好友",
event:"navigateTo",
path:"/pages/common/search/search",
icon:"\\ue65d"
,
// #ifndef H5
name:"扫一扫",
event:"scan",
icon:"\\ue614"
,
// #endif
name:"收付款",
event:"",
icon:"\\ue66c"
,
name:"帮助与反馈",
event:"",
icon:"\\ue66c"
],
,
mounted()
// #ifdef APP-PLUS-NVUE
this.statusBarHeight = plus.navigator.getStatusbarHeight()
// #endif
this.navBarHeight = this.statusBarHeight + uni.upx2px(90)
,
computed:
fixedStyle()
return `height:$this.navBarHeightpx`
,
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()
if(this.backEvent)
return uni.navigateBack(
delta: 1
);
this.$emit('back')
,
search()
uni.navigateTo(
url: '/pages/common/search/search'
);
,
clickEvent(item)
this.$refs.extend.hide()
switch (item.event)
case 'navigateTo':
uni.navigateTo(
url: item.path,
);
break;
case 'scan':
uni.scanCode(
success:(res)=>
if(res.scanType === 'QR_CODE')
let result = JSON.parse(res.result);
switch(result.type)
case 'group':
$H.post('/group/checkrelation',
id:parseInt(result.id)
).then(res2=>
if(res2.status)
// 已经在群内
else
// 加入群聊
uni.navigateTo(
url:'/pages/chat/scan-add/scan-add?params='+encodeURIComponent(JSON.stringify(res2.group))
);
)
break;
default:
uni.showToast(
title: '靓仔,自己发挥',
icon: 'none'
);
break;
)
break;
default:
uni.showToast(
title: '靓仔,自己发挥',
icon: 'none'
);
break;
,
</script>
<style>
</style>
感谢大家观看,我们下次见
以上是关于uni-app 190扫一扫加入群聊功能的主要内容,如果未能解决你的问题,请参考以下文章