材料页面

src/components/order/index.vue

@@ -99,7 +99,16 @@
 			return {
 				timeout: false,
 				timestamp: 0,
-				orderType: 0
+				/** orderType
+				0 待接单、
+				1 待预约、
+				2 待签到、
+				3 待完工、
+				4 审核中、
+				5 异常单、
+				6 已完工
+				*/
+				orderType: 0 
 			};
 		},
 		computed: {
@@ -124,7 +133,7 @@
 							return this.buttonStyles[2]
 				}
 			},
-			showCountTime() {
+			showCountTime() { // ((待预约、 待签到、 待完工) || (待接单 && 业务类型非抢单)) && 有超过时间点
 				return ([1, 2, 3].indexOf(this.orderType) != -1 || (this.orderType == 0 && this.orderData
 					.orderBusinessType != 'R')) && this.orderData.currentOverTime
 			},

src/pages.json

@@ -260,7 +260,17 @@
 				"navigationBarBackgroundColor":"#F4F5F7"
             }
             
-        }
+        },
+		{
+		    "path" : "pages/order/material",
+		    "style" :                                                                                    
+		    {
+		        "navigationBarTitleText": "勘察材料",
+		        "enablePullDownRefresh": false,
+				"navigationBarBackgroundColor":"#FFFFFF"
+		    }
+		    
+		}
     ],
 	"globalStyle": {
 		"navigationBarTextStyle": "black",

src/pages/order/complete.vue

@@ -195,7 +195,7 @@
 				this.orderServiceType = decodeURIComponent(option.orderServiceType)
 				this.inGuaranteePeriod = option.inGuaranteePeriod
             } else {
-                this.orderId = 9708719
+                this.orderId = 11878346
 				this.categoryId = 88
 				this.orderServiceType = '安装'
 				this.inGuaranteePeriod = 'Y'
@@ -453,6 +453,9 @@
 					case 'date':
                         formType = 'time'
                         break
+					case 'form':
+						    formType = 'form'
+						    break
                 }
                 return formType
             },

src/pages/order/material.vue

+<template>
+	<view class="mtr-content">
+		<view class="content-view">
+			<view class="mtr-tab">
+				<u-table align="center" border-color="#FFFFFF" color="#333333" font-size="rpx" :th-style="thStyle"
+					padding="0">
+					<u-tr class="u-tr">
+						<u-th class="u-th  content-tab-th" v-for="(value, key) in titles" :key="key" width="auto">
+							<text :class="['tab-th-txt', {'left': key == firstKey}]">{{value}}</text>
+						</u-th>
+					</u-tr>
+					<view class="line-view"></view>
+					<u-tr class="u-tr" v-for="(item, index) in list" :key="index">
+						<u-td class="u-td" v-for="(value, key) in titles" :key="key">
+							<text :class="['tab-th-txt', {'left': key == firstKey}]">{{item[key]}}</text>
+						</u-td>
+					</u-tr>
+				</u-table>
+			</view>
+			<view class="mtr-other">
+				<view class="line-view"></view>
+				<view class="other-space">
+					<text>其他</text>
+					<image class="image-view" :src="addImage" @click="handleAdd"></image>
+				</view>
+				<view v-if="other.length > 0" class="other-content">
+					<view class="other-space" v-for="(item, index) in other" :key="index">
+						<view class="input-view">
+							<view class="other-space">
+								<text class="input-title">说明：</text>
+								<view class="input-content">
+									<u-input v-model="item.title" :clearable="false" placeholder-style="color:#999999;font-size:26rpx" />
+								</view>
+							</view>
+							<view class="other-space">
+								<text class="input-title">金额：</text>
+								<view class="input-content">
+									<u-input v-model="item.value" :clearable="false" placeholder-style="color:#999999;font-size:26rpx" />
+								</view>
+							</view>
+						</view>
+						<image class="image-view" :src="subtractImage" @click="handleSubtract"></image>
+					</view>
+
+				</view>
+				<view class="other-space">
+					<text>超出金额</text>
+					<text>{{money}}</text>
+				</view>
+			</view>
+		</view>
+		<view class="bottom-view">
+			<u-button class="sure-button" type="primary" shape="circle" @click="handleSure" :custom-style="buttonStyle">
+				确定
+			</u-button>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				list: [],
+				other: []
+			};
+		},
+		computed: {
+			buttonStyle() {
+				return {
+					width: "600rpx",
+					height: "104rpx",
+					"font-size": "32rpx",
+					"font-weight": "bold",
+				};
+			},
+			titles() {
+				return {
+					name: '材料名称',
+					unit: '单位',
+					freeAmount: '免费量',
+					price: '单价',
+					consumption: '预计用量'
+				}
+			},
+			thStyle() {
+				return {
+					'font-weight': 'bold'
+				}
+			},
+			firstKey() {
+				return Object.keys(this.titles)[0]
+			},
+			subtractImage() {
+				return process.uniEnv.qn_base_url + 'qxiao.png'
+			},
+			addImage() {
+				return process.uniEnv.qn_base_url + 'tianjia.png'
+			},
+			money() {
+				var amount = 0
+				for (var item of this.list) {
+					amount += Math.abs(item.consumption - item.freeAmount) * item.price
+				}
+				for (var item of this.other) {
+					if (item.value) {
+						amount += Number(item.value)
+					}
+
+				}
+				return amount
+			}
+		},
+		created() {
+			// 测试数据
+			console.log('0000')
+			for (var i = 0; i < 20; i++) {
+				this.list.push({
+					name: '开关发大法师放大范德萨发大水',
+					unit: '个',
+					freeAmount: '1',
+					price: '45.0',
+					consumption: '4',
+				})
+			}
+		},
+		methods: {
+			handleAdd() {
+				this.other.push({
+					title: '',
+					value: ''
+				})
+			},
+			handleSubtract(index) {
+				this.other.splice(index, 1)
+			},
+			handleSure() {
+
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.mtr-content {
+		display: flex;
+		flex-direction: column;
+		background-color: #F4F5F7;
+		height: 100vh;
+
+		.content-view {
+			padding: 30rpx;
+			margin: 20rpx 30rpx;
+			border-radius: 12rpx;
+			background-color: #FFFFFF;
+			height: 100%;
+			overflow: auto;
+
+			.line-view {
+				background-color: #F4F5F7;
+				height: 2rpx;
+				margin: 20rpx 0;
+			}
+
+			.mtr-tab {
+				.tab-th-txt {
+					background-color: #FFFFFF;
+					padding: 10rpx 0;
+
+					&.left {
+						text-align: left;
+					}
+				}
+			}
+
+
+			.mtr-other {
+				.other-space {
+					display: flex;
+					justify-content: space-between;
+					align-items: center;
+				}
+
+				.other-content {
+					margin-bottom: 30rpx;
+				}
+
+				.input-view {
+					padding: 10rpx 30rpx;
+					width: 100%;
+					border-radius: 12rpx;
+					border: 1px #F4F5F7 solid;
+					margin-bottom: 30rpx;
+
+					.input-title {
+						width: 80rpx;
+						flex-shrink: 0;
+						color: #333333;
+						font-size: 26rpx;
+					}
+
+					.input-content {
+						width: 100%;
+					}
+				}
+
+				.image-view {
+					width: 52rpx;
+					height: 52rpx;
+					flex-shrink: 0;
+					margin: 30rpx 0 30rpx 30rpx;
+				}
+			}
+		}
+
+		.bottom-view {
+			margin-bottom: 44rpx;
+			margin-top: 10rpx;
+			height: 104rpx;
+		}
+	}
+</style>