no message

pagesRepairs/components/recording.vue

@@ -77,6 +77,7 @@ export default {
 			this.VoiceText = '按住说话'
 			this.VoiceTitle = '松手结束录音'
 			this.recorderManager.onStop((res) => {
+				// console.log(res)
 				// console.log(this.sendLock)
 				clearInterval(this.recordingTimer)
 				if (this.sendLock) {
@@ -90,14 +91,30 @@ export default {
 							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));
-						// })
+						uni.showLoading({
+							title: '上传中'
+						})
+						uni.uploadFile({
+							url: `https://chtech.ncjti.edu.cn/campusMaintenance/repair-api/repair/api/repairRecord/uploadFile`,
+							filePath: res.tempFilePath,
+							name: 'file',
+							header: {
+								token: uni.getStorageSync('repairsUserInfo').token,
+								user_head: uni.getStorageSync('repairsUserInfo').userhead
+							},
+							success: (uploadFileRes) => {
+								// console.log(JSON.parse(uploadFileRes.data))
+								this.tempFilePath = JSON.parse(uploadFileRes.data).data.resultUrl
+								this.$emit('getTempFilePath', this.tempFilePath, this.recordingTime)
+								uni.hideLoading()
+							},
+							fail: () => {
+								uni.showToast({
+									title: '上传失败',
+									icon: 'error'
+								})
+							}
+						})
 					}
 				}
 			})

pagesRepairs/evaluate/evaluate.vue

@@ -21,16 +21,25 @@
 export default {
 	data() {
 		return {
+			// 评分数据
 			score: 0,
-			textareaValue: ''
+			// 输入框绑定数据
+			textareaValue: '',
+			// 订单的Id
+			recordId: ''
 		}
 	},
+	onLoad(options) {
+		this.recordId = options.recordId
+	},
 	methods: {
+		// 评分改变回调
 		onChange(e) {
-			console.log(e)
+			// console.log(e)
 			this.score = e.value * 2
 		},
-		handleSub() {
+		// 确认提交按钮回调
+		async handleSub() {
 			if (this.score === 0) {
 				uni.showToast({
 					title: '请您给此次服务评分',
@@ -45,11 +54,20 @@ export default {
 				})
 				return
 			}
-			console.log(this.score)
-			console.log(this.textareaValue)
+
+			const res = await this.$myRequest_repairs({
+				url: '/repairEvaluate/insertRepairEvaluate',
+				method: 'post',
+				data: {
+					recordId: this.recordId,
+					star: this.score,
+					content: this.textareaValue
+				}
+			})
+			// console.log(res)
 			uni.showToast({
 				title: '评价成功',
-				icon: 'none'
+				icon: 'success'
 			})
 			setTimeout(() => {
 				uni.redirectTo({

pagesRepairs/index/index.vue

@@ -20,9 +20,6 @@ export default {
 			showLogin: false,
 			// 获取用户信息
 			appid: 'wxd6f090391d410534',
-			// repairsUserInfo: {
-			// 	routes: ['首页', '工单管理', '待处理池']
-			// },
 			// 用户路由
 			userListInfo: {
 				routes: ['报修', '我的报修'],
@@ -46,25 +43,25 @@ export default {
 		}
 	},
 	mounted() {
-		// this.hasUserInfo()
-		uni.setStorageSync('currentIndexRepairs', 0)
-		uni.showActionSheet({
-			itemList: ['用户', '维修师傅', '管理员', '后勤'],
-			success: (res) => {
-				if (res.tapIndex == 0) {
-					uni.setStorageSync('repairsUserInfo', this.userListInfo)
-				} else if (res.tapIndex == 1) {
-					uni.setStorageSync('repairsUserInfo', this.workerListInfo)
-				} else if (res.tapIndex == 2) {
-					uni.setStorageSync('repairsUserInfo', this.adminListInfo)
-				} else if (res.tapIndex == 3) {
-					uni.setStorageSync('repairsUserInfo', this.logisticsListInfo)
-				}
-				uni.reLaunch({
-					url: '/pagesRepairs/box/box'
-				})
-			}
-		})
+		this.hasUserInfo()
+		// uni.setStorageSync('currentIndexRepairs', 0)
+		// uni.showActionSheet({
+		// 	itemList: ['用户', '维修师傅', '管理员', '后勤'],
+		// 	success: (res) => {
+		// 		if (res.tapIndex == 0) {
+		// 			uni.setStorageSync('repairsUserInfo', this.userListInfo)
+		// 		} else if (res.tapIndex == 1) {
+		// 			uni.setStorageSync('repairsUserInfo', this.workerListInfo)
+		// 		} else if (res.tapIndex == 2) {
+		// 			uni.setStorageSync('repairsUserInfo', this.adminListInfo)
+		// 		} else if (res.tapIndex == 3) {
+		// 			uni.setStorageSync('repairsUserInfo', this.logisticsListInfo)
+		// 		}
+		// 		uni.reLaunch({
+		// 			url: '/pagesRepairs/box/box'
+		// 		})
+		// 	}
+		// })
 	},
 	methods: {
 		// 检查是否存在用户信息
@@ -72,16 +69,12 @@ export default {
 			const repairsUserInfo = uni.getStorageSync('repairsUserInfo')
 			console.log(repairsUserInfo)
 			if (repairsUserInfo) {
+				uni.setStorageSync('currentIndexRepairs', 0)
 				uni.reLaunch({
 					url: '/pagesRepairs/box/box'
 				})
 			} else {
 				console.log('重新授权')
-				// uni.setStorageSync('repairsUserInfo', this.userListInfo)
-				// uni.reLaunch({
-				// 	url: '/pagesRepairs/box/box'
-				// })
-
 				this.showLogin = true
 				this.visible = true
 			}
@@ -94,6 +87,26 @@ export default {
 			// 获取wxcode后请求登录
 			this.login(wxcode)
 		},
+
+		// 用户登陆获取个人信息
+		async login(wxcode) {
+			const res = await this.$myRequest_repairs({
+				url: '/login/Openid',
+				header: {},
+				data: {
+					wxcode
+				}
+			})
+			console.log(res)
+			if (res.code === '200') {
+				uni.setStorageSync('repairsUserInfo', res.data)
+				uni.setStorageSync('currentIndexRepairs', 0)
+
+				uni.reLaunch({
+					url: '/pagesRepairs/box/box'
+				})
+			}
+		},
 		// 授权失败回调
 		loginFail() {
 			// console.log("授权失败");
@@ -133,34 +146,6 @@ export default {
 					}
 				}
 			})
-		},
-
-		// 用户登陆获取个人信息和token
-		async login(wxcode) {
-			const res = await this.$myRequest_repairs({
-				url: '/repair/api/login/Openid',
-				// header: {
-				// 	'content-type': 'application/json',
-				// 	platform: 2,
-				// 	'Accept-Language': 'zh-CN,zh;q=0.9'
-				// },
-				data: {
-					// redirect_uri: `mnp://${this.appid}`,
-					wxcode
-				}
-			})
-			console.log(res)
-			// if (res.code == 200) {
-			// 	uni.setStorageSync('token', res.data.token)
-			// 	uni.reLaunch({
-			// 		url: '/pagesRepairs/box/box'
-			// 	})
-			// } else {
-			// 	uni.showToast({
-			// 		title: res.message,
-			// 		icon: 'none'
-			// 	})
-			// }
 		}
 	}
 }

pagesRepairs/myRepairs/myRepairs.vue

@@ -1,5 +1,5 @@
 <template>
-	<view class="container">
+	<scroll-view class="container" :scroll-y="scrollY" @scrolltolower="scrolltolower">
 		<!-- 顶部分段器区域 -->
 		<view class="control">
 			<view class="control_item" :class="{ active: current === index }" v-for="(item, index) in items" :key="index" @click="onClickItem(index)">{{ item }}</view>
@@ -12,34 +12,34 @@
 				<!-- 工单编号 -->
 				<view class="item_title" @click="handleLookDetail(item)">
 					<img src="../../static/images/repairsImg/order.png" />
-					<view class="title_info">工单编号：{{ item.order }}</view>
-					<view class="title_type" v-if="item.overtime">超时未接</view>
+					<view class="title_info">工单编号：{{ item.recordNo }}</view>
+					<view class="title_type" v-if="item.timeoutStr">{{ item.timeoutStr }}</view>
 				</view>
 
 				<!-- 报修时间 -->
 				<view class="item_time">
 					<view class="time_msg">
 						报修时间：
-						<text>{{ item.time }}</text>
+						<text>{{ item.reportTime }}</text>
 					</view>
-					<view class="time_type" v-if="item.type === 1">待接单</view>
-					<view class="time_type color_type" v-if="item.type === 2">维修中</view>
-					<view class="time_type" v-if="item.type === 3">待确认</view>
-					<view class="time_type color_type2" v-if="item.type === 4">已完成</view>
-					<view class="time_type" v-if="item.type === 5">已取消</view>
+					<view class="time_type" v-if="item.state === '待接单'">待接单</view>
+					<view class="time_type color_type" v-if="item.state === '维修中'">维修中</view>
+					<view class="time_type" v-if="item.state === '待确认'">待确认</view>
+					<view class="time_type color_type2" v-if="item.state === '已完成'">已完成</view>
+					<view class="time_type" v-if="item.state === '已取消'">已取消</view>
 				</view>
 
 				<!-- 报修姓名 -->
 				<view class="item_box">
 					<view class="box_key">报修姓名：</view>
-					<view class="box_value">{{ item.name }}</view>
+					<view class="box_value">{{ item.userName }}</view>
 				</view>
 
 				<!-- 报修电话 -->
 				<view class="item_box">
 					<view class="box_key">报修电话：</view>
-					<view class="box_value phone" @click="handleCallPhone(item.phone)">
-						{{ item.phone }}
+					<view class="box_value phone" @click="handleCallPhone(item.userPhone)">
+						{{ item.userPhone }}
 						<img src="../../static/images/repairsImg/phone.png" />
 					</view>
 				</view>
@@ -47,7 +47,7 @@
 				<!-- 报修区域 -->
 				<view class="item_box">
 					<view class="box_key">报修区域：</view>
-					<view class="box_value">{{ item.area }}</view>
+					<view class="box_value">{{ item.areaName }}</view>
 				</view>
 
 				<!-- 详细地址 -->
@@ -59,43 +59,43 @@
 				<!-- 报修物品 -->
 				<view class="item_box">
 					<view class="box_key">报修物品：</view>
-					<view class="box_value">{{ item.goods }}</view>
+					<view class="box_value">{{ item.articleName }}</view>
 				</view>
 
 				<!-- 故障描述 -->
 				<view class="item_box">
 					<view class="box_key">故障描述：</view>
-					<view class="box_value">{{ item.description }}</view>
+					<view class="box_value">{{ item.descript }}</view>
 				</view>
 
 				<!-- 上传图片 -->
 				<view class="item_img">
 					<view class="img_key">上传图片：</view>
-					<img class="img_value" mode="aspectFill" :src="item.img[0]" @click="handleLookImgs(item.img)" />
+					<img class="img_value" mode="aspectFill" :src="item.images[0]" @click="handleLookImgs(item.images)" />
 				</view>
 
 				<!-- 维修师傅 -->
-				<view class="item_time" v-if="item.type === 3 || item.type === 4">
+				<view class="item_time" v-if="item.maintenancerName">
 					<view class="time_msg">
 						维修师傅：
-						<text>{{ item.workerName }}</text>
+						<text>{{ item.maintenancerName }}</text>
 					</view>
 				</view>
 
 				<!-- 师傅电话 -->
-				<view class="item_box" v-if="item.type === 3 || item.type === 4">
+				<view class="item_box" v-if="item.maintenancerPhone">
 					<view class="box_key">师傅电话：</view>
-					<view class="box_value phone" @click="handleCallPhone(item.workerPhone)">
-						{{ item.workerPhone }}
+					<view class="box_value phone" @click="handleCallPhone(item.maintenancerPhone)">
+						{{ item.maintenancerPhone }}
 						<img src="../../static/images/repairsImg/phone.png" />
 					</view>
 				</view>
 
 				<!-- 维修费用 -->
-				<view class="item_box" v-if="item.type === 3 || item.type === 4">
+				<view class="item_box" v-if="item.money">
 					<view class="box_key">维修费用：</view>
-					<view class="box_value2 phone" @click="checkFeeDetail">
-						{{ item.money }}元
+					<view class="box_value2 phone" @click="checkFeeDetail(item)">
+						{{ item.price }}元
 						<img src="../../static/images/repairsImg/eye.png" />
 					</view>
 				</view>
@@ -107,32 +107,36 @@
 							维修费用
 							<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 class="fee_list">
+							<view class="fee_item" v-for="ele in consumables" :key="ele.id">
+								<view class="fee_box">
+									耗材：
+									<text>{{ ele.consumeName }}</text>
+								</view>
+								<view class="fee_box">
+									耗材单价：
+									<text>{{ ele.price }}元</text>
+								</view>
+								<view class="fee_box">
+									耗材数量：
+									<text>{{ ele.number }}</text>
+								</view>
+								<view class="fee_box">
+									耗材费用：
+									<text>{{ ele.totalPrice }}元</text>
+								</view>
+							</view>
 						</view>
 					</view>
 				</uni-popup>
 
 				<!-- 按钮 -->
-				<view class="item_btn" v-if="item.type !== 5">
-					<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" @click="handleRepeal">撤销</view>
-					<view class="btn_box type" v-if="item.type === 4" @click="handleEvaluate">去评价</view>
+				<view class="item_btn" v-if="item.state !== '已取消'">
+					<view class="btn_box type" v-if="item.state === '待接单' || item.state === '维修中'" @click="handleExpedite">催单</view>
+					<view class="btn_box type" v-if="item.state === '待确认'" @click="handleBackOffice">转后勤</view>
+					<view class="btn_box type" v-if="item.state === '待确认'">支付</view>
+					<view class="btn_box type2" v-if="item.state === '待接单' || item.state === '维修中' || item.state === '待确认'" @click="handleRepeal">撤销</view>
+					<view class="btn_box type" v-if="item.state === '已完成'" @click="handleEvaluate(item)">去评价</view>
 				</view>
 				<view class="item_btn2" v-else></view>
 
@@ -150,133 +154,114 @@
 					</view>
 				</uni-popup>
 			</view>
+
+			<!-- 没有数据时展示的图片 -->
+			<view class="body_no_data" v-if="list.length === 0">
+				<img src="../../pagesClockIn/static/imgs/nodata.png" />
+				<view>暂无数据</view>
+			</view>
+
+			<view class="body_text" v-if="list.length && showBottomText">---我是有底线的---</view>
 		</view>
-	</view>
+	</scroll-view>
 </template>
 
 <script>
 export default {
 	data() {
 		return {
+			// 后勤弹窗输入框绑定数据
 			logisticsValue: '',
-			items: ['未完成（2）', '待确认（4）', '已完成（5）'],
+			// 顶部分段器数组
+			items: ['未完成（0）', '待确认（0）', '已完成（0）'],
+			// 分段器数组当前索引
 			current: 0,
+			// 订单列表
 			list: [],
-			// type为 1 是 待接单,type为 2 是维修中,
-			// type为 3 是 待确认,type为 4 是已完成,
-			// type为 5 是已取消
-			dataList: [
-				{
-					id: 1,
-					order: '656262219626262',
-					overtime: true,
-					time: '2023.07.05  09:25:26',
-					type: 1,
-					name: '张三',
-					phone: '13659585689',
-					area: '行政楼',
-					address: '3楼309',
-					goods: '电脑',
-					description: '水龙头坏了',
-					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,
-					order: '956262219626262',
-					overtime: false,
-					time: '2023.07.05  09:25:26',
-					type: 2,
-					name: '李四',
-					phone: '13659585689',
-					area: '行政楼',
-					address: '3楼309',
-					goods: '电脑',
-					description: '电脑坏了',
-					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: [
-				{
-					id: 19999,
-					order: '656262219626262',
-					overtime: false,
-					time: '2023.07.05  09:25:26',
-					type: 3,
-					name: '张三',
-					phone: '13659585689',
-					area: '行政楼',
-					address: '3楼309',
-					goods: '电脑',
-					description: '水龙头坏了',
-					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
-				}
-			],
-			dataList3: [
-				{
-					id: 1854,
-					order: '656262219626262',
-					overtime: false,
-					time: '2023.07.05  09:25:26',
-					type: 4,
-					name: '张三',
-					phone: '13659585689',
-					area: '行政楼',
-					address: '3楼309',
-					goods: '电脑',
-					description: '水龙头坏了',
-					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
-				},
-				{
-					id: 2789,
-					order: '656262219626262',
-					overtime: false,
-					time: '2023.07.05  09:25:26',
-					type: 5,
-					name: '张三',
-					phone: '13659585689',
-					area: '行政楼',
-					address: '3楼309',
-					goods: '电脑',
-					description: '水龙头坏了',
-					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
-				}
-			]
+			// 是否可以Y轴滚动
+			scrollY: true,
+			// 是否显示底部文字
+			showBottomText: false,
+			// 用户id,请求接口时的参数
+			userId: '',
+			// 当前页
+			currentPage: 1,
+			// 每页多少条数据
+			pageCount: 5,
+			// 列表总数据
+			total: 0,
+			// 维修费用耗材明细列表
+			consumables: []
 		}
 	},
 	mounted() {
 		console.log('我的报修页面加载')
-		this.list = this.dataList
+		this.userId = uni.getStorageSync('repairsUserInfo').userId
+		this.getRepairCount()
+		this.getRepairList()
 	},
 	methods: {
+		// 获取每个状态的订单总数量
+		async getRepairCount() {
+			const res = await this.$myRequest_repairs({
+				url: '/repairRecord/getRepairRecordCountByUserId',
+				data: {
+					userId: this.userId
+				}
+			})
+			// console.log(res)
+			if (res.code === '200') {
+				this.items = [`未完成（${res.data.incomplete}）`, `待确认（${res.data.confirmed}）`, `已完成（${res.data.finished}）`]
+			}
+		},
+
+		// 获取订单列表数据
+		async getRepairList() {
+			const res = await this.$myRequest_repairs({
+				url: '/repairRecord/getRepairRecordsByUserId',
+				data: {
+					userId: this.userId,
+					currentPage: this.currentPage,
+					pageCount: this.pageCount,
+					state: this.current - 0 + 1
+				}
+			})
+			console.log(res)
+			if (res.code === '200') {
+				this.list = [...this.list, ...res.data.list]
+				this.total = res.data.totalCount
+				// 当页面没有数据时,页面禁止滚动
+				if (this.list.length === 0) {
+					this.scrollY = false
+				}
+			}
+		},
+
+		// 滚动到底部触发回调
+		scrolltolower() {
+			console.log('页面触底了')
+			if (this.total > this.list.length) {
+				this.currentPage++
+				this.getRepairList()
+			} else {
+				console.log('没有更多数据了')
+				this.showBottomText = true
+			}
+		},
+
+		// 分段器切换回调
+		onClickItem(index) {
+			// 清空数组
+			this.list = []
+			// 重置当前页面可以滚动
+			this.scrollY = true
+			// 重置请求数据当前页参数
+			this.currentPage = 1
+			// 改变分段器索引
+			this.current = index
+			this.getRepairList()
+		},
+
 		// 转后勤弹窗确定按钮回调
 		handleLogisticsConfirm() {
 			console.log(this.logisticsValue)
@@ -317,32 +302,21 @@ export default {
 				}
 			})
 		},
-		// 分段器切换回调
-		onClickItem(index) {
-			console.log(index)
-			if (this.current != index) {
-				this.current = index
-			}
-			if (this.current === 0) {
-				this.list = this.dataList
-			} else if (this.current === 1) {
-				this.list = this.dataList2
-			} else {
-				this.list = this.dataList3
-			}
-		},
+
 		// 查看维修费用回调
-		checkFeeDetail() {
+		checkFeeDetail(item) {
 			this.$refs.popup_fee[0].open('center')
+			this.consumables = item.consumables
 		},
 		// 转后勤按钮回调
 		handleBackOffice() {
 			this.$refs.popup_logistics[0].open('center')
 		},
 		// 去评价按钮回调
-		handleEvaluate() {
+		handleEvaluate(item) {
+			let recordId = item.id
 			uni.navigateTo({
-				url: '/pagesRepairs/evaluate/evaluate'
+				url: `/pagesRepairs/evaluate/evaluate?recordId=${recordId}`
 			})
 		},
 		// 点击工单编号区域回调
@@ -355,14 +329,12 @@ export default {
 		},
 		// 点击电话号码回调
 		handleCallPhone(phone) {
-			console.log(phone)
 			uni.makePhoneCall({
 				phoneNumber: phone
 			})
 		},
 		// 点击图片回调
 		handleLookImgs(img) {
-			// console.log(img)
 			uni.previewImage({
 				urls: img
 			})
@@ -381,6 +353,13 @@ export default {
 	height: calc(100vh - 152rpx);
 	overflow-y: auto;
 
+	// 隐藏滚动条
+	::-webkit-scrollbar {
+		width: 0;
+		height: 0;
+		color: transparent;
+	}
+
 	.control {
 		display: flex;
 		box-sizing: border-box;
@@ -409,6 +388,7 @@ export default {
 	.body {
 		// height: calc(100vh - 190rpx);
 		// overflow-y: auto;
+		padding-bottom: 25rpx;
 
 		.body_item {
 			margin: 10rpx 10rpx 30rpx;
@@ -588,16 +568,25 @@ export default {
 					}
 				}
 
-				.fee_box {
-					display: flex;
-					align-items: center;
-					padding-left: 42rpx;
-					height: 80rpx;
-					font-size: 28rpx;
-					color: #808080;
-
-					text {
-						color: #000000;
+				.fee_list {
+					height: 40vh;
+					overflow-y: auto;
+
+					.fee_item {
+						border-bottom: 1rpx solid #e6e6e6;
+
+						.fee_box {
+							display: flex;
+							align-items: center;
+							padding-left: 42rpx;
+							height: 80rpx;
+							font-size: 28rpx;
+							color: #808080;
+
+							text {
+								color: #000000;
+							}
+						}
 					}
 				}
 			}
@@ -662,6 +651,24 @@ export default {
 				}
 			}
 		}
+
+		.body_no_data {
+			text-align: center;
+			color: #b3b3b3;
+			font-size: 24rpx;
+
+			img {
+				margin: 150rpx auto 50rpx;
+				width: 480rpx;
+				height: 508rpx;
+			}
+		}
+
+		.body_text {
+			text-align: center;
+			color: #b3b3b3;
+			font-size: 24rpx;
+		}
 	}
 }
 </style>

pagesRepairs/repairDetails/repairDetails.vue

@@ -3,35 +3,35 @@
 		<view class="title">工单信息</view>
 		<view class="box">
 			<view class="box_key">工单编号：</view>
-			<view class="box_value">{{ detailInfo.order }}</view>
+			<view class="box_value">{{ detailInfo.recordNo }}</view>
 		</view>
 		<view class="box_time">
 			<view class="time_msg">
 				报修时间：
-				<text>{{ detailInfo.time }}</text>
+				<text>{{ detailInfo.reportTime }}</text>
 			</view>
 
-			<view class="time_type" v-if="detailInfo.type === 1">待接单</view>
-			<view class="time_type color_type" v-if="detailInfo.type === 2">维修中</view>
-			<view class="time_type" v-if="detailInfo.type === 3">待确认</view>
-			<view class="time_type color_type2" v-if="detailInfo.type === 4">已完成</view>
-			<view class="time_type" v-if="detailInfo.type === 5">已取消</view>
+			<view class="time_type" v-if="detailInfo.state === '待接单'">待接单</view>
+			<view class="time_type color_type" v-if="detailInfo.state === '维修中'">维修中</view>
+			<view class="time_type" v-if="detailInfo.state === '待确认'">待确认</view>
+			<view class="time_type color_type2" v-if="detailInfo.state === '已完成'">已完成</view>
+			<view class="time_type" v-if="detailInfo.state === '已取消'">已取消</view>
 		</view>
 
 		<view class="box">
 			<view class="box_key">报修姓名：</view>
-			<view class="box_value">{{ detailInfo.name }}</view>
+			<view class="box_value">{{ detailInfo.userName }}</view>
 		</view>
 		<view class="box">
 			<view class="box_key">报修电话：</view>
-			<view class="box_value phone" @click="handleCallPhone(detailInfo.phone)">
-				{{ detailInfo.phone }}
+			<view class="box_value phone" @click="handleCallPhone(detailInfo.userPhone)">
+				{{ detailInfo.userPhone }}
 				<img src="../../static/images/repairsImg/phone.png" />
 			</view>
 		</view>
 		<view class="box">
 			<view class="box_key">报修区域：</view>
-			<view class="box_value">{{ detailInfo.area }}</view>
+			<view class="box_value">{{ detailInfo.areaName }}</view>
 		</view>
 		<view class="box">
 			<view class="box_key">详细地址：</view>
@@ -39,16 +39,16 @@
 		</view>
 		<view class="box">
 			<view class="box_key">报修物品：</view>
-			<view class="box_value">{{ detailInfo.goods }}</view>
+			<view class="box_value">{{ detailInfo.articleName }}</view>
 		</view>
 		<view class="box">
 			<view class="box_key">故障描述：</view>
-			<view class="box_value">{{ detailInfo.description }}</view>
+			<view class="box_value">{{ detailInfo.descript }}</view>
 		</view>
 
 		<view class="box_img">
 			<view class="img_key">上传图片：</view>
-			<img class="img_value" mode="aspectFill" :src="detailInfo.img[0]" @click="handleLookImgs(detailInfo.img)" />
+			<img class="img_value" mode="aspectFill" :src="detailInfo.images[0]" @click="handleLookImgs(detailInfo.images)" />
 		</view>
 
 		<view class="box top" v-if="detailInfo.workerName">
@@ -76,7 +76,7 @@
 
 		<!-- 步骤条区域 -->
 		<!-- activeIcon="checkmark-circle-fill" -->
-		<uv-steps activeColor="#6FB6B8" direction="column" current="3">
+		<uv-steps activeColor="#6FB6B8" direction="column" current="4">
 			<uv-steps-item :customStyle="customStyle" v-for="item in stepsList" :key="item.id">
 				<template v-slot:title>
 					<view class="steps_title" :class="{ active: item.type }">{{ item.title }}</view>
@@ -121,10 +121,13 @@
 export default {
 	data() {
 		return {
+			// 报修详情信息
 			detailInfo: {},
+			// 步骤条样式
 			customStyle: {
 				marginBottom: '5px'
 			},
+			// 步骤条数据
 			stepsList: [
 				{
 					id: 1,
@@ -176,7 +179,6 @@ export default {
 		},
 		// 点击图片回调
 		handleLookImgs(img) {
-			// console.log(img)
 			uni.previewImage({
 				urls: img
 			})
@@ -280,7 +282,6 @@ export default {
 			width: 120rpx;
 			height: 120rpx;
 			border-radius: 14rpx;
-			background-color: salmon;
 		}
 	}
 

pagesRepairs/repairs/repairs.vue

@@ -170,13 +170,15 @@ export default {
 	data() {
 		return {
 			// 报修公告
-			repairsNotice: '今日14:00系统更新请不要进行报修！',
+			repairsNotice: '',
 			// 报修区域
 			repairsArea: '',
 			// 报修地址
 			repairsAddress: '',
 			// 报修物品
 			repairsGoods: '',
+			// 报修物品ID
+			articleId: '',
 			// 故障描述
 			repairsDescription: '',
 			// 报修姓名
@@ -204,55 +206,91 @@ export default {
 			// 图片上传框的样式
 			imageStyles: {
 				width: 60,
-				height: 60,
-				border: {
-					color: '#ccc',
-					width: 1,
-					style: 'dashed',
-					radius: '9px'
-				}
+				height: 60
 			},
 			//画板边长默认是屏幕宽度，正方形画布
-			cw: uni.getSystemInfoSync().windowWidth
+			cw: uni.getSystemInfoSync().windowWidth,
+			// 当前校区Id
+			schoolId: null
 		}
 	},
 	mounted() {
 		console.log('报修页面加载')
 		uni.$on('addRepairsArea', this.addRepairsArea)
 		uni.$on('addRepairsGoods', this.addRepairsGoods)
-		//在ios下静音时播放没有声音，默认为true，改为false就好了。
+		//在ios下静音时播放没有声音，默认为true，改为false静音时播放有声音
 		uni.setInnerAudioOption({
 			obeyMuteSwitch: false
 		})
+		this.getRepairNotice()
 	},
 	methods: {
+		// 获取首页公告展示数据
+		async getRepairNotice() {
+			const res = await this.$myRequest_repairs({
+				url: '/repairNoticeSetting/queryRepairNoticeSettingByTop'
+			})
+			// console.log(res)
+			if (res.code === '200') {
+				this.repairsNotice = res.data.noticeStr
+			}
+		},
 		// 确认提交按钮回调
 		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'
-				})
-
-				// 不是用户报修的单,则跳转回首页
-				const repairsUserInfo = uni.getStorageSync('repairsUserInfo')
+				uni.showModal({
+					title: '提示',
+					content: '确认提交吗？',
+					success: async (res) => {
+						if (res.confirm) {
+							const repairsUserInfo = uni.getStorageSync('repairsUserInfo')
+							const res = await this.$myRequest_repairs({
+								url: '/repairRecord/insertRepairRecord',
+								method: 'post',
+								data: {
+									areaId: this.repairsArea,
+									address: this.repairsAddress,
+									articleId: this.articleId,
+									description: this.repairsDescription,
+									voice: this.recordingPath,
+									images: this.subImgList,
+									userName: this.repairsName,
+									userPhone: this.repairsPhone,
+									userId: repairsUserInfo.userId
+								}
+							})
+							// console.log(res)
+							if (res.code === '200') {
+								uni.showToast({
+									title: res.message,
+									icon: 'success'
+								})
 
-				if (repairsUserInfo.routes.includes('首页')) {
-					setTimeout(() => {
-						uni.reLaunch({
-							url: '/pagesRepairs/box/box'
-						})
-					}, 1500)
-				}
+								// 重置数据
+								this.repairsArea = ''
+								this.repairsAddress = ''
+								this.repairsGoods = ''
+								this.articleId = ''
+								this.repairsDescription = ''
+								this.recordingPath = ''
+								this.imgList = []
+								this.subImgList = []
+								this.repairsName = ''
+								this.repairsPhone = ''
+
+								// 不是用户报修的单,则跳转回首页
+								if (repairsUserInfo.routes.includes('首页')) {
+									setTimeout(() => {
+										uni.reLaunch({
+											url: '/pagesRepairs/box/box'
+										})
+									}, 1500)
+								}
+							}
+						}
+					}
+				})
 			}
 		},
 		// 验证信息是否符合规范
@@ -321,11 +359,13 @@ export default {
 		addRepairsArea(e) {
 			console.log(e)
 			this.repairsArea = e.data
+			this.schoolId = e.schoolId
 		},
 		// 全局自定义事件
 		addRepairsGoods(e) {
 			console.log(e)
 			this.repairsGoods = e.data
+			this.articleId = e.articleId
 		},
 		// 删除录音回调
 		handleDeleteRecording() {
@@ -387,7 +427,7 @@ export default {
 		},
 		// 选择图片回调
 		select(e) {
-			console.log(e)
+			// console.log(e)
 			e.tempFiles.forEach((item) => {
 				//这里的id和页面中写的html代码的canvas的id要一致
 				let canvasId = 'zipCanvas'
@@ -403,11 +443,16 @@ export default {
 						title: '上传中'
 					})
 					uni.uploadFile({
-						url: `https://jiangxih3cpartner.com/reporting/file/fileUpDown`,
+						url: `https://chtech.ncjti.edu.cn/campusMaintenance/repair-api/repair/api/repairRecord/uploadFile`,
 						filePath: resPath,
 						name: 'file',
+						header: {
+							token: uni.getStorageSync('repairsUserInfo').token,
+							user_head: uni.getStorageSync('repairsUserInfo').userhead
+						},
 						success: (uploadFileRes) => {
-							this.subImgList.push(JSON.parse(uploadFileRes.data).data.join())
+							// console.log(JSON.parse(uploadFileRes.data))
+							this.subImgList.push(JSON.parse(uploadFileRes.data).data.resultUrl)
 							this.imgList.push({
 								url: item.path,
 								name: ''
@@ -440,9 +485,16 @@ export default {
 		},
 		// 点击报修物品回调
 		handleSelectGoods() {
-			uni.navigateTo({
-				url: '/pagesRepairs/selectGoods/selectGoods'
-			})
+			if (this.schoolId) {
+				uni.navigateTo({
+					url: `/pagesRepairs/selectGoods/selectGoods?schoolId=${this.schoolId}`
+				})
+			} else {
+				uni.showToast({
+					title: '请先选择报修区域',
+					icon: 'none'
+				})
+			}
 		},
 		// 点击消息通知按钮回调
 		handleClickFixed() {

pagesRepairs/selectArea/selectArea.vue

@@ -19,7 +19,7 @@
 			<!-- 右边区域 -->
 			<view class="body_right">
 				<view class="body_right_item" :class="{ active: active_right === index }" v-for="(item, index) in rightList" :key="index" @click="handleChange2(index)">
-					{{ item }}
+					{{ item.name }}
 				</view>
 			</view>
 		</view>
@@ -31,36 +31,80 @@ export default {
 	data() {
 		return {
 			// 顶部分段器选项数组
-			items: ['黄家湖校区', '墨轩湖校区'],
+			items: [],
 			// 分段器当前索引
 			current: 0,
+			// 分段器当前索引ID
+			schoolId: 0,
 			// 左边分类数组
-			leftList: ['教学楼', '行政楼', '综合楼', '科技楼', '学生宿舍', '其他'],
+			leftList: [],
 			// 左边分类数组当前索引
 			active_left: 0,
 			// 右边分类数组
-			rightList: ['1栋', '2栋', '3栋', '4栋', '5栋', '6栋', '7栋', '8栋', '体育场', '篮球场', '其他'],
+			rightList: [],
 			// 右边分类数组当前索引
-			active_right: 0
+			active_right: null,
+			// 报修区域数组
+			areaTreeList: [],
+			// 校区数组
+			schoolList: []
 		}
 	},
+	mounted() {
+		this.getSchoolList()
+	},
 	methods: {
+		// 获取校区数据
+		async getSchoolList() {
+			const res = await this.$myRequest_repairs({
+				url: '/repairArea/queryRepairSchools'
+			})
+			// console.log(res)
+			if (res.code === '200') {
+				this.schoolList = res.data
+				this.items = this.schoolList.map((ele) => ele.name)
+				this.schoolId = this.schoolList[this.current].id
+				this.getRepairAreaTree()
+			}
+		},
+		// 获取区域数据
+		async getRepairAreaTree() {
+			const res = await this.$myRequest_repairs({
+				url: '/repairArea/queryRepairAreaTree',
+				data: {
+					schoolId: this.schoolId
+				}
+			})
+			// console.log(res)
+			if (res.code === '200') {
+				this.areaTreeList = res.data
+				this.leftList = this.areaTreeList.map((ele) => ele.name)
+				this.rightList = this.areaTreeList[this.active_left].children || []
+			}
+		},
 		// 顶部分段器切换选项回调
 		onClickItem(e) {
+			this.active_left = 0
+			this.active_right = null
 			if (this.current != e.currentIndex) {
 				this.current = e.currentIndex
+				this.schoolId = this.schoolList[this.current].id
+				this.getRepairAreaTree()
 			}
 		},
 		// 左边数组切换回调
 		handleChange(index) {
 			this.active_left = index
+			this.active_right = null
+			this.rightList = this.areaTreeList[this.active_left].children || []
 		},
 		// 右边数组切换回调
 		handleChange2(index) {
 			this.active_right = index
-			const repairsArea = this.items[this.current] + this.leftList[this.active_left] + this.rightList[this.active_right]
+			const repairsArea = this.items[this.current] + this.leftList[this.active_left] + this.rightList[this.active_right].name
 			uni.$emit('addRepairsArea', {
-				data: repairsArea
+				data: repairsArea,
+				schoolId: this.schoolId
 			})
 			uni.navigateBack(1)
 		}

pagesRepairs/selectGoods/selectGoods.vue

@@ -13,7 +13,7 @@
 			<!-- 右边区域 -->
 			<view class="right">
 				<view class="right_item" :class="{ active: active_right === index }" v-for="(item, index) in rightList" :key="index" @click="handleChange2(index)">
-					{{ item }}
+					{{ item.name }}
 				</view>
 			</view>
 		</view>
@@ -27,22 +27,56 @@ export default {
 			// 左边分类数组当前索引
 			active_left: 0,
 			// 左边分类数组
-			leftList: ['其他', '水电'],
+			leftList: [],
 			// 右边分类数组当前索引
-			active_right: 0,
+			active_right: null,
 			// 右边分类数组
-			rightList: ['下水道', '安全指示牌', '消费应急灯', '排水管道', '吊顶', '风扇', '没电']
+			rightList: [],
+			// 当前校区Id
+			schoolId: null,
+			// 报修物品数组
+			articleList: [],
+			// 报修物品ID
+			articleId: ''
 		}
 	},
+	onLoad(options) {
+		this.schoolId = options.schoolId
+		// console.log(this.schoolId)
+		this.getArticleList()
+	},
 	methods: {
+		// 获取物品类型数组
+		async getArticleList() {
+			const res = await this.$myRequest_repairs({
+				url: '/repairArticleType/queryRepairArticleTypeTree',
+				data: {
+					schoolId: this.schoolId
+				}
+			})
+			// console.log(res)
+			if (res.code == '200') {
+				this.articleList = res.data
+				this.leftList = this.articleList.map((ele) => ele.name)
+				this.rightList = this.articleList[this.active_left].children || []
+			}
+		},
+
+		// 左边数组切换回调
 		handleChange(index) {
 			this.active_left = index
+			this.active_right = null
+			this.rightList = this.articleList[this.active_left].children || []
 		},
+
+		// 右边数组切换回调
 		handleChange2(index) {
 			this.active_right = index
-			const repairsGoods = this.leftList[this.active_left] + this.rightList[this.active_right]
+			this.articleId = this.articleList[this.active_left].children[this.active_right].id
+			const repairsGoods = this.leftList[this.active_left] + '-' + this.rightList[this.active_right].name
 			uni.$emit('addRepairsGoods', {
-				data: repairsGoods
+				data: repairsGoods,
+				articleId: this.articleId
 			})
 			uni.navigateBack(1)
 		}

pagesRepairs/util/api.js

@@ -1,4 +1,4 @@
-const BASE_URL = "http://192.168.161.220:8080"
+const BASE_URL = "https://chtech.ncjti.edu.cn/campusMaintenance/repair-api/repair/api"
 export const myRequest_repairs = (options) => {
 	uni.showLoading({
 		title: "加载中",
@@ -8,10 +8,21 @@ export const myRequest_repairs = (options) => {
 		uni.request({
 			url: BASE_URL + options.url,
 			method: options.method || "GET",
+			header: options.header || {
+				'token': uni.getStorageSync("repairsUserInfo").token,
+				'user_head': uni.getStorageSync("repairsUserInfo").userhead,
+			},
 			data: options.data || {},
 			success: (res) => {
 				uni.hideLoading();
-				resolve(res.data)
+				if (res.data.code !== '200') {
+					uni.showToast({
+						title: res.data.message,
+						icon: 'none'
+					})
+				} else {
+					resolve(res.data)
+				}
 			},
 			fail: (err) => {
 				uni.hideLoading();

uni_modules/uni-file-picker/components/uni-file-picker/upload-file.vue

@@ -7,319 +7,320 @@
 		<view v-if="list.length > 0" class="uni-file-picker__lists is-text-box" :style="borderStyle">
 			<!-- ,'is-list-card':showType === 'list-card' -->
 
-			<view class="uni-file-picker__lists-box" v-for="(item ,index) in list" :key="index" :class="{
-				'files-border':index !== 0 && styles.dividline}"
-			 :style="index !== 0 && styles.dividline &&borderLineStyle">
+			<view
+				class="uni-file-picker__lists-box"
+				v-for="(item, index) in list"
+				:key="index"
+				:class="{
+					'files-border': index !== 0 && styles.dividline
+				}"
+				:style="index !== 0 && styles.dividline && borderLineStyle"
+			>
 				<view class="uni-file-picker__item">
 					<!-- :class="{'is-text-image':showType === 'list'}" -->
 					<!-- 	<view class="files__image is-text-image">
 						<image class="header-image" :src="item.logo" mode="aspectFit"></image>
 					</view> -->
-					<view class="files__name">{{item.name}}</view>
-					<view v-if="delIcon&&!readonly" class="icon-del-box icon-files" @click="delFile(index)">
+					<view class="files__name">{{ item.name }}</view>
+					<view v-if="delIcon && !readonly" class="icon-del-box icon-files" @click="delFile(index)">
 						<view class="icon-del icon-files"></view>
 						<view class="icon-del rotate"></view>
 					</view>
 				</view>
-				<view v-if="(item.progress && item.progress !== 100) ||item.progress===0 " class="file-picker__progress">
-					<progress class="file-picker__progress-item" :percent="item.progress === -1?0:item.progress" stroke-width="4"
-					 :backgroundColor="item.errMsg?'#ff5a5f':'#EBEBEB'" />
-				</view>
-				<view v-if="item.status === 'error'" class="file-picker__mask" @click.stop="uploadFiles(item,index)">
-					点击重试
+				<view v-if="(item.progress && item.progress !== 100) || item.progress === 0" class="file-picker__progress">
+					<progress
+						class="file-picker__progress-item"
+						:percent="item.progress === -1 ? 0 : item.progress"
+						stroke-width="4"
+						:backgroundColor="item.errMsg ? '#ff5a5f' : '#EBEBEB'"
+					/>
 				</view>
+				<view v-if="item.status === 'error'" class="file-picker__mask" @click.stop="uploadFiles(item, index)">点击重试</view>
 			</view>
-
 		</view>
 	</view>
 </template>
 
 <script>
-	export default {
-		name: "uploadFile",
-		emits:['uploadFiles','choose','delFile'],
-		props: {
-			filesList: {
-				type: Array,
-				default () {
-					return []
-				}
-			},
-			delIcon: {
-				type: Boolean,
-				default: true
-			},
-			limit: {
-				type: [Number, String],
-				default: 9
-			},
-			showType: {
-				type: String,
-				default: ''
-			},
-			listStyles: {
-				type: Object,
-				default () {
-					return {
-						// 是否显示边框
-						border: true,
-						// 是否显示分隔线
-						dividline: true,
-						// 线条样式
-						borderStyle: {}
-					}
-				}
-			},
-			readonly:{
-				type:Boolean,
-				default:false
+export default {
+	name: 'uploadFile',
+	emits: ['uploadFiles', 'choose', 'delFile'],
+	props: {
+		filesList: {
+			type: Array,
+			default() {
+				return []
 			}
 		},
-		computed: {
-			list() {
-				let files = []
-				this.filesList.forEach(v => {
-					files.push(v)
-				})
-				return files
-			},
-			styles() {
-				let styles = {
+		delIcon: {
+			type: Boolean,
+			default: true
+		},
+		limit: {
+			type: [Number, String],
+			default: 9
+		},
+		showType: {
+			type: String,
+			default: ''
+		},
+		listStyles: {
+			type: Object,
+			default() {
+				return {
+					// 是否显示边框
 					border: true,
+					// 是否显示分隔线
 					dividline: true,
-					'border-style': {}
+					// 线条样式
+					borderStyle: {}
 				}
-				return Object.assign(styles, this.listStyles)
-			},
-			borderStyle() {
-				let {
-					borderStyle,
-					border
-				} = this.styles
-				let obj = {}
-				if (!border) {
-					obj.border = 'none'
-				} else {
-					let width = (borderStyle && borderStyle.width) || 1
-					width = this.value2px(width)
-					let radius = (borderStyle && borderStyle.radius) || 5
-					radius = this.value2px(radius)
-					obj = {
-						'border-width': width,
-						'border-style': (borderStyle && borderStyle.style) || 'solid',
-						'border-color': (borderStyle && borderStyle.color) || '#eee',
-						'border-radius': radius
-					}
-				}
-				let classles = ''
-				for (let i in obj) {
-					classles += `${i}:${obj[i]};`
-				}
-				return classles
-			},
-			borderLineStyle() {
-				let obj = {}
-				let {
-					borderStyle
-				} = this.styles
-				if (borderStyle && borderStyle.color) {
-					obj['border-color'] = borderStyle.color
-				}
-				if (borderStyle && borderStyle.width) {
-					let width = borderStyle && borderStyle.width || 1
-					let style = borderStyle && borderStyle.style || 0
-					if (typeof width === 'number') {
-						width += 'px'
-					} else {
-						width = width.indexOf('px') ? width : width + 'px'
-					}
-					obj['border-width'] = width
-
-					if (typeof style === 'number') {
-						style += 'px'
-					} else {
-						style = style.indexOf('px') ? style : style + 'px'
-					}
-					obj['border-top-style'] = style
-				}
-				let classles = ''
-				for (let i in obj) {
-					classles += `${i}:${obj[i]};`
+			}
+		},
+		readonly: {
+			type: Boolean,
+			default: false
+		}
+	},
+	computed: {
+		list() {
+			let files = []
+			this.filesList.forEach((v) => {
+				files.push(v)
+			})
+			return files
+		},
+		styles() {
+			let styles = {
+				border: true,
+				dividline: true,
+				'border-style': {}
+			}
+			return Object.assign(styles, this.listStyles)
+		},
+		borderStyle() {
+			let { borderStyle, border } = this.styles
+			let obj = {}
+			if (!border) {
+				obj.border = 'none'
+			} else {
+				let width = (borderStyle && borderStyle.width) || 1
+				width = this.value2px(width)
+				let radius = (borderStyle && borderStyle.radius) || 5
+				radius = this.value2px(radius)
+				obj = {
+					'border-width': width,
+					'border-style': (borderStyle && borderStyle.style) || 'solid',
+					'border-color': (borderStyle && borderStyle.color) || '#eee',
+					'border-radius': radius
 				}
-				return classles
 			}
+			let classles = ''
+			for (let i in obj) {
+				classles += `${i}:${obj[i]};`
+			}
+			return classles
 		},
+		borderLineStyle() {
+			let obj = {}
+			let { borderStyle } = this.styles
+			if (borderStyle && borderStyle.color) {
+				obj['border-color'] = borderStyle.color
+			}
+			if (borderStyle && borderStyle.width) {
+				let width = (borderStyle && borderStyle.width) || 1
+				let style = (borderStyle && borderStyle.style) || 0
+				if (typeof width === 'number') {
+					width += 'px'
+				} else {
+					width = width.indexOf('px') ? width : width + 'px'
+				}
+				obj['border-width'] = width
 
-		methods: {
-			uploadFiles(item, index) {
-				this.$emit("uploadFiles", {
-					item,
-					index
-				})
-			},
-			choose() {
-				this.$emit("choose")
-			},
-			delFile(index) {
-				this.$emit('delFile', index)
-			},
-			value2px(value) {
-				if (typeof value === 'number') {
-					value += 'px'
+				if (typeof style === 'number') {
+					style += 'px'
 				} else {
-					value = value.indexOf('px') !== -1 ? value : value + 'px'
+					style = style.indexOf('px') ? style : style + 'px'
 				}
-				return value
+				obj['border-top-style'] = style
+			}
+			let classles = ''
+			for (let i in obj) {
+				classles += `${i}:${obj[i]};`
+			}
+			return classles
+		}
+	},
+
+	methods: {
+		uploadFiles(item, index) {
+			this.$emit('uploadFiles', {
+				item,
+				index
+			})
+		},
+		choose() {
+			this.$emit('choose')
+		},
+		delFile(index) {
+			this.$emit('delFile', index)
+		},
+		value2px(value) {
+			if (typeof value === 'number') {
+				value += 'px'
+			} else {
+				value = value.indexOf('px') !== -1 ? value : value + 'px'
 			}
+			return value
 		}
 	}
+}
 </script>
 
 <style lang="scss">
-	.uni-file-picker__files {
-		/* #ifndef APP-NVUE */
-		display: flex;
-		/* #endif */
-		flex-direction: column;
-		justify-content: flex-start;
-	}
-
-	.files-button {
-		// border: 1px red solid;
-	}
+.uni-file-picker__files {
+	/* #ifndef APP-NVUE */
+	display: flex;
+	/* #endif */
+	flex-direction: column;
+	justify-content: flex-start;
+}
 
-	.uni-file-picker__lists {
-		position: relative;
-		margin-top: 5px;
-		overflow: hidden;
-	}
+.files-button {
+	// border: 1px red solid;
+}
 
-	.file-picker__mask {
-		/* #ifndef APP-NVUE */
-		display: flex;
-		/* #endif */
-		justify-content: center;
-		align-items: center;
-		position: absolute;
-		right: 0;
-		top: 0;
-		bottom: 0;
-		left: 0;
-		color: #fff;
-		font-size: 14px;
-		background-color: rgba(0, 0, 0, 0.4);
-	}
+.uni-file-picker__lists {
+	position: relative;
+	margin-top: 5px;
+	overflow: hidden;
+}
 
-	.uni-file-picker__lists-box {
-		position: relative;
-	}
+.file-picker__mask {
+	/* #ifndef APP-NVUE */
+	display: flex;
+	/* #endif */
+	justify-content: center;
+	align-items: center;
+	position: absolute;
+	right: 0;
+	top: 0;
+	bottom: 0;
+	left: 0;
+	color: #fff;
+	font-size: 14px;
+	background-color: rgba(0, 0, 0, 0.4);
+}
 
-	.uni-file-picker__item {
-		/* #ifndef APP-NVUE */
-		display: flex;
-		/* #endif */
-		align-items: center;
-		padding: 8px 10px;
-		padding-right: 5px;
-		padding-left: 10px;
-	}
+.uni-file-picker__lists-box {
+	position: relative;
+}
 
-	.files-border {
-		border-top: 1px #eee solid;
-	}
+.uni-file-picker__item {
+	/* #ifndef APP-NVUE */
+	display: flex;
+	/* #endif */
+	align-items: center;
+	padding: 8px 10px;
+	padding-right: 5px;
+	padding-left: 10px;
+}
 
-	.files__name {
-		flex: 1;
-		font-size: 14px;
-		color: #666;
-		margin-right: 25px;
-		/* #ifndef APP-NVUE */
-		word-break: break-all;
-		word-wrap: break-word;
-		/* #endif */
-	}
+.files-border {
+	border-top: 1px #eee solid;
+}
 
-	.icon-files {
-		/* #ifndef APP-NVUE */
-		position: static;
-		background-color: initial;
-		/* #endif */
-	}
+.files__name {
+	flex: 1;
+	font-size: 14px;
+	color: #666;
+	margin-right: 25px;
+	/* #ifndef APP-NVUE */
+	word-break: break-all;
+	word-wrap: break-word;
+	/* #endif */
+}
 
-	// .icon-files .icon-del {
-	// 	background-color: #333;
-	// 	width: 12px;
-	// 	height: 1px;
-	// }
+.icon-files {
+	/* #ifndef APP-NVUE */
+	position: static;
+	background-color: initial;
+	/* #endif */
+}
 
+// .icon-files .icon-del {
+// 	background-color: #333;
+// 	width: 12px;
+// 	height: 1px;
+// }
 
-	.is-list-card {
-		border: 1px #eee solid;
-		margin-bottom: 5px;
-		border-radius: 5px;
-		box-shadow: 0 0 2px 0px rgba(0, 0, 0, 0.1);
-		padding: 5px;
-	}
+.is-list-card {
+	border: 1px #eee solid;
+	margin-bottom: 5px;
+	border-radius: 5px;
+	box-shadow: 0 0 2px 0px rgba(0, 0, 0, 0.1);
+	padding: 5px;
+}
 
-	.files__image {
-		width: 40px;
-		height: 40px;
-		margin-right: 10px;
-	}
+.files__image {
+	width: 40px;
+	height: 40px;
+	margin-right: 10px;
+}
 
-	.header-image {
-		width: 100%;
-		height: 100%;
-	}
+.header-image {
+	width: 100%;
+	height: 100%;
+}
 
-	.is-text-box {
-		border: 1px #eee solid;
-		border-radius: 5px;
-	}
+.is-text-box {
+	border: 1px #eee solid;
+	border-radius: 5px;
+}
 
-	.is-text-image {
-		width: 25px;
-		height: 25px;
-		margin-left: 5px;
-	}
+.is-text-image {
+	width: 25px;
+	height: 25px;
+	margin-left: 5px;
+}
 
-	.rotate {
-		position: absolute;
-		transform: rotate(90deg);
-	}
+.rotate {
+	position: absolute;
+	transform: rotate(90deg);
+}
 
-	.icon-del-box {
-		/* #ifndef APP-NVUE */
-		display: flex;
-		margin: auto 0;
-		/* #endif */
-		align-items: center;
-		justify-content: center;
-		position: absolute;
-		top: 0px;
-		bottom: 0;
-		right: 5px;
-		height: 26px;
-		width: 26px;
-		// border-radius: 50%;
-		// background-color: rgba(0, 0, 0, 0.5);
-		z-index: 2;
-		transform: rotate(-45deg);
-	}
+.icon-del-box {
+	/* #ifndef APP-NVUE */
+	display: flex;
+	margin: auto 0;
+	/* #endif */
+	align-items: center;
+	justify-content: center;
+	position: absolute;
+	top: 0px;
+	bottom: 0;
+	right: 5px;
+	height: 26px;
+	width: 26px;
+	// border-radius: 50%;
+	// background-color: rgba(0, 0, 0, 0.5);
+	z-index: 2;
+	transform: rotate(-45deg);
+}
 
-	.icon-del {
-		width: 15px;
-		height: 1px;
-		background-color: #333;
-		// border-radius: 1px;
-	}
+.icon-del {
+	width: 15px;
+	height: 1px;
+	background-color: #333;
+	// border-radius: 1px;
+}
 
-	/* #ifdef H5 */
-	@media all and (min-width: 768px) {
-		.uni-file-picker__files {
-			max-width: 375px;
-		}
+/* #ifdef H5 */
+@media all and (min-width: 768px) {
+	.uni-file-picker__files {
+		max-width: 375px;
 	}
+}
 
-	/* #endif */
+/* #endif */
 </style>

uni_modules/uni-file-picker/components/uni-file-picker/upload-image.vue

@@ -1,19 +1,21 @@
 <template>
 	<view class="uni-file-picker__container">
-		<view class="file-picker__box" v-for="(item,index) in filesList" :key="index" :style="boxStyle">
+		<view class="file-picker__box" v-for="(item, index) in filesList" :key="index" :style="boxStyle">
 			<view class="file-picker__box-content" :style="borderStyle">
-				<image class="file-image" :src="item.url" mode="aspectFill" @click.stop="prviewImage(item,index)"></image>
+				<image class="file-image" :src="item.url" mode="aspectFill" @click.stop="prviewImage(item, index)"></image>
 				<view v-if="delIcon && !readonly" class="icon-del-box" @click.stop="delFile(index)">
 					<view class="icon-del"></view>
 					<view class="icon-del rotate"></view>
 				</view>
-				<view v-if="(item.progress && item.progress !== 100) ||item.progress===0 " class="file-picker__progress">
-					<progress class="file-picker__progress-item" :percent="item.progress === -1?0:item.progress" stroke-width="4"
-					 :backgroundColor="item.errMsg?'#ff5a5f':'#EBEBEB'" />
-				</view>
-				<view v-if="item.errMsg" class="file-picker__mask" @click.stop="uploadFiles(item,index)">
-					点击重试
+				<view v-if="(item.progress && item.progress !== 100) || item.progress === 0" class="file-picker__progress">
+					<progress
+						class="file-picker__progress-item"
+						:percent="item.progress === -1 ? 0 : item.progress"
+						stroke-width="4"
+						:backgroundColor="item.errMsg ? '#ff5a5f' : '#EBEBEB'"
+					/>
 				</view>
+				<view v-if="item.errMsg" class="file-picker__mask" @click.stop="uploadFiles(item, index)">点击重试</view>
 			</view>
 		</view>
 		<view v-if="filesList.length < limit && !readonly" class="file-picker__box" :style="boxStyle">
@@ -28,265 +30,261 @@
 </template>
 
 <script>
-	export default {
-		name: "uploadImage",
-		emits:['uploadFiles','choose','delFile'],
-		props: {
-			filesList: {
-				type: Array,
-				default () {
-					return []
-				}
-			},
-			disabled:{
-				type: Boolean,
-				default: false
-			},
-			disablePreview: {
-				type: Boolean,
-				default: false
-			},
-			limit: {
-				type: [Number, String],
-				default: 9
-			},
-			imageStyles: {
-				type: Object,
-				default () {
-					return {
-						width: 'auto',
-						height: 'auto',
-						border: {}
-					}
-				}
-			},
-			delIcon: {
-				type: Boolean,
-				default: true
-			},
-			readonly:{
-				type:Boolean,
-				default:false
+export default {
+	name: 'uploadImage',
+	emits: ['uploadFiles', 'choose', 'delFile'],
+	props: {
+		filesList: {
+			type: Array,
+			default() {
+				return []
 			}
 		},
-		computed: {
-			styles() {
-				let styles = {
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		disablePreview: {
+			type: Boolean,
+			default: false
+		},
+		limit: {
+			type: [Number, String],
+			default: 9
+		},
+		imageStyles: {
+			type: Object,
+			default() {
+				return {
 					width: 'auto',
 					height: 'auto',
 					border: {}
 				}
-				return Object.assign(styles, this.imageStyles)
-			},
-			boxStyle() {
-				const {
-					width = 'auto',
-						height = 'auto'
-				} = this.styles
-				let obj = {}
-				if (height === 'auto') {
-					if (width !== 'auto') {
-						obj.height = this.value2px(width)
-						obj['padding-top'] = 0
-					} else {
-						obj.height = 0
-					}
-				} else {
-					obj.height = this.value2px(height)
+			}
+		},
+		delIcon: {
+			type: Boolean,
+			default: true
+		},
+		readonly: {
+			type: Boolean,
+			default: false
+		}
+	},
+	computed: {
+		styles() {
+			let styles = {
+				width: 'auto',
+				height: 'auto',
+				border: {}
+			}
+			return Object.assign(styles, this.imageStyles)
+		},
+		boxStyle() {
+			const { width = 'auto', height = 'auto' } = this.styles
+			let obj = {}
+			if (height === 'auto') {
+				if (width !== 'auto') {
+					obj.height = this.value2px(width)
 					obj['padding-top'] = 0
-				}
-
-				if (width === 'auto') {
-					if (height !== 'auto') {
-						obj.width = this.value2px(height)
-					} else {
-						obj.width = '33.3%'
-					}
 				} else {
-					obj.width = this.value2px(width)
+					obj.height = 0
 				}
+			} else {
+				obj.height = this.value2px(height)
+				obj['padding-top'] = 0
+			}
 
-				let classles = ''
-				for(let i in obj){
-					classles+= `${i}:${obj[i]};`
-				}
-				return classles
-			},
-			borderStyle() {
-				let {
-					border
-				} = this.styles
-				let obj = {}
-				const widthDefaultValue = 1
-				const radiusDefaultValue = 3
-				if (typeof border === 'boolean') {
-					obj.border = border ? '1px #eee solid' : 'none'
+			if (width === 'auto') {
+				if (height !== 'auto') {
+					obj.width = this.value2px(height)
 				} else {
-					let width = (border && border.width) || widthDefaultValue
-					width = this.value2px(width)
-					let radius = (border && border.radius) || radiusDefaultValue
-					radius = this.value2px(radius)
-					obj = {
-						'border-width': width,
-						'border-style': (border && border.style) || 'solid',
-						'border-color': (border && border.color) || '#eee',
-						'border-radius': radius
-					}
-				}
-				let classles = ''
-				for(let i in obj){
-					classles+= `${i}:${obj[i]};`
+					obj.width = '33.3%'
 				}
-				return classles
+			} else {
+				obj.width = this.value2px(width)
 			}
+
+			let classles = ''
+			for (let i in obj) {
+				classles += `${i}:${obj[i]};`
+			}
+			return classles
 		},
-		methods: {
-			uploadFiles(item, index) {
-				this.$emit("uploadFiles", item)
-			},
-			choose() {
-				this.$emit("choose")
-			},
-			delFile(index) {
-				this.$emit('delFile', index)
-			},
-			prviewImage(img, index) {
-				let urls = []
-				if(Number(this.limit) === 1&&this.disablePreview&&!this.disabled){
-					this.$emit("choose")
+		borderStyle() {
+			let { border } = this.styles
+			let obj = {}
+			const widthDefaultValue = 1
+			const radiusDefaultValue = 3
+			if (typeof border === 'boolean') {
+				obj.border = border ? '1px #eee solid' : 'none'
+			} else {
+				let width = (border && border.width) || widthDefaultValue
+				width = this.value2px(width)
+				let radius = (border && border.radius) || radiusDefaultValue
+				radius = this.value2px(radius)
+				obj = {
+					'border-width': width,
+					'border-style': (border && border.style) || 'solid',
+					'border-color': (border && border.color) || '#eee',
+					'border-radius': radius
 				}
-				if(this.disablePreview) return
-				this.filesList.forEach(i => {
-					urls.push(i.url)
-				})
+			}
+			let classles = ''
+			for (let i in obj) {
+				classles += `${i}:${obj[i]};`
+			}
+			return classles
+		}
+	},
+	methods: {
+		uploadFiles(item, index) {
+			this.$emit('uploadFiles', item)
+		},
+		choose() {
+			this.$emit('choose')
+		},
+		delFile(index) {
+			this.$emit('delFile', index)
+		},
+		prviewImage(img, index) {
+			let urls = []
+			if (Number(this.limit) === 1 && this.disablePreview && !this.disabled) {
+				this.$emit('choose')
+			}
+			if (this.disablePreview) return
+			this.filesList.forEach((i) => {
+				urls.push(i.url)
+			})
 
-				uni.previewImage({
-					urls: urls,
-					current: index
-				});
-			},
-			value2px(value) {
-				if (typeof value === 'number') {
-					value += 'px'
-				} else {
-					if (value.indexOf('%') === -1) {
-						value = value.indexOf('px') !== -1 ? value : value + 'px'
-					}
+			uni.previewImage({
+				urls: urls,
+				current: index
+			})
+		},
+		value2px(value) {
+			if (typeof value === 'number') {
+				value += 'px'
+			} else {
+				if (value.indexOf('%') === -1) {
+					value = value.indexOf('px') !== -1 ? value : value + 'px'
 				}
-				return value
 			}
+			return value
 		}
 	}
+}
 </script>
 
 <style lang="scss">
-	.uni-file-picker__container {
-		/* #ifndef APP-NVUE */
-		display: flex;
-		box-sizing: border-box;
-		/* #endif */
-		flex-wrap: wrap;
-		margin: -5px;
-	}
+.uni-file-picker__container {
+	/* #ifndef APP-NVUE */
+	display: flex;
+	box-sizing: border-box;
+	/* #endif */
+	flex-wrap: wrap;
+	margin: -5px;
+}
 
-	.file-picker__box {
-		position: relative;
-		// flex: 0 0 33.3%;
-		width: 33.3%;
-		height: 0;
-		padding-top: 33.33%;
-		/* #ifndef APP-NVUE */
-		box-sizing: border-box;
-		/* #endif */
-	}
+.file-picker__box {
+	position: relative;
+	// flex: 0 0 33.3%;
+	width: 33.3%;
+	height: 0;
+	padding-top: 33.33%;
+	/* #ifndef APP-NVUE */
+	box-sizing: border-box;
+	/* #endif */
+}
 
-	.file-picker__box-content {
-		position: absolute;
-		top: 0;
-		right: 0;
-		bottom: 0;
-		left: 0;
-		margin: 5px;
-		border: 1px #eee solid;
-		border-radius: 5px;
-		overflow: hidden;
-	}
+.file-picker__box-content {
+	position: absolute;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	left: 0;
+	margin: 5px;
+	border: 1px #eee solid;
+	border-radius: 5px;
+	overflow: hidden;
+	background-color: #e6e6e6;
+}
 
-	.file-picker__progress {
-		position: absolute;
-		bottom: 0;
-		left: 0;
-		right: 0;
-		/* border: 1px red solid; */
-		z-index: 2;
-	}
+.file-picker__progress {
+	position: absolute;
+	bottom: 0;
+	left: 0;
+	right: 0;
+	/* border: 1px red solid; */
+	z-index: 2;
+}
 
-	.file-picker__progress-item {
-		width: 100%;
-	}
+.file-picker__progress-item {
+	width: 100%;
+}
 
-	.file-picker__mask {
-		/* #ifndef APP-NVUE */
-		display: flex;
-		/* #endif */
-		justify-content: center;
-		align-items: center;
-		position: absolute;
-		right: 0;
-		top: 0;
-		bottom: 0;
-		left: 0;
-		color: #fff;
-		font-size: 12px;
-		background-color: rgba(0, 0, 0, 0.4);
-	}
+.file-picker__mask {
+	/* #ifndef APP-NVUE */
+	display: flex;
+	/* #endif */
+	justify-content: center;
+	align-items: center;
+	position: absolute;
+	right: 0;
+	top: 0;
+	bottom: 0;
+	left: 0;
+	color: #fff;
+	font-size: 12px;
+	background-color: rgba(0, 0, 0, 0.4);
+}
 
-	.file-image {
-		width: 100%;
-		height: 100%;
-	}
+.file-image {
+	width: 100%;
+	height: 100%;
+}
 
-	.is-add {
-		/* #ifndef APP-NVUE */
-		display: flex;
-		/* #endif */
-		align-items: center;
-		justify-content: center;
-	}
+.is-add {
+	/* #ifndef APP-NVUE */
+	display: flex;
+	/* #endif */
+	align-items: center;
+	justify-content: center;
+}
 
-	.icon-add {
-		width: 50px;
-		height: 5px;
-		background-color: #f1f1f1;
-		border-radius: 2px;
-	}
+.icon-add {
+	width: 50px;
+	height: 5px;
+	background-color: #f1f1f1;
+	border-radius: 2px;
+}
 
-	.rotate {
-		position: absolute;
-		transform: rotate(90deg);
-	}
+.rotate {
+	position: absolute;
+	transform: rotate(90deg);
+}
 
-	.icon-del-box {
-		/* #ifndef APP-NVUE */
-		display: flex;
-		/* #endif */
-		align-items: center;
-		justify-content: center;
-		position: absolute;
-		top: 3px;
-		right: 3px;
-		height: 26px;
-		width: 26px;
-		border-radius: 50%;
-		background-color: rgba(0, 0, 0, 0.5);
-		z-index: 2;
-		transform: rotate(-45deg);
-	}
+.icon-del-box {
+	/* #ifndef APP-NVUE */
+	display: flex;
+	/* #endif */
+	align-items: center;
+	justify-content: center;
+	position: absolute;
+	top: 3px;
+	right: 3px;
+	height: 26px;
+	width: 26px;
+	border-radius: 50%;
+	background-color: rgba(0, 0, 0, 0.5);
+	z-index: 2;
+	transform: rotate(-45deg);
+}
 
-	.icon-del {
-		width: 15px;
-		height: 2px;
-		background-color: #fff;
-		border-radius: 2px;
-	}
+.icon-del {
+	width: 15px;
+	height: 2px;
+	background-color: #fff;
+	border-radius: 2px;
+}
 </style>