feat:留言板组件封装
This commit is contained in:
JiXinHui
parent
be14015565
commit
0f23391c74
|
|
@ -1,67 +1,65 @@
|
||||||
<template>
|
<template>
|
||||||
<view class="message-wrapper">
|
<view class="message-wrapper">
|
||||||
<u-swipe-action>
|
<u-swipe-action
|
||||||
<u-swipe-action-item
|
:index="itemIndex"
|
||||||
:options="swipeOptions"
|
:show="item.show"
|
||||||
:show="item.show"
|
:options="swipeOptions"
|
||||||
:index="itemIndex"
|
@click="handleSwipeClick"
|
||||||
@click="handleSwipeClick"
|
@open="handleSwipeOpen"
|
||||||
@open="(e) => handleSwipeOpen(e)"
|
@close="handleSwipeClose"
|
||||||
@close="(e) => handleSwipeClose(e)"
|
@content-click="closeSwipe"
|
||||||
@content-click="closeSwipe"
|
:btn-width="80"
|
||||||
:btn-width="80"
|
:disabled="false"
|
||||||
:disabled="false"
|
>
|
||||||
>
|
<view class="message-item">
|
||||||
<view class="message-item">
|
<view class="message-header">
|
||||||
<view class="message-header">
|
<view class="user-info">
|
||||||
<view class="user-info">
|
<image class="avatar" :src="item.avatar || defaultAvatar"></image>
|
||||||
<image class="avatar" :src="item.avatar || defaultAvatar"></image>
|
<text class="username">{{ item.username }}</text>
|
||||||
<text class="username">{{ item.username }}</text>
|
</view>
|
||||||
</view>
|
<view class="message-time">{{ item.time }}</view>
|
||||||
<view class="message-time">{{ item.time }}</view>
|
</view>
|
||||||
|
|
||||||
|
<view class="message-content">
|
||||||
|
<view class="question">
|
||||||
|
<view class="question-icon">问</view>
|
||||||
|
<view class="question-text">{{ item.question }}</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<view class="message-content">
|
<view class="reply-button" @click.stop="onReply" v-if="!item.reply">
|
||||||
<view class="question">
|
<u-icon name="chat" color="#4a6cf7" size="16"></u-icon>
|
||||||
<view class="question-icon">问</view>
|
<text>回复</text>
|
||||||
<view class="question-text">{{ item.question }}</view>
|
</view>
|
||||||
</view>
|
|
||||||
|
|
||||||
<view class="reply-button" @click.stop="onReply" v-if="!item.reply">
|
<view class="reply-content" v-if="item.reply">
|
||||||
<u-icon name="chat" color="#4a6cf7" size="16"></u-icon>
|
<view class="reply-header">
|
||||||
<text>回复</text>
|
<view class="reply-icon">答</view>
|
||||||
</view>
|
<view class="reply-info">
|
||||||
|
<text>{{ item.replyUser }}</text>
|
||||||
<view class="reply-content" v-if="item.reply">
|
|
||||||
<view class="reply-header">
|
|
||||||
<view class="reply-icon">答</view>
|
|
||||||
<view class="reply-info">
|
|
||||||
<text>{{ item.replyUser }}</text>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<view class="reply-text" :class="{ expanded: item.expanded }">{{
|
|
||||||
item.reply
|
|
||||||
}}</view>
|
|
||||||
<view
|
|
||||||
class="expand-button"
|
|
||||||
v-if="item.reply.length > 100"
|
|
||||||
@click.stop="toggleExpand"
|
|
||||||
>
|
|
||||||
{{ item.expanded ? "收起" : "展开" }}
|
|
||||||
<u-icon
|
|
||||||
:name="item.expanded ? 'arrow-up' : 'arrow-down'"
|
|
||||||
size="12"
|
|
||||||
></u-icon>
|
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
<view class="reply-text" :class="{ expanded: item.expanded }">{{
|
||||||
<view class="reply-button" @click.stop="onReply" v-if="item.reply">
|
item.reply
|
||||||
<u-icon name="chat" color="#4a6cf7" size="16"></u-icon>
|
}}</view>
|
||||||
<text>回复</text>
|
<view
|
||||||
|
class="expand-button"
|
||||||
|
v-if="item.reply.length > 100"
|
||||||
|
@click.stop="toggleExpand"
|
||||||
|
>
|
||||||
|
{{ item.expanded ? "收起" : "展开" }}
|
||||||
|
<u-icon
|
||||||
|
:name="item.expanded ? 'arrow-up' : 'arrow-down'"
|
||||||
|
size="12"
|
||||||
|
></u-icon>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view></u-swipe-action-item
|
|
||||||
>
|
<view class="reply-button" @click.stop="onReply" v-if="item.reply">
|
||||||
|
<u-icon name="chat" color="#4a6cf7" size="16"></u-icon>
|
||||||
|
<text>回复</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
</u-swipe-action>
|
</u-swipe-action>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -100,15 +98,18 @@ export default {
|
||||||
methods: {
|
methods: {
|
||||||
handleSwipeClick(e) {
|
handleSwipeClick(e) {
|
||||||
const { index } = e; // 点击的按钮索引
|
const { index } = e; // 点击的按钮索引
|
||||||
|
|
||||||
if (index === 0) {
|
if (index === 0) {
|
||||||
// 删除按钮
|
// 删除按钮
|
||||||
this.$emit("delete", this.itemIndex);
|
this.$emit("delete", this.itemIndex);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
handleSwipeOpen(e) {
|
handleSwipeOpen(e) {
|
||||||
|
// uView 1.x的事件参数格式与2.x不同
|
||||||
this.$emit("open-swipe", this.itemIndex);
|
this.$emit("open-swipe", this.itemIndex);
|
||||||
},
|
},
|
||||||
handleSwipeClose(e) {
|
handleSwipeClose(e) {
|
||||||
|
// uView 1.x的事件参数格式与2.x不同
|
||||||
this.item.show = false;
|
this.item.show = false;
|
||||||
},
|
},
|
||||||
closeSwipe() {
|
closeSwipe() {
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue