H5_QiCaiYao/page_salesman_index/adminCollection/adminCollection.vue

<template>
	<view class="adminCollection">
		<z-paging ref="paging" v-model="list" @query="queryList">
		<template slot="top">
			<div class="top">
				<u-tabs :list="tabList" :scrollable="false" :current="current" lineColor="#21BBF3"
					:activeStyle="{color:'#21BBF3'}"></u-tabs>
				<div class="search">
					<u-input placeholder="搜索" border="none" shape="circle">
						<u-icon name="search" color="#BFBFBF" slot="prefix" size="20"></u-icon>
					</u-input>

					<div class="time" @click="show=true">2022年11月 <u-icon name="arrow-down" color="#666666" size="12">
						</u-icon>
					</div>
				</div>
			</div>
		</template>
			<u-datetime-picker :show="show" @close="show=false" v-model="time" mode="date" confirmColor="#21BBF3"
				closeOnClickOverlay></u-datetime-picker>



		<div class="order-list">
			<div class="order-item" v-for="(item,index) in 2" :key="index" @click="details()">
				<div class="item-top">
					<div>订单编号：2022090120001</div>
					<div class="time">08-12 18:12:21</div>
					<div class="status">待回款</div>
				</div>

				<u-line color="#F2F2F2"></u-line>


				<div class="item-content">
					<div class="item-label">
						<div>客户名称：</div>
						<div class="value">好大夫诊所  <div class="tag">私人医院</div></div>
					</div>
					<div class="item-label">
						<div>期数：</div>
						<div class="value">3期（剩余2期）</div>
					</div>
					<div class="item-label">
						<div>回款日期：</div>
						<div class="value">2022-12-21（最近回款日期）</div>
					</div>
				</div>

				<u-line color="#F2F2F2"></u-line>

				<div class="desc" @click.stop="$refs.descPopup.start()">
					<div class="left">
						<div class="icon">
							<image :src="$util.img(`/upload/weapp/pageSalesman/index/bZ.png`)" ></image>
						</div>
						点击添加备注
					</div>
					<u-icon name="arrow-right" color="#999999" size="14"></u-icon>
				</div>


				<div class="operation">
					<div>编辑回款</div>
				</div>
			</div>
		</div>
		</z-paging>
		<descPopup ref="descPopup"></descPopup>
	</view>
</template>

<script>
	import descPopup from "./components/descPopup.vue"
	export default {
		components:{descPopup},
		data() {
			return {
				time: '',
				show: false,
				current: 0,
				tabList: [{
						name: '待回款（10）'
					},
					{
						name: '完成回款（10）'
					}
				],
				list:[1]
			};
		},
		methods:{
			queryList(pageNo, pageSize) {
				this.$refs.paging.complete(this.list);
			},
			details(){
				uni.navigateTo({
					url:'/page_salesman_index/adminCollection/details'
				})
			}
		}
	}
</script>

<style lang="scss">
	.adminCollection {
		.order-list {
			padding: 32rpx;
			.order-item {
				background: #FFFFFF;
				border-radius: 24rpx;
				padding: 32rpx;
				margin-bottom: 32rpx;
				.operation{
					display: flex;
					justify-content: flex-end;
					>div{
						font-size: 24rpx;
						font-family: PingFangSC-Medium, PingFang SC;
						font-weight: bold;
						color: #FFFFFF;
						text-align: center;
						line-height: 60rpx;
						width: 176rpx;
						height: 60rpx;
						background: #21BBF3;
						border-radius: 30rpx;
					}
				}
				.desc{
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 28rpx 0;
					.left{
						display: flex;
						align-items: center;
						font-size: 28rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #999999;
						.icon{
							width: 48rpx;
							height: 48rpx;
							background: linear-gradient(141deg, #FFAC73 0%, #FE6E0B 100%);
							border-radius: 50%;
							display: flex;
							align-items: center;
							justify-content: center;
							margin-right: 24rpx;
							image{
								width: 24rpx;
								height: 24rpx;

							}
						}
					}
				}
				.item-content {
					padding: 28rpx 0;

					.item-label {
						display: flex;
						align-items: center;
						font-size: 28rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #999999;

						.value {
							color: #222222;
							display: flex;
							align-items: center;
							.tag{
								font-size: 20rpx;
								font-family: PingFangSC-Regular, PingFang SC;
								font-weight: 400;
								color: #FF7D02;
								padding: 0 16rpx;
								text-align: center;
								line-height: 40rpx;
								height: 40rpx;
								background: #FFF0E2;
								border-radius: 4rpx;
								margin-left: 20rpx;
							}
						}
					}
				}

				.item-top {
					display: flex;
					align-items: center;
					justify-content: space-between;
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #222222;
					padding-bottom: 28rpx;

					.time {

						color: #999999;
					}

					.status {
						font-weight: bold;
						color: #21BBF3;
						margin-left: 20rpx;
					}
				}
			}
		}

		.top {
			background-color: #fff;
			padding-top: 12rpx;

			.search {
				padding: 32rpx 24rpx 18rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				::v-deep {
					.u-input {
						background: #F6F6F6;

					}

					.u-input__content {
						padding: 12rpx 22rpx;
					}
				}

				.time {
					display: flex;
					align-items: center;
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #666666;
					margin-left: 44rpx;
				}
			}
		}
	}
</style>