BD-LDBD-UNI/pages/maintenance/servicesAvailable/index.vue

<template>
	<view class="">
		<view class="chooseTap">
			<view class="tap-btn" @click="chooseServer(1)">
				<view :class="[tar === 1?'line':'noline']">
					平台服务
				</view>
			</view>
			<view style="width: 1px;height: 40rpx;background-color: #E4E4E4;"></view>
			<view class="tap-btn" @click="chooseServer(2)">
				<view :class="[tar === 2?'line':'noline']">
					个人套餐
				</view>
			</view>
		</view>
		<view style="height: 80rpx;"></view>
		<view class="search">
			<view class="searchCard">
				<view class="input">
					<view style="display: flex;align-items: center;">
						<text class="iconfont icon-sousuo2"></text>
						<input style="margin-left: 20rpx;" type="text" placeholder="输入关键字搜索" v-model="search"
							placeholder-class="co" />
					</view>
					<view class="bnt" @click="submit">搜索</view>
				</view>
			</view>
		</view>
		<view class="body" v-if="tar === 1">
			<view class="menuLeft" :style="{height:swiperHeight+'px'}">
				<view v-for="(item, index) in dataList" :key="index" :class="menu==index?'chooseMenu':'menu'"
					@click="chooseMenu(index)">
					<view style="width: 100%;">
						<image v-if="menu==index" :src="require('../../../static/chooseMenu.png')">
							{{item.serviceName}}
					</view>

					<view v-if="item.num!=0" class="span">{{item.num}}</view>
				</view>
				<view style="height: 200rpx;"></view>
			</view>
			<view class="bodyRight" :style="{height:swiperHeight+'px'}">
				<view class="card" v-for="(item, index) in dataList[menu].serviceTwoList" :key="index">
					<view class="content">
						<view class="title">
							{{item.name}}
						</view>
						<view class="price">
							<span>参考价</span>￥{{item.price}}
						</view>
					</view>
					<view class="radios">
						<radio-group>
							<radio style="transform:scale(0.7)" color="#0078FF" :checked="item.isSelected == 1"
								@tap="radioChange(item,index)" />
						</radio-group>
					</view>
				</view>
				<view style="height: 200rpx;"></view>
			</view>
		</view>
		<view class="body02" v-else>
			<view class="mainView" v-for="(item,index) in datasList" :key="index">
				<view class="viewBlock">
					<view class="goodsInfo">
						<image :src="imgPath+item.imgUrl" class="goodsImg"></image>
						<view class="infoBlock">
							<view style="font-size: 32rpx;font-weight: bold;">{{item.packageName}}</view>
							<view>
								<view style="color: #005BFF;font-size: 24rpx;font-weight: 500;">{{item.invalidTime}}前有效
								</view>
								<view style="font-size: 24rpx;font-weight: bold;">
									{{item.num + '/'+item.allNum}}
									<text style="color: #999999;font-size: 24rpx;font-weight: 500;">个项目可用</text>
								</view>
							</view>
						</view>
					</view>
					<view v-for="(datas,count) in item.userPackageSerVOS" :key="count"
						style="display: flex;align-items: center;justify-content: space-between;margin: 40rpx 0;">
						<view style="font-size: 26rpx;color: #666666;">{{datas.sstName}}</view>
						<view style="width: 180rpx;height: 1px;border-top: 1px dashed #CCCCCC;"></view>
						<view style="font-size: 26rpx;font-weight: 500;color: #666666;">×{{datas.buyNum}}</view>
						<view style="font-size: 24rpx;font-weight: 500;color: #666666">余
							<text style="color:#005BFF">{{datas.surplusSum}}</text>
						</view>
						<view class="radios">
							<radio-group>
								<radio style="transform:scale(0.7)" color="#0078FF" :checked="datas.isSelected == 1"
									@tap="radioChanges(datas,count,index)" />
							</radio-group>
						</view>
					</view>
				</view>
				<view style="width:100%;height:20rpx;margin-top:10rpx;background-color:#F5F5F5"></view>
			</view>
		</view>
		<view class="bottomBtn">
			<view class="leftView" @click="showAction()">
				<image class="carImg" :src="require('../../../static/car.png')">
					<view class="chooseNum">
						已选<span>{{chooseNum}}</span>项
					</view>
					<image class="upImg" :src="require('../../../static/up.png')">
			</view>
			<view class="rightView" @tap="goBack(chooseNum)">
				确定
			</view>
		</view>
		<ActionSheet :show="show" :mask-closable="maskClosable" :list="chooseList" @showAction="showAction"
			@deleted="deleted"></ActionSheet>
	</view>
</template>

<script>
	import ActionSheet from '@/components/ActionSheet/index.vue'
	import {
		getShopServiceOne
	} from "@/api/maintain.js"
	export default {
		components: {
			ActionSheet
		},
		data() {
			return {
				// 打开底部弹窗
				show: false,
				// 遮罩层是否可以关闭弹窗
				maskClosable: true,
				chooseList: [],
				chooseNum: 0,
				menu: 0,
				swiperHeight: "",
				menuWidth: "",
				foodWidth: "",
				dataList: [{
					serviceTwoList: []
				}],
				projectList: {},
				search: "",
				tar: 1,
				item: null,
				myProjectList: null,
				imgPath: this.baseImagePath,
				shopId: '',
				datasList: [],
				type: ''
			}
		},
		watch: {
			chooseList(val) {
				console.log(val, 'val=========================');
				console.log(this.chooseList.length);
				this.chooseNum = this.chooseList.length
			}
		},
		onLoad(options) {
			console.log(options);
			let that = this;
			let datas = {};
			let item = {};
			this.item = options.item
			this.projectList = options.projectList
			this.shopId = options.shopId
			this.type = options.type
			if (options.item != undefined) {
				datas = {};
				item = JSON.parse(decodeURIComponent(options.item))
			} else {
				if (JSON.parse(options.projectList).chooseList != undefined) {
					this.chooseList = JSON.parse(options.projectList).chooseList;
				}
				datas = {
					shopId: options.shopId
				}
			}
			datas = Object.assign({
				type: this.tar
			}, datas)
			console.log(datas, '传参');
			getShopServiceOne(
				datas
			).then((res) => {
				that.dataList = res.data;
				for (let listIndex in that.dataList) {
					if (item != "") {
						if (item.id == that.dataList[listIndex].id) {
							that.menu = listIndex;
						}
					}
					if (this.chooseList.length == 0) {
						that.$set(that.dataList[listIndex], 'num', 0);
						for (let subListIndex in that.dataList[listIndex].serviceTwoList) {
							that.dataList[listIndex].serviceTwoList[subListIndex].isSelected = 0;
						}
					} else {
						let num = 0;
						let executeNum = 0;
						console.log(this.chooseList);
						for (let index in this.chooseList) {
							if (this.chooseList[index].menuId == that.dataList[listIndex].id) {
								for (let subListIndex in that.dataList[listIndex].serviceTwoList) {
									if (that.dataList[listIndex].serviceTwoList[subListIndex].id == this
										.chooseList[index]
										.id) {
										executeNum++
										num++
										that.dataList[listIndex].serviceTwoList[subListIndex].isSelected = 1;
									} else if (executeNum == 0) {
										that.dataList[listIndex].serviceTwoList[subListIndex].isSelected = 0;
									}
								}
							}
						}
						that.$set(that.dataList[listIndex], 'num', num);
					}
					that.chooseNum = that.chooseNum + that.dataList[listIndex].num;
				}
			})
			//初始化页面的组件大小
			uni.getSystemInfo({
				success: (res) => {
					// - uni.upx2px(100) 减去头部的列表
					let height = res.windowHeight
					let windowWidth = res.windowWidth
					this.swiperHeight = height
					this.menuWidth = windowWidth / 5
					this.foodWidth = windowWidth * 4 / 5
				}
			});
			// this.chooseData();
		},
		methods: {
			chooseServer(type) {
				this.tar = type
				if (this.tar === 2) {
					getShopServiceOne({
						type: this.tar,
					}).then((res) => {
						this.datasList = res.data
						console.log(this.datasList);
						for (let index in this.datasList) {
							if (this.chooseList.length !== 0) {
								for (let itemList in this.chooseList) {
									if (this.chooseList[itemList].oneId === this.datasList[index].id) {
										console.log(this.chooseList[itemList].oneId);
										for (let listData in this.datasList[index].userPackageSerVOS) {
											if (this.chooseList[itemList].id === this.datasList[index]
												.userPackageSerVOS[listData].sstId) {
												this.datasList[index].userPackageSerVOS[listData].isSelected = 1
											}
										}
									}
								}
							}
						}
						console.log(res, 'res');
					})
				} else {
					let that = this
					let datas = {};
					let item = {};
					if (this.item != undefined) {
						datas = {};
						item = JSON.parse(decodeURIComponent(this.item))
					} else {
						if (JSON.parse(this.projectList).chooseList != undefined) {
							this.chooseList = JSON.parse(this.projectList).chooseList;
						}
						datas = {
							shopId: this.shopId
						}
					}
					datas = Object.assign({
						type: this.tar
					}, datas)
					console.log(datas, '传参');
					getShopServiceOne(
						datas
					).then((res) => {
						that.dataList = res.data;
						console.log(that.dataList);
						for (let listIndex in that.dataList) {
							if (item != "") {
								if (item.id == that.dataList[listIndex].id) {
									that.menu = listIndex;
								}
							}
							if (this.chooseList.length == 0) {
								that.$set(that.dataList[listIndex], 'num', 0);
								for (let subListIndex in that.dataList[listIndex].serviceTwoList) {
									that.dataList[listIndex].serviceTwoList[subListIndex].isSelected = 0;
								}
							} else {
								let num = 0;
								let executeNum = 0;
								for (let index in this.chooseList) {
									console.log(that.dataList[listIndex], 'that.dataList[listIndex].id');
									if (this.chooseList[index].menuId == that.dataList[listIndex].id) {
										for (let subListIndex in that.dataList[listIndex].serviceTwoList) {
											if (that.dataList[listIndex].serviceTwoList[subListIndex].id == this
												.chooseList[index].id) {
												executeNum++
												num++
												that.dataList[listIndex].serviceTwoList[subListIndex].isSelected =
													1;
											} else if (executeNum == 0) {
												that.dataList[listIndex].serviceTwoList[subListIndex].isSelected =
													0;
											}
										}
									}
								}
								that.$set(that.dataList[listIndex], 'num', num);
							}
							// that.chooseNum = that.chooseNum +that.dataList[listIndex].num;
						}
					})
				}

			},
			submit() {
				getShopServiceOne({
					serviceOneId: this.dataList[this.menu].id,
					keyword: this.search,
					type: this.tar,
					shopId: this.shopId
				}).then((res) => {
					console.log(this.chooseList);
					if (this.chooseList.length == 0) {
						for (let subListIndex in res.data.serviceTwoList) {
							res.data.serviceTwoList[subListIndex].isSelected = 0;
						}
					} else {
						let num = 0;
						let executeNum = 0;
						for (let index in this.chooseList) {
							if (this.chooseList[index].menuId == this.dataList[this.menu].id) {
								for (let subListIndex in res.data.serviceTwoList) {
									if (res.data.serviceTwoList[subListIndex].id == this.chooseList[index].id) {
										executeNum++
										num++
										res.data.serviceTwoList[subListIndex].isSelected = 1;
									} else if (executeNum == 0) {
										res.data.serviceTwoList[subListIndex].isSelected = 0;
									}
								}
							}
						}
					}
					console.log('data=====================================》', res.data)
					this.dataList[this.menu].serviceTwoList = res.data[this.menu].serviceTwoList;
				})
			},
			goBack(datas) {
				console.log(datas);
				if (datas === 0) {
					uni.showToast({
						icon: 'none',
						title: '选择的服务不可以为空'
					})
					return
				}
				let data = {
					num: datas,
					chooseList: this.chooseList,

				}
				console.log(this.chooseList);
				console.log('choose==========', data);
				uni.navigateTo({
					url: "/pages/maintenance/onlineReservation/index?data=" + JSON.stringify(data) + "&page=index"
				})
				// uni.$emit('chooseNum', data);

				// uni.navigateBack({
				// 	delta: 1
				// })
			},
			deleted(data) {
				if (data.upsId) {
					console.log(data, '删除');
					for (let listIndex in this.datasList) {
						if (this.datasList[listIndex].id === data.oneId) {
							for (let twoList in this.datasList[listIndex].userPackageSerVOS) {
								if (data.id === this.datasList[listIndex].userPackageSerVOS[twoList].sstId) {
									this.datasList[listIndex].userPackageSerVOS[twoList].isSelected = 0
									for (let index in this.chooseList) {
										if (this.chooseList[index].id === data.id) {
											this.chooseList.splice(index, 1)
											this.chooseNum = this.chooseList.length
										}
									}
								}
							}
						}
					}
				} else {
					for (let listIndex in this.dataList) {
						if (this.dataList[listIndex].serviceName == data.menu) {
							for (let subListIndex in this.dataList[listIndex].serviceTwoList) {
								if (this.dataList[listIndex].serviceTwoList[subListIndex].id == data.id) {
									this.dataList[listIndex].serviceTwoList[subListIndex].isSelected = 0;
									this.dataList[listIndex].num--
								}
							}
						}
					}
					for (let index in this.chooseList) {
						if (data.id == this.chooseList[index].id && data.chooseName == this.chooseList[index].chooseName) {
							this.chooseList.splice(index, 1)
						}
					}
					// this.chooseData();	
				}

			},
			showAction() {
				this.show = !this.show;
				console.log(this.show, 'show');
			},
			chooseData() {
				let chooseItem = {};
				this.chooseList = [];
				// this.chooseNum = 0;
				for (let listIndex in this.dataList) {
					// this.chooseNum = this.chooseNum + this.dataList[listIndex].num;
					for (let subListIndex in this.dataList[listIndex].serviceTwoList) {
						chooseItem = {};
						console.log(this.dataList[listIndex].serviceTwoList);
						if (this.dataList[listIndex].serviceTwoList[subListIndex].isSelected == 1) {
							chooseItem.id = this.dataList[listIndex].serviceTwoList[subListIndex].id;
							chooseItem.chooseName = this.dataList[listIndex].serviceTwoList[subListIndex].serviceName;
							chooseItem.menu = this.dataList[listIndex].serviceName;
							chooseItem.menuId = this.dataList[listIndex].id;
							this.chooseList.push(chooseItem);
							this.chooseNum = this.chooseList.length
						}

					}
				}
			},
			radioChanges(item, index, val) {
				this.chooseNum = 0;
				console.log(item);
				if (item.isSelected == 0 || item.isSelected == undefined) {
					this.datasList[val].userPackageSerVOS[index].isSelected = 1;
					let datasObj = {}
						datasObj.typeId = this.datasList[val].userPackageSerVOS[index].typeId
						datasObj.type = this.datasList[val].userPackageSerVOS[index].type
					// if (this.datasList[val].userPackageSerVOS[index].sstId == null) {
					// 	datasObj.id = this.datasList[val].userPackageSerVOS[index].goodsId
					// 	datasObj.type = this.datasList[val].userPackageSerVOS[index].type
					// } else {
					// 	datasObj.id = this.datasList[val].userPackageSerVOS[index].sstId
					// 	datasObj.type = this.datasList[val].userPackageSerVOS[index].type
					// }
					// console.log(datasObj.id);
					datasObj.chooseName = this.datasList[val].userPackageSerVOS[index].sstName
					datasObj.upsId = this.datasList[val].userPackageSerVOS[index].id,
						datasObj.oneId = this.datasList[val].id
					this.chooseList.push(datasObj);
				} else {
					for (let count in this.chooseList) {
						console.log(item.sstId, this.chooseList[count].id, '123456789');
						if (item.sstId == this.chooseList[count].id) {
							this.chooseList.splice(index, 1)
						}
					}
					this.datasList[val].userPackageSerVOS[index].isSelected = 0;
				}
				console.log('this.chooseList===========>', this.chooseList);
				this.chooseNum = this.chooseList.length

			},
			radioChange(item, index) {
				this.chooseNum = 0;
				console.log(item, 'item1111111111111');
				if (item.isSelected == 0 || item.isSelected == undefined) {
					this.dataList[this.menu].num++;
					this.dataList[this.menu].serviceTwoList[index].isSelected = 1;
					let chooseItem = {};
					chooseItem.id = item.id;
					chooseItem.type = item.type;
					chooseItem.typeId = item.typeId;
					chooseItem.chooseName = item.serviceName;
					chooseItem.menu = item.serviceName;
					chooseItem.menuId = this.dataList[this.menu].id;
					this.chooseList.push(chooseItem);
					console.log(chooseItem);
					console.log(this.chooseList);
				} else {
					for (let count in this.chooseList) {
						console.log(item.id, this.chooseList[count].id, 'this.chooseList[count].id');
						if (item.id == this.chooseList[count].id) {
							this.chooseList.splice(count, 1)
						}
					}
					this.dataList[this.menu].num--;
					this.dataList[this.menu].serviceTwoList[index].isSelected = 0;
				}
			},
			chooseMenu(data) {
				this.menu = data;
			},
		},
	}
</script>

<style lang="less">
	.chooseTap {
		width: 100%;
		height: 80rpx;
		background-color: #FFFFFF;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
		position: fixed;
		top: 0;
		z-index: 999;
		border-bottom: 1px solid #EEEEEE;

		.tap-btn {
			flex: 1;
			text-align: center;
			line-height: 80rpx;
			background-color: #FFFFFF;

			.line {
				height: 77rpx;
				color: #0060FF;
				display: inline-block;
				border-bottom: 3px solid #0060FF;
			}

			.noLine {
				color: #333333;
			}
		}
	}

	.bottomBtn {
		width: 690rpx;
		height: 110rpx;
		background: #FFFFFF;
		border: 1px solid #EEEEEE;
		box-shadow: 0px 8rpx 17rpx 0px rgba(168, 165, 165, 0.26);
		border-radius: 55rpx;
		margin-left: 30rpx;
		position: fixed;
		bottom: 67rpx;
		z-index: 9998;

		.leftView {
			float: left;
			height: 100%;
			display: flex;
			align-items: center;

			.carImg {
				width: 64rpx;
				height: 51rpx;
				margin-left: 41rpx;
			}

			.chooseNum {
				margin-left: 25rpx;
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;
				line-height: 31rpx;

				span {
					font-size: 36rpx;
					color: #0060FF;
				}
			}

			.upImg {
				width: 21rpx;
				height: 17rpx;
				margin-left: 12rpx;
			}
		}

		.rightView {
			float: right;
			width: 210rpx;
			height: 108rpx;
			background: linear-gradient(0deg, #005AFF 0%, #0078FF 100%);
			border-radius: 0 55rpx 55rpx 0;
			font-size: 34rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #FEFEFE;
			line-height: 108rpx;
			text-align: center;
		}
	}

	.body02 {
		padding-bottom: 200rpx;

		.mainView {
			width: 100%;
			background-color: #FFFFFF;

			.viewBlock {
				padding: 30rpx;

				.goodsInfo {
					display: flex;

					.infoBlock {
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						margin-left: 20rpx;
					}

					.goodsImg {
						width: 163rpx;
						height: 163rpx;
					}
				}
			}

		}
	}

	.body {
		display: flex;

		.menuLeft {
			width: 190rpx;
			background: #F5F5F5;
			border-radius: 0px 14rpx 0px 0px;
			overflow-y: auto;

			.menu {
				width: 190rpx;
				height: 90rpx;
				background: #F5F5F5;
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #666666;
				line-height: 98rpx;
				text-align: center;

				.span {
					width: 34rpx;
					height: 34rpx;
					background: #FF3C00;
					border-radius: 50%;
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #FFFFFF;
					line-height: 36rpx;
					position: relative;
					top: -84rpx;
					left: 74%;
				}
			}

			.chooseMenu {
				width: 190rpx;
				height: 95rpx;
				background: #FFFFFF;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #333333;
				line-height: 98rpx;
				text-align: center;

				.span {
					width: 34rpx;
					height: 34rpx;
					background: #FF3C00;
					border-radius: 50%;
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #FFFFFF;
					line-height: 36rpx;
					position: relative;
					top: -84rpx;
					left: 74%;
				}

				image {
					width: 12rpx;
					height: 38rpx;
					position: relative;
					left: -36rpx;
					top: 10rpx;
				}
			}
		}

		.bodyRight {
			width: 560rpx;
			height: 878rpx;
			background: #FFFFFF;
			overflow-y: auto;

			.card {
				width: 500rpx;
				border-bottom: 1px solid #E6E6E6;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.content {
					float: left;

					.title {
						font-size: 32rpx;
						font-family: PingFang SC;
						font-weight: bold;
						color: #333333;
						line-height: 36rpx;
						padding-top: 41rpx;
						padding-left: 29rpx;

					}

					.price {
						font-size: 26rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #005BFF;
						padding-top: 29rpx;
						padding-left: 29rpx;
						padding-bottom: 37rpx;

						span {
							color: #666666;
							font-size: 22rpx;
							font-family: PingFang SC;
							font-weight: 500;
						}
					}
				}

				.radios {
					float: right;
				}
			}
		}
	}

	.search {
		width: 100%;
		height: 90rpx;
		background: #FFFFFF;
		box-shadow: 0px 1px 0px 0px rgba(55, 55, 55, 0.1);
	}

	.searchCard {
		width: 710rpx;
		height: 70rpx;
		background: #ECECEC;
		border: 1px solid #FFFFFF;
		border-radius: 34rpx;
		margin-left: 20rpx;
		margin-top: 21rpx;
	}

	.iconfont {
		font-family: "iconfont" !important;
		font-size: 35rpx;
		font-style: normal;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		background: #ECECEC;
		padding-left: 37rpx;
		line-height: 70rpx;
		border-radius: 34rpx;
	}

	.co {
		background: #ECECEC;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
	}

	.input {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.bnt {
		width: 130rpx;
		height: 58rpx;
		background: linear-gradient(0deg, #005AFF 0%, #0078FF 100%);
		border-radius: 29rpx;
		line-height: 58rpx;
		text-align: center;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		position: relative;
		right: 8rpx;
	}
</style>