<template>
<div class="app-container">
<el-card class="filter-container" shadow="never">
<div>
<!-- <i class="el-icon-search"></i> -->
<!-- <span>筛选搜索</span> -->
<el-button
style="float:right"
type="primary"
@click="handleSearchList()"
size="small"
>
查询搜索
</el-button>
<el-button
style="float:right;margin-right: 15px"
@click="handleResetSearch()"
size="small"
>
重置
</el-button>
</div>
<div style="margin-top: 15px">
<el-form
:inline="true"
:model="listQuery"
size="small"
label-width="140px"
>
<el-from-item >
<span class="demonstration">选择时间</span>
<el-date-picker
v-model="listQuery.date"
type="daterange"
align="right"
unlink-panels
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
:picker-options="pickerOptions"
>
</el-date-picker>
</el-from-item>
<el-form-item label="商户名称：">
<el-input
v-model="listQuery.keyword"
class="input-width"
placeholder="商户名称"
></el-input>
</el-form-item>
<el-form-item label="商户类型：">
<el-select
v-model="listQuery.is_trader"
placeholder="全部"
clearable
class="input-width"
>
<el-option
v-for="item in typeOptions"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</el-form-item>
<!-- <el-form-item label="所在区域">
<el-input
v-model="listQuery.name"
class="input-width"
placeholder="xx省xx市xx区"
></el-input>
</el-form-item> -->
<el-form-item label="状态">
<el-select
v-model="listQuery.status"
placeholder="全部"
clearable
class="input-width"
>
<el-option
v-for="item in typeStatus"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="用户账户">
<el-input
v-model="listQuery.uaccount"
class="input-width"
placeholder="请输入关联用户账户"
></el-input>
</el-form-item>
</el-form>
</div>
</el-card>
<el-card class="operate-container" shadow="never">
<i class="el-icon-tickets"></i>
<span>数据列表</span>
<!-- <el-button size="mini" class="btn-add" @click="handleAdd()">添加</el-button> -->
</el-card>
<div class="table-container">
<el-table
ref="couponTable"
:data="list"
style="width: 100%;"
@selection-change="handleSelectionChange"
v-loading="listLoading"
border
>
<el-table-column
type="selection"
width="60"
align="center"
></el-table-column>
<el-table-column label="编号" width="100" align="center">
<template slot-scope="scope">{{ scope.row.categoryId }}</template>
</el-table-column>
<el-table-column label="商户名称" align="center">
<template slot-scope="scope">{{scope.row.merName}}</template>
</el-table-column>
<el-table-column label="联系方式" width="200" align="center">
<template slot-scope="scope">{{scope.row.merPhone}}</template>
</el-table-column>
<el-table-column label="所在区域" width="200" align="center">
<template slot-scope="scope">{{scope.row.merAddress}}</template>
</el-table-column>
<el-table-column label="详细地址" width="140" align="center">
<template slot-scope="scope">{{scope.row.merAddress}}</template>
</el-table-column>
<el-table-column label="商户类型" width="200" align="center">
<template slot-scope="scope">{{scope.row.mertype}}</template>
</el-table-column>
<el-table-column label="开户支行" width="200" align="center">
<template slot-scope="scope"></template>
</el-table-column>
<el-table-column label="状态" width="100" align="center">
<template slot-scope="scope">{{scope.row.status}}</template>
</el-table-column>
<el-table-column label="创建时间" width="100" align="center">
<template slot-scope="scope">{{scope.row.createTime}}</template>
</el-table-column>
<el-table-column label="操作" width="180" align="center">
<template slot-scope="scope">
<div class="drawer">
<el-button
size="mini"
type="text"
@click="clickBtn(scope.$index, scope.row)"
>查看</el-button
>
<div class="background" v-if="open" @click.self="closeDrop">
<div class="drop" :class="{ active: isActive, close: isClose }">
<!-- /*商户用户详情 */ -->
<div class="drop-top">
<span>
商户资料
</span>
<el-table :data="tabledata" style="width:100%">
<el-table-column
prop="date"
label="商户名称"
width="150"
></el-table-column>
<el-table-column
prop="date"
label="联系方式"
width="150"
></el-table-column>
<el-table-column
prop="date"
label="所在区域"
width="150"
></el-table-column>
<el-table-column
prop="date"
label="详细地址"
width="150"
></el-table-column>
<el-table-column
prop="date"
label="商户类型"
width="150"
></el-table-column>
</el-table>
<el-table :data="tabledata" style="width:100%">
<el-table-column label="营业执照">
<template slot-scope="scope">
<el-popover
placement="top-start"
title=""
trigger="hover"
>
<img
src="scope.row.product.cover"
alt=""
style="width: 150px;height: 250px"
/>
<img
slot="reference"
:src="scope.row.product.cover"
style="width: 30px;height: 30px"
/>
</el-popover>
</template>
</el-table-column>
<el-table-column label="法人身份证">
<template slot-scope="scope">
<el-popover
placement="top-start"
title=""
trigger="hover"
>
<img
src="scope.row.product.cover"
alt=""
style="width: 150px;height: 250px"
/>
<img
slot="reference"
:src="scope.row.product.cover"
style="width: 30px;height: 30px"
/>
</el-popover>
</template>
</el-table-column>
</el-table>
<el-table>
<el-table-column label="店头照">
<template slot-scope="scope">
<el-popover
placement="top-start"
title=""
trigger="hover"
>
<img
src="scope.row.product.cover"
alt=""
style="width: 150px;height: 250px"
/>
<img
slot="reference"
:src="scope.row.product.cover"
style="width: 30px;height: 30px"
/>
</el-popover>
</template>
</el-table-column>
<el-table-column label="店内照">
<template slot-scope="scope">
<el-popover
placement="top-start"
title=""
trigger="hover"
>
<img
src="scope.row.product.cover"
alt=""
style="width: 150px;height: 250px"
/>
<img
slot="reference"
:src="scope.row.product.cover"
style="width: 30px;height: 30px"
/>
</el-popover>
</template>
</el-table-column>
</el-table>
<el-table>
<el-table-column
prop="date"
label="账户类型"
width="150px"
></el-table-column>
<el-table-column
prop="date"
label="开户支行"
width="150px"
></el-table-column>
<el-table-column
prop="date"
label="收款银行卡"
width="150px"
></el-table-column>
<el-table-column
prop="date"
label="法人身份证"
width="150px"
></el-table-column>
</el-table>
<el-table>
<el-table-column
prop="date"
label="授权面"
width="300"
></el-table-column>
<el-table-column
prop="date"
label="开户许可证"
width="300"
></el-table-column>
</el-table>
<el-button type="warning" @click="closedrawer" size="small"
>关闭</el-button
>
</div>
</div>
</div>
</div>
<el-button
size="mini"
type="text"
@click="handleEditSort(scope.$index, scope.row)"
>修改状态
</el-button>
</template>
</el-table-column>
</el-table>
</div>
<el-dialog title="修改状态" :visible.sync="sortDialogVisible" width="40%">
<el-form :model="sortDialogData" label-width="150px">
<el-form-item label="状态：">
<el-input
v-model="sortDialogData.sort"
style="width: 200px"
></el-input>
</el-form-item>
</el-form>
<span slot="footer">
<el-button @click="sortDialogVisible = false" size="small"
>取 消</el-button
>
<el-button type="primary" @click="handleUpdateSort" size="small"
>确 定</el-button
>
</span>
</el-dialog>
<div class="pagination-container">
<el-pagination
background
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
layout="total, sizes,prev, pager, next,jumper"
:current-page.sync="listQuery.pageNum"
:page-size="listQuery.pageSize"
:page-sizes="[5, 10, 15]"
:total="total"
>
</el-pagination>
</div>
</div>
</template>
<script>
import { fetchList } from "@/api/MerchantSelect";
import { formatDate } from "@/utils/date";
import { getToken } from "@/utils/auth";
const defaultListQuery = {
page: 1,
limit: 10,
// pageNum:1,
// pageNum:10,
name: null,
is_trader: null,
status: null,
keyword: null,
date:null,
uaccount:null
};
const defaultTypeOptions = [
{
label: "个人（微商）",
value: 0
},
{
label: "企业",
value: 1
}
];
const defaultTypeStatus = [
{
label: "关闭",
value: 0
},
{
label: "开启",
value: 1
}
];
export default {
name: "couponList",
name: "HelloWorld",
props: {},
data() {
return {
listQuery: Object.assign({}, defaultListQuery),
typeOptions: Object.assign({}, defaultTypeOptions),
typeStatus: Object.assign({}, defaultTypeStatus),
list: null,
total: null,
listLoading: false,
sortDialogVisible: false,
sortDialogData: { sort: 0, id: null },
multipleSelection: [],
open: false,
isActive: false,
isClose: false
};
},
created() {
this.getList();
},
filters: {
formatType(type) {
for (let i = 0; i < defaultTypeOptions.length; i++) {
if (type === defaultTypeOptions[i].value) {
return defaultTypeOptions[i].label;
}
}
return "";
},
formatType(status) {
for (let i = 0; i < defaultTypeStatus.length; i++) {
if (status === defaultTypeStatus[i].value) {
return defaultTypeStatus[i].label;
}
}
return "";
}
},
methods: {
handleEditSort(index, row) {
this.sortDialogVisible = true;
this.sortDialogData.sort = row.sort;
this.sortDialogData.id = row.id;
},
handleUpdateSort() {
this.$confirm("是否要修改状态?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
}).then(() => {
updateHomeSubjectSort(sortDialogData).then(response => {
//updateHomeSubjectSort(this.sortDialogData).then(response => {
this.sortDialogVisible = false;
this.getList();
this.$message({
type: "success",
message: "修改成功！"
});
});
});
},
handleResetSearch() {
this.listQuery = Object.assign({}, defaultListQuery);
},
handleSearchList() {
this.listQuery.pageNum = 1;
this.getList();
},
handleSelectionChange(val) {
this.multipleSelection = val;
},
handleSizeChange(val) {
this.listQuery.pageNum = 1;
this.listQuery.pageSize = val;
this.getList();
},
handleCurrentChange(val) {
this.listQuery.pageNum = val;
this.getList();
},
handleAdd() {
this.$router.push({ path: "/sms/addCoupon" });
},
// handleUpdate(index, row) {
// this.$router.push({path: '/sms/updateCoupon', query: {id: row.id}})
// },
getList() {
this.listLoading = true;
let token = getToken();
console.log(token);
this.$axios
.get(
`/admin/system/merchant/lst?page=1&limit=10&date=&status=&keyword=&is_trader=&uaccount=`,
//`/admin/system/merchant/lst?page=1&limit=10&date=${this.listQuery.date}&status=${this.listQuery.status}&keyword=${this.listQuery.keyword}&is_trader=${this.listQuery.is_trader}&uaccount=${this.listQuery.uaccount}`,
// `/sys/system/merchant/lst?keyword=${this.listQuery.keyword}&status=${this.listQuery.addtype}&date=null`,
// `/lst?page=1&limit=20&date=&status=1&keyword=&is_trader=&uaccount=`
{
headers: {
Authorization: token
}
}
)
.then(res => {
console.log(res);
this.listLoading = false;
// fcrea;
this.list = res.data.list;
this.total = res.data.total;
});
fetchList(this.listQuery).then(response => {
console.log(response);
this.listLoading = false;
// fcrea;
this.list = res.data.list;
this.total = res.data.total;
});
},
clickBtn() {
this.open = true;
this.isActive = true;
this.isClose = false;
},
closeDrop() {
this.isClose = true;
setTimeout(() => {
this.open = false;
}, 200);
},
closedrawer() {
this.open = false;
}
}
// get(){
// this.$axios.get('/admin/system/merchant/lst').then(response=>{
// if (response.data){
// console.log(response.data)
// }
// }).catch(err=>{
// alert('请求失败')
// })
// }
};
</script>
<style scoped lang="scss">
.input-width {
width: 203px;
}
.background {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
.drop {
width: 0px;
position: absolute;
top: 0;
right: 0;
bottom: 0;
border: black 1px solid;
box-shadow: black 2px 2px 3px;
background: #fff;
}
// 开
.active {
animation: opendoor 0.3s normal forwards;
}
@keyframes opendoor {
from {
width: 0;
}
to {
width: 45%;
}
}
// 关
.close {
animation: close 0.3s normal forwards;
}
@keyframes close {
0% {
width: 45%;
}
100% {
width: 0;
opacity: 0;
}
}
}
</style>
