134 lines
4.3 KiB
Vue
134 lines
4.3 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-comment-text-outline</v-icon>
|
|
</v-btn>
|
|
|
|
<!-- 删除 -->
|
|
<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 relative>
|
|
<v-card raised>
|
|
<v-img src="https://cdn.vuetifyjs.com/images/cards/docks.jpg"></v-img>
|
|
<v-card-title>{{current.title}}</v-card-title>
|
|
<v-card-subtitle>{{current.create_time}}</v-card-subtitle>
|
|
<v-card-text>{{current.content}}</v-card-text>
|
|
<v-card-text>{{current.total_addr}} - {{current.detail_addr}}</v-card-text>
|
|
<v-card-text v-if="current.contact_content">联系方式 - {{current.contact_content}}</v-card-text>
|
|
</v-card>
|
|
</v-container>
|
|
<v-container style="padding-bottom: 100px;">
|
|
<p class="subtitle-1">评论区</p>
|
|
<v-row no-gutters>
|
|
<v-col cols="6" xs="6" sm="6" md="4" lg="3">
|
|
<v-card shaped class="ma-2">
|
|
<v-card-title>{{current.user_info.nick}}</v-card-title>
|
|
<v-card-subtitle>{{current.create_time}}</v-card-subtitle>
|
|
<v-card-text>{{current.content}}</v-card-text>
|
|
</v-card>
|
|
</v-col>
|
|
<v-col cols="6" xs="6" sm="6" md="4" lg="3">
|
|
<v-card shaped class="ma-2">
|
|
<v-card-title>{{current.user_info.nick}}</v-card-title>
|
|
<v-card-subtitle>{{current.create_time}}</v-card-subtitle>
|
|
<v-card-text>{{current.content}}</v-card-text>
|
|
</v-card>
|
|
</v-col>
|
|
<v-col cols="6" xs="6" sm="6" md="4" lg="3">
|
|
<v-card shaped class="ma-2">
|
|
<v-card-title>{{current.user_info.nick}}</v-card-title>
|
|
<v-card-subtitle>{{current.create_time}}</v-card-subtitle>
|
|
<v-card-text>{{current.content}}</v-card-text>
|
|
</v-card>
|
|
</v-col>
|
|
<v-col cols="6" xs="6" sm="6" md="4" lg="3">
|
|
<v-card shaped class="ma-2">
|
|
<v-card-title>{{current.user_info.nick}}</v-card-title>
|
|
<v-card-subtitle>{{current.create_time}}</v-card-subtitle>
|
|
<v-card-text>{{current.content}}</v-card-text>
|
|
</v-card>
|
|
</v-col>
|
|
<v-col cols="6" xs="6" sm="6" md="4" lg="3">
|
|
<v-card shaped class="ma-2">
|
|
<v-card-title>{{current.user_info.nick}}</v-card-title>
|
|
<v-card-subtitle>{{current.create_time}}</v-card-subtitle>
|
|
<v-card-text>{{current.content}}</v-card-text>
|
|
</v-card>
|
|
</v-col>
|
|
</v-row>
|
|
|
|
</v-container>
|
|
</v-sheet>
|
|
</v-sheet>
|
|
</template>
|
|
|
|
<script>
|
|
// @ is an alias to /src
|
|
import { mapState, mapActions } from "vuex";
|
|
export default {
|
|
name: "Detail",
|
|
props: ["closeBottomSheet", "content"],
|
|
data: () => {
|
|
return {
|
|
loading_switch: false,
|
|
current: null
|
|
};
|
|
},
|
|
computed: {
|
|
...mapState(["bg_img_url"])
|
|
},
|
|
methods: {
|
|
init() {
|
|
this.current = {
|
|
title: "我是挺长的一段标题",
|
|
content:
|
|
"我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容",
|
|
create_time: "2020-01-02",
|
|
img_url: this.bg_img_url,
|
|
total_addr: "长理东区",
|
|
detail_addr: "南研楼1213",
|
|
contact_content: "d",
|
|
good_type: "lost",
|
|
good_id: "1234",
|
|
comment: [],
|
|
user_info: {
|
|
nick: "嘤嘤嘤",
|
|
openid: "12345"
|
|
}
|
|
};
|
|
}
|
|
},
|
|
created() {
|
|
this.init();
|
|
},
|
|
activated() {
|
|
console.log("activated");
|
|
},
|
|
mounted() {}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
</style> |