no message

pagesRepairs/addGoods/addGoods.vue

@@ -4,7 +4,7 @@
 		<view class="search">
 			<img src="../../static/images/repairsImg/search.png" />
 
-			<input type="text" placeholder="请输入搜索内容" />
+			<input type="text" placeholder="请输入搜索内容" v-model="searchValue" />
 		</view>
 
 		<!-- 耗材区域 -->
@@ -28,7 +28,7 @@
 		</view>
 		<view class="notes2" v-else></view>
 
-		<view class="btn">确认</view>
+		<view class="btn" @click="handleAffirm">确认</view>
 	</view>
 </template>
 
@@ -36,20 +36,38 @@
 export default {
 	data() {
 		return {
+			// 搜索框绑定数据
+			searchValue: '',
+			// 输入框当前输入数据的长度
 			textLength: 0,
+			// 左边数组的索引
 			activeIndex: 0,
-			activeIndex2: 0,
+			// 左边数组
 			list: ['水电', '木工类', '行政楼', '泥工类', '其他'],
+			// 右边数组的索引
+			activeIndex2: 0,
+			// 右边数组
 			List2: ['下水道', '安全指示牌', '消费应急灯', '排水管道', '吊顶', '风扇', '没电']
 		}
 	},
 	methods: {
+		// 确认按钮回调
+		handleAffirm() {
+			// console.log(this.List2[this.activeIndex2])
+			uni.$emit('addConsumable', {
+				data: this.List2[this.activeIndex2]
+			})
+			uni.navigateBack(1)
+		},
+		// 左边数组切换回调
 		handleChange(index) {
 			this.activeIndex = index
 		},
+		// 右边数组切换回调
 		handleChange2(index) {
 			this.activeIndex2 = index
 		},
+		// 输入框输入值变化回调
 		handleInput(e) {
 			// console.log(e.detail.value.length)
 			this.textLength = e.detail.value.length
@@ -63,6 +81,7 @@ export default {
 	display: flex;
 	flex-direction: column;
 	width: 100vw;
+	height: 100vh;
 	overflow-y: auto;
 
 	.search {

pagesRepairs/components/floatButton.vue

@@ -1,45 +0,0 @@
-<template>
-	<view>
-		<movable-area class="movable-area">
-			<movable-view class="movable-view" :x="x" :y="y" direction="all" @click="handleGoPage">消息通知</movable-view>
-		</movable-area>
-	</view>
-</template>
-
-<script>
-export default {
-	data() {
-		return {
-			x: 300, //x坐标
-			y: 400 //y坐标
-		}
-	},
-	methods: {
-		// 点击悬浮按钮回调
-		handleGoPage() {
-			uni.navigateTo({
-				url: '/pagesRepairs/message/message'
-			})
-		}
-	}
-}
-</script>
-
-<style lang="scss">
-$all_width: 96rpx;
-$all_height: 96rpx;
-
-.movable-area {
-	height: calc(100vh - 100rpx);
-	width: 750rpx;
-	top: 0;
-	position: fixed;
-	pointer-events: none; //此处要加，鼠标事件可以渗透
-	.movable-view {
-		background-color: rgba(000, 000, 000, 0.5);
-		width: $all_width;
-		height: $all_height;
-		pointer-events: auto; //恢复鼠标事件
-	}
-}
-</style>

pagesRepairs/components/recording.vue

@@ -1,72 +1,62 @@
 <template>
-	<view class="record-layer">
-		<view class="record-box">
-			<view class="record-btn-layer" v-if="tempFilePath == ''">
-				<button class="record-btn" :class="longPress == '1' ? 'record-btn-1' : 'record-btn-2'" @longpress="longpressBtn()" @touchend="touchendBtn()">
-					<image src="../../static/image/logo.png" />
-					<text>{{ longPress == '1' ? '按住说话' : '说话中...' }}</text>
-				</button>
-			</view>
-			<view class="record-btn-layer" v-else>
-				<button class="record-btn" @longpress="delShow = true" @click="playBtn()" :class="playStatus == '1' ? 'record-btn-2' : 'record-btn-1'">
-					<image src="../../static/image/logo.png" />
-					<text>{{ playStatus == '1' ? count + 's' : '点击播放' }}</text>
-				</button>
-			</view>
-			<!-- 语音音阶动画 -->
-			<view class="prompt-layer prompt-layer-1" v-if="longPress == '2'">
-				<view class="prompt-loader">
-					<view class="em" v-for="(item, index) in 15" :key="index"></view>
-				</view>
-				<text class="p">{{ '剩余：' + count + 's' }}</text>
-				<text class="span">松手结束录音</text>
-			</view>
-			<!-- 删除 -->
-			<view class="prompt-layer prompt-layer-2" v-if="delShow" @click.stop="delBtn()">
-				<text>删除</text>
+	<view class="container">
+		<view class="record-btn-layer">
+			<button
+				:class="[longPress === '1' ? 'record-btn-1' : 'record-btn-2', VoiceTitle === '松开手指,取消录音' ? 'record-btn-3' : '']"
+				@longpress="longpressBtn"
+				@touchend="touchendBtn"
+				@touchmove="handleTouchMove"
+			>
+				<text>{{ VoiceText }}</text>
+			</button>
+		</view>
+		<!-- 语音音阶动画 -->
+		<view :class="VoiceTitle != '松开手指,取消录音' ? 'prompt-layer prompt-layer-1' : 'prompt-layer1 prompt-layer-1'" v-if="longPress == '2'">
+			<view class="prompt-loader">
+				<view class="em" v-for="(item, index) in 15" :key="index"></view>
 			</view>
+			<text class="span">{{ VoiceTitle }}</text>
 		</view>
 	</view>
 </template>
-
 <script>
-const recorderManager = uni.getRecorderManager()
-const innerAudioContext = uni.createInnerAudioContext()
-var init // 录制时长计时器
-var timer // 播放 录制倒计时
 export default {
 	data() {
 		return {
-			count: null, // 录制倒计时
-			longPress: '1', // 1显示 按住说话 2显示 说话中
-			delShow: false, // 删除提示框显示隐藏
-			time: 0, //录音时长
-			duration: 60000, //录音最大值ms 60000/1分钟
-			tempFilePath: '', //音频路径
-			playStatus: 0 //录音播放状态 0:未播放 1:正在播放
+			// 1显示 按住说话 2显示 说话中
+			longPress: '1',
+			//录音时长
+			recordingTime: 0,
+			// 定时器标识
+			recordingTimer: null,
+			//录音最大值ms 60000/1分钟
+			duration: 60000,
+			//音频路径
+			tempFilePath: '',
+			//记录长按录音开始点信息,用于后面计算滑动距离。
+			startPoint: {},
+			//发送锁，当为true时上锁，false时解锁发送
+			sendLock: true,
+			VoiceTitle: '松手结束录音',
+			VoiceText: '按住说话',
+			recorderManager: uni.getRecorderManager()
 		}
 	},
 	methods: {
-		// 倒计时
-		countdown(val) {
-			this.count = Number(val)
-			timer = setInterval(() => {
-				if (this.count > 0) {
-					this.count--
-				} else {
-					this.longPress = '1'
-					clearInterval(timer)
-				}
-			}, 1000)
-		},
 		// 长按录音事件
-		longpressBtn() {
+		longpressBtn(e) {
+			//记录长按时开始点信息，后面用于计算上划取消时手指滑动的距离
+			this.startPoint = e.touches[0]
 			this.longPress = '2'
-			this.countdown(60) // 倒计时
-			clearInterval(init) // 清除定时器
-			recorderManager.onStop((res) => {
+			this.VoiceText = '说话中...'
+
+			this.recordingTime = 0
+			this.recordingTimer = setInterval(() => {
+				this.recordingTime++
+			}, 1000)
+			this.recorderManager.onStop((res) => {
+				// console.log(res);
 				this.tempFilePath = res.tempFilePath
-				this.recordingTimer(this.time)
 			})
 			const options = {
 				duration: this.duration, // 指定录音的时长，单位 ms
@@ -76,138 +66,175 @@ export default {
 				format: 'mp3', // 音频格式，有效值 aac/mp3
 				frameSize: 10 // 指定帧大小，单位 KB
 			}
-			this.recordingTimer()
-			recorderManager.start(options)
+			this.recorderManager.start(options)
 			// 监听音频开始事件
-			recorderManager.onStart((res) => {
-				console.log(res)
-			})
+			this.sendLock = false //长按时是不上锁的。
+			this.recorderManager.onStart((res) => {})
 		},
 		// 长按松开录音事件
 		touchendBtn() {
 			this.longPress = '1'
-			recorderManager.onStop((res) => {
-				this.tempFilePath = res.tempFilePath
+			this.VoiceText = '按住说话'
+			this.VoiceTitle = '松手结束录音'
+			this.recorderManager.onStop((res) => {
+				// console.log(this.sendLock)
+				clearInterval(this.recordingTimer)
+				if (this.sendLock) {
+					//上锁不发送
+				} else {
+					//解锁发送，发送网络请求
+					if (res.duration < 1000)
+						uni.showToast({
+							title: '录音时间太短',
+							icon: 'none',
+							duration: 1000
+						})
+					else {
+						this.tempFilePath = res.tempFilePath
+						this.$emit('getTempFilePath', this.tempFilePath, this.recordingTime)
+						// uploadFile({
+						// 	url: '/voice/VoiceControl',
+						// 	src: res.tempFilePath,
+						// }).then(res => {
+						// 	console.log(JSON.parse(res.data));
+						// })
+					}
+				}
 			})
-			this.recordingTimer(this.time)
-			recorderManager.stop()
-		},
-		recordingTimer(time) {
-			if (time == undefined) {
-				// 将计时器赋值给init
-				init = setInterval(() => {
-					this.time++
-				}, 1000)
-			} else {
-				clearInterval(init)
-			}
+			this.recorderManager.stop() //结束录音
 		},
-		// 删除录音
-		delBtn() {
-			this.delShow = false
-			this.time = 0
-			this.tempFilePath = ''
-			this.playStatus = 0
-			innerAudioContext.stop()
-		},
-		// 播放
-		playBtn() {
-			innerAudioContext.src = this.tempFilePath
-			//在ios下静音时播放没有声音，默认为true，改为false就好了。
-			// innerAudioContext.obeyMuteSwitch = false
-			//点击播放
-			if (this.playStatus == 0) {
-				this.playStatus = 1
-				innerAudioContext.play()
-				this.countdown(this.time) // 倒计时
+		// 取消录音
+		handleTouchMove(e) {
+			//touchmove时触发
+			var moveLenght = e.touches[e.touches.length - 1].clientY - this.startPoint.clientY //移动距离
+			if (Math.abs(moveLenght) > 70) {
+				this.VoiceTitle = '松开手指,取消录音'
+				this.VoiceText = '松开手指,取消录音'
+				//触发了上滑取消录音，上锁
+				this.sendLock = true
 			} else {
-				this.playStatus = 0
-				innerAudioContext.pause()
+				this.VoiceTitle = '松手结束录音'
+				this.VoiceText = '松手结束录音'
+				//上划距离不足，依然可以发送，不上锁
+				this.sendLock = false
 			}
-			// //播放结束
-			innerAudioContext.onEnded(() => {
-				this.playStatus = 0
-				innerAudioContext.stop()
-			})
 		}
 	}
 }
 </script>
-
-<style scoped>
-/* 语音录制开始--------------------------------------------------------------------- */
-.record-layer {
-	margin: auto;
-	width: 50%;
-	padding: 300px 0;
-	box-sizing: border-box;
-}
-.record-box {
+<style lang="scss" scoped>
+.container {
 	width: 100%;
-	position: relative;
-}
-.record-btn-layer {
-	width: 100%;
-}
-.record-btn-layer button::after {
-	border: none;
-}
-.record-btn-layer button {
-	font-size: 14px;
-	line-height: 38px;
-	width: 100%;
-	height: 38px;
-	border-radius: 8px;
-	text-align: center;
-	background: #ffd300;
-}
-.record-btn-layer button image {
-	width: 16px;
-	height: 16px;
-	margin-right: 4px;
-	vertical-align: middle;
-}
-.record-btn-layer .record-btn-2 {
-	background: rgba(255, 211, 0, 0.2);
+	height: 100%;
+
+	.record-btn-layer {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		width: 100%;
+		height: 100%;
+
+		button {
+			width: 50%;
+			height: 50px;
+			line-height: 50px;
+			text-align: center;
+			font-size: 14px;
+			border-radius: 8px;
+			transition: all 0.1s;
+		}
+
+		button::after {
+			border: none;
+			transition: all 0.1s;
+		}
+
+		.record-btn-1 {
+			background-color: #6fb6b8;
+			color: #fff;
+		}
+
+		.record-btn-2 {
+			color: #0061ff;
+			transition: all 0.3s;
+		}
+
+		.record-btn-3 {
+			background-color: #fb5353;
+			color: white;
+		}
+	}
 }
+
 /* 提示小弹窗 */
 .prompt-layer {
-	border-radius: 8px;
-	background: #ffd300;
+	border-radius: 15px;
+	background: #95eb6c;
 	padding: 8px 16px;
 	box-sizing: border-box;
 	position: absolute;
 	left: 50%;
+	height: 11vh;
 	transform: translateX(-50%);
+	transition: all 0.3s;
 }
+
 .prompt-layer::after {
 	content: '';
 	display: block;
-	border: 6px solid rgba(0, 0, 0, 0);
-	border-top-color: rgba(255, 211, 0, 1);
+	border: 12px solid rgba(0, 0, 0, 0);
+	border-radius: 10rpx;
+	border-top-color: #95eb6c;
 	position: absolute;
-	bottom: -10px;
+	bottom: -46rpx;
 	left: 50%;
 	transform: translateX(-50%);
+	transition: all 0.3s;
+}
+//取消动画
+.prompt-layer1 {
+	border-radius: 15px;
+	background: #fb5353;
+	padding: 8px 16px;
+	box-sizing: border-box;
+	position: absolute;
+	left: 50%;
+	height: 11vh;
+	transform: translateX(-50%);
+	transition: all 0.3s;
+}
+
+.prompt-layer1::after {
+	content: '';
+	display: block;
+	border: 12px solid rgba(0, 0, 0, 0);
+	border-radius: 10rpx;
+	border-top-color: #fb5353;
+	position: absolute;
+	bottom: -46rpx;
+	left: 50%;
+	transform: translateX(-50%);
+	transition: all 0.3s;
 }
 .prompt-layer-1 {
 	font-size: 12px;
-	width: 128px;
+	width: 150px;
 	text-align: center;
 	display: flex;
 	flex-direction: column;
 	align-items: center;
 	justify-content: center;
-	top: -80px;
-}
-.prompt-layer-1 .p {
-	color: #000000;
-}
-.prompt-layer-1 .span {
-	color: rgba(0, 0, 0, 0.6);
-}
-.prompt-loader .em {
+	top: -400rpx;
+
+	.p {
+		color: #000000;
+	}
+
+	.span {
+		color: rgba(0, 0, 0, 0.6);
+	}
 }
+
 /* 语音音阶------------- */
 .prompt-loader {
 	width: 96px;
@@ -217,6 +244,7 @@ export default {
 	justify-content: space-between;
 	margin-bottom: 6px;
 }
+
 .prompt-loader .em {
 	display: block;
 	background: #333333;
@@ -225,72 +253,92 @@ export default {
 	margin-right: 2.5px;
 	float: left;
 }
+
 .prompt-loader .em:last-child {
 	margin-right: 0px;
 }
+
 .prompt-loader .em:nth-child(1) {
 	animation: load 2.5s 1.4s infinite linear;
 }
+
 .prompt-loader .em:nth-child(2) {
 	animation: load 2.5s 1.2s infinite linear;
 }
+
 .prompt-loader .em:nth-child(3) {
 	animation: load 2.5s 1s infinite linear;
 }
+
 .prompt-loader .em:nth-child(4) {
 	animation: load 2.5s 0.8s infinite linear;
 }
+
 .prompt-loader .em:nth-child(5) {
 	animation: load 2.5s 0.6s infinite linear;
 }
+
 .prompt-loader .em:nth-child(6) {
 	animation: load 2.5s 0.4s infinite linear;
 }
+
 .prompt-loader .em:nth-child(7) {
 	animation: load 2.5s 0.2s infinite linear;
 }
+
 .prompt-loader .em:nth-child(8) {
 	animation: load 2.5s 0s infinite linear;
 }
+
 .prompt-loader .em:nth-child(9) {
 	animation: load 2.5s 0.2s infinite linear;
 }
+
 .prompt-loader .em:nth-child(10) {
 	animation: load 2.5s 0.4s infinite linear;
 }
+
 .prompt-loader .em:nth-child(11) {
 	animation: load 2.5s 0.6s infinite linear;
 }
+
 .prompt-loader .em:nth-child(12) {
 	animation: load 2.5s 0.8s infinite linear;
 }
+
 .prompt-loader .em:nth-child(13) {
 	animation: load 2.5s 1s infinite linear;
 }
+
 .prompt-loader .em:nth-child(14) {
 	animation: load 2.5s 1.2s infinite linear;
 }
+
 .prompt-loader .em:nth-child(15) {
 	animation: load 2.5s 1.4s infinite linear;
 }
+
 @keyframes load {
 	0% {
 		height: 10%;
 	}
+
 	50% {
 		height: 100%;
 	}
+
 	100% {
 		height: 10%;
 	}
 }
+
 /* 语音音阶-------------------- */
 .prompt-layer-2 {
 	top: -40px;
+
+	.text {
+		color: rgba(0, 0, 0, 1);
+		font-size: 12px;
+	}
 }
-.prompt-layer-2 .text {
-	color: rgba(0, 0, 0, 1);
-	font-size: 12px;
-}
-/* 语音录制结束---------------------------------------------------------------- */
 </style>

pagesRepairs/components/recording2.vue

@@ -1,395 +0,0 @@
-<template>
-	<view>
-		<view>
-			<view class="record-btn-layer">
-				<button
-					class="record-btn"
-					:class="longPress == '1' ? 'record-btn-1' : 'record-btn-2'"
-					:style="
-						VoiceTitle != '松开手指,取消发送' && longPress != '1'
-							? 'background-image: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%);'
-							: 'background-color: rgba(0, 0, 0, .5);color:white'
-					"
-					@longtap="longpressBtn"
-					@touchend="touchendBtn()"
-					@touchmove="handleTouchMove"
-					@touchstart="longpressBtn"
-				>
-					<text>{{ VoiceText }}</text>
-				</button>
-			</view>
-			<!-- 语音音阶动画 -->
-			<view :class="VoiceTitle != '松开手指,取消发送' ? 'prompt-layer prompt-layer-1' : 'prompt-layer1 prompt-layer-1'" v-if="longPress == '2'">
-				<view class="prompt-loader">
-					<view class="em" v-for="(item, index) in 15" :key="index"></view>
-				</view>
-				<text class="span">{{ VoiceTitle }}</text>
-			</view>
-		</view>
-	</view>
-</template>
-<script>
-const recorderManager = uni.getRecorderManager()
-var init // 录制时长计时器
-var timer // 播放 录制倒计时
-export default {
-	data() {
-		return {
-			longPress: '1', // 1显示 按住 说话 2显示 说话中
-			delShow: false, // 删除提示框显示隐藏
-			time: 0, //录音时长
-			duration: 60000, //录音最大值ms 60000/1分钟
-			tempFilePath: '', //音频路径
-			startPoint: {}, //记录长按录音开始点信息,用于后面计算滑动距离。
-			sendLock: true, //发送锁，当为true时上锁，false时解锁发送
-			VoiceTitle: '松手结束录音',
-			recorderManager: uni.getRecorderManager(),
-			VoiceText: '按住 说话',
-			types: ''
-		}
-	},
-	props: ['type'],
-	created: function () {
-		this.types = this.type
-		console.log(this.type) //打印父组件传过来的参数
-	},
-	methods: {
-		// 长按录音事件
-		longpressBtn(e) {
-			this.startPoint = e.touches[0] //记录长按时开始点信息，后面用于计算上划取消时手指滑动的距离。
-			this.longPress = '2'
-			this.VoiceText = '说话中...'
-			recorderManager.onStop((res) => {
-				// console.log(res);
-				this.tempFilePath = res.tempFilePath
-			})
-			const options = {
-				duration: this.duration, // 指定录音的时长，单位 ms
-				sampleRate: 16000, // 采样率
-				numberOfChannels: 1, // 录音通道数
-				encodeBitRate: 96000, // 编码码率
-				format: 'mp3', // 音频格式，有效值 aac/mp3
-				frameSize: 10 // 指定帧大小，单位 KB
-			}
-			this.recorderManager.start(options)
-			// 监听音频开始事件
-			this.sendLock = false //长按时是不上锁的。
-			recorderManager.onStart((res) => {})
-		},
-		// 长按松开录音事件
-		touchendBtn() {
-			this.longPress = '1'
-			this.VoiceText = '按住 说话'
-			this.VoiceTitle = '松手结束录音'
-			recorderManager.onStop((res) => {
-				console.log(this.sendLock)
-				if (this.sendLock) {
-					//上锁不发送
-				} else {
-					//解锁发送，发送网络请求
-					if (res.duration < 1000)
-						wx.showToast({
-							title: '录音时间太短',
-							icon: 'none',
-							duration: 1000
-						})
-					else {
-						this.tempFilePath = res.tempFilePath
-						console.log(this.tempFilePath + '666')
-						// uploadFile({
-						// 	url: '/voice/VoiceControl',
-						// 	src: res.tempFilePath,
-						// }).then(res => {
-						// 	console.log(JSON.parse(res.data));
-						// })
-					}
-				}
-			})
-
-			// this.recordingTimer(this.time)
-			this.recorderManager.stop() //结束录音
-		},
-		// 删除录音
-		handleTouchMove(e) {
-			//touchmove时触发
-			var moveLenght = e.touches[e.touches.length - 1].clientY - this.startPoint.clientY //移动距离
-			if (Math.abs(moveLenght) > 70) {
-				// wx.showToast({
-				//       title: "松开手指,取消发送",
-				//       icon: "none",
-				//       duration: 60000
-				// });
-				// console.log("松开手指,取消发送");
-				this.VoiceTitle = '松开手指,取消发送'
-				this.VoiceText = '松开手指,取消发送'
-				this.delBtn()
-				this.sendLock = true //触发了上滑取消发送，上锁
-			} else {
-				// wx.showToast({
-				//       title: "正在录音，上划取消发送",
-				//       icon: "none",
-				//       duration: 60000
-				// });
-				this.VoiceTitle = '松手结束录音'
-				this.VoiceText = '松手结束录音'
-				this.sendLock = false //上划距离不足，依然可以发送，不上锁
-			}
-		},
-		delBtn() {
-			this.delShow = false
-			this.time = 0
-			this.tempFilePath = ''
-			// this.VoiceTitle = '松手结束录音'
-		}
-	}
-}
-</script>
-<style lang="scss">
-/* 语音录制开始--------------------------------------------------------------------- */
-// .record-layer {
-// 	width: 91vw;
-// 	padding: 300px 0;
-// 	box-sizing: border-box;
-// 	height: 15vw;
-// 	position: fixed;
-// 	margin-left: 4vw;
-// 	z-index: 10;
-// 	bottom: 3vh;
-// }
-
-// .record-layer1 {
-// 	width: 100vw;
-// 	padding: 300px 0;
-// 	box-sizing: border-box;
-// 	height: 100vh;
-// 	position: fixed;
-// 	background-color: rgba(0, 0, 0, 0.6);
-// 	// padding: 0 4vw;
-// 	z-index: 10;
-// 	bottom: 0vh;
-// }
-
-// .record-box {
-// 	width: 100%;
-// 	position: relative;
-// }
-// .record-box1 {
-// 	width: 100%;
-// 	position: relative;
-// 	bottom: -83vh;
-// 	height: 17vh;
-// }
-.record-btn-layer {
-	width: 100%;
-}
-
-.record-btn-layer button::after {
-	border: none;
-	transition: all 0.1s;
-}
-
-.record-btn-layer button {
-	margin: auto;
-	font-size: 14px;
-	line-height: 50px;
-	width: 50%;
-	height: 50px;
-	border-radius: 8px;
-	text-align: center;
-	background: #ffd300;
-	transition: all 0.1s;
-}
-
-.record-btn-layer .record-btn-1 {
-	background-image: linear-gradient(to right, #43e97b 0%, #38f9d7 100%);
-	color: #000000 !important;
-}
-
-.record-btn-layer .record-btn-2 {
-	border-radius: 168rpx 168rpx 0 0;
-	height: 17vh;
-	line-height: 17vh;
-	transition: all 0.3s;
-}
-
-/* 提示小弹窗 */
-.prompt-layer {
-	border-radius: 15px;
-	background: #95eb6c;
-	padding: 8px 16px;
-	box-sizing: border-box;
-	position: absolute;
-	left: 50%;
-	height: 11vh;
-	transform: translateX(-50%);
-	transition: all 0.3s;
-}
-
-.prompt-layer::after {
-	content: '';
-	display: block;
-	border: 12px solid rgba(0, 0, 0, 0);
-	border-radius: 10rpx;
-	border-top-color: #95eb6c;
-	position: absolute;
-	bottom: -46rpx;
-	left: 50%;
-	transform: translateX(-50%);
-	transition: all 0.3s;
-}
-//取消动画
-.prompt-layer1 {
-	border-radius: 15px;
-	background: #fb5353;
-	padding: 8px 16px;
-	box-sizing: border-box;
-	position: absolute;
-	left: 50%;
-	height: 11vh;
-	transform: translateX(-50%);
-	transition: all 0.3s;
-}
-
-.prompt-layer1::after {
-	content: '';
-	display: block;
-	border: 12px solid rgba(0, 0, 0, 0);
-	border-radius: 10rpx;
-	border-top-color: #fb5353;
-	position: absolute;
-	bottom: -46rpx;
-	left: 50%;
-	transform: translateX(-50%);
-	transition: all 0.3s;
-}
-.prompt-layer-1 {
-	font-size: 12px;
-	width: 150px;
-	text-align: center;
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	justify-content: center;
-	top: -400rpx;
-}
-
-.prompt-layer-1 .p {
-	color: #000000;
-}
-
-.prompt-layer-1 .span {
-	color: rgba(0, 0, 0, 0.6);
-}
-
-.prompt-loader .em {
-}
-
-/* 语音音阶------------- */
-.prompt-loader {
-	width: 96px;
-	height: 20px;
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	margin-bottom: 6px;
-}
-
-.prompt-loader .em {
-	display: block;
-	background: #333333;
-	width: 1px;
-	height: 10%;
-	margin-right: 2.5px;
-	float: left;
-}
-
-.prompt-loader .em:last-child {
-	margin-right: 0px;
-}
-
-.prompt-loader .em:nth-child(1) {
-	animation: load 2.5s 1.4s infinite linear;
-}
-
-.prompt-loader .em:nth-child(2) {
-	animation: load 2.5s 1.2s infinite linear;
-}
-
-.prompt-loader .em:nth-child(3) {
-	animation: load 2.5s 1s infinite linear;
-}
-
-.prompt-loader .em:nth-child(4) {
-	animation: load 2.5s 0.8s infinite linear;
-}
-
-.prompt-loader .em:nth-child(5) {
-	animation: load 2.5s 0.6s infinite linear;
-}
-
-.prompt-loader .em:nth-child(6) {
-	animation: load 2.5s 0.4s infinite linear;
-}
-
-.prompt-loader .em:nth-child(7) {
-	animation: load 2.5s 0.2s infinite linear;
-}
-
-.prompt-loader .em:nth-child(8) {
-	animation: load 2.5s 0s infinite linear;
-}
-
-.prompt-loader .em:nth-child(9) {
-	animation: load 2.5s 0.2s infinite linear;
-}
-
-.prompt-loader .em:nth-child(10) {
-	animation: load 2.5s 0.4s infinite linear;
-}
-
-.prompt-loader .em:nth-child(11) {
-	animation: load 2.5s 0.6s infinite linear;
-}
-
-.prompt-loader .em:nth-child(12) {
-	animation: load 2.5s 0.8s infinite linear;
-}
-
-.prompt-loader .em:nth-child(13) {
-	animation: load 2.5s 1s infinite linear;
-}
-
-.prompt-loader .em:nth-child(14) {
-	animation: load 2.5s 1.2s infinite linear;
-}
-
-.prompt-loader .em:nth-child(15) {
-	animation: load 2.5s 1.4s infinite linear;
-}
-
-@keyframes load {
-	0% {
-		height: 10%;
-	}
-
-	50% {
-		height: 100%;
-	}
-
-	100% {
-		height: 10%;
-	}
-}
-
-/* 语音音阶-------------------- */
-.prompt-layer-2 {
-	top: -40px;
-}
-
-.prompt-layer-2 .text {
-	color: rgba(0, 0, 0, 1);
-	font-size: 12px;
-}
-
-/* 语音录制结束---------------------------------------------------------------- */
-</style>

pagesRepairs/components/recording3.vue

@@ -0,0 +1,296 @@
+<template>
+	<view class="record-layer">
+		<view class="record-box">
+			<view class="record-btn-layer" v-if="tempFilePath == ''">
+				<button class="record-btn" :class="longPress == '1' ? 'record-btn-1' : 'record-btn-2'" @longpress="longpressBtn()" @touchend="touchendBtn()">
+					<image src="../../static/image/logo.png" />
+					<text>{{ longPress == '1' ? '按住说话' : '说话中...' }}</text>
+				</button>
+			</view>
+			<view class="record-btn-layer" v-else>
+				<button class="record-btn" @longpress="delShow = true" @click="playBtn()" :class="playStatus == '1' ? 'record-btn-2' : 'record-btn-1'">
+					<image src="../../static/image/logo.png" />
+					<text>{{ playStatus == '1' ? count + 's' : '点击播放' }}</text>
+				</button>
+			</view>
+			<!-- 语音音阶动画 -->
+			<view class="prompt-layer prompt-layer-1" v-if="longPress == '2'">
+				<view class="prompt-loader">
+					<view class="em" v-for="(item, index) in 15" :key="index"></view>
+				</view>
+				<text class="p">{{ '剩余：' + count + 's' }}</text>
+				<text class="span">松手结束录音</text>
+			</view>
+			<!-- 删除 -->
+			<view class="prompt-layer prompt-layer-2" v-if="delShow" @click.stop="delBtn()">
+				<text>删除</text>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+const recorderManager = uni.getRecorderManager()
+const innerAudioContext = uni.createInnerAudioContext()
+var init // 录制时长计时器
+var timer // 播放 录制倒计时
+export default {
+	data() {
+		return {
+			count: null, // 录制倒计时
+			longPress: '1', // 1显示 按住说话 2显示 说话中
+			delShow: false, // 删除提示框显示隐藏
+			time: 0, //录音时长
+			duration: 60000, //录音最大值ms 60000/1分钟
+			tempFilePath: '', //音频路径
+			playStatus: 0 //录音播放状态 0:未播放 1:正在播放
+		}
+	},
+	methods: {
+		// 倒计时
+		countdown(val) {
+			this.count = Number(val)
+			timer = setInterval(() => {
+				if (this.count > 0) {
+					this.count--
+				} else {
+					this.longPress = '1'
+					clearInterval(timer)
+				}
+			}, 1000)
+		},
+		// 长按录音事件
+		longpressBtn() {
+			this.longPress = '2'
+			this.countdown(60) // 倒计时
+			clearInterval(init) // 清除定时器
+			recorderManager.onStop((res) => {
+				this.tempFilePath = res.tempFilePath
+				this.recordingTimer(this.time)
+			})
+			const options = {
+				duration: this.duration, // 指定录音的时长，单位 ms
+				sampleRate: 16000, // 采样率
+				numberOfChannels: 1, // 录音通道数
+				encodeBitRate: 96000, // 编码码率
+				format: 'mp3', // 音频格式，有效值 aac/mp3
+				frameSize: 10 // 指定帧大小，单位 KB
+			}
+			this.recordingTimer()
+			recorderManager.start(options)
+			// 监听音频开始事件
+			recorderManager.onStart((res) => {
+				console.log(res)
+			})
+		},
+		// 长按松开录音事件
+		touchendBtn() {
+			this.longPress = '1'
+			recorderManager.onStop((res) => {
+				this.tempFilePath = res.tempFilePath
+			})
+			this.recordingTimer(this.time)
+			recorderManager.stop()
+		},
+		recordingTimer(time) {
+			if (time == undefined) {
+				// 将计时器赋值给init
+				init = setInterval(() => {
+					this.time++
+				}, 1000)
+			} else {
+				clearInterval(init)
+			}
+		},
+		// 删除录音
+		delBtn() {
+			this.delShow = false
+			this.time = 0
+			this.tempFilePath = ''
+			this.playStatus = 0
+			innerAudioContext.stop()
+		},
+		// 播放
+		playBtn() {
+			innerAudioContext.src = this.tempFilePath
+			//在ios下静音时播放没有声音，默认为true，改为false就好了。
+			// innerAudioContext.obeyMuteSwitch = false
+			//点击播放
+			if (this.playStatus == 0) {
+				this.playStatus = 1
+				innerAudioContext.play()
+				this.countdown(this.time) // 倒计时
+			} else {
+				this.playStatus = 0
+				innerAudioContext.pause()
+			}
+			// //播放结束
+			innerAudioContext.onEnded(() => {
+				this.playStatus = 0
+				innerAudioContext.stop()
+			})
+		}
+	}
+}
+</script>
+
+<style scoped>
+/* 语音录制开始--------------------------------------------------------------------- */
+.record-layer {
+	margin: auto;
+	width: 50%;
+	padding: 300px 0;
+	box-sizing: border-box;
+}
+.record-box {
+	width: 100%;
+	position: relative;
+}
+.record-btn-layer {
+	width: 100%;
+}
+.record-btn-layer button::after {
+	border: none;
+}
+.record-btn-layer button {
+	font-size: 14px;
+	line-height: 38px;
+	width: 100%;
+	height: 38px;
+	border-radius: 8px;
+	text-align: center;
+	background: #ffd300;
+}
+.record-btn-layer button image {
+	width: 16px;
+	height: 16px;
+	margin-right: 4px;
+	vertical-align: middle;
+}
+.record-btn-layer .record-btn-2 {
+	background: rgba(255, 211, 0, 0.2);
+}
+/* 提示小弹窗 */
+.prompt-layer {
+	border-radius: 8px;
+	background: #ffd300;
+	padding: 8px 16px;
+	box-sizing: border-box;
+	position: absolute;
+	left: 50%;
+	transform: translateX(-50%);
+}
+.prompt-layer::after {
+	content: '';
+	display: block;
+	border: 6px solid rgba(0, 0, 0, 0);
+	border-top-color: rgba(255, 211, 0, 1);
+	position: absolute;
+	bottom: -10px;
+	left: 50%;
+	transform: translateX(-50%);
+}
+.prompt-layer-1 {
+	font-size: 12px;
+	width: 128px;
+	text-align: center;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	top: -80px;
+}
+.prompt-layer-1 .p {
+	color: #000000;
+}
+.prompt-layer-1 .span {
+	color: rgba(0, 0, 0, 0.6);
+}
+.prompt-loader .em {
+}
+/* 语音音阶------------- */
+.prompt-loader {
+	width: 96px;
+	height: 20px;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	margin-bottom: 6px;
+}
+.prompt-loader .em {
+	display: block;
+	background: #333333;
+	width: 1px;
+	height: 10%;
+	margin-right: 2.5px;
+	float: left;
+}
+.prompt-loader .em:last-child {
+	margin-right: 0px;
+}
+.prompt-loader .em:nth-child(1) {
+	animation: load 2.5s 1.4s infinite linear;
+}
+.prompt-loader .em:nth-child(2) {
+	animation: load 2.5s 1.2s infinite linear;
+}
+.prompt-loader .em:nth-child(3) {
+	animation: load 2.5s 1s infinite linear;
+}
+.prompt-loader .em:nth-child(4) {
+	animation: load 2.5s 0.8s infinite linear;
+}
+.prompt-loader .em:nth-child(5) {
+	animation: load 2.5s 0.6s infinite linear;
+}
+.prompt-loader .em:nth-child(6) {
+	animation: load 2.5s 0.4s infinite linear;
+}
+.prompt-loader .em:nth-child(7) {
+	animation: load 2.5s 0.2s infinite linear;
+}
+.prompt-loader .em:nth-child(8) {
+	animation: load 2.5s 0s infinite linear;
+}
+.prompt-loader .em:nth-child(9) {
+	animation: load 2.5s 0.2s infinite linear;
+}
+.prompt-loader .em:nth-child(10) {
+	animation: load 2.5s 0.4s infinite linear;
+}
+.prompt-loader .em:nth-child(11) {
+	animation: load 2.5s 0.6s infinite linear;
+}
+.prompt-loader .em:nth-child(12) {
+	animation: load 2.5s 0.8s infinite linear;
+}
+.prompt-loader .em:nth-child(13) {
+	animation: load 2.5s 1s infinite linear;
+}
+.prompt-loader .em:nth-child(14) {
+	animation: load 2.5s 1.2s infinite linear;
+}
+.prompt-loader .em:nth-child(15) {
+	animation: load 2.5s 1.4s infinite linear;
+}
+@keyframes load {
+	0% {
+		height: 10%;
+	}
+	50% {
+		height: 100%;
+	}
+	100% {
+		height: 10%;
+	}
+}
+/* 语音音阶-------------------- */
+.prompt-layer-2 {
+	top: -40px;
+}
+.prompt-layer-2 .text {
+	color: rgba(0, 0, 0, 1);
+	font-size: 12px;
+}
+/* 语音录制结束---------------------------------------------------------------- */
+</style>

pagesRepairs/delay/delay.vue

@@ -4,7 +4,7 @@
 		<view class="box">
 			接单考核时间
 			<view class="box_time">
-				<input type="text" v-model="time" />
+				<input type="number" v-model="receivingTime" @blur="handleChange($event, 1)" />
 				<img src="../../static/images/repairsImg/clock.png" />
 			</view>
 			分钟
@@ -14,14 +14,14 @@
 		<view class="box">
 			维修考核时间
 			<view class="box_time">
-				<input type="text" v-model="time2" />
+				<input type="number" v-model="repairsTime" @blur="handleChange($event, 2)" />
 				<img src="../../static/images/repairsImg/clock.png" />
 			</view>
 			分钟
 		</view>
 
 		<!-- 提交按钮区域 -->
-		<view class="btn">提交</view>
+		<view class="btn" @click="handleSub">提交</view>
 	</view>
 </template>
 
@@ -29,11 +29,50 @@
 export default {
 	data() {
 		return {
-			time: 5,
-			time2: 10
+			receivingTime: 0,
+			repairsTime: 0
 		}
 	},
-	methods: {}
+	methods: {
+		// 提交按钮回调
+		handleSub() {
+			uni.showModal({
+				title: '提示',
+				content: '确定延时吗？',
+				success: (res) => {
+					if (res.confirm) {
+						console.log(this.receivingTime)
+						console.log(this.repairsTime)
+						uni.showToast({
+							title: '延时成功',
+							icon: 'success'
+						})
+						setTimeout(() => {
+							uni.navigateBack(1)
+						}, 1500)
+					}
+				}
+			})
+		},
+		// 输入框输入事件回调
+		handleChange(e, type) {
+			// console.log(e.detail.value)
+			// 验证输入为整数
+			const reg = /^\+?[1-9][0-9]*$/
+
+			if (!reg.test(e.detail.value)) {
+				uni.showToast({
+					title: '输入格式错误,请重新输入',
+					icon: 'none'
+				})
+				if (type === 1) {
+					this.receivingTime = 0
+				} else {
+					this.repairsTime = 0
+				}
+			}
+		}
+	}
 }
 </script>
 

pagesRepairs/evaluate/evaluate.vue

@@ -3,13 +3,13 @@
 		<!-- 处理时效区域 -->
 		<view class="score">
 			<text>处理时效</text>
-			<uni-rate activeColor="#FF5733" size="30" v-model="value" @change="onChange" />
+			<uni-rate activeColor="#FF5733" allowHalf size="30" value="0" @change="onChange" />
 		</view>
 
 		<!-- 服务评价区域 -->
 		<view class="evaluate">
 			服务评价
-			<textarea placeholder-style="color:#CCCCCC" placeholder="您宝贵的评价对我们很重要哦"></textarea>
+			<textarea placeholder-style="color:#CCCCCC" placeholder="您宝贵的评价对我们很重要哦" v-model="textareaValue"></textarea>
 		</view>
 
 		<!-- 确认提交区域 -->
@@ -21,15 +21,41 @@
 export default {
 	data() {
 		return {
-			value: 2
+			score: 0,
+			textareaValue: ''
 		}
 	},
 	methods: {
 		onChange(e) {
-			console.log('rate发生改变:' + JSON.stringify(e))
+			console.log(e)
+			this.score = e.value * 2
 		},
 		handleSub() {
-			uni.navigateBack(1)
+			if (this.score === 0) {
+				uni.showToast({
+					title: '请您给此次服务评分',
+					icon: 'none'
+				})
+				return
+			}
+			if (!this.textareaValue) {
+				uni.showToast({
+					title: '请输入服务评价',
+					icon: 'none'
+				})
+				return
+			}
+			console.log(this.score)
+			console.log(this.textareaValue)
+			uni.showToast({
+				title: '评价成功',
+				icon: 'none'
+			})
+			setTimeout(() => {
+				uni.redirectTo({
+					url: '/pagesRepairs/box/box'
+				})
+			}, 1500)
 		}
 	}
 }

pagesRepairs/help/help.vue

@@ -11,7 +11,7 @@
 
 		<view class="box" @click="handleHelpPeople">
 			<img src="../../static/images/repairsImg/peoples.png" />
-			<view class="box_info">张三、李四、王麻子</view>
+			<view class="box_info" :class="{ color: !peoples }">{{ peoples ? peoples : '请选择协作对象' }}</view>
 			<img class="img" src="../../static/images/repairsImg/right.png" />
 		</view>
 
@@ -19,16 +19,29 @@
 
 		<!-- 录音区域 -->
 		<view class="voice">
-			<view class="voice_box">
+			<view class="voice_box" v-if="!recordingPath" @click="handleRecording">
 				<img src="../../static/images/repairsImg/voice.png" />
 			</view>
-			点击录音
+			<view v-if="!recordingPath" @click="handleRecording">点击录音</view>
+
+			<view class="item_recording" v-if="recordingPath" @click="handlePlayRecording">
+				<img :src="recordingImg" />
+				{{ recordingTime }}″
+			</view>
+			<view class="recording_icon" v-if="recordingPath" @click="handleDeleteRecording">×</view>
 		</view>
 
+		<!-- 录音弹窗区域 -->
+		<uni-popup :safe-area="true" background-color="#fff" ref="popup_recording">
+			<view class="popup_recording">
+				<recording @getTempFilePath="getTempFilePath" />
+			</view>
+		</uni-popup>
+
 		<view class="title">备注</view>
 
 		<view class="textarea">
-			<textarea placeholder-style="color:#CCCCCC" placeholder="请输入协作说明"></textarea>
+			<textarea placeholder-style="color:#CCCCCC" placeholder="请输入协作说明" v-model="desc"></textarea>
 		</view>
 
 		<view class="btn2" v-if="type === '1'">
@@ -36,28 +49,180 @@
 			<view class="btn_box type2">派单</view>
 		</view>
 
-		<view class="btn" v-else>确认</view>
+		<view class="btn" v-else @click="handleAffirm">确认</view>
 	</view>
 </template>
 
 <script>
+import recording from '../components/recording.vue'
+const innerAudioContext = uni.createInnerAudioContext()
 export default {
+	components: {
+		recording
+	},
 	data() {
 		return {
-			type: null
+			type: null,
+			peoples: '',
+			desc: '',
+			// 录音文件路径
+			recordingPath: '',
+			// 录音图片地址
+			recordingImg: '../../static/images/repairsImg/recording.jpg',
+			// 录音时长
+			recordingTime: 0,
+			// 播放状态
+			playStatus: false,
+			// 定时器标识
+			timer: null
 		}
 	},
+	mounted() {
+		//在ios下静音时播放没有声音，默认为true，改为false就好了。
+		uni.setInnerAudioOption({
+			obeyMuteSwitch: false
+		})
+	},
 	onLoad(options) {
 		console.log(options)
 		if (options.type) {
 			this.type = options.type
 		}
+		uni.$on('addCheckList', this.addCheckList)
 	},
 	methods: {
+		addCheckList(e) {
+			// console.log(e)
+			let temList = []
+			e.data.forEach((ele) => {
+				temList.push(ele.name)
+			})
+			this.peoples = temList.toString()
+		},
+		// 确认按钮回调
+		handleAffirm() {
+			console.log(this.recordingPath)
+			console.log(this.desc)
+			console.log(this.peoples)
+			uni.showToast({
+				title: '提交协作申请成功，请等待管理员审核',
+				icon: 'none',
+				duration: 3000
+			})
+			setTimeout(() => {
+				uni.redirectTo({
+					url: '/pagesRepairs/box/box'
+				})
+			}, 3000)
+		},
 		handleHelpPeople() {
 			uni.navigateTo({
 				url: '/pagesRepairs/helpPeople/helpPeople'
 			})
+		},
+		// 点击录音按钮回调
+		handleRecording() {
+			uni.getSetting({
+				success: (res) => {
+					if (!res.authSetting['scope.record']) {
+						uni.authorize({
+							scope: 'scope.record',
+							success(res) {
+								// 授权成功
+								uni.showToast({
+									title: '授权成功',
+									icon: 'none'
+								})
+							},
+							fail() {
+								uni.showModal({
+									content: '检测到您没打开麦克风权限，是否去设置打开？',
+									confirmText: '确认',
+									cancelText: '取消',
+									success: (res) => {
+										if (res.confirm) {
+											uni.openSetting({
+												success: (res) => {}
+											})
+										} else {
+											uni.showToast({
+												title: '获取麦克风权限失败',
+												icon: 'none'
+											})
+										}
+									}
+								})
+							}
+						})
+					} else {
+						this.$refs.popup_recording.open('bottom')
+					}
+				},
+				fail() {
+					uni.showToast({
+						title: '获取麦克风权限失败',
+						icon: 'none'
+					})
+				}
+			})
+		},
+		// 点击录音播放回调
+		handlePlayRecording() {
+			innerAudioContext.src = this.recordingPath
+			if (!this.playStatus) {
+				this.playStatus = true
+				innerAudioContext.play()
+
+				this.timer = setInterval(() => {
+					if (this.recordingImg == '../../static/images/repairsImg/recording.jpg') {
+						this.recordingImg = '../../static/images/repairsImg/recording2.jpg'
+					} else if (this.recordingImg == '../../static/images/repairsImg/recording2.jpg') {
+						this.recordingImg = '../../static/images/repairsImg/recording3.jpg'
+					} else if (this.recordingImg == '../../static/images/repairsImg/recording3.jpg') {
+						this.recordingImg = '../../static/images/repairsImg/recording.jpg'
+					}
+				}, 300)
+
+				//播放结束
+				innerAudioContext.onEnded(() => {
+					clearInterval(this.timer)
+					this.timer = null
+					this.recordingImg = '../../static/images/repairsImg/recording.jpg'
+					this.playStatus = false
+				})
+			} else {
+				clearInterval(this.timer)
+				this.recordingImg = '../../static/images/repairsImg/recording.jpg'
+				this.playStatus = false
+				innerAudioContext.stop()
+			}
+		},
+		// 删除录音回调
+		handleDeleteRecording() {
+			if (this.playStatus) {
+				uni.showToast({
+					title: '播放中不能删除',
+					icon: 'none',
+					mask: true
+				})
+			} else {
+				uni.showModal({
+					title: '提示',
+					content: '确定删除录音吗？',
+					success: (res) => {
+						if (res.confirm) {
+							this.recordingPath = ''
+							this.recordingTime = 0
+						}
+					}
+				})
+			}
+		},
+		// 自定义事件回调,获取录音文件路径
+		getTempFilePath(path, time) {
+			this.recordingPath = path
+			this.recordingTime = time
+			this.$refs.popup_recording.close()
 		}
 	}
 }
@@ -67,6 +232,7 @@ export default {
 .container {
 	box-sizing: border-box;
 	padding: 0 30rpx;
+	height: 100vh;
 	overflow-y: auto;
 
 	.title {
@@ -89,6 +255,10 @@ export default {
 			flex: 1;
 		}
 
+		.color {
+			color: #ccc;
+		}
+
 		img {
 			margin: 0 14rpx 0 30rpx;
 			width: 48rpx;
@@ -125,6 +295,35 @@ export default {
 				height: 33rpx;
 			}
 		}
+
+		.item_recording {
+			margin-left: 35rpx;
+			display: flex;
+			align-items: center;
+			width: 230rpx;
+			height: 65rpx;
+			color: #000;
+			border-radius: 100rpx;
+			border: 1rpx solid #cccccc;
+
+			img {
+				margin: 0 12rpx;
+				width: 40rpx;
+				height: 40rpx;
+			}
+		}
+
+		.recording_icon {
+			margin-left: auto;
+			margin-right: 35rpx;
+			font-size: 40rpx;
+		}
+	}
+
+	.popup_recording {
+		width: 100%;
+		height: 460rpx;
+		background-color: #fff;
 	}
 
 	.textarea {

pagesRepairs/helpPeople/helpPeople.vue

@@ -4,7 +4,7 @@
 		<view class="search">
 			<img src="../../static/images/repairsImg/search.png" />
 
-			<input type="text" placeholder="请输入搜索内容" />
+			<input type="text" placeholder="请输入搜索内容" v-model="searchValue" />
 		</view>
 
 		<!-- 协作人区域 -->
@@ -26,7 +26,7 @@
 			</view>
 		</view>
 
-		<view class="btn" v-if="checkList.length">确认派单</view>
+		<view class="btn" v-if="checkList.length" @click="handleDispatch">确认派单</view>
 	</view>
 </template>
 
@@ -34,6 +34,9 @@
 export default {
 	data() {
 		return {
+			// 搜索框绑定数据
+			searchValue: '',
+			// 协作人列表
 			list: [
 				{
 					id: 1,
@@ -84,27 +87,55 @@ export default {
 					checked: false
 				}
 			],
-			checkList: []
+			// 选中列表
+			checkList: [],
+			type: null
 		}
 	},
 	onLoad(options) {
 		console.log(options)
 		if (options.type) {
+			this.type = options.type
 			uni.setNavigationBarTitle({
 				title: '派单'
 			})
 		}
 	},
 	methods: {
+		// 确认派单按钮回调
+		handleDispatch() {
+			if (this.type) {
+				uni.showModal({
+					title: '提示',
+					content: '确定把单派给此员工吗？',
+					success: (res) => {
+						if (res.confirm) {
+							uni.showToast({
+								title: '派单成功',
+								icon: 'none'
+							})
+							setTimeout(() => {
+								uni.reLaunch({
+									url: '/pagesRepairs/box/box'
+								})
+							}, 1500)
+						}
+					}
+				})
+			} else {
+				uni.$emit('addCheckList', {
+					data: this.checkList
+				})
+				uni.navigateBack(1)
+			}
+		},
+		// 点击每一个协作人的回调
 		change(item) {
 			item.checked = !item.checked
 			let temList = []
-			this.list.forEach((item) => {
-				if (item.checked) {
-					temList.push(item.id)
-				}
+			temList = this.list.filter((item) => {
+				return item.checked
 			})
-			// console.log(temList)
 			this.checkList = temList
 		}
 	}

pagesRepairs/index/index.vue

@@ -21,7 +21,7 @@ export default {
 			// 获取用户信息
 			appid: 'wxd6f090391d410534',
 			repairsUserInfo: {
-				routes: ['报修', '我的报修']
+				routes: ['首页', '工单管理', '待处理池']
 			},
 			// 用户路由
 			userList: ['报修', '我的报修'],

pagesRepairs/management/management.vue

@@ -90,7 +90,7 @@
 				<!-- 报修电话 -->
 				<view class="item_box">
 					<view class="box_key">报修电话：</view>
-					<view class="box_value phone" @click="handleCallPhone('13820846714')">
+					<view class="box_value phone" @click="handleCallPhone(item.phone)">
 						{{ item.phone }}
 						<img src="../../static/images/repairsImg/phone.png" />
 					</view>
@@ -137,7 +137,7 @@
 				<!-- 师傅电话 -->
 				<view class="item_box" v-if="item.type === 2 || item.type === 3 || item.type === 4 || item.type === 6">
 					<view class="box_key">师傅电话：</view>
-					<view class="box_value phone" @click="handleCallPhone('13820846714')">
+					<view class="box_value phone" @click="handleCallPhone(item.workerPhone)">
 						{{ item.workerPhone }}
 						<img src="../../static/images/repairsImg/phone.png" />
 					</view>
@@ -157,7 +157,7 @@
 					<img v-if="item.type < 3" src="../../static/images/repairsImg/close.png" @click="handleClose" />
 					<img class="img" src="../../static/images/repairsImg/help.png" v-if="item.type === 1 && !permission" @click="handleHelp" />
 					<view class="btn_box type" v-if="item.type < 3 && permission" @click="handleDelay">延时</view>
-					<view class="btn_box type" v-if="item.type === 1">接单</view>
+					<view class="btn_box type" v-if="item.type === 1" @click="handleOrderReceiving">接单</view>
 					<view class="btn_box type2" v-if="item.type === 1 && !permission" @click="handleTransferOrder">转单</view>
 					<view class="btn_box type2" v-if="item.type === 1 && permission" @click="handleSendOrder">派单</view>
 					<view class="btn_box type" v-if="item.type === 2" @click="handleOffer">报价</view>
@@ -171,12 +171,18 @@
 				<!-- 关闭按钮弹窗 -->
 				<uni-popup ref="popup_close" :is-mask-click="false">
 					<view class="popup_close">
-						<view :class="{ active: activeIndex === 1 }" class="close_box radius" @click="handleChangeItem(1)">重复报单</view>
-						<view :class="{ active: activeIndex === 2 }" class="close_box" @click="handleChangeItem(2)">不属于维修范围</view>
-						<view :class="{ active: activeIndex === 3 }" class="close_box" @click="handleChangeItem(3)">已维修完成</view>
+						<view
+							:class="[{ active: activeIndex === index }, { radius: index === 0 }]"
+							class="close_box"
+							v-for="(ele, index) in closeList"
+							:key="index"
+							@click="handleChangeItem(index)"
+						>
+							{{ ele }}
+						</view>
 						<view class="close_btn">
 							<view class="btn_box cancel" @click="$refs.popup_close[0].close()">取消</view>
-							<view class="btn_box confirm" @click="$refs.popup_close[0].close()">确定</view>
+							<view class="btn_box confirm" @click="handleCloseConfirm">确定</view>
 						</view>
 					</view>
 				</uni-popup>
@@ -186,11 +192,11 @@
 					<view class="pop_leaveWords">
 						<view class="leaveWords_title">留言</view>
 						<view class="leaveWords_body">
-							<textarea placeholder-style="color:#CCCCCC" placeholder="请输入您宝贵的留言"></textarea>
+							<textarea placeholder-style="color:#CCCCCC" placeholder="请输入您宝贵的留言" v-model="leaveWords"></textarea>
 						</view>
 						<view class="leaveWords_btn">
 							<view class="btn_box cancel" @click="$refs.popup_leaveWords[0].close()">取消</view>
-							<view class="btn_box confirm" @click="$refs.popup_leaveWords[0].close()">确定</view>
+							<view class="btn_box confirm" @click="handleLeaveWordsConfirm">确定</view>
 						</view>
 					</view>
 				</uni-popup>
@@ -230,9 +236,16 @@ export default {
 	data() {
 		return {
 			permission: true,
+			// 留言弹窗输入框绑定数据
+			leaveWords: '',
+			// 顶部分段器数组
 			items: ['团队工单', '个人工单'],
+			// 顶部分段器数组当前索引
 			current: 0,
-			activeIndex: 1,
+			// 关闭按钮弹窗当前索引
+			activeIndex: 0,
+			// 关闭按钮弹窗选项数组
+			closeList: ['重复报单', '不属于维修范围', '已维修完成'],
 			// type为 1 是 待接单,type为 2 是维修中,
 			// type为 3 是 待审核,type为 4 是已完成,
 			// type为 5 是 待确认,type为 6 是已关单,
@@ -386,8 +399,56 @@ export default {
 		}
 	},
 	methods: {
+		// 留言弹窗确定按钮回调
+		handleLeaveWordsConfirm() {
+			if (this.leaveWords) {
+				uni.showToast({
+					title: '留言成功',
+					icon: 'success'
+				})
+				this.$refs.popup_leaveWords[0].close()
+			} else {
+				uni.showToast({
+					title: '请输入留言内容',
+					icon: 'none'
+				})
+			}
+		},
+		// 关闭弹窗确定按钮回调
+		handleCloseConfirm() {
+			uni.showModal({
+				title: '提示',
+				content: '确定关闭订单吗？',
+				success: (res) => {
+					if (res.confirm) {
+						uni.showToast({
+							title: '关单成功',
+							icon: 'none'
+						})
+						console.log(this.closeList[this.activeIndex])
+						this.$refs.popup_close[0].close()
+					}
+				}
+			})
+		},
+		// 接单按钮回调
+		handleOrderReceiving() {
+			uni.showModal({
+				content: '确定接单吗？',
+				title: '提示',
+				success: (res) => {
+					if (res.confirm) {
+						uni.showToast({
+							title: '接单成功',
+							icon: 'none'
+						})
+					}
+				}
+			})
+		},
 		// 关闭图标点击回调
 		handleClose() {
+			this.activeIndex = 0
 			this.$refs.popup_close[0].open('center')
 		},
 		// 关闭按钮弹窗选中按钮时回调
@@ -461,7 +522,6 @@ export default {
 		},
 		// 点击电话号码回调
 		handleCallPhone(phone) {
-			console.log(phone)
 			uni.makePhoneCall({
 				phoneNumber: phone
 			})

pagesRepairs/message/message.vue

@@ -42,6 +42,34 @@ export default {
 					title: '已完成请尽快确认！',
 					order: '06521649496',
 					time: '2023-06-07  12:25:25'
+				},
+				{
+					id: 4,
+					type: false,
+					title: '订单已完成请尽快确认！',
+					order: '06521649496',
+					time: '2023-07-07  12:25:25'
+				},
+				{
+					id: 5,
+					type: true,
+					title: '请尽快确认！',
+					order: '06521649496',
+					time: '2023-08-07  12:25:25'
+				},
+				{
+					id: 6,
+					type: false,
+					title: '已完成请尽快确认！',
+					order: '06521649496',
+					time: '2023-06-07  12:25:25'
+				},
+				{
+					id: 7,
+					type: false,
+					title: '已完成请尽快确认！',
+					order: '06521649496',
+					time: '2023-06-07  12:25:25'
 				}
 			]
 		}
@@ -51,8 +79,8 @@ export default {
 
 <style lang="scss" scoped>
 .container {
-	min-width: 100vw;
-	min-height: 100vh;
+	width: 100vw;
+	height: 100vh;
 	background-color: #f2f2f2;
 	overflow-y: auto;
 

pagesRepairs/myRepairs/myRepairs.vue

@@ -128,10 +128,10 @@
 
 				<!-- 按钮 -->
 				<view class="item_btn" v-if="item.type !== 5">
-					<view class="btn_box type" v-if="item.type === 1 || item.type === 2">催单</view>
+					<view class="btn_box type" v-if="item.type === 1 || item.type === 2" @click="handleExpedite">催单</view>
 					<view class="btn_box type" v-if="item.type === 3" @click="handleBackOffice">转后勤</view>
 					<view class="btn_box type" v-if="item.type === 3">支付</view>
-					<view class="btn_box type2" v-if="item.type < 4">撤销</view>
+					<view class="btn_box type2" v-if="item.type < 4" @click="handleRepeal">撤销</view>
 					<view class="btn_box type" v-if="item.type === 4" @click="handleEvaluate">去评价</view>
 				</view>
 				<view class="item_btn2" v-else></view>
@@ -141,11 +141,11 @@
 					<view class="pop_logistics">
 						<view class="logistics_title">转后勤</view>
 						<view class="logistics_body">
-							<textarea placeholder-style="color:#CCCCCC" placeholder="请输入您宝贵的留言"></textarea>
+							<textarea placeholder-style="color:#CCCCCC" placeholder="请输入您宝贵的留言" v-model="logisticsValue"></textarea>
 						</view>
 						<view class="logistics_btn">
 							<view class="btn_box cancel" @click="$refs.popup_logistics[0].close()">取消</view>
-							<view class="btn_box confirm" @click="$refs.popup_logistics[0].close()">确定</view>
+							<view class="btn_box confirm" @click="handleLogisticsConfirm">确定</view>
 						</view>
 					</view>
 				</uni-popup>
@@ -158,6 +158,7 @@
 export default {
 	data() {
 		return {
+			logisticsValue: '',
 			items: ['未完成（2）', '待确认（4）', '已完成（5）'],
 			current: 0,
 			list: [],
@@ -272,9 +273,50 @@ export default {
 		}
 	},
 	mounted() {
+		console.log(666)
 		this.list = this.dataList
 	},
 	methods: {
+		// 转后勤弹窗确定按钮回调
+		handleLogisticsConfirm() {
+			console.log(this.logisticsValue)
+			uni.showToast({
+				title: '留言成功',
+				icon: 'none'
+			})
+			this.$refs.popup_logistics[0].close()
+		},
+		// 催单按钮回调
+		handleExpedite() {
+			uni.showModal({
+				title: '提示',
+				content: '确定催单吗？',
+				success: (res) => {
+					if (res.confirm) {
+						uni.showToast({
+							title: '催单成功',
+							icon: 'none'
+						})
+					}
+				}
+			})
+		},
+
+		// 撤销按钮回调
+		handleRepeal() {
+			uni.showModal({
+				title: '提示',
+				content: '确定撤销吗？',
+				success: (res) => {
+					if (res.confirm) {
+						uni.showToast({
+							title: '撤销成功',
+							icon: 'none'
+						})
+					}
+				}
+			})
+		},
 		// 分段器切换回调
 		onClickItem(index) {
 			console.log(index)
@@ -305,7 +347,8 @@ export default {
 		},
 		// 点击工单编号区域回调
 		handleLookDetail(item) {
-			const detailInfo = JSON.stringify(item)
+			const detailInfo = encodeURIComponent(JSON.stringify(item))
+			// console.log(detailInfo)
 			uni.navigateTo({
 				url: `/pagesRepairs/repairDetails/repairDetails?detailInfo=${detailInfo}`
 			})
@@ -621,4 +664,4 @@ export default {
 		}
 	}
 }
-</style>
+</style>

pagesRepairs/offer/offer.vue

@@ -3,20 +3,22 @@
 		<view class="title">关联耗材</view>
 
 		<!-- 每一个耗材盒子区域 -->
-		<view class="detail_box">
+		<view class="detail_box" v-for="(item, index) in goodList" :key="index">
 			<view class="detail_box_item">
 				<view class="item_key">耗材名称</view>
-				<view class="item_value">螺丝钉</view>
+				<view class="item_value">{{ item.name }}</view>
 			</view>
 			<view class="detail_box_item">
 				<view class="item_key">耗材数量</view>
 				<view class="item_value">
-					<uni-number-box v-model="count" :min="0" @change="bindChange"></uni-number-box>
+					<uni-number-box v-model="item.num" :min="0" @change="bindChange($event, index)"></uni-number-box>
 				</view>
 			</view>
 			<view class="detail_box_item">
 				<view class="item_key">耗材单价</view>
-				<view class="item_value">0.5</view>
+				<view class="item_value">
+					<input type="number" placeholder="请输入耗材单价" v-model="item.price" @blur="handleChangePrice($event, item)" />
+				</view>
 			</view>
 		</view>
 
@@ -29,24 +31,24 @@
 		<!-- 合计费用区域 -->
 		<view class="total">
 			<view>合计费用</view>
-			<view>10元</view>
+			<view>{{ countMoney }}元</view>
 		</view>
 
 		<view class="title">维修师傅</view>
 
 		<view class="box">
 			<img src="../../static/images/repairsImg/people.png" />
-			张三
+			{{ worker }}
 		</view>
 
 		<view class="title2">手机</view>
 
 		<view class="box">
 			<img src="../../static/images/repairsImg/phone2.png" />
-			13659854589
+			{{ phone }}
 		</view>
 
-		<view class="btn">确认提交</view>
+		<view class="btn" @click="handleSub">确认提交</view>
 	</view>
 </template>
 
@@ -54,13 +56,101 @@
 export default {
 	data() {
 		return {
-			count: 3
+			// 维修师傅
+			worker: '张三',
+			// 手机号码
+			phone: '13659854589',
+			// 耗材列表
+			goodList: []
+		}
+	},
+	computed: {
+		// 合计费用
+		countMoney() {
+			let countMoney = 0
+			this.goodList.forEach((ele) => {
+				countMoney += Number(ele.num) * Number(ele.price)
+			})
+			if (countMoney) {
+				return countMoney
+			} else {
+				return 0
+			}
 		}
 	},
+	onLoad() {
+		uni.$on('addConsumable', this.addConsumable)
+	},
 	methods: {
-		bindChange(val) {
-			console.log(val)
+		// 单价输入框输入回调
+		handleChangePrice(e, item) {
+			// 验证输入单价格式 只能是数字，小数点最多两位
+			const reg = /(^[1-9]\d*(\.\d{1,2})?$)|(^0(\.\d{1,2})?$)/
+
+			if (!reg.test(e.detail.value)) {
+				uni.showToast({
+					title: '请确定单价为数字，并且只能保留两位小数点',
+					icon: 'none'
+				})
+				item.price = 0
+			}
 		},
+		// 确认提交按钮回调
+		handleSub() {
+			if (!this.goodList.length) {
+				uni.showToast({
+					title: '请添加耗材',
+					icon: 'none'
+				})
+				return
+			}
+			if (this.countMoney <= 0) {
+				uni.showToast({
+					title: '合计费用不能小于0元',
+					icon: 'none'
+				})
+				return
+			}
+			uni.showToast({
+				title: '报价成功',
+				icon: 'success'
+			})
+			setTimeout(() => {
+				uni.reLaunch({
+					url: '/pagesRepairs/box/box'
+				})
+			}, 1500)
+			console.log(this.goodList)
+			console.log(this.countMoney)
+			console.log(this.worker)
+			console.log(this.phone)
+		},
+		// 全局自定义事件
+		addConsumable(e) {
+			// console.log(e)
+
+			// 判断是否存在相同的耗材
+			let flag = this.goodList.some((ele) => {
+				return ele.name === e.data
+			})
+
+			if (!flag) {
+				this.goodList.push({
+					name: e.data,
+					num: 1,
+					price: 0
+				})
+			}
+		},
+		// 耗材数量计数器改变回调
+		bindChange(e, index) {
+			// console.log(e)
+			// console.log(index)
+			if (e === 0) {
+				this.goodList.splice(index, 1)
+			}
+		},
+		// 添加耗材按钮回调
 		handleAdd() {
 			uni.navigateTo({
 				url: '/pagesRepairs/addGoods/addGoods'
@@ -109,6 +199,10 @@ export default {
 
 			.item_value {
 				font-weight: bold;
+
+				input {
+					text-align: right;
+				}
 			}
 		}
 	}

pagesRepairs/pending/pending.vue

@@ -67,19 +67,25 @@
 				<view class="item_btn">
 					<img src="../../static/images/repairsImg/close.png" @click="handleClose" />
 					<view class="btn_box type" v-if="permission" @click="handleDelay">延时</view>
-					<view class="btn_box type">接单</view>
+					<view class="btn_box type" @click="handleOrderReceiving">接单</view>
 					<view class="btn_box type2" v-if="permission" @click="handleSendOrder">派单</view>
 				</view>
 
 				<!-- 关闭按钮弹窗 -->
 				<uni-popup ref="popup_close" :is-mask-click="false">
 					<view class="popup_close">
-						<view :class="{ active: activeIndex === 1 }" class="close_box radius" @click="handleChangeItem(1)">重复报单</view>
-						<view :class="{ active: activeIndex === 2 }" class="close_box" @click="handleChangeItem(2)">不属于维修范围</view>
-						<view :class="{ active: activeIndex === 3 }" class="close_box" @click="handleChangeItem(3)">已维修完成</view>
+						<view
+							:class="[{ active: activeIndex === index }, { radius: index === 0 }]"
+							class="close_box"
+							v-for="(ele, index) in closeList"
+							:key="index"
+							@click="handleChangeItem(index)"
+						>
+							{{ ele }}
+						</view>
 						<view class="close_btn">
 							<view class="btn_box cancel" @click="$refs.popup_close[0].close()">取消</view>
-							<view class="btn_box confirm" @click="$refs.popup_close[0].close()">确定</view>
+							<view class="btn_box confirm" @click="handleCloseConfirm">确定</view>
 						</view>
 					</view>
 				</uni-popup>
@@ -93,7 +99,10 @@ export default {
 	data() {
 		return {
 			permission: true,
-			activeIndex: 1,
+			// 关闭按钮弹窗当前索引
+			activeIndex: 0,
+			// 关闭按钮弹窗选项数组
+			closeList: ['重复报单', '不属于维修范围', '已维修完成'],
 			dataList: [
 				{
 					id: 1,
@@ -158,10 +167,43 @@ export default {
 		}
 	},
 	methods: {
+		// 接单按钮回调
+		handleOrderReceiving() {
+			uni.showModal({
+				content: '确定接单吗？',
+				title: '提示',
+				success: (res) => {
+					if (res.confirm) {
+						uni.showToast({
+							title: '接单成功',
+							icon: 'none'
+						})
+					}
+				}
+			})
+		},
 		// 关闭图标点击回调
 		handleClose() {
+			this.activeIndex = 0
 			this.$refs.popup_close[0].open('center')
 		},
+		// 关闭弹窗确定按钮回调
+		handleCloseConfirm() {
+			uni.showModal({
+				title: '提示',
+				content: '确定关闭订单吗？',
+				success: (res) => {
+					if (res.confirm) {
+						uni.showToast({
+							title: '关单成功',
+							icon: 'none'
+						})
+						console.log(this.closeList[this.activeIndex])
+						this.$refs.popup_close[0].close()
+					}
+				}
+			})
+		},
 		// 关闭按钮弹窗选中按钮时回调
 		handleChangeItem(val) {
 			this.activeIndex = val
@@ -175,7 +217,7 @@ export default {
 		// 派单按钮回调
 		handleSendOrder() {
 			uni.navigateTo({
-				url: '/pagesRepairs/helpPeople/helpPeople?type=1'
+				url: '/pagesRepairs/helpPeople/helpPeople?type=2'
 			})
 		},
 		// 点击电话号码回调

pagesRepairs/repairDetails/repairDetails.vue

@@ -24,7 +24,7 @@
 		</view>
 		<view class="box">
 			<view class="box_key">报修电话：</view>
-			<view class="box_value phone">
+			<view class="box_value phone" @click="handleCallPhone('13820846714')">
 				{{ detailInfo.phone }}
 				<img src="../../static/images/repairsImg/phone.png" />
 			</view>
@@ -48,7 +48,7 @@
 
 		<view class="box_img">
 			<view class="img_key">上传图片：</view>
-			<view class="img_value"></view>
+			<img class="img_value" mode="aspectFill" :src="detailInfo.img[0]" @click="handleLookImgs(detailInfo.img)" />
 		</view>
 
 		<view class="title top">报修跟踪</view>
@@ -111,8 +111,24 @@ export default {
 		}
 	},
 	onLoad(options) {
-		this.detailInfo = JSON.parse(options.detailInfo)
-		// console.log(this.detailInfo)
+		this.detailInfo = JSON.parse(decodeURIComponent(options.detailInfo))
+		console.log(this.detailInfo)
+	},
+	methods: {
+		// 点击电话号码回调
+		handleCallPhone(phone) {
+			console.log(phone)
+			uni.makePhoneCall({
+				phoneNumber: phone
+			})
+		},
+		// 点击图片回调
+		handleLookImgs(img) {
+			// console.log(img)
+			uni.previewImage({
+				urls: img
+			})
+		}
 	}
 }
 </script>
@@ -120,6 +136,8 @@ export default {
 <style lang="scss" scoped>
 .container {
 	padding: 0 30rpx 50rpx;
+	height: 100vh;
+	overflow-y: auto;
 
 	.title {
 		height: 90rpx;

pagesRepairs/repairRecord/repairRecord.vue

@@ -1,25 +1,38 @@
 <template>
 	<view class="container">
 		<view class="title">维修日期</view>
-		<uni-datetime-picker placeholder="请选择日期" type="date" v-model="single" />
+		<uni-datetime-picker placeholder="请选择日期" type="date" v-model="repairDate" />
 		<view class="title">维修内容</view>
 		<view class="textarea">
-			<textarea placeholder-style="color:#CCCCCC" placeholder="请输入维修内容"></textarea>
+			<textarea placeholder-style="color:#CCCCCC" placeholder="请输入维修内容" v-model="repairContent"></textarea>
 		</view>
 		<view class="title">维修结果</view>
 
 		<!-- 录音区域 -->
 		<view class="voice">
-			<view class="voice_box">
+			<view class="voice_box" v-if="!recordingPath" @click="handleRecording">
 				<img src="../../static/images/repairsImg/voice.png" />
 			</view>
-			点击录音
+			<view v-if="!recordingPath" @click="handleRecording">点击录音</view>
+
+			<view class="item_recording" v-if="recordingPath" @click="handlePlayRecording">
+				<img :src="recordingImg" />
+				{{ recordingTime }}″
+			</view>
+			<view class="recording_icon" v-if="recordingPath" @click="handleDeleteRecording">×</view>
 		</view>
 
+		<!-- 录音弹窗区域 -->
+		<uni-popup :safe-area="true" background-color="#fff" ref="popup_recording">
+			<view class="popup_recording">
+				<recording @getTempFilePath="getTempFilePath" />
+			</view>
+		</uni-popup>
+
 		<view class="title">关联耗材</view>
 
 		<!-- 每一个耗材盒子区域 -->
-		<view class="detail_box">
+		<!-- <view class="detail_box">
 			<view class="detail_box_item">
 				<view class="item_key">耗材名称</view>
 				<view class="item_value">螺丝钉</view>
@@ -34,6 +47,26 @@
 				<view class="item_key">耗材单价</view>
 				<view class="item_value">0.5</view>
 			</view>
+		</view> -->
+
+		<!-- 每一个耗材盒子区域 -->
+		<view class="detail_box" v-for="(item, index) in goodList" :key="index">
+			<view class="detail_box_item">
+				<view class="item_key">耗材名称</view>
+				<view class="item_value">{{ item.name }}</view>
+			</view>
+			<view class="detail_box_item">
+				<view class="item_key">耗材数量</view>
+				<view class="item_value">
+					<uni-number-box v-model="item.num" :min="0" @change="bindChange($event, index)"></uni-number-box>
+				</view>
+			</view>
+			<view class="detail_box_item">
+				<view class="item_key">耗材单价</view>
+				<view class="item_value">
+					<input type="number" placeholder="请输入耗材单价" v-model="item.price" @blur="handleChangePrice($event, item)" />
+				</view>
+			</view>
 		</view>
 
 		<!-- 添加耗材区域 -->
@@ -45,21 +78,21 @@
 		<!-- 合计费用区域 -->
 		<view class="total">
 			<view>合计费用</view>
-			<view>10元</view>
+			<view>{{ countMoney }}元</view>
 		</view>
 
 		<view class="title">维修师傅</view>
 
 		<view class="box">
 			<img src="../../static/images/repairsImg/people.png" />
-			张三
+			{{ worker }}
 		</view>
 
 		<view class="title">手机</view>
 
 		<view class="box">
 			<img src="../../static/images/repairsImg/phone2.png" />
-			13659854589
+			{{ phone }}
 		</view>
 
 		<view class="title">现场拍照</view>
@@ -75,7 +108,7 @@
 			@delete="handleDelete"
 		></uni-file-picker>
 
-		<view class="btn">确认提交</view>
+		<view class="btn" @click="handleSub">确认提交</view>
 
 		<!-- 用于图片压缩的canvas画布 -->
 		<canvas
@@ -94,10 +127,24 @@
 </template>
 
 <script>
+import recording from '../components/recording.vue'
+const innerAudioContext = uni.createInnerAudioContext()
 export default {
+	components: {
+		recording
+	},
 	data() {
 		return {
-			single: '',
+			// 维修日期
+			repairDate: '',
+			// 维修内容
+			repairContent: '',
+			// 维修师傅
+			worker: '张三',
+			// 手机号码
+			phone: '13659854589',
+			// 耗材列表
+			goodList: [],
 			count: 6,
 			// 显示的图片数据
 			imgList: [],
@@ -115,11 +162,100 @@ export default {
 				}
 			},
 			//画板边长默认是屏幕宽度，正方形画布
-			cw: uni.getSystemInfoSync().windowWidth
+			cw: uni.getSystemInfoSync().windowWidth,
+			// 录音文件路径
+			recordingPath: '',
+			// 录音图片地址
+			recordingImg: '../../static/images/repairsImg/recording.jpg',
+			// 录音时长
+			recordingTime: 0,
+			// 播放状态
+			playStatus: false,
+			// 定时器标识
+			timer: null
+		}
+	},
+	computed: {
+		// 合计费用
+		countMoney() {
+			let countMoney = 0
+			this.goodList.forEach((ele) => {
+				countMoney += Number(ele.num) * Number(ele.price)
+			})
+			if (countMoney) {
+				return countMoney
+			} else {
+				return 0
+			}
 		}
 	},
+	mounted() {
+		//在ios下静音时播放没有声音，默认为true，改为false就好了。
+		uni.setInnerAudioOption({
+			obeyMuteSwitch: false
+		})
+		uni.$on('addConsumable', this.addConsumable)
+	},
 	methods: {
-		bindChange() {},
+		// 单价输入框输入回调
+		handleChangePrice(e, item) {
+			// 验证输入单价格式 只能是数字，小数点最多两位
+			const reg = /(^[1-9]\d*(\.\d{1,2})?$)|(^0(\.\d{1,2})?$)/
+
+			if (!reg.test(e.detail.value)) {
+				uni.showToast({
+					title: '请确定单价为数字，并且只能保留两位小数点',
+					icon: 'none'
+				})
+				item.price = 0
+			}
+		},
+		// 全局自定义事件
+		addConsumable(e) {
+			// console.log(e)
+
+			// 判断是否存在相同的耗材
+			let flag = this.goodList.some((ele) => {
+				return ele.name === e.data
+			})
+
+			if (!flag) {
+				this.goodList.push({
+					name: e.data,
+					num: 1,
+					price: 0
+				})
+			}
+		},
+		// 确认提交按钮回调
+		handleSub() {
+			console.log(this.repairDate)
+			console.log(this.repairContent)
+			console.log(this.recordingPath)
+			console.log(this.goodList)
+			console.log(this.countMoney)
+			console.log(this.worker)
+			console.log(this.phone)
+			console.log(this.subImgList)
+			uni.showToast({
+				title: '提交成功',
+				icon: 'success'
+			})
+			setTimeout(() => {
+				uni.reLaunch({
+					url: '/pagesRepairs/box/box'
+				})
+			}, 1500)
+		},
+		// 耗材数量计数器改变回调
+		bindChange(e, index) {
+			// console.log(e)
+			// console.log(index)
+			if (e === 0) {
+				this.goodList.splice(index, 1)
+			}
+		},
+		// 添加耗材按钮回调
 		handleAdd() {
 			uni.navigateTo({
 				url: '/pagesRepairs/addGoods/addGoods'
@@ -147,8 +283,8 @@ export default {
 						filePath: resPath,
 						name: 'file',
 						success: (uploadFileRes) => {
-							subImgList.value.push(JSON.parse(uploadFileRes.data).data.join())
-							imgList.value.push({
+							this.subImgList.push(JSON.parse(uploadFileRes.data).data.join())
+							this.imgList.push({
 								url: item.path,
 								name: ''
 							})
@@ -164,11 +300,116 @@ export default {
 				})
 			})
 		},
+		// 删除图片回调
 		handleDelete(e) {
 			// console.log(e);
-			const num = imgList.value.findIndex((v) => v.url === e.tempFilePath)
-			subImgList.value.splice(num, 1)
-			imgList.value.splice(num, 1)
+			const num = this.imgList.findIndex((v) => v.url === e.tempFilePath)
+			this.subImgList.splice(num, 1)
+			this.imgList.splice(num, 1)
+		},
+		// 点击录音按钮回调
+		handleRecording() {
+			uni.getSetting({
+				success: (res) => {
+					if (!res.authSetting['scope.record']) {
+						uni.authorize({
+							scope: 'scope.record',
+							success(res) {
+								// 授权成功
+								uni.showToast({
+									title: '授权成功',
+									icon: 'none'
+								})
+							},
+							fail() {
+								uni.showModal({
+									content: '检测到您没打开麦克风权限，是否去设置打开？',
+									confirmText: '确认',
+									cancelText: '取消',
+									success: (res) => {
+										if (res.confirm) {
+											uni.openSetting({
+												success: (res) => {}
+											})
+										} else {
+											uni.showToast({
+												title: '获取麦克风权限失败',
+												icon: 'none'
+											})
+										}
+									}
+								})
+							}
+						})
+					} else {
+						this.$refs.popup_recording.open('bottom')
+					}
+				},
+				fail() {
+					uni.showToast({
+						title: '获取麦克风权限失败',
+						icon: 'none'
+					})
+				}
+			})
+		},
+		// 点击录音播放回调
+		handlePlayRecording() {
+			innerAudioContext.src = this.recordingPath
+			if (!this.playStatus) {
+				this.playStatus = true
+				innerAudioContext.play()
+
+				this.timer = setInterval(() => {
+					if (this.recordingImg == '../../static/images/repairsImg/recording.jpg') {
+						this.recordingImg = '../../static/images/repairsImg/recording2.jpg'
+					} else if (this.recordingImg == '../../static/images/repairsImg/recording2.jpg') {
+						this.recordingImg = '../../static/images/repairsImg/recording3.jpg'
+					} else if (this.recordingImg == '../../static/images/repairsImg/recording3.jpg') {
+						this.recordingImg = '../../static/images/repairsImg/recording.jpg'
+					}
+				}, 300)
+
+				//播放结束
+				innerAudioContext.onEnded(() => {
+					clearInterval(this.timer)
+					this.timer = null
+					this.recordingImg = '../../static/images/repairsImg/recording.jpg'
+					this.playStatus = false
+				})
+			} else {
+				clearInterval(this.timer)
+				this.recordingImg = '../../static/images/repairsImg/recording.jpg'
+				this.playStatus = false
+				innerAudioContext.stop()
+			}
+		},
+		// 删除录音回调
+		handleDeleteRecording() {
+			if (this.playStatus) {
+				uni.showToast({
+					title: '播放中不能删除',
+					icon: 'none',
+					mask: true
+				})
+			} else {
+				uni.showModal({
+					title: '提示',
+					content: '确定删除录音吗？',
+					success: (res) => {
+						if (res.confirm) {
+							this.recordingPath = ''
+							this.recordingTime = 0
+						}
+					}
+				})
+			}
+		},
+		// 自定义事件回调,获取录音文件路径
+		getTempFilePath(path, time) {
+			this.recordingPath = path
+			this.recordingTime = time
+			this.$refs.popup_recording.close()
 		}
 	}
 }
@@ -178,6 +419,8 @@ export default {
 .container {
 	box-sizing: border-box;
 	padding: 0 30rpx;
+	width: 100%;
+	height: 100vh;
 	overflow-y: auto;
 
 	.title {
@@ -225,6 +468,35 @@ export default {
 				height: 33rpx;
 			}
 		}
+
+		.item_recording {
+			margin-left: 35rpx;
+			display: flex;
+			align-items: center;
+			width: 230rpx;
+			height: 65rpx;
+			color: #000;
+			border-radius: 100rpx;
+			border: 1rpx solid #cccccc;
+
+			img {
+				margin: 0 12rpx;
+				width: 40rpx;
+				height: 40rpx;
+			}
+		}
+
+		.recording_icon {
+			margin-left: auto;
+			margin-right: 35rpx;
+			font-size: 40rpx;
+		}
+	}
+
+	.popup_recording {
+		width: 100%;
+		height: 460rpx;
+		background-color: #fff;
 	}
 
 	.detail_box {
@@ -251,6 +523,10 @@ export default {
 
 			.item_value {
 				font-weight: bold;
+
+				input {
+					text-align: right;
+				}
 			}
 		}
 	}

pagesRepairs/repairs/repairs.vue

@@ -2,7 +2,7 @@
 	<view class="container">
 		<!-- 公告区域 -->
 		<view class="notice">
-			<uni-notice-bar show-icon single speed="50" :scrollable="true" background-color="#fff" color="#000" text="今日14:00系统更新请不要进行报修！" />
+			<uni-notice-bar show-icon single speed="50" :scrollable="true" background-color="#fff" color="#000" :text="repairsNotice" />
 		</view>
 		<view class="gap"></view>
 
@@ -12,7 +12,9 @@
 				报修区域
 				<text>*</text>
 			</view>
-			<view class="item_info" @click="handleSelectArea">请选择报修区域</view>
+			<view class="item_info" :class="{ item_color: repairsArea }" @click="handleSelectArea">
+				{{ repairsArea ? repairsArea : '请选择报修区域' }}
+			</view>
 			<view class="item_icon" @click="handleSelectArea">
 				<img src="../../static/images/repairsImg/right.png" />
 			</view>
@@ -26,7 +28,7 @@
 			</view>
 			<view class="item_info">
 				<view class="item_input">
-					<input placeholder-style="color:#CCCCCC" type="text" placeholder="请输入详细地址" />
+					<input placeholder-style="color:#CCCCCC" type="text" placeholder="请输入详细地址" v-model="repairsAddress" />
 				</view>
 			</view>
 		</view>
@@ -37,7 +39,9 @@
 				报修物品
 				<text>*</text>
 			</view>
-			<view class="item_info" @click="handleSelectGoods">请选择报修物品</view>
+			<view class="item_info" :class="{ item_color: repairsGoods }" @click="handleSelectGoods">
+				{{ repairsGoods ? repairsGoods : '请选择报修物品' }}
+			</view>
 			<view class="item_icon" @click="handleSelectGoods">
 				<img src="../../static/images/repairsImg/right.png" />
 			</view>
@@ -45,13 +49,10 @@
 
 		<!-- 故障描述 -->
 		<view class="box_item2">
-			<view class="item2_title">
-				故障描述
-				<text>*</text>
-			</view>
+			<view class="item2_title">故障描述</view>
 			<view class="item2_info">
 				<view class="item2_textarea">
-					<textarea placeholder-style="color:#CCCCCC" placeholder="请输入故障描述"></textarea>
+					<textarea placeholder-style="color:#CCCCCC" placeholder="请输入故障描述" v-model="repairsDescription"></textarea>
 				</view>
 			</view>
 		</view>
@@ -59,18 +60,23 @@
 		<!-- 报修录音区域 -->
 		<view class="box_item">
 			<view class="item_title">报修录音</view>
-			<view class="item_info">
+			<view class="item_info" v-if="!recordingPath">
 				<view class="info_icon" @click="handleRecording">
 					<img src="../../static/images/repairsImg/voice.png" />
 				</view>
 				<view class="info_tips" @click="handleRecording">点击录音</view>
 			</view>
+			<view class="item_recording" v-else @click="handlePlayRecording">
+				<img :src="recordingImg" />
+				{{ recordingTime }}″
+			</view>
+			<view class="recording_icon" v-if="recordingPath" @click="handleDeleteRecording">×</view>
 		</view>
 
 		<!-- 录音弹窗区域 -->
-		<uni-popup ref="popup_recording">
+		<uni-popup :safe-area="true" background-color="#fff" ref="popup_recording">
 			<view class="popup_recording">
-				<recording />
+				<recording @getTempFilePath="getTempFilePath" />
 			</view>
 		</uni-popup>
 
@@ -78,6 +84,7 @@
 		<view class="box_item3">
 			<view class="item3_title">
 				上传照片
+				<span>*</span>
 				<text>（可上传三张，请上传局部图和区域图）</text>
 			</view>
 
@@ -101,7 +108,7 @@
 			</view>
 			<view class="item_info">
 				<view class="item_input">
-					<input placeholder-style="color:#CCCCCC" type="text" placeholder="请输入报修姓名" />
+					<input placeholder-style="color:#CCCCCC" type="text" placeholder="请输入报修姓名" v-model="repairsName" />
 				</view>
 			</view>
 		</view>
@@ -114,16 +121,16 @@
 			</view>
 			<view class="item_info">
 				<view class="item_input">
-					<input placeholder-style="color:#CCCCCC" type="text" placeholder="请输入联系电话" />
+					<input placeholder-style="color:#CCCCCC" type="number" placeholder="请输入联系电话" v-model="repairsPhone" />
 				</view>
 			</view>
 		</view>
 
 		<!-- 底部区域 -->
 		<view class="foot">
-			<view class="foot_btn">确认提交</view>
-			<view class="foot_phone" @click="handleCallPhone('13820846714')">紧急电话 5661626</view>
-			<view class="foot_phone" @click="handleCallPhone('13820846714')">服务监督电话 5661626</view>
+			<view class="foot_btn" @click="handleAffirmSub">确认提交</view>
+			<view class="foot_phone" @click="handleCallPhone(urgencyPhone)">紧急电话 {{ urgencyPhone }}</view>
+			<view class="foot_phone" @click="handleCallPhone(searchPhone)">服务监督电话 {{ searchPhone }}</view>
 		</view>
 
 		<!-- 消息通知按钮区域 -->
@@ -151,16 +158,45 @@
 </template>
 
 <script>
-import recording from '../components/recording2.vue'
+import recording from '../components/recording.vue'
 // 图片压缩方法
 import getLessLimitSizeImage from '../util/imageCompress.js'
 
+const innerAudioContext = uni.createInnerAudioContext()
 export default {
 	components: {
 		recording
 	},
 	data() {
 		return {
+			// 报修公告
+			repairsNotice: '今日14:00系统更新请不要进行报修！',
+			// 报修区域
+			repairsArea: '',
+			// 报修地址
+			repairsAddress: '',
+			// 报修物品
+			repairsGoods: '',
+			// 故障描述
+			repairsDescription: '',
+			// 报修姓名
+			repairsName: '',
+			// 联系电话
+			repairsPhone: '',
+			// 紧急电话
+			urgencyPhone: '18320846714',
+			// 服务电话
+			searchPhone: '18320846714',
+			// 播放状态
+			playStatus: false,
+			// 定时器标识
+			timer: null,
+			// 录音图片地址
+			recordingImg: '../../static/images/repairsImg/recording.jpg',
+			// 录音文件路径
+			recordingPath: '',
+			// 录音时长
+			recordingTime: 0,
 			// 显示的图片数据
 			imgList: [],
 			// 上传的图片数据
@@ -180,7 +216,163 @@ export default {
 			cw: uni.getSystemInfoSync().windowWidth
 		}
 	},
+	mounted() {
+		uni.$on('addRepairsArea', this.addRepairsArea)
+		uni.$on('addRepairsGoods', this.addRepairsGoods)
+		//在ios下静音时播放没有声音，默认为true，改为false就好了。
+		uni.setInnerAudioOption({
+			obeyMuteSwitch: false
+		})
+	},
 	methods: {
+		// 确认提交按钮回调
+		handleAffirmSub() {
+			const flag = this.handleValidate()
+			if (flag) {
+				console.log(this.repairsArea)
+				console.log(this.repairsAddress)
+				console.log(this.repairsGoods)
+				console.log(this.repairsDescription)
+				console.log(this.recordingPath)
+				console.log(this.subImgList)
+				console.log(this.repairsName)
+				console.log(this.repairsPhone)
+				uni.showToast({
+					title: '提交成功',
+					icon: 'none'
+				})
+			}
+		},
+		// 验证信息是否符合规范
+		handleValidate() {
+			const reName = /^[\u4e00-\u9fa5]{2,4}$/
+			const rePhone = /^[1][3,4,5,7,8,9][0-9]{9}$/
+			if (!this.repairsArea) {
+				uni.showToast({
+					title: '请选择报修区域',
+					icon: 'none'
+				})
+				return
+			}
+			if (!this.repairsAddress) {
+				uni.showToast({
+					title: '请输入详细地址',
+					icon: 'none'
+				})
+				return
+			}
+			if (!this.repairsGoods) {
+				uni.showToast({
+					title: '请选择报修物品',
+					icon: 'none'
+				})
+				return
+			}
+			if (this.subImgList.length == 0) {
+				uni.showToast({
+					title: '请上传报修照片',
+					icon: 'none'
+				})
+				return
+			}
+			if (!this.repairsName) {
+				uni.showToast({
+					title: '请输入报修姓名',
+					icon: 'none'
+				})
+				return false
+			}
+			if (!reName.test(this.repairsName)) {
+				uni.showToast({
+					title: '姓名格式有误',
+					icon: 'none'
+				})
+				return false
+			}
+			if (!this.repairsPhone) {
+				uni.showToast({
+					title: '请输入联系电话',
+					icon: 'none'
+				})
+				return false
+			}
+			if (!rePhone.test(this.repairsPhone)) {
+				uni.showToast({
+					title: '电话号码格式有误',
+					icon: 'none'
+				})
+				return false
+			}
+			return true
+		},
+		// 全局自定义事件
+		addRepairsArea(e) {
+			console.log(e)
+			this.repairsArea = e.data
+		},
+		// 全局自定义事件
+		addRepairsGoods(e) {
+			console.log(e)
+			this.repairsGoods = e.data
+		},
+		// 删除录音回调
+		handleDeleteRecording() {
+			if (this.playStatus) {
+				uni.showToast({
+					title: '播放中不能删除',
+					icon: 'none',
+					mask: true
+				})
+			} else {
+				uni.showModal({
+					title: '提示',
+					content: '确定删除录音吗？',
+					success: (res) => {
+						if (res.confirm) {
+							this.recordingPath = ''
+							this.recordingTime = 0
+						}
+					}
+				})
+			}
+		},
+		// 点击录音播放回调
+		handlePlayRecording() {
+			innerAudioContext.src = this.recordingPath
+			if (!this.playStatus) {
+				this.playStatus = true
+				innerAudioContext.play()
+
+				this.timer = setInterval(() => {
+					if (this.recordingImg == '../../static/images/repairsImg/recording.jpg') {
+						this.recordingImg = '../../static/images/repairsImg/recording2.jpg'
+					} else if (this.recordingImg == '../../static/images/repairsImg/recording2.jpg') {
+						this.recordingImg = '../../static/images/repairsImg/recording3.jpg'
+					} else if (this.recordingImg == '../../static/images/repairsImg/recording3.jpg') {
+						this.recordingImg = '../../static/images/repairsImg/recording.jpg'
+					}
+				}, 300)
+
+				//播放结束
+				innerAudioContext.onEnded(() => {
+					clearInterval(this.timer)
+					this.timer = null
+					this.recordingImg = '../../static/images/repairsImg/recording.jpg'
+					this.playStatus = false
+				})
+			} else {
+				clearInterval(this.timer)
+				this.recordingImg = '../../static/images/repairsImg/recording.jpg'
+				this.playStatus = false
+				innerAudioContext.stop()
+			}
+		},
+		// 自定义事件回调,获取录音文件路径
+		getTempFilePath(path, time) {
+			this.recordingPath = path
+			this.recordingTime = time
+			this.$refs.popup_recording.close()
+		},
 		// 选择图片回调
 		select(e) {
 			console.log(e)
@@ -203,8 +395,8 @@ export default {
 						filePath: resPath,
 						name: 'file',
 						success: (uploadFileRes) => {
-							subImgList.value.push(JSON.parse(uploadFileRes.data).data.join())
-							imgList.value.push({
+							this.subImgList.push(JSON.parse(uploadFileRes.data).data.join())
+							this.imgList.push({
 								url: item.path,
 								name: ''
 							})
@@ -223,9 +415,9 @@ export default {
 		// 删除图片回调
 		handleDelete(e) {
 			// console.log(e);
-			const num = imgList.value.findIndex((v) => v.url === e.tempFilePath)
-			subImgList.value.splice(num, 1)
-			imgList.value.splice(num, 1)
+			const num = this.imgList.findIndex((v) => v.url === e.tempFilePath)
+			this.subImgList.splice(num, 1)
+			this.imgList.splice(num, 1)
 		},
 
 		// 点击报修区域回调
@@ -248,7 +440,6 @@ export default {
 		},
 		// 点击电话号码回调
 		handleCallPhone(phone) {
-			console.log(phone)
 			uni.makePhoneCall({
 				phoneNumber: phone
 			})
@@ -256,7 +447,49 @@ export default {
 
 		// 点击录音按钮回调
 		handleRecording() {
-			this.$refs.popup_recording.open('bottom')
+			uni.getSetting({
+				success: (res) => {
+					if (!res.authSetting['scope.record']) {
+						uni.authorize({
+							scope: 'scope.record',
+							success(res) {
+								// 授权成功
+								uni.showToast({
+									title: '授权成功',
+									icon: 'none'
+								})
+							},
+							fail() {
+								uni.showModal({
+									content: '检测到您没打开麦克风权限，是否去设置打开？',
+									confirmText: '确认',
+									cancelText: '取消',
+									success: (res) => {
+										if (res.confirm) {
+											uni.openSetting({
+												success: (res) => {}
+											})
+										} else {
+											uni.showToast({
+												title: '获取麦克风权限失败',
+												icon: 'none'
+											})
+										}
+									}
+								})
+							}
+						})
+					} else {
+						this.$refs.popup_recording.open('bottom')
+					}
+				},
+				fail() {
+					uni.showToast({
+						title: '获取麦克风权限失败',
+						icon: 'none'
+					})
+				}
+			})
 		}
 	}
 }
@@ -298,7 +531,9 @@ export default {
 		.item_info {
 			flex: 1;
 			display: flex;
+			align-items: center;
 			padding: 0 10rpx;
+			height: 100%;
 			color: #cccccc;
 
 			.item_input {
@@ -334,6 +569,10 @@ export default {
 			}
 		}
 
+		.item_color {
+			color: #000;
+		}
+
 		.item_icon {
 			width: 38rpx;
 			height: 38rpx;
@@ -343,6 +582,26 @@ export default {
 				height: 100%;
 			}
 		}
+
+		.item_recording {
+			display: flex;
+			align-items: center;
+			width: 200rpx;
+			height: 50rpx;
+			border-radius: 100rpx;
+			border: 1rpx solid #cccccc;
+
+			img {
+				margin: 0 12rpx;
+				width: 40rpx;
+				height: 40rpx;
+			}
+		}
+
+		.recording_icon {
+			margin-left: auto;
+			font-size: 40rpx;
+		}
 	}
 
 	.box_item2 {
@@ -396,6 +655,11 @@ export default {
 			font-size: 28rpx;
 			font-weight: bold;
 
+			span {
+				margin-left: 5rpx;
+				color: #d43030;
+			}
+
 			text {
 				font-size: 24rpx;
 				color: #808080;
@@ -434,7 +698,7 @@ export default {
 		z-index: 2;
 		position: fixed;
 		right: 0;
-		bottom: 155rpx;
+		bottom: 200rpx;
 		display: flex;
 		justify-content: center;
 		align-items: center;

pagesRepairs/selectArea/selectArea.vue

@@ -30,26 +30,38 @@
 export default {
 	data() {
 		return {
+			// 顶部分段器选项数组
 			items: ['黄家湖校区', '墨轩湖校区'],
+			// 分段器当前索引
 			current: 0,
+			// 左边分类数组
 			leftList: ['教学楼', '行政楼', '综合楼', '科技楼', '学生宿舍', '其他'],
-			rightList: ['1栋', '2栋', '3栋', '4栋', '5栋', '6栋', '7栋', '8栋', '体育场', '篮球场', '其他'],
+			// 左边分类数组当前索引
 			active_left: 0,
+			// 右边分类数组
+			rightList: ['1栋', '2栋', '3栋', '4栋', '5栋', '6栋', '7栋', '8栋', '体育场', '篮球场', '其他'],
+			// 右边分类数组当前索引
 			active_right: 0
 		}
 	},
 	methods: {
+		// 顶部分段器切换选项回调
 		onClickItem(e) {
 			if (this.current != e.currentIndex) {
 				this.current = e.currentIndex
-				console.log(this.current)
 			}
 		},
+		// 左边数组切换回调
 		handleChange(index) {
 			this.active_left = index
 		},
+		// 右边数组切换回调
 		handleChange2(index) {
 			this.active_right = index
+			const repairsArea = this.items[this.current] + this.leftList[this.active_left] + this.rightList[this.active_right]
+			uni.$emit('addRepairsArea', {
+				data: repairsArea
+			})
 			uni.navigateBack(1)
 		}
 	}

pagesRepairs/selectGoods/selectGoods.vue

@@ -24,9 +24,13 @@
 export default {
 	data() {
 		return {
+			// 左边分类数组当前索引
 			active_left: 0,
-			active_right: 0,
+			// 左边分类数组
 			leftList: ['其他', '水电'],
+			// 右边分类数组当前索引
+			active_right: 0,
+			// 右边分类数组
 			rightList: ['下水道', '安全指示牌', '消费应急灯', '排水管道', '吊顶', '风扇', '没电']
 		}
 	},
@@ -36,6 +40,10 @@ export default {
 		},
 		handleChange2(index) {
 			this.active_right = index
+			const repairsGoods = this.leftList[this.active_left] + this.rightList[this.active_right]
+			uni.$emit('addRepairsGoods', {
+				data: repairsGoods
+			})
 			uni.navigateBack(1)
 		}
 	}
@@ -108,4 +116,4 @@ export default {
 		}
 	}
 }
-</style>
+</style>

pagesRepairs/transferOrder/transferOrder.vue

@@ -4,45 +4,230 @@
 
 		<view class="box" v-if="type === '1'">
 			<img src="../../static/images/repairsImg/people.png" />
-			<view class="box_info">张三</view>
+			<view class="box_info">{{ applyPeople }}</view>
 		</view>
 
 		<view class="title">转单语音说明</view>
 
 		<!-- 录音区域 -->
 		<view class="voice">
-			<view class="voice_box">
+			<view class="voice_box" v-if="!recordingPath" @click="handleRecording">
 				<img src="../../static/images/repairsImg/voice.png" />
 			</view>
-			点击录音
+			<view v-if="!recordingPath" @click="handleRecording">点击录音</view>
+
+			<view class="item_recording" v-if="recordingPath" @click="handlePlayRecording">
+				<img :src="recordingImg" />
+				{{ recordingTime }}″
+			</view>
+			<view class="recording_icon" v-if="recordingPath" @click="handleDeleteRecording">×</view>
 		</view>
 
+		<!-- 录音弹窗区域 -->
+		<uni-popup :safe-area="true" background-color="#fff" ref="popup_recording">
+			<view class="popup_recording">
+				<recording @getTempFilePath="getTempFilePath" />
+			</view>
+		</uni-popup>
+
 		<view class="title">备注</view>
 
 		<view class="textarea">
-			<textarea placeholder-style="color:#CCCCCC" placeholder="请输入转单说明"></textarea>
+			<textarea placeholder-style="color:#CCCCCC" placeholder="请输入转单说明" v-model="desc"></textarea>
 		</view>
 
 		<view class="btn2" v-if="type === '1'">
-			<view class="btn_box type">拒绝</view>
-			<view class="btn_box type2">派单</view>
+			<view class="btn_box type" @click="handleRefuse">拒绝</view>
+			<view class="btn_box type2" @click="handleSendOrders">派单</view>
 		</view>
-		<view class="btn" v-else>确认</view>
+		<view class="btn" v-else @click="handleAffirm">确认</view>
 	</view>
 </template>
 
 <script>
+import recording from '../components/recording.vue'
+const innerAudioContext = uni.createInnerAudioContext()
 export default {
+	components: {
+		recording
+	},
 	data() {
 		return {
-			type: null
+			// 申请人
+			applyPeople: '张三',
+			type: null,
+			// 备注输入框数据
+			desc: '',
+			// 录音文件路径
+			recordingPath: '',
+			// 录音图片地址
+			recordingImg: '../../static/images/repairsImg/recording.jpg',
+			// 录音时长
+			recordingTime: 0,
+			// 播放状态
+			playStatus: false,
+			// 定时器标识
+			timer: null
 		}
 	},
+	mounted() {
+		//在ios下静音时播放没有声音，默认为true，改为false就好了。
+		uni.setInnerAudioOption({
+			obeyMuteSwitch: false
+		})
+	},
 	onLoad(options) {
 		console.log(options)
 		if (options.type) {
 			this.type = options.type
 		}
+	},
+	methods: {
+		// 拒绝按钮回调
+		handleRefuse() {
+			uni.showModal({
+				title: '提示',
+				content: '确定拒绝该审核吗？',
+				success: (res) => {
+					if (res.confirm) {
+						uni.showToast({
+							title: '已拒绝该审核',
+							icon: 'none'
+						})
+						setTimeout(() => {
+							uni.redirectTo({
+								url: '/pagesRepairs/box/box'
+							})
+						}, 1500)
+					}
+				}
+			})
+		},
+		// 派单按钮回调
+		handleSendOrders() {
+			uni.navigateTo({
+				url: '/pagesRepairs/helpPeople/helpPeople?type=1'
+			})
+		},
+		// 确认按钮回调
+		handleAffirm() {
+			console.log(this.recordingPath)
+			console.log(this.desc)
+			uni.showToast({
+				title: '提交转单申请成功，请等待管理员审核',
+				icon: 'none',
+				duration: 3000
+			})
+			setTimeout(() => {
+				uni.redirectTo({
+					url: '/pagesRepairs/box/box'
+				})
+			}, 3000)
+		},
+		// 点击录音按钮回调
+		handleRecording() {
+			uni.getSetting({
+				success: (res) => {
+					if (!res.authSetting['scope.record']) {
+						uni.authorize({
+							scope: 'scope.record',
+							success(res) {
+								// 授权成功
+								uni.showToast({
+									title: '授权成功',
+									icon: 'none'
+								})
+							},
+							fail() {
+								uni.showModal({
+									content: '检测到您没打开麦克风权限，是否去设置打开？',
+									confirmText: '确认',
+									cancelText: '取消',
+									success: (res) => {
+										if (res.confirm) {
+											uni.openSetting({
+												success: (res) => {}
+											})
+										} else {
+											uni.showToast({
+												title: '获取麦克风权限失败',
+												icon: 'none'
+											})
+										}
+									}
+								})
+							}
+						})
+					} else {
+						this.$refs.popup_recording.open('bottom')
+					}
+				},
+				fail() {
+					uni.showToast({
+						title: '获取麦克风权限失败',
+						icon: 'none'
+					})
+				}
+			})
+		},
+		// 点击录音播放回调
+		handlePlayRecording() {
+			innerAudioContext.src = this.recordingPath
+			if (!this.playStatus) {
+				this.playStatus = true
+				innerAudioContext.play()
+
+				this.timer = setInterval(() => {
+					if (this.recordingImg == '../../static/images/repairsImg/recording.jpg') {
+						this.recordingImg = '../../static/images/repairsImg/recording2.jpg'
+					} else if (this.recordingImg == '../../static/images/repairsImg/recording2.jpg') {
+						this.recordingImg = '../../static/images/repairsImg/recording3.jpg'
+					} else if (this.recordingImg == '../../static/images/repairsImg/recording3.jpg') {
+						this.recordingImg = '../../static/images/repairsImg/recording.jpg'
+					}
+				}, 300)
+
+				//播放结束
+				innerAudioContext.onEnded(() => {
+					clearInterval(this.timer)
+					this.timer = null
+					this.recordingImg = '../../static/images/repairsImg/recording.jpg'
+					this.playStatus = false
+				})
+			} else {
+				clearInterval(this.timer)
+				this.recordingImg = '../../static/images/repairsImg/recording.jpg'
+				this.playStatus = false
+				innerAudioContext.stop()
+			}
+		},
+		// 删除录音回调
+		handleDeleteRecording() {
+			if (this.playStatus) {
+				uni.showToast({
+					title: '播放中不能删除',
+					icon: 'none',
+					mask: true
+				})
+			} else {
+				uni.showModal({
+					title: '提示',
+					content: '确定删除录音吗？',
+					success: (res) => {
+						if (res.confirm) {
+							this.recordingPath = ''
+							this.recordingTime = 0
+						}
+					}
+				})
+			}
+		},
+		// 自定义事件回调,获取录音文件路径
+		getTempFilePath(path, time) {
+			this.recordingPath = path
+			this.recordingTime = time
+			this.$refs.popup_recording.close()
+		}
 	}
 }
 </script>
@@ -103,6 +288,35 @@ export default {
 				height: 33rpx;
 			}
 		}
+
+		.item_recording {
+			margin-left: 35rpx;
+			display: flex;
+			align-items: center;
+			width: 230rpx;
+			height: 65rpx;
+			color: #000;
+			border-radius: 100rpx;
+			border: 1rpx solid #cccccc;
+
+			img {
+				margin: 0 12rpx;
+				width: 40rpx;
+				height: 40rpx;
+			}
+		}
+
+		.recording_icon {
+			margin-left: auto;
+			margin-right: 35rpx;
+			font-size: 40rpx;
+		}
+	}
+
+	.popup_recording {
+		width: 100%;
+		height: 460rpx;
+		background-color: #fff;
 	}
 
 	.textarea {