278 lines
6.8 KiB
Vue
278 lines
6.8 KiB
Vue
<template>
|
||
<div class="whole">
|
||
<div class="guanzhu" v-if="!is_subscribe && showTips">
|
||
<div :style="{color: Color}">订阅关注公众号，查看及时消息</div>
|
||
<div class="anniu">
|
||
<text @click="followSubscribe()">订阅</text>
|
||
<up-icon name="close" size="14" @click="showTips = false" />
|
||
</div>
|
||
</div>
|
||
|
||
<view class="row" v-for="(item, index) in messageList" :key="index" @click="viewMsg(item.type)">
|
||
<view class="icon">
|
||
<view class="img">
|
||
<text v-if="item.type == 1" class="iconfont icon-notice"></text>
|
||
<text v-else-if="item.type == 2" class="iconfont icon-set"></text>
|
||
<text v-else-if="item.type == 3" class="iconfont icon-gongdan"></text>
|
||
<text v-else-if="item.type == 4" class="iconfont icon-warn"></text>
|
||
<text v-else-if="item.type == 5" class="iconfont icon-gongzuotai"></text>
|
||
<text v-else-if="item.type == 6" class="iconfont icon-gonggaolan"></text>
|
||
<text v-else class="iconfont icon-notice"></text>
|
||
</view>
|
||
<view class="num" v-if="item.un_read_count">{{item.un_read_count > 99 ? '99+' : item.un_read_count}}</view>
|
||
</view>
|
||
<view class="box">
|
||
<view class="title">
|
||
<view class="tit">{{titObj[item.type]}}</view>
|
||
<view class="time">{{item.last_message && item.last_message.created_at && item.last_message.created_at.slice(0, 16)}}</view>
|
||
</view>
|
||
<view class="txt">{{item.last_message && item.last_message.content && item.last_message.content.title}}</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="row" @click="toJump('/pages/mine/other/grass')">
|
||
<view class="icon flex"><text class="iconfont icon-zhongcao3"></text></view>
|
||
<view class="box">
|
||
<view class="title">
|
||
<view class="tit">种草</view>
|
||
</view>
|
||
<view class="txt">好物分享</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="row" @click="toComplaint" v-if="role == 0">
|
||
<view class="icon flex"><up-icon name="info-circle" color="#333" :size="26" /></view>
|
||
<view class="box">
|
||
<view class="title">
|
||
<view class="tit">投诉与反馈</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="noMsg" v-if="!messageList.length && role !== 0">
|
||
<up-empty mode="message" icon="https://ct-upimg.yx090.com/g.ii090/images/sprite/empty/message.png" text="暂无消息"></up-empty>
|
||
</view>
|
||
|
||
<view v-if="messageList.length || role == 0" style="margin-top: 30rpx;">
|
||
<cf-cloud></cf-cloud>
|
||
</view>
|
||
|
||
</div>
|
||
|
||
<tabbar :chooseIndex="2" :num="cartNum" :msgNum="msgNum" />
|
||
|
||
</template>
|
||
|
||
<script>
|
||
import { get } from '@/api/request.js'
|
||
import { ref, reactive, toRefs } from 'vue'
|
||
import { userBind } from '@/components/common.js'
|
||
import tabbar from '@/components/tabbar/index.vue'
|
||
import { sp2 } from '@/components/img.js'
|
||
import { Style } from '@/utils/list.js'
|
||
import cfCloud from '@/components/cfCloud/index.vue'
|
||
|
||
export default {
|
||
components: {
|
||
tabbar,
|
||
cfCloud
|
||
},
|
||
setup() {
|
||
const data = reactive({
|
||
sp2: sp2,
|
||
cartNum: 0,
|
||
messageList: [],
|
||
msgNum: 0,
|
||
titObj: {
|
||
'1': '系统通知',
|
||
'2': '订单通知',
|
||
'3': '工单通知',
|
||
'4': '投诉通知',
|
||
'5': '平台通知',
|
||
'6': '公告栏'
|
||
},
|
||
is_subscribe: 0,
|
||
showTips: true,
|
||
Color: uni.getStorageSync('theme_color'),
|
||
bgColor: Style[uni.getStorageSync('theme_index') * 1].bgColor,
|
||
tagColor: Style[uni.getStorageSync('theme_index') * 1].tagColor,
|
||
qr_img: '',
|
||
role: uni.getStorageSync('role')
|
||
})
|
||
|
||
// 消息类型 1-系统通知 2-订单通知 3-工单通知 4-投诉通知
|
||
function getMsgNum() {
|
||
get('/api/v1/messages/count').then((res) => {
|
||
data.messageList = res.data.types || []
|
||
data.msgNum = res.data.total
|
||
uni.setStorageSync('msgNum', data.msgNum)
|
||
})
|
||
}
|
||
|
||
function viewMsg(type) {
|
||
let tit = data.titObj[type]
|
||
uni.navigateTo({
|
||
url: '/pages/mine/msg/list?tit=' + tit + '&type=' + type
|
||
})
|
||
}
|
||
|
||
const followSubscribe = () => {
|
||
uni.navigateTo({
|
||
url: '/pages/article/index'
|
||
})
|
||
}
|
||
|
||
function getUserInfo() {
|
||
get('/api/v1/shopScore/user').then((res) => {
|
||
data.is_subscribe = res.data.user && res.data.user.is_subscribe
|
||
uni.setStorageSync('subscribe', data.is_subscribe)
|
||
})
|
||
}
|
||
|
||
async function getQrCodeImg() {
|
||
await get('/api/v1/user/qrCode').then((res) => {
|
||
data.qr_img = res.data.qr_code
|
||
})
|
||
}
|
||
|
||
function toComplaint() {
|
||
uni.navigateTo({
|
||
url: '/pages/mine/msg/select'
|
||
})
|
||
}
|
||
|
||
function toJump(url) {
|
||
uni.navigateTo({
|
||
url: url
|
||
})
|
||
}
|
||
|
||
return {
|
||
...toRefs(data),
|
||
getMsgNum,
|
||
viewMsg,
|
||
followSubscribe,
|
||
getUserInfo,
|
||
getQrCodeImg,
|
||
toComplaint,
|
||
toJump
|
||
}
|
||
},
|
||
async onLoad() {
|
||
// await this.$onLaunched
|
||
},
|
||
onShow() {
|
||
this.cartNum = Number(uni.getStorageSync('cartNum')) || 0
|
||
this.getMsgNum()
|
||
this.getUserInfo()
|
||
if(this.role === 0) {
|
||
this.getQrCodeImg()
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.whole {
|
||
overflow: auto;
|
||
min-height: 100vh;
|
||
padding-bottom: 110rpx;
|
||
.row{
|
||
display: flex;
|
||
padding: 30rpx;
|
||
border-bottom: 1px solid #F2F2F2;
|
||
background-color: #fff;
|
||
justify-content: space-between;
|
||
.icon{
|
||
width: 48.5px;
|
||
height: 48.5px;
|
||
position: relative;
|
||
&.flex{
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background-color: #F2F2F2;
|
||
border-radius: 8rpx;
|
||
}
|
||
.img{
|
||
width: 100%;
|
||
height: 100%;
|
||
background-color: #F1F1F1;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border-radius: 10rpx;
|
||
.iconfont{
|
||
font-size: 24px;
|
||
color: #373536;
|
||
}
|
||
}
|
||
.num{
|
||
border-radius: 20rpx 20rpx 20rpx 0;
|
||
border: 1px solid #fff;
|
||
background-color: v-bind('tagColor');
|
||
font-size: 22rpx;
|
||
color: #fff;
|
||
padding: 6rpx 10rpx;
|
||
position: absolute;
|
||
top: -26rpx;
|
||
left: 100%;
|
||
margin-left: -18rpx;
|
||
line-height: 1;
|
||
}
|
||
.iconfont{
|
||
font-size: 24px;
|
||
color: #373536;
|
||
}
|
||
}
|
||
.box{
|
||
width: calc(100% - 130rpx);
|
||
.title{
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 16rpx;
|
||
.tit{
|
||
font-size: 32rpx;
|
||
color: #333;
|
||
width: calc(100% - 260rpx);
|
||
}
|
||
.time{
|
||
font-size: 24rpx;
|
||
color: #9D9D9D;
|
||
}
|
||
}
|
||
.txt{
|
||
font-size: 28rpx;
|
||
color: #9D9D9D;
|
||
}
|
||
}
|
||
}
|
||
|
||
.noMsg{
|
||
width: 100%;
|
||
height: calc(100vh - 64rpx);
|
||
padding-top: 20%;
|
||
box-sizing: border-box;
|
||
}
|
||
.guanzhu {
|
||
font-size: 26rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
background: v-bind('bgColor');
|
||
padding: 15rpx 30rpx;
|
||
.anniu {
|
||
display: flex;
|
||
text{
|
||
background: v-bind('Color');
|
||
border-radius: 8rpx;
|
||
color: #fff;
|
||
font-size: 24rpx;
|
||
padding: 5rpx 25rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|