peisong/components/tui-chat/message-private/order-list/index.vue

<template>
	<view v-if="display" class="tui-cards-container">
		<view class="tui-cards-box">
			<view class="tui-cards-title">
				<view>请选择你要发送的订单</view>
				<view style="color: #006EFF; font-family: PingFangSC-Regular;" class="tui-cards-close" @tap="handleClose">关闭</view>
			</view>
			<view class="tui-search-bar">
				<image class="tui-searchcion" src="/static/static/assets/serach-icon.svg"></image>
				<input class="tui-search-bar-input" :value="words" placeholder="搜索" @input="wordsInput" />
			</view>
			<scroll-view class="tui-order-list" scroll-y="true" enable-flex="true">
				<view v-for="(item, index) in orderMatch" :key="index" class="tui-order-item">
					<view class="order-title">
						<view class="order-number">订单编号: {{ item.orderNum }}</view>
						<view class="order-time">{{ item.time }}</view>
					</view>
					<view class="order-info">
						<image class="order-image" :src="item.imageUrl"></image>
						<view class="order-content">
							<view class="order-content-title">{{ item.title }}</view>
							<view class="order-content-description">{{ item.description }}</view>
							<view style="display: flex; flex-wrap: no-wrap; justify-content: space-between;">
								<view class="order-content-price">{{ item.price }}</view>
								<view class="btn-send-order" :data-order="item" @tap.stop="sendMessage"><text class="btn-send-text">发送此订单</text></view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
const orderList = [
	{
		orderNum: 1,
		time: '2021-7-20 20:45',
		title: '[天博检验]新冠核酸检测/预约',
		description: '专业医学检测，电子报告',
		imageUrl: 'https://sdk-web-1252463788.cos.ap-hongkong.myqcloud.com/component/TUIKit/assets/miles.jpeg',
		price: '80元'
	},
	{
		orderNum: 2,
		time: '2021-7-20 22:45',
		title: '[路边]新冠核酸检测/预约',
		description: '专业医学检测，电子报告',
		imageUrl: 'https://sdk-web-1252463788.cos.ap-hongkong.myqcloud.com/component/TUIKit/assets/miles.jpeg',
		price: '7000元'
	}
];

export default {
	data() {
		return {
			words: '',
			orderMatch: orderList
		};
	},

	components: {},
	props: {
		display: {
			type: Boolean,
			default: false
		},
		conversation: {
			type: Object,
			default: () => {}
		}
	},
	watch: {
		display: {
			handler: function(newVal) {
				// this.setData({
				//   display: newVal
				// });
			},
			immediate: true
		},
		conversation: {
			handler: function(newVal) {
				this.setData({
					conversation: newVal
				});
			},
			immediate: true,
			deep: true
		}
	},
	methods: {
		handleClose() {
			this.$emit('close', {
				detail: {
					key: '1'
				}
			});
		},

		wordsInput(e) {
			(this.orderMatch = []),
				orderList.forEach(item => {
					if (item.title.indexOf(e.detail.value) > -1 || item.orderNum === ~~e.detail.value) {
						this.orderMatch.push(item);
					}
				});
			this.setData({
				words: e.detail.value,
				orderMatch: this.orderMatch
			});
		},

		sendMessage(e) {
			const { order } = e.currentTarget.dataset;
			this.$emit('sendCustomMessage', {
				detail: {
					payload: {
						// data 字段作为表示，可以自定义
						data: 'order',
						description: order.description,
						// 获取骰子点数
						extension: JSON.stringify({
							title: order.title,
							imageUrl: order.imageUrl,
							price: order.price
						})
					}
				}
			});
		}
	}
};
</script>
<style>
@import './index.css';
</style>