cbz-sj/pages/mine/service/purOrder/msg.vue

<template>
	<view class="content">
		<view class="top">
			<view class="top_title">当前报价</view>
			<view class="vflex" v-if="offer.amounts">
				<block v-for="(item,index) in offer.amounts" :key="index">
					<view class="top_item hflex acenter">
						<view class="item_label">第{{index + 1}}次报价</view>
						<view class="text_red">{{item.amount}}</view>
					</view>
				</block>
			</view>
			<view class="vflex" v-if="offer.amount && !offer.amounts">
				<view class="top_item hflex acenter">
					<!-- <view class="item_label">第{{index + 1}}次报价</view> -->
					<view class="text_red">{{offer.amount}}</view>
				</view>
			</view>
			<view class="hflex acenter cell" v-if="offer.date">
				<view class="left">货期:</view>
				<view class="right">{{offer.date}}</view>
			</view>
			<view class="hflex acenter fwrap cell">
				<view class="left">产品介绍以及报价说明:</view>
				<view class="right">{{offer.desc}}</view>
			</view>
			<view class="hflex acenter cell">
				<view class="left">是否现货:</view>
				<view class="right">{{offer.is_have==0?'否':'是'}}</view>
			</view>
			<view class="top_title">图片及资质证明图片</view>
			<view class="hflex acenter fwrap">
				<block v-for="(item,index) in offer.images" :key="index">
					<image :src="item" class="img"></image>
				</block>
			</view>
		</view>
		<view class="list" id="list">
			<block v-for="(item,index) in pageList" :key="index">
				<view class="hflex acenter jend item" v-if="item.uuid2 == userId">
					<view class="message">{{item.content}}</view>
					<image :src="item.user?item.user.headimg:''" class="headimg"></image>
				</view>
				<view class="hflex acenter item" v-else>
					<image :src="item.user?item.user.headimg:''" class="headimg"></image>
					<view class="message message_left">{{item.content}}</view>
				</view>
			</block>
		</view>
		<view class="bottom hflex jbetween">
			<view class="bottom_left">
				<u-input v-model="message" shape="circle" placeholder="请输入信息..." border="none"></u-input>
			</view>
			<view class="bottom_btn hflex acenter jcenter" @click="send">立即回复</view>
		</view>
	</view>
</template>

<script>
	import $api from '@/static/js/api.js'
	var that = ''
	export default {
		data() {
			return {
				offer: {},
				message: '',
				pageList: [],
				type: '',
				id: '',
				offer_id: '',
				userId: '',
				tab: '',
			}
		},
		onLoad(options) {
			that = this
			that.id = options.id
			that.tab = options.tab
			that.userId = options.userid
			if(options.offer) {
				that.offer = JSON.parse(options.offer)
			}
			that.getList()
		},
		onReady() {
			that.scrollToBottom()
		},
		methods: {
			getList() {
				$api.req({
					url: '/data/api.business.Purchase/msg_get',
					data: {
						id: that.id,
						tab: that.tab,
						user_id: that.userId
					}
				}, function(res) {
					if(res.code == 1) {
						that.pageList = res.data
						console.log(that.pageList);
					}
				})
			},
			send() {
				if(that.message == "") {
					$api.info('不能发送空的内容')
				} else {
					$api.req({
						url: '/data/api.business.Purchase/msg_send',
						method: 'POST',
						data: {
							id: that.id,
							tab: that.tab,
							user_id: that.userId,
							content: that.message
						}
					}, function(res) {
						if(res.code == 1) {
							that.message = ""
							that.getList()
						} 
					})
				}
			},
			scrollToBottom() {
				uni.createSelectorQuery().select('#list').boundingClientRect(function(rect){
				  // 使页面滚动到底部
				  uni.pageScrollTo({
					scrollTop: rect.bottom
				  })
				}).exec()
			}
		},
	}
</script>

<style lang="scss" scoped>
	.content::v-deep {
		background: #F4F4F4;
		.top {
			width: 100%;
			// height: 300px;
			background: #FFFFFF;
			box-shadow: 0px 4rpx 32rpx 0px rgba(0,0,0,0.04);
			border-radius: 0px 0px 28rpx 28rpx;
			box-sizing: border-box;
			padding: 24rpx 30rpx 0;
			/* position: absolute;
			top: 0;
			left: 0; */
			.top_title {
				font-size: 28rpx;
				font-weight: 500;
				color: #222222;
				line-height: 40rpx;
				padding-bottom: 24rpx;
			}
			.top_item {
				width: 100%;
				height: 76rpx;
				background: #F4F4F4;
				border-radius: 16rpx;
				margin-bottom: 20rpx;
				box-sizing: border-box;
				padding: 0 20rpx;
				.item_label {
					font-size: 24rpx;
					font-weight: 500;
					color: #777777;
					line-height: 34rpx;
					padding-right: 28rpx;
				}
				.text_red {
					font-size: 28rpx;
					font-weight: 400;
					color: #FF3636;
					line-height: 34rpx;
				}
			}
			.cell {
				padding: 18rpx 0;
			}
			.left {
				font-size: 26rpx;
				font-weight: 400;
				color: #222222;
				line-height: 36rpx;
				padding-right: 20rpx;
			}
			.right {
				font-size: 26rpx;
				font-weight: 400;
				color: #222222;
				line-height: 36rpx;
			}
			.img {
				width: 200rpx;
				height: 200rpx;
				border-radius: 16rpx;
				margin: 0 16rpx 24rpx 0;
			}
			.img:nth-child(3n+3) {
				margin: 0 0 24rpx;
			}
		}
		.list {
			width: 100%;
			margin-bottom: 186rpx;
			box-sizing: border-box;
			padding: 0 30rpx;
			.item {
				margin-top: 32rpx;
				.message {
					max-width: 480rpx;
					background: #FFFFFF;
					border-radius: 4rpx 24rpx 24rpx 24rpx;
					box-sizing: border-box;
					padding: 18rpx 20rpx;
					font-size: 26rpx;
					font-weight: 400;
					color: #444444;
					line-height: 36rpx;
					margin: 0 20rpx 0 0;
				}
				.message_left {
					margin: 0 0 0 20rpx;
					border-radius: 24rpx 4rpx 24rpx 24rpx;
				}
				.headimg {
					width: 68rpx;
					height: 68rpx;
					border-radius: 50%;
				}
			}
		}
		.bottom {
			width: 100%;
			height: 166rpx;
			position: fixed;
			bottom: 0;
			z-index: 999;
			box-sizing: border-box;
			padding: 16rpx 30rpx 0;
			background: #FFFFFF;
			.bottom_left {
				width: 490rpx;
				height: 72rpx;
				.u-input {
					height: 100%;
					background: #F4F4F4;
					padding: 0 32rpx !important;
				}
			}
			.bottom_btn {
				width: 180rpx;
				height: 72rpx;
				background: #506DFF;
				border-radius: 36rpx;
				font-size: 28rpx;
				font-weight: 500;
				color: #FFFFFF;
			}
		}
	}
</style>