|
|
@@ -0,0 +1,283 @@
|
|
|
+<template>
|
|
|
+ <div class="contents" v-loading="loading">
|
|
|
+ <div class="grxq">
|
|
|
+ <div class="top">
|
|
|
+ <div><audio controls autoplay loop src="https://data2.rrxh5.cc//2015/09/01/1441073275128.mp3">您的浏览器不支持 audio 标签。</audio></div>
|
|
|
+ <div class="name">
|
|
|
+ {{ user.name||'无名氏' }}
|
|
|
+ <div class="date">{{ user.birthday }}</div>
|
|
|
+ </div>
|
|
|
+ <img :src="user.avatar?baseUrl + user.avatar:'https://file2.rrxh5.cc/g2/c1/2018/04/05/1522926275241.jpg@!user_image_200x1'" />
|
|
|
+ <div class="clearfix"></div>
|
|
|
+ </div>
|
|
|
+ <!--个人详情-->
|
|
|
+ <div class="item" v-for="(item, index) in list">
|
|
|
+ <div class="title">{{ item.title }}</div>
|
|
|
+ <div class="desc">
|
|
|
+ <div class="c">{{ item.cotents }}</div>
|
|
|
+ <div class="pic_list">
|
|
|
+ <img class="multiple" v-for="(it, index) in item.imgList" :src="baseUrl + it.url" />
|
|
|
+ <div class="clearfix"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="asd" v-if="list.length == 0">
|
|
|
+ <div style="margin-bottom: 30px;"> ta还没有添加个人生平</div>
|
|
|
+ <section class="wwei-editor">
|
|
|
+ <fieldset style="margin:0px;padding:5px;border:1px solid rgb(204,204,204);max-width:100%;color:rgb(62,62,62);line-height:24px;text-align:justify;box-shadow:rgb(165,165,165) 5px 5px 2px;background-color:rgb(250,250,250);">
|
|
|
+ <legend style="margin:0px;padding:0px;text-align:left;margin-left:20px;width:auto;">
|
|
|
+ <strong>
|
|
|
+ <strong style="background-color:rgb(255,255,245);color:rgb(102,102,102);line-height:20px">
|
|
|
+ <span
|
|
|
+ class="wweibrush"
|
|
|
+ data-brushtype="text"
|
|
|
+ style="background-color:red;border-bottom-left-radius:3em 1em;border-bottom-right-radius:0.5em 2em;border-top-left-radius:0.5em 4em;border-top-right-radius:3em 1em;box-shadow:rgb(165,165,165) 4px 4px 2px;color:white;max-width:100%;padding:4px 10px;text-align:justify"
|
|
|
+ >
|
|
|
+ 祭扫·怀念
|
|
|
+ </span>
|
|
|
+ </strong>
|
|
|
+ </strong>
|
|
|
+
|
|
|
+ </legend>
|
|
|
+ <section class="wweibrush" data-style="margin-top:2px;margin-bottom:0px;padding:0px;max-width:100%;min-height:1.5em;line-height:2em;font-weight:bold;">
|
|
|
+ <p style="font-size:14px;margin-top:0px;margin-bottom:0px;padding:0px;max-width:100%;min-height:1.5em;line-height:2em;">
|
|
|
+ 如果，你觉得此刻岁月静好，不要忘记这些离开的人，他们曾为此负重远行。今天，让我们为他们停下一瞬，闭上双眼，为这些离开的人，静静地默哀一分钟。
|
|
|
+ </p>
|
|
|
+ </section>
|
|
|
+ </fieldset>
|
|
|
+ </section>
|
|
|
+ </div>
|
|
|
+ <!--留言-->
|
|
|
+ <div style="margin-top: 10px;">
|
|
|
+ <el-table :data="messageOptions">
|
|
|
+ <el-table-column label="TA的留念" prop="name" width="80" />
|
|
|
+ <el-table-column prop="contents" />
|
|
|
+ </el-table>
|
|
|
+ <br />
|
|
|
+ <el-pagination
|
|
|
+ small
|
|
|
+ layout="prev, pager, next"
|
|
|
+ v-show="total > 0"
|
|
|
+ :page-size="queryParams.pageSize"
|
|
|
+ :current-page="queryParams.pageNum"
|
|
|
+ :total="total"
|
|
|
+ @size-change="handleSizeChange"
|
|
|
+ @current-change="handleCurrentChange"
|
|
|
+ />
|
|
|
+ <!--弹出留言-->
|
|
|
+ <el-drawer
|
|
|
+ :size="'80%'"
|
|
|
+ :wrapperClosable="false"
|
|
|
+ :close-on-press-escape="false"
|
|
|
+ :destroy-on-close="true"
|
|
|
+ :visible.sync="drawer"
|
|
|
+ :direction="'btt'"
|
|
|
+ :before-close="handleClose"
|
|
|
+ >
|
|
|
+ <div class="drawer__content" style="overflow:scroll">
|
|
|
+ <el-form ref="messageForm" :model="messageForm" :rules="rules">
|
|
|
+ <el-form-item label="姓名" prop="name" :label-width="'80px'">
|
|
|
+ <el-col :span="20"><el-input v-model="messageForm.name" placeholder="请输入您的姓名" /></el-col>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item :label-width="'80px'">
|
|
|
+ <el-radio-group size="small" v-model="messageForm.type" @change="tepyChange">
|
|
|
+ <el-radio-button :label="1">留言语</el-radio-button>
|
|
|
+ <el-radio-button :label="2">留念语</el-radio-button>
|
|
|
+ <el-radio-button :label="3">缅怀语</el-radio-button>
|
|
|
+ </el-radio-group>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item :label-width="'10px'">
|
|
|
+ <div class="box-card">
|
|
|
+ <el-table v-loading="loading" height="200" :border="true" :data="modelOptions" highlight-current-row @current-change="modelCurrentChange">
|
|
|
+ <el-table-column label="选择留言" prop="contents" />
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <div class="drawer__footer" style="text-align: center;"><el-button type="primary" @click="addMessages" :loading="loading">留言</el-button></div>
|
|
|
+ </div>
|
|
|
+ </el-drawer>
|
|
|
+ <!--弹出留言-->
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="add_btn" @click="drawer = true">留言</div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+import { messageListByUserId, allPersonalImg, getPersonal, allPersonalModel, getPersonalModel, addMessage, messageList, listProfiles } from '@/api/common/template';
|
|
|
+import { setToken } from '@/utils/auth';
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ loading: true,
|
|
|
+ drawer: false,
|
|
|
+ user: {},
|
|
|
+ list: [], //个人详情列表
|
|
|
+ baseUrl: process.env.VUE_APP_BASE_API,
|
|
|
+ messageForm: {
|
|
|
+ type: 1 //设置默认
|
|
|
+ },
|
|
|
+ messageOptions: [],
|
|
|
+ modelOptions: [],
|
|
|
+ // 总条数
|
|
|
+ total: 0,
|
|
|
+ // 查询参数
|
|
|
+ queryParams: {
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ userId: null
|
|
|
+ },
|
|
|
+ // 表单校验
|
|
|
+ rules: {
|
|
|
+ name: [{ required: true, message: '请输入姓名', trigger: 'blur' }]
|
|
|
+ }
|
|
|
+ };
|
|
|
+ },
|
|
|
+ mounted(e) {
|
|
|
+ this.queryParams.userId = this.$route.params.id;
|
|
|
+ listProfiles({ appUserId: this.$route.params.id }).then(res => {
|
|
|
+ console.log('zx:' + JSON.stringify(res));
|
|
|
+ this.list = res.profileList;
|
|
|
+ this.user = res.user;
|
|
|
+ // 留言
|
|
|
+ this.getModels(this.messageForm.type);
|
|
|
+ this.getMessageList();
|
|
|
+ this.messageForm.type = 1;
|
|
|
+ this.loading = false;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ getModels(type) {
|
|
|
+ getPersonalModel(type).then(res => {
|
|
|
+ this.modelOptions = res.data;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ modelCurrentChange(row) {
|
|
|
+ this.messageForm.contents = row.contents;
|
|
|
+ },
|
|
|
+ handleSizeChange: function(size) {
|
|
|
+ this.queryParams.pageSize = size;
|
|
|
+ this.getMessageList();
|
|
|
+ },
|
|
|
+ handleCurrentChange: function(currentPage) {
|
|
|
+ this.queryParams.pageNum = currentPage;
|
|
|
+ this.getMessageList();
|
|
|
+ },
|
|
|
+ getMessageList() {
|
|
|
+ this.loading = true;
|
|
|
+ messageListByUserId(this.queryParams).then(response => {
|
|
|
+ this.messageOptions = response.rows;
|
|
|
+ this.total = response.total;
|
|
|
+ this.loading = false;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ addMessages() {
|
|
|
+ this.loading = true;
|
|
|
+ this.messageForm.appUserId = this.$route.params.id;
|
|
|
+ addMessage(this.messageForm).then(response => {
|
|
|
+ if (response.code === 200) {
|
|
|
+ this.msgSuccess('留言成功');
|
|
|
+ this.loading = false;
|
|
|
+ this.drawer = false;
|
|
|
+ this.getMessageList();
|
|
|
+ }
|
|
|
+ });
|
|
|
+ this.loading = false;
|
|
|
+ },
|
|
|
+ handleOpen() {
|
|
|
+ this.drawer = true;
|
|
|
+ },
|
|
|
+ handleClose() {
|
|
|
+ this.drawer = false;
|
|
|
+ },
|
|
|
+ tepyChange(label) {
|
|
|
+ this.getModels(label);
|
|
|
+ }
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style lang="scss">
|
|
|
+//个人详情
|
|
|
+html {
|
|
|
+ filter: grayscale(100%);
|
|
|
+ -webkit-filter: grayscale(100%);
|
|
|
+ -moz-filter: grayscale(100%);
|
|
|
+ -ms-filter: grayscale(100%);
|
|
|
+ -o-filter: grayscale(100%);
|
|
|
+ filter: url('data:image/svg+xml;utf8,#grayscale');
|
|
|
+ filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
|
|
|
+ -webkit-filter: grayscale(1);
|
|
|
+}
|
|
|
+.grxq {
|
|
|
+ padding: 15px;
|
|
|
+ .top {
|
|
|
+ .name {
|
|
|
+ font-size: 35px;
|
|
|
+ float: left;
|
|
|
+ text-shadow: 2px 2px 2px grey;
|
|
|
+ margin-top: 30px;
|
|
|
+ .date {
|
|
|
+ font-size: 20px;
|
|
|
+ margin-top: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ img {
|
|
|
+ float: right;
|
|
|
+ width: 38%;
|
|
|
+ margin-top: 10px;
|
|
|
+ border-radius: 50%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .item {
|
|
|
+ margin-top: 25px;
|
|
|
+ .title {
|
|
|
+ padding-left: 7px;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ .desc {
|
|
|
+ padding: 10px;
|
|
|
+ background-color: #e9e9e9;
|
|
|
+ margin-top: 10px;
|
|
|
+ border-radius: 5px;
|
|
|
+ .c {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #787878;
|
|
|
+ }
|
|
|
+ //图片列表
|
|
|
+ .pic_list {
|
|
|
+ margin-top: 10px;
|
|
|
+ width: 100%;
|
|
|
+ img {
|
|
|
+ width: 75px;
|
|
|
+ min-height: 90px;
|
|
|
+ max-height: 90px;
|
|
|
+ border-radius: 3px;
|
|
|
+ float: left;
|
|
|
+ margin-right: 7px;
|
|
|
+ margin-top: 6px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .asd {
|
|
|
+ text-align: center;
|
|
|
+ padding: 50px 0px 30px 0px;
|
|
|
+ color: #787878;
|
|
|
+ }
|
|
|
+}
|
|
|
+.add_btn {
|
|
|
+ width: 50px;
|
|
|
+ height: 50px;
|
|
|
+ text-align: center;
|
|
|
+ position: fixed;
|
|
|
+ right: 14px;
|
|
|
+ bottom: 22px;
|
|
|
+ font-size: 16px;
|
|
|
+ line-height: 50px;
|
|
|
+ border-radius: 50%;
|
|
|
+ background-color: #607d8b;
|
|
|
+ color: white;
|
|
|
+ z-index: 111111;
|
|
|
+}
|
|
|
+</style>
|
xiaoshushu