mabaoDoctor/pages/conversation/conversation.vue

<template>
	<view class="main">
		<view class="padding-lr-sm">
			<u-search placeholder="请输入搜索用户姓名" v-if="qiehuan == true" action-text="通话记录" @custom="tonghua" :action-style="{width:'110rpx'}"
			 v-model="keyword"></u-search>
			<u-search placeholder="请输入搜索用户姓名" v-if="qiehuan == false" action-text="聊天列表" @custom="tonghua" :action-style="{width:'110rpx'}"
			 v-model="keyword"></u-search>
		</view>
		<!-- 这是聊天列表 当值为true时显示-->
		<view class="cu-list menu-avatar margin-top-xs" v-if="qiehuan == true">
			<view class="cu-item u-border-bottom" v-for="(item,index) in 5" :key="index" @click="goliaotian">
				<view class="cu-avatar radius lg" style="background-image:url(https://ossweb-img.qq.com/images/lol/img/champion/Taric.png);">
					<view class="cu-tag badge">10</view>
				</view>
				<view class="content">
					<view class="text-grey">
						<text class="text-cut">用户昵称</text>
						<view class="cu-tag round bg-orange sm">备注</view>
					</view>
					<view class="text-gray text-sm flex">
						<text class="text-cut">信息发送者：最近一条消息</text>
					</view>
				</view>
				<view class="action">
					<view class="text-grey text-xs">22:20</view>
				</view>
			</view>
		</view>
		<!-- 这是通话记录 当值为false1时显示 -->
		<view class="cu-list menu-avatar margin-top-xs" v-if="qiehuan == false" @click="call">
			<view class="cu-item u-border-bottom" v-for="(item,index) in 5" :key="index" @click="call">
				<view class="cu-avatar radius lg" style="background-image:url(https://ossweb-img.qq.com/images/lol/img/champion/Taric.png);border-radius: 50%;">
					<view class="cu-tag badge">10</view>
				</view>
				<view class="content">
					<view class="text-grey">
						<text class="text-cut">用户昵称</text>
						<view class="cu-tag round bg-orange sm">备注</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		components: {

		},
		onLoad() {

		},
		mounted() {

		},
		data() {
			return {
				//控制聊天列表和通话记录
				//false为通话记录，true为聊天列表
				qiehuan: true,

				keyword: ""
			}
		},
		methods: {
			tonghua() {
				console.log("点击了通话记录");
				if (this.qiehuan) {
					this.qiehuan = false
				} else {
					this.qiehuan = true
				}
			},
			goliaotian() {
				uni.navigateTo({
					url: "conversationWindow"
				})
			},
			call(){
				uni.navigateTo({
					url: "call"
				})
			}
			
		}
	};
</script>

<style scoped lang="scss">

</style>