340 lines
7.1 KiB
Vue
340 lines
7.1 KiB
Vue
<template>
|
||
<view class="page-body">
|
||
<view v-if="pageStep==1">
|
||
<view class="feedback-box">
|
||
<textarea v-model="saveMsg.auditExplain" placeholder="在此输入稽核异常的原因（必填）" class="feedback" placeholder-style="color:#CCCCCC;"/>
|
||
<checkbox-group @change="changeState">
|
||
<label class="checkbox">
|
||
<checkbox :value="saveMsg.isAddIn" checked /><text class="checkbox-text">本次{{pageType==1 ? '长款已补齐流水':'短款已补入现金'}}</text>
|
||
</label>
|
||
</checkbox-group>
|
||
</view>
|
||
<view class="btn-box">
|
||
<button type="default" class="main-btn" @click="nextStep ">提交</button>
|
||
|
||
</view>
|
||
</view>
|
||
<view class="photo-box" v-else-if="pageType==0 && pageStep==2">
|
||
<h4>上传短款凭证照片</h4>
|
||
<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="showImg(index)" />
|
||
</div>
|
||
<div class="upload-file-add" @click="chooseImage">
|
||
<div class="upload-file-add-container">
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<view class="uni-flex btn-box">
|
||
|
||
<button type="default" class="stip-btn" @tap="submitMsg">跳过</button>
|
||
<button type="default" class="push-btn" @tap="submitMsg">提交</button>
|
||
</view>
|
||
</view>
|
||
<view class="success-box" v-else>
|
||
<image src="/static/images/success.png" mode="aspectFit"></image>
|
||
<h2>稽核反馈提交成功！</h2>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {mapGetters,mapMutations} from 'vuex'
|
||
export default {
|
||
data(){
|
||
return {
|
||
uploadImgList: [],
|
||
pageType: '',
|
||
pageStep: 1,
|
||
saveMsg: {
|
||
CheckAccount_Id: '',
|
||
auditExplain: '',
|
||
isAddIn: true,
|
||
imageInfo: ''
|
||
}
|
||
}
|
||
},
|
||
methods: {
|
||
changeState(e){
|
||
|
||
this.saveMsg.isAddIn = e.detail.value.length>0 ? true : false
|
||
},
|
||
deleteImgFunc(index) {
|
||
this.uploadImgList.splice(index,1)
|
||
},
|
||
showImg(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) => {
|
||
// console.log(data)
|
||
// this.src = data.tempFilePaths[0]
|
||
|
||
if(data.tempFilePaths.length>0) {
|
||
// let list = []
|
||
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') //不加上这串字符，在页面无法显示的哦
|
||
|
||
// list.unshift(base64)
|
||
_this.uploadImgList.unshift(base64)
|
||
}
|
||
})
|
||
})
|
||
|
||
}
|
||
|
||
},
|
||
|
||
|
||
});
|
||
},
|
||
nextStep(){
|
||
if(this.pageType==1) { //长款直接提交
|
||
this.submitMsg()
|
||
}else {
|
||
if(this.saveMsg.auditExplain.trim().length==0) {
|
||
uni.showToast({
|
||
title:'请输入异常原因',
|
||
icon: 'none'
|
||
})
|
||
return
|
||
}
|
||
this.pageStep=2
|
||
|
||
}
|
||
},
|
||
submitMsg() {
|
||
let _this = this
|
||
if(this.saveMsg.auditExplain.trim().length==0) {
|
||
uni.showToast({
|
||
title:'请输入异常原因',
|
||
icon: 'none'
|
||
})
|
||
return
|
||
}
|
||
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{
|
||
_this.pageStep = 3
|
||
setTimeout(function(){
|
||
uni.navigateBack({
|
||
delta:1
|
||
})
|
||
uni.$emit('cashAudit',true)
|
||
},1500)
|
||
}
|
||
})
|
||
// console.log(this.saveMsg)
|
||
}
|
||
},
|
||
onLoad(option) {
|
||
this.pageType = option.type
|
||
this.saveMsg.CheckAccount_Id = option.id
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.page-body {
|
||
height:100%;
|
||
}
|
||
.feedback-box {
|
||
padding: 20rpx 52rpx;
|
||
|
||
}
|
||
.feedback {
|
||
width: 656rpx;
|
||
height: 354rpx;
|
||
padding: 20rpx;
|
||
box-sizing: border-box;
|
||
background: #ffffff;
|
||
border-radius: 14rpx;
|
||
margin-bottom: 28rpx;
|
||
}
|
||
|
||
.checkbox-text {
|
||
font-size: 26rpx;
|
||
color: #8A9DCA;
|
||
}
|
||
.main-btn {
|
||
margin: 72rpx auto;
|
||
border-radius: 43rpx;
|
||
height: 86rpx;
|
||
line-height: 86rpx;
|
||
padding: 0;
|
||
text-align: center;
|
||
width: 656rpx;
|
||
background: linear-gradient(to left, #8a9dca 0%, #8998bb 98%, #8a99bc 100%);
|
||
color: #fff;
|
||
font-size: 30rpx;
|
||
}
|
||
h3 {
|
||
font-size: 32rpx;
|
||
color: #1A1E24;
|
||
}
|
||
.photo-box {
|
||
padding: 40rpx 30rpx;
|
||
background-color: #fff;
|
||
height: 100%;
|
||
box-sizing: border-box;
|
||
}
|
||
.btn-box {
|
||
|
||
position: fixed;
|
||
bottom: 0;
|
||
left:0 ;
|
||
width: 100%;
|
||
padding: 42rpx 0 90rpx 0;
|
||
background: #f8f9fb;
|
||
box-sizing: border-box;
|
||
}
|
||
.stip-btn {
|
||
width: 277rpx;
|
||
height: 86rpx;
|
||
color: #8998bb;
|
||
line-height: 86rpx;
|
||
border: 1rpx solid #8998bb;
|
||
border-radius: 43rpx;
|
||
text-align: center;
|
||
font-size: 30rpx;
|
||
|
||
}
|
||
.push-btn {
|
||
width: 277rpx;
|
||
height: 86rpx;
|
||
color: #fff;
|
||
line-height: 86rpx;
|
||
background: #8a9dca ;
|
||
border-radius: 43rpx;
|
||
text-align: center;
|
||
font-size: 30rpx;
|
||
}
|
||
|
||
.upload-file-container{
|
||
display: flex;
|
||
/* flex-flow: row wrap; */
|
||
/* justify-content: flex-start; */
|
||
align-items: center;
|
||
width: 100%;
|
||
/* padding: 20rpx; */
|
||
min-height: 260rpx;
|
||
box-sizing: border-box;
|
||
flex-wrap: wrap;
|
||
}
|
||
.upload-file-add{
|
||
width: 130rpx;
|
||
height: 126rpx;
|
||
margin-right: 16rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
.upload-file-add-container{
|
||
|
||
position: relative;
|
||
border: 1rpx solid #ccc;
|
||
width: 136rpx;
|
||
height: 137rpx;
|
||
border-radius: 6rpx;
|
||
/* margin-top: 15rpx; */
|
||
}
|
||
.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-add-img{
|
||
margin-top: 10rpx;
|
||
font-size: 24rpx;
|
||
color: #919191;
|
||
}
|
||
.upload-file-unit {
|
||
position: relative;
|
||
width: 137rpx;
|
||
height: 136rpx;
|
||
margin-right: 36rpx;
|
||
margin-top: 16rpx;
|
||
border-radius: 8rpx;
|
||
border: 2rpx solid #ccc;
|
||
|
||
}
|
||
|
||
.upload-file-unit image {
|
||
width: 135rpx;
|
||
height: 134rpx;
|
||
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;
|
||
}
|
||
/* 成功弹出框 */
|
||
.success-box {
|
||
padding-top: 198rpx;
|
||
|
||
text-align: center;
|
||
}
|
||
.success-box h2 {
|
||
font-size: 38rpx;
|
||
color: #364656;
|
||
}
|
||
|
||
.success-box image {
|
||
width: 406rpx;
|
||
height: 320rpx;
|
||
margin-bottom: 30rpx;
|
||
}
|
||
</style>
|