描述:订单详情

miniprogram/pages/reportRepair/assign/detail/detail.js

@@ -14,6 +14,8 @@ Page({
         IMG_NAME: app.IMG_NAME,
         id: '',
         detail: {},
+        innerAudioContext: null, // 音频对象
+        innerAudioContextIsPlay: false, // 音频对象-是否播放
     },
 
     /**
@@ -33,12 +35,69 @@ Page({
     },
 
     getDetail(id) {
-        reportDetailRq(id).then(res=>{
+        let _this = this
-            console.log("reportDetailRq" , res);
+        reportDetailRq(id).then(res => {
+            console.log("reportDetailRq", res);
             let detail = res.data
+            let repairVoice = detail.repairVoice
+            let repairImages = detail.repairImages
+            // 音频
+            if (repairVoice) {
+                detail.voiceObj = JSON.parse(repairVoice)
+                detail.voiceObj.url = app.IMG_NAME + detail.voiceObj.url
+            }
+            // 图片/视频
+            if (repairImages) {
+                detail.fileList = JSON.parse(repairImages).map(item => {
+                    return {
+                        url: app.IMG_NAME + item.url,
+                        name: item.url,
+                    }
+                })
+            }
+            _this.setData({
+                detail
+            })
         })
     },
 
+    // 播放语音
+    startAudio() {
+        console.log('startAudio');
+        let _this = this
+        // 获取innerAudioContext实例
+        let innerAudioContext = _this.data.innerAudioContext
+        let innerAudioContextIsPlay = _this.data.innerAudioContextIsPlay
+        if (!innerAudioContext) {
+            // 全局设置播放声音
+            wx.setInnerAudioOption({
+                obeyMuteSwitch: false
+            });
+            innerAudioContext = wx.createInnerAudioContext()
+            // 设置音频文件的路径
+            innerAudioContext.src = _this.data.detail.voiceObj.url
+            innerAudioContextIsPlay = false
+            innerAudioContext.onEnded(() => {
+                _this.setData({
+                    innerAudioContextIsPlay: false
+                })
+            })
+        }
+        if (innerAudioContextIsPlay) { // 播放中
+            innerAudioContext.stop()
+            innerAudioContextIsPlay = false
+        } else { // 未播放
+            innerAudioContext.play()
+            innerAudioContextIsPlay = true
+        }
+        //
+        _this.setData({
+            innerAudioContext,
+            innerAudioContextIsPlay
+        })
+    },
+
+
 
     // 确认损坏
     jumpAffirm() {

miniprogram/pages/reportRepair/assign/detail/detail.json

@@ -1,6 +1,7 @@
 {
     "navigationStyle": "custom",
     "usingComponents": {
-        "van-icon": "@vant/weapp/icon/index"
+        "van-icon": "@vant/weapp/icon/index",
+        "van-uploader": "@vant/weapp/uploader/index"
     }
 }

miniprogram/pages/reportRepair/assign/detail/detail.wxml

@@ -3,7 +3,7 @@
     <view class="topHead">
         <view class="navigatorView">
             <view class="backView" bind:tap="back">
-                <van-icon name="arrow-left" color="#ffffff"  size="30rpx"/>
+                <van-icon name="arrow-left" color="#ffffff" size="30rpx" />
                 <view class="label">返回</view>
             </view>
             <view class="title">详情</view>
@@ -16,39 +16,66 @@
 
     <view class="mainView">
         <view class="statusView">
-            <view class="label">YG123081273812</view>
+            <view class="label">{{detail.sn}}</view>
-            <view class="time">空调</view>
+            <view class="time">{{detail.typeName + '/' + detail.repairDeviceName}}</view>
-            <view class="tag">待派单</view>
+            <view class="tag">{{detail.status}}</view>
         </view>
 
         <view class="reportView">
             <view class="topTitle">报修信息</view>
             <view class="selfLine"></view>
             <view class="itemView">
-                <view class="label">设备名称</view>
+                <view class="label">报修名称</view>
-                <view class="content">320828282828320828282828320828282828320828282828v</view>
+                <view class="content">{{detail.repairName}}</view>
             </view>
             <view class="itemView">
-                <view class="label">设备地址</view>
+                <view class="label">故障等级</view>
-                <view class="content">302会议室</view>
+                <view class="content">{{detail.repairLevel}}</view>
             </view>
             <view class="itemView">
-                <view class="label">维修描述</view>
+                <view class="label">故障时间</view>
-                <view class="content">电脑蓝屏</view>
+                <view class="content">{{detail.failureDate}}</view>
             </view>
             <view class="itemView">
-                <view class="label">损坏凭证</view>
+                <view class="label">故障类型</view>
+                <view class="content">{{detail.typeName + '/' + detail.repairDeviceName}}</view>
+            </view>
+            <view class="itemView">
+                <view class="label">故障地点</view>
+                <view class="content">{{detail.addressName + '/' + detail.roomName}}</view>
+            </view>
+            <view class="itemView">
+                <view class="label">门牌号</view>
+                <view class="content">{{detail.area}}</view>
+            </view>
+            <view class="itemView">
+                <view class="label">联系电话</view>
+                <view class="content">{{detail.phone}}</view>
+            </view>
+            <view class="itemView">
+                <view class="label">报修人姓名</view>
+                <view class="content">{{detail.name}}</view>
+            </view>
+            <view class="itemView">
+                <view class="label">故障描述</view>
+                <view class="content">{{detail.content}}</view>
+            </view>
+            <view class="itemView">
+                <view class="label">语音</view>
                 <view class="content">
-                    <view wx:for="{{10}}" class="imgView" style="background: no-repeat center/cover url({{IMG_NAME + '/profile/static/index/banner/1.jpg'}});"></view>
+                    <view class="voiceView" wx:if="{{detail.voiceObj.url}}">
+                        <van-icon name="volume-o" color="black" size="40rpx" bind:tap="startAudio" />
+                        <view class="voiceTimeView" bind:tap="startAudio">{{detail.voiceObj.time}} s</view>
+                    </view>
                 </view>
             </view>
             <view class="itemView">
-                <view class="label">报修人</view>
+                <view class="label">故障图片/视频</view>
-                <view class="content">13652025563</view>
+                <view class="content">
-            </view>
+                    <view class="imgContentView">
-            <view class="itemView">
+                        <van-uploader file-list="{{ detail.fileList }}" show-upload="{{false}}" deletable="{{false}}"/>
-                <view class="label">报修时间</view>
+                    </view>
-                <view class="content">2024-06-10 23:59:59</view>
+                </view>
             </view>
         </view>
 

miniprogram/pages/reportRepair/assign/detail/detail.wxss

@@ -154,6 +154,17 @@
     word-break: break-all;
 }
 
+.mainView .reportView .itemView .content .voiceView {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+}
+
+.mainView .reportView .itemView .content .voiceView .voiceTimeView{
+   margin-left: 10rpx;
+   font-size: 24rpx;
+}
+
 .mainView .reportView .itemView .content .imgView {
     width: 100rpx;
     height: 100rpx;
@@ -191,4 +202,4 @@
 
 .bottomFixView .btn.red {
     background: #ee6f21;
-}
+}