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>
|