|
@ -1,61 +1,87 @@ |
|
|
<template> |
|
|
<template> |
|
|
<div class="content"> |
|
|
<div class="content"> |
|
|
<el-card style="margin-bottom: 0.5vh; min-height: 110px;"> |
|
|
|
|
|
<div class="row"> |
|
|
|
|
|
<div class="rowItem"> |
|
|
|
|
|
<el-text style="width: 4vw;">精网号</el-text> |
|
|
|
|
|
<el-input placeholder="请输入精网号" style="width:10vw;" clearable></el-input> |
|
|
|
|
|
</div> |
|
|
|
|
|
<div class="rowItem"> |
|
|
|
|
|
<text style="width: 4vw;">客户姓名</text> |
|
|
|
|
|
<el-input placeholder="请输入客户姓名" style="width:10vw;" clearable></el-input> |
|
|
|
|
|
</div> |
|
|
|
|
|
<div class="rowItem"> |
|
|
|
|
|
<text style="width: 4vw;">所属地区</text> |
|
|
|
|
|
<el-select placeholder="请选择所属地区" style="width:10vw;" clearable></el-select> |
|
|
|
|
|
</div> |
|
|
|
|
|
<div class="rowItem"> |
|
|
|
|
|
<text style="width: 4vw;">订单状态</text> |
|
|
|
|
|
<el-select placeholder="请选择订单状态" style="width: 10vw;" clearable></el-select> |
|
|
|
|
|
</div> |
|
|
|
|
|
<div class="rowItem"> |
|
|
|
|
|
<text style="width: 4vw;">支付方式</text> |
|
|
|
|
|
<el-select placeholder="请选择支付方式" style="width: 10vw;" clearable></el-select> |
|
|
|
|
|
</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
<div class="row" style="margin-top: 10px;"> |
|
|
|
|
|
<div class="rowItem"> |
|
|
|
|
|
<text style="width: 4vw;">活动名称</text> |
|
|
|
|
|
<el-select placeholdert="请选择活动方式" style="width: 10vw;" clearable></el-select> |
|
|
|
|
|
</div> |
|
|
|
|
|
<div class="rowItem"> |
|
|
|
|
|
<text style="width: 4vw;">产品名称</text> |
|
|
|
|
|
<el-select placeholder="请选择产品名称" style="width: 10vw;" clearable></el-select> |
|
|
|
|
|
|
|
|
<div class="card1"> |
|
|
|
|
|
<el-card style="margin-bottom: 0.5vh; min-height: 110px;"> |
|
|
|
|
|
<div class="row"> |
|
|
|
|
|
<div class="rowItem"> |
|
|
|
|
|
<el-text style="width: 4vw;">精网号</el-text> |
|
|
|
|
|
<el-input placeholder="请输入精网号" style="width:10vw;" clearable></el-input> |
|
|
|
|
|
</div> |
|
|
|
|
|
<div class="rowItem"> |
|
|
|
|
|
<text style="width: 4vw;">客户姓名</text> |
|
|
|
|
|
<el-input placeholder="请输入客户姓名" style="width:10vw;" clearable></el-input> |
|
|
|
|
|
</div> |
|
|
|
|
|
<div class="rowItem"> |
|
|
|
|
|
<text style="width: 4vw;">所属地区</text> |
|
|
|
|
|
<el-select placeholder="请选择所属地区" style="width:10vw;" clearable></el-select> |
|
|
|
|
|
</div> |
|
|
|
|
|
<div class="rowItem"> |
|
|
|
|
|
<text style="width: 4vw;">订单状态</text> |
|
|
|
|
|
<el-select placeholder="请选择订单状态" style="width: 10vw;" clearable></el-select> |
|
|
|
|
|
</div> |
|
|
|
|
|
<div class="rowItem"> |
|
|
|
|
|
<text style="width: 4vw;">支付方式</text> |
|
|
|
|
|
<el-select placeholder="请选择支付方式" style="width: 10vw;" clearable></el-select> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="rowItem" style="width: 30vw"> |
|
|
|
|
|
<text style="width: 4vw; margin-left: 0.5vw;">付款时间</text> |
|
|
|
|
|
<el-date-picker v-model="getTime" type="datetimerange" range-separator="至" start-placeholder="起始时间" |
|
|
|
|
|
end-placeholder="结束时间" style="width: 22vw; " @change="handleDatePickerChange" |
|
|
|
|
|
:default-time="defaultTime" :disabled-date="disabledDate" /> |
|
|
|
|
|
|
|
|
<div class="row" style="margin-top: 10px;"> |
|
|
|
|
|
<div class="rowItem"> |
|
|
|
|
|
<text style="width: 4vw;">活动名称</text> |
|
|
|
|
|
<el-select placeholdert="请选择活动方式" style="width: 10vw;" clearable></el-select> |
|
|
|
|
|
</div> |
|
|
|
|
|
<div class="rowItem"> |
|
|
|
|
|
<text style="width: 4vw;">产品名称</text> |
|
|
|
|
|
<el-select placeholder="请选择产品名称" style="width: 10vw;" clearable></el-select> |
|
|
|
|
|
</div> |
|
|
|
|
|
<div class="rowItem" style="width: 30vw"> |
|
|
|
|
|
<text style="width: 4vw; margin-left: 0.5vw;">付款时间</text> |
|
|
|
|
|
<el-date-picker v-model="getTime" type="datetimerange" range-separator="至" |
|
|
|
|
|
start-placeholder="起始时间" end-placeholder="结束时间" style="width: 22vw; " |
|
|
|
|
|
@change="handleDatePickerChange" :default-time="defaultTime" |
|
|
|
|
|
:disabled-date="disabledDate" /> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="row" style="margin-top: 10px;"> |
|
|
|
|
|
<div class="buttons"> |
|
|
|
|
|
<el-button type="primary">查询</el-button> |
|
|
|
|
|
<el-button type="success">重置</el-button> |
|
|
|
|
|
<el-button type="primary">导出excel</el-button> |
|
|
|
|
|
<el-button type="primary" style="background-color: #5870FF;">导出列表</el-button> |
|
|
|
|
|
|
|
|
<div class="row" style="margin-top: 10px;"> |
|
|
|
|
|
<div class="buttons"> |
|
|
|
|
|
<el-button type="primary">查询</el-button> |
|
|
|
|
|
<el-button type="success">重置</el-button> |
|
|
|
|
|
<el-button type="primary">导出excel</el-button> |
|
|
|
|
|
<el-button type="primary" style="background-color: #5870FF;">导出列表</el-button> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
</el-card> |
|
|
|
|
|
|
|
|
</el-card> |
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="detail"> |
|
|
|
|
|
|
|
|
<div class="card2"> |
|
|
<el-card> |
|
|
<el-card> |
|
|
<div class="btnAdd"> |
|
|
|
|
|
<el-button @click="openAddForm" type="success">新增收款</el-button> |
|
|
|
|
|
|
|
|
<div class="btns"> |
|
|
|
|
|
<div class="tabs"> |
|
|
|
|
|
<el-button-group> |
|
|
|
|
|
<el-button class="btnItem" |
|
|
|
|
|
:style="{ backgroundColor: activeTab === 'wait' ? '#2741DE' : '#E5EBFE', color: activeTab === 'wait' ? 'white' : '#666' }" |
|
|
|
|
|
@click="navigateTo('wait')"> |
|
|
|
|
|
待审核 |
|
|
|
|
|
</el-button> |
|
|
|
|
|
<el-button class="btnItem" |
|
|
|
|
|
:style="{ backgroundColor: activeTab === 'pass' ? '#2741DE' : '#E5EBFE', color: activeTab === 'pass' ? 'white' : '#666' }" |
|
|
|
|
|
@click="navigateTo('pass')"> |
|
|
|
|
|
已通过 |
|
|
|
|
|
</el-button> |
|
|
|
|
|
<el-button class="btnItem" |
|
|
|
|
|
:style="{ backgroundColor: activeTab === 'reject' ? '#2741DE' : '#E5EBFE', color: activeTab === 'reject' ? 'white' : '#666' }" |
|
|
|
|
|
@click="navigateTo('reject')"> |
|
|
|
|
|
已驳回 |
|
|
|
|
|
</el-button> |
|
|
|
|
|
</el-button-group> |
|
|
|
|
|
</div> |
|
|
|
|
|
<div class="btnAdd"> |
|
|
|
|
|
<el-button @click="openAddForm" type="success">添加收款</el-button> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="form"> |
|
|
|
|
|
<el-table :data="tableData" style="width: 80vw;height:54vh" @sort-change="handleSortChange" |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="table"> |
|
|
|
|
|
<el-table :data="tableData" style="width: 80vw;height:54vh;" @sort-change="handleSortChange" |
|
|
:row-style="{ height: '60px' }" :header-cell-style="{ textAlign: 'center' }" |
|
|
:row-style="{ height: '60px' }" :header-cell-style="{ textAlign: 'center' }" |
|
|
:cell-style="{ textAlign: 'center' }"> |
|
|
:cell-style="{ textAlign: 'center' }"> |
|
|
<el-table-column type="index" label="序号" width="100px" fixed="left"> |
|
|
<el-table-column type="index" label="序号" width="100px" fixed="left"> |
|
@ -93,12 +119,12 @@ |
|
|
<el-table-column fixed="right" prop="adminName" label="订单状态" width="100px" /> |
|
|
<el-table-column fixed="right" prop="adminName" label="订单状态" width="100px" /> |
|
|
<el-table-column fixed="right" prop="rejectReason" label="操作" width="100px" /> |
|
|
<el-table-column fixed="right" prop="rejectReason" label="操作" width="100px" /> |
|
|
</el-table> |
|
|
</el-table> |
|
|
<div class="pagination"> |
|
|
|
|
|
<el-pagination :page-size="pageInfo.pageSize" :page-sizes="[5, 10, 20, 50, 100]" |
|
|
|
|
|
layout="total, sizes, prev, pager, next, jumper" :total="total" |
|
|
|
|
|
@size-change="handlePagination('size', $event)" |
|
|
|
|
|
@current-change="handlePagination('page', $event)"></el-pagination> |
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
<div class="pagination"> |
|
|
|
|
|
<el-pagination :page-size="pageInfo.pageSize" :page-sizes="[5, 10, 20, 50, 100]" |
|
|
|
|
|
layout="total, sizes, prev, pager, next, jumper" :total="total" |
|
|
|
|
|
@size-change="handlePagination('size', $event)" |
|
|
|
|
|
@current-change="handlePagination('page', $event)"></el-pagination> |
|
|
</div> |
|
|
</div> |
|
|
</el-card> |
|
|
</el-card> |
|
|
</div> |
|
|
</div> |
|
@ -132,9 +158,9 @@ |
|
|
<el-time-picker v-model="addFormData.time" placeholder="请选择付款时间" /> |
|
|
<el-time-picker v-model="addFormData.time" placeholder="请选择付款时间" /> |
|
|
</el-form-item> |
|
|
</el-form-item> |
|
|
<el-form-item label="转账凭证" required> |
|
|
<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"> |
|
|
|
|
|
|
|
|
<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" |
|
|
<img v-if="addFormData.imageUrl" :src="addFormData.imageUrl" class="avatar" |
|
|
style="height: 100%; width: 100%; object-fit: cover;" /> |
|
|
style="height: 100%; width: 100%; object-fit: cover;" /> |
|
|
<el-icon v-else class="avatar-uploader-icon"> |
|
|
<el-icon v-else class="avatar-uploader-icon"> |
|
@ -150,7 +176,8 @@ |
|
|
<template #footer> |
|
|
<template #footer> |
|
|
<span class="dialog-footer"> |
|
|
<span class="dialog-footer"> |
|
|
<el-button style="background-color: #7E91FF;" @click="closeAddForm">取消</el-button> |
|
|
<el-button style="background-color: #7E91FF;" @click="closeAddForm">取消</el-button> |
|
|
<el-button style="background-color: #2741DE; margin-left: 2.5vw;" type="primary" @click="handleReject">确定</el-button> |
|
|
|
|
|
|
|
|
<el-button style="background-color: #2741DE; margin-left: 2.5vw;" type="primary" |
|
|
|
|
|
@click="handleReject">确定</el-button> |
|
|
</span> |
|
|
</span> |
|
|
</template> |
|
|
</template> |
|
|
</el-dialog> |
|
|
</el-dialog> |
|
@ -161,6 +188,19 @@ import { ref } from 'vue'; |
|
|
import { ElMessage } from 'element-plus' |
|
|
import { ElMessage } from 'element-plus' |
|
|
import API from '@/util/http.js' |
|
|
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 addFormData = ref({ |
|
|
const addFormData = ref({ |
|
|
|
|
|
|
|
@ -170,9 +210,9 @@ const uploadRef = ref() |
|
|
const openAddForm = () => { |
|
|
const openAddForm = () => { |
|
|
addFormisible.value = true |
|
|
addFormisible.value = true |
|
|
} |
|
|
} |
|
|
const closeAddForm=()=>{ |
|
|
|
|
|
|
|
|
const closeAddForm = () => { |
|
|
addFormisible.value = false |
|
|
addFormisible.value = false |
|
|
addFormData.value={} |
|
|
|
|
|
|
|
|
addFormData.value = {} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
const handleImgSuccess = (response, uploadFile) => { |
|
|
const handleImgSuccess = (response, uploadFile) => { |
|
@ -314,50 +354,74 @@ const tableData = [ |
|
|
<style scoped lang="scss"> |
|
|
<style scoped lang="scss"> |
|
|
.content { |
|
|
.content { |
|
|
height: 100%; |
|
|
height: 100%; |
|
|
width: 80vw; |
|
|
|
|
|
background-color: #E7F4FD !important; |
|
|
|
|
|
|
|
|
width: 83vw; |
|
|
|
|
|
|
|
|
.row { |
|
|
|
|
|
height: 4vh; |
|
|
|
|
|
width: 80vw; |
|
|
|
|
|
display: flex; |
|
|
|
|
|
min-height: 40px; |
|
|
|
|
|
|
|
|
.card1 { |
|
|
|
|
|
width: 100%; |
|
|
|
|
|
|
|
|
.rowItem { |
|
|
|
|
|
|
|
|
.row { |
|
|
|
|
|
height: 4vh; |
|
|
|
|
|
width: 80vw; |
|
|
display: flex; |
|
|
display: flex; |
|
|
width: 15vw; |
|
|
|
|
|
align-items: center; |
|
|
|
|
|
justify-content: center; |
|
|
|
|
|
margin-right: 0.5vw; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
min-height: 40px; |
|
|
|
|
|
|
|
|
.buttons { |
|
|
|
|
|
display: flex; |
|
|
|
|
|
justify-content: center; |
|
|
|
|
|
align-items: center; |
|
|
|
|
|
margin-left: 10px; |
|
|
|
|
|
|
|
|
.rowItem { |
|
|
|
|
|
display: flex; |
|
|
|
|
|
width: 15vw; |
|
|
|
|
|
align-items: center; |
|
|
|
|
|
justify-content: center; |
|
|
|
|
|
margin-right: 0.5vw; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.buttons { |
|
|
|
|
|
display: flex; |
|
|
|
|
|
justify-content: center; |
|
|
|
|
|
align-items: center; |
|
|
|
|
|
margin-left: 10px; |
|
|
|
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.detail { |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.card2 { |
|
|
|
|
|
width: 100%; |
|
|
|
|
|
|
|
|
margin-top: 2vh; |
|
|
margin-top: 2vh; |
|
|
|
|
|
|
|
|
.el-card__body {} |
|
|
|
|
|
|
|
|
.btns { |
|
|
|
|
|
display: flex; |
|
|
|
|
|
align-items: center; |
|
|
|
|
|
justify-content: space-between; |
|
|
|
|
|
.tabs{ |
|
|
|
|
|
min-width: 300px; |
|
|
|
|
|
.btnItem { |
|
|
|
|
|
margin-left: 10px; |
|
|
|
|
|
border-radius: 5px; |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
.btnAdd { |
|
|
|
|
|
flex: 1; |
|
|
|
|
|
justify-content: flex-end; |
|
|
|
|
|
margin-right: 1vw; |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.btnAdd {} |
|
|
|
|
|
|
|
|
|
|
|
.form { |
|
|
|
|
|
background-color: #E7F4FD !important; |
|
|
|
|
|
|
|
|
.table { |
|
|
|
|
|
margin: 10px 3vw; |
|
|
|
|
|
border-radius: 20px; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.pagination { |
|
|
.pagination { |
|
|
margin-top: 10px; |
|
|
margin-top: 10px; |
|
|
|
|
|
padding: 10px 10px; |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
:deep(.adddialog) { |
|
|
:deep(.adddialog) { |
|
|
min-width: 450px; |
|
|
min-width: 450px; |
|
|
background-color: #E7F4FD !important; |
|
|
|
|
|
|
|
|
background-color: #F3FAFE !important; |
|
|
|
|
|
|
|
|
.addForm { |
|
|
.addForm { |
|
|
padding: 0 3vw 1vh 1vw; |
|
|
padding: 0 3vw 1vh 1vw; |
|
@ -368,7 +432,8 @@ const tableData = [ |
|
|
|
|
|
|
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
.dialog-footer{ |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.dialog-footer { |
|
|
display: flex; |
|
|
display: flex; |
|
|
justify-content: center; |
|
|
justify-content: center; |
|
|
padding-bottom: 1.5vh; |
|
|
padding-bottom: 1.5vh; |
|
|