sugarpark-mini-program/components/tui-chat/message-elements/system-message/index.vue

<template>
	<view>
		<view v-if="message.payload.operationType === 1" class="card handle">
			<view>
				<view class="time">{{ messageTime }}</view>
				{{ renderDom }}
			</view>
			<view class="choose"><view class="button" @tap="handleClick">处理</view></view>
		</view>
		<view class="card" v-else>
			<view class="time">{{ messageTime }}</view>
			{{ renderDom }}
		</view>
	</view>
</template>

<script>
import { parseGroupSystemNotice } from '../../../base/message-facade';
import { caculateTimeago } from '../../../base/common';

export default {
	data() {
		return {
			// message: {},
			messageTime: '',
			renderDom: ''
		};
	},

	components: {},
	props: {
		message: {
			type: Object
		}
	},
	watch: {
		message: {
			handler: function(newVal) {
				this.messageTime=caculateTimeago(newVal.time * 1000);
				this.renderDom=parseGroupSystemNotice(newVal);
				// this.setData({
				// 	messageTime: caculateTimeago(newVal.time * 1000),
				// 	renderDom: parseGroupSystemNotice(newVal)
				// });
			},
			immediate: true,
			deep: true
		}
	},

	methods: {
		handleClick() {
			uni.showActionSheet({
				itemList: ['同意', '拒绝'],
				success: res => {
					const option = {
						handleAction: 'Agree',
						handleMessage: '欢迎进群',
						message: this.message
					};

					if (res.tapIndex === 1) {
						option.handleAction = 'Reject';
						option.handleMessage = '拒绝申请';
					}

					uni.$TUIKit
						.handleGroupApplication(option)
						.then(() => {
							uni.showToast({
								title: option.handleAction === 'Agree' ? '已同意申请' : '已拒绝申请'
							});
						})
						.catch(error => {
							uni.showToast({
								title: error.message || '处理失败',
								icon: 'none'
							});
						});
				}
			});
		}
	}
};
</script>
<style scoped>
@import './index.css';
</style>