crmcard/pages/cardList/cardList.vue

<template>
	<view class="cardList">
		<uni-menubar title="名片夹" />
		<view>
			<tm-search v-model="params.keyword" placeholder="请输入名称或手机号" insert-color="blue" @confirm="searchCardList"
				color="white" :show-right="false" :round="20">
			</tm-search>
		</view>
		<view>
			<tm-translate animation-name="fadeUp">
				<view v-for="(item,index) in cardList" :key="index">
					<tm-sheet color="bg-gradient-blue-accent">
						<view class="cardRow">
							<view class="flexLeft">
								<tm-avatar size="120" titl :round="5" :src="item.picture">
								</tm-avatar>
							</view>
							<view class="flexRight">
								<view class="nameRow">
									<view class="name">{{item.name}}</view>
									<view @click="goCardDetail(item.id)">进入名片主页 <tm-icons color="gray"
											name="icon-angle-right" :size="20"></tm-icons>
									</view>
								</view>
								<view class="post">{{item.title}}</view>
							</view>
						</view>
						<view style="margin-top: 15px;">
							<view class="span">
								公司：{{item.company}}
							</view>
							<view class="span">
								微信号：{{item.wx}}
							</view>
							<view class="span">
								手机号：{{item.mobile}}
							</view>
						</view>

					</tm-sheet>
				</view>

			</tm-translate>
		</view>
		<uni-tabBar />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				params: {
					page: 1,
					keyword: ""
				},
				cardList: []
			}
		},
		onLoad() {
			this.getCardList()
		},
		onReachBottom(e) {
			this.params.page++
			this.$tm.request.post('card/addressbook', this.params).then(res => {
				if (res.data.length > 0) {
					res.data.forEach(val => {
						this.cardList.push(val)
					})
				}
			})
		},
		methods: {
			searchCardList() {
				this.params.page = 1
				this.getCardList()
			},
			getCardList() {
				this.$tm.request.post('card/addressbook', this.params).then(res => {
					this.cardList = res.data
				})
			},
			goCardDetail(card_id) {
				uni.navigateTo({
					url: '/pages/cardList/cardDetail?card_id=' + card_id
				})
			}
		}
	}
</script>

<style lang="scss">
	.cardRow {
		display: flex;
		flex-direction: row;

		// justify-content: center;
		// align-items: center;
		.flexLeft {
			margin-right: 15px;
		}

		.flexRight {
			flex: 1;

			.nameRow {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				font-size: 22rpx;
				// color: #9E9E9E;

				.name {
					// color: #000;
					font-size: 34rpx;
					// font-weight: bold;
				}
			}

			.post {
				font-size: 32rpx;
				// color: #9E9E9E;
				margin-top: 20rpx;
			}
		}
	}

	.span {
		// color: #2196F3;
		font-size: 28rpx;
		margin-top: 10rpx;
	}
</style>