|
|
@@ -1,118 +1,116 @@
|
|
|
<template>
|
|
|
<gui-page :fullPage="true" :isLoading="pageLoading" ref="guiPage" :footerSets="{height:150, zIndex:100, bg:'none'}" :customFooter="true">
|
|
|
<view slot="gBody" class="gui-flex1">
|
|
|
- <view class="gui-margin gui-margin-top">
|
|
|
- <text class="gui-h5 gui-color-gray gui-bold">消息列表</text>
|
|
|
- </view>
|
|
|
- <view class="gui-margin-top">
|
|
|
- <gui-slide-list :msgs="msgs" @itemTap="itemTap" :height="mainHeight" @btnTap="btnTap"></gui-slide-list>
|
|
|
+ <view>
|
|
|
+ <view class="gui-margin gui-margin-top">
|
|
|
+ <text class="gui-h5 gui-color-gray gui-bold">消息列表</text>
|
|
|
+ </view>
|
|
|
+ <view class="my-list" v-if="fetch.msg.length > 0">
|
|
|
+ <view class="gui-list-items" v-for="(v, k) in fetch.msg" :key="k" @click="view(v)">
|
|
|
+ <block v-if="v.type == 1">
|
|
|
+ <text class="gui-list-icon gui-icons gui-color-blue"></text>
|
|
|
+ <view class="gui-list-body gui-border-b">
|
|
|
+ <view class="gui-list-title">
|
|
|
+ <text class="gui-list-title-text gui-primary-color gui-list-one-line gui-ellipsis"
|
|
|
+ style="width:320rpx; height:60rpx;">{{v.name}}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <text class="gui-list-arrow-right gui-icons gui-color-gray-light"></text>
|
|
|
+ </block>
|
|
|
+ <block v-if="v.type > 1">
|
|
|
+ <view class="gui-list-image gui-relative">
|
|
|
+ <image class="gui-list-image"
|
|
|
+ :src="v.avatar"></image>
|
|
|
+ <view class="gui-badge-point" style="display: none;"></view>
|
|
|
+ </view>
|
|
|
+ <view class="gui-list-body gui-border-b">
|
|
|
+ <view class="gui-list-title">
|
|
|
+ <text class="gui-list-title-text gui-primary-color">{{v.name}}</text>
|
|
|
+ <text class="gui-list-title-desc gui-color-gray">{{v.date}}</text>
|
|
|
+ </view>
|
|
|
+ <text class="gui-list-body-desc gui-color-gray">{{v.content}}</text>
|
|
|
+ </view>
|
|
|
+ <text class="gui-list-arrow-right gui-icons gui-color-gray-light"></text>
|
|
|
+ </block>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <gui-empty v-if="fetch.msg.length <= 0">
|
|
|
+ <view slot="img" class="gui-flex gui-rows gui-justify-content-center">
|
|
|
+ <image class="gui-empty-img" src="@/static/dreamland/img/kong.png"></image>
|
|
|
+ </view>
|
|
|
+ <text slot="text"
|
|
|
+ class="gui-text-small gui-block-text gui-text-center gui-margin-top" style="color:#9DABFF;">您还没有消息</text>
|
|
|
+ </gui-empty>
|
|
|
+
|
|
|
+ <gui-modal ref="alert"
|
|
|
+ :title="title" :isTitle="true">
|
|
|
+ <view slot="content" class="gui-padding gui-bg-gray">
|
|
|
+ <text class="gui-block-text gui-text-center gui-text gui-color-gray"
|
|
|
+ style="line-height:100rpx; padding:10rpx;">{{content}}</text>
|
|
|
+ </view>
|
|
|
+ <!-- 利用 flex 布局 可以放置多个自定义按钮哦 -->
|
|
|
+ <view slot="btns" class="gui-flex gui-rows gui-space-between">
|
|
|
+ <view class="modal-btns gui-flex1">
|
|
|
+ <text class="modal-btns gui-color-blue" @tap="close">确认</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </gui-modal>
|
|
|
</view>
|
|
|
</view>
|
|
|
<foot ref="foot" slot="gFooter" :value="foot_value"></foot>
|
|
|
</gui-page>
|
|
|
</template>
|
|
|
-<script>
|
|
|
-// 模拟个 api 请求的数据
|
|
|
-var msgsFromApi = [
|
|
|
- {
|
|
|
- img : 'https://cmsuse.oss-cn-beijing.aliyuncs.com/g5/15.png',
|
|
|
- msgnumber : 8,
|
|
|
- title : "某某某",
|
|
|
- time : "30分钟前",
|
|
|
- content : "消息内容 ..."
|
|
|
- },
|
|
|
- {
|
|
|
- img : 'https://cmsuse.oss-cn-beijing.aliyuncs.com/g5/13.png',
|
|
|
- msgnumber : 0,
|
|
|
- title : "某某某",
|
|
|
- time : "08/10/2020",
|
|
|
- content : "语音消息"
|
|
|
- },
|
|
|
- {
|
|
|
- img : 'https://cmsuse.oss-cn-beijing.aliyuncs.com/g5/11.png',
|
|
|
- msgnumber : 12,
|
|
|
- title : "某某某",
|
|
|
- time : "昨天",
|
|
|
- content : "图片消息"
|
|
|
- },
|
|
|
- {
|
|
|
- img : 'https://cmsuse.oss-cn-beijing.aliyuncs.com/g5/12.png',
|
|
|
- msgnumber : 1,
|
|
|
- title : "某某某",
|
|
|
- time : "08/08/2020",
|
|
|
- content : "系统消息"
|
|
|
- }
|
|
|
-];
|
|
|
-var graceJS = require('@/lib/GraceUI5/js/grace.js');
|
|
|
+<script>
|
|
|
import foot from '@/pages/index/foot.vue';
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
- foot_value : 3,
|
|
|
- msgs : [],
|
|
|
- // 核心区域高度
|
|
|
- mainHeight : 200,
|
|
|
- pageLoading : true
|
|
|
+ foot_value : 3,
|
|
|
+ fetch : {
|
|
|
+ msg : [],
|
|
|
+ },
|
|
|
+ title : '',
|
|
|
+ content : '',
|
|
|
}
|
|
|
},
|
|
|
components:{
|
|
|
foot
|
|
|
},
|
|
|
- onLoad:function(){
|
|
|
- // 01. 获取页面主体高度
|
|
|
- graceJS.getRefs('guiPage', this, 0, (ref)=>{
|
|
|
- ref.getDomSize('guiPageBody', (e)=>{
|
|
|
- // 消息主体高度 = 页面高度 - 其他页面元素高度
|
|
|
- this.mainHeight = e.height - uni.upx2px(120);
|
|
|
- this.pageLoading = false;
|
|
|
- });
|
|
|
- });
|
|
|
-
|
|
|
- // 模拟 api 请求，因为请求数据里没有按钮信息我们利用js进行按钮补充
|
|
|
- setTimeout(() => {
|
|
|
- for(let i = 0; i < msgsFromApi.length; i++){
|
|
|
- // 具体几个按钮及按钮文本根据项目需求来，格式 {name:按钮文本, bgColor:按钮背景色}
|
|
|
- msgsFromApi[i].btns = [{'name':'标为已读', bgColor:'#323232'}, {'name':'删除消息', bgColor:'#FF0036'}];
|
|
|
- }
|
|
|
- this.msgs = msgsFromApi;
|
|
|
- }, 500);
|
|
|
+ onLoad() {
|
|
|
+ this.getData(1);
|
|
|
+ },
|
|
|
+ onShow() {
|
|
|
+ this.$nextTick(function() {
|
|
|
+ this.$refs.foot.cur = this.foot_value;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 重新加载
|
|
|
+ onPullDownRefresh: function() {
|
|
|
+ this.getData(1);
|
|
|
+ },
|
|
|
+ //下拉加载
|
|
|
+ onReachBottom() {
|
|
|
+ this.getData(2);
|
|
|
},
|
|
|
methods:{
|
|
|
- btnTap : function(index, btnIndex){
|
|
|
- console.log(index, btnIndex);
|
|
|
- // 第一个按钮被点击 [ 标记已读 ]
|
|
|
- if(btnIndex == 0){
|
|
|
- if(this.msgs[index].btns[0].name == '标为已读'){
|
|
|
- this.msgs[index].btns = [{'name':'标为未读', bgColor:'#888888'}, {'name':'删除消息', bgColor:'#FF0036'}];
|
|
|
- this.msgs[index].msgnumber = 0;
|
|
|
- }else{
|
|
|
- this.msgs[index].btns = [{'name':'标为已读', bgColor:'#323232'}, {'name':'删除消息', bgColor:'#FF0036'}];
|
|
|
- this.msgs[index].msgnumber = 1;
|
|
|
- }
|
|
|
- setTimeout(()=>{this.msgs.splice(index, 1, this.msgs[index]);}, 300);
|
|
|
- }
|
|
|
- // 第二个按钮被打开 [ 删除消息 ]
|
|
|
- else if(btnIndex == 1){
|
|
|
- uni.showModal({
|
|
|
- title:"确定要删除吗?",
|
|
|
- success: (e) => {
|
|
|
- if(e.confirm){this.msgs.splice(index, 1);}
|
|
|
- }
|
|
|
- });
|
|
|
- }
|
|
|
+ getData : function(page) {
|
|
|
+ var self = this;
|
|
|
+ var data = {};
|
|
|
+ data.id = -1;
|
|
|
+ this.Dever.page([page, 'msg'], this, 'app/collection/?l=api.msg', data);
|
|
|
+ },
|
|
|
+ view : function(v) {
|
|
|
+ this.title = v.name;
|
|
|
+ this.content = v.content;
|
|
|
+ this.$refs.alert.open();
|
|
|
+ },
|
|
|
+ close : function () {
|
|
|
+ this.$refs.alert.close();
|
|
|
},
|
|
|
- // 列表本身被点击
|
|
|
- itemTap : function (e) {
|
|
|
- console.log(e);
|
|
|
- uni.showToast({title:"索引"+e});
|
|
|
- }
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
<style>
|
|
|
-.gui-slide-list-img-wrap{width:80rpx; height:80rpx; margin-left:25rpx;} /* 列表图片外层样式 */
|
|
|
-.gui-slide-list-img{width:80rpx; height:80rpx; border-radius:6rpx;} /* 列表图片外层样式 */
|
|
|
-.gui-slide-list-point{border-radius:32rpx; height:32rpx; line-height:32rpx; padding:0 10rpx; font-size:20rpx;} /* 消息数标签样式 */
|
|
|
-.gui-slide-list-title-text{line-height:38rpx; height:38rpx; font-size:28rpx; color:#2B2E3D; overflow:hidden;} /* 消息标题样式 */
|
|
|
-.gui-slide-list-desc{line-height:32rpx; height:32rpx; font-size:22rpx; color:rgba(69, 90, 100, 0.3); overflow:hidden; margin-right:25rpx; margin-top:2px;} /* 消息描述样式 */
|
|
|
+.my-list{margin:30rpx 0; padding:0 30rpx;}
|
|
|
+.modal-btns{line-height:88rpx; font-size:26rpx; text-align:center; width:200rpx;}
|
|
|
</style>
|
dever