no message

components/multiple-picker/multiple-picker.vue

@@ -0,0 +1,262 @@
+<template>
+	<view class="popup" v-show="show">
+		<view class="bg" @tap="cancelMultiple"></view>
+	    <view class="selectMultiple" :animation="animationData">
+	    	<view class="multipleBody">
+	    		<view class="title">
+	    			<view class="close" @tap="cancelMultiple">
+	    				取消
+	    			</view>
+	    			<view class="name">
+	    				{{title}}
+	    			</view>
+	    			<view class="confirm" @tap="confirmMultiple">
+	    				确认
+	    			</view>
+	    		</view>
+	    		<view class="list">
+					<view class="mask mask-top"></view>
+					<view class="mask mask-bottom"></view>
+	    			<scroll-view class="diet-list" scroll-y="true">
+	    				<view v-for="(item, index) in list" :class="['item', item.selected ? 'checked' : '']" @tap="onChange(index, item)">
+	    					<span>{{item.label}}</span>
+	    					<view class="icon" v-show="item.selected">
+								<icon type="success_no_circle" size="16" color="#2D8DFF"/>
+	    					</view>
+	    				</view>
+	    			</scroll-view>
+	    		</view>
+	    	</view>
+	    </view>
+	</view>
+</template>
+
+<script>
+	export default {
+		name:"multiple-picker",
+		data() {
+			return {
+				// 选中值
+				value: [],
+				// 选中列表
+				selected: [],
+				// 列表数据
+				list: [],
+				// 出场动画
+				animationData: {},
+			};
+		},
+		props: {
+			// 是否显示
+			show: {
+				type: Boolean,
+				default: false
+			},
+			// 标题
+			title: {
+				type: String,
+				default: ''
+			},
+			//数据列表
+			columns: {
+				type: Array,
+				default: [
+					{
+						label: '测试1',
+						value: '1',
+					}
+				]
+			},
+			// 默认选中
+			defaultIndex: {
+				type: Array,
+				default: [],
+			}
+		},
+		watch: {
+			// 监听是否显示
+			show(val) {
+				if(val) {
+					this.openMultiple();
+				}
+			}
+		},
+		methods: {
+			// 列点击事件
+			onChange(index, item) {
+				// 是否已选中
+				if(this.value.indexOf(item.value.toString()) >= 0) {
+					this.list[index].selected = false;
+				}
+				else {
+					this.list[index].selected = true;
+				}
+				
+				// 筛选已勾选数据
+				this.value = [];
+				this.selected = [];
+				this.list.forEach((col_item, col_index) => {
+					if(col_item.selected) {
+						this.value.push(col_item.value.toString());
+						this.selected.push({
+							label: col_item.label,
+							value: col_item.value,
+						});
+					}
+				});
+				this.$emit("change", {selected: this.selected, value: this.value});
+			},
+			// 弹出框开启触发事件
+			openMultiple() {
+				// 初始化列表数据,默认勾选数据
+				this.value = this.defaultIndex;
+				this.columns.forEach((item, index) => {
+					this.$set(item, "selected", false);
+					if(this.value.indexOf(item.value.toString()) >= 0) {
+						item.selected = true;
+					}
+				});
+				this.list = Object.assign([], this.columns);
+				// 弹出动画
+				this.openAnimation();
+			},
+			// 确认
+			confirmMultiple() {
+				this.$emit("confirm", {selected: this.selected, value: this.value});
+			},
+			// 关闭/取消
+			cancelMultiple() {
+				this.$emit("cancel");
+			},
+			// 展开动画
+			openAnimation() {
+				var animation = uni.createAnimation()
+				animation.translate(0, 300).step({ duration: 0 });
+				this.animationData = animation.export();
+				this.$nextTick(() => {
+					animation.translate(0, 0).step({ duration: 300, timingFunction: 'ease' });
+					this.animationData = animation.export()
+				})
+			},
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+	.popup {
+		width: 100%;
+		height: 100vh;
+		position: fixed;
+		z-index: 99999;
+		left: 0;
+		bottom: 0;
+		
+		.bg {
+			width: 100%;
+			height: 100%;
+			background-color: rgba(black, .5);
+		}
+	}
+	.selectMultiple {
+		width: 100%;
+		position: absolute;
+		left: 0;
+		bottom: 0;
+		background-color: white;
+		
+		.multipleBody {
+			width: 100%;
+			padding: 30rpx;
+			box-sizing: border-box;
+			padding-bottom: 80rpx;
+			
+			.title {
+				font-size: 28rpx;
+				display: flex;
+				flex-direction: row;
+				
+				.close {
+					width: 80rpx;
+					opacity: .5;
+				}
+				.name {
+					width: 530rpx;
+					text-align: center;
+					overflow: hidden;
+					display: -webkit-box;
+					-webkit-box-orient:vertical;
+					-webkit-line-clamp:1;
+				}
+				.confirm {
+					width: 80rpx;
+					text-align: right;
+					color: #2D8DFF;
+				}
+			}
+			.list {
+				width: 100%;
+				padding-top: 30rpx;
+				position: relative;
+				
+				.mask {
+					width: 100%;
+					height: 120rpx;
+					position: absolute;
+					left: 0;
+					z-index: 2;
+					pointer-events: none;
+					
+					&.mask-top {
+						top: 30rpx;
+						background-image: linear-gradient(to bottom, #fff, rgba(#fff, 0));
+					}
+					&.mask-bottom {
+						bottom: 0;
+						background-image: linear-gradient(to bottom, rgba(#fff, 0), #fff);
+					}
+				}
+				
+				.diet-list {
+					max-height: 400rpx;
+				}
+				
+				.item {
+					position: relative;
+					width: 100%;
+					line-height: 40rpx;
+					border-bottom: 1px solid rgba($color: #000000, $alpha: .05);
+					padding: 20rpx 0;
+					font-size: 30rpx;
+					box-sizing: border-box;
+					text-align: center;
+					
+					span {
+						overflow: hidden;
+						display: -webkit-box;
+						-webkit-box-orient:vertical;
+						-webkit-line-clamp:1;
+						padding: 0 40rpx;
+					}
+					
+					.icon {
+						position: absolute;
+						right: 10rpx;
+						top: 50%;
+						transform: translateY(-50%);
+						height: 16px;
+					}
+					&.checked {
+						color: #2D8DFF;
+					}
+					&:last-child {
+						border-bottom: none;
+						margin-bottom: 60rpx;
+					}
+					&:first-child {
+						margin-top: 60rpx;
+					}
+				}
+			}
+		}
+	}
+</style>

pagesRepairs/addressBook/addressBook.vue

@@ -122,6 +122,9 @@ export default {
 			]
 		}
 	},
+	mounted() {
+		console.log(666)
+	},
 	methods: {
 		handleEdit(item) {
 			// console.log(item.id)
@@ -146,7 +149,7 @@ export default {
 <style lang="scss" scoped>
 .container {
 	width: 100vw;
-	height: calc(100vh - 102rpx);
+	height: calc(100vh - 152rpx);
 	overflow-y: auto;
 
 	.search {
@@ -243,4 +246,4 @@ export default {
 		}
 	}
 }
-</style>
+</style>

pagesRepairs/box/box.vue

@@ -13,7 +13,7 @@
 		<!-- 我的报修 -->
 		<MyRepairs v-if="show === 'myRepairs'" />
 		<!-- 底部导航栏 -->
-		<Tabbar :list="routes" @changeRouter="handleChangeRouter" />
+		<Tabbar :list="routes" :currentRouter="currentRouter" @changeRouter="handleChangeRouter" />
 	</view>
 </template>
 
@@ -38,18 +38,29 @@ export default {
 	},
 	mounted() {
 		const repairsUserInfo = uni.getStorageSync('repairsUserInfo')
-		console.log(repairsUserInfo)
 		if (repairsUserInfo.routes) {
 			this.routes = this.filterRoute(this.list, repairsUserInfo.routes)
 		}
-		this.show = this.routes[0].show
-		uni.setNavigationBarTitle({
-			title: this.routes[0].text
-		})
+		const currentIndexRepairs = uni.getStorageSync('currentIndexRepairs')
+		if (currentIndexRepairs) {
+			this.currentRouter = currentIndexRepairs
+			this.show = this.routes[currentIndexRepairs].show
+			uni.setNavigationBarTitle({
+				title: this.routes[currentIndexRepairs].text
+			})
+		} else {
+			this.currentRouter = 0
+			this.show = this.routes[0].show
+			uni.setNavigationBarTitle({
+				title: this.routes[0].text
+			})
+		}
 	},
 	data() {
 		return {
+			// 展示的路由
 			routes: [],
+			// 所有的路由
 			list: [
 				{
 					text: '报修',
@@ -88,16 +99,23 @@ export default {
 					show: 'addressBook'
 				}
 			],
-			show: ''
+			// box页面展示哪个组件
+			show: '',
+			// 当前显示组件的index
+			currentRouter: 0
 		}
 	},
 	methods: {
-		handleChangeRouter(show, text) {
+		// 底部导航栏切换回调
+		handleChangeRouter(show, text, e) {
+			uni.setStorageSync('currentIndexRepairs', e)
 			this.show = show
+			this.currentRouter = e
 			uni.setNavigationBarTitle({
 				title: text
 			})
 		},
+		// 路由过滤方法
 		filterRoute(arr1, arr2) {
 			return arr1.filter((item) => {
 				return arr2.includes(item.text)
@@ -110,6 +128,6 @@ export default {
 <style lang="scss" scoped>
 .container {
 	width: 100vw;
-	height: calc(100vh - 102rpx);
+	height: calc(100vh - 152rpx);
 }
 </style>

pagesRepairs/components/recording2.vue

@@ -15,7 +15,6 @@
 					@touchmove="handleTouchMove"
 					@touchstart="longpressBtn"
 				>
-					<image src="../../static/image/logo.png" />
 					<text>{{ VoiceText }}</text>
 				</button>
 			</view>
@@ -147,39 +146,39 @@ export default {
 </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-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%;
 }
@@ -190,9 +189,10 @@ export default {
 }
 
 .record-btn-layer button {
+	margin: auto;
 	font-size: 14px;
 	line-height: 50px;
-	width: 100%;
+	width: 50%;
 	height: 50px;
 	border-radius: 8px;
 	text-align: center;
@@ -200,13 +200,6 @@ export default {
 	transition: all 0.1s;
 }
 
-.record-btn-layer button image {
-	width: 16px;
-	height: 16px;
-	margin-right: 4px;
-	vertical-align: middle;
-	transition: all 0.3s;
-}
 .record-btn-layer .record-btn-1 {
 	background-image: linear-gradient(to right, #43e97b 0%, #38f9d7 100%);
 	color: #000000 !important;
@@ -399,4 +392,4 @@ export default {
 }
 
 /* 语音录制结束---------------------------------------------------------------- */
-</style>
+</style>

pagesRepairs/components/tabbar.vue

@@ -1,6 +1,6 @@
 <template>
 	<view>
-		<uv-tabbar activeColor="#6FB6B8" :value="currentRouter" @change="change" :safeAreaInsetBottom="false" :placeholder="false">
+		<uv-tabbar activeColor="#6FB6B8" :value="currentRouter" @change="change" :placeholder="false">
 			<uv-tabbar-item v-for="(item, index) in list" :key="index" :text="item.text">
 				<template v-slot:active-icon>
 					<image class="icon" :src="item.imgUrlActive"></image>
@@ -15,19 +15,22 @@
 
 <script>
 export default {
-	props: ['list'],
-	data() {
-		return {
-			currentRouter: 0
+	props: {
+		list: {
+			type: Array
+		},
+		currentRouter: {
+			type: Number,
+			default: 0
 		}
 	},
-	created() {},
-	mounted() {},
+	data() {
+		return {}
+	},
 	methods: {
 		// 导航栏切换回调
 		change(e) {
-			this.currentRouter = e
-			this.$emit('changeRouter', this.list[e].show, this.list[e].text)
+			this.$emit('changeRouter', this.list[e].show, this.list[e].text, e)
 		}
 	}
 }

pagesRepairs/edit/edit.vue

@@ -50,7 +50,7 @@
 		</view>
 
 		<!-- 提交按钮区域 -->
-		<view class="btn">确认提交</view>
+		<view class="btn" @click="handleSub">确认提交</view>
 	</view>
 </template>
 
@@ -68,6 +68,12 @@ export default {
 		}
 	},
 	methods: {
+		handleSub() {
+			// uni.navigateBack(1)
+			uni.navigateTo({
+				url: '/pagesRepairs/box/box'
+			})
+		},
 		bindPickerChange(e) {
 			console.log('picker发送选择改变，携带值为', e.detail.value)
 			this.index = e.detail.value

pagesRepairs/home/home.vue

@@ -58,19 +58,50 @@
 			<uni-table stripe emptyText="暂无更多数据">
 				<!-- 表头行 -->
 				<uni-tr>
-					<uni-th width="50" align="center">姓名</uni-th>
+					<uni-th width="80" align="center">姓名</uni-th>
 					<uni-th width="50" align="center">工种</uni-th>
 					<uni-th width="80" align="center">状态</uni-th>
-					<uni-th width="80" align="center">是否值班</uni-th>
+					<uni-th width="70" align="center">是否值班</uni-th>
 				</uni-tr>
 				<!-- 表格数据行 -->
 				<uni-tr v-for="(item, index) in tableData" :key="index">
+					<!-- 姓名区域 -->
 					<uni-td align="center">{{ item.name }}</uni-td>
+					<!-- 工种区域 -->
 					<uni-td align="center">{{ item.type }}</uni-td>
-					<uni-td align="center">{{ item.status }}</uni-td>
-					<uni-td align="center">{{ item.work }}</uni-td>
+					<!-- 状态区域 -->
+					<uni-td align="center">
+						<picker @change="bindPickerChange($event, item)" :range="typeArray">
+							<view class="watch_color" v-if="item.status == '0'">{{ typeArray[item.status] }}</view>
+							<view class="watch_color2" v-if="item.status == '1'">{{ typeArray[item.status] }}</view>
+							<view class="watch_color3" v-if="item.status == '2'">{{ typeArray[item.status] }}</view>
+						</picker>
+					</uni-td>
+					<!-- 是否值班 -->
+					<uni-td align="center">
+						<view @click="handleChange(item, index)">{{ item.work.toString() }}</view>
+					</uni-td>
 				</uni-tr>
 			</uni-table>
+
+			<!-- 是否值班弹窗区域 -->
+			<uni-popup ref="popup_work">
+				<view class="watch_pop">
+					<view class="poop_title">
+						<view class="cancel" @click="$refs.popup_work.close()">取消</view>
+						<view class="confirm" @click="handlePopConfirm">确定</view>
+					</view>
+
+					<view class="poop_body">
+						<view class="body_item" v-for="(item, index_pop) in workArray" :key="index_pop" @click="handleChangeWork(item)">
+							<view class="body_item_info">
+								{{ item }}
+							</view>
+							<view class="body_item_icon" v-if="defaultIndex.includes(item)">✔</view>
+						</view>
+					</view>
+				</view>
+			</uni-popup>
 		</view>
 
 		<!-- 排行榜区域 -->
@@ -81,6 +112,9 @@
 			</view>
 			<!-- 排行榜柱状图 -->
 			<view class="rank_charts">
+				<!-- 加上canvas2d属性后 模拟器上图表显示异常，真机调试没有问题，开发时不添加canvas2d属性，发布时添加canvas2d属性 -->
+
+				<!-- :canvas2d="true" -->
 				<qiun-data-charts type="bar" :opts="opts" :chartData="chartData" />
 			</view>
 		</view>
@@ -99,6 +133,10 @@
 export default {
 	data() {
 		return {
+			defaultIndex: [],
+			changeIndex: 0,
+			typeArray: ['接单中', '订单饱和', '停止接单'],
+			workArray: ['正常班次', '值班班次'],
 			permission: true,
 			items: ['团队数据统计', '个人数据统计'],
 			current: 0,
@@ -143,53 +181,105 @@ export default {
 					}
 				}
 			},
+			// status状态: 0 接单中  1 订单饱和  2 停止接单
+			// work状态: 0 正常班次  1 值班班次
 			tableData: [
 				{
 					name: '张三',
 					type: '电工',
 					status: 0,
-					work: 0
+					work: ['正常班次', '值班班次']
 				},
 				{
 					name: '张三三',
 					type: '泥工',
-					status: 0,
-					work: 0
+					status: 1,
+					work: ['值班班次']
 				},
 				{
 					name: '张三',
 					type: '电工',
-					status: 0,
-					work: 0
+					status: 2,
+					work: ['正常班次']
 				},
 				{
 					name: '张三三',
 					type: '泥工',
 					status: 0,
-					work: 0
+					work: ['值班班次']
 				},
 				{
 					name: '张三',
 					type: '电工',
-					status: 0,
-					work: 0
+					status: 1,
+					work: ['值班班次']
 				},
 				{
 					name: '张三三',
 					type: '泥工',
-					status: 0,
-					work: 0
+					status: 2,
+					work: ['正常班次']
 				}
 			]
 		}
 	},
 	mounted() {},
 	methods: {
+		// 是否值班弹窗确定按钮回调
+		handlePopConfirm() {
+			uni.showModal({
+				title: '提示',
+				content: '确定修改是否值班状态吗？',
+				success: (res) => {
+					if (res.confirm) {
+						this.tableData[this.changeIndex].work = this.defaultIndex
+						console.log('用户点击确定')
+					} else if (res.cancel) {
+						console.log('用户点击取消')
+					}
+				}
+			})
+			this.$refs.popup_work.close()
+		},
+		// 点击值班状态回调
+		handleChange(item, index) {
+			this.$refs.popup_work.open('bottom')
+			this.changeIndex = index
+			this.defaultIndex = JSON.parse(JSON.stringify(item.work))
+		},
+		// 切换值班状态回调
+		handleChangeWork(item) {
+			if (this.defaultIndex.includes(item)) {
+				const temIndex = this.defaultIndex.indexOf(item)
+				this.defaultIndex.splice(temIndex, 1)
+			} else {
+				this.defaultIndex.push(item)
+			}
+		},
+
+		// 切换排班状态回调
+		bindPickerChange(e, item) {
+			uni.showModal({
+				title: '提示',
+				content: '确定修改状态吗？',
+				success: (res) => {
+					if (res.confirm) {
+						item.status = e.detail.value
+						console.log('用户点击确定')
+					} else if (res.cancel) {
+						console.log('用户点击取消')
+					}
+				}
+			})
+		},
+
+		// 点击悬浮按钮回调
 		handleGoMsg() {
 			uni.navigateTo({
 				url: '/pagesRepairs/message/message'
 			})
 		},
+		// 顶部分段器切换回调
 		onClickItem(e) {
 			if (this.current != e.currentIndex) {
 				this.current = e.currentIndex
@@ -203,7 +293,7 @@ export default {
 <style lang="scss" scoped>
 .container {
 	width: 100vw;
-	height: calc(100vh - 102rpx);
+	height: calc(100vh - 152rpx);
 	overflow-y: auto;
 
 	.top_bg {
@@ -299,6 +389,71 @@ export default {
 				height: 44rpx;
 			}
 		}
+
+		.watch_color {
+			color: #6fb6b8;
+		}
+
+		.watch_color2 {
+			color: #1e7dfb;
+		}
+
+		.watch_color3 {
+			color: #ff5733;
+		}
+
+		.watch_td {
+			display: flex;
+		}
+
+		.watch_pop {
+			width: 100%;
+			height: 575rpx;
+			overflow-y: auto;
+			background-color: #fff;
+
+			.poop_title {
+				box-sizing: border-box;
+				padding: 0 30rpx;
+				display: flex;
+				align-items: center;
+				justify-content: space-between;
+				height: 100rpx;
+				font-size: 34rpx;
+				border-bottom: 1rpx solid #f5f5f5;
+
+				.cancel {
+					color: #888888;
+				}
+
+				.confirm {
+					color: #1e7dfb;
+				}
+			}
+
+			.poop_body {
+				margin-top: 50rpx;
+
+				.body_item {
+					position: relative;
+					display: flex;
+					justify-content: center;
+					align-items: center;
+					height: 100rpx;
+					border-bottom: 1rpx solid #f5f5f5;
+
+					.body_item_info {
+					}
+
+					.body_item_icon {
+						position: absolute;
+						top: 30rpx;
+						right: 85rpx;
+						color: #1e7dfb;
+					}
+				}
+			}
+		}
 	}
 
 	.rank {

pagesRepairs/index/index.vue

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

pagesRepairs/management/management.vue

@@ -123,7 +123,7 @@
 				<!-- 上传图片 -->
 				<view class="item_img">
 					<view class="img_key">上传图片：</view>
-					<view class="img_value"></view>
+					<img class="img_value" mode="aspectFill" :src="item.img[0]" @click="handleLookImgs(item.img)" />
 				</view>
 
 				<!-- 维修师傅 -->
@@ -194,6 +194,32 @@
 						</view>
 					</view>
 				</uni-popup>
+
+				<!-- 维修费用弹窗 -->
+				<uni-popup :is-mask-click="false" ref="popup_fee">
+					<view class="pop_fee">
+						<view class="fee_title">
+							维修费用
+							<text @click="$refs.popup_fee[0].close()">×</text>
+						</view>
+						<view class="fee_box">
+							耗材：
+							<text>螺丝刀</text>
+						</view>
+						<view class="fee_box">
+							耗材单价：
+							<text>1元</text>
+						</view>
+						<view class="fee_box">
+							耗材数量：
+							<text>2</text>
+						</view>
+						<view class="fee_box">
+							耗材费用：
+							<text>2元</text>
+						</view>
+					</view>
+				</uni-popup>
 			</view>
 		</view>
 	</view>
@@ -223,7 +249,11 @@ export default {
 					address: '3楼309',
 					goods: '电脑',
 					description: '水龙头坏了',
-					img: ''
+					img: [
+						'https://img1.baidu.com/it/u=920310517,1559263161&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500',
+						'https://13lz.cn/d/file/2021-06-12/f54cce5a0208c756c112407ec6ca1ac0.jpg',
+						'https://inews.gtimg.com/newsapp_bt/0/12555654161/1000'
+					]
 				},
 				{
 					id: 2,
@@ -237,7 +267,11 @@ export default {
 					address: '3楼309',
 					goods: '电脑',
 					description: '电脑坏了',
-					img: '',
+					img: [
+						'https://img1.baidu.com/it/u=920310517,1559263161&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500',
+						'https://13lz.cn/d/file/2021-06-12/f54cce5a0208c756c112407ec6ca1ac0.jpg',
+						'https://inews.gtimg.com/newsapp_bt/0/12555654161/1000'
+					],
 					workerName: '老张',
 					workerPhone: '13659585689'
 				},
@@ -253,7 +287,11 @@ export default {
 					address: '3楼309',
 					goods: '电脑',
 					description: '电脑坏了',
-					img: '',
+					img: [
+						'https://img1.baidu.com/it/u=920310517,1559263161&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500',
+						'https://13lz.cn/d/file/2021-06-12/f54cce5a0208c756c112407ec6ca1ac0.jpg',
+						'https://inews.gtimg.com/newsapp_bt/0/12555654161/1000'
+					],
 					workerName: '老张',
 					workerPhone: '13659585689',
 					money: 50,
@@ -271,7 +309,11 @@ export default {
 					address: '3楼309',
 					goods: '电脑',
 					description: '电脑坏了',
-					img: '',
+					img: [
+						'https://img1.baidu.com/it/u=920310517,1559263161&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500',
+						'https://13lz.cn/d/file/2021-06-12/f54cce5a0208c756c112407ec6ca1ac0.jpg',
+						'https://inews.gtimg.com/newsapp_bt/0/12555654161/1000'
+					],
 					workerName: '老张',
 					workerPhone: '13659585689',
 					money: 50,
@@ -289,7 +331,11 @@ export default {
 					address: '3楼309',
 					goods: '电脑',
 					description: '电脑坏了',
-					img: '',
+					img: [
+						'https://img1.baidu.com/it/u=920310517,1559263161&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500',
+						'https://13lz.cn/d/file/2021-06-12/f54cce5a0208c756c112407ec6ca1ac0.jpg',
+						'https://inews.gtimg.com/newsapp_bt/0/12555654161/1000'
+					],
 					workerName: '老张',
 					workerPhone: '13659585689',
 					money: 50
@@ -306,7 +352,11 @@ export default {
 					address: '3楼309',
 					goods: '电脑',
 					description: '电脑坏了',
-					img: '',
+					img: [
+						'https://img1.baidu.com/it/u=920310517,1559263161&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500',
+						'https://13lz.cn/d/file/2021-06-12/f54cce5a0208c756c112407ec6ca1ac0.jpg',
+						'https://inews.gtimg.com/newsapp_bt/0/12555654161/1000'
+					],
 					workerName: '老张',
 					workerPhone: '13659585689',
 					money: 50
@@ -323,7 +373,11 @@ export default {
 					address: '3楼309',
 					goods: '电脑',
 					description: '电脑坏了',
-					img: '',
+					img: [
+						'https://img1.baidu.com/it/u=920310517,1559263161&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500',
+						'https://13lz.cn/d/file/2021-06-12/f54cce5a0208c756c112407ec6ca1ac0.jpg',
+						'https://inews.gtimg.com/newsapp_bt/0/12555654161/1000'
+					],
 					workerName: '老张',
 					workerPhone: '13659585689',
 					money: 50
@@ -401,12 +455,23 @@ export default {
 				})
 			}
 		},
+		// 查看维修费用回调
+		checkFeeDetail() {
+			this.$refs.popup_fee[0].open('center')
+		},
 		// 点击电话号码回调
 		handleCallPhone(phone) {
 			console.log(phone)
 			uni.makePhoneCall({
 				phoneNumber: phone
 			})
+		},
+		// 点击图片回调
+		handleLookImgs(img) {
+			// console.log(img)
+			uni.previewImage({
+				urls: img
+			})
 		}
 	}
 }
@@ -415,7 +480,7 @@ export default {
 <style lang="scss" scoped>
 .container {
 	width: 100vw;
-	height: calc(100vh - 102rpx);
+	height: calc(100vh - 152rpx);
 	overflow-y: auto;
 
 	.top_bg {
@@ -616,7 +681,6 @@ export default {
 					width: 120rpx;
 					height: 120rpx;
 					border-radius: 14rpx;
-					background-color: salmon;
 				}
 			}
 
@@ -778,6 +842,45 @@ export default {
 					}
 				}
 			}
+
+			.pop_fee {
+				padding-bottom: 50rpx;
+				border-radius: 19rpx;
+				background-color: #fff;
+
+				.fee_title {
+					display: flex;
+					justify-content: space-between;
+					align-items: center;
+					box-sizing: border-box;
+					padding: 0 31rpx 0 42rpx;
+					width: 690rpx;
+					height: 110rpx;
+					font-size: 32rpx;
+					font-weight: bold;
+					border-radius: 19rpx 19rpx 0 0;
+					border-bottom: 1rpx solid #e6e6e6;
+
+					text {
+						font-size: 45rpx;
+						font-weight: 400;
+						color: #808080;
+					}
+				}
+
+				.fee_box {
+					display: flex;
+					align-items: center;
+					padding-left: 42rpx;
+					height: 80rpx;
+					font-size: 28rpx;
+					color: #808080;
+
+					text {
+						color: #000000;
+					}
+				}
+			}
 		}
 	}
 }

pagesRepairs/myRepairs/myRepairs.vue

@@ -71,7 +71,7 @@
 				<!-- 上传图片 -->
 				<view class="item_img">
 					<view class="img_key">上传图片：</view>
-					<view class="img_value"></view>
+					<img class="img_value" mode="aspectFill" :src="item.img[0]" @click="handleLookImgs(item.img)" />
 				</view>
 
 				<!-- 维修师傅 -->
@@ -177,7 +177,11 @@ export default {
 					address: '3楼309',
 					goods: '电脑',
 					description: '水龙头坏了',
-					img: ''
+					img: [
+						'https://img1.baidu.com/it/u=920310517,1559263161&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500',
+						'https://13lz.cn/d/file/2021-06-12/f54cce5a0208c756c112407ec6ca1ac0.jpg',
+						'https://inews.gtimg.com/newsapp_bt/0/12555654161/1000'
+					]
 				},
 				{
 					id: 2,
@@ -191,7 +195,11 @@ export default {
 					address: '3楼309',
 					goods: '电脑',
 					description: '电脑坏了',
-					img: ''
+					img: [
+						'https://img1.baidu.com/it/u=920310517,1559263161&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500',
+						'https://13lz.cn/d/file/2021-06-12/f54cce5a0208c756c112407ec6ca1ac0.jpg',
+						'https://inews.gtimg.com/newsapp_bt/0/12555654161/1000'
+					]
 				}
 			],
 			dataList2: [
@@ -207,7 +215,11 @@ export default {
 					address: '3楼309',
 					goods: '电脑',
 					description: '水龙头坏了',
-					img: '',
+					img: [
+						'https://img1.baidu.com/it/u=920310517,1559263161&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500',
+						'https://13lz.cn/d/file/2021-06-12/f54cce5a0208c756c112407ec6ca1ac0.jpg',
+						'https://inews.gtimg.com/newsapp_bt/0/12555654161/1000'
+					],
 					workerName: '小李',
 					workerPhone: '13659585689',
 					money: 50
@@ -226,7 +238,11 @@ export default {
 					address: '3楼309',
 					goods: '电脑',
 					description: '水龙头坏了',
-					img: '',
+					img: [
+						'https://img1.baidu.com/it/u=920310517,1559263161&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500',
+						'https://13lz.cn/d/file/2021-06-12/f54cce5a0208c756c112407ec6ca1ac0.jpg',
+						'https://inews.gtimg.com/newsapp_bt/0/12555654161/1000'
+					],
 					workerName: '小李',
 					workerPhone: '13659585689',
 					money: 50
@@ -243,7 +259,11 @@ export default {
 					address: '3楼309',
 					goods: '电脑',
 					description: '水龙头坏了',
-					img: '',
+					img: [
+						'https://img1.baidu.com/it/u=920310517,1559263161&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500',
+						'https://13lz.cn/d/file/2021-06-12/f54cce5a0208c756c112407ec6ca1ac0.jpg',
+						'https://inews.gtimg.com/newsapp_bt/0/12555654161/1000'
+					],
 					workerName: '小李',
 					workerPhone: '13659585689',
 					money: 50
@@ -296,6 +316,13 @@ export default {
 			uni.makePhoneCall({
 				phoneNumber: phone
 			})
+		},
+		// 点击图片回调
+		handleLookImgs(img) {
+			// console.log(img)
+			uni.previewImage({
+				urls: img
+			})
 		}
 	}
 }
@@ -308,7 +335,7 @@ export default {
 	box-sizing: border-box;
 	padding: 0 30rpx;
 	width: 100vw;
-	height: calc(100vh - 102rpx);
+	height: calc(100vh - 152rpx);
 	overflow-y: auto;
 
 	.control {
@@ -456,7 +483,6 @@ export default {
 					width: 120rpx;
 					height: 120rpx;
 					border-radius: 14rpx;
-					background-color: salmon;
 				}
 			}
 
@@ -595,4 +621,4 @@ export default {
 		}
 	}
 }
-</style>
+</style>

pagesRepairs/pending/pending.vue

@@ -60,7 +60,7 @@
 				<!-- 上传图片 -->
 				<view class="item_img">
 					<view class="img_key">上传图片：</view>
-					<view class="img_value"></view>
+					<img class="img_value" mode="aspectFill" :src="item.img[0]" @click="handleLookImgs(item.img)" />
 				</view>
 
 				<!-- 按钮区域 -->
@@ -107,7 +107,11 @@ export default {
 					address: '3楼309',
 					goods: '电脑',
 					description: '水龙头坏了',
-					img: ''
+					img: [
+						'https://img1.baidu.com/it/u=920310517,1559263161&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500',
+						'https://13lz.cn/d/file/2021-06-12/f54cce5a0208c756c112407ec6ca1ac0.jpg',
+						'https://inews.gtimg.com/newsapp_bt/0/12555654161/1000'
+					]
 				},
 				{
 					id: 2,
@@ -121,7 +125,11 @@ export default {
 					address: '3楼309',
 					goods: '电脑',
 					description: '电脑坏了',
-					img: '',
+					img: [
+						'https://img1.baidu.com/it/u=920310517,1559263161&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500',
+						'https://13lz.cn/d/file/2021-06-12/f54cce5a0208c756c112407ec6ca1ac0.jpg',
+						'https://inews.gtimg.com/newsapp_bt/0/12555654161/1000'
+					],
 					workerName: '老张',
 					workerPhone: '13659585689'
 				},
@@ -137,7 +145,11 @@ export default {
 					address: '3楼309',
 					goods: '电脑',
 					description: '电脑坏了',
-					img: '',
+					img: [
+						'https://img1.baidu.com/it/u=920310517,1559263161&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500',
+						'https://13lz.cn/d/file/2021-06-12/f54cce5a0208c756c112407ec6ca1ac0.jpg',
+						'https://inews.gtimg.com/newsapp_bt/0/12555654161/1000'
+					],
 					workerName: '老张',
 					workerPhone: '13659585689',
 					money: 50
@@ -172,6 +184,13 @@ export default {
 			uni.makePhoneCall({
 				phoneNumber: phone
 			})
+		},
+		// 点击图片回调
+		handleLookImgs(img) {
+			// console.log(img)
+			uni.previewImage({
+				urls: img
+			})
 		}
 	}
 }
@@ -180,7 +199,7 @@ export default {
 <style lang="scss" scoped>
 .container {
 	width: 100vw;
-	height: calc(100vh - 102rpx);
+	height: calc(100vh - 152rpx);
 	overflow-y: auto;
 
 	.top_bg {
@@ -284,7 +303,6 @@ export default {
 					width: 120rpx;
 					height: 120rpx;
 					border-radius: 14rpx;
-					background-color: salmon;
 				}
 			}
 

pagesRepairs/repairs/repairs.vue

@@ -60,13 +60,20 @@
 		<view class="box_item">
 			<view class="item_title">报修录音</view>
 			<view class="item_info">
-				<view class="info_icon">
+				<view class="info_icon" @click="handleRecording">
 					<img src="../../static/images/repairsImg/voice.png" />
 				</view>
-				<view class="info_tips">点击录音</view>
+				<view class="info_tips" @click="handleRecording">点击录音</view>
 			</view>
 		</view>
 
+		<!-- 录音弹窗区域 -->
+		<uni-popup ref="popup_recording">
+			<view class="popup_recording">
+				<recording />
+			</view>
+		</uni-popup>
+
 		<!-- 上传照片区域 -->
 		<view class="box_item3">
 			<view class="item3_title">
@@ -144,10 +151,14 @@
 </template>
 
 <script>
+import recording from '../components/recording2.vue'
 // 图片压缩方法
 import getLessLimitSizeImage from '../util/imageCompress.js'
 
 export default {
+	components: {
+		recording
+	},
 	data() {
 		return {
 			// 显示的图片数据
@@ -241,6 +252,11 @@ export default {
 			uni.makePhoneCall({
 				phoneNumber: phone
 			})
+		},
+
+		// 点击录音按钮回调
+		handleRecording() {
+			this.$refs.popup_recording.open('bottom')
 		}
 	}
 }
@@ -249,7 +265,7 @@ export default {
 <style lang="scss" scoped>
 .container {
 	width: 100vw;
-	height: calc(100vh - 102rpx);
+	height: calc(100vh - 152rpx);
 	overflow-y: auto;
 
 	.notice {
@@ -418,7 +434,7 @@ export default {
 		z-index: 2;
 		position: fixed;
 		right: 0;
-		bottom: 382rpx;
+		bottom: 155rpx;
 		display: flex;
 		justify-content: center;
 		align-items: center;
@@ -441,5 +457,11 @@ export default {
 			}
 		}
 	}
+
+	.popup_recording {
+		width: 100%;
+		height: 460rpx;
+		background-color: #fff;
+	}
 }
 </style>