387 lines
9.6 KiB
Vue
387 lines
9.6 KiB
Vue
|
<template>
|
||
|
|
<view class="notify">
|
||
|
|
<view class="notify-list" v-if="notifyList.length > 0">
|
||
|
|
|
||
|
|
<view v-for="(item, index) in notifyList" :key="index" class="row" @tap="navTo(item)">
|
||
|
|
<!-- 删除按钮 -->
|
||
|
|
<view class="menu" :class="'bg-'+themeColor.name" @tap.stop="handleClearNotify(item.id)">
|
||
|
|
<i class="iconfont iconiconfontshanchu1"></i>
|
||
|
|
</view>
|
||
|
|
<!-- 商品 -->
|
||
|
|
<view
|
||
|
|
class="carrier"
|
||
|
|
:class="[
|
||
|
|
theIndex === index ? 'open' : oldIndex === index ? 'close' : ''
|
||
|
|
]"
|
||
|
|
@touchstart="touchStart(index, $event)"
|
||
|
|
@touchmove="touchMove(index, $event)"
|
||
|
|
@touchend="touchEnd(index, $event)"
|
||
|
|
>
|
||
|
|
<view class="notify-wrapper">
|
||
|
|
<view class="title in1line">{{item.title}}</view>
|
||
|
|
<view class="content in2line">{{item.title}}</view>
|
||
|
|
<view class="time">{{item.createTime }}</view>
|
||
|
|
<uni-tag
|
||
|
|
class="type"
|
||
|
|
type="error"
|
||
|
|
:text="item.delFlag | notifyTypeFilter"
|
||
|
|
size="small"
|
||
|
|
/>
|
||
|
|
<view class="un-read" :class="'bg-'+themeColor.name" v-if="item.isRead.toString() === '0'"></view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<rf-load-more v-if="notifyList.length > 0" :status="loadingType" />
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<!--消息为空-->
|
||
|
|
<rf-empty
|
||
|
|
:bottom="bottom"
|
||
|
|
info="您还没有推送消息"
|
||
|
|
v-if="notifyList.length === 0 && hasLogin"
|
||
|
|
></rf-empty>
|
||
|
|
<view v-if="!hasLogin" class="notify-empty">
|
||
|
|
<text class="iconfont iconxiaoxi-" :class="'text-'+themeColor.name"></text>
|
||
|
|
<view class="empty-tips">
|
||
|
|
暂未登录
|
||
|
|
<view class="navigator" :class="'text-'+themeColor.name" @tap="navToLogin('/pages/public/logintype')"
|
||
|
|
>登录/注册 ></view
|
||
|
|
>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
<script>
|
||
|
|
import rfLoadMore from '@/components/rf-load-more/rf-load-more';
|
||
|
|
import { notifyIndex, notifyRead, notifyClearAll } from '@/api/userInfo';
|
||
|
|
|
||
|
|
import moment from '@/common/moment';
|
||
|
|
import mConstDataConfig from '@/config/constData.config';
|
||
|
|
import { mapMutations } from 'vuex';
|
||
|
|
export default {
|
||
|
|
components: { rfLoadMore },
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
notifyList: [],
|
||
|
|
logo: this.$mSettingConfig.appLogo,
|
||
|
|
loadingType: 'more',
|
||
|
|
pageNum :0,
|
||
|
|
hasLogin: false,
|
||
|
|
list: [
|
||
|
|
{ title: '评论', logo: this.$mSettingConfig.appLogo },
|
||
|
|
{ title: '粉丝', logo: this.$mSettingConfig.appLogo },
|
||
|
|
{ title: '点赞', logo: this.$mSettingConfig.appLogo }
|
||
|
|
],
|
||
|
|
// 控制滑动效果
|
||
|
|
theIndex: null,
|
||
|
|
oldIndex: null
|
||
|
|
};
|
||
|
|
},
|
||
|
|
filters: {
|
||
|
|
time(val) {
|
||
|
|
return moment(val * 1000).format('YYYY-MM-DD HH:mm:ss');
|
||
|
|
},
|
||
|
|
notifyTypeFilter(val) {
|
||
|
|
return mConstDataConfig.notifyTypeList[val].content;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
onLoad() {
|
||
|
|
this.initData();
|
||
|
|
},
|
||
|
|
computed: {
|
||
|
|
bottom () {
|
||
|
|
let bottom = 0;
|
||
|
|
/* #ifdef H5 */
|
||
|
|
bottom = 90;
|
||
|
|
/* #endif */
|
||
|
|
return bottom;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
// 下拉刷新
|
||
|
|
onPullDownRefresh() {
|
||
|
|
this.pageNum = 0;
|
||
|
|
this.notifyList.length = 0;
|
||
|
|
this.getProductList('refresh', {});
|
||
|
|
},
|
||
|
|
// 加载更多
|
||
|
|
onReachBottom() {
|
||
|
|
if (this.loadingType === 'nomore') return;
|
||
|
|
this.pageNum++
|
||
|
|
this.getProductList();
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
...mapMutations(['setNotifyNum']),
|
||
|
|
// 数据初始化
|
||
|
|
initData() {
|
||
|
|
this.hasLogin = this.$mStore.getters.hasLogin;
|
||
|
|
this.pageNum = 0;
|
||
|
|
let params = {};
|
||
|
|
this.getProductList();
|
||
|
|
},
|
||
|
|
// 跳转详情
|
||
|
|
async navTo(item) {
|
||
|
|
await this.$http
|
||
|
|
.get(`${notifyRead}`, {
|
||
|
|
id: item.id
|
||
|
|
})
|
||
|
|
.then(r => {
|
||
|
|
if(item.delFlag=='1'){
|
||
|
|
let route='/pages/user/account/integral';
|
||
|
|
this.$mRouter.push({ route });
|
||
|
|
}
|
||
|
|
if(item.delFlag=='2'){
|
||
|
|
let route='/pages/user/coupon/coupon';
|
||
|
|
this.$mRouter.push({ route });
|
||
|
|
}
|
||
|
|
if(item.delFlag=='3' || item.delFlag=='4' || item.delFlag=='5'){
|
||
|
|
let route='/pages/order/detail?orderCode='+item.content;
|
||
|
|
this.$mRouter.push({ route });
|
||
|
|
}
|
||
|
|
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
},
|
||
|
|
async clear(item) {
|
||
|
|
await this.$http
|
||
|
|
.get(`${notifyClearAll}`, {
|
||
|
|
|
||
|
|
})
|
||
|
|
.then(r => {
|
||
|
|
this.$mRouter.reLaunch({
|
||
|
|
route: '/pages/profile/profile'
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
},
|
||
|
|
async handleClearNotify(id) {
|
||
|
|
await this.$http
|
||
|
|
.get(`${notifyRead}`, {
|
||
|
|
id: id
|
||
|
|
})
|
||
|
|
.then(r => {
|
||
|
|
if(item.delFlag=='1'){
|
||
|
|
let route='/pages/user/account/integral';
|
||
|
|
this.$mRouter.push({ route });
|
||
|
|
}
|
||
|
|
if(item.delFlag=='2'){
|
||
|
|
let route='/pages/user/coupon/coupon';
|
||
|
|
this.$mRouter.push({ route });
|
||
|
|
}
|
||
|
|
if(item.delFlag=='3' || item.delFlag=='4' || item.delFlag=='5'){
|
||
|
|
let route='/pages/order/detail?orderCode='+item.orderCode;
|
||
|
|
this.$mRouter.push({ route });
|
||
|
|
}
|
||
|
|
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
},
|
||
|
|
// 获取商品列表
|
||
|
|
async getProductList(type) {
|
||
|
|
console.log('获取商品列表')
|
||
|
|
await this.$http
|
||
|
|
.get(`${notifyIndex}`, {
|
||
|
|
...this.productParams,
|
||
|
|
pageNum: this.pageNum
|
||
|
|
})
|
||
|
|
.then(async r => {
|
||
|
|
console.log(r)
|
||
|
|
this.loading = false;
|
||
|
|
if (type === 'refresh') {
|
||
|
|
uni.stopPullDownRefresh();
|
||
|
|
}
|
||
|
|
console.log(r)
|
||
|
|
if(r.list){
|
||
|
|
this.loadingType = r.list.length === 10 ? 'more' : 'nomore';
|
||
|
|
this.notifyList = [...this.notifyList, ...r.list];
|
||
|
|
}
|
||
|
|
|
||
|
|
})
|
||
|
|
.catch(err => {
|
||
|
|
this.errorInfo = err;
|
||
|
|
this.loading = false;
|
||
|
|
if (type === 'refresh') {
|
||
|
|
uni.stopPullDownRefresh();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
},
|
||
|
|
// 通用跳转
|
||
|
|
navToLogin(route) {
|
||
|
|
this.$mRouter.push({ route });
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
<style lang="scss">
|
||
|
|
page {
|
||
|
|
background-color: $page-color-base;
|
||
|
|
}
|
||
|
|
.notify {
|
||
|
|
.header {
|
||
|
|
width: 100%;
|
||
|
|
padding-left: $font-lg;
|
||
|
|
height: 100upx;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
position: fixed;
|
||
|
|
top: 0;
|
||
|
|
z-index: 10;
|
||
|
|
background-color: #fff;
|
||
|
|
/* #ifdef APP-PLUS */
|
||
|
|
top: var(--status-bar-height);
|
||
|
|
/* #endif */
|
||
|
|
.title {
|
||
|
|
font-size: 36upx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.place {
|
||
|
|
background-color: #ffffff;
|
||
|
|
height: 100upx;
|
||
|
|
/* #ifdef APP-PLUS */
|
||
|
|
margin-top: var(--status-bar-height);
|
||
|
|
/* #endif */
|
||
|
|
}
|
||
|
|
.notify-list {
|
||
|
|
.read {
|
||
|
|
text-align: right;
|
||
|
|
margin-right: $spacing-base;
|
||
|
|
margin-top: $spacing-base;
|
||
|
|
margin-bottom: $spacing-sm;
|
||
|
|
text {
|
||
|
|
margin-left: $spacing-base;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.row {
|
||
|
|
width: calc(94%);
|
||
|
|
height: calc(22vw + 40upx);
|
||
|
|
margin: 0 auto $spacing-base;
|
||
|
|
border-radius: 15upx;
|
||
|
|
box-shadow: 0upx 5upx 20upx rgba(0, 0, 0, 0.1);
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
position: relative;
|
||
|
|
overflow: hidden;
|
||
|
|
z-index: 4;
|
||
|
|
border: 0;
|
||
|
|
.menu {
|
||
|
|
.iconfont {
|
||
|
|
color: #fff;
|
||
|
|
font-size: 60upx;
|
||
|
|
}
|
||
|
|
position: absolute;
|
||
|
|
width: 29%;
|
||
|
|
height: 100%;
|
||
|
|
right: 0;
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
color: #fff;
|
||
|
|
z-index: 2;
|
||
|
|
}
|
||
|
|
.carrier {
|
||
|
|
@keyframes showMenu {
|
||
|
|
0% {
|
||
|
|
transform: translateX(0);
|
||
|
|
}
|
||
|
|
100% {
|
||
|
|
transform: translateX(-30%);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
@keyframes closeMenu {
|
||
|
|
0% {
|
||
|
|
transform: translateX(-30%);
|
||
|
|
}
|
||
|
|
100% {
|
||
|
|
transform: translateX(0);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
&.open {
|
||
|
|
animation: showMenu 0.25s linear both;
|
||
|
|
}
|
||
|
|
&.close {
|
||
|
|
animation: closeMenu 0.15s linear both;
|
||
|
|
}
|
||
|
|
background-color: #fff;
|
||
|
|
position: absolute;
|
||
|
|
width: 100%;
|
||
|
|
padding: 0 0;
|
||
|
|
height: 100%;
|
||
|
|
z-index: 3;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.notify-wrapper {
|
||
|
|
background-color: $color-white;
|
||
|
|
width: 100%;
|
||
|
|
padding: $spacing-base $spacing-lg $spacing-base 80upx;
|
||
|
|
margin: $spacing-base 0 0;
|
||
|
|
border-radius: 15upx;
|
||
|
|
position: relative;
|
||
|
|
.title {
|
||
|
|
font-size: $font-lg;
|
||
|
|
color: $font-color-dark;
|
||
|
|
font-weight: 500;
|
||
|
|
margin: 0 0 $spacing-sm;
|
||
|
|
}
|
||
|
|
.content {
|
||
|
|
font-size: $font-sm;
|
||
|
|
color: $font-color-base;
|
||
|
|
height: 75upx;
|
||
|
|
line-height: 36upx;
|
||
|
|
}
|
||
|
|
.time {
|
||
|
|
font-size: $font-base;
|
||
|
|
color: $font-color-light;
|
||
|
|
}
|
||
|
|
.type {
|
||
|
|
position: absolute;
|
||
|
|
top: 26upx;
|
||
|
|
left: -10upx;
|
||
|
|
border: none;
|
||
|
|
font-size: $font-sm;
|
||
|
|
opacity: 0.8;
|
||
|
|
}
|
||
|
|
.un-read {
|
||
|
|
display: inline-block;
|
||
|
|
width: 12upx;
|
||
|
|
height: 12upx;
|
||
|
|
border-radius: 50%;
|
||
|
|
position: absolute;
|
||
|
|
top: 32upx;
|
||
|
|
right: 30upx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.notify-empty {
|
||
|
|
position: fixed;
|
||
|
|
left: 0;
|
||
|
|
top: 0;
|
||
|
|
width: 100%;
|
||
|
|
height: 100vh;
|
||
|
|
padding-bottom: 100upx;
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
flex-direction: column;
|
||
|
|
align-items: center;
|
||
|
|
background: #fff;
|
||
|
|
.iconfont {
|
||
|
|
font-size: $font-lg + 100upx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.empty-tips {
|
||
|
|
display: flex;
|
||
|
|
font-size: $font-sm + 2upx;
|
||
|
|
color: $font-color-disabled;
|
||
|
|
|
||
|
|
.navigator {
|
||
|
|
margin-left: 16upx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|