huangqizhen
/
gold-vue
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

9.26更新代码

milestone-20250913-现金管理
ZhangYong 2 weeks ago
parent
5ff3493269
commit
df5f91ae6c
1 changed files with 312 additions and 242 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 554
      src/views/moneyManage/receiveDetail/receiveDetail.vue

554
src/views/moneyManage/receiveDetail/receiveDetail.vue
View File

@ -122,11 +122,12 @@
<el-table-column fixed="right" label="操作" width="100px" v-if="activeTab != 'reject'">
<template #default=scope>
<span v-if="kefu && scope.row.orderStatus == '已通过'" style="color: #FA5A1E;">退款</span>
<span v-else-if="kefu && scope.row.orderStatus == '已撤回'" style="color: #2741DE;">编辑</span>
<span v-else-if="activeTab == 'wait'&& !kefu" style="color: #2741DE;">审核</span>
<span v-else-if="activeTab == 'pass'&& !kefu" style="color: #2741DE;">编辑</span>
<span v-else-if="kefu && scope.row.orderStatus == '已撤回'"
style="color: #2741DE;">编辑</span>
<span v-else-if="activeTab == 'wait' && !kefu" style="color: #2741DE;">审核</span>
<span v-else-if="activeTab == 'pass' && !kefu" style="color: #2741DE;" @click="openEditForm">编辑</span>
</template>
</el-table-column>
</el-table-column>
</el-table>
</div>
<div class="pagination">
@ -190,281 +191,350 @@
</span>
</template>
</el-dialog>
<!-- 编辑弹窗 -->
<el-dialog class="adddialog" v-model="editFormisible" width="20vw" :before-close="closeEditForm">
<el-form class="addForm" label-width="4vw" label-position="left">
<el-form-item label="精网号" required>
<el-input v-model="addFormData.jwcode" placeholder="请输入驳回理由" />
</el-form-item>
<el-form-item label="客户姓名" required>
<el-input v-model="addFormData.userName" placeholder="请输入客户姓名" />
</el-form-item>
<el-form-item label="所属地区" required>
<el-input disabled="true" v-model="addFormData.market" placeholder="请输入所属地区" />
</el-form-item>
<el-form-item label="活动名称" required>
<el-input v-model="addFormData.jwcode" placeholder="请输入活动名称" />
</el-form-item>
<el-form-item label="产品名称" required>
<el-select placeholder="请选择产品名称" clearable></el-select>
</el-form-item>
<el-form-item label="付款币种" required>
<el-select placeholder="请选择付款币种" clearable></el-select>
</el-form-item>
<el-form-item label="付款金额" required>
<el-input v-model="addFormData.jwcode" placeholder="请输入付款金额" />
</el-form-item>
<el-form-item label="支付方式" required>
<el-select placeholder="请选择支付方式" clearable></el-select>
</el-form-item>
<el-form-item label="付款时间" required>
<el-time-picker v-model="addFormData.time" placeholder="请选择付款时间" />
</el-form-item>
<el-form-item label="转账凭证" required>
<el-upload ref="uploadRef" class="uploader" :show-file-list="false" list-type="picture-card"
:auto-upload="false" :before-upload="beforeUpload" :on-error="handelImgErr"
:on-change="handleImageChange" :http-request="customUpload">
<img v-if="addFormData.imageUrl" :src="addFormData.imageUrl" class="avatar"
style="height: 100%; width: 100%; object-fit: cover;" />
<el-icon v-else class="avatar-uploader-icon">
<Plus />
</el-icon>
</el-upload>
</el-form-item>
<el-form-item label="驳回理由" required>
<el-input v-model="addFormData.mask" type="textarea" :rows="4" placeholder="请输入驳回理由" maxlength="200"
show-word-limit />
</el-form-item>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button style="background-color: #7E91FF;" @click="closeEditForm">取消</el-button>
<el-button style="background-color: #2741DE; margin-left: 2.5vw;" type="primary"
@click="handleReject">确定</el-button>
</span>
</template>
</el-dialog>
</div>
</template>
<script setup>
import { ref } from 'vue';
import { ElMessage } from 'element-plus'
import API from '@/util/http.js'
//==================== 标签切换 =========================
const activeTab = ref('wait')
const navigateTo = (tab) => {
if (tab === 'wait') {
activeTab.value = 'wait'
} else if (tab === 'pass') {
activeTab.value = 'pass'
}
else if (tab === 'reject') {
activeTab.value = 'reject'
}
}
const kefu = ref(true)
const caiwu = ref(true)
const checkKefu = () => {
kefu.value = true
caiwu.value = false
}
const checkCaiwu = () => {
kefu.value = false
caiwu.value = true
}
//================= 客服新增弹窗 ==================
const addFormData = ref({
})
const addFormisible = ref(false)
const uploadRef = ref()
const openAddForm = () => {
addFormisible.value = true
}
const closeAddForm = () => {
addFormisible.value = false
addFormData.value = {}
}
const handleImgSuccess = (response, uploadFile) => {
try {
console.log('11', response)
addFormData.value.imageUrl = response.data.url
console.log('22', response.data.url)
} catch (error) {
console.log('报错信息', error)
ElMessage.error(response.msg || '图片上传失败')
}
<script setup>
import { ref } from 'vue';
import { ElMessage } from 'element-plus'
import API from '@/util/http.js'
//==================== 标签切换 =========================
const activeTab = ref('wait')
const navigateTo = (tab) => {
if (tab === 'wait') {
activeTab.value = 'wait'
} else if (tab === 'pass') {
activeTab.value = 'pass'
}
const handelImgErr = (err) => {
console.log(err);
addFormData.value.imageUrl = null
ElMessage.error("图片上传失败")
else if (tab === 'reject') {
activeTab.value = 'reject'
}
const beforeUpload = (rawFile) => {
if (rawFile.type !== 'image/jpeg' && rawFile.type !== 'image/png') {
ElMessage.error('图片必须是jpg或png类型!')
return false
} else if (rawFile.size / 1024 / 1024 > 1) {
ElMessage.error('图片大小不能超过 1MB!')
return false
}
return true
}
const kefu = ref(true)
const caiwu = ref(true)
const checkKefu = () => {
kefu.value = true
caiwu.value = false
}
const checkCaiwu = () => {
kefu.value = false
caiwu.value = true
}
//================= 客服新增弹窗 ==================
const addFormData = ref({
})
const addFormisible = ref(false)
const uploadRef = ref()
const openAddForm = () => {
addFormisible.value = true
}
const closeAddForm = () => {
addFormisible.value = false
addFormData.value = {}
}
const handleImgSuccess = (response, uploadFile) => {
try {
console.log('11', response)
addFormData.value.imageUrl = response.data.url
console.log('22', response.data.url)
} catch (error) {
console.log('报错信息', error)
ElMessage.error(response.msg || '图片上传失败')
}
const handleImageChange = (file) => {
uploadRef.value.submit()
}
const handelImgErr = (err) => {
console.log(err);
addFormData.value.imageUrl = null
ElMessage.error("图片上传失败")
}
const beforeUpload = (rawFile) => {
if (rawFile.type !== 'image/jpeg' && rawFile.type !== 'image/png') {
ElMessage.error('图片必须是jpg或png类型!')
return false
} else if (rawFile.size / 1024 / 1024 > 1) {
ElMessage.error('图片大小不能超过 1MB!')
return false
}
const customUpload = async (options) => {
try {
const formData = new FormData()
formData.append('file', options.file)
const response = await API({
url: 'https://api.homilychart.com/hljw/api/aws/upload',
method: 'POST',
data: formData,
headers: {
'Content-Type': 'multipart/form-data'
}
})
if (response.code === 200 && response.data) {
handleImgSuccess(response, options.file)
ElMessage.success(response.msg || '上传成功')
} else {
options.onError(response)
ElMessage.error(response.msg || '上传失败')
return true
}
const handleImageChange = (file) => {
uploadRef.value.submit()
}
const customUpload = async (options) => {
try {
const formData = new FormData()
formData.append('file', options.file)
const response = await API({
url: 'https://api.homilychart.com/hljw/api/aws/upload',
method: 'POST',
data: formData,
headers: {
'Content-Type': 'multipart/form-data'
}
} catch (error) {
console.error('上传错误:', error)
ElMessage.error(`上传失败: ${error.msg || error.message || '网络异常'}`)
})
if (response.code === 200 && response.data) {
handleImgSuccess(response, options.file)
ElMessage.success(response.msg || '上传成功')
} else {
options.onError(response)
ElMessage.error(response.msg || '上传失败')
}
} catch (error) {
console.error('上传错误:', error)
ElMessage.error(`上传失败: ${error.msg || error.message || '网络异常'}`)
}
//========================分页相关==================
const pageInfo = ref({
pageSize: 10,
pageNum: 1
})
const total = ref(0)
const tableData = [
{
jwcode: 'HW2023001',
name: '张三',
market: '北京',
activity: '春季促销活动',
rateName: '黄金投资产品A',
money: '人民币',
permanentGold: '5000.00',
freeGold: '银行转账',
remark: '2023-03-15 10:30:00',
voucher: 'https://example.com/images/voucher1.jpg',
orderStatus: '待审核',
},
{
jwcode: 'HW2023002',
name: '李四',
market: '上海',
activity: '夏日特惠活动',
rateName: '白银理财产品B',
money: '人民币',
permanentGold: '3000.00',
freeGold: '支付宝',
remark: '2023-06-20 14:15:00',
voucher: 'https://example.com/images/voucher2.jpg',
orderStatus: '已通过',
},
{
jwcode: 'HW2023003',
name: '王五',
market: '广州',
activity: '秋季回馈活动',
rateName: '铂金收藏产品C',
money: '美元',
permanentGold: '1000.00',
freeGold: '微信支付',
remark: '2023-09-10 09:20:00',
voucher: '',
orderStatus: '已撤回',
},
{
jwcode: 'HW2023004',
name: '赵六',
market: '深圳',
activity: '冬季感恩活动',
rateName: '钻石尊享产品D',
money: '欧元',
permanentGold: '2000.00',
freeGold: '信用卡',
remark: '2023-12-05 16:40:00',
voucher: 'https://example.com/images/voucher4.jpg',
orderStatus: '已驳回',
rejectReason: '无',
},
{
jwcode: 'HW2023005',
name: '孙七',
market: '成都',
activity: '周年庆典活动',
rateName: '翡翠投资产品E',
money: '人民币',
permanentGold: '8000.00',
freeGold: '银行转账',
remark: '2024-01-20 11:10:00',
voucher: '',
orderStatus: '已驳回',
}
];
}
//================== 编辑相关 =========================
const editFormData = ref({
})
const editFormisible = ref(false)
const openEditForm = () => {
editFormisible.value = true
}
const closeEditForm = () => {
editFormisible.value = false
editFormData.value = {}
}
//========================分页相关==================
const pageInfo = ref({
pageSize: 10,
pageNum: 1
})
const total = ref(0)
const tableData = [
{
jwcode: 'HW2023001',
name: '张三',
market: '北京',
activity: '春季促销活动',
rateName: '黄金投资产品A',
money: '人民币',
permanentGold: '5000.00',
freeGold: '银行转账',
remark: '2023-03-15 10:30:00',
voucher: 'https://example.com/images/voucher1.jpg',
orderStatus: '待审核',
},
{
jwcode: 'HW2023002',
name: '李四',
market: '上海',
activity: '夏日特惠活动',
rateName: '白银理财产品B',
money: '人民币',
permanentGold: '3000.00',
freeGold: '支付宝',
remark: '2023-06-20 14:15:00',
voucher: 'https://example.com/images/voucher2.jpg',
orderStatus: '已通过',
},
{
jwcode: 'HW2023003',
name: '王五',
market: '广州',
activity: '秋季回馈活动',
rateName: '铂金收藏产品C',
money: '美元',
permanentGold: '1000.00',
freeGold: '微信支付',
remark: '2023-09-10 09:20:00',
voucher: '',
orderStatus: '已撤回',
},
{
jwcode: 'HW2023004',
name: '赵六',
market: '深圳',
activity: '冬季感恩活动',
rateName: '钻石尊享产品D',
money: '欧元',
permanentGold: '2000.00',
freeGold: '信用卡',
remark: '2023-12-05 16:40:00',
voucher: 'https://example.com/images/voucher4.jpg',
orderStatus: '已驳回',
rejectReason: '无',
},
{
jwcode: 'HW2023005',
name: '孙七',
market: '成都',
activity: '周年庆典活动',
rateName: '翡翠投资产品E',
money: '人民币',
permanentGold: '8000.00',
freeGold: '银行转账',
remark: '2024-01-20 11:10:00',
voucher: '',
orderStatus: '已驳回',
}
];
</script>
<style scoped lang="scss">
.content {
height: 100%;
width: 83vw;
<style scoped lang="scss">
.content {
height: 100%;
width: 83vw;
.card1 {
width: 100%;
.card1 {
width: 100%;
.row {
height: 4vh;
width: 80vw;
display: flex;
min-height: 40px;
.row {
height: 4vh;
width: 80vw;
.rowItem {
display: flex;
min-height: 40px;
.rowItem {
display: flex;
width: 15vw;
align-items: center;
justify-content: center;
margin-right: 0.5vw;
}
width: 15vw;
align-items: center;
justify-content: center;
margin-right: 0.5vw;
}
.buttons {
display: flex;
justify-content: center;
align-items: center;
margin-left: 10px;
}
.buttons {
display: flex;
justify-content: center;
align-items: center;
margin-left: 10px;
}
}
}
.card2 {
width: 100%;
margin-top: 2vh;
.card2 {
width: 100%;
.btns {
display: flex;
align-items: center;
justify-content: space-between;
padding-bottom: 10px;
margin-top: 2vh;
.tabs {
min-width: 300px;
.btns {
display: flex;
align-items: center;
justify-content: space-between;
padding-bottom: 10px;
.btnItem {
margin-left: 10px;
border-radius: 5px;
}
}
.tabs {
min-width: 300px;
.btnAdd {
margin-right: 5vw;
padding-left: 10px;
.btnItem {
margin-left: 10px;
border-radius: 5px;
}
}
.btnAdd {
margin-right: 5vw;
padding-left: 10px;
}
}
.table {
margin: 10px 3vw;
border-radius: 20px;
}
.pagination {
margin-top: 10px;
padding: 10px 10px;
}
.table {
margin: 10px 3vw;
border-radius: 20px;
}
:deep(.adddialog) {
min-width: 450px;
background-color: #F3FAFE !important;
margin-top: 10vh;
.addForm {
padding: 0 3vw 1vh 1vw;
.pagination {
margin-top: 10px;
padding: 10px 10px;
}
}
.el-date-editor {
display: flex;
flex: 1;
:deep(.adddialog) {
min-width: 450px;
background-color: #F3FAFE !important;
margin-top: 10vh;
}
}
.addForm {
padding: 0 3vw 1vh 1vw;
.dialog-footer {
.el-date-editor {
display: flex;
justify-content: center;
padding-bottom: 1.5vh;
flex: 1;
}
}
:deep(.adddialog .el-form-item__label) {
min-width: 80px;
width: auto;
font-weight: 800;
padding-bottom: 15px;
.dialog-footer {
display: flex;
justify-content: center;
padding-bottom: 1.5vh;
}
}
:deep(.adddialog .el-form-item__label) {
min-width: 80px;
width: auto;
font-weight: 800;
padding-bottom: 15px;
}
}
</style>
Write Preview
Loading…
Cancel
Save