|
|
@@ -85,30 +85,46 @@
|
|
|
|
|
|
<!-- 关闭按钮弹窗 -->
|
|
|
<uni-popup ref="popup_close" :is-mask-click="false">
|
|
|
- <view class="popup_close" @click.stop="">
|
|
|
- <view
|
|
|
- :class="[{ active: activeIndex === index }, { radius: index === 0 }]"
|
|
|
- class="close_box"
|
|
|
- v-for="(ele, index) in closeList"
|
|
|
- :key="ele.id"
|
|
|
- @click="handleChangeItem(index)"
|
|
|
- >
|
|
|
- {{ ele.name }}
|
|
|
+ <view class="popup_close">
|
|
|
+ <view class="close_reason">
|
|
|
+ 关单原因：
|
|
|
+ <picker @change="bindPickerChange" :value="activeIndex" :range="closeList" range-key="name">
|
|
|
+ <view class="picker_input">
|
|
|
+ {{ closeList[activeIndex].name }}
|
|
|
+ <img src="../../static/images/repairsImg/bottom.png" />
|
|
|
+ </view>
|
|
|
+ </picker>
|
|
|
</view>
|
|
|
- <view class="close_btn">
|
|
|
- <view
|
|
|
- class="btn_box cancel"
|
|
|
- @click="
|
|
|
- $refs.popup_close.close()
|
|
|
- isClick = false
|
|
|
- "
|
|
|
- >
|
|
|
- 取消
|
|
|
+
|
|
|
+ <view class="close_note">备注(二选一)：</view>
|
|
|
+
|
|
|
+ <view class="close_voice">
|
|
|
+ <view class="voice_box" v-if="!recordingPath" @click="handleRecording">
|
|
|
+ <img src="../../static/images/repairsImg/voice.png" />
|
|
|
</view>
|
|
|
+ <view v-if="!recordingPath" @click="handleRecording">点击录音</view>
|
|
|
+ <view class="item_recording" v-if="recordingPath" @click="handlePlayRecordingPop">
|
|
|
+ <img :src="recordingImg" />
|
|
|
+ {{ recordingTime }}″
|
|
|
+ </view>
|
|
|
+ <view class="recording_icon" v-if="recordingPath" @click="handleDeleteRecording">×</view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <textarea class="close_input" placeholder-style="color:#CCCCCC" placeholder="请输入备注" v-model="closeNote"></textarea>
|
|
|
+
|
|
|
+ <view class="close_btn">
|
|
|
+ <view class="btn_box cancel" @click="handleCloseCancel">取消</view>
|
|
|
<view class="btn_box confirm" @click="handleCloseConfirm">确定</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</uni-popup>
|
|
|
+
|
|
|
+ <!-- 录音弹窗区域 -->
|
|
|
+ <uni-popup :safe-area="true" background-color="#fff" ref="popup_recording">
|
|
|
+ <view class="popup_recording">
|
|
|
+ <recording @getTempFilePath="getTempFilePath" />
|
|
|
+ </view>
|
|
|
+ </uni-popup>
|
|
|
</view>
|
|
|
<!-- 没有数据时展示的图片 -->
|
|
|
<view class="no_data" v-if="dataList.length === 0">
|
|
|
@@ -119,8 +135,12 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+import recording from '../components/recording.vue'
|
|
|
const innerAudioContext = uni.createInnerAudioContext()
|
|
|
export default {
|
|
|
+ components: {
|
|
|
+ recording
|
|
|
+ },
|
|
|
data() {
|
|
|
return {
|
|
|
scrollY: true,
|
|
|
@@ -145,7 +165,19 @@ export default {
|
|
|
// 校区Id
|
|
|
schoolId: '',
|
|
|
// 每一个订单点击时是否触发事件 true 不触发 false 触发
|
|
|
- isClick: false
|
|
|
+ isClick: false,
|
|
|
+ // 关闭订单备注
|
|
|
+ closeNote: '',
|
|
|
+ // 录音文件路径
|
|
|
+ recordingPath: '',
|
|
|
+ // 录音时长
|
|
|
+ recordingTime: 0,
|
|
|
+ // 录音图片地址
|
|
|
+ recordingImg: '../../static/images/repairsImg/recording.jpg',
|
|
|
+ // 播放状态
|
|
|
+ playStatus: false,
|
|
|
+ // 定时器标识
|
|
|
+ timer: null
|
|
|
}
|
|
|
},
|
|
|
mounted() {
|
|
|
@@ -233,11 +265,26 @@ export default {
|
|
|
handleClose(item) {
|
|
|
this.isClick = true
|
|
|
this.orderId = item.id
|
|
|
- this.activeIndex = 0
|
|
|
this.$refs.popup_close.open('center')
|
|
|
},
|
|
|
// 关闭弹窗确定按钮回调
|
|
|
handleCloseConfirm() {
|
|
|
+ if (this.closeNote && this.recordingPath) {
|
|
|
+ uni.showToast({
|
|
|
+ title: '录音和备注二选一，不能同时选择',
|
|
|
+ icon: 'none',
|
|
|
+ mask: true
|
|
|
+ })
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if (!this.closeNote && !this.recordingPath) {
|
|
|
+ uni.showToast({
|
|
|
+ title: '请录音或者输入备注，二选一',
|
|
|
+ icon: 'none',
|
|
|
+ mask: true
|
|
|
+ })
|
|
|
+ return
|
|
|
+ }
|
|
|
uni.showModal({
|
|
|
title: '提示',
|
|
|
content: '确定关闭订单吗？',
|
|
|
@@ -248,7 +295,9 @@ export default {
|
|
|
data: {
|
|
|
recordId: this.orderId,
|
|
|
userId: this.userId,
|
|
|
- reason: this.closeList[this.activeIndex].name
|
|
|
+ reason: this.closeList[this.activeIndex].name,
|
|
|
+ remark: this.recordingPath ? this.recordingPath : this.closeNote,
|
|
|
+ voiceLength: this.recordingPath ? this.recordingTime : ''
|
|
|
}
|
|
|
})
|
|
|
// console.log(res)
|
|
|
@@ -258,7 +307,7 @@ export default {
|
|
|
icon: 'success',
|
|
|
mask: true
|
|
|
})
|
|
|
- this.$refs.popup_close.close()
|
|
|
+ this.handleCloseCancel()
|
|
|
setTimeout(() => {
|
|
|
this.dataList = []
|
|
|
this.currentPage = 1
|
|
|
@@ -326,6 +375,123 @@ export default {
|
|
|
uni.navigateTo({
|
|
|
url: `/pagesRepairs/repairDetails/repairDetails?id=${item.id}`
|
|
|
})
|
|
|
+ },
|
|
|
+ // 关闭按钮弹窗选中按钮时回调
|
|
|
+ bindPickerChange(e) {
|
|
|
+ this.activeIndex = e.detail.value
|
|
|
+ },
|
|
|
+ // 点击录音按钮回调
|
|
|
+ handleRecording() {
|
|
|
+ uni.getSetting({
|
|
|
+ success: (res) => {
|
|
|
+ if (!res.authSetting['scope.record']) {
|
|
|
+ uni.authorize({
|
|
|
+ scope: 'scope.record',
|
|
|
+ success(res) {
|
|
|
+ // 授权成功
|
|
|
+ uni.showToast({
|
|
|
+ title: '授权成功',
|
|
|
+ icon: 'none'
|
|
|
+ })
|
|
|
+ },
|
|
|
+ fail() {
|
|
|
+ uni.showModal({
|
|
|
+ content: '检测到您没打开麦克风权限，是否去设置打开？',
|
|
|
+ confirmText: '确认',
|
|
|
+ cancelText: '取消',
|
|
|
+ success: (res) => {
|
|
|
+ if (res.confirm) {
|
|
|
+ uni.openSetting({
|
|
|
+ success: (res) => {}
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ uni.showToast({
|
|
|
+ title: '获取麦克风权限失败',
|
|
|
+ icon: 'none'
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ this.$refs.popup_recording.open('bottom')
|
|
|
+ }
|
|
|
+ },
|
|
|
+ fail() {
|
|
|
+ uni.showToast({
|
|
|
+ title: '获取麦克风权限失败',
|
|
|
+ icon: 'none'
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 点击录音播放回调
|
|
|
+ handlePlayRecordingPop() {
|
|
|
+ innerAudioContext.src = this.recordingPath
|
|
|
+ if (!this.playStatus) {
|
|
|
+ this.playStatus = true
|
|
|
+ innerAudioContext.play()
|
|
|
+
|
|
|
+ this.timer = setInterval(() => {
|
|
|
+ if (this.recordingImg == '../../static/images/repairsImg/recording.jpg') {
|
|
|
+ this.recordingImg = '../../static/images/repairsImg/recording2.jpg'
|
|
|
+ } else if (this.recordingImg == '../../static/images/repairsImg/recording2.jpg') {
|
|
|
+ this.recordingImg = '../../static/images/repairsImg/recording3.jpg'
|
|
|
+ } else if (this.recordingImg == '../../static/images/repairsImg/recording3.jpg') {
|
|
|
+ this.recordingImg = '../../static/images/repairsImg/recording.jpg'
|
|
|
+ }
|
|
|
+ }, 300)
|
|
|
+
|
|
|
+ //播放结束
|
|
|
+ innerAudioContext.onEnded(() => {
|
|
|
+ clearInterval(this.timer)
|
|
|
+ this.timer = null
|
|
|
+ this.recordingImg = '../../static/images/repairsImg/recording.jpg'
|
|
|
+ this.playStatus = false
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ clearInterval(this.timer)
|
|
|
+ this.recordingImg = '../../static/images/repairsImg/recording.jpg'
|
|
|
+ this.playStatus = false
|
|
|
+ innerAudioContext.stop()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 删除录音回调
|
|
|
+ handleDeleteRecording() {
|
|
|
+ if (this.playStatus) {
|
|
|
+ uni.showToast({
|
|
|
+ title: '播放中不能删除',
|
|
|
+ icon: 'none',
|
|
|
+ mask: true
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ uni.showModal({
|
|
|
+ title: '提示',
|
|
|
+ content: '确定删除录音吗？',
|
|
|
+ success: (res) => {
|
|
|
+ if (res.confirm) {
|
|
|
+ this.recordingPath = ''
|
|
|
+ this.recordingTime = 0
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 关闭弹窗取消按钮回调
|
|
|
+ handleCloseCancel() {
|
|
|
+ this.isClick = false
|
|
|
+ this.activeIndex = 0
|
|
|
+ this.recordingPath = ''
|
|
|
+ this.recordingTime = 0
|
|
|
+ this.closeNote = ''
|
|
|
+ this.$refs.popup_close.close()
|
|
|
+ },
|
|
|
+ // 自定义事件回调,获取录音文件路径
|
|
|
+ getTempFilePath(path, time) {
|
|
|
+ this.recordingPath = path
|
|
|
+ this.recordingTime = time
|
|
|
+ this.$refs.popup_recording.close()
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
@@ -499,25 +665,145 @@ export default {
|
|
|
}
|
|
|
|
|
|
.popup_close {
|
|
|
+ // width: 690rpx;
|
|
|
+ // border-radius: 19rpx;
|
|
|
+ // background-color: #fff;
|
|
|
+
|
|
|
+ // .close_box {
|
|
|
+ // height: 100rpx;
|
|
|
+ // line-height: 100rpx;
|
|
|
+ // text-align: center;
|
|
|
+ // font-size: 32rpx;
|
|
|
+ // border: 1rpx solid #e6e6e6;
|
|
|
+ // }
|
|
|
+
|
|
|
+ // .radius {
|
|
|
+ // border-radius: 19rpx 19rpx 0 0;
|
|
|
+ // }
|
|
|
+
|
|
|
+ // .active {
|
|
|
+ // color: #fff;
|
|
|
+ // background-color: #6fb6b8;
|
|
|
+ // }
|
|
|
+
|
|
|
+ // .close_btn {
|
|
|
+ // display: flex;
|
|
|
+ // align-items: center;
|
|
|
+ // justify-content: space-evenly;
|
|
|
+ // margin-top: 100rpx;
|
|
|
+ // height: 121rpx;
|
|
|
+
|
|
|
+ // .btn_box {
|
|
|
+ // display: flex;
|
|
|
+ // justify-content: center;
|
|
|
+ // align-items: center;
|
|
|
+ // width: 203rpx;
|
|
|
+ // height: 72rpx;
|
|
|
+ // border-radius: 9rpx;
|
|
|
+ // font-size: 32rpx;
|
|
|
+ // }
|
|
|
+
|
|
|
+ // .cancel {
|
|
|
+ // background-color: #e5e5e5;
|
|
|
+ // color: #6fb6b8;
|
|
|
+ // }
|
|
|
+
|
|
|
+ // .confirm {
|
|
|
+ // background-color: #6fb6b8;
|
|
|
+ // color: #fff;
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+
|
|
|
width: 690rpx;
|
|
|
border-radius: 19rpx;
|
|
|
background-color: #fff;
|
|
|
|
|
|
- .close_box {
|
|
|
- height: 100rpx;
|
|
|
- line-height: 100rpx;
|
|
|
- text-align: center;
|
|
|
- font-size: 32rpx;
|
|
|
- border: 1rpx solid #e6e6e6;
|
|
|
+ .close_reason {
|
|
|
+ padding-top: 50rpx;
|
|
|
+ margin-left: 80rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .picker_input {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ padding: 10rpx 20rpx;
|
|
|
+ width: 300rpx;
|
|
|
+ border-radius: 14rpx;
|
|
|
+ border: 1rpx solid #e6e6e6;
|
|
|
+
|
|
|
+ img {
|
|
|
+ width: 40rpx;
|
|
|
+ height: 40rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
- .radius {
|
|
|
- border-radius: 19rpx 19rpx 0 0;
|
|
|
+ .close_note {
|
|
|
+ margin: 20rpx 0 20rpx 80rpx;
|
|
|
}
|
|
|
|
|
|
- .active {
|
|
|
- color: #fff;
|
|
|
- background-color: #6fb6b8;
|
|
|
+ .close_voice {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-top: 30rpx;
|
|
|
+ margin-left: 80rpx;
|
|
|
+ width: 500rpx;
|
|
|
+ height: 94rpx;
|
|
|
+ font-size: 32rpx;
|
|
|
+ color: #cccccc;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ border: 1rpx solid #cccccc;
|
|
|
+
|
|
|
+ .voice_box {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ margin: 0 38rpx 0 33rpx;
|
|
|
+ width: 101rpx;
|
|
|
+ height: 47rpx;
|
|
|
+ border-radius: 33rpx;
|
|
|
+ box-shadow: 0px 0px 4rpx rgba(0, 0, 0, 0.25);
|
|
|
+
|
|
|
+ img {
|
|
|
+ width: 33rpx;
|
|
|
+ height: 33rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .item_recording {
|
|
|
+ margin-left: 35rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ width: 230rpx;
|
|
|
+ height: 65rpx;
|
|
|
+ color: #000;
|
|
|
+ border-radius: 100rpx;
|
|
|
+ border: 1rpx solid #cccccc;
|
|
|
+
|
|
|
+ img {
|
|
|
+ margin: 0 12rpx;
|
|
|
+ width: 40rpx;
|
|
|
+ height: 40rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .recording_icon {
|
|
|
+ margin-left: auto;
|
|
|
+ margin-right: 35rpx;
|
|
|
+ font-size: 40rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .close_input {
|
|
|
+ box-sizing: border-box;
|
|
|
+ margin: 35rpx 40rpx 35rpx 80rpx;
|
|
|
+ padding: 20rpx;
|
|
|
+ width: 520rpx;
|
|
|
+ height: 312rpx;
|
|
|
+ border-radius: 14rpx;
|
|
|
+ border: 1rpx solid #e6e6e6;
|
|
|
}
|
|
|
|
|
|
.close_btn {
|
|
|
@@ -549,6 +835,12 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
+ .popup_recording {
|
|
|
+ width: 100%;
|
|
|
+ height: 460rpx;
|
|
|
+ background-color: #fff;
|
|
|
+ }
|
|
|
+
|
|
|
.body_events {
|
|
|
pointer-events: none;
|
|
|
}
|
|
|
@@ -566,4 +858,4 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
-</style>
|
|
|
+</style>
|
