109 lines
2.6 KiB
Vue
109 lines
2.6 KiB
Vue
<template>
|
|
<v-sheet class="fill-height" >
|
|
<!-- 标题栏 -->
|
|
<v-toolbar dark :src="bg_img_url">
|
|
<!-- 图片遮罩 -->
|
|
<template v-slot:img="{ props }">
|
|
<v-img v-bind="props" gradient="to top right, rgba(0,0,0,0.3), rgba(0,0,0,0.4)"></v-img>
|
|
</template>
|
|
|
|
<!-- 关闭按钮 -->
|
|
<v-btn icon @click="closeBottomSheet" :disabled="loading_switch">
|
|
<v-icon>mdi-close</v-icon>
|
|
</v-btn>
|
|
|
|
<!-- 标题 -->
|
|
<v-toolbar-title>我的消息</v-toolbar-title>
|
|
|
|
<v-spacer></v-spacer>
|
|
|
|
<!-- 关闭按钮 -->
|
|
<v-btn icon @click="closeBottomSheet" :disabled="loading_switch">
|
|
<v-icon>mdi-delete</v-icon>
|
|
</v-btn>
|
|
</v-toolbar>
|
|
|
|
<v-sheet class="fill-height overflow-y-auto">
|
|
<v-container fluid style="padding-bottom: 100px;">
|
|
<v-card class="ma-2 mb-5" shaped v-for="(item, i) in list" :key="i">
|
|
<v-list-item>
|
|
<v-list-item-avatar>
|
|
<v-icon :class="getColor(item.type)">{{getName(item.type)}}</v-icon>
|
|
</v-list-item-avatar>
|
|
<v-list-item-content>
|
|
<p class="subtitle-2">{{getContent(item.type)}}</p>
|
|
<div class="caption"></div>
|
|
</v-list-item-content>
|
|
</v-list-item>
|
|
</v-card>
|
|
</v-container>
|
|
</v-sheet>
|
|
</v-sheet>
|
|
</template>
|
|
|
|
<script>
|
|
// @ is an alias to /src
|
|
import { mapState, mapActions } from "vuex";
|
|
export default {
|
|
name: "Message",
|
|
props: ["closeBottomSheet", "list"],
|
|
data: () => {
|
|
return {
|
|
loading_switch:false,
|
|
};
|
|
},
|
|
computed: {
|
|
...mapState(["bg_img_url"])
|
|
},
|
|
methods: {
|
|
init() {},
|
|
|
|
// 获取icon的颜色
|
|
getColor(type) {
|
|
switch(type) {
|
|
case 1:
|
|
return 'blue--text'
|
|
case 2:
|
|
return 'light-blue--text'
|
|
case 3:
|
|
return 'green--text'
|
|
case 4:
|
|
return 'red--text'
|
|
}
|
|
},
|
|
// 获取icon的名称
|
|
getName(type) {
|
|
switch(type) {
|
|
case 1:
|
|
return 'mdi-comment-text-outline'
|
|
case 2:
|
|
return 'mdi-comment-processing-outline'
|
|
case 3:
|
|
return 'mdi-comment-check-outline'
|
|
case 4:
|
|
return 'mdi-comment-remove-outline'
|
|
}
|
|
},
|
|
// 获取消息内容
|
|
getContent(type) {
|
|
switch(type) {
|
|
case 1:
|
|
return '您有新的评论'
|
|
case 2:
|
|
return '您有新的回复'
|
|
case 3:
|
|
return '您发布的消息审核通过'
|
|
case 4:
|
|
return '您发布的消息审核未通过'
|
|
}
|
|
}
|
|
},
|
|
created() {
|
|
this.init();
|
|
},
|
|
mounted() {}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
</style> |