uni-app 25后端api开发和前后端交互(51-60)
Posted 2019ab
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了uni-app 25后端api开发和前后端交互(51-60)相关的知识，希望对你有一定的参考价值。
51待处理好友申请数量提示
先看效果图
/pages/babbar/mail/mail.vue
<template>
<view>
<!-- 导航栏 -->
<free-nav-bar title="通讯录"></free-nav-bar>
<!-- 通讯录列表 -->
<scroll-view scroll-y="true" :style="'height:'+scrollHeight+'px;'" :scroll-into-view="scrollInto">
<free-list-item v-for="(item,index) in topList" :key="item.id" :title="item.title" :cover="item.cover" :showRight="item.id==='friend'" @click="" :showRightIcon='false'>
<free-badge slot="right" :value="applyCount"></free-badge>
</free-list-item>
<view v-for="(item,index) in list" :key="index" v-if="item.data.length>0" :id="'item-'+item.letter">
<view class="py-2 px-3 border-bottom bg-light">
<text class="font-md text-dark">{{item.letter}}</text>
</view>
<free-list-item v-for="(item2,index2) in item.data" :key="index2" :title="item2" cover="/static/images/mail/friend.png" @click=""></free-list-item>
</view>
</scroll-view>
<!-- 侧边导航条 -->
<view class="position-fixed right-0 bottom-0 flex flex-column" :style="'top:'+top+'rpx;'" style="width: 50rpx;" @touchstart="touchstart" @touchmove="touchmove" @touchend="touchend" >
<view class="flex-1 flex align-center justify-center" v-for="(item,index) in list" :key="index">
<text class="font-sm text-muted">{{item.letter}}</text>
</view>
</view>
<!-- <block v-if="current"> -->
<view class="position-fixed rounded-circle bg-light border flex align-center justify-center" style="width: 150rpx;height: 150rpx; left: 300rpx;" :style="'top:'+modalTop+'px;'" v-if="current!=''">
<text class="font-lg" >{{current}}</text>
</view>
<!-- </block> -->
</view>
</template>
<script>
import freeNavBar from "@/components/free-ui/free-nav-bar.vue";
import freeListItem from '@/components/free-ui/free-list-item.vue';
import freeBadge from '@/components/free-ui/free-badge.vue';
import { mapState } from 'vuex';
import auth from '@/common/mixin/auth.js';
export default {
mixins:[auth],
components:{
freeNavBar,
freeListItem,
freeBadge
},
computed:{
...mapState({
applyCount:state=>state.user.apply.count
}),
modalTop(){
return (this.scrollHeight-uni.upx2px(150))/2;
},
itemHeight(){
let count = this.list.length;
if(count<1){
return 0;
}
return this.scrollHeight/count;
}
},
onLoad() {
let res = uni.getSystemInfoSync();
this.top = res.statusBarHeight + uni.upx2px(90);
this.scrollHeight = res.windowHeight-this.top;
},
data() {
return {
scrollInto:'',
top:0,
scrollHeight:0,
current:'',
topList:[
{
id:'friend',
title:"新的朋友",
cover:"/static/images/mail/friend.png",
event:""
},
{
id:'group',
title:"群聊",
cover:"/static/images/mail/group.png",
event:""
},
{
id:'tag',
title:"标签",
cover:"/static/images/mail/tag.png",
event:""
}
],
list:[{
"letter":"A",
"data":[
"阿苏",
"阿拉",
"阿拉",
"阿拉",
"阿拉",
"阿拉",
"阿拉",
"阿拉",
"阿拉",
"阿拉"
]
},{
"letter":"B",
"data":[
"baba",
"霸占",
"吧拉"
]
},
{
"letter":"C",
"data":[
"吃好",
"车霸占",
"才吧拉"
]
},
{
"letter":"D",
"data":[
"Dd",
"dd",
"滴滴滴"
]
}]
}
},
methods: {
touchstart(e){
this.changeScrollInto(e);
},
touchmove(e){
this.changeScrollInto(e);
},
touchend(){
this.current = '';
},
// 联动
changeScrollInto(e){
// let Y = e.touches[0].pageY;
// let index = Math.floor(Y / this.itemHeight);
// let item = this.list[index];
// if(item){
// this.scrollInto = 'item-'+item.letter;
// this.current = item.letter;
// }
let Y = e.touches[0].pageY
// #ifdef MP
Y = Y - this.top
// #endif
let index = Math.floor(Y / this.itemHeight)
let item = this.list[index]
if(item){
this.scrollInto = 'item-'+item.letter
this.current = item.letter
}
}
}
}
</script>
<style>
</style>
vuex中的/sotre/module/user.js
import $U from '@/common/free-lib/util.js';
import $H from '@/common/free-lib/request.js';
export default{
state:{
user:false,
apply:{
rows:[],
count:0,
}
},
actions:{
// 登录后处理
login({state,dispatch},user){
// 存到状态种
state.user=user;
// 存储到本地存储中
$U.setStorage('token',user.token);
$U.setStorage('user',JSON.stringify(user));
$U.setStorage('user_id',user.id);
// 更新角标提示
dispatch('updateMailBadge');
},
// 退出登录
logout({state}){
// 清除登录状态
state.user = false;
// 清除本地存储数据
$U.removeStorage('token');
$U.removeStorage('user');
$U.removeStorage('user_id');
// 跳转到登录页
uni.reLaunch({
url:'/pages/common/login/login'
})
},
// 初始化登录状态
initLogin({ state,dispatch }){
// 拿到存储的数据
let user = $U.getStorage('user');
if(user){
// 初始化登录状态
state.user=JSON.parse(user);
// 连接socket
// 获取离线信息
// 获取好友申请列表
dispatch('getApply');
}
},
// 获取好友申请列表
getApply({ state,dispatch },page=1){
$H.get('/apply/'+page).then(res=>{
console.log(res);
state.apply = res;
// 更新通讯录角标提示
dispatch('updateMailBadge');
});
},
// 更新通讯录角标提示
updateMailBadge({ state }){
let count = state.apply.count > 99 ? '99+' : state.apply.count.toString();
console.log(state.apply.count);
if(state.apply.count>0){
return uni.setTabBarBadge({
index:1,
text:count
})
}
uni.removeTabBarBadge({
index:1
})
}
},
}
52待处理好友申请列表（一）
先看效果图
下面是apply-list.vue
<template>
<view class="page">
<!-- 导航栏 -->
<free-nav-bar title="好友申请列表" showBack :showRight="false">
</free-nav-bar>
<free-list-item v-for="(item,index) in applyList" :key="index" :title="item.user.nickname ? item.user.nickname : item.user.username" :cover="item.user.avatar ? item.user.avatar : '/static/images/userpic.png'" :showRight="true" :showRightIcon="false">
<free-main-button slot="right" v-if="item.status==='pending'" name="同意"></free-main-button>
<text slot="right" v-else class="text-muted font-sm">{{item|formatTitle}}</text>
</free-list-item>
</view>
</template>
<script>
import freeMainButton from '@/components/free-ui/free-main-button.vue';
import freeNavBar from '@/components/free-ui/free-nav-bar.vue';
import freeListItem from '@/components/free-ui/free-list-item.vue';
import freeDivider from '@/components/free-ui/free-divider.vue';
import $H from '@/common/free-lib/request.js';
import auth from '@/common/mixin/auth.js';
import { mapState } from 'vuex';
export default {
mixins:[auth],
components: {
freeNavBar,
freeMainButton,
freeListItem,
freeDivider
},
filters:{
formatTitle(value){
let obj = {
agree:'已通过',
refuse:'已拒绝',
ignore:'已忽略'
}
return obj[value.status];
}
},
computed:{
...mapState({
applyList:state=>state.user.apply.rows
})
},
data() {
return {
form:{
friend_id:0,
nickname:"",
lookme:1,
lookhim:1
},
id:0
}
},
onLoad(e) {
},
methods: {
}
}
</script>
<style>
</style>
53待处理好友申请列表（二）
直接看效果图
apply-list.vue
<template>
<view class="page">
<!-- 导航栏 -->
<free-nav-bar title="好友申请列表" showBack :showRight="false">
</free-nav-bar>
<free-list-item v-for="(item,index) in applyList" :key="index" :title="item.user.nickname ? item.user.nickname : item.user.username" :cover="item.user.avatar ? item.user.avatar : '/static/images/userpic.png'" :showRight="true" :showRightIcon="false">
<free-main-button slot="right" v-if="item.status==='pending'" name="同意"></free-main-button>
<text slot="right" v-else class="text-muted font-sm">{{item|formatTitle}}</text>
</free-list-item>
<!-- 上拉加载 -->
<view class="flex align-center justify-center py-4 bg-light">
<text class="text-muted font">{{loadmore}}</text>
</view>
</view>
</template>
<script>
import freeMainButton from '@/components/free-ui/free-main-button.vue';
import freeNavBar from '@/components/free-ui/free-nav-bar.vue';
import freeListItem from '@/components/free-ui/free-list-item.vue';
import freeDivider from '@/components/free-ui/free-divider.vue';
import $H from '@/common/free-lib/request.js';
import auth from '@/common/mixin/auth.js';
import { mapState } from 'vuex';
export default {
mixins:[auth],
components: {
freeNavBar,
freeMainButton,
freeListItem,
freeDivider
},
filters:{
formatTitle(value){
let obj = {
agree:'已通过',
refuse:'已拒绝',
ignore:'已忽略'
}
return obj[value.status];
}
},
computed:{
...mapState({
applyList:state=>state.user.apply.rows
})
},
data() {
return {
form:{
friend_id:0,
nickname:"",
lookme:1,
lookhim:1
},
id:0,
page:1,
loadmore:'上拉加载更多',// 没有更多了，加载中...
}
前端端口是怎么交互后端