647 lines
16 KiB
Vue
647 lines
16 KiB
Vue
<template>
|
||
<view class="page-body" v-if="pageMsg.isShow">
|
||
<!-- 卡片 -->
|
||
<view class="audit-card">
|
||
<view class="card-header">
|
||
<h3>{{detailMsg.Shop_Name }}</h3>
|
||
<view class="uni-flex ai-center jc-between fs12">
|
||
<text>{{detailMsg.Serverpart_Name }}</text>
|
||
<text>稽核时间：{{detailMsg.Audit_Time }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<h4>稽核信息</h4>
|
||
<view class="main-card">
|
||
<view class="uni-flex ai-center jc-between">
|
||
<view class="uni-flex ai-center ">
|
||
<text>现金营收：</text>
|
||
<text class="number-text" :style="{'width': numberText+'rpx'}">{{$util.fmoney( detailMsg.Cash ,2)}}元</text>
|
||
</view>
|
||
<view class="uni-flex ai-center">
|
||
<text>稽核类型：</text>
|
||
<text >{{detailMsg.Audit_Type }}</text>
|
||
</view>
|
||
|
||
</view>
|
||
<view class="uni-flex ai-center jc-between">
|
||
<view class="uni-flex ai-center " >
|
||
<text>稽核缴款：</text>
|
||
<text class="number-text" :style="{'width': numberText+'rpx'}">{{$util.fmoney(detailMsg.Cash_Pay) }}元</text>
|
||
</view>
|
||
|
||
<view class="uni-flex ai-center" >
|
||
<text>稽核人员：</text>
|
||
<text class="number-text">{{detailMsg.Worker_Name }}</text>
|
||
</view>
|
||
</view>
|
||
<view class="uni-flex ai-center jc-between">
|
||
<view class="uni-flex ai-center">
|
||
<text>长短款额：</text>
|
||
<text class="price-num number-text" :style="{'width': numberText+'rpx'}">{{$util.fmoney(detailMsg.Different_Price)}}元</text>
|
||
</view>
|
||
<view class="uni-flex ai-center">
|
||
<text>收银人员：</text>
|
||
<text>{{detailMsg.Cashier_Name}}</text>
|
||
</view>
|
||
</view>
|
||
<view class="uni-flex ai-center jc-between">
|
||
<view class="uni-flex ai-center">
|
||
<text>稽核误差率：</text>
|
||
<text class="number-text" :style="{'width': (numberText - 26)+'rpx'}">{{detailMsg.Audit_ErrorRate }}</text>
|
||
</view>
|
||
|
||
</view>
|
||
<view class="uni-flex ai-center jc-between">
|
||
<!-- 短款时不显示 -->
|
||
<view class="uni-flex ai-center" v-if="detailMsg.Add_Amount>0">
|
||
<text>{{detailMsg.Different_Price >0 ? '流水补入' : '现金补入'}}：</text>
|
||
<text :style="{'width': numberText+'rpx'}">{{$util.fmoney(Math.abs(detailMsg.Add_Amount),2)}}元</text>
|
||
</view>
|
||
|
||
</view>
|
||
</view>
|
||
|
||
<h4>稽核反馈 <div class="video-btn" @click="toVideoView" v-show="detailMsg.ShowView">回放录像 <text class="uni-icon uni-icon-arrowright"></text></div></h4>
|
||
<template v-if="detailMsg.CheckAccount_Desc">
|
||
<view class="main-card desc" >
|
||
|
||
<text :class="{'ico-yd':detailMsg.Calibrator_Mark==2000}">
|
||
{{detailMsg.Calibrator_Name ?( detailMsg.Calibrator_Name+'：'+ detailMsg.CheckAccount_Desc ): detailMsg.CheckAccount_Desc}}
|
||
</text>
|
||
<ul class="uni-flex ai-center imgList">
|
||
<li v-for="(img,index) in detailMsg.ImageList " :key="index">
|
||
<image :src="img.ImageUrl " mode="aspectFit" @click="showImg(index)"></image>
|
||
</li>
|
||
</ul>
|
||
</view>
|
||
<view class="uni-flex ai-center" v-if="detailMsg.Check_State!=0">
|
||
<text class="uni-icon uni-icon-checkmarkempty"></text>
|
||
<text class="checkbox-text ">本次{{detailMsg.Different_Price >0 ? '长款已补齐流水':'短款已补入现金'}}</text>
|
||
</view>
|
||
|
||
</template>
|
||
|
||
<view class="feedback-box" v-else-if="detailMsg.AuditIurisdiction ==1">
|
||
<view class="uni-flex align-center" v-if="detailMsg.Check_State==0">
|
||
<checkbox-group @change="changeState">
|
||
<label class="checkbox ">
|
||
<checkbox :value="saveMsg.isAddIn" checked /><text class="checkbox-text">是否补入{{detailMsg.Different_Price >0 ? '流水':'现金'}}</text>
|
||
|
||
</label>
|
||
</checkbox-group>
|
||
<view class="add-amout uni-flex" >
|
||
<input type="digit" :value="saveMsg.addAmout" :style="pageMsg.isChangeValue? 'color:#333':'color:#C5C4C4'" @input="inputAddAmout"/>
|
||
<text>元</text>
|
||
</view>
|
||
|
||
</view>
|
||
|
||
<textarea v-model="saveMsg.auditExplain" :placeholder="(detailMsg.Different_Price <0 ?'在此输入短款差额的原因并上传短款凭证照片（必填），如未补齐现金，将经过二次审核': '在此输入稽核长款的原因（必填）,上传凭证照片（非必），如未补入流水，将经过二次审核')" class="feedback" placeholder-style="color:#CCCCCC;"/>
|
||
<div class="img-box">
|
||
|
||
<div class="upload-file-container">
|
||
<div class="upload-file-unit" v-for="(item,index) in uploadImgList" :key="index">
|
||
<span class="upload-file-remove" @click.stop="deleteImgFunc(index)">-</span>
|
||
<image mode="aspectFill" :src="item" @tap="showUpImg(index)" />
|
||
</div>
|
||
<div class="upload-file-add" @click="chooseImage">
|
||
<div class="upload-file-add-container"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</view>
|
||
|
||
<view class="page-bottom" v-if="detailMsg.AuditIurisdiction ==1 && !detailMsg.CheckAccount_Desc">
|
||
<button type="default" class="main-btn" @tap="submitMsg">
|
||
<image src="/static/images/publicity/ybyj.png" mode="aspectFit"></image>
|
||
确认反馈
|
||
</button>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {mapGetters,mapMutations} from 'vuex'
|
||
export default {
|
||
data() {
|
||
return {
|
||
pageMsg: {
|
||
id: '',
|
||
isShow: false,
|
||
ispost: false,
|
||
isChangeValue: false
|
||
},
|
||
numberText: 78,
|
||
uploadImgList: [], //上传的图片地址
|
||
saveMsg: {
|
||
CheckAccount_Id: '',
|
||
auditExplain: '',
|
||
isAddIn: true,
|
||
imageInfo: '',
|
||
addAmout:''
|
||
},// 提交的反馈数据
|
||
detailMsg:{}, // 稽核详情
|
||
|
||
}
|
||
},
|
||
|
||
computed: {
|
||
|
||
imageList(){
|
||
let list = []
|
||
if(this.detailMsg.ImageList ){
|
||
this.detailMsg.ImageList.map(n=>{list.push(n.ImageUrl)})
|
||
}
|
||
return list
|
||
}
|
||
},
|
||
methods: {
|
||
...mapMutations(['shouldReLoadingList']),
|
||
inputAddAmout(event) {
|
||
this.saveMsg.addAmout = event.detail.value
|
||
this.pageMsg.isChangeValue = true
|
||
},
|
||
getWidth(data){
|
||
let len1 = parseInt(data.Cash)+''
|
||
let len2 = parseInt(data.Cash_Pay)+''
|
||
let len3 = Math.abs( parseInt(data.Different_Price))+''
|
||
let len4 = parseInt(data.Audit_ErrorRate.replace('%','') )+''
|
||
|
||
let keyLen = [len1.length,len2.length,len3.length,data.Audit_ErrorRate.indexOf('.')>-1? len4.length+1 :len4.length ]
|
||
|
||
keyLen.sort(function(a,b){
|
||
return b-a
|
||
})
|
||
|
||
let len = keyLen[0] < 3 ? keyLen[0]* 2 * 10 + 80 :keyLen[0]* 2 * 10 + 60
|
||
this.numberText = len > 100 ? len : 100
|
||
|
||
},
|
||
getDetail() {
|
||
let _this = this
|
||
this.$request.$webGet('Audit/GetAuditDetils',{CheckAccount_Id: this.pageMsg.id})
|
||
.then(res =>{
|
||
if(!res.Result_Code ||res.Result_Code!='100'){
|
||
_this.pageMsg.isShow =false
|
||
|
||
_this.detailMsg = {}
|
||
|
||
}else{
|
||
_this.detailMsg = res.Result_Data
|
||
res.Result_Data.Audit_Time = res.Result_Data.Audit_Time.replace('T',' ')
|
||
_this.getWidth(res.Result_Data)
|
||
|
||
_this.saveMsg.addAmout = (Math.abs( res.Result_Data.Different_Price)).toFixed(2)
|
||
_this.pageMsg.isShow = true
|
||
}
|
||
uni.hideLoading()
|
||
_this.pageMsg.ispost = false
|
||
})
|
||
},
|
||
// 图片预览
|
||
showImg(index) {
|
||
uni.previewImage( {
|
||
urls: this.imageList,
|
||
current: index,
|
||
loop: true,
|
||
indicator: 'number'
|
||
});
|
||
},
|
||
|
||
changeState(e){
|
||
if(e.detail.value.length>0){
|
||
|
||
this.saveMsg.addAmout = (Math.abs(this.detailMsg.Different_Price)).toFixed(2)
|
||
}else {
|
||
this.saveMsg.addAmout = ''
|
||
}
|
||
this.saveMsg.isAddIn = e.detail.value.length>0 ? true : false
|
||
},
|
||
deleteImgFunc(index) {
|
||
this.uploadImgList.splice(index,1)
|
||
},
|
||
showUpImg(index) {
|
||
uni.previewImage( {
|
||
urls: this.uploadImgList,
|
||
current: index,
|
||
loop: true,
|
||
indicator: 'number'
|
||
});
|
||
},
|
||
chooseImage(){
|
||
let _this = this
|
||
uni.chooseImage({
|
||
sourceType: ['camera','album'],
|
||
sizeType: 'compressed',
|
||
cout: 1 ,
|
||
success: (data) => {
|
||
if(data.tempFilePaths.length>0) {
|
||
|
||
data.tempFilePaths.forEach(function (n){
|
||
uni.getFileSystemManager().readFile({
|
||
filePath: n, //选择图片返回的相对路径
|
||
encoding: 'base64', //编码格式
|
||
success: function(res) { //
|
||
let base64 = 'data:image/jpeg;base64,'+res.data //.replace(/\+/ig,'%2B') //不加上这串字符，在页面无法显示的哦
|
||
|
||
_this.uploadImgList.unshift(base64)
|
||
}
|
||
})
|
||
})
|
||
}
|
||
},
|
||
});
|
||
},
|
||
|
||
submitMsg() {
|
||
let _this = this
|
||
if(this.pageMsg.ispost) return
|
||
if(this.saveMsg.auditExplain.trim().length==0) {
|
||
uni.showToast({
|
||
title:'请输入异常原因',
|
||
icon: 'none'
|
||
})
|
||
return
|
||
}
|
||
if(_this.detailMsg.Different_Price<0 && _this.uploadImgList.length==0) {
|
||
uni.showToast({
|
||
title:'请上传凭证',
|
||
icon: 'none'
|
||
})
|
||
return
|
||
}
|
||
if(this.saveMsg.isAddIn && _this.saveMsg.addAmout==='0') {
|
||
uni.showToast({
|
||
title:'补入金额需大于零',
|
||
icon: 'none'
|
||
})
|
||
return
|
||
}
|
||
uni.showLoading({
|
||
title: '正在提交...',
|
||
mask: true,
|
||
})
|
||
if(this.saveMsg.isAddIn && !_this.saveMsg.addAmout){
|
||
_this.saveMsg.addAmout = Math.abs(_this.detailMsg.Different_Price)
|
||
}else if(!this.saveMsg.isAddIn){
|
||
_this.saveMsg.addAmout = 0
|
||
}
|
||
this.saveMsg.imageInfo = this.uploadImgList.join('|')
|
||
this.$request.$webPost('Audit/UpLoadAuditExplain',this.saveMsg).then(res=>{
|
||
|
||
if(res.Result_Code!==100) {
|
||
|
||
uni.showToast({
|
||
title: res.Result_Desc,
|
||
icon: 'none'
|
||
})
|
||
}else{
|
||
uni.showToast({
|
||
title: res.Result_Desc,
|
||
icon: 'success',
|
||
success() {
|
||
_this.getDetail()
|
||
_this.shouldReLoadingList(true)
|
||
}
|
||
})
|
||
|
||
_this.detailMsg.CheckAccount_Desc = _this.saveMsg.auditExplain
|
||
|
||
|
||
}
|
||
})
|
||
|
||
},
|
||
toVideoView(){
|
||
let auditT = (new Date(this.detailMsg.Audit_Time)).getTime()
|
||
let { VideoSerno,token,ChannelID }=this.detailMsg.videoModel
|
||
let bt = formateT(auditT-2*60*1000)
|
||
let et = formateT(auditT+2*60*1000)
|
||
|
||
// this.$util.toNextRoute('navigateTo', `/pages/webview/webview?name=video&sc=${VideoSerno}&&hd=${ChannelID}&bt=${bt}&et=${et}&token=${token}`)
|
||
this.$util.toNextRoute('navigateTo', `/pages/severpartVideo/severpartVideo?sc=${VideoSerno}&&hd=${ChannelID}&bt=${bt}&et=${et}&token=${token}`)
|
||
// `F79721547/1.rec?begin=20210603211700&end=20210603233159`
|
||
function formateT(dd){
|
||
dd = new Date(dd)// 获取AddDayCount天后的日期
|
||
let type = 'YYYY-MM-DD hh:mm:ss' //
|
||
let y = dd.getFullYear()
|
||
let m = (dd.getMonth() + 1) < 10 ? '0' + (dd.getMonth() + 1) : (dd.getMonth() + 1) // 获取当前月份的日期，不足10补0
|
||
let d = dd.getDate() < 10 ? '0' + dd.getDate() : dd.getDate() // 获取当前几号，不足10补0
|
||
let h = dd.getHours() < 10 ? '0' + dd.getHours() : dd.getHours()
|
||
let mi = dd.getMinutes() < 10 ? '0' + dd.getMinutes() : dd.getMinutes()
|
||
let s = dd.getSeconds() < 10 ? '0' + dd.getSeconds() : dd.getSeconds()
|
||
return type.replace('YYYY', y).replace('MM', m).replace('DD', d).replace('hh', h).replace('mm', mi).replace('ss', s)
|
||
}
|
||
}
|
||
},
|
||
onLoad(option) {
|
||
let _this = this
|
||
uni.showLoading({
|
||
title:'正在加载'
|
||
})
|
||
this.pageMsg.id = option.id
|
||
this.saveMsg.CheckAccount_Id = option.id
|
||
this.getDetail()
|
||
|
||
},
|
||
|
||
onUnload() {
|
||
this.$util.addUserBehavior()
|
||
|
||
}
|
||
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.page-body {
|
||
min-height: 100%;
|
||
padding: 40rpx 25rpx;
|
||
background-color: #fff;
|
||
box-sizing: border-box;
|
||
padding-bottom: 196rpx;
|
||
}
|
||
|
||
.audit-card {
|
||
border-radius: 10rpx;
|
||
width: 700rpx;
|
||
/* height: 165rpx; */
|
||
background: linear-gradient(to right , #8998bb 0%, #a9b5d2 100%);
|
||
color: #FFFFFF;
|
||
|
||
}
|
||
.card-header {
|
||
padding: 24rpx 16rpx;
|
||
}
|
||
.card-header h3 {
|
||
padding-bottom: 10rpx;
|
||
font-size: 30rpx;
|
||
}
|
||
.card-header .fs12 >text {
|
||
font-size: 24rpx;
|
||
|
||
}
|
||
|
||
h4 {
|
||
font-size: 26rpx;
|
||
margin-top: 38rpx;
|
||
margin-bottom: 26rpx;
|
||
color: #000;
|
||
position: relative;
|
||
clear: all;
|
||
}
|
||
.video-btn {
|
||
color: #2c3e50;
|
||
font-size: 25rpx;
|
||
float: right;
|
||
margin-top: 2rpx;
|
||
}
|
||
.uni-icon-arrowright {
|
||
font-size: 26rpx;
|
||
}
|
||
.ico-yd {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
.ico-yd::after {
|
||
content: '';
|
||
background-image: url('/static/images/contract/htsp_mobile.png');
|
||
margin-right: 0rpx;
|
||
height: 24rpx;
|
||
width: 36rpx;
|
||
background-position: center right;
|
||
display: block;
|
||
margin-right: 6rpx;
|
||
background-repeat: no-repeat;
|
||
background-size: contain;
|
||
background-position: center;
|
||
}
|
||
.main-card {
|
||
width: 700rpx;
|
||
color: #74838E;
|
||
background: #f8f9fa;
|
||
border-radius: 10rpx;
|
||
font-size: 26rpx;
|
||
padding: 24rpx 16rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.main-card view> view{
|
||
flex: 1;
|
||
|
||
}
|
||
.main-card p + p, .main-card >view+ view{
|
||
margin-top: 16rpx;
|
||
|
||
}
|
||
|
||
.main-card view> text,.main-card view> p,.card-content-title {
|
||
font-size: 26rpx;
|
||
/* white-space: nowrap; */
|
||
}
|
||
|
||
.main-card view> text:nth-child(2),
|
||
.card-content-text >p{
|
||
color: #000;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
overflow: hidden;
|
||
min-width: 76rpx;
|
||
text-align: right;
|
||
max-width: 204rpx;
|
||
/* height: 46rpx; */
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.main-card view > p.price-num,.main-card view > text.price-num {
|
||
color: #DD6060;
|
||
}
|
||
.main-card.desc {
|
||
padding-right: 0;
|
||
margin-bottom: 16rpx;
|
||
}
|
||
.main-card.desc text {
|
||
padding-right: 16rpx;
|
||
}
|
||
/* */
|
||
.imgList {
|
||
flex-wrap: wrap;
|
||
margin-top: 36rpx;
|
||
}
|
||
.imgList li {
|
||
max-width: 139rpx;
|
||
height: 139rpx;
|
||
border-radius: 8rpx;
|
||
border: 2rpx solid #eee;
|
||
margin-right: 28rpx;
|
||
margin-top: 28rpx;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.imgList image {
|
||
width: 137rpx;
|
||
height: 137rpx;
|
||
border-radius: 8rpx;
|
||
}
|
||
|
||
.uni-icon-checkmarkempty {
|
||
color: #91A6D7;
|
||
font-size: 40rpx;
|
||
margin-right: 8rpx;
|
||
}
|
||
/* 稽核反馈输入 */
|
||
|
||
.feedback {
|
||
width: 100%;
|
||
height: 150rpx;
|
||
padding: 20rpx 20rpx 0 20rpx;
|
||
box-sizing: border-box;
|
||
background: #f8f9fa;
|
||
border-radius: 14rpx 14rpx 0 0;
|
||
|
||
}
|
||
textarea {
|
||
margin-top: 36rpx;
|
||
}
|
||
checkbox-group {
|
||
width: 232rpx;
|
||
}
|
||
.checkbox-text {
|
||
font-size: 26rpx;
|
||
color: #8A9DCA;
|
||
|
||
}
|
||
.add-amout {
|
||
border: 1rpx solid #f9f9f9;
|
||
width: 136rpx;
|
||
height: 58rpx;
|
||
color: #91A6D7;
|
||
font-size: 24rpx;
|
||
border-radius: 9rpx;
|
||
margin-left: 12rpx;
|
||
line-height: 60rpx;
|
||
text-align: right;
|
||
padding-right: 8rpx;
|
||
box-shadow: 0px 0px 6rpx 0px rgba(221,228,243,0.75);
|
||
}
|
||
.add-amout input {
|
||
width: 80%;
|
||
color: #333;
|
||
font-size: 30rpx;
|
||
height: 58rpx;
|
||
line-height: 50rpx;
|
||
min-height: 58rpx;
|
||
padding: 0;
|
||
padding-right: 4rpx;
|
||
/* border: 1px solid #111; */
|
||
}
|
||
.img-box {
|
||
background: #f8f9fa;
|
||
padding: 20rpx 0 20rpx 20rpx;
|
||
border-radius: 0 0 14rpx 14rpx;
|
||
}
|
||
.upload-file-container {
|
||
display: flex;
|
||
align-items: center;
|
||
width: 100%;
|
||
/* min-height: 260rpx; */
|
||
box-sizing: border-box;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.upload-file-add-container {
|
||
position: relative;
|
||
border: 1rpx solid #ccc;
|
||
width: 136rpx;
|
||
height: 137rpx;
|
||
border-radius: 6rpx;
|
||
margin-bottom: 16rpx;
|
||
}
|
||
.upload-file-add-container::before {
|
||
content: '';
|
||
display: block;
|
||
position: absolute;
|
||
left: 40rpx;
|
||
top: 50%;
|
||
height: 2rpx;
|
||
background-color: #ccc;
|
||
width: 60rpx;
|
||
}
|
||
.upload-file-add-container::after {
|
||
content: '';
|
||
display: block;
|
||
position: absolute;
|
||
left: 50%;
|
||
top: 40rpx;
|
||
width: 2rpx;
|
||
height: 60rpx;
|
||
background-color: #ccc;
|
||
}
|
||
|
||
|
||
.upload-file-unit {
|
||
position: relative;
|
||
width: 137rpx;
|
||
height: 136rpx;
|
||
margin-right: 32rpx;
|
||
margin-bottom: 16rpx;
|
||
border-radius: 8rpx;
|
||
border: 2rpx solid #ccc;
|
||
}
|
||
|
||
.upload-file-unit image {
|
||
width: 136rpx;
|
||
height: 136rpx;
|
||
border-radius: 8rpx;
|
||
}
|
||
|
||
.upload-file-remove {
|
||
position: absolute;
|
||
top: -14rpx;
|
||
right: -12rpx;
|
||
display: inline-block;
|
||
width: 37rpx;
|
||
height: 37rpx;
|
||
line-height: 30rpx;
|
||
background-color: #ff0000;
|
||
color: #ffffff;
|
||
font-size: 30rpx;
|
||
border-radius: 50%;
|
||
text-align: center;
|
||
z-index: 1;
|
||
}
|
||
/* end */
|
||
.page-bottom {
|
||
width: 750rpx;
|
||
padding: 42rpx 0 43rpx 0;
|
||
background: #f8f9fb;
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
}
|
||
.main-btn {
|
||
margin: 0 auto;
|
||
border-radius: 44rpx;
|
||
width: 510rpx;
|
||
height: 88rpx;
|
||
line-height: 88rpx;
|
||
padding: 0;
|
||
text-align: center;
|
||
background: linear-gradient( to right ,#8998bb 0%, #8a99bc 100%);
|
||
color: #fff;
|
||
font-size: 26rpx;
|
||
|
||
}
|
||
.main-btn image {
|
||
width: 31rpx;
|
||
height: 30rpx;
|
||
margin-right: 16rpx;
|
||
}
|
||
checkbox .wx-checkbox-input {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
}
|
||
|
||
</style>
|