123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119 |
- <template>
- <view class="center">
- <view class="message">
- <view class="item" v-for="l in list" @click="look(l.cate_id)">
- <view class="img">
- <image :src="l.image" mode=""></image>
- </view>
- <view class="right">
- <view class="top">
- <view class="title">{{ l.name }}</view><view class="time">{{ time(l.last_message.add_time) }}</view>
- </view>
- <view class="bottom">
- <view class="concent clamp2">{{ l.last_message.detail }}</view>
- <view class="icon" v-show="l.unwatch_message > 0"></view>
- <view class="title">{{ l.name }}</view><view class="time">{{ l.time }}</view>
- </view>
- </view>
- </view>
- </view>
- </view>
- </template>
- <script>
- import { messageList } from '@/api/finance.js'
- export default {
- data(){
- return {
- list:[],
- }
- },
- onLoad() {
- this.loadData()
- },
- methods: {
- loadData() {
- messageList({page:1,limit:10}).then(({data}) =>{
- this.list = data
- console.log(data)
- })
- },
- look(id) {
- console.log(id)
- },
- time (data) {
- var date = new Date(data)
- var Y = date.getFullYear() + '-'
- var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
- var D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' '
- var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':'
- var m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':'
- var s = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds())
- return Y + M + D + h + m + s
- }
- }
- }
- </script>
- <style lang="scss">
- .center,page {
- height: 100%;
- width: 100%;
- background: #F8F8F8;
- }
- .message {
- margin-top: 20rpx;
- font-family: PingFangSC-Medium;
- background-color: #fff;
- .item {
- display: flex;
- padding: 30rpx 0;
- margin: 0 30rpx;
- border-bottom: solid 1rpx #f8f8f8;
- .img {
- margin: auto 0;
- width: 110rpx;
- margin-left: 0rpx;
- image {
- width: 80rpx;
- height: 80rpx;
- }
- }
- .right {
- width: calc(100% - 110rpx);
- display: grid;
- align-content: space-between;
- .top {
- display: flex;
- justify-content: space-between;
- .title {
- color: #000;
- font-size: 30rpx;
- }
- .time {
- color: #999999;
- font-size: 25rpx;
- }
- }
- .bottom {
- display: flex;
- justify-content: space-between;
- .concent {
- width: calc(100% - 30rpx);
- color: #999999;
- font-size: 26rpx;
- }
- .icon {
- margin: auto 0;
- width: 10rpx;
- height: 10rpx;
- background-color: #FB555C;
- border-radius: 50%;
- }
- }
-
- }
- }
- }
- </style>
|