gc/pages/scrap/gxlist.vue

<template>
	<view class="content">
		<view class="top"></view>
		<view class="search flex">
			<view class="input-box flex">
				<view class=" input-content flex">
					<view class="iconfont iconsearch"></view>
					<view class="input"><input type="text" placeholder-class="place" v-model="name"
							placeholder="请输入关键词搜索" />
					</view>
					<view class="btn" @click="search">
						搜索
					</view>
				</view>
			</view>
		</view>
		<view class="main">
			<view class="main-item" v-for="(item,index) in list">
				<view class="main-title flex">
					<view class="maint-left" @click="show(item)">
						<view class="maint-font">{{item.name}}</view>
						<image class="maint-iconh" v-if="item.isshow == 0" src="../../static/img/jt.png" mode="">
						</image>
						<image class="maint-icon" v-else src="../../static/icon/downxia.png" mode=""></image>
					</view>
					<view class="maint-right" @click="allChoose(item)">
						<view class="maint-all">全选</view>
						<view class="maint-allicon">
							<image :src="item.isall == 1?'../../static/icon/have.png':'../../static/icon/null.png'"
								mode="widthFix"></image>
						</view>
					</view>
				</view>
				<view class="main-info flex" v-for="(itm,ind) in item.orderlist" v-if="item.isshow == 1">
					<view class="maini-left">
						{{itm.name}}(<text>￥{{itm.number}}</text>)
					</view>
					<view class="maini-right" @click="choose(itm,item)">
						<image :src="itm.ischoose == 1?'../../static/icon/have.png':'../../static/icon/null.png'"
							mode="widthFix"></image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
						name: '加工',
						isall: 0,
						isshow: 1,
						orderlist: [{
								name: '缝纫',
								number: 100,
								ischoose: 0
							},
							{
								name: '缝纫',
								number: 100,
								ischoose: 0
							},
							{
								name: '缝纫',
								number: 100,
								ischoose: 0
							},
							{
								name: '缝纫',
								number: 100,
								ischoose: 0
							},
							{
								name: '缝纫',
								number: 100,
								ischoose: 0
							}
						]
					},
					{
						name: '大标题',
						isall: 0,
						isshow: 0,
						orderlist: [{
								name: '缝纫',
								number: 100,
								ischoose: 0
							},
							{
								name: '缝纫',
								number: 100,
								ischoose: 0
							},
							{
								name: '缝纫',
								number: 100,
								ischoose: 0
							},
							{
								name: '缝纫',
								number: 100,
								ischoose: 0
							},
							{
								name: '缝纫',
								number: 100,
								ischoose: 0
							}
						]
					}
				]
			};
		},
		onLoad() {},
		onShow() {},
		onReachBottom() {},
		onReady() {},
		methods: {
			show(item) {
				item.isshow = !item.isshow
			},
			allChoose(item) {
				if (item.isall == 0) {
					item.isall = 1
					item.orderlist.forEach(e => {
						e.ischoose = 1
					})
				} else {
					item.isall = 0
					item.orderlist.forEach(e => {
						e.ischoose = 0
					})
				}
			},
			choose(son, father) {
				if (son.ischoose == 0) {
					son.ischoose = 1;
					let fengshu = 1
					father.orderlist.forEach(e => {
						if (e.ischoose == 0) {
							fengshu = 0
						}
					})
					father.isall = fengshu
				} else {
					son.ischoose = 0;
					father.isall = 0
				}
			}
		}
	};
</script>

<style lang="scss">
	page,
	.content {
		min-height: 100%;
		height: auto;
		background: #ffffff;
	}

	.top {
		background: #f8f8f8;
		width: 750rpx;
		height: 20rpx;
	}

	.search {
		justify-content: flex-start;
		padding: 10rpx 32rpx 20rpx;
		align-items: center;
		background-color: #fff;

		.input-box {
			margin-left: 10rpx;
			position: relative;
			z-index: 99;
			width: 710rpx;
			height: 60rpx;
			background: #eeeeee;
			border-radius: 30rpx;

			.input-content {
				position: relative;
				z-index: 11;
				border-radius: 99rpx;
				flex-grow: 1;
				padding: 5rpx 30rpx;
				background: #eeeeee;

				.iconfont {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 30rpx;
					height: 14rpx;
					line-height: 1;
					margin-left: 4rpx;

					&.active {
						color: $base-color;
					}
				}

				.iconsearch {
					font-size: 50rpx;
					color: #cbcbcb;
				}

				.input {
					margin-left: 19rpx;
					flex-grow: 1;

					.place {
						color: #cbcbcb;
					}

				}
			}
		}
	}

	.main {
		margin-top: 30rpx;
		border-top: 1px solid #F0F0F0;

		image {
			width: 100%;
			height: 100%;
		}

		.main-title {
			padding: 32rpx 42rpx;
			border-bottom: 1px solid #F0F0F0;

			.maint-left {
				display: flex;
				align-items: center;

				.maint-font {
					font-size: 32rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #3F454B;
					margin-right: 20rpx;
				}

				.maint-icon {
					width: 20rpx;
					height: 11rpx;
				}

				.maint-iconh {
					width: 11rpx;
					height: 20rpx;
				}
			}

			.maint-right {
				display: flex;
				align-items: center;

				.maint-all {
					margin-right: 20rpx;
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #3F454B;
				}

				.maint-allicon {
					width: 38rpx;
					height: 38rpx;
					border-radius: 50%;
				}
			}
		}

		.main-info {
			margin: 0 24rpx;
			border-bottom: 1px solid #F0F0F0;
			padding: 38rpx 18rpx 28rpx;

			.maini-left {
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #3F454B;

				text {
					color: #FF4C4C;
				}
			}

			.maini-right {
				width: 38rpx;
				height: 38rpx;
				border-radius: 50%;
			}
		}
	}
</style>