hz-zhhq-app/pages/production/production.vue

<template>
	<view class="container">
		<view class="titleWrap">后勤保障服务清单与能力需求</view>
		<view class="main">
			<view>
				<view class="cont">
					<view class="classify-box">
						<view class="classify-item" :class="chooseClassifyIndex == index ? 'active' : ''" v-for="(item, index) in kinds" :key="index">
							<text class="mainSelector" @click="kindClick(index)">{{ item.name }}</text>
							<view v-if="chooseClassifyIndex == index" v-for="(subItem,subIndex) in item.subSelectorList" class="subSelector" 
							:class="chooseClassifyIndex == index&& chooseSubSelectorIndex==subIndex ? 'subActive' : ''" @click="subItemClick(subIndex)">{{subItem.name}}</view>
							<!-- <view v-if="chooseClassifyIndex == index" class="subSelector">会议管理</view> -->
						</view>
					</view>
					
					<view class="food-list">
						<view class="barber">
							<view class="barber-item" v-for="(item, index) in pros" :key="index" @click="chooseWorker(item.id, item.name)">
								<text class="round" :class="chooseWorkerId == item.id ? 'barberactive' : ''"></text>
								<text class="input_left">{{ item.name }}</text>
							</view>
						</view>
						
						<view class="uni-list">
							<checkbox-group style="word-break: keep-all;" @change="checkboxChange">
								
								 <label class="produnctionWrap" v-for="item in items" :key="item.value">
									<checkbox class="productionCheckbox" :value="item.value" :checked="item.checked==1?true:false" />{{item.name}}
								</label>
								
							</checkbox-group>
						</view>
								
						
					</view>
					
					
				</view>
				
			</view>
			
		</view>
	</view>
</template>

<script>
import { commodityList, submitOrder,getCatagoryList,getProductionList } from '@/common/api.js';
import { callbackRequest, alertTip, sureAlterTip, getStorage } from '@/common/util.js';
import contentNone from '@/components/contentNone.vue';
import datetimePicker from '@/components/dateTime.vue';
export default {
	data() {
		return {
			dataActive: 0,
			chooseClassifyIndex: 0, //选中的菜单下标
			showAlert: false, //是否显示弹窗
			
			chooseSubSelectorIndex: 0,//选中子菜单下标
			catagoryId:100101,//被选中的类别id
			kinds: [
				{
					id: '1',
					name: '通行',
					subSelectorList:[
						{
							id:'1001',
							name:'访客管理',
							levelList:[
								{
									id:'100104',
									value:'100104',
									name:'不选'
								},
								{
									id:'100101',
									value:'100101',
									name:'低配'
								},
								{
									id:'100102',
									value:'100102',
									name:'中配'
								},
								{
									id:'100103',
									value:'100103',
									name:'高配'
								},
							]
						},
						{
							id:'1002',
							name:'会议管理',
							levelList:[
								// {
								// 	id:'100204',
								// 	value:'100204',
								// 	name:'不选'
								// },
								{
									id:'100201',
									value:'100201',
									name:'低配'
								},
								{
									id:'100202',
									value:'100202',
									name:'中配'
								},
								{
									id:'100203',
									value:'100203',
									name:'高配'
								},
							]
						},
					]
				},
				{
					id: '2',
					name: '办公',
					subSelectorList:[
						{
							id:'2001',
							name:'访客管理1',
							levelList:[
								{
									id:'200104',
									value:'200204',
									name:'不选'
								},
								{
									id:'200101',
									value:'200201',
									name:'低配'
								},
								{
									id:'200102',
									value:'200102',
									name:'中配'
								},
								{
									id:'200103',
									value:'200103',
									name:'高配'
								},
							]
						},
						{
							id:'2002',
							name:'会议管理1',
							levelList:[
								{
									id:'200204',
									value:'200204',
									name:'不选'
								},
								{
									id:'200201',
									value:'200201',
									name:'低配'
								},
								{
									id:'200202',
									value:'200202',
									name:'中配'
								},
								// {
								// 	id:'200203',
								// 	value:'200203',
								// 	name:'高配'
								// },
							]
						},
					]
				},
				// {
				// 	id: '3',
				// 	name: '凉菜'
				// },
				// {
				// 	id: '4',
				// 	name: '热菜'
				// },
				// {
				// 	id: '5',
				// 	name: '蔬菜'
				// },
				// {
				// 	id: '6',
				// 	name: '主食'
				// }
			],
			date: [
				{ tiems: '12-13', week: '星期五' },
				{ tiems: '12-14', week: '星期六' },
				{ tiems: '12-15', week: '星期日' },
				{ tiems: '12-16', week: '星期一' },
				{ tiems: '12-17', week: '星期二' },
				{ tiems: '12-18', week: '星期三' },
				{ tiems: '12-19', week: '星期四' },
				{ tiems: '12-20', week: '星期五' },
				{ tiems: '12-21', week: '星期六' },
				{ tiems: '12-22', week: '星期日' },
				{ tiems: '12-23', week: '星期一' },
				{ tiems: '12-24', week: '星期二' }
			],
			foodList: [],
			chooseFoodList: [], //选中的食品列表
			foodListAll: {}, //所有商品
			userId: getStorage('userInfo').id,
			takeFoodTime: '',
			currentTabIndex: 0,
			orderList: [
				{
					userName: '刘晓明',
					status: 1,
					order_time: '2020-01-10 09:00',
					price: 100,
					foodList: [
						{
							price: '20',
							company: '斤',
							picture: 'http://47.99.190.179:80/appImageDir/a68b13fe0bcf4ee1992ee32623055639.jpg',
							food_name: '猪蹄',
							count: 2
						},
						{
							price: '30',
							company: '份',
							picture: 'http://47.99.190.179:80/appImageDir/42d0a21e68804c398ca3abb4bdc20314.jpg',
							food_name: '鱿鱼圈',
							count: 2
						}
					]
				}
			], //订单列表
			chooseWorkerId: 1, //选择的项目
			chooseWorkerName: '', //选择的项目名称
			pros: [{ id: 0, name: '不选' },{ id: 1, name: '低配' }, { id: 2, name: '中配' }, { id: 3, name: '高配' }], //类型
			items: [	{
							value: 'USA',
							name: '实名认证'
						},
						{
							value: 'CHN',
							name: '自助登记',
							checked: 'true'
						},
						{
							value: 'BRA',
							name: '大屏播报'
						},
						{
							value: 'USA1',
							name: '实名认证1'
						},
						{
							value: 'USA2',
							name: '实名认证2'
						},
					],
			
		};
	},
	components: {
		contentNone,
		datetimePicker
	},
	computed: {
		
		totalPrice() {
			let totalPrice = 0;
			this.chooseFoodList.forEach((v, i) => {
				let itemTotalPrice = v.price * v.buyNum;
				totalPrice += itemTotalPrice;
			});
			return totalPrice;
		},
		totalNum() {
			let totalNum = 0;
			this.chooseFoodList.forEach((v, i) => {
				totalNum += v.buyNum;
			});
			return totalNum;
		}
	},
	onShow() {
		this.chooseFoodList = [];
		this.getCatagoryList();
	},
	methods: {
		getCatagoryList(){
			let data = {
				method: getCatagoryList,
				data: { userId: this.userId }
			};
			callbackRequest(data).then(res => {
				if (res.data.returnCode == 1) {
					let result = res.data.returnData;
					this.kinds = result.list;
					console.log(this.kinds);
					this.subItemClick(this.chooseSubSelectorIndex)
				}
			});
		},
		//根据类别id展示产品列表
		getProductionList(){
			let data = {
				method: getProductionList,
				data: { userId: this.userId,catagoryId:this.catagoryId }
			};
			callbackRequest(data).then(res => {
				if (res.data.returnCode == 1) {
					let result = res.data.returnData;
					this.items = result.list;
					console.log(this.items);
					
				}
			});
		},
		
		checkboxChange(){
			
		},
		//切换分类
		kindClick(index) {
			this.chooseClassifyIndex = index;
			this.chooseSubSelectorIndex = 0;
			this.subItemClick(this.chooseSubSelectorIndex)
		},
		subItemClick(index){
			this.chooseSubSelectorIndex = index;
			this.pros = this.kinds[this.chooseClassifyIndex].subSelectorList[this.chooseSubSelectorIndex].levelList||[];
			
			if(this.pros.length > 0){
				this.chooseWorkerId = this.pros[0].id;
				this.chooseWorkerName = this.pros[0].name;
				this.chooseWorker(this.chooseWorkerId,this.chooseWorkerName);
			}
			
		},
		//选择配置
		chooseWorker(id, name) {
			if (this.chooseWorkerId != id) {
				this.chooseWorkerId = id;
				this.chooseWorkerName = name;
			}
			this.catagoryId = id;
			this.getProductionList();
		},
		//点击日期
		switchTab(i) {
			this.dataActive = i;
		},
		//加入购物车  || 购物车商品数量 加1
		addItem(item) {
			if (this.chooseFoodList.length == 0) {
				this.$set(item, 'buyNum', 1);
				this.chooseFoodList.push(item);
				return false;
			} else {
				let boolean = this.chooseFoodList.every(function(value) {
					return value.id != item.id;
				});
				console.log(boolean);
				if (boolean) {
					this.$set(item, 'buyNum', 1);
					this.chooseFoodList.push(item);
				} else {
					item.buyNum++;
				}
			}
		},
		//购物车商品数量 减1
		removeItem(item) {
			// this.$set(item,item.buyNum --);
			item.buyNum--;
			if (item.buyNum == 0) {
				this.chooseFoodList.forEach((v, i) => {
					if (v.id == item.id) {
						this.chooseFoodList.splice(i, 1);
						if (this.chooseFoodList.length == 0) {
							this.showAlert = false;
						}
					}
				});
			}
		},
		submit() {
			let arr = [];
			this.chooseFoodList.forEach((v, i) => {
				let item = {
					goodsId: v.kinds_id,
					goodsNum: v.buyNum
				};
				arr.push(item);
			});
			let data = {
				method: submitOrder,
				data: {
					userId: this.userId,
					diningRoomId: 3,
					takeFoodTime: this.takeFoodTime,
					orderDetails: arr
				}
			};
			callbackRequest(data).then(res => {
				if (res.data.returnCode == 1) {
					alertTip('预定成功');
					setTimeout(function() {
						uni.navigateTo({
							url: '/pages/order-form/order-form'
						});
					}, 1500);
				} else {
					alertTip(res.data.returnMsg);
				}
			});
		},
		onNavigationBarButtonTap: function() {
			uni.navigateTo({
				url: '../order-form/order-form'
			});
		},
		chooseDate(e) {
			this.takeFoodTime = e.time;
		}
	}
};
</script>

<style lang="scss">
@import '@/static/css/common.scss';

uni-checkbox-group uni-label{
	width: 33% !important;
	 display: inline-flex;
	 padding:20upx;
	 line-height: 46upx;
  }
.container {
	min-height: 100vh;
	overflow: hidden;
	background: #f8f8f8;
	
	.titleWrap{
		text-align: center;
		font-weight: 600;
		font-size: 36upx;
		padding:20upx 0upx;
		border-bottom: solid #CFCFCF 1px;
	}
	.banner-box {
		width: 100%;
		height: 240upx;
		position: absolute;
		top: 0;
		left: 0;
		image {
			width: 100%;
			height: 100%;
		}
		border-radius: 30upx;
	}
	.my-code {
		background: #fff;
		padding-top: 80rpx;
		.code-box {
			background: #fff;
			overflow: hidden;
			.code-img {
				display: block;
				width: 350rpx;
				height: 350rpx;
				margin: 70rpx auto 100rpx;
			}
		}
		.money {
			height: 60rpx;
			text-align: center;
			line-height: 60rpx;
			font-size: 28rpx;
		}
		.tip {
			font-size: 26rpx;
			color: #666;
			line-height: 40rpx;
			padding: 0 0 30rpx;
			text-align: center;
		}
	}
}
.uni-list {
	background: #fff;
	.list-item {
		border-bottom: 10upx solid #f8f8f8;
		padding: 30upx 20upx;
		.content {
			overflow: hidden;
			.image-box {
				float: left;
				width: 200upx;
				height: 200upx;
				image {
					display: block;
					width: 100%;
					height: 100%;
				}
			}
			.fr-content {
				margin-left: 220upx;
				font-size: 26upx;
				.text {
					color: #666;
					line-height: 40upx;
					margin-bottom: 10upx;
					text {
						float: left;
						color: #333;
						padding-right: 10upx;
					}
				}
				.status {
					color: red;
					margin-left: 280upx;
					position: absolute;
				}
			}
		}
		.bottom {
			overflow: hidden;
			padding: 10upx 20upx 0;
			.num-box {
				float: left;
				font-size: 28upx;
				color: #333;
				line-height: 40upx;
				padding-top: 20upx;
				text {
					color: #5fbf3d;
					padding-left: 4upx;
				}
			}
			.vote-btn {
				float: right;
				width: 160upx;
				height: 60upx;
				background: #5fbf3d;
				font-size: 26upx;
				color: #fff;
				text-align: center;
				line-height: 60upx;
				border-radius: 4upx;
			}
		}
	}
}
.raffle {
	width: 600rpx;
	height: 600rpx;
}

.main {
	position: absolute;
	// margin: 42upx 40upx 0;
	width: 100%;
	height:100%;
	.cont {
		// margin: 0px -44upx 0px -44upx;
	}
	.tab-box {
		overflow: hidden;
		border-radius: 10upx 10upx 0 0;
		background: rgba(132, 149, 167, 0.8);
		height: 70upx;

		.tab-item {
			float: left;
			height: 70upx;
			width: 50%;
			font-size: 30upx;
			color: #e5f6ff;
			text-align: center;
			line-height: 70upx;
		}

		.active_tab {
			background: #fff;
			color: #333;
			border-radius: 10upx 10upx 0 0;
			font-weight: bold;
		}
	}
	.tip {
		font-size: 26upx;
		text-align: center;
		color: #00c277;
		margin: 10upx;
	}
	.classify-box {
		position: absolute;
		height: 100%;
		float: left;
		width: 180upx;
		height: 100%;
		background: #eee;
		overflow: auto;
		.classify-item {
			padding: 30upx 0;
			line-height: 60upx;
			text-align: left;
			padding-left: 30upx;;
			text {
				font-size: 30upx;
				color: #666;
			}
			.mainSelector{
				padding-bottom:12upx;
				color: black;
			}
			.subSelector{
				font-size:26upx;
				text-align: right;
				padding:12upx;
			}
		}
		.active {
			background: #fff;
			text: {
				color: #00c277;
			}
		}
		
		.subActive {
			color: #007aff;
			
		}
	}
}
.food-list {
	margin-left: 178upx;
	height: 100%;
	overflow: auto;
	background: #fff;
	.produnctionWrap{
		font-size: 24upx;
		
	}
	.productionCheckbox{
		 transform:scale(0.7);
	}
	.barber {
	    background: #fff;
	    display: flex;
	    align-items: center;
	    padding: 0 20upx 20upx;
	    height: 60upx;
	    border-bottom: 1px solid #eee;
		margin: 10upx 10upx;
		
		.barberactive {
		    background: #007aff !important;
		}
		
		.barber-item{
			padding-right:30rpx;
			line-height:40rpx;
			
			
			.round {
			    width: 32upx;
			    height: 32upx;
			    border-radius: 50%;
			    background: #cccccc;
			    display: inline-block;
			    margin-right: 10upx;
				vertical-align:middle;
				border-radius: 32upx;
				
			}
			
			.input_left{
				vertical-align: middle;
				font-size:28rpx;
				color:#555;
			}
		}
	}
	.list-item {
		overflow: hidden;
		padding: 20upx 14upx;
		border-bottom: 1px solid #f8f8f8;
		.img-box {
			float: left;
			width: 200upx;
			height: 200upx;
			image {
				display: block;
				width: 100%;
				height: 100%;
			}
		}
		.fr-content {
			margin-left: 220upx;
			.name {
				font-size: 30upx;
				color: #333;
				font-weight: bold;
				@include overstepOne;
				line-height: 40upx;
				margin-bottom: 6upx;
			}
			.num {
				font-size: 26upx;
				color: #666;
				line-height: 40upx;
				margin-bottom: 6upx;
			}
			.quota-num {
				min-height: 50rpx;
			}
			.buy-num {
				display: inline-block;
				border: 1px solid #ff0000;
				font-size: 24upx;
				color: #ff0000;
				border-radius: 8upx;
				line-height: 32upx;
				padding: 0 10upx;
				vertical-align: top;
			}
			.choose-num {
				float: right;
				image {
					width: 40upx;
					height: 40upx;
					vertical-align: top;
				}
				text {
					display: inline-block;
					font-size: 28upx;
					color: #666;
					width: 80upx;
					text-align: center;
					line-height: 40upx;
					vertical-align: top;
				}
			}
			.price {
				font-size: 32upx;
				color: #ff0000;
			}
		}
	}
}

.footer-box {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 80upx;
	background: #7ae5bc;
	text-align: center;
	line-height: 80upx;
	image {
		width: 50upx;
		vertical-align: middle;
	}
	text {
		font-size: 30upx;
		color: #fff;
		vertical-align: middle;
		padding-left: 10upx;
	}
}
.pay-box {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 80upx;
	background: #fff;
	line-height: 80upx;
	.fl-box {
		// display: inline-block;
		// float:left;
		padding: 10upx 0 0 30upx;
		line-height: 60upx;
		margin-right: 230rpx;
		image {
			width: 50upx;
			vertical-align: middle;
			margin: 6upx 24upx 0 0;
			vertical-align: top;
		}
		text {
			font-size: 28upx;
			color: #00c277;
			vertical-align: top;
		}
	}
	.fr-btn {
		float: right;
		width: 200upx;
		background: #00c277;
		font-size: 28upx;
		color: #fff;
		text-align: center;
		line-height: 80upx;
	}
}
.common-shade {
	bottom: 80upx;
	height: auto;
	.list-box {
		width: 100%;
		height: 500upx;
		position: absolute;
		bottom: 0;
		left: 0;
		background: #fff;
		margin-left: 0;
	}
}
.food-list1 {
	height: 100%;
	overflow: auto;
	background: #fff;
	// margin: 15upx;
	.main {
		background: #ffffff;
		margin: 10upx;
		border-radius: 10upx;
		.top {
			border-bottom: 1px solid #eee;
			padding: 20upx 30upx;
			overflow: hidden;
			.dining {
				float: left;
				font-size: 28upx;
				line-height: 40upx;
				color: #555;
			}
			.status {
				float: right;
				font-size: 24upx;
				color: #00c277;
				line-height: 40upx;
			}
		}

		.bottom {
			padding: 5upx 5upx 0upx 5upx;
			border-top: 1px solid #eee;
			line-height: 50upx;
			overflow: hidden;
			.order-time {
				font-size: 26rpx;
				color: #666;
			}
			.price {
				float: right;
				font-size: 28upx;
				color: #666;
				.btn {
					border: 1px solid #00C277;
					border-radius: 10upx;
					padding: 0upx 20upx ;
					color:#00C277;
				}
			}
		}
	}
	.list-item {
		overflow: hidden;
		padding: 10upx 10upx 0upx 5upx;
		border-bottom: 1px solid #f8f8f8;
		.img-box {
			border-radius: 10upx;
			float: left;
			width: 200upx;
			height: 200upx;
			image {
				display: block;
				width: 100%;
				height: 100%;
				border-radius: 6px;
			}
		}

		.fr-content {
			margin-left: 220upx;
			.name {
				font-size: 30upx;
				color: #333;
				font-weight: bold;
				@include overstepOne;
				line-height: 40upx;
				margin-bottom: 6upx;
			}
			.num {
				font-size: 26upx;
				color: #666;
				line-height: 40upx;
				margin-bottom: 6upx;
			}
			.quota-num {
				min-height: 50rpx;
			}
			.buy-num {
				display: inline-block;
				border: 1px solid #ff0000;
				font-size: 24upx;
				color: #ff0000;
				border-radius: 8upx;
				line-height: 32upx;
				padding: 0 10upx;
				vertical-align: top;
			}
			.choose-num {
				float: right;
				image {
					width: 40upx;
					height: 40upx;
					vertical-align: top;
				}
				text {
					display: inline-block;
					font-size: 28upx;
					color: #666;
					width: 80upx;
					text-align: center;
					line-height: 40upx;
					vertical-align: top;
				}
				.fl {
					float: right;
					padding: 10upx 20upx;
					font-size: 24upx;
					color: $assistColor;
					line-height: 32upx;
					border: 1px solid $assistColor;
					border-radius: 8upx;
					margin-left: 10upx;
				}
			}
			.price {
				font-size: 32upx;
				color: #ff0000;
				margin-top: 116upx;
			}
			.ct {
				margin-left: 20upx;
				color: #ff00009c;
			}
		}
	}
}
</style>