You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
huazhiyu/pages/my/singleIncome.vue

504 lines
12 KiB

<template>
<view v-if="incomeDetail !== ''" class="single-page">
<view v-if="!incomeDetail.id" style="text-align: center;padding-top: 40vh;">暂无数据</view>
<view v-if="incomeDetail.type === 2" class="info" style="padding: 10px 0 10px 10px;position: relative;">
<view style="padding-bottom: 5px;">付款人{{incomeDetail.buyer.nickname}}</view>
<view style="padding-bottom: 5px;">联系电话{{incomeDetail.buyer.mobile}}</view>
<view>付款金额{{incomeDetail.amount}}</view>
<view v-if="incomeDetail.pay_voucher" class="saveBtn other-btn" style="background-color: orange;border: 0;" @click="lookPic">支付凭证</view>
<view class="saveBtn other-btn" style="top: 50px !important" @click="sureIncome">确认收款</view>
</view>
<view v-if="incomeDetail.type === 1" class="info">
<!-- <view class="title">测试优先公司</view> -->
<view>收款人{{incomeDetail.seller.nickname}} <text style="padding-left: 30px;">付款金额{{incomeDetail.amount}}</text></view>
</view>
<view v-if="incomeDetail.type === 1" class="tabs">
<view :class="activeIndex==item.id?'tabsItem active':'tabsItem'" @click="getPay(item)" v-for="item in list4" :key="item.id">
{{item.name}}
</view>
</view>
<view v-if="incomeDetail.type === 1" >
<view class="yhk" v-show="activeIndex==1">
<view class="list-input">
<view class="title">
<text>银行卡姓名</text>
</view>
<view class="content">
<text>{{incomeDetail.seller.bank_realname}}</text>
<image
v-clipboard:copy="incomeDetail.seller.bank_realname"
    v-clipboard:success="(type) => onCopyResult('success')"
    v-clipboard:error="(type) => onCopyResult('error')"
src="../../static/image/copy.png" mode="widthFix"></image>
</view>
</view>
<view class="list-input">
<view class="title">
<text>卡号</text>
</view>
<view class="content" >
<text>{{incomeDetail.seller.bank_no}}</text>
<image
v-clipboard:copy="incomeDetail.seller.bank_no"
    v-clipboard:success="(type) => onCopyResult('success')"
    v-clipboard:error="(type) => onCopyResult('error')"
src="../../static/image/copy.png" mode="widthFix"></image>
</view>
</view>
<view class="list-input">
<view class="title">
<text>开户行</text>
</view>
<view class="content">
<text>{{incomeDetail.seller.bank_address}}</text>
<image
v-clipboard:copy="incomeDetail.seller.bank_address"
    v-clipboard:success="(type) => onCopyResult('success')"
    v-clipboard:error="(type) => onCopyResult('error')"
src="../../static/image/copy.png" mode="widthFix"></image>
</view>
</view>
<view class="list-input">
<view class="title">
<text>支行</text>
</view>
<view class="content">
<text>{{incomeDetail.seller.bank_sub_address}}</text>
<image
v-clipboard:copy="incomeDetail.seller.bank_sub_address"
    v-clipboard:success="(type) => onCopyResult('success')"
    v-clipboard:error="(type) => onCopyResult('error')"
src="../../static/image/copy.png" mode="widthFix"></image>
</view>
</view>
</view>
<view v-show="activeIndex!=1" class="ping-zheng">
<image v-show="activeIndex==2" style="width: 60%;height: 110px;" :src="incomeDetail.buyer.alipay_image||''" mode="aspectFit" ></image>
<image v-show="activeIndex==3" style="width: 60%;height: 110px;" :src="incomeDetail.buyer.wechat_image||''" mode="aspectFit" ></image>
<view>收款码</view>
</view>
<view class="ping-zheng">
<u-upload
:fileList="finishImageList"
:previewFullImage="false"
@afterRead="afterRead"
width="50" height="50"
style="display: none;"
ref="upload"
name="1"
></u-upload>
<image style="width: 40%;height: 70px;" :src="finishImageList[0].url" v-if="finishImageList.length>0" @click="uploadPingzheng" mode="aspectFit"></image>
<image style="width: 40%;height: 70px;" src="/static/image/up_img.png" v-else mode="aspectFit" @click="uploadPingzheng"></image>
<view>上传凭证</view>
</view>
</view>
<view v-if="incomeDetail.type === 1" class="saveBtn" @click="submit">提交</view>
<u-popup :show="show" mode="bottom" @close="close" round="10" >
<view style="padding:24rpx;max-height:calc(60vh);overflow: auto;">
<u-parse :content="content" style="margin-top:45px;"></u-parse>
</view>
</u-popup>
<u-toast ref="uToast"></u-toast>
</view>
</template>
<script>
import {getToken} from '@/common/auth.js'
import {incomeDetail,privacyPolicy,submitPingzheng,confirmPay} from '@/common/api.js'
export default {
data() {
return {
finishImageList:[],
fileList1: [],
num:0,
id:null,
show:false,
content:'',
activeIndex:1,
list4: [{
name: '银行卡',
id:1
}, {
name: '支付宝',
id:2
}, {
name: '微信',
id:3
}],
yhk:{
bank_realname:null,
bank_mobile:null,
bank_no:null,
bank_address:null,
},
pingzhengUrl:'',
wxurl:'',
// incomeDetail: '',
};
},
props:{
incomeDetail:{
type: Object,
defalut: () => {}
}
},
onShow() {
this.getOrderDetails()
},
methods:{
submit(){
if(this.finishImageList.length === 0){
this.$refs.uToast.show({
message:'请上传支付凭证'
})
return;
}
this.$emit('submit',{
id: this.incomeDetail.id,
pay_voucher: this.finishImageList[0].url
})
// submitPingzheng({
// id: this.incomeDetail.id,
// pay_voucher: this.finishImageList[0].url
// }).then(res => {
// console.log(res,'res')
// if(res.code === 1){
// this.$refs.uToast.show({
// message:'已上传'
// })
// const tem = setTimeout(() => {
// uni.navigateBack({
// delta:1
// })
// clearTimeout(tem)
// },1000)
// }
// })
},
uploadPingzheng(){
this.finishImageList = []
this.$refs.upload.chooseFile()
},
// 新增图片
async afterRead(event) {
// 当设置 multiple 为 true 时, file 为数组格式,否则为对象格式
let lists = [].concat(event.file)
let fileListLen = this[`fileList${event.name}`].length
lists.map((item) => {
this[`fileList${event.name}`].push({
...item,
status: 'uploading',
message: '上传中'
})
})
for (let i = 0; i < lists.length; i++) {
const result = await this.uploadFilePromise(lists[i].url)
// this.avatarUrl = JSON.parse(result).data.fullurl;
// this.avatarUrl_short = JSON.parse(result).data.url;
// updateUserInfo({avatar:this.avatarUrl}).then(res=>{
// this.$refs.uToast.show({
// message:'修改头像成功'
// })
// })
}
},
//上传照片
uploadFilePromise(url) {
uni.showLoading({
title: '上传中'
})
return new Promise((resolve, reject) => {
let a = uni.uploadFile({
url: this.baseUrl+'api/common/upload',
filePath: url,
name: 'file',
header:{
token:getToken()
},
formData: {
},
success: (res) => {
if(JSON.parse(res.data).code==1){
setTimeout(() => {
uni.hideLoading();
this.finishImageList = [{url:JSON.parse(res.data).data.fullurl,path:JSON.parse(res.data).data.url}]
console.log(this.finishImageList, 'this.finishImageList')
resolve(res.data)
}, 1000)
}else{
uni.hideLoading();
uni.$u.toast(JSON.parse(res.data).msg)
resolve(res.data)
}
},
fail: (res) => {
uni.hideLoading();
console.log(res,"rrr")
}
});
})
},
sureIncome(){
this.$emit('sureIncome', {
id: this.incomeDetail.id,
})
// confirmPay({
// id: this.incomeDetail.id,
// }).then(res => {
// if(res.code === 1){
// this.$refs.uToast.show({
// message:'确认收款'
// })
// const tem = setTimeout(() => {
// uni.navigateBack({
// delta:1
// })
// clearTimeout(tem)
// },1000)
// }
// })
},
lookPic(){
uni.previewImage({
urls: [this.incomeDetail.pay_voucher],
success: (res) => {
}
});
},
getPay(item){
this.activeIndex = item.id;
},
onCopyResult(type) {
    if (type==='success') {
this.$refs.uToast.show({
message:'复制成功'
})
    } else {
this.$refs.uToast.show({
message:'复制失败'
})
    }
},
getOrderDetails(){
incomeDetail({custom: { auth: true }}).then(res=>{
console.log(res, 'res');
if(res.data.length > 0){
this.incomeDetail = res.data[0]
if(this.incomeDetail.pay_voucher){
this.finishImageList = [{url:this.incomeDetail.pay_voucher,path:this.incomeDetail.pay_voucher}]
}
}else{
this.incomeDetail = {}
}
})
},
close() {
this.show = false
},
getText(){
privacyPolicy({id:4}).then(res=>{
this.content = res.data.content
})
},
},
destroyed() {
},
watch:{
}
}
</script>
<style scoped lang="scss">
.info{
padding: 10px 0 20px 10px;
background: #fff;
.title{
text-align: center;
color: #e0e00e;
margin-bottom: 10px;
}
}
.ping-zheng{
margin-top: 20px;
background-color: #fff;
text-align: center;
padding: 30px 0;
// image{
// img{
// width: 50% !important;
// height: 50% !important;
// }
// }
}
.single-page{
// min-height:calc(100vh - 45px);
background-color: #f5f5f5;
padding:24rpx;
.tabs{
height: 80rpx;
background-color: rgb(35, 96, 48);
padding: 6rpx;
border-radius: 5px;
display: flex;
.tabsItem{
flex:1;
text-align: center;
line-height: 70rpx;
font-size: 26rpx;
color: #ffffff;
}
.active{
background-color: #fff;
font-size: 30rpx;
font-weight: bold;
border-radius: 5px;
color: rgb(35, 96, 48);
}
}
.yhk{
width: 100%;
background-color: #FFFFFF;
margin-top:20rpx;
border-radius: 10px;
.list-input{
display: flex;
align-items: center;
padding: 0 4%;
height: 100rpx;
border-bottom: 2rpx solid #f6f6f6;
.title{
display: flex;
align-items: center;
width: 30%;
height: 100%;
text{
color: #236030;
font-size: 26rpx;
}
}
image{
margin-left:10rpx;
width:30rpx;
height:auto;
}
.content{
display: flex;
align-items: center;
width: 70%;
height: 100%;
justify-content: space-between;
input{
width: 100%;
height: 100%;
font-size: 26rpx;
color: #222222;
}
}
}
.yzmBtn{
background: rgb(35, 96, 48);
color: rgb(255, 255, 255);
margin-bottom: 5px;
padding: 0px;
width: 126px;
overflow: hidden;
font-size: 14px;
height: 38px;
line-height: 38px;
color: #fff;
text-align: center;
border-radius:10rpx;
}
}
.saveBtn{
background: rgb(35, 96, 48);
color: rgb(255, 255, 255);
border: 1px solid rgb(35, 96, 48);
overflow: hidden;
font-size: 28rpx;
height: 44px;
line-height: 44px;
text-align: center;
border-radius: 10rpx;
margin-top:50rpx;
}
.input-info{
padding: 0 6%;
.info{
display: flex;
align-items:center;
justify-content: space-between;
width: 100%;
height: 100rpx;
border-bottom: 2rpx solid #f6f6f6;
input{
width: 70%;
height: 100%;
font-size: 26rpx;
color: #222222;
}
.more{
display: flex;
align-items: center;
justify-content: flex-end;
width: 30%;
height: 100%;
.iconfont{
font-size: 34rpx;
}
.mo{
font-size: 26rpx;
padding-left: 20rpx;
margin-left: 10rpx;
border-left: 2rpx solid #EEEEEE;
}
}
}
}
}
.zfb{
text-align: center;
image{
width:200rpx;
height:200rpx;
margin:100rpx auto;
}
.mesInfo{
margin-top: 26rpx;
font-size: 26rpx;
color: #999;
}
}
.other-btn{
width: 75px !important;
height: 30px !important;
font-size: 13px !important;
line-height: 30px !important;
position: absolute !important;
right: 10px;
top: 10px !important;
margin-top: 0px !important;
}
</style>