powerbank/pages/agentpages/devicemanagement/lnstallation/index.vue

<template>
	<view class="page">
		<u-navbar title="维修申报" :border-bottom="false" :background="bgc" title-color='#000' title-size='36'
			height='38'></u-navbar>
		<view class="box">
			<view class="serchs">
				<u-search placeholder="搜索" input-align="center" v-model="keyword"></u-search>
				<view class="quyu" style="display: flex;justify-content: space-between;">
					<view @click="btnquyu">区域（{{quyutext}}）<u-icon name="arrow-down-fill" color="#808080" size="20"></u-icon></view>
					<view @click="btndaili">代理（{{dailitext}}）<u-icon name="arrow-down-fill" color="#808080" size="20"></u-icon></view>
				</view>
				<view class="date">
					<text @click="btnks(1)">{{selector}}</text> -- <text @click="btnks(2)">{{selectors}}</text>
				</view>
				<view class="anniu">
					<view class="active">
						装机
					</view>
					<view class="">
						撤机
					</view>
				</view>
			</view>

			<view class="listscrll">
				<view class="list" v-for="(item,index) in 5" :key="index">
					<view class="toptit">
						<view class="">
							<u-icon name="file-text"></u-icon> fadgfryt168742341682
						</view>
						<view class="yuan">
							<text></text><text></text><text></text>
						</view>
					</view>
					<view class="xian"></view>
					<view class="listbd">
						<view class="">
							所属代理：<text>嘻嘻</text>
						</view>
						<view class="">
							店铺名称：<text>久久红农家乐</text>
						</view>
						<view class="">
							店铺地址：<text>福鼎市兴港路附近中石化森美龙安 加油站</text>
						</view>
					</view>
					<view class="xian"></view>
					<view class="but">
						<text>2023-10-04</text> <text style="color: #1DBE7B;">装机</text>
					</view>
				</view>
			</view>

		</view>

		<u-picker mode="time" v-model="show" :params="params" @confirm="confirm"></u-picker>
		<u-select v-model="shows" :list="list" @confirm="confirmqy"></u-select>
		<u-select v-model="showdl" :list="listdl"  @confirm="confirmdl"></u-select>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showdl: false,
				show: false,
				list: [{
						value: '1',
						label: '全部'
					},
					{
						value: '2',
						label: '区域1'
					}
				],
				listdl: [{
						value: '1',
						label: '全部'
					},
					{
						value: '2',
						label: '代理1'
					}
				],
				params: {
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false
				},
				shows: false,
				selector: '2024-4-9',
				selectors: '2024-4-9',
				num: '',
				quyutext:'全部',
                dailitext:'全部',
			}
		},
		methods: {
			btnks(num) {
				this.show = true
				if (num == 1) {
					this.num = 1
				} else {
					this.num = 2
				}
			},
			confirm(e) {
				if (this.num == 1) {
					this.selector = e.year + '-' + e.month + '-' + e.day
				} else {
					this.selectors = e.year + '-' + e.month + '-' + e.day
				}
			},
			
			btnquyu(e){
				console.log(e);
				this.shows = true
			},
			btndaili(e){
				this.showdl = true
			},
			confirmqy(e){
				this.quyutext = e[0].label 
			},
			confirmdl(e){
				this.dailitext = e[0].label
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: linear-gradient(180deg, #25CE88 0%, rgba(255, 255, 255, 0) 100%);
	}

	.active {
		background-color: #25CE88 !important;
		color: #fff !important;
	}

	.page {
		width: 750rpx;
		position: fixed;
		top: 0;
		left: 0;

		.box {
			width: 750rpx;
			height: 1440rpx;
			background: #F4F5F7;
			border-radius: 0rpx 0rpx 0rpx 0rpx;

			.listscrll {
				width: 750rpx;
				height: 100%;
				overflow-y: scroll;
				padding-bottom: 400rpx;
			}

			.list {
				.but {
					display: flex;
					justify-content: space-between;
					padding: 18rpx 30rpx;
					box-sizing: border-box;
					font-size: 20rpx;
					color: #3D3D3D;
				}

				width: 680rpx;
				height: 338rpx;
				background: #FFFFFF;
				border-radius: 24rpx 24rpx 24rpx 24rpx;
				margin: auto;
				margin-top: 26rpx;

				.xian {
					width: 680rpx;
					height: 2rpx;
					background: #F0F0F0;
					border-radius: 0rpx 0rpx 0rpx 0rpx;
				}

				.toptit {
					display: flex;
					justify-content: space-between;
					padding: 24rpx 32rpx;
					box-sizing: border-box;

					.yuan {
						text {
							width: 9rpx;
							height: 9rpx;
							background-color: #3D3D3D;
							display: inline-block;
							border-radius: 50%;
							margin-right: 5rpx;
						}
					}
				}

				.listbd {
					padding: 24rpx 30rpx;
					box-sizing: border-box;
					font-size: 24rpx;
					color: #3D3D3D;

					view {
						margin-top: 14rpx;
					}
				}
			}

			.serchs {
				.anniu {
					margin-top: 30rpx;
					padding: 0 80rpx;
					box-sizing: border-box;
					display: flex;
					justify-content: space-between;

					view {
						width: 250rpx;
						height: 70rpx;
						background: #D8D8D8;
						border-radius: 10rpx 10rpx 10rpx 10rpx;
						font-weight: 500;
						font-size: 36rpx;
						color: #3D3D3D;
						text-align: center;
						line-height: 70rpx;
					}
				}

				.date {
					padding-left: 80rpx;
					padding-right: 80rpx;
					box-sizing: border-box;
					display: flex;
					justify-content: space-between;
					margin-top: 26rpx;

					text {
						padding: 6rpx 18rpx;
						box-sizing: border-box;
						border: 1px solid #ccc;
						border-radius: 10rpx 10rpx 10rpx 10rpx;
						font-size: 24rpx;
						color: #808080;
					}
				}

				.quyu {
					padding: 0 108rpx;
					box-sizing: border-box;
					margin-top: 20rpx;
					font-size: 28rpx;
					color: #808080;
				}

				width: 750rpx;
				height: 350rpx;
				background: #FFFFFF;
				padding: 32rpx 36rpx;
				box-sizing: border-box;

				/deep/ .u-content {
					border: 1px solid #ccc;
					border-radius: 50rpx 0 0 50rpx !important;
				}

				/deep/ .u-action {
					border-radius: 0 50rpx 50rpx 0 !important;
					width: 112rpx;
					height: 65rpx;
					line-height: 65rpx;
					border: 2rpx solid #ccc;
					margin-left: 0;
					color: #3D3D3D;
					background-color: #f2f2f2;

				}
			}
		}
	}
</style>