Merge branch 'master' of http://git.njrzwl.cn:3000/wangmingchuan/yanzong_vue_store
fanfan
2 months ago
commit
6596fdfa77
@ -0,0 +1,135 @@ |
||||
<template> |
||||
<a-modal |
||||
:title="title" |
||||
:width="560" |
||||
:visible="visible" |
||||
:isLoading="isLoading" |
||||
:confirmLoading="isLoading" |
||||
:maskClosable="false" |
||||
@ok="handleSubmit" |
||||
@cancel="handleCancel" |
||||
> |
||||
<a-spin :spinning="isLoading"> |
||||
<a-form v-if="visible" :form="form"> |
||||
<a-form-item label="支付状态" :labelCol="labelCol" :wrapperCol="wrapperCol"> |
||||
<a-tag>待支付</a-tag> |
||||
</a-form-item> |
||||
<a-form-item label="支付金额" :labelCol="labelCol" :wrapperCol="wrapperCol"> |
||||
<span>{{ record.pay_price }}</span> |
||||
</a-form-item> |
||||
<a-form-item label="赠送金额" :labelCol="labelCol" :wrapperCol="wrapperCol"> |
||||
<span>{{ record.gift_money }}</span> |
||||
</a-form-item> |
||||
<template v-if="record.platform === 'H5'"> |
||||
<a-form-item label="付款人姓名" :labelCol="labelCol" :wrapperCol="wrapperCol"> |
||||
<span>{{ record.payer_name }}</span> |
||||
</a-form-item> |
||||
<a-form-item label="付款人电话" :labelCol="labelCol" :wrapperCol="wrapperCol"> |
||||
<span>{{ record.payer_phone }}</span> |
||||
</a-form-item> |
||||
<!-- <a-form-item label="支付凭证" :labelCol="labelCol" :wrapperCol="wrapperCol"> |
||||
</a-form-item> --> |
||||
</template> |
||||
<a-form-item label="审核状态" :labelCol="labelCol" :wrapperCol="wrapperCol"> |
||||
<a-radio-group v-decorator="['audit_status', { initialValue: 10, rules: [{ required: true }] }]"> |
||||
<a-radio :value="10">同意</a-radio> |
||||
<a-radio :value="20">拒绝</a-radio> |
||||
</a-radio-group> |
||||
</a-form-item> |
||||
<a-form-item |
||||
v-if="form.getFieldValue('audit_status') == 20" |
||||
label="拒绝理由" |
||||
:labelCol="labelCol" |
||||
:wrapperCol="wrapperCol" |
||||
> |
||||
<Ueditor v-decorator="['refuse_desc', { rules: [{ required: true, message: '请输入拒绝理由' }] }]" /> |
||||
</a-form-item> |
||||
</a-form> |
||||
</a-spin> |
||||
</a-modal> |
||||
</template> |
||||
|
||||
<script> |
||||
import * as Api from '@/api/user/recharge' |
||||
import { Ueditor } from '@/components' |
||||
|
||||
export default { |
||||
components: { |
||||
Ueditor, |
||||
}, |
||||
data() { |
||||
return { |
||||
// 对话框标题 |
||||
title: '支付订单审核', |
||||
// 标签布局属性 |
||||
labelCol: { span: 7 }, |
||||
// 输入框布局属性 |
||||
wrapperCol: { span: 13 }, |
||||
// modal(对话框)是否可见 |
||||
visible: false, |
||||
// modal(对话框)确定按钮 loading |
||||
isLoading: false, |
||||
// 当前表单元素 |
||||
form: this.$form.createForm(this), |
||||
// 退货地址列表 |
||||
addressList: [], |
||||
// 当前记录 |
||||
record: {}, |
||||
} |
||||
}, |
||||
methods: { |
||||
// 显示对话框 |
||||
show(record) { |
||||
// 显示窗口 |
||||
this.visible = true |
||||
// 当前记录 |
||||
this.record = record |
||||
// 更新form元素 |
||||
this.$nextTick(() => { |
||||
console.log( this.record) |
||||
this.$forceUpdate() |
||||
}) |
||||
}, |
||||
|
||||
// 确认按钮 |
||||
handleSubmit(e) { |
||||
e.preventDefault() |
||||
// 表单验证 |
||||
const { |
||||
form: { validateFields }, |
||||
} = this |
||||
validateFields((errors, values) => { |
||||
// 提交到后端api |
||||
!errors && this.onFormSubmit(values) |
||||
}) |
||||
}, |
||||
|
||||
// 关闭对话框事件 |
||||
handleCancel() { |
||||
this.visible = false |
||||
this.form.resetFields() |
||||
}, |
||||
|
||||
// 提交到后端api |
||||
onFormSubmit(values) { |
||||
this.isLoading = true |
||||
console.log(values); |
||||
Api.audit({ rechargeOrderId: this.record.order_id, form: values }) |
||||
.then((result) => { |
||||
// 显示成功 |
||||
this.$message.success(result.message, 1.5) |
||||
// 关闭对话框事件 |
||||
this.handleCancel() |
||||
// 通知父端组件提交完成了 |
||||
this.$emit('handleSubmit', values) |
||||
}) |
||||
.finally(() => (this.isLoading = false)) |
||||
}, |
||||
}, |
||||
} |
||||
</script> |
||||
<style lang="less" scoped> |
||||
.ant-form-item { |
||||
margin-bottom: 10px; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,198 @@ |
||||
<template> |
||||
<div> |
||||
<!-- 加载中 --> |
||||
<a-spin :spinning="isLoading" /> |
||||
<!-- 售后单内容 --> |
||||
<div v-if="!isLoading" class="detail-content"> |
||||
<!-- 售后单信息 --> |
||||
<a-card :bordered="false"> |
||||
<!-- 订单操作 --> |
||||
<!-- <div v-if="record.pay_status !== 20" class="detail-actions"> |
||||
<div class="ant-descriptions-title">充值操作</div> |
||||
<div class="actions mt-10"> |
||||
<div> |
||||
<a-button type="primary" @click="handleAudit" |
||||
>充值审核</a-button |
||||
> |
||||
</div> |
||||
</div> |
||||
</div> --> |
||||
<!-- 售后单信息 --> |
||||
<a-descriptions title="会员信息"> |
||||
<a-descriptions-item v-if="record.user.user_id" label="会员ID"> |
||||
<span>{{ record.user.user_id }}</span> |
||||
</a-descriptions-item> |
||||
<a-descriptions-item v-if="record.user.avatar_url || record.user.avatar" label="会员头像"> |
||||
<img |
||||
:src="record.user.avatar_url || record.user.avatar.preview_url" |
||||
alt="会员头像" |
||||
/> |
||||
</a-descriptions-item> |
||||
<a-descriptions-item label="名 称"> |
||||
<span>{{ record.user.nick_name }}</span> |
||||
</a-descriptions-item> |
||||
<a-descriptions-item label="手机号"> |
||||
<span>{{ record.user.mobile }}</span> |
||||
</a-descriptions-item> |
||||
<a-descriptions-item label="归属地"> |
||||
<span>{{ JSON.parse(record.user.homelocation).prov }} {{ JSON.parse(record.user.homelocation).city }}</span> |
||||
</a-descriptions-item> |
||||
</a-descriptions> |
||||
<a-descriptions title="充值信息" :column="3"> |
||||
<a-descriptions-item label="订单号"> |
||||
<span |
||||
>{{ record.order_no }}</span |
||||
> |
||||
</a-descriptions-item> |
||||
<a-descriptions-item label="支付状态"> |
||||
<a-tag :color="record.pay_status == 20 ? 'green' : '' ">{{ record.pay_status == 20 ? '已支付' : '待支付' }}</a-tag> |
||||
</a-descriptions-item> |
||||
<a-descriptions-item label="支付金额"> |
||||
<span>{{ record.pay_price }}</span> |
||||
</a-descriptions-item> |
||||
<a-descriptions-item label="赠送金额"> |
||||
<span>{{ record.gift_money }}</span> |
||||
</a-descriptions-item> |
||||
<a-descriptions-item label="付款时间"> |
||||
<span>{{ record.pay_time }}</span> |
||||
</a-descriptions-item> |
||||
<a-descriptions-item label="创建时间"> |
||||
<span>{{ record.create_time }}</span> |
||||
</a-descriptions-item> |
||||
<a-descriptions-item v-if="record.payer_name" label="付款人姓名" :span="1"> |
||||
<span>{{ record.payer_name }}</span> |
||||
</a-descriptions-item> |
||||
<a-descriptions-item v-if="record.payer_phone" label="付款人电话" :span="2"> |
||||
<span>{{ record.payer_phone }}</span> |
||||
</a-descriptions-item> |
||||
<a-descriptions-item v-if="record.upload_images.length > 0" label="支付凭证" :span="3"> |
||||
<div class="image-list"> |
||||
<div v-for="item in record.upload_images" :key="item.image_id" class="file-item"> |
||||
<a :href="item.preview_url" target="_blank"> |
||||
<div class="img-cover" :style="{ backgroundImage: `url('${item.preview_url}')` }"></div> |
||||
</a> |
||||
</div> |
||||
</div> |
||||
</a-descriptions-item> |
||||
<a-descriptions-item v-if="record.audit_status" label="审核状态"> |
||||
<a-tag :color="record.audit_status == 10 ? 'green' : (record.audit_status == 20 ? 'red' : '')">{{ record.audit_status == 10 ? '审核通过' : (record.audit_status == 20 ? '拒绝' : '') }}</a-tag> |
||||
</a-descriptions-item> |
||||
</a-descriptions> |
||||
<a-divider class="o-divider" /> |
||||
</a-card> |
||||
</div> |
||||
<AuditForm ref="AuditForm" @handleSubmit="handleRefresh" /> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import * as Api from '@/api/user/recharge' |
||||
import AuditForm from './AuditForm.vue' |
||||
|
||||
|
||||
export default { |
||||
name: 'Index', |
||||
components: { |
||||
AuditForm, |
||||
}, |
||||
data() { |
||||
return { |
||||
// 正在加载 |
||||
isLoading: true, |
||||
// 支付订单ID |
||||
rechargeOrderId: null, |
||||
// 支付订单详情 |
||||
record: {}, |
||||
} |
||||
}, |
||||
created() { |
||||
// 记录售后单ID |
||||
this.rechargeOrderId = this.$route.query.rechargeOrderId |
||||
// 刷新页面 |
||||
this.handleRefresh() |
||||
}, |
||||
methods: { |
||||
// 刷新页面 |
||||
handleRefresh() { |
||||
// 获取当前记录 |
||||
this.getDetail() |
||||
}, |
||||
|
||||
// 获取当前记录 |
||||
getDetail() { |
||||
const { rechargeOrderId } = this |
||||
this.isLoading = true |
||||
console.log(Api.detail, rechargeOrderId); |
||||
Api.detail({ rechargeOrderId }) |
||||
.then((result) => { |
||||
// 当前记录 |
||||
this.record = result.data.detail |
||||
// 商品列表 |
||||
this.goodsList = [this.record.orderGoods] |
||||
}) |
||||
.finally(() => (this.isLoading = false)) |
||||
}, |
||||
|
||||
// 商家审核 |
||||
handleAudit() { |
||||
const { record } = this |
||||
this.$refs.AuditForm.show(record) |
||||
}, |
||||
}, |
||||
} |
||||
</script> |
||||
<style lang="less" scoped> |
||||
// 售后单详情页 |
||||
.detail-content { |
||||
margin-bottom: 70px; |
||||
|
||||
/deep/.ant-descriptions-item > span { |
||||
vertical-align: middle; |
||||
} |
||||
|
||||
/deep/.ant-descriptions-item-content { |
||||
padding-left: 3px; |
||||
} |
||||
.detail-actions { |
||||
margin-bottom: 20px; |
||||
} |
||||
|
||||
// 商品列表 |
||||
.goods-list { |
||||
/deep/table { |
||||
table-layout: auto; |
||||
} |
||||
} |
||||
// 操作栏 |
||||
.actions { |
||||
button { |
||||
margin-right: 8px; |
||||
} |
||||
} |
||||
|
||||
// 预览图列表 |
||||
.image-list { |
||||
// 文件元素 |
||||
.file-item { |
||||
position: relative; |
||||
float: left; |
||||
width: 120px; |
||||
height: 120px; |
||||
position: relative; |
||||
padding: 2px; |
||||
border: 1px solid #ddd; |
||||
background: #fff; |
||||
margin-right: 12px; |
||||
.img-cover { |
||||
display: block; |
||||
width: 100%; |
||||
height: 100%; |
||||
background: no-repeat center center / 100%; |
||||
} |
||||
&:hover { |
||||
border: 1px solid #a7c3de; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
Loading…
Reference in new issue