assess-app/page_task/task_details/module/record.vue

<template>
	<view class="text-color-12">
		<view class="sys-background-fff m-20 p-20 r-20" v-for="(item,index) in 2" :key="index">
			<view class="record-box row-justify-sb">
				<view class="row-c">
					<image class="wh-80" src="/static/img/index/index-avatar.png" mode="aspectFill"></image>
					<view class="column m-l16">
						<text class="size-26 sys-weight-600">章三</text>
						<text class="size-24 text-color-999">总经理</text>
					</view>
				</view>
				<view class="reply-box size-24">
					<view class="reply-top size-24"></view>
					<view class="reply-buttom size-24" @click="onSendChat">回复</view>
				</view>
			</view>
			<view class="row m-t20 ">
				<view class="empty-box"></view>
				<view class="m-l16 size-26 flex">
					<!-- 自己发送 -->
					<text> 同意，利息2分。借款1个月，跟投两万。</text>
					<view class="image-box">
						<image class="reply-img wh-60 m-t20 r-10 m-r20" src="/static/img/logo.png" mode="aspectFill"
							v-for="(item,index) in 5" :key="index"></image>
					</view>
					<!-- 文件类型 -->
					<view class="sys-from-background-color p-20 r-20 m-t20">
						<view class="file-item row-c m-b20" v-for="(item,index) in 3" :key="index">
							<image class="wh-45 m-r20" src="/static/img/task-details/icon-pdf.png" mode="aspectFill">
							</image>
							<text class="size-24 color-111827">资金证明资料.PDF</text>
						</view>
					</view>
					<!-- 1对1回复 -->
					<view class="sys-from-background-color p-20 m-t20 r-20">
						<view class="">
							<text class="color-00A775">Administrator</text><text
								class="m-lr10 text-color-666">回复</text><text class="color-00A775">隋成哲:</text>
							<view class="">
								<view class="m-t16">可以</view>
								<view class="image-box">
									<image class="reply-img wh-60 m-t20 r-10 m-r20" src="/static/img/logo.png"
										mode="aspectFill" v-for="(item,index) in 5" :key="index"></image>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<uni-popup background-color="#fff" ref="popup" type="bottom" borderRadius="10px 10px 0 0"
			@touchmove.stop.prevent="moveHandle">
			<view class="page-env-160">
				<view class="row-justify-sb center p-lr30 p-t30">
					<view class="wh-25"></view>
					<text class="size-30 sys-weight-600">任务反馈</text>
					<image class="wh-25" src="/static/img/task-details/close.png" mode="" @click="onClose"></image>
				</view>
				<SendChat is_button></SendChat>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import SendChat from "./send_chat.vue"

	export default {
		components: {
			SendChat
		},
		props: {

		},
		data() {
			return {}
		},
		methods: {
			moveHandle() {
				return false
			},
			onSendChat() {
				this.$refs.popup.open('bottom')
			},
			onClose() {
				this.$refs.popup.close('bottom')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.record-box {


		.reply-box {
			position: relative;

		}

		.reply-top {
			width: 98rpx;
			height: 45rpx;
			background: #0FB160;
			border-radius: 6rpx;
			opacity: 0.1;
		}

		.reply-buttom {
			width: 98rpx;
			height: 45rpx;
			line-height: 45rpx;
			text-align: center;
			position: absolute;
			top: 0;
			color: #0FB160;
		}
	}

	.empty-box {
		width: 80rpx;
	}

	.image-box {
		display: flex;
		flex-wrap: wrap;

		.reply-img {
			width: 130rpx;
			height: 130rpx;
			display: block;
		}
	}

	.file-item:last-child {
		margin-bottom: 0;
	}
</style>