You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
204 lines
4.1 KiB
204 lines
4.1 KiB
<template>
|
|
<view>
|
|
<u-navbar title="消息" :is-back="false" :title-bold="true">
|
|
<view slot='right'>
|
|
<view class="rigBtn" @click="clearMsg">
|
|
清除未读
|
|
<u-image width="32rpx" height="32rpx" src="../../static/clear.png"
|
|
style="margin-left: 12rpx;transform: translateY(5rpx);"></u-image>
|
|
</view>
|
|
</view>
|
|
</u-navbar>
|
|
|
|
<!-- <view class="navBar">
|
|
<view class="content">
|
|
消息
|
|
</view>
|
|
<view class="rigBtn" @click="clearMsg">
|
|
清除未读
|
|
<u-image width="32rpx" height="32rpx" src="../../static/clear.png"
|
|
style="margin-left: 12rpx;transform: translateY(5rpx);"></u-image>
|
|
</view>
|
|
</view> -->
|
|
<!-- 列表 -->
|
|
<view class="list">
|
|
<view class="item" v-for="(item, index) in mesList" :key="index" @click="toMesgInfo(item)">
|
|
<view class="left">
|
|
<u-image width="88rpx" height="88rpx" border-radius="50%" :src="item.photo" class="img">
|
|
</u-image>
|
|
</view>
|
|
<view class="right">
|
|
<view class="title u-relative" >
|
|
{{item.name}}
|
|
<view class="dian" v-if="!item.isRed">
|
|
|
|
</view>
|
|
</view>
|
|
<view class="info">
|
|
{{item.content}}
|
|
</view>
|
|
</view>
|
|
<view class="time">
|
|
{{item.time}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<u-modal v-model="show" confirm-color="#F44D4D" @cancel="show =false" @confirm="confirm"
|
|
:show-cancel-button="true" :show-title="false">
|
|
<view class="text">
|
|
确定清除未读消息？
|
|
</view>
|
|
</u-modal>
|
|
<u-tabbar v-model="vuex_current" :inactive-color="vuex_inactiveColor" :activeColor="vuex_activeColor"
|
|
:list="vuex_tabBar"></u-tabbar>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
mesList: [
|
|
// {
|
|
// photo: '../../static/mes1.png',
|
|
// name: '会员中心',
|
|
// content: '恭喜您，您获得了一次免费体验高级会员的机会…',
|
|
// time: '12:34',
|
|
// isRed: false,
|
|
// },
|
|
// {
|
|
// photo: '../../static/mes2.png',
|
|
// name: '上链成功',
|
|
// content: '你的订单P06023400已成功上链！',
|
|
// time: '12:34',
|
|
// isRed: false,
|
|
// },
|
|
// {
|
|
// photo: '../../static/mes3.png',
|
|
// name: '签约成功',
|
|
// content: '你的订单P06023400已成功签约！',
|
|
// time: '12:34',
|
|
// isRed: false,
|
|
// },
|
|
],
|
|
show: false
|
|
}
|
|
},
|
|
methods: {
|
|
submit() {
|
|
|
|
},
|
|
|
|
toMesgInfo(item) {
|
|
item.isRed = true
|
|
this.mesgLength()
|
|
uni.navigateTo({
|
|
url: './mesgInfo/mesgInfo'
|
|
})
|
|
},
|
|
clearMsg() {
|
|
this.show = true
|
|
},
|
|
confirm() {
|
|
this.mesList.forEach(item => {
|
|
item.isRed = true
|
|
})
|
|
this.mesgLength()
|
|
},
|
|
mesgLength(){
|
|
let arr = this.mesList.filter(item => {
|
|
return item.isRed === false
|
|
})
|
|
this.$u.vuex('vuex_tabBar[1].count', arr.length)
|
|
}
|
|
},
|
|
onLoad(){
|
|
this.mesgLength()
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
.rigBtn {
|
|
display: flex;
|
|
color: #606060;
|
|
padding-right: 20rpx;
|
|
}
|
|
|
|
.navBar {
|
|
display: flex;
|
|
height: 100rpx;
|
|
line-height: 100rpx;
|
|
box-shadow: 0px 0px 22rpx 0px #ebebeb;
|
|
|
|
.content {
|
|
margin-left: 340rpx;
|
|
font-size: 36rpx;
|
|
font-weight: 600;
|
|
margin-right: 146rpx;
|
|
}
|
|
}
|
|
|
|
.list {
|
|
.item {
|
|
position: relative;
|
|
display: flex;
|
|
height: 148rpx;
|
|
padding-top: 30rpx;
|
|
// padding: 0 36rpx;
|
|
padding-left: 36rpx;
|
|
|
|
.left {
|
|
margin-right: 24rpx;
|
|
}
|
|
|
|
.right {
|
|
flex: 1;
|
|
border-bottom: 2rpx solid #f1f1f1;
|
|
|
|
.title {
|
|
font-size: 32rpx;
|
|
font-weight: 600;
|
|
margin-bottom: 10rpx;
|
|
}
|
|
.dian {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 135rpx;
|
|
width: 10rpx;
|
|
height: 10rpx;
|
|
background-color: red;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.info {
|
|
color: #909399;
|
|
font-size: 24rpx;
|
|
width: 566rpx;
|
|
overflow: hidden;
|
|
/*超出部分隐藏*/
|
|
white-space: nowrap;
|
|
/*禁止换行*/
|
|
text-overflow: ellipsis;
|
|
/*省略号*/
|
|
height: 64rpx;
|
|
}
|
|
}
|
|
|
|
.time {
|
|
position: absolute;
|
|
top: 35rpx;
|
|
right: 36rpx;
|
|
color: #BFC2CC;
|
|
}
|
|
}
|
|
}
|
|
|
|
.text {
|
|
height: 188rpx;
|
|
line-height: 188rpx;
|
|
border-radius: 24rpx;
|
|
text-align: center;
|
|
}
|
|
</style>
|
|
|