Merge branch 'test' of https://newgitea.sxczgkj.cn/czg_team/cashier_wx into test
This commit is contained in:
81
pages/user/message/index.vue
Normal file
81
pages/user/message/index.vue
Normal file
@@ -0,0 +1,81 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<view class="list-wrap">
|
||||
<view class="item" v-for="item in list.data" :key="item.id">
|
||||
<msg-list-item :content="item.content" :title="item.title"
|
||||
:create-time="item.createTime"></msg-list-item>
|
||||
</view>
|
||||
</view>
|
||||
<u-loadmore :status="list.status"></u-loadmore>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
// 导入 Vue 的响应式 API
|
||||
import {
|
||||
onMounted,
|
||||
reactive
|
||||
} from 'vue'
|
||||
import {
|
||||
onReachBottom
|
||||
} from '@dcloudio/uni-app';
|
||||
import {
|
||||
getUserMsgPageReq
|
||||
} from '@/common/api/account/message'
|
||||
|
||||
import MsgListItem from '@/components/msg-list-item/msg-list-item.vue'
|
||||
|
||||
const list = reactive({
|
||||
page: 1,
|
||||
size: 10,
|
||||
status: 'loading',
|
||||
data: []
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
getMessageList()
|
||||
})
|
||||
|
||||
const getMessageList = async () => {
|
||||
uni.showLoading({
|
||||
title: '加载中...',
|
||||
mask: true
|
||||
});
|
||||
let res = await getUserMsgPageReq({
|
||||
page: list.page,
|
||||
size: list.size
|
||||
})
|
||||
|
||||
if (list.page == 1) {
|
||||
list.data = res.records;
|
||||
} else {
|
||||
list.data.push(...res.records);
|
||||
}
|
||||
|
||||
if (res.pageNumber == res.totalPage || res.records.length == 0) {
|
||||
list.status = 'nomore';
|
||||
}
|
||||
uni.hideLoading();
|
||||
}
|
||||
|
||||
onReachBottom(() => {
|
||||
if (list.status != 'nomore') {
|
||||
list.page++;
|
||||
getMessageList();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.container {
|
||||
background-color: #F7F7F7;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100vh;
|
||||
padding: 30rpx 30rpx 0 30rpx;
|
||||
|
||||
.list-wrap {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -21,11 +21,38 @@
|
||||
></image>
|
||||
<view class="name">{{ userInfo.nickName }}</view>
|
||||
</view>
|
||||
<image
|
||||
class="my_info_right_qr"
|
||||
src="/static/icon/code.png"
|
||||
mode="aspectFill"
|
||||
></image>
|
||||
<view class="right-icons">
|
||||
<image
|
||||
class="my_info_right_qr"
|
||||
src="/static/icon/code.png"
|
||||
mode="aspectFill"
|
||||
></image>
|
||||
<view class="msg-view" @click="viewUserMsgList">
|
||||
<view class="msg-icon-wrapper">
|
||||
<image
|
||||
v-if="unreadMsgCount > 0"
|
||||
class="my-msg-icon"
|
||||
src="/static/mine/msg_select.png"
|
||||
mode="aspectFill"
|
||||
></image>
|
||||
<image
|
||||
v-else
|
||||
class="my-msg-icon"
|
||||
src="/static/mine/msg.png"
|
||||
mode="aspectFill"
|
||||
></image>
|
||||
|
||||
<!-- 角标 -->
|
||||
<view
|
||||
v-if="unreadMsgCount > 0"
|
||||
class="badge"
|
||||
>
|
||||
<text class="badge-text">{{ unreadMsgCount > 99 ? '99+' : unreadMsgCount }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
<!-- <image class="my_info_right_qr" @click="clickEvent" v-if="userInfo.isVip == 1 && ShopId"
|
||||
:src="'https://czg-qr-order.oss-cn-beijing.aliyuncs.com/my/my_qRcode.png'" mode="aspectFill">
|
||||
@@ -258,6 +285,7 @@ import { productStore } from "@/stores/user.js";
|
||||
import * as vipApi from "@/common/api/account/vip.js";
|
||||
import * as rechargeApi from "@/common/api/market/recharge.js";
|
||||
import { pointsShopList } from '@/common/api/market/points.js'
|
||||
import { getUnReadCountReq } from "../../common/api/account/message";
|
||||
|
||||
|
||||
|
||||
@@ -473,6 +501,32 @@ function toCoin() {
|
||||
});
|
||||
}
|
||||
|
||||
const unreadMsgCount = ref(0);
|
||||
|
||||
const getUnReadMsgCount = async () => {
|
||||
let res = await getUnReadCountReq()
|
||||
|
||||
let badge = Number(res)
|
||||
if (badge > 0) {
|
||||
uni.setTabBarBadge({
|
||||
index: 2,
|
||||
text: badge.toString()
|
||||
})
|
||||
} else {
|
||||
uni.removeTabBarBadge({
|
||||
index: 2
|
||||
})
|
||||
}
|
||||
|
||||
unreadMsgCount.value = badge
|
||||
}
|
||||
|
||||
const viewUserMsgList = () => {
|
||||
uni.navigateTo({
|
||||
url: "/pages/user/message/index"
|
||||
})
|
||||
}
|
||||
|
||||
onShow(() => {
|
||||
store.actionsAPIuser();
|
||||
if (uni.cache.get("shopId")) {
|
||||
@@ -485,6 +539,8 @@ onShow(() => {
|
||||
}
|
||||
console.log("userInfo", userInfo);
|
||||
getData();
|
||||
|
||||
getUnReadMsgCount()
|
||||
});
|
||||
|
||||
const qrcode = ref("");
|
||||
@@ -547,11 +603,6 @@ const showQrcode = computed(() => {
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
|
||||
.my_info_right_qr {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.my_item {
|
||||
@@ -673,4 +724,47 @@ const showQrcode = computed(() => {
|
||||
position: fixed;
|
||||
transform: translateX(200vw, 200vh);
|
||||
}
|
||||
|
||||
.right-icons {
|
||||
display: flex;
|
||||
|
||||
.my_info_right_qr {
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
}
|
||||
|
||||
.msg-icon-wrapper {
|
||||
position: relative;
|
||||
margin-left: 30rpx;
|
||||
}
|
||||
|
||||
.my-msg-icon {
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
}
|
||||
|
||||
// 角标样式
|
||||
.badge {
|
||||
position: absolute;
|
||||
top: -8rpx;
|
||||
right: -8rpx;
|
||||
min-width: 32rpx;
|
||||
height: 32rpx;
|
||||
background-color: #ff3b30;
|
||||
border-radius: 16rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0 6rpx;
|
||||
z-index: 10;
|
||||
|
||||
.badge-text {
|
||||
color: white;
|
||||
font-size: 20rpx;
|
||||
font-weight: bold;
|
||||
line-height: 1;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user