132 lines
2.9 KiB
Vue
132 lines
2.9 KiB
Vue
<template>
|
|
<!-- 小纸条页 -->
|
|
<view class="paper">
|
|
<!-- 小程序导航栏 -->
|
|
<!-- #ifdef MP-WEIXIN -->
|
|
<u-navbar placeholder>
|
|
<view class="flex" slot="left">
|
|
<view class="iconfont iconduoren" @click="handleFirend()">
|
|
</view>
|
|
<view class="iconfont iconcaidan ml-20" @click="showPopup = true">
|
|
</view>
|
|
</view>
|
|
<view slot="center" class="nav-center">
|
|
小纸条
|
|
</view>
|
|
</u-navbar>
|
|
<!-- #endif -->
|
|
<paper-list v-for="(item,index) in list" :key="index" :item="item"></paper-list>
|
|
<!-- 空数据 -->
|
|
<u-empty v-if="list.length === 0" text="本来无一物,何处惹尘埃" icon="/static/img/demo/winter.png" textSize="16"
|
|
marginTop='25%' mode="list"></u-empty>
|
|
<!-- 底部弹窗 -->
|
|
<u-popup :show="showPopup" @close="showPopup = false" mode="top" :safeAreaInsetTop="true">
|
|
<view class="flex justify-center items-center text-30 py-20 border-b" hover-class="bg-gray"
|
|
@click="popupHandle('friend')">
|
|
<text class="iconfont iconsousuo mr-20"></text>添加好友
|
|
</view>
|
|
<view class="flex justify-center items-center text-30 py-20" hover-class="bg-gray"
|
|
@click="popupHandle('clear')">
|
|
<text class="iconfont iconshanchu mr-20"></text>清空消息
|
|
</view>
|
|
</u-popup>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
paperList
|
|
} from '@/utils/data/data.js'
|
|
import PaperList from '@/pages/paper/cpns/paper-list.vue'
|
|
export default {
|
|
components: {
|
|
PaperList
|
|
},
|
|
data() {
|
|
return {
|
|
list: paperList,
|
|
showPopup: false,
|
|
}
|
|
},
|
|
// 监听下拉动作
|
|
onPullDownRefresh() {
|
|
// 下拉刷新
|
|
this.refresh()
|
|
},
|
|
// 监听原生标题栏按钮点击事件
|
|
onNavigationBarButtonTap(e) {
|
|
switch (e.index) {
|
|
case 0:
|
|
// 打开好友列表
|
|
this.handleFirend()
|
|
break
|
|
case 1:
|
|
// 打开菜单功
|
|
this.showPopup = true
|
|
break
|
|
}
|
|
},
|
|
methods: {
|
|
// 下拉刷新
|
|
refresh() {
|
|
setTimeout(() => {
|
|
this.list = []
|
|
// 停止下拉刷新
|
|
uni.stopPullDownRefresh()
|
|
}, 1000)
|
|
},
|
|
// 好友列表
|
|
handleFirend() {
|
|
this.$u.route('pages/paper/friend')
|
|
},
|
|
// 弹窗操作
|
|
popupHandle(type) {
|
|
const _this = this
|
|
if (type === 'friend') {
|
|
this.$u.route('pages/paper/friend')
|
|
} else {
|
|
uni.showModal({
|
|
title: '提示',
|
|
content: '您确定要清空所有消息吗？',
|
|
success(res) {
|
|
if (res.confirm) {
|
|
_this.list = []
|
|
_this.$u.toast('消息已清空')
|
|
}
|
|
}
|
|
})
|
|
}
|
|
this.showPopup = false
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.paper {
|
|
|
|
// 小程序导航栏
|
|
/* #ifdef MP-WEIXIN */
|
|
/deep/ .u-navbar {
|
|
.iconfont {
|
|
font-size: 48rpx;
|
|
color: $uni-color-green;
|
|
}
|
|
|
|
.u-navbar__content {
|
|
margin-right: 180rpx !important; // 胶囊按钮
|
|
}
|
|
|
|
.nav-center {
|
|
font-size: 30rpx;
|
|
text-align: center;
|
|
font-weight: bold;
|
|
margin-left: 200rpx;
|
|
width: calc(100% - 200rpx);
|
|
}
|
|
}
|
|
|
|
/* #endif */
|
|
}
|
|
</style>
|