2021-8-23

pages/test/test.vue

@@ -54,29 +54,30 @@
 			</view>
 		</view>
 		<view class="btn" @click="next" v-if="isShow"><view class="btn-left">提交</view></view>
-		<view class="result">
+		<view class="result" v-if="num1">
 			<view class="result-title">测试结果</view>
 			<view class="border"></view>
 			<view class="result-box">
-				<view class="swiper-item" v-if="num1">
+				<view class="swiper-item">
 					<view class="effect">
-						<view class="title">改造后的数据</view>
 						<view class="information">
 							<view class="benefits">
 								<view class="unit">
-									<!-- {{ num1 }} -->
-									<view class="unit1">{{ num1 }}</view>
-									<view class="unit2">~</view>
-									<view class="unit3">{{ num2 }}</view>
+									<view class="unitBox">
+										<view class="unitText">{{ num1 }}</view>
+										<view class="unitText">~</view>
+										<view class="unitText">{{ num2 }}</view>
+									</view>
 								</view>
 								<view class="info">改造后用水量(吨/小时)</view>
 							</view>
 							<view class="benefits">
 								<view class="unit">
-									<!-- {{ num1 }} -->
-									<view class="unit1">{{ num3 }}</view>
-									<view class="unit2">~</view>
-									<view class="unit3">{{ num4 }}</view>
+									<view class="unitBox">
+										<view class="unitText">{{ num3 }}</view>
+										<view class="unitText">~</view>
+										<view class="unitText">{{ num4 }}</view>
+									</view>
 								</view>
 								<view class="info">年经济效益(万元)</view>
 							</view>
@@ -86,8 +87,6 @@
 				</view>
 			</view>
 		</view>
-		<view class="tanchang"></view>
-		<view class="botton-box"></view>
 		<aboutUs class="aboutUs"></aboutUs>
 	</view>
 </template>
@@ -111,8 +110,8 @@ export default {
 			line_type: '',
 			line_num: '',
 			water_using: '',
-			day_work_times: '',
-			year_work_day: '',
+			day_work_times: 12,
+			year_work_day: 330,
 			deal_cost: '',
 			array: ['塑料镀铬线', '五金镀铬线'],
 			index: '',
@@ -125,7 +124,7 @@ export default {
 	onLoad() {
 		this.loadData();
 	},
-	onShow(){
+	onShow() {
 		this.$nextTick(function() {
 			changeTaber(4);
 		});
@@ -259,6 +258,7 @@ export default {
 
 		// 表单交互 提交
 		next() {
+			this.isShow = false
 			if (this.name == '') {
 				uni.showToast({
 					title: '请输入您的姓名',
@@ -333,6 +333,10 @@ export default {
 				// this.$api.msg('请填写废水处理成本');
 				return;
 			}
+			uni.showLoading({
+				title: '计算中',
+				mask: true
+			});
 			addForm({
 				name: this.name,
 				address: this.address,
@@ -343,50 +347,50 @@ export default {
 				day_work_times: 12,
 				year_work_day: 330,
 				deal_cost: this.deal_cost
-			}).then(e => {
-				console.log('请求成功');
-				(this.isshow = false),
-					uni.pageScrollTo({
-						scrollTop: 0,
-						duration: 0
-					});
-				/** 
+			})
+				.then(e => {
+					uni.hideLoading();
+					console.log('请求成功');
+					(this.isShow = false),
+						uni.pageScrollTo({
+							scrollTop: 0,
+							duration: 0
+						});
+					/** 
 								交互式表单公式
 									改造后用水量为：目前用水量的30%—70%
 									经济效益=节约的水量X年工作时长（小时）X废水处理成本
 									节约的水量=目前用水量—改造后的用水量
 									经济效益也是一个范围值
 							 **/
-				// 改造后用水量
-				// this.num1 = this.water_using * 0.3;
-				// this.num2 = this.water_using * 0.7;
-				this.num1 = parseFloat(this.water_using * 0.3).toFixed(2);
-				this.num2 = parseFloat(this.water_using * 0.7).toFixed(2);
-
-				console.log('this.num1', this.num1);
-
-				// 节约的水量=目前用水量—改造后的用水量
-				this.savaWater1 = this.water_using - this.num1;
-				this.savaWater2 = this.water_using - this.num2;
-
-				console.log('this.savaWater1', this.savaWater1);
-				console.log('this.day_work_times', this.day_work_times);
-				console.log('this.deal_cost', this.deal_cost);
-
-				// 经济效益=节约的水量X年工作时长（小时）X废水处理成本
-				this.num3 = parseFloat((this.savaWater1 * 3960 * this.deal_cost) / 10000).toFixed(2);
-				this.num4 = parseFloat((this.savaWater2 * 3960 * this.deal_cost) / 10000).toFixed(2);
-
-				// this.name = "";
-				// this.address = "";
-				// this.telephone = "";
-				// this.line_type = "";
-				// this.line_num = "";
-				// this.water_using = "";
-				// this.day_work_times = "";
-				// this.year_work_day = "";
-				// this.deal_cost = "";
-			});
+					// 改造后用水量
+					// this.num1 = this.water_using * 0.3;
+					// this.num2 = this.water_using * 0.7;
+					this.num1 = parseFloat(this.water_using * 0.3).toFixed(2);
+					this.num2 = parseFloat(this.water_using * 0.7).toFixed(2);
+					console.log('this.num1', this.num1);
+					// 节约的水量=目前用水量—改造后的用水量
+					this.savaWater1 = this.water_using - this.num1;
+					this.savaWater2 = this.water_using - this.num2;
+					console.log('this.savaWater1', this.savaWater1);
+					console.log('this.day_work_times', this.day_work_times);
+					console.log('this.deal_cost', this.deal_cost);
+					// 经济效益=节约的水量X年工作时长（小时）X废水处理成本
+					this.num3 = parseFloat((this.savaWater1 * 3960 * this.deal_cost) / 10000).toFixed(2);
+					this.num4 = parseFloat((this.savaWater2 * 3960 * this.deal_cost) / 10000).toFixed(2);
+
+					// this.address = "";
+					// this.telephone = "";
+					// this.line_type = "";
+					// this.line_num = "";
+					// this.water_using = "";
+					// this.day_work_times = "";
+					// this.year_work_day = "";
+					// this.deal_cost = "";
+				})
+				.catch(e => {
+					uni.hideLoading();
+				});
 		},
 		change(item) {
 			// console.log('-----this.checkid', item);
@@ -397,7 +401,7 @@ export default {
 
 		// 重新测试
 		refresh() {
-			this.isshow = true;
+			this.isShow = true;
 			uni.pageScrollTo({
 				scrollTop: 0,
 				duration: 0
@@ -566,7 +570,9 @@ export default {
 
 <style lang="scss">
 .center {
+	height: auto;
 	background: #ffffff;
+	min-height: 100%;
 }
 
 .img {
@@ -642,15 +648,16 @@ export default {
 
 		.form-right {
 			margin-left: 2rpx;
-			padding: 12rpx;
+			line-height: 48rpx;
+			height: 48rpx;
+			padding-left: 12rpx;
 			width: 100%;
 			background-color: #ffffff;
 			border: 2rpx solid #bdbdbd;
 			border-radius: 6rpx;
-
 			.list-input {
 				font-size: 18rpx;
-
+				height: 100%;
 				.input-placeholder {
 					color: #c7c9d1;
 					font-size: 18rpx;
@@ -673,7 +680,7 @@ export default {
 	justify-content: center;
 	color: #ffffff;
 	font-size: 26rpx;
-
+	margin-bottom: 30rpx;
 	.btn-left {
 		width: 88%;
 		height: 70rpx;
@@ -691,9 +698,7 @@ export default {
 	flex-direction: column;
 	justify-content: center;
 	align-items: center;
-
 	.result-title {
-		margin-top: 50rpx;
 		display: flex;
 		justify-content: center;
 		align-items: center;
@@ -717,7 +722,6 @@ export default {
 
 	.result-box {
 		width: 100%;
-		height: 360rpx;
 		background: #0165b5;
 		margin-top: 24rpx;
 		.effect {
@@ -740,44 +744,24 @@ export default {
 					display: flex;
 					flex-direction: column;
 					align-items: center;
-
 					.unit {
 						width: 200rpx;
 						height: 200rpx;
 						background-color: #3874cb;
 						border-radius: 50%;
-						display: flex;
-						justify-content: center;
-						align-items: center;
 						color: #ffffff;
 						font-size: 64rpx;
 						display: flex;
-						flex-direction: column;
-
-						.unit1 {
-							width: 100%;
-							font-size: 34rpx;
-							display: flex;
-							padding-left: 34rpx;
-							justify-content: flex-start;
-							// background-color: pink;
-						}
-
-						.unit2 {
-							font-size: 34rpx;
-							margin: 0 12rpx;
-						}
-
-						.unit3 {
-							width: 100%;
+						justify-content: center;
+						align-items: center;
+						.unitText {
+							text-align: center;
 							font-size: 34rpx;
-							display: flex;
-							justify-content: flex-end;
-							padding-right: 34rpx;
 						}
 					}
 
 					.info {
+						color: #ffffff;
 						font-size: 24rpx;
 						margin-top: 32rpx;
 					}