上传快捷下单代码

pages.json

@@ -71,6 +71,15 @@
 			},
 			{
 				"path": "order/fastCreateOrder"
+			},
+			{
+				"path": "order/pictureOrder"
+			},
+			{
+				"path": "order/voiceOrder"
+			},
+			{
+				"path": "order/firmOrder"
 			}
 		]
 	}],

pages/index/index.vue

@@ -32,19 +32,9 @@
 				circular 
 				bgColor="#ffffff">
 			</uv-swiper>
-			<!-- <image src="../../static/image/home/2.png" mode=""></image> -->
 		</view>
 		
 		<view class="building-class">
-		<!-- 	<image src="../../static/image/home/3.png" mode=""></image>
-			<image src="../../static/image/home/4.png" mode=""></image>
-			<image src="../../static/image/home/5.png" mode=""></image>
-			<image src="../../static/image/home/6.png" mode=""></image>
-		</view>
-		<view class="text-building">
-			<text>XX建材</text>
-			<text>XX建材</text>
-			<text>XX建材</text> -->
 			<view class="line grid">
 				<uv-grid :col="4" :border="false">
 			

pages_order/order/fastCreateOrder.vue

@@ -0,0 +1,72 @@
+<template>
+	<view>
+		<navbar
+		title="快捷下单"
+		leftClick 
+		@leftClick="$utils.navigateBack"
+		/>
+		<view class="select-order">
+			<view class="picture-order">
+				<view class="picture-button" @click="$utils.redirectTo('/pages_order/order/pictureOrder')">
+					<uv-icon name="camera-fill" size="45rpx" color="#ffffff"></uv-icon>
+					<text>拍照下单</text>
+				</view>
+			</view>
+			<view class="ovice-order">
+				<view class="ovice-button" @click="$utils.redirectTo('/pages_order/order/voiceOrder')">
+					<uv-icon name="mic" size="45rpx" color="#ffffff"></uv-icon>
+					<text>语音下单</text>
+				</view>
+			</view>
+		</view>
+	</view>
+	
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				
+			};
+		}
+	}
+</script>
+
+<style lang="scss">
+	.select-order{
+		margin-top: 400rpx;
+		width: 100%;
+		height: 400rpx;
+		.picture-order{
+			height: 50%;
+			display: flex;
+			align-items: center;
+			.picture-button{
+				background-color: #DC2828;
+				color: #ffffff;
+				width: 85%;
+				height: 130rpx;
+				margin: auto;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				border-radius: 100rpx;
+			}
+		}
+		.ovice-order{
+			height: 50%;
+			.ovice-button{
+				color: #ffffff;
+				background-color: #DC2828;
+				width: 85%;
+				height: 130rpx;
+				margin: auto;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				border-radius: 100rpx;
+			}
+		}
+	}
+</style>

pages_order/order/firmOrder.vue

@@ -0,0 +1,23 @@
+<template>
+	<view class="hand-firm">
+		<navbar
+		title="确定下单"
+		leftClick 
+		@leftClick="$utils.navigateBack"
+		/>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				
+			};
+		}
+	}
+</script>
+
+<style lang="scss">
+
+</style>

pages_order/order/pictureOrder.vue

@@ -0,0 +1,96 @@
+<template>
+	<view class="hand-top">
+		<navbar
+		title="快捷下单"
+		leftClick 
+		@leftClick="$utils.navigateBack"
+		/>
+		<view class="picture-top">
+			<view class="left-icon"></view>
+			<text>拍照下单</text>
+		</view>
+		<view class="picture-upload">
+			<view class="upload-content">
+				<uv-icon name="camera-fill" color="#D03F25" size="200"></uv-icon>
+			</view>
+			<view class="text-upload">
+				<text>(拍照上传你所需要识别的产品图片)</text>
+			</view>
+		</view>
+		<view class="fast-order">
+			<view class="picture-button" @click="$utils.redirectTo('/pages_order/order/firmOrder')">
+				<text>快捷下单</text>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				
+			};
+		}
+	}
+</script>
+
+<style lang="scss">
+	.hand-top{
+		background-color: #ffffff;
+		.picture-top{
+			color: #333333;
+			height: 100rpx;
+			display: flex;
+			align-items: center;
+			background-color: #ffffff;
+			.left-icon{
+				background-color: #D03F25;
+				display: inline-block;
+				width: 10rpx;
+				height: 30rpx;
+				border-radius: 100rpx;
+				margin-left: 50rpx;
+				margin-right: 20rpx;
+				padding-bottom: 5rpx;
+			}
+		}
+		.picture-upload{
+			background-color: #ffffff;
+			height: 550rpx;
+			.upload-content{
+				width: 680rpx;
+				height: 400rpx;
+				background-color: #ffffff;
+				background-color: #F4F4F4;
+				margin: auto;
+				margin-top: 50rpx;
+				border-radius: 20rpx;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				margin-top: 60rpx;
+			}
+			.text-upload{
+				height: 100rpx;
+				text-align: center;
+				line-height: 100rpx;
+				color: #666666;
+			}
+			
+		}
+		.fast-order{
+			.picture-button{
+				color: #ffffff;
+				background-color: #DC2828;
+				width: 85%;
+				height: 100rpx;
+				margin: auto;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				border-radius: 100rpx;
+			}
+		}
+	}
+</style>

pages_order/order/voiceOrder.vue

@@ -0,0 +1,164 @@
+<template>
+	<view class="hand-top">
+		<navbar
+		title="快捷下单"
+		leftClick 
+		@leftClick="$utils.navigateBack"
+		/>
+		<view class="voice-top">
+			<view class="left-icon"></view>
+			<text>录制语音下单</text>
+		</view>
+		<view class="voice-upload">
+			<view class="long-speak">
+				<uv-icon name="mic" size="45rpx" color="#DC2828"></uv-icon>
+				<text>长按可说话</text>
+			</view>
+			<view class="recording-file">
+				<view class="file">
+						<image src="../static/order/1.png" mode="" class="record"></image>
+						<image src="../static/order/2.png" mode="" class="file-start"></image>
+						<image src="../static/order/3.png" mode="" class="file-delete"></image>
+					<view class="file-top">
+						<p>录音文件01.mp3</p>
+						<p style="color: #A6ADBA;">12MB</p>
+					</view>
+					<view class="file-bottom">
+						<view class="schedule"></view>
+						<text>100%</text>
+					</view>
+				</view>
+			</view>
+			<view class="text-upload">
+				<text>(录音上传你所需要识别的产品语音)</text>
+			</view>
+		</view>
+		<view class="fast-order">
+			<view class="voice-button" @click="$utils.redirectTo('/pages_order/order/firmOrder')">
+				<text>快捷下单</text>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				
+			};
+		}
+	}
+</script>
+
+<style lang="scss">
+	.hand-top{
+		background-color: #ffffff;
+		.voice-top{
+			color: #333333;
+			height: 100rpx;
+			display: flex;
+			align-items: center;
+			background-color: #ffffff;
+			.left-icon{
+				background-color: #D03F25;
+				display: inline-block;
+				width: 10rpx;
+				height: 30rpx;
+				border-radius: 100rpx;
+				margin-left: 50rpx;
+				margin-right: 20rpx;
+				padding-bottom: 5rpx;
+			}
+		}
+		.voice-upload{
+			.long-speak{
+					color: #DC2828;
+					border: 1rpx solid #DC2828;
+					width: 85%;
+					height: 80rpx;
+					margin: auto;
+					margin-top: 60rpx;	
+					display: flex;
+					align-items: center;
+					justify-content: center;
+					border-radius: 100rpx;
+			}
+			.recording-file{
+				height: 250rpx;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				position: relative;
+				margin-top: 30rpx;
+				.file{
+					background-color: #F4F4F4;
+					width: 95%;
+					height: 200rpx;
+					border-radius: 20rpx;
+					.record{
+						position: absolute;
+						height: 80rpx;
+						width: 80rpx;
+						top: 65rpx;
+						left: 60rpx;
+					}
+					.file-start{
+						position: absolute;
+						height: 30rpx;
+						width: 30rpx;
+						top: 60rpx;
+						right: 100rpx;
+					}
+					.file-delete{
+						position: absolute;
+						height: 30rpx;
+						width: 30rpx;
+						top: 60rpx;
+						right: 50rpx;
+					}
+					.file-top{
+						position: absolute;
+						width: 280rpx;
+						top: 60rpx;
+						left: 160rpx;
+					}
+					.file-bottom{
+						position: absolute;
+						width: 88%;
+						height: 30rpx;
+						display: flex;
+						align-items: center;
+						top: 160rpx;
+						left: 60rpx;
+						.schedule{
+							width: 80%;
+							height: 10rpx;
+							border-radius: 30rpx;
+							background-color: #D03F25;
+							margin-right: 15rpx;
+						}
+					}
+				}
+			}
+			.text-upload{
+				height: 100rpx;
+				text-align: center;
+				line-height: 100rpx;
+				color: #666666;
+				margin-bottom: 100rpx;
+			}
+		}
+		.voice-button{
+			color: #ffffff;
+			background-color: #DC2828;
+			width: 85%;
+			height: 100rpx;
+			margin: auto;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			border-radius: 100rpx;
+		}
+	}
+</style>