123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257 |
- <!-- 消息 -->
- <template>
- <view class="container">
- <view class="notice_content_wrap" v-if="!no_data && noticeList && noticeList.length > 0">
- <view class="notice_item" v-for="(item,index) in noticeList" :key="index" @click="goNoticeDetail(item.receiveId,item.msgLinkInfo)">
- <view class="notice_time">{{item.msgSendTime}}</view>
- <view class="notice_content">
- <view class="notice_title_wrap">
- <view class="notice_title_left">
- <view v-if="item.msgState==0" class="circle"></view>
- <view v-else class="circle have_read"></view>
- <view class="notice_title">{{item.tplName}}</view>
- </view>
- <view class="notice_title_right">
- <image :src="rightUrl" mode=""></image>
- </view>
- </view>
- <view class="notice_text">{{item.msgContent}}</view>
- </view>
- </view>
- <loadingState :state='loadingState' v-if="loadingState == 'first_loading'||noticeList.length > 0"/>
- </view>
- <!-- <view class="no_data" v-if="no_data" :style="{ width: windowWidth + 'rpx', 'height': windowHeight + 'rpx' }"> -->
- <view class="no_data" v-if="no_data">
- <image :src="imgUrl+'empty_msg.png'" mode=""></image>
- <text>{{$L('暂无消息')}}~</text>
- </view>
- </view>
- </template>
- <script>
- import loadingState from "@/components/loading-state.vue";
- import {
- mapState
- } from 'vuex';
- export default {
- data(){
- return {
- imgUrl: getApp().globalData.imgUrl,
- rightUrl:getApp().globalData.imgUrl+'member/right.png',
- tplType:'', //消息类型
- current:1, //当前页数
- noticeList:[], //消息列表
- loadingState:'first_loading', //是否第一次加载
- stopPullDownRefresh: false, //是否下拉刷新中
- no_data:false,
- windowHeight:'', //屏幕的高
- windowWidth:'', //屏幕的宽
- }
- },
- components: {
- loadingState
- },
- computed:{
- ...mapState(['userInfo'])
- },
- onPullDownRefresh() {
- this.loadingState = 'first_loading';
- this.noticeList = [];
- this.current = 1;
- this.stopPullDownRefresh = true; //下拉刷新状态
- this.loadData(this.tplType);
- },
- onReachBottom(){
- this.loadData(this.tplType);
- },
- onLoad(option){
- this.tplType = option.tplType
- // this.loadData(this.tplType)
- const {windowWidth,windowHeight} = uni.getSystemInfoSync();
- this.windowWidth = windowWidth * 2;
- this.windowHeight = windowHeight * 2;
- },
- onShow(){
- this.loadingState=''
- this.noticeList=[]
- this.current=1
- this.loadData(this.tplType);
- },
- methods:{
- //点击消息时设置消息已读
- readMessage(receiveId){
- let param = {}
- param.url = 'v3/msg/front/msg/read'
- param.method = 'POST'
- param.data = {
- receiveIds:receiveId
- }
- this.$request(param).then(res=>{
- if(res.state == 200){
- }else {
- this.$api.msg(res.msg);
- }
- })
- },
- loadData(tplType){
- if(this.loadingState == 'loading'){
- return
- }
- if(this.loadingState == 'no_more_data'){
- return
- }
- let param = {}
- param.url = 'v3/msg/front/msg/msgList'
- param.method = 'GET'
- param.data = {
- tplType,
- pageSize:10,
- current:this.current,
- }
- this.loadingState = this.loadingState == 'first_loading'?this.loadingState:'loading'
- this.$request(param).then(res=>{
- if(res.state == 200){
- if(res.data.list && res.data.list.length > 0){
- this.noticeList = this.noticeList.concat(res.data.list);
- let hasMore = this.$checkPaginationHasMore(res.data.pagination); //是否还有数据
- if (hasMore) {
- this.current++;
- this.loadingState = 'allow_loading_more';
- } else {
- this.loadingState = 'no_more_data';
- }
- this.no_data = false;
- }else{
- this.no_data = true;
- }
- }else {
- this.$api.msg(res.msg);
- }
- if (this.stopPullDownRefresh) {
- this.stopPullDownRefresh = false;
- uni.stopPullDownRefresh();
- }
- })
- },
- //消息跳转
- goNoticeDetail(receiveId,info){
- let msgLinkInfo = JSON.parse(info);
- this.readMessage(receiveId)
- if(msgLinkInfo.type == 'order_new' || msgLinkInfo.type == 'order_news'){ // 商品出库提醒 || 付款成功提醒 进入订单详情
- uni.navigateTo({
- url:'/pages/order/detail?orderSn=' + msgLinkInfo.orderSn
- })
- }else if(msgLinkInfo.type == 'balance_change'){ //余额变动提醒 进入我的钱包
- uni.navigateTo({
- url:'/pages/balance/list'
- })
- }else if(msgLinkInfo.type == 'coupon_news'){ //优惠券过期提醒 进入我的优惠券
- uni.navigateTo({
- url:'/pages/coupon/myCoupon'
- })
- }else if(msgLinkInfo.type == 'return_news' || msgLinkInfo.type == 'refund_news'){ //售后提醒 return_news(退货退款) refund_news(仅退款 ) 进入我的售后列表 (afsSn)
- uni.navigateTo({
- url:'/pages/order/returnAndRefundList?state=0'
- })
- }else if(msgLinkInfo.type == 'integral_change'){ //积分变动提醒 进入我的积分
- uni.navigateTo({
- url:'/pages/user/myIntegral'
- })
- }else if(msgLinkInfo.type == 'appointment_news'){//预约消息跳转详情
- uni.navigateTo({
- url:'/pages/product/detail?productId='+msgLinkInfo.productId+'&goodsId='+msgLinkInfo.goodsId
- })
- }
- }
- }
- }
- </script>
- <style lang="scss">
- page,.container{
- width:750rpx;
- height:100%;
- background: #f5f5f5;
- margin: 0 auto;
- .notice_content_wrap{
- padding:0 20rpx;
- .notice_item{
- margin-top:38rpx;
- .notice_time{
- text-align: center;
- font-size: 24rpx;
- color:#666;
- }
- .notice_content{
- width:100%;
- background-color: #fff;
- margin-top:20rpx;
- .notice_title_wrap{
- width:100%;
- height:70rpx;
- padding:0 20rpx;
- box-sizing: border-box;
- display:flex;
- justify-content: space-between;
- align-items: center;
- border-bottom:1rpx solid rgba(0,0,0,0.05);
- .notice_title_left{
- display:flex;
- align-items: center;
- .circle{
- width:10rpx;
- height:10rpx;
- border-radius: 50%;
- background: #FF1212;
- margin-right:20rpx;
- }
- .have_read{
- background-color: #999999;
- }
- .notice_title{
- font-size:32rpx;
- color:#333;
- font-weight: 600;
- }
- }
- .notice_title_right{
- image{
- width:14rpx;
- height:24rpx;
- }
- }
- }
- .notice_text{
- font-size:28rpx;
- line-height: 1.5em;
- color:#666;
- font-weight: 600;
- padding:20rpx;
- }
- }
- }
- }
- .no_data{
- width: 750rpx;
- display: flex;
- // justify-content: center;
- padding-top: 200rpx;
- align-items: center;
- flex-direction: column;
- image{
- width: 212rpx;
- height: 210rpx;
- }
- text{
- font-size: 26rpx;
- font-family: Source Han Sans CN;
- font-weight: 400;
- color: #999999;
- margin-top: 30rpx;
- }
- }
- }
- </style>
|