589 lines
14 KiB
Vue
589 lines
14 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>稽核时间：{{$util.cutDate(detailMsg.Audit_Time,'YYYY/MM/DD hh:mm:ss') }}</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>稽核反馈</h4>
|
||
<template v-if="detailMsg.CheckAccount_Desc">
|
||
<view class="main-card desc" >
|
||
|
||
<text >
|
||
{{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" :placeholder="pageMsg.placeAmout" :placeholder-style="{'color':'#C5C4C4','line-height':'56rpx'}" @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" v-if="detailMsg.Different_Price <0">
|
||
|
||
<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,
|
||
placeAmout: ""
|
||
},
|
||
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
|
||
},
|
||
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
|
||
_this.getWidth(res.Result_Data)
|
||
_this.pageMsg.placeAmout = (Math.abs( res.Result_Data.Different_Price)).toFixed(2)
|
||
_this.pageMsg.isShow = true
|
||
}
|
||
uni.hideLoading()
|
||
})
|
||
},
|
||
// 图片预览
|
||
showImg(index) {
|
||
uni.previewImage( {
|
||
urls: this.imageList,
|
||
current: index,
|
||
loop: true,
|
||
indicator: 'number'
|
||
});
|
||
},
|
||
|
||
changeState(e){
|
||
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.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: '正在提交...',
|
||
icon:'none'
|
||
})
|
||
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'
|
||
})
|
||
|
||
_this.getDetail()
|
||
_this.shouldReLoadingList(true)
|
||
|
||
_this.ispost = false
|
||
}
|
||
})
|
||
|
||
}
|
||
},
|
||
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;
|
||
}
|
||
|
||
.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-box {
|
||
|
||
}
|
||
.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: 312rpx;
|
||
}
|
||
.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>
|