255 lines
12 KiB
Vue
255 lines
12 KiB
Vue
<template>
|
||
<view>
|
||
<view style="margin-bottom: 16px; padding: 12px; background: #fff8e8; color: #8a5a00; line-height: 1.7;">
|
||
<view>服务提供方（卖家）：请于系统确认支付方已依照协议或约定支付对应订单款项后，再启动对应服务。申请款项付款方在系统端完成划款授权确认操作后，款项到账时间约为工作日T+1，请届时查询确认。</view>
|
||
<view style="margin-top: 8px;">服务需求方（买家）：请于依照交易规则和协议完成对应服务验收后，再在系统端完成对应申请款项的授权确认操作，系统默认确认时限为72小时（含工作日，届时系统仅提供信息提醒服务），请及时完成该项确认。若您届时未确认且未提出正当异议，系统将默认您已收货或同意支付申请。</view>
|
||
</view>
|
||
<view class="rounded shadow p-10 mb-40" v-for="(item, index) in payList" :key="index">
|
||
<view class="mb-10">支付类目: {{ item.type }}</view>
|
||
<view class="mb-10">支付金额: {{ item.amount }}元</view>
|
||
<view class="mb-10">
|
||
<template v-if="!item.buyerRefuse">
|
||
<text v-if="item.isSeller && !item.hasPaid">待买方支付</text>
|
||
<view v-else-if="item.paidVoucher">
|
||
<el-image :src="item.paidVoucher[0]" style="width: 120rpx; height: 120rpx" fit="cover"
|
||
:preview-src-list="item.paidVoucher"/>
|
||
</view>
|
||
<view v-else-if="!item.paidVoucher">
|
||
<text>未上传凭证</text>
|
||
</view>
|
||
</template>
|
||
<text v-else class="text-main">买家已拒绝: {{ item.refuseReason }}</text>
|
||
</view>
|
||
<view class="mb-10">备注: {{ item.remark ? item.remark : '无' }}</view>
|
||
<view class="mb-10">买家备注: {{ item.buyerRemark ? item.buyerRemark : '无' }}</view>
|
||
<view class="mb-10">凭证:
|
||
<template v-if="item.photos && item.photos.length > 0">
|
||
<el-image v-for="(photo, photoIndex) in item.photos" :key="photoIndex"
|
||
:src="typeof photo === 'string' ? photo : photo.url"
|
||
style="width: 80px; height: 80px; margin-right: 8px;" fit="cover"
|
||
:preview-src-list="item.photos.map(p => typeof p === 'string' ? p : p.url)"/>
|
||
</template>
|
||
<text v-else>无</text>
|
||
</view>
|
||
<view class="mb-10">附件:
|
||
<template v-if="item.ext && item.ext.length > 0">
|
||
<el-image v-for="(file, fileIndex) in item.ext" :key="fileIndex"
|
||
:src="typeof file === 'string' ? file : file.url"
|
||
style="width: 80px; height: 80px; margin-right: 8px;" fit="cover"
|
||
:preview-src-list="item.ext.map(p => typeof p === 'string' ? p : p.url)"/>
|
||
</template>
|
||
<text v-else>无</text>
|
||
</view>
|
||
<view class="mb-10">状态:
|
||
<text v-if="!item.hasPaid && !item.buyerRefuse">待上传凭证</text>
|
||
<text v-if="!item.sellerConfirm && item.hasPaid">待确认收款</text>
|
||
<text v-if="item.sellerConfirm && item.hasPaid">已完成</text>
|
||
</view>
|
||
<view v-if="!item.buyerRefuse" class="flex justify-end items-center">
|
||
<view class="mx-15">
|
||
<u-button plain type="primary" size="mini" @click="showPay(item)"
|
||
v-if="item.status === 0 && item.isBuyer && !item.hasPaid">上传支付凭证
|
||
</u-button>
|
||
</view>
|
||
<view class="mx-15">
|
||
<u-button type="primary" size="mini" class="mx-20" @click="confirmPay(item)"
|
||
v-if="item.hasPaid && item.isSeller && !item.sellerConfirm">
|
||
确认收款
|
||
</u-button>
|
||
</view>
|
||
<view class="mx-15">
|
||
<u-button plain type="primary" size="mini" class="mx-20" @click="paidRefuse(item)"
|
||
v-if="item.isBuyer && item.status === 0 && item.paidVoucher.length === 0">
|
||
驳回
|
||
</u-button>
|
||
</view>
|
||
</view>
|
||
<view>
|
||
<span>我方状态:</span>
|
||
<template v-if="item.isSeller">
|
||
<span v-if="!item.hasPaid && !item.buyerRefuse">待上传凭证</span>
|
||
<span v-if="!item.sellerConfirm && item.hasPaid">待确认收款</span>
|
||
<span v-if="item.sellerConfirm && item.hasPaid">已完成</span>
|
||
</template>
|
||
<template v-if="item.isBuyer">
|
||
<span v-if="!item.hasPaid && !item.buyerRefuse">待上传凭证</span>
|
||
<span v-if="!item.sellerConfirm && item.hasPaid">完成支付</span>
|
||
<span v-if="item.sellerConfirm && item.hasPaid">已完成</span>
|
||
</template>
|
||
</view>
|
||
<view>
|
||
<span>对方状态:</span>
|
||
<!-- 自己是卖家则对方是买家-->
|
||
<template v-if="item.isSeller">
|
||
<span v-if="!item.hasPaid && !item.buyerRefuse">待上传凭证</span>
|
||
<span v-if="!item.sellerConfirm && item.hasPaid">完成支付</span>
|
||
<span v-if="item.sellerConfirm && item.hasPaid">已完成</span>
|
||
</template>
|
||
<template v-if="item.isBuyer">
|
||
<span v-if="!item.hasPaid && !item.buyerRefuse">待上传凭证</span>
|
||
<span v-if="!item.sellerConfirm && item.hasPaid">待确认收款</span>
|
||
<span v-if="item.sellerConfirm && item.hasPaid">已完成</span>
|
||
</template>
|
||
</view>
|
||
</view>
|
||
<u-button @click="close()">关闭</u-button>
|
||
<el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="100%" append-to-body="">
|
||
<template v-if="dialogVisible && dialogType === 'do-pay'">
|
||
<div class="font-bold">支付金额: {{ payInfo.amount }}元</div>
|
||
<el-form ref="form" label-width="80px">
|
||
<el-form-item label="支付凭证" required>
|
||
<u-upload
|
||
multiple
|
||
:fileList="payInfo.paidVoucher"
|
||
@afterRead="afterRead($event, 'paidVoucher')"
|
||
@delete="deletePic($event, 'paidVoucher')"
|
||
width="120rpx"
|
||
height="120rpx"
|
||
></u-upload>
|
||
</el-form-item>
|
||
<el-form-item label="备注">
|
||
<el-input v-model="payInfo.buyerRemark"/>
|
||
</el-form-item>
|
||
<el-form-item label="图片">
|
||
<u-upload
|
||
multiple
|
||
:fileList="payInfo.buyerPhotos"
|
||
@afterRead="afterRead($event, 'buyerPhotos')"
|
||
@delete="deletePic($event, 'buyerPhotos')"
|
||
width="120rpx"
|
||
height="120rpx"
|
||
></u-upload>
|
||
</el-form-item>
|
||
</el-form>
|
||
<el-row>
|
||
<el-col :text="24" class="text-center">
|
||
<el-button type="primary" size="mini" @click="uploadPayVoucher">提交</el-button>
|
||
<el-button type="warning" size="mini" @click="dialogVisible = false">取消
|
||
</el-button>
|
||
</el-col>
|
||
</el-row>
|
||
</template>
|
||
</el-dialog>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import ExpressInfo from "./expressInfo.vue";
|
||
import Goods from "./goods.vue";
|
||
import SetExpress from "./setExpress.vue";
|
||
import MakePay from "./makePay.vue";
|
||
import dayjs from "dayjs";
|
||
|
||
export default {
|
||
name: "payList",
|
||
components: {MakePay, SetExpress, Goods, ExpressInfo},
|
||
props: {
|
||
payList: {
|
||
type: Array,
|
||
default: []
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
dialogVisible: false,
|
||
dialogType: '',
|
||
dialogTitle: '',
|
||
payInfo: {
|
||
amount: '',
|
||
paidVoucher: [],
|
||
buyerRemark: '',
|
||
buyerPhotos: []
|
||
}
|
||
}
|
||
},
|
||
methods: {
|
||
showPay(item) {
|
||
this.payInfo = item;
|
||
this.payInfo.amount = ''
|
||
this.payInfo.paidVoucher = []
|
||
this.payInfo.buyerRemark = ''
|
||
this.payInfo.buyerPhotos = []
|
||
this.dialogTitle = '支付'
|
||
this.dialogType = 'do-pay';
|
||
this.dialogVisible = true;
|
||
},
|
||
async confirmPay({_id, type}) {
|
||
await vk.callFunction({
|
||
url: 'client/order/kh/paidConfirm',
|
||
title: '请求中...',
|
||
data: {
|
||
id: _id
|
||
}
|
||
})
|
||
this.$message({
|
||
type: 'success',
|
||
message: '确认成功'
|
||
})
|
||
if (['尾款', '货到付款'].includes(type)) this.$emit('refresh', '4')
|
||
else this.$emit('refresh')
|
||
},
|
||
paidRefuse({_id}) {
|
||
uni.showModal({
|
||
title: '请输入驳回理由',
|
||
content: '',
|
||
editable: true,
|
||
success: async res => {
|
||
if (res.confirm) {
|
||
await vk.callFunction({
|
||
url: 'client/order/kh/payRefuse',
|
||
title: '请求中...',
|
||
data: {
|
||
id: _id,
|
||
refuseReason: res.content,
|
||
}
|
||
})
|
||
this.$emit('refresh')
|
||
this.$message({
|
||
type: 'success',
|
||
message: '驳回成功'
|
||
})
|
||
}
|
||
}
|
||
})
|
||
},
|
||
async uploadPayVoucher() {
|
||
if (this.payInfo.paidVoucher.length === 0) return this.$message.error('请上传支付凭证')
|
||
if (this.payInfo.paidVoucher && this.payInfo.paidVoucher.length > 0) this.payInfo.paidVoucher = this.payInfo.paidVoucher.map(i => i.url)
|
||
if (this.payInfo.buyerPhotos && this.payInfo.buyerPhotos.length > 0) this.payInfo.buyerPhotos = this.payInfo.buyerPhotos.map(i => i.url)
|
||
await vk.callFunction({
|
||
url: 'client/order/kh/uploadPayVoucher',
|
||
title: '请求中...',
|
||
data: this.payInfo
|
||
})
|
||
this.$message({
|
||
type: 'success',
|
||
message: '上传成功'
|
||
})
|
||
this.$emit('refresh')
|
||
this.dialogVisible = false
|
||
},
|
||
close() {
|
||
this.$emit('close')
|
||
},
|
||
afterRead({file}, field) {
|
||
file.forEach(item => {
|
||
uniCloud.uploadFile({
|
||
filePath: item.url,
|
||
cloudPath: dayjs().format('YYYY/MM/DD') + '/' + item.name,
|
||
success: ({fileID}) => {
|
||
uniCloud.getTempFileURL({
|
||
fileList: [fileID]
|
||
}).then(res => {
|
||
this.payInfo[field].push({url: res.fileList[0].tempFileURL})
|
||
})
|
||
}
|
||
})
|
||
})
|
||
},
|
||
deletePic({index}, field) {
|
||
this.payInfo[field].splice(index, 1)
|
||
},
|
||
}
|
||
}
|
||
</script>
|