yixiang/pageA/chat.vue

<template>
	<view class="content">
		<u-navbar :title="other_user.name" placeholder autoBack>
			<view class="u-nav-right" slot="right">
				<u-icon name="more-dot-fill" color="#575B66" size="18" @click="show_menu = !show_menu"></u-icon>
				<view class="menu vflex" v-if="show_menu" @click.stop="show_menu = true">
					<view class="menu-item hflex acenter" @click="tolist">
						<u-icon name="clock" size="14" color="#555555"></u-icon>
						<view class="menu-text">聊天记录</view>
					</view>
					<view class="menu-item hflex acenter" @click="show_jubao = true">
						<image src="static/warn.png" mode="aspectFill"></image>
						<view class="menu-text">举报</view>
					</view>
				</view>
			</view>
		</u-navbar>
		<view class="list">
			<view class="list-item" v-for="(item,index) in list" :key="index">
				<view class="time">{{item.time}}</view>
				<view class=" hflex acenter jbetween">
					<image :src="other_user.avatar" style="margin-right: 12rpx;" mode="aspectFill"
						v-if="item.id == other_user.id"></image>
					<view v-else style="width: 68rpx;"></view>
					<view class="text" :style="item.id == user.id ? 'background: #00B0B0;color: #FFFFFF' : ''">
						{{item.content}}
					</view>
					<image :src="user.avatar" style="margin-left: 12rpx;" mode="aspectFill" v-if="item.id == user.id">
					</image>
					<view v-else style="width: 68rpx;"></view>
				</view>
			</view>
		</view>
		<view class="bottom hflex acenter jbetween">
			<u-input v-model="text" placeholder="输入消息" border="none"></u-input>
			<view class="btn" :class="text != '' ? 'btn2' : ''" @click="send">发送</view>
		</view>
		<u-popup :show="show_jubao" @close="toclose" mode="bottom" :round="10">
			<view class="popu">
				<view class="title hflex acenter jbetween">
					<text>内容描述</text>
					<u-icon name="close" color="#000000" size="14" @click="toclose"></u-icon>
				</view>
				<u--textarea v-model="jubao" placeholder="请对您举报的内容进行文字描述"></u--textarea>
				<view class="title">
					<text>辅助图片</text>
				</view>
				<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" :maxCount="9"
					width="160rpx" height="160rpx">
					<view class="upload-bg hflex acenter jcenter">
						<u-icon name="plus" color="#CCCCCC" size="20"></u-icon>
					</view>
				</u-upload>
				<view class="btn" :class="jubao != '' ? 'btn2' : ''" @click="submit">确定</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import $api from '@/static/js/api.js'
	export default {
		data() {
			return {
				user: {},
				other_user: {},
				list: [],
				text: '',
				show_menu: false,
				show_jubao: false,
				jubao: '',
				imgs: '',
				fileList1: [],
				chat_user_id: '',
				userid: '',
			}
		},
		onLoad(options) {
			this.chat_user_id = options.chat_user_id
			this.userid = uni.getStorageSync('userid')
			this.getdata()
		},
		onShow() {

		},
		onPullDownRefresh() {

		},
		onReachBottom() {

		},
		methods: {
			submit() {
				var that = this
				let image = []
				if(that.fileList1.length>0) {
					for(var i=0;i<that.fileList1.length;i++) {
						image.push(that.fileList1[i].url)
					}
				}
				$api.req({
					url: 'report',
					method: 'post',
					data: {
						source_type: 'chat',
						source_id: this.chat_user_id,
						content: this.jubao,
						images: image
					}
				}, function(res) {
					$api.info('举报成功')
					that.toclose()
				})
			},
			send() {
				var that = this
				$api.req({
					url: 'chat',
					method: 'post',
					data: {
						chat_user_id: this.chat_user_id,
						content: this.text
					}
				}, function(res) {
					$api.info('发送成功')
				})
			},
			getdata() {
				var that = this
				$api.req({
					url: 'chat/detail',
					data: {
						is_page: 1,
						page: 1,
						limit: 25,
						chat_user_id: this.chat_user_id
					}
				}, function(res) {
					that.list = res.data.list
				})
			},
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: 'http://192.168.2.21:7001/upload', // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						formData: {
							user: 'test'
						},
						success: (res) => {
							let data = JSON.parse(res.data)
							setTimeout(() => {
								resolve(data.data.url)
							}, 1000)
						}
					});
				})
			},
			toclose() {
				this.show_jubao = false
			},
			tolist() {
				uni.navigateTo({
					url: '/pageA/chat-list'
				})
			},
		}
	}
</script>

<style lang="scss">
	.content::v-deep {
		background: #FFFFFF;
		padding: 20rpx 28rpx;

		.popu {
			background: #FFFFFF;
			border-radius: 20rpx 20rpx 0rpx 0rpx;
			box-sizing: border-box;
			padding: 0 28rpx;

			.title {
				padding: 36rpx 0 28rpx;
				width: 100%;

				text {
					font-size: 32rpx;
					font-weight: 500;
					color: #333333;
				}
			}

			.u-textarea {
				width: 694rpx;
				height: 236rpx;
				background: #F5F5F5;
				border-radius: 12rpx;
				padding: 28rpx 20rpx !important;
				box-sizing: border-box;
				border: none;
			}

			.upload-bg {
				width: 160rpx;
				height: 160rpx;
				background: #F5F5F5;
				border-radius: 12rpx;
			}

			.btn2 {
				opacity: 1 !important;
			}

			.btn {
				margin: 156rpx 0 54rpx;
				width: 694rpx;
				height: 88rpx;
				background: #00B0B0;
				border-radius: 44rpx;
				opacity: 0.2;
				font-size: 32rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				line-height: 88rpx;
				text-align: center;
			}
		}

		.u-nav-right {
			position: relative;

			.menu {
				position: absolute;
				right: 0;
				top: 56rpx;
				width: 188rpx;
				height: 144rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 4rpx 20rpx -4rpx rgba(0, 0, 0, 0.2);
				border-radius: 8rpx;
				box-sizing: border-box;
				padding: 26rpx 24rpx 0;

				.menu-item {
					padding: 0 0 32rpx;

					image {
						width: 36rpx;
						height: 36rpx;
					}

					.menu-text {
						padding-left: 12rpx;
						font-size: 24rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						color: #555555;
					}
				}
			}
		}

		.bottom {
			border-top: 1px solid #E5E5E5;
			width: 100%;
			position: fixed;
			bottom: 0;
			left: 0;
			background: #FFFFFF;
			padding: 14rpx 28rpx 76rpx;
			box-sizing: border-box;

			.u-input {
				width: 528rpx !important;
				height: 76rpx;
				box-sizing: border-box;
				background: #F5F5F5;
				border-radius: 40rpx;
				padding: 18rpx 40rpx !important;
			}

			.btn2 {
				opacity: 1 !important;
			}

			.btn {
				margin-left: 20rpx;
				width: 146rpx;
				height: 76rpx;
				background: #00B0B0;
				border-radius: 40rpx;
				opacity: 0.5;
				font-size: 28rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				text-align: center;
				line-height: 76rpx;

			}
		}

		.list {
			.list-item {
				margin: 0 0 44rpx;

				.time {
					width: 100%;
					text-align: center;
					font-size: 26rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: #999999;
					padding-bottom: 24rpx;
				}

				image {
					width: 68rpx;
					height: 68rpx;
					border-radius: 50%;
				}

				.text {
					width: 512rpx;
					background: #F5F5F5;
					font-size: 28rpx;
					font-family: SFPro, SFPro;
					font-weight: 400;
					color: #333333;
					padding: 18rpx 28rpx;
					border-radius: 16rpx;
				}
			}
		}
	}
</style>