code-image-backup-public/lilishop-ui
1
0
Fork 0
mirror of https://gitee.com/beijing_hongye_huicheng/lilishop-ui.git synced 2025-12-20 09:55:53 +08:00
Code Issues Packages Projects Releases Wiki Activity

commit message

Browse Source
This commit is contained in:
Chopper
2021-05-13 10:56:04 +08:00
commit ec3e958037
728 changed files with 132685 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

298
manager/src/views/seller/bill/accountStatementBill.vue Normal file
View File

@@ -0,0 +1,298 @@
<template>
<div class="search">
<Row>
<Col>
<Card>
<Row @keydown.enter.native="handleSearch">
<Form ref="searchForm" :model="searchForm" inline :label-width="70" class="search-form">
<Form-item label="账单编号" prop="sn">
<Input type="text" v-model="searchForm.sn" placeholder="请输入账单编号" clearable style="width: 200px" />
</Form-item>
<Form-item label="出帐时间" prop="createTime">
<DatePicker v-model="selectDate" type="daterange" format="yyyy-MM-dd HH:mm:ss" clearable @on-change="selectDateRange" placeholder="选择起始时间" style="width: 200px">
</DatePicker>
</Form-item>
<Button @click="handleSearch" type="primary" icon="ios-search" class="search-btn">搜索</Button>
</Form>
</Row>
<Row>
<Table :loading="loading" border :columns="columns" :data="data" ref="table" sortable="custom" @on-sort-change="changeSort" @on-selection-change="changeSelect">
</Table>
</Row>
<Row type="flex" justify="end" class="page">
<Page :current="searchForm.pageNumber" :total="total" :page-size="searchForm.pageSize" @on-change="changePage" @on-page-size-change="changePageSize" :page-size-opts="[10, 20, 50]"
size="small" show-total show-elevator show-sizer></Page>
</Row>
</Card>
</Col>
</Row>
<Modal :title="modalTitle" v-model="modalVisible" :mask-closable="false" :width="500">
<Form ref="form" :model="form" :label-width="100" :rules="formValidate">
<FormItem label="账单号" prop="sn">
<Input v-model="form.sn" clearable style="width: 100%" />
</FormItem>
<FormItem label="店铺名称" prop="sellerName">
<Input v-model="form.sellerName" clearable style="width: 100%" />
</FormItem>
<FormItem label="结算开始时间" prop="startTime">
<DatePicker v-model="form.startTime" valueType="yyyy-MM-dd HH:mm:ss" clearable style="width: 100%"></DatePicker>
</FormItem>
<FormItem label="结算结束时间" prop="endTime">
<DatePicker type="date" v-model="form.endTime" clearable style="width: 100%"></DatePicker>
</FormItem>
<FormItem label="最终结算金额" prop="billPrice">
<Input v-model="form.billPrice" clearable style="width: 100%" />
</FormItem>
</Form>
<div slot="footer">
<Button type="text" @click="modalVisible = false">取消</Button>
<Button type="primary" :loading="submitLoading" @click="handleSubmit">提交
</Button>
</div>
</Modal>
</div>
</template>
<script>
import * as API_Shop from "@/api/shops";
export default {
name: "bill",
components: {},
data() {
return {
loading: true, // 表单加载状态
modalType: 0, // 添加或编辑标识
modalVisible: false, // 添加或编辑显示
modalTitle: "", // 添加或编辑标题
searchForm: {
// 搜索框初始化对象
pageNumber: 1, // 当前页数
pageSize: 10, // 页面大小
sort: "createTime", // 默认排序字段
order: "desc", // 默认排序方式
startDate: "", // 起始时间
endDate: "", // 终止时间
},
selectDate: null,
form: {
// 添加或编辑表单对象初始化数据
sn: "",
sellerName: "",
startTime: "",
endTime: "",
billPrice: "",
},
// 表单验证规则
formValidate: {},
submitLoading: false, // 添加或编辑提交状态
selectList: [], // 多选数据
selectCount: 0, // 多选计数
columns: [
// 表头
{
type: "selection",
width: 60,
align: "center",
},
{
title: "账单号",
key: "sn",
minWidth: 200,
tooltip: true,
},
{
title: "生成时间",
key: "createTime",
width: 120,
},
{
title: "结算时间段",
key: "startTime",
width: 200,
render: (h, params) => {
return h("div", params.row.startTime + "~" + params.row.endTime);
},
},
{
title: "店铺名称",
key: "storeName",
minWidth: 120,
tooltip: true,
},
{
title: "结算金额",
key: "billPrice",
width: 130,
render: (h, params) => {
return h(
"div",
this.$options.filters.unitPrice(params.row.billPrice, "￥")
);
},
},
{
title: "状态",
key: "billStatus",
width: 100,
render: (h, params) => {
if (params.row.billStatus == "OUT") {
return h("div", "已出账");
} else if (params.row.billStatus == "CHECK") {
return h("div", "已对账");
} else if (params.row.billStatus == "EXAMINE") {
return h("div", "已审核");
} else {
return h("div", "已付款");
}
},
},
{
title: "操作",
key: "action",
align: "center",
fixed: "right",
width: 120,
render: (h, params) => {
return h("div", [
h(
"Button",
{
props: {
type: "info",
size: "small",
},
style: {
marginRight: "5px",
},
on: {
click: () => {
this.detail(params.row);
},
},
},
"详细"
),
]);
},
},
],
data: [], // 表单数据
total: 0, // 表单数据总数
};
},
methods: {
init() {
this.getDataList();
},
changePage(v) {
this.searchForm.pageNumber = v;
this.getDataList();
this.clearSelectAll();
},
changePageSize(v) {
this.searchForm.pageSize = v;
this.getDataList();
},
handleSearch() {
this.searchForm.pageNumber = 1;
this.searchForm.pageSize = 10;
this.getDataList();
},
changeSort(e) {
this.searchForm.sort = e.key;
this.searchForm.order = e.order;
if (e.order === "normal") {
this.searchForm.order = "";
}
this.getDataList();
},
clearSelectAll() {
this.$refs.table.selectAll(false);
},
changeSelect(e) {
this.selectList = e;
this.selectCount = e.length;
},
selectDateRange(v) {
if (v) {
this.searchForm.startDate = v[0];
this.searchForm.endDate = v[1];
}
},
getDataList() {
this.loading = true;
// this.searchForm
this.searchForm.startTime &&
(this.searchForm.startTime = this.$options.filters.unixToDate(
this.searchForm.startTime / 1000
));
this.searchForm.endTime &&
(this.searchForm.endTime = this.$options.filters.unixToDate(
this.searchForm.endTime / 1000
));
this.searchForm.billStatus = "OUT";
API_Shop.getBuyBillPage(this.searchForm).then((res) => {
this.loading = false;
if (res.success) {
this.data = res.result.records;
this.total = res.result.total;
}
});
this.total = this.data.length;
this.loading = false;
},
handleSubmit() {
this.$refs.form.validate((valid) => {
if (valid) {
this.submitLoading = true;
if (this.modalType === 0) {
// 添加 避免编辑后传入id等数据 记得删除
delete this.form.id;
this.postRequest("/bill/insertOrUpdate", this.form).then((res) => {
this.submitLoading = false;
if (res.success) {
this.$Message.success("操作成功");
this.getDataList();
this.modalVisible = false;
}
});
} else {
// 编辑
this.postRequest("/bill/insertOrUpdate", this.form).then((res) => {
this.submitLoading = false;
if (res.success) {
this.$Message.success("操作成功");
this.getDataList();
this.modalVisible = false;
}
});
}
}
});
},
detail(v) {
let id = v.id;
this.$router.push({
name: "bill-detail",
query: { id: id },
});
},
},
mounted() {
this.init();
},
};
</script>
<style lang="scss" scoped>
// 建议引入通用样式 可删除下面样式代码
@import "@/styles/table-common.scss";
/deep/ .ivu-col {
min-height: 100vh;
}
</style>

509
manager/src/views/seller/bill/bill-detail.vue Normal file
View File

@@ -0,0 +1,509 @@
<template>
<div>
<template>
<Row>
<i-col span="24">
<Card>
<p slot="title">商家信息</p>
<div class="flex flex_align_item">
<p>店铺名称：{{ bill.storeName }}</p>
<p>银行开户名：{{ bill.bankAccountName }}</p>
<p>银行账号：{{ bill.bankAccountNumber }}</p>
<p>开户行支行名称：{{ bill.bankName }}</p>
<p>支行联行号：{{ bill.bankCode }}</p>
</div>
</Card>
</i-col>
</Row>
</template>
<template>
<Row>
<i-col span="24">
<Card>
<p slot="title">账单详细</p>
<div class="tips-status">
<span>商品状态</span>
<span class="theme_color">{{
bill.billStatus | unixSellerBillStatus
}}</span>
<Button
v-if="bill.billStatus == 'CHECK'"
size="mini"
type="primary"
@click="pass()"
>付款</Button
>
</div>
<i-table :columns="columns" :data="data" stripe></i-table>
</Card>
</i-col>
</Row>
</template>
<template>
<Tabs active-key="key1" @on-click="clickTabs">
<Tab-pane label="入账流水" key="key1">
<Card>
<Row>
<Table
:loading="loading"
border
:columns="orderColumns"
:data="order"
ref="table"
></Table>
</Row>
<Row type="flex" justify="end" class="page">
<Page
:current="orderParam.pageNumber"
:total="orderTotal"
:page-size="orderParam.pageSize"
@on-change="orderChangePage"
@on-page-size-change="orderChangePageSize"
size="small"
show-total
show-elevator
></Page>
</Row>
</Card>
</Tab-pane>
<Tab-pane label="退款流水" key="key2">
<Card>
<Row>
<Table
:loading="loading"
border
:columns="refundColumns"
:data="refund"
ref="table"
></Table>
</Row>
<Row type="flex" justify="end" class="page">
<Page
:current="refundParam.pageNumber"
:total="refundTotal"
:page-size="refundParam.pageSize"
@on-change="getRefund()"
@on-page-size-change="getRefund()"
size="small"
show-total
show-elevator
></Page>
</Row>
</Card>
</Tab-pane>
</Tabs>
</template>
</div>
</template>
<script>
import * as filters from "@/utils/filters";
import * as API_Shop from "@/api/shops";
export default {
name: "bill-detail",
data() {
return {
columns: [
{
title: "项目",
key: "name",
width: 250,
},
{
title: "值",
key: "value",
},
],
data: [
{
name: "计算中",
value: 0,
},
{
name: "计算中",
value: 0,
},
{
name: "计算中",
value: 0,
},
{
name: "计算中",
value: 0,
},
{
name: "计算中",
value: 0,
},
{
name: "计算中",
value: 0,
},
{
name: "计算中",
value: 0,
},
{
name: "计算中",
value: 0,
},
],
id: "",
bill: {},
order: [],
orderParam: {
pageNumber: 1, // 当前页数
pageSize: 10, // 页面大小
sort: "id", // 默认排序字段
order: "desc", // 默认排序方式
flowType: "PAY",
startDate: null,
endDate: null,
},
orderColumns: [
{
title: "入账时间",
key: "createTime",
minWidth: 120,
tooltip: true
},
{
title: "订单编号",
key: "sn",
minWidth: 120,
tooltip: true
},
{
title: "订单金额",
key: "finalPrice",
width: 120,
render: (h, params) => {
return h(
"div",
this.$options.filters.unitPrice(params.row.finalPrice, "￥")
);
},
},
{
title: "平台分佣",
key: "commissionPrice",
width: 120,
render: (h, params) => {
return h(
"div",
this.$options.filters.unitPrice(params.row.commissionPrice, "￥")
);
},
},
{
title: "平台优惠券",
key: "siteCouponPrice",
minWidth: 120,
render: (h, params) => {
if(params.row.siteCouponPrice == null){
return h(
"div",
"-"
);
}else{
return h(
"div",
this.$options.filters.unitPrice(params.row.siteCouponPrice, "￥")
);
}
},
},
{
title: "分销金额",
key: "distributionRebate",
width: 120,
render: (h, params) => {
if(params.row.distributionRebate == null){
return h(
"div",
"-"
);
}else{
return h(
"div",
this.$options.filters.unitPrice(params.row.distributionRebate, "￥")
);
}
},
},
{
title: "应结金额",
key: "billPrice",
width: 120,
render: (h, params) => {
return h(
"div",
this.$options.filters.unitPrice(params.row.billPrice, "￥")
);
},
},
],
refund: [],
refundParam: {
flowTypeEnum: "PAY",
pageNumber: 1, // 当前页数
pageSize: 10, // 页面大小
sort: "id", // 默认排序字段
order: "desc", // 默认排序方式
flowType: "REFUND",
startDate: null,
endDate: null,
},
refundColumns: [
{
title: "退款时间",
key: "createTime",
minWidth: 120,
tooltip: true },
{
title: "退款流水编号",
key: "sn",
minWidth: 120,
tooltip: true },
{
title: "订单编号",
key: "sn",
minWidth: 120,
tooltip: true },
{
title: "退款金额",
key: "finalPrice",
width: 120,
render: (h, params) => {
return h(
"div",
this.$options.filters.unitPrice(params.row.finalPrice, "￥")
);
},
},
{
title: "退还佣金",
key: "commissionPrice",
minWidth: 120,
render: (h, params) => {
return h(
"div",
this.$options.filters.unitPrice(params.row.commissionPrice, "￥")
);
},
},
{
title: "退还平台优惠券",
key: "siteCouponCommission",
minWidth: 110
},
{
title: "退还分销",
key: "distributionRebate",
minWidth: 120,
render: (h, params) => {
if(params.row.distributionRebate == null){
return h(
"div",
"-"
);
}else{
return h(
"div",
this.$options.filters.unitPrice(params.row.distributionRebate, "￥")
);
}
},
},
{
title: "合计金额",
key: "billPrice",
minWidth: 120,
render: (h, params) => {
if(params.row.billPrice == null){
return h(
"div",
"-"
);
}else{
return h(
"div",
this.$options.filters.unitPrice(params.row.billPrice, "￥")
);
}
},
},
],
orderTotal: 0,
refundTotal: 0,
};
},
methods: {
//订单页数发生变化
orderChangePage(v) {
this.orderParam.pageNumber = v;
this.getOrder();
},
//订单每页条数变化
orderChangePageSize(v) {
this.orderParam.pageSize = v;
this.getOrder();
},
//退款单页数发生变化
refundOrderChangePage(v) {
this.refundParam.pageNumber = v;
this.getRefund()
},
//退款单每页条数变化
refundOrderChangePageSize(v) {
this.refundParam.pageSize = v;
tthis.getRefund()
},
clickTabs(index) {
if (index == 1) {
this.orderParam.flowType = "REFUND";
this.getRefund();
} else {
this.orderParam.flowType = "PAY";
this.getOrder();
}
},
pass() {
API_Shop.pay(this.id).then((res) => {
if (res.code == 200) {
this.$Message.success(res.message);
this.init();
}
});
},
init() {
this.id = this.$route.query.id;
this.getDetail();
},
getDetail() {
API_Shop.getBuyBillDetail(this.id).then((res) => {
if (res.success) {
this.bill = res.result;
//初始化表哥
this.initTable();
//初始化订单信息
this.orderParam.startDate = this.bill.startTime;
this.orderParam.endDate = this.bill.endTime;
this.refundParam.startDate = this.bill.startTime;
this.refundParam.endDate = this.bill.endTime;
this.getOrder();
}
});
},
initTable() {
let bill = this.bill;
this.data[0].name = "结算单号";
this.data[0].value = bill.sn;
this.data[1].name = "起止日期";
this.data[1].value = bill.startTime + "~" + bill.endTime;
this.data[2].name = "出帐日期";
this.data[2].value = bill.createTime;
this.data[3].name = "当前状态";
this.data[3].value = filters.unixSellerBillStatus(bill.billStatus);
this.data[4].name = "当前店铺";
this.data[4].value = bill.storeName;
this.data[5].name = "平台打款时间";
this.data[5].value = bill.payTime === null ? "未付款" : bill.payTime;
this.data[6].name = "结算金额";
this.data[6].value = filters.unitPrice(bill.billPrice?bill.billPrice:0, "¥");
this.data[7].name = "结算详细";
this.data[7].value =
"最终结算金额(" +
filters.unitPrice(bill.billPrice?bill.billPrice:0, "¥") +
") = 订单付款总金额(" +
filters.unitPrice(bill.orderPrice?bill.orderPrice:0, "¥") +
") - 退单金额(" +
filters.unitPrice(bill.refundPrice?bill.refundPrice:0, "¥") +
")" +
"- 平台收取佣金(" +
filters.unitPrice(bill.commissionPrice?bill.commissionPrice:0, "¥") +
") + 退单产生退还佣金金额(" +
filters.unitPrice(bill.refundCommissionPrice?bill.refundCommissionPrice:0, "¥") +
") - 分销返现支出(" +
filters.unitPrice(bill.distributionCommission?bill.distributionCommission:0, "¥") +
") + 退单分销返现返还(" +
filters.unitPrice(bill.distributionRefundCommission?bill.distributionRefundCommission:0, "¥") +
") - 平台优惠券支出(" +
filters.unitPrice(bill.siteCouponCommission?bill.siteCouponCommission:0, "¥") +
") + 退单平台优惠券返还(" +
filters.unitPrice(bill.siteCouponRefundCommission?bill.siteCouponRefundCommission:0, "¥") +
")";
},
getOrder() {
API_Shop.getStoreFlow(this.id, this.orderParam).then((res) => {
if (res.result) {
this.order = res.result.records;
this.orderTotal = res.result.total;
}
});
this.orderTotal = this.order.length;
},
getRefund() {
API_Shop.getStoreFlow(this.id, this.orderParam).then((res) => {
this.loading = false;
if (res.result) {
this.refund = res.result.records;
this.refundTotal = res.result.total;
this.$set(this, "refund", res.result.records);
console.log();
}
});
this.refundTotal = this.refund.length;
},
},
mounted() {
this.init();
},
};
</script>
<style scoped lang="scss">
.flex {
justify-content: space-between;
flex-wrap: wrap;
> p {
width: 50%;
margin: 15px 0;
}
}
.tips-status {
padding: 18px;
> span {
font-weight: bold;
margin-right: 8px;
}
> span:nth-of-type(2) {
color: $theme_color;
}
}
</style>

359
manager/src/views/seller/bill/bill.vue Normal file
View File

@@ -0,0 +1,359 @@
<template>
<div class="search">
<Row>
<Col>
<Card>
<Row @keydown.enter.native="handleSearch">
<Form ref="searchForm" :model="searchForm" inline :label-width="70" class="search-form">
<Form-item label="账单编号" prop="sn">
<Input
type="text"
v-model="searchForm.sn"
placeholder="请输入账单编号"
clearable
style="width: 200px"
/>
</Form-item>
<Form-item label="出帐时间" prop="createTime">
<DatePicker v-model="selectDate" type="daterange" format="yyyy-MM-dd HH:mm:ss" clearable @on-change="selectDateRange" placeholder="选择起始时间" style="width: 200px">
</DatePicker>
</Form-item>
<Button @click="handleSearch" type="primary" icon="ios-search" class="search-btn">搜索</Button>
</Form>
</Row>
<Row class="operation padding-row">
<Button @click="add" type="primary">添加</Button>
<Button @click="delAll">批量删除</Button>
</Row>
<Row>
<Table :loading="loading" border :columns="columns" :data="data" ref="table" sortable="custom"
@on-sort-change="changeSort"
@on-selection-change="changeSelect">
</Table>
</Row>
<Row type="flex" justify="end" class="page">
<Page :current="searchForm.pageNumber" :total="total" :page-size="searchForm.pageSize"
@on-change="changePage" @on-page-size-change="changePageSize" :page-size-opts="[10, 20, 50]"
size="small" show-total show-elevator show-sizer></Page>
</Row>
</Card>
</Col>
</Row>
<Modal :title="modalTitle" v-model="modalVisible" :mask-closable="false" :width="500">
<Form ref="form" :model="form" :label-width="100" :rules="formValidate">
<FormItem label="账单号" prop="sn">
<Input v-model="form.sn" clearable style="width: 100%" />
</FormItem>
<FormItem label="店铺名称" prop="sellerName">
<Input v-model="form.sellerName" clearable style="width: 100%" />
</FormItem>
<FormItem label="结算开始时间" prop="startTime">
<DatePicker v-model="form.startTime" valueType="yyyy-MM-dd HH:mm:ss" clearable style="width: 100%"></DatePicker>
</FormItem>
<FormItem label="结算结束时间" prop="endTime">
<DatePicker type="date" v-model="form.endTime" clearable style="width: 100%"></DatePicker>
</FormItem>
<FormItem label="最终结算金额" prop="billPrice">
<Input v-model="form.billPrice" clearable style="width: 100%" />
</FormItem>
</Form>
<div slot="footer">
<Button type="text" @click="modalVisible = false">取消</Button>
<Button type="primary" :loading="submitLoading" @click="handleSubmit">提交
</Button>
</div>
</Modal>
</div>
</template>
<script>
import * as API_Shop from "@/api/shops";
export default {
name: "bill",
components: {},
data() {
return {
loading: true, // 表单加载状态
modalType: 0, // 添加或编辑标识
modalVisible: false, // 添加或编辑显示
modalTitle: "", // 添加或编辑标题
searchForm: {
// 搜索框初始化对象
pageNumber: 1, // 当前页数
pageSize: 10, // 页面大小
sort: "createTime", // 默认排序字段
order: "desc", // 默认排序方式
startDate: "", // 起始时间
endDate: "", // 终止时间
},
selectDate: null,
form: {
// 添加或编辑表单对象初始化数据
sn: "",
sellerName: "",
startTime: "",
endTime: "",
billPrice: "",
},
// 表单验证规则
formValidate: {},
submitLoading: false, // 添加或编辑提交状态
selectList: [], // 多选数据
selectCount: 0, // 多选计数
columns: [
// 表头
{
type: "selection",
width: 60,
align: "center",
},
{
title: "账单号",
key: "sn",
minWidth: 200,
tooltip: true
},
{
title: "生成时间",
key: "createTime",
width: 120,
},
{
title: "结算时间段",
key: "startTime",
width: 200,
render: (h, params) => {
return h('div', params.row.startTime +"~"+params.row.endTime)
}
},
{
title: "店铺名称",
key: "storeName",
minWidth: 120,
tooltip: true
},
{
title: "结算金额",
key: "billPrice",
width: 130,
render: (h, params) => {
return h(
"div",
this.$options.filters.unitPrice(params.row.billPrice, "￥")
);
},
},
{
title: "状态",
key: "billStatus",
width: 100,
render: (h, params) => {
if(params.row.billStatus == 'OUT'){
return h('div', '已出账')
} else if (params.row.billStatus == 'CHECK') {
return h('div', '已对账')
} else if (params.row.billStatus == 'EXAMINE') {
return h('div', '已审核')
}else{
return h('div', '已付款')
}
}
},
{
title: "操作",
key: "action",
align: "center",
fixed: "right",
width: 120,
render: (h, params) => {
return h("div", [
h(
"Button",
{
props: {
type: "info",
size: "small",
},
style: {
marginRight: "5px",
},
on: {
click: () => {
this.detail(params.row);
},
},
},
"详细"
),
]);
},
},
],
data: [], // 表单数据
total: 0, // 表单数据总数
};
},
methods: {
init() {
this.getDataList();
},
changePage(v) {
this.searchForm.pageNumber = v;
this.getDataList();
},
changePageSize(v) {
this.searchForm.pageSize = v;
this.getDataList();
},
handleSearch() {
this.searchForm.pageNumber = 1;
this.searchForm.pageSize = 10;
this.getDataList();
},
changeSort(e) {
this.searchForm.sort = e.key;
this.searchForm.order = e.order;
if (e.order === "normal") {
this.searchForm.order = "";
}
this.getDataList();
},
changeSelect(e) {
this.selectList = e;
this.selectCount = e.length;
},
selectDateRange(v) {
if (v) {
this.searchForm.startDate = v[0];
this.searchForm.endDate = v[1];
}
},
getDataList() {
this.loading = true;
// this.searchForm
this.searchForm.startTime &&
(this.searchForm.startTime = this.$options.filters.unixToDate(
this.searchForm.startTime / 1000
));
this.searchForm.endTime &&
(this.searchForm.endTime = this.$options.filters.unixToDate(
this.searchForm.endTime / 1000
));
API_Shop.getBuyBillPage(this.searchForm).then((res) => {
this.loading = false;
if (res.success) {
this.data = res.result.records;
this.total = res.result.total;
}
});
this.total = this.data.length;
this.loading = false;
},
handleSubmit() {
this.$refs.form.validate((valid) => {
if (valid) {
this.submitLoading = true;
if (this.modalType === 0) {
// 添加 避免编辑后传入id等数据 记得删除
delete this.form.id;
this.postRequest("/bill/insertOrUpdate", this.form).then((res) => {
this.submitLoading = false;
if (res.success) {
this.$Message.success("操作成功");
this.getDataList();
this.modalVisible = false;
}
});
} else {
// 编辑
this.postRequest("/bill/insertOrUpdate", this.form).then((res) => {
this.submitLoading = false;
if (res.success) {
this.$Message.success("操作成功");
this.getDataList();
this.modalVisible = false;
}
});
}
}
});
},
add() {
this.modalType = 0;
this.modalTitle = "添加";
this.$refs.form.resetFields();
delete this.form.id;
this.modalVisible = true;
},
detail(v) {
let id = v.id;
this.$router.push({
name: "bill-detail",
query: { id: id },
});
},
remove(v) {
this.$Modal.confirm({
title: "确认删除",
// 记得确认修改此处
content: "您确认要删除 " + v.name + " ?",
loading: true,
onOk: () => {
// 删除
this.deleteRequest("/bill/delByIds/" + v.id).then((res) => {
this.$Modal.remove();
if (res.success) {
this.$Message.success("操作成功");
this.getDataList();
}
});
// 模拟请求成功
//this.$Message.success("操作成功");
//this.$Modal.remove();
//this.getDataList();
},
});
},
delAll() {
if (this.selectCount <= 0) {
this.$Message.warning("您还未选择要删除的数据");
return;
}
this.$Modal.confirm({
title: "确认删除",
content: "您确认要删除所选的 " + this.selectCount + " 条数据?",
loading: true,
onOk: () => {
let ids = "";
this.selectList.forEach(function (e) {
ids += e.id + ",";
});
ids = ids.substring(0, ids.length - 1);
// 批量删除
this.deleteRequest("/bill/delByIds/" + ids).then((res) => {
this.$Modal.remove();
if (res.success) {
this.$Message.success("操作成功");
this.getDataList();
}
});
},
});
},
},
mounted() {
this.init();
},
};
</script>
<style lang="scss">
// 建议引入通用样式 可删除下面样式代码
@import "@/styles/table-common.scss";
</style>

402
manager/src/views/seller/shop/shopAuditList.vue Normal file
View File

@@ -0,0 +1,402 @@
<template>
<div class="search">
<Row>
<Col>
<Card>
<Row @keydown.enter.native="handleSearch">
<Form ref="searchForm" :model="searchForm" inline :label-width="70" class="search-form">
<Form-item label="会员名称" prop="memberName">
<Input
type="text"
v-model="searchForm.memberName"
placeholder="请输入会员名称"
clearable
style="width: 200px"
/>
</Form-item>
<Form-item label="店铺名称" prop="storeName">
<Input
type="text"
v-model="searchForm.storeName"
placeholder="请输入店铺名称"
clearable
style="width: 200px"
/>
</Form-item>
<Form-item label="创建时间" prop="createTime">
<DatePicker v-model="selectDate" type="datetimerange" format="yyyy-MM-dd HH:mm:ss" clearable @on-change="selectDateRange" placeholder="选择起始时间" style="width: 200px"></DatePicker>
</Form-item>
<Button @click="handleSearch" type="primary" icon="ios-search" class="search-btn">搜索</Button>
</Form>
</Row>
<Row class="padding-row">
<Table :loading="loading" border :columns="columns" :data="data" ref="table" sortable="custom" @on-sort-change="changeSort" @on-selection-change="changeSelect"></Table>
</Row>
<Row type="flex" justify="end" class="page">
<Page :current="searchForm.pageNumber" :total="total" :page-size="searchForm.pageSize" @on-change="changePage" @on-page-size-change="changePageSize" :page-size-opts="[10, 20, 50]"
size="small" show-total show-elevator show-sizer></Page>
</Row>
</Card>
</Col>
</Row>
</div>
</template>
<script>
import {
getShopListData,
disableShop,
enableBrand,
shopAudit,
} from "@/api/shops";
import shopOperation from "./shopOperation";
export default {
name: "shop",
components: {
shopOperation,
},
data() {
return {
shopId: "",
modalFlag: false,
loading: true, // 表单加载状态
drop: false,
searchForm: {
// 搜索框初始化对象
pageNumber: 1, // 当前页数
pageSize: 10, // 页面大小
sort: "createTime", // 默认排序字段
order: "desc", // 默认排序方式
startDate: "", // 起始时间
endDate: "", // 终止时间
},
selectDate: null,
form: {
// 添加或编辑表单对象初始化数据
memberName: "",
storeName: "",
shopDisable: "",
id: "",
createTime: "",
},
// 表单验证规则
formValidate: {},
submitLoading: false, // 添加或编辑提交状态
selectList: [], // 多选数据
selectCount: 0, // 多选计数
columns: [
// 表头
{
title: "店铺名称",
key: "storeName",
minWidth: 120,
align: "left",
},
{
title: "会员名称",
key: "memberName",
align: "left",
minWidth: 120,
},
{
title: "店铺地址",
key: "storeAddressPath",
width: 300,
sortable: false,
},
{
title: "是否自营",
key: "selfOperated",
align: "left",
width: 120,
render: (h, params) => {
return h(
"Tag",
{
props: {
color: params.row.selfOperated ? "default" : "primary",
},
},
params.row.selfOperated == 0 ? "自营" : "非自营"
);
},
},
{
title: "创建时间",
key: "createTime",
align: "left",
width: 170,
sortable: false,
},
{
title: "操作",
key: "action",
width: 170,
align: "center",
fixed: "right",
render: (h, params) => {
let enableOrDisable = "";
if (params.row.storeDisable == "OPEN") {
enableOrDisable = h(
"Button",
{
props: {
size: "small",
type: "error"
},
style: {
marginRight: "5px",
},
on: {
click: () => {
this.disable(params.row);
},
},
},
"关闭"
);
} else if (params.row.storeDisable == "CLOSED") {
enableOrDisable = h(
"Button",
{
props: {
type: "success",
size: "small",
},
style: {
marginRight: "5px",
},
on: {
click: () => {
this.enable(params.row);
},
},
},
"开启"
);
} else if (params.row.storeDisable == "APPLYING") {
return h("div", [
h(
"Button",
{
props: {
type: "info",
size: "small",
},
style: {
marginRight: "5px",
},
on: {
click: () => {
this.audit(params.row);
},
},
},
"审核"
),
h(
"Button",
{
props: {
type: "primary",
size: "small",
},
style: {
marginRight: "5px",
},
on: {
click: () => {
this.edit(params.row);
},
},
},
"修改"
),
]);
}
return h("div", [
h(
"Button",
{
props: {
size: "small",
},
style: {
marginRight: "5px",
display: this.selectedShop ? "inline-block" : "none",
},
on: {
click: () => {
this.callback(params.row);
},
},
},
"选择"
),
h(
"Button",
{
props: {
type: "info",
size: "small",
},
style: {
marginRight: "5px",
},
on: {
click: () => {
this.edit(params.row);
},
},
},
"修改"
),
enableOrDisable,
]);
},
},
],
data: [], // 表单数据
total: 0, // 表单数据总数
selectedShop: false, //用于是否选择店铺
};
},
methods: {
callbackShop() {
this.init();
},
// 回调给父级
callback(val) {
this.$emit("callback", val);
},
init() {
this.getDataList();
},
changePage(v) {
this.searchForm.pageNumber = v;
this.getDataList();
this.clearSelectAll();
},
changePageSize(v) {
this.searchForm.pageSize = v;
this.getDataList();
},
handleSearch() {
this.searchForm.pageNumber = 1;
this.searchForm.pageSize = 10;
this.getDataList();
},
changeSort(e) {
this.searchForm.sort = e.key;
this.searchForm.order = e.order;
if (e.order === "normal") {
this.searchForm.order = "";
}
this.getDataList();
},
clearSelectAll() {
this.$refs.table.selectAll(false);
},
changeSelect(e) {
this.selectList = e;
this.selectCount = e.length;
},
selectDateRange(v) {
if (v) {
this.searchForm.startDate = v[0];
this.searchForm.endDate = v[1];
}
},
getDataList() {
this.loading = true;
// 带多条件搜索参数获取表单数据 请自行修改接口
this.searchForm.storeDisable='APPLYING'
getShopListData(this.searchForm).then((res) => {
this.loading = false;
if (res.success) {
this.data = res.result.records;
this.total = res.result.total;
}
});
this.total = this.data.length;
this.loading = false;
},
add() {
this.$router.push({ path: '/shop-operation'});
},
edit(v) {
this.$router.push({ path: '/shop-operation', query: { shopId: v.id } });
},
disable(v) {
this.$Modal.confirm({
title: "确认禁用",
content: "您确认要禁用店铺 " + v.storeName + " ?",
loading: true,
onOk: () => {
disableShop(v.id).then((res) => {
this.$Modal.remove();
if (res.success) {
this.$Message.success("操作成功");
this.getDataList();
}
});
},
});
},
audit(v) {
this.$Modal.confirm({
title: "审核店铺",
content: "您确认要审核通过店铺 " + v.storeName + " ?",
okText: "通过",
cancelText: "驳回",
loading: true,
onOk: () => {
shopAudit(v.id, 0).then((res) => {
this.$Modal.remove();
if (res.success) {
this.$Message.success("操作成功");
this.getDataList();
}
});
},
onCancel: () => {
shopAudit(v.id, 1).then((res) => {
this.$Modal.remove();
if (res.success) {
this.$Message.success("操作成功");
this.getDataList();
}
});
},
});
},
enable(v) {
this.$Modal.confirm({
title: "确认启用",
content: "您确认要启用店铺 " + v.storeName + " ?",
loading: true,
onOk: () => {
enableBrand(v.id).then((res) => {
this.$Modal.remove();
if (res.success) {
this.$Message.success("操作成功");
this.getDataList();
}
});
},
});
},
},
mounted() {
this.init();
},
};
</script>
<style lang="scss">
// 建议引入通用样式 可删除下面样式代码
@import "@/styles/table-common.scss";
</style>

126
manager/src/views/seller/shop/shopDetail.scss Normal file
View File

@@ -0,0 +1,126 @@
.head-title {
font-size: 18px;
color: rgba(0, 0, 0, 0.85);
font-weight: 400;
}
.detail-body{
margin-top: 17px;
overflow: hidden;
}
.head-info {
display: flex;
height: 130px;
background: #93b5e1;
padding: 12px;
border-radius: 4px;
align-items: center;
}
.ant-layout, .ant-layout * {
box-sizing: border-box;
}
.base-info {
background-color: #fff;
padding: 20px;
margin-bottom: 12px;
height: 250px;
}
.ant-col-md-6 {
display: block;
box-sizing: border-box;
width: 33%;
float: left;
margin-left: 20px;
}
.info-2{
float: left;
}
.ant-row {
position: relative;
height: auto;
margin-right: 0;
margin-left: 0;
zoom: 1;
display: block;
box-sizing: border-box;
}
.bottom-info {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 12px;
margin-top: 6px;
height: 36px;
background: #f5f5f5;
border-radius: 4px;
}
.ant-layout * {
box-sizing: border-box;
}
.name{
margin-left: 10px;
color: #fff;
font-size: 18px;
}
.phone{
margin-left: 20px;
font-size: 14px;
color: #fff;
}
.item {
display: flex;
align-items: flex-start;
line-height: 30px;
margin-bottom: 2px;
}
.label {
flex-basis: 95px;
//text-align: right;
color: rgba(0, 0, 0, 0.4);
flex-shrink: 0;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.info {
font-weight: 500;
padding-left: 0;
margin-bottom: 0;
width: 100%;
}
.pointsTitle {
background-color: #fafafa;
padding: 15px 20px;
display: flex;
font-size: 16px;
line-height: 1.8;
flex-direction: row;
justify-content: space-around;
color: #333;
text-align: center;
margin-bottom: 16px;
.points-top-title{
font-size: 14px;
font-weight: 400;
color: rgba(0, 0, 0, 0.4);
line-height: 14px;
margin-bottom: 8px;
}
.points-top-text {
font-size: 16px;
font-weight: 500;
color: #93b5e1;
line-height: 16px;
}
}
.point-data{
}

1003
manager/src/views/seller/shop/shopDetail.vue Normal file
View File

File diff suppressed because it is too large Load Diff

489
manager/src/views/seller/shop/shopList.vue Normal file
View File

@@ -0,0 +1,489 @@
<template>
<div class="search">
<Row>
<Col>
<Card>
<Row @keydown.enter.native="handleSearch">
<Form ref="searchForm" :model="searchForm" inline :label-width="70" class="search-form">
<Form-item label="会员名称" prop="memberName">
<Input
type="text"
v-model="searchForm.memberName"
placeholder="请输入会员名称"
clearable
style="width: 200px"
/>
</Form-item>
<Form-item label="店铺名称" prop="storeName">
<Input
type="text"
v-model="searchForm.storeName"
placeholder="请输入店铺名称"
clearable
style="width: 200px"
/>
</Form-item>
<Form-item label="店铺状态" prop="shopDisable">
<Select v-model="searchForm.shopDisable" clearable style="width: 200px">
<Option value="OPEN">开启中</Option>
<Option value="CLOSED">已关闭</Option>
<Option value="APPLY">申请中</Option>
<Option value="APPLYING">审核中</Option>
<Option value="REFUSED">审核拒绝</Option>
</Select>
</Form-item>
<Form-item label="创建时间" prop="createTime">
<DatePicker v-model="selectDate" type="datetimerange" format="yyyy-MM-dd HH:mm:ss" clearable @on-change="selectDateRange" placeholder="选择起始时间" style="width: 200px"></DatePicker>
</Form-item>
<Button @click="handleSearch" type="primary" icon="ios-search" class="search-btn">搜索</Button>
</Form>
</Row>
<Row class="operation padding-row">
<Button @click="add" type="primary">添加</Button>
</Row>
<Row>
<Table :loading="loading" border :columns="columns" :data="data" ref="table" sortable="custom" @on-sort-change="changeSort" @on-selection-change="changeSelect"></Table>
</Row>
<Row type="flex" justify="end" class="page">
<Page :current="searchForm.pageNumber" :total="total" :page-size="searchForm.pageSize" @on-change="changePage" @on-page-size-change="changePageSize" :page-size-opts="[10, 20, 50]"
size="small" show-total show-elevator show-sizer></Page>
</Row>
</Card>
</Col>
</Row>
</div>
</template>
<script>
import {
getShopListData,
disableShop,
enableBrand,
shopAudit,
} from "@/api/shops";
import shopOperation from "./shopOperation";
export default {
name: "shop",
components: {
shopOperation,
},
data() {
return {
shopId: "",
modalFlag: false,
loading: true, // 表单加载状态
drop: false,
searchForm: {
// 搜索框初始化对象
pageNumber: 1, // 当前页数
pageSize: 10, // 页面大小
sort: "createTime", // 默认排序字段
order: "desc", // 默认排序方式
startDate: "", // 起始时间
endDate: "", // 终止时间
},
selectDate: null,
form: {
// 添加或编辑表单对象初始化数据
memberName: "",
storeName: "",
shopDisable: "",
id: "",
createTime: "",
},
// 表单验证规则
formValidate: {},
submitLoading: false, // 添加或编辑提交状态
selectList: [], // 多选数据
selectCount: 0, // 多选计数
columns: [
// 表头
{
title: "店铺名称",
key: "storeName",
minWidth: 120,
align: "left",
},
{
title: "会员名称",
key: "memberName",
minWidth: 130,
tooltip: true
},
{
title: "店铺地址",
key: "storeAddressPath",
width: 300,
tooltip: true
},
{
title: "是否自营",
key: "selfOperated",
align: "left",
width: 120,
render: (h, params) => {
return h(
"Tag",
{
props: {
color: params.row.selfOperated ? "error" : "success",
},
},
params.row.selfOperated ? "自营" : "非自营"
);
},
},
{
title: "店铺状态",
key: "storeDisable",
align: "left",
width: 130,
render: (h, params) => {
if (params.row.storeDisable == "OPEN") {
return h("div", [
h("Badge", {
props: {
status: "success",
text: "开启中",
},
}),
]);
} else if (params.row.storeDisable == "CLOSED") {
return h("div", [
h("Badge", {
props: {
status: "error",
text: "已关闭",
},
}),
]);
} else if (params.row.storeDisable == "APPLY") {
return h("div", [
h("Badge", {
props: {
status: "error",
text: "申请中",
},
}),
]);
} else if (params.row.storeDisable == "APPLYING") {
return h("div", [
h("Badge", {
props: {
status: "error",
text: "审核中",
},
}),
]);
} else if (params.row.storeDisable == "REFUSED") {
return h("div", [
h("Badge", {
props: {
status: "error",
text: "审核拒绝",
},
}),
]);
}
},
},
{
title: "创建时间",
key: "createTime",
align: "left",
width: 170
},
{
title: "操作",
key: "action",
width: 200,
align: "center",
fixed: "right",
render: (h, params) => {
let enableOrDisable = "";
if (params.row.storeDisable == "OPEN") {
enableOrDisable = h(
"Button",
{
props: {
size: "small",
type: "error"
},
style: {
marginRight: "5px",
},
on: {
click: () => {
this.disable(params.row);
},
},
},
"关闭"
);
} else if (params.row.storeDisable == "CLOSED") {
enableOrDisable = h(
"Button",
{
props: {
type: "success",
size: "small",
},
style: {
marginRight: "5px",
},
on: {
click: () => {
this.enable(params.row);
},
},
},
"开启"
);
} else if (params.row.storeDisable == "APPLYING") {
return h("div", [
h(
"Button",
{
props: {
type: "info",
size: "small",
},
style: {
marginRight: "5px",
},
on: {
click: () => {
this.audit(params.row);
},
},
},
"审核"
),
h(
"Button",
{
props: {
type: "primary",
size: "small",
},
style: {
marginRight: "5px",
},
on: {
click: () => {
this.edit(params.row);
},
},
},
"修改"
),
]);
}
return h("div", [
h(
"Button",
{
props: {
size: "small",
},
style: {
marginRight: "5px",
display: this.selectedShop ? "inline-block" : "none",
},
on: {
click: () => {
this.callback(params.row);
},
},
},
"选择"
),
h(
"Button",
{
props: {
type: "info",
size: "small",
},
style: {
marginRight: "5px",
},
on: {
click: () => {
this.detail(params.row);
},
},
},
"查看"
),
h(
"Button",
{
props: {
type: "info",
size: "small",
ghost:true
},
style: {
marginRight: "5px",
},
on: {
click: () => {
this.edit(params.row);
},
},
},
"修改"
),
enableOrDisable,
]);
},
},
],
data: [], // 表单数据
total: 0, // 表单数据总数
selectedShop: false, //用于是否选择店铺
};
},
methods: {
callbackShop() {
this.init();
},
// 回调给父级
callback(val) {
this.$emit("callback", val);
},
init() {
this.getDataList();
},
changePage(v) {
this.searchForm.pageNumber = v;
this.getDataList();
this.clearSelectAll();
},
changePageSize(v) {
this.searchForm.pageSize = v;
this.getDataList();
},
handleSearch() {
this.searchForm.pageNumber = 1;
this.searchForm.pageSize = 10;
this.getDataList();
},
changeSort(e) {
this.searchForm.sort = e.key;
this.searchForm.order = e.order;
if (e.order === "normal") {
this.searchForm.order = "";
}
this.getDataList();
},
clearSelectAll() {
this.$refs.table.selectAll(false);
},
changeSelect(e) {
this.selectList = e;
this.selectCount = e.length;
},
selectDateRange(v) {
if (v) {
this.searchForm.startDate = v[0];
this.searchForm.endDate = v[1];
}
},
getDataList() {
this.loading = true;
// 带多条件搜索参数获取表单数据 请自行修改接口
getShopListData(this.searchForm).then((res) => {
this.loading = false;
if (res.success) {
this.data = res.result.records;
this.total = res.result.total;
}
});
this.total = this.data.length;
this.loading = false;
},
add() {
this.$router.push({ path: '/shop-operation'});
},
edit(v) {
this.$router.push({ path: '/shop-operation', query: { shopId: v.id } });
},
disable(v) {
this.$Modal.confirm({
title: "确认禁用",
content: "您确认要禁用店铺 " + v.storeName + " ?",
loading: true,
onOk: () => {
disableShop(v.id).then((res) => {
this.$Modal.remove();
if (res.success) {
this.$Message.success("操作成功");
this.getDataList();
}
});
},
});
},
//查看店铺详细
detail(row){
this.$router.push({ name: "shop-detail", query: { id: row.id } });
},
audit(v) {
this.$Modal.confirm({
title: "审核店铺",
content: "您确认要审核通过店铺 " + v.storeName + " ?",
okText: "通过",
cancelText: "驳回",
loading: true,
onOk: () => {
shopAudit(v.id, 0).then((res) => {
this.$Modal.remove();
if (res.success) {
this.$Message.success("操作成功");
this.getDataList();
}
});
},
onCancel: () => {
shopAudit(v.id, 1).then((res) => {
this.$Modal.remove();
if (res.success) {
this.$Message.success("操作成功");
this.getDataList();
}
});
},
});
},
enable(v) {
this.$Modal.confirm({
title: "确认启用",
content: "您确认要启用店铺 " + v.storeName + " ?",
loading: true,
onOk: () => {
enableBrand(v.id).then((res) => {
this.$Modal.remove();
if (res.success) {
this.$Message.success("操作成功");
this.getDataList();
}
});
},
});
},
},
mounted() {
this.init();
},
};
</script>
<style lang="scss">
// 建议引入通用样式 可删除下面样式代码
@import "@/styles/table-common.scss";
</style>

617
manager/src/views/seller/shop/shopOperation.vue Normal file
View File

@@ -0,0 +1,617 @@
<template>
<div>
<Card>
<Tabs v-model="tabName" :animated="false" style="overflow: visible">
<Form ref="shopForm" :model="shopForm" :label-width="130" label-position="right" :rules="shopValidate">
<TabPane label="基本信息" class="tab" name="base">
<Divider orientation="left">基本信息</Divider>
<!-- 遮罩层 -->
<div v-if="isRead" class="mask">只读不可修改</div>
<div>
<FormItem label="会员名称" required prop="memberName">
<div class="item">
<Input disabled v-model="shopForm.memberName" />
<Button @click="selectMember()" v-if="!$route.query.shopId">选择会员</Button>
</div>
</FormItem>
<FormItem label="店铺名称" prop="storeName">
<Input v-model="shopForm.storeName" clearable style="width: 350px" />
</FormItem>
<FormItem label="是否自营" prop="selfOperated">
<RadioGroup v-model="shopForm.selfOperated">
<Radio :key=0 :label=0>自营</Radio>
<Radio :key=1 :label=1>非自营</Radio>
</RadioGroup>
</FormItem>
<FormItem label="店铺经纬度" prop="shopCenter">
<Input v-model="shopForm.storeCenter" @on-focus="$refs.liliMap.showMap = true" clearable style="width: 350px" />
</FormItem>
<FormItem label="店铺所在地" prop="storeAddressPath">
<Input disabled v-model="shopForm.storeAddressPath" style="width: 350px" />
</FormItem>
<FormItem label="店铺详细地址" required prop="storeAddressDetail">
<Input v-model="shopForm.storeAddressDetail" clearable style="width: 350px" />
</FormItem>
<FormItem label="店铺logo" class="storeLogo">
<Avatar style="height: 100px;width: 100px" v-if="shopForm.storeLogo" shape="square" icon="ios-person" size="default" :src="shopForm.storeLogo" />
<div>
<Button @click="handleCLickImg('storeLogo')" type="primary">选择图片</Button>
</div>
</FormItem>
<FormItem label="店铺简介" prop="storeDesc" style="width: 350px">
<Input v-model="shopForm.storeDesc" type="textarea" :rows="4" clearable style="width: 400px" />
</FormItem>
<br>
<Divider orientation="left">退货收件地址</Divider>
<FormItem label="收件人姓名" prop="salesConsigneeName">
<Input v-model="shopForm.salesConsigneeName" clearable style="width: 350px" />
</FormItem>
<FormItem label="收件人手机" prop="salesConsigneeMobile">
<Input v-model="shopForm.salesConsigneeMobile" clearable maxlength="11" style="width: 350px" />
</FormItem>
<FormItem label="地址信息" prop="salesConsigneeAddressPath">
<Input v-model="shopForm.salesConsigneeAddressPath" disabled style="width: 305px" v-if="showRegion == false" />
<Button v-if="showRegion == false" @click="regionClick" :loading="submitLoading" type="primary" icon="ios-create-outline" style="margin-left: 8px">修改
</Button>
<region style="width: 350px" @selected="selectedConsigneeRegion" v-if="showRegion == true" />
</FormItem>
<FormItem label="详细地址" prop="salesConsigneeDetail">
<Input v-model="shopForm.salesConsigneeDetail" clearable style="width: 350px" />
</FormItem>
<Spin fix v-if="loading"></Spin>
</div>
</TabPane>
<TabPane label="入驻信息" class="tab" name="sms">
<!-- 遮罩层 -->
<div v-if="isRead" class="mask">只读不可修改</div>
<Divider orientation="left">公司信息</Divider>
<div>
<FormItem label="公司名称" required prop="companyName">
<Input v-model="shopForm.companyName" clearable style="width: 350px" />
</FormItem>
<FormItem label="公司电话" required prop="companyPhone">
<Input v-model="shopForm.companyPhone" clearable style="width: 350px" />
</FormItem>
<FormItem label="公司所在地" required>
<Input v-model="shopForm.companyAddressPath" disabled style="width: 260px" v-if="showRegion == false" />
<Button v-if="showRegion == false" @click="regionClick" :loading="submitLoading" type="primary" icon="ios-create-outline" style="margin-left: 8px">修改
</Button>
<region style="width: 350px" @selected="selectedRegion" v-if="showRegion == true" />
</FormItem>
<FormItem label="公司详细地址" required prop="companyAddress">
<Input v-model="shopForm.companyAddress" clearable style="width: 350px" />
</FormItem>
<FormItem label="员工总数" required prop="employeeNum">
<InputNumber style="width: 150px" :min="1" :max="9999999" v-model="shopForm.employeeNum">
</InputNumber>
</FormItem>
<FormItem label="注册资金" required prop="registeredCapital">
<InputNumber style="width: 150px" :min="1" :max="9999999" v-model="shopForm.registeredCapital">
</InputNumber>
<span style="margin-left: 10px">万</span>
</FormItem>
<FormItem label="联系人姓名" required prop="linkName">
<Input v-model="shopForm.linkName" clearable style="width: 200px" />
</FormItem>
<FormItem label="联系人手机" required prop="linkPhone">
<Input v-model="shopForm.linkPhone" maxlength="11" clearable style="width: 200px" />
</FormItem>
<FormItem label="电子邮箱" required prop="companyEmail">
<Input v-model="shopForm.companyEmail" clearable style="width: 200px" />
</FormItem>
<Divider orientation="left">营业执照信息</Divider>
<FormItem label="营业执照号" required prop="licenseNum">
<Input v-model="shopForm.licenseNum" clearable style="width: 200px" />
</FormItem>
<FormItem label="法定经营范围" required prop="scope">
<Input v-model="shopForm.scope" clearable style="width: 200px" />
</FormItem>
<Divider orientation="left">法人信息</Divider>
<FormItem label="法人姓名" required prop="legalName">
<Input v-model="shopForm.legalName" clearable style="width: 200px" />
</FormItem>
<FormItem label="法人证件号" required prop="legalId">
<Input v-model="shopForm.legalId" clearable style="width: 200px" />
</FormItem>
<FormItem label="法人身份证照片" required ref="legalPhoto">
<Avatar style="height: 100px;width: 100px" v-if="shopForm.legalPhoto" shape="square" icon="ios-person" size="default" :src="shopForm.legalPhoto" />
<div>
<Button @click="handleCLickImg('legalPhoto')" type="primary">选择图片</Button>
</div>
</FormItem>
<Divider orientation="left">结算银行信息</Divider>
<FormItem label="银行开户名" required prop="settlementBankAccountName">
<Input v-model="shopForm.settlementBankAccountName" clearable style="width: 200px" />
</FormItem>
<FormItem label="银行账号" required prop="settlementBankAccountNum">
<Input v-model="shopForm.settlementBankAccountNum" clearable style="width: 200px" />
</FormItem>
<FormItem label="银行支行名称" required prop="settlementBankBranchName">
<Input v-model="shopForm.settlementBankBranchName" clearable style="width: 200px" />
</FormItem>
<FormItem label="支行联行号" required prop="settlementBankJointName">
<Input v-model="shopForm.settlementBankJointName" clearable style="width: 200px" />
</FormItem>
<FormItem label="许可证电子版" required>
<Avatar style="height: 100px;width: 100px" v-if="shopForm.licencePhoto" shape="square" icon="ios-person" size="default" :src="shopForm.licencePhoto" />
<div>
<Button @click="handleCLickImg('licencePhoto')" type="primary">选择图片</Button>
</div>
</FormItem>
<Spin fix v-if="loading"></Spin>
</div>
</TabPane>
<TabPane label="经营范围" class="tab" name="category">
<!-- 遮罩层 -->
<div v-if="isRead" class="mask">只读不可修改</div>
<FormItem label="经营类目" prop="goodsManagementCategory">
<div>
<Checkbox :indeterminate="indeterminate" :value="checkAll" @click.prevent.native="handleCheckAll">全选
</Checkbox>
</div>
<CheckboxGroup v-model="checkAllGroup" @on-change="checkAllGroupChange">
<Checkbox v-for="(item, i) in categories" :key="i + 1" :label="item.id">{{ item.name }}
</Checkbox>
</CheckboxGroup>
</FormItem>
</TabPane>
<TabPane label="配送信息" class="tab" name="distribution">
<!-- 遮罩层 -->
<FormItem label="达达编码" prop="ddCode">
<Input v-model="shopForm.ddCode" maxlength="20" clearable style="width: 200px" />
</FormItem>
</TabPane>
<TabPane label="结算信息" class="tab" name="settlement">
<FormItem label="结算周期">
<Tag v-for="item in settlementCycle" :key="item" :name="item" closable style="marrgin-left: 10px" @on-close="removesettlementCycle">{{ item }}
</Tag>
<InputNumber :max="28" :min="1" v-model="day" v-show="settlementShow"></InputNumber>
<Button type="default" @click="addsettlementCycle" size="small" v-if="addSettlementBtn" style="margin-left: 8px">添加结算周期
</Button>
<Button v-if="addSettlementConfirmBtn" type="default" @click="addsettlementCycleConfirm" size="small" style="margin-left: 8px">确认
</Button>
</FormItem>
</TabPane>
</Form>
</Tabs>
<div align="center">
<Button type="primary" @click="save" v-if="!isRead" style="width: 100px; margin-right: 5px">{{ shopId ? "修改" :
"保存" }}
</Button>
</div>
</Card>
<liliMap ref="liliMap" @getAddress="getAddress"></liliMap>
<Modal width="1200px" v-model="picModalFlag">
<ossManage @callback="callbackSelected" ref="ossManage" />
</Modal>
<Modal width="1200px" v-model="memberModalFlag">
<memberLayout @callback="callbackMember" class="selectedMember" ref="memberLayout" />
</Modal>
</div>
</template>
<script>
import memberLayout from "@/views/member/list/index";
import ossManage from "@/views/sys/oss-manage/ossManage";
import { getCategoryTree } from "@/api/goods";
import { shopDetail, shopAdd, shopEdit, getShopByMemberId } from "@/api/shops";
import * as filters from "@/utils/filters";
import uploadPicInput from "@/views/my-components/lili/upload-pic-input";
import region from "@/views/lili-components/region";
import liliMap from "@/views/my-components/map/index";
export default {
name: "shop-operation",
components: {
uploadPicInput,
ossManage,
region,
memberLayout,
liliMap,
},
data() {
return {
shopId: this.$route.query.shopId,
isRead: false, //是否只读，只有在店铺通过审核才可修改
regionAddressFlag: true,
selectedFormBtnName: "", //点击图片绑定form
picModalFlag: false, //图片选择器
memberModalFlag: false, //商家账号
settlementShow: false, //是否展示结算日输入框
addSettlementConfirmBtn: false, //添加结算日确认按钮
addSettlementBtn: true, //添加结算日按钮
day: 0, //结算日
shopValidate: {
// 表单验证规则
memberName: [
{ required: true, message: "会员不能为空", trigger: "blur" },
],
storeName: [
{ required: true, message: "店铺名称不能为空", trigger: "blur" },
],
companyAddress: [
{ required: true, message: "公司地址不能为空", trigger: "blur" },
],
storeAddressDetail: [
{ required: true, message: "店铺详细地址不能为空", trigger: "blur" },
],
storeDesc: [
{ required: true, message: "店铺简介不能为空", trigger: "blur" },
],
storeCenter: [
{ required: true, message: "店铺经纬度不能为空", trigger: "change" },
],
companyName: [
{ required: true, message: "公司名称不能为空", trigger: "blur" },
],
companyPhone: [
{ required: true, message: "公司电话不能为空", trigger: "blur" },
],
employeeNum: [
{
required: true,
type: "number",
message: "员工总数不能为空",
trigger: "blur",
},
],
registeredCapital: [
{
required: true,
type: "number",
message: "注册资金不能为空",
trigger: "blur",
},
],
linkName: [
{ required: true, message: "联系人姓名不能为空", trigger: "blur" },
],
linkPhone: [
{ required: true, message: "联系人手机号不能为空", trigger: "blur" },
{
type: "string",
pattern: /^1[3|4|5|6|7|8][0-9]{9}$/,
message: "手机号格式出错",
trigger: "blur",
},
],
companyEmail: [
{ required: true, message: "邮箱不能为空", trigger: "blur" },
{ type: "email", message: "邮箱格式错误", trigger: "blur" },
],
licenseNum: [
{ required: true, message: "营业执照号不能为空", trigger: "blur" },
],
scope: [
{ required: true, message: "法定经营范围不能为空", trigger: "blur" },
],
legalName: [
{ required: true, message: "法人姓名不能为空", trigger: "blur" },
],
legalId: [
{ required: true, message: "法人证件号不能为空", trigger: "blur" },
],
settlementBankAccountName: [
{ required: true, message: "银行开户名不能为空", trigger: "blur" },
],
settlementBankAccountNum: [
{ required: true, message: "银行账号不能为空", trigger: "blur" },
],
settlementBankBranchName: [
{ required: true, message: "银行支行名称不能为空", trigger: "blur" },
],
settlementBankJointName: [
{ required: true, message: "支行联行号不能为空", trigger: "blur" },
],
salesConsigneeMobile: [
{
type: "string",
pattern: /^1[3|4|5|6|7|8][0-9]{9}$/,
message: "手机号格式出错",
trigger: "blur",
},
],
},
selectMemberList: [],
memberList: [],
indeterminate: true,
checkAll: false,
checkAllGroup: [],
showRegion: false,
submitLoading: false, // 添加或编辑提交状态
settlementCycle: [],
shopForm: {
settlementCycle: "",
selfOperated: 0,
memberName: "",
companyName: "",
addressPath: "",
addressIdPath: "",
companyAddress: "",
companyEmail: "",
employeeNum: 1,
registeredCapital: 1,
linkName: "",
linkPhone: "",
licenseNum: "",
scope: "",
licencePhoto: "",
legalName: "",
legalId: "",
legalPhoto: "",
companyPhone: "",
settlementBankAccountName: "",
settlementBankAccountNum: "",
settlementBankBranchName: "",
settlementBankJointName: "",
businesses: "",
storeName: "",
storeLogo: "",
storeDesc: "",
ddCode: "",
},
categories: [],
infoResult: "",
};
},
methods: {
// 选择会员的回调
callbackMember(val) {
if (val) {
//选择会员后需要检验此会员是否开过店铺
getShopByMemberId(val.id).then((res) => {
if (res.success) {
if (res.result != null) {
this.$Message.error("当前会员已经拥有店铺");
} else {
this.shopForm.memberId = val.id;
this.shopForm.memberName = val.username;
}
this.memberModalFlag = false;
}
});
}
},
//选择会员
selectMember() {
this.$refs["memberLayout"].selectedMember = true;
this.memberModalFlag = true;
},
//修改地址
regionClick() {
this.showRegion = true;
this.regionId = "";
},
//删除所选择的结算日
removesettlementCycle(event, name) {
this.settlementCycle = this.settlementCycle.filter((i) => i !== name);
},
//确认添加方法
addsettlementCycle() {
this.settlementShow = true;
this.addSettlementConfirmBtn = true;
this.addSettlementBtn = false;
},
//添加结算日
addsettlementCycleConfirm() {
console.warn(this.settlementCycle.includes(this.day + ""));
if (this.day !== null && !this.settlementCycle.includes(this.day + "")) {
this.settlementCycle.push(this.day);
}
this.addSettlementConfirmBtn = false;
this.addSettlementBtn = true;
this.settlementShow = false;
this.day = 1;
},
// 选择地址
selectedRegion(val) {
this.$set(this.shopForm, "companyAddressIdPath", val[0]);
this.$set(this.shopForm, "companyAddressPath", val[1]);
},
// 选中的地址
selectedConsigneeRegion(val) {
this.shopForm.salesConsigneeAddressPath = val[1];
this.shopForm.salesConsigneeAddressId = val[0];
},
handleCLickImg(val) {
this.$refs.ossManage.selectImage = true;
this.picModalFlag = true;
this.selectedFormBtnName = val;
},
callbackSelected(val) {
this.picModalFlag = false;
this.shopForm[this.selectedFormBtnName] = val.url;
},
init() {
this.getCategories();
if (this.shopId) {
this.getShopDetail();
}
},
filterMethod(value, option) {
if (value && option) {
return option.toUpperCase().indexOf(value.toUpperCase()) !== -1;
}
},
getShopDetail() {
shopDetail(this.shopId).then((res) => {
if (res.result) {
this.infoResult = res.result;
this.shopForm = res.result;
console.warn(this.shopForm);
this.checkAllGroup = this.shopForm.goodsManagementCategory.split(",");
if (this.shopForm.settlementCycle != "")
this.shopForm.settlementCycle.split(",").forEach((e) => {
this.settlementCycle.push(e);
});
}
});
},
save() {
this.$refs.shopForm.validate((valid) => {
//校验结算日是否已经确认完成
if (this.settlementShow) {
this.$Message.error("请确认当前所填结算日信息");
return;
}
if (valid) {
//校验经营类目
if (this.checkAllGroup == "") {
this.$Message.error("请选择店铺经营类目");
return;
}
//校验公司所在地
if (this.shopForm.companyAddressPath == "") {
this.$Message.error("请选择公司所在地");
return;
}
//处理结算日 去掉最后一个逗号存储
this.shopForm.goodsManagementCategory = this.checkAllGroup;
this.shopForm.settlementCycle = this.settlementCycle;
if (this.shopId) {
delete this.shopForm.memberId;
shopEdit(this.shopId, this.shopForm).then((res) => {
if (res.success) {
this.$Message.success("编辑成功");
this.$router.push({ name: "shopList" });
}
});
} else {
//添加店铺单独需要检验的参数
if (this.shopForm.memberName == "") {
this.$Message.error("请选择开店的会员");
return;
}
shopAdd(this.shopForm).then((resp) => {
if (resp.success) {
this.$Message.success("添加成功");
this.shopForm = {};
this.$router.push({ name: "shopList" });
}
});
}
}
});
},
//获取地址
getAddress(item) {
this.shopForm.storeCenter = item.position.lat + "," + item.position.lng;
this.$set(this.shopForm, "storeAddressPath", item.addr);
this.$set(this.shopForm, "storeAddressIdPath", item.addrId);
},
handleCheckAll() {
if (this.indeterminate) {
this.checkAll = false;
} else {
this.checkAll = !this.checkAll;
}
this.indeterminate = false;
if (this.checkAll) {
let checkAllDate = [];
this.categories.forEach((i) => checkAllDate.push(i.id));
this.checkAllGroup = checkAllDate;
} else {
this.checkAllGroup = [];
}
},
checkAllGroupChange(data) {
if (data.length === this.categories.length) {
this.indeterminate = false;
this.checkAll = true;
} else if (data.length > 0) {
this.indeterminate = true;
this.checkAll = false;
} else {
this.indeterminate = false;
this.checkAll = false;
}
},
getCategories() {
getCategoryTree().then((res) => {
if (res.success) {
this.categories = res.result;
}
});
},
},
created() {
this.init();
},
};
</script>
<style lang="scss" scoped>
.selectedMember {
width: 100%;
}
.mask {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(105, 105, 105, 0.1);
z-index: 9;
}
/deep/ .ivu-tabs-bar {
margin: 0;
}
.tab {
padding: 16px;
position: relative;
}
.categories-checkbox {
display: flex;
align-items: center;
}
.img {
margin-right: 10px;
width: 100px;
height: 100px;
}
.item {
width: 350px !important;
display: flex;
> * {
margin: 0 4px;
}
}
</style>