You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
278 lines
7.5 KiB
278 lines
7.5 KiB
<template>
|
|
<div class="search">
|
|
<Card>
|
|
<Row v-show="openSearch" @keydown.enter.native="handleSearch">
|
|
<Form ref="searchForm" :model="searchForm" inline :label-width="70">
|
|
<FormItem label="商品名" prop="productName">
|
|
<Input type="text" v-model="searchForm.productName" placeholder="请输入商品名" clearable
|
|
style="width: 200px" />
|
|
</FormItem>
|
|
<FormItem label="状态" prop="status">
|
|
<Select ref="dep" @on-change="checkStatus" style="width:200px">
|
|
<Option v-for="(item, i) in dictData" :key="i" :value="item.value">{{
|
|
item.title
|
|
}}</Option>
|
|
</Select>
|
|
</FormItem>
|
|
<FormItem style="margin-left: -35px" class="br">
|
|
<Button @click="handleSearch" type="primary" icon="ios-search">搜索</Button>
|
|
<Button @click="handleReset">重置</Button>
|
|
</FormItem>
|
|
</Form>
|
|
</Row>
|
|
<Row align="middle" justify="space-between" class="operation">
|
|
<div class="icons">
|
|
<Tooltip content="刷新" placement="top" transfer>
|
|
<Icon type="md-refresh" size="18" class="item" @click="getDataList" />
|
|
</Tooltip>
|
|
<Tooltip :content="openSearch ? '关闭搜索' : '开启搜索'" placement="top" transfer>
|
|
<Icon type="ios-search" size="18" class="item tip" @click="openSearch = !openSearch" />
|
|
</Tooltip>
|
|
<Tooltip :content="openTip ? '关闭提示' : '开启提示'" placement="top" transfer>
|
|
<Icon type="md-bulb" size="18" class="item tip" @click="openTip = !openTip" />
|
|
</Tooltip>
|
|
<Tooltip content="表格密度" placement="top" transfer>
|
|
<Dropdown @on-click="changeTableSize" trigger="click">
|
|
<Icon type="md-list" size="18" class="item" />
|
|
<DropdownMenu slot="list">
|
|
<DropdownItem :selected="tableSize == 'default'" name="default">默认</DropdownItem>
|
|
<DropdownItem :selected="tableSize == 'large'" name="large">宽松</DropdownItem>
|
|
<DropdownItem :selected="tableSize == 'small'" name="small">紧密</DropdownItem>
|
|
</DropdownMenu>
|
|
</Dropdown>
|
|
</Tooltip>
|
|
</div>
|
|
</Row>
|
|
<Table :loading="loading" border :columns="columns" :data="data" :size="tableSize" ref="table"
|
|
sortable="custom" ></Table>
|
|
<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>
|
|
<!-- 订单详情 -->
|
|
<Modal :title="订单详情" v-model="Visiable" :mask-closable="false" :scrollabele="true" :width="850">
|
|
<logistics-address v-if="Visiable" ref="dialog"></logistics-address>
|
|
<div slot="footer" v-show="Visiable">
|
|
<Button type="text" @click="Visiable = false">关闭</Button>
|
|
</div>
|
|
</Modal>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
getGroupList
|
|
} from "@/api/index";
|
|
import logisticsAddress from "@/views/app/business/recharge/logisticsAddress";
|
|
export default {
|
|
name: "recharge",
|
|
components: {
|
|
logisticsAddress,
|
|
},
|
|
data() {
|
|
return {
|
|
Visiable: false,
|
|
tableSize: "default",
|
|
openSearch: true, // 显示搜索
|
|
openTip: true, // 显示提示
|
|
loading: true, // 表单加载状态
|
|
searchForm: {
|
|
shopId:'',
|
|
headUserId:'',
|
|
status:'',
|
|
productName:'',
|
|
isFace:'',
|
|
pageNumber: 1,
|
|
pageSize: 10,
|
|
},
|
|
dictData: [{
|
|
title: "待成团",
|
|
value: 0
|
|
}, {
|
|
title: "成功",
|
|
value: 1
|
|
}, {
|
|
title: "失败",
|
|
value: 2
|
|
}, {
|
|
title: "面对面",
|
|
value: 3
|
|
}, {
|
|
title: "团长未支付",
|
|
value: "-1"
|
|
}],
|
|
columns: [{
|
|
type: "index",
|
|
width: 60,
|
|
align: "center",
|
|
},
|
|
{
|
|
title: "拼团编号",
|
|
key: "id",
|
|
align: "center",
|
|
},
|
|
{
|
|
title: "商品名",
|
|
key: "productName",
|
|
align: "center",
|
|
},
|
|
{
|
|
title: "成团时间",
|
|
key: "successTime",
|
|
align: "center",
|
|
render: (h, params) => {
|
|
return h(
|
|
"div",
|
|
this.formatDateTime(params.row.successTime)
|
|
);
|
|
}
|
|
},
|
|
{
|
|
title: "几人团/已拼成",
|
|
key: "targetMembers",
|
|
align: "center",
|
|
render: (h, params) => {
|
|
let re = params.row.targetMembers + '/' + params.row.currentMembers
|
|
return h(
|
|
"div",
|
|
re
|
|
);
|
|
}
|
|
},
|
|
{
|
|
title: "状态",
|
|
key: "status", //0 待成团 1成功 2失败 3面对面
|
|
align: "center",
|
|
render: (h, params) => {
|
|
let re = "",
|
|
color = "";
|
|
if (params.row.status == "3") {
|
|
re = "面对面";
|
|
color = "yellow";
|
|
} else if (params.row.status == "0") {
|
|
re = "待成团";
|
|
color = "yellow";
|
|
} else if (params.row.status == "1") {
|
|
re = "成功";
|
|
color = "green";
|
|
} else if (params.row.status == "2") {
|
|
re = "失败";
|
|
color = "red";
|
|
} else if (params.row.status == "-1"){
|
|
re = '团长发起拼团但未支付';
|
|
color = "red";
|
|
}
|
|
return h("div", [
|
|
h(
|
|
"Tag", {
|
|
props: {
|
|
color: color,
|
|
},
|
|
},
|
|
re
|
|
),
|
|
]);
|
|
},
|
|
},
|
|
{
|
|
title: "操作",
|
|
key: "action",
|
|
width: 200,
|
|
align: "center",
|
|
fixed: "right",
|
|
render: (h, params) => {
|
|
return h("div", [
|
|
|
|
h(
|
|
"a", {
|
|
on: {
|
|
click: () => {
|
|
this.getOrder(params.row.id);
|
|
},
|
|
},
|
|
},
|
|
"查看订单"
|
|
)
|
|
]);
|
|
},
|
|
},
|
|
],
|
|
data: [], // 表单数据
|
|
total: 0, // 表单数据总数
|
|
};
|
|
},
|
|
methods: {
|
|
init() {
|
|
this.getDataList();
|
|
},
|
|
changePage(v) {
|
|
this.searchForm.pageNumber = v;
|
|
this.getDataList();
|
|
},
|
|
formatDateTime(isoString) {
|
|
if (!isoString) return ''
|
|
const date = new Date(isoString)
|
|
const year = date.getFullYear()
|
|
const month = String(date.getMonth() + 1).padStart(2, '0')
|
|
const day = String(date.getDate()).padStart(2, '0')
|
|
const hours = String(date.getHours()).padStart(2, '0')
|
|
const minutes = String(date.getMinutes()).padStart(2, '0')
|
|
const seconds = String(date.getSeconds()).padStart(2, '0')
|
|
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
|
|
},
|
|
changePageSize(v) {
|
|
this.searchForm.pageSize = v;
|
|
this.getDataList();
|
|
},
|
|
checkStatus(v){
|
|
this.searchForm.status = v
|
|
},
|
|
handleSearch() {
|
|
this.searchForm.pageNumber = 1;
|
|
this.searchForm.pageSize = 10;
|
|
this.getDataList();
|
|
},
|
|
handleReset() {
|
|
this.$refs.searchForm.resetFields();
|
|
this.searchForm.pageNumber = 1;
|
|
this.searchForm.pageSize = 10;
|
|
// 重新加载数据
|
|
this.getDataList();
|
|
},
|
|
//点击查看订单
|
|
getOrder(v){
|
|
console.log(v)
|
|
this.Visiable = true
|
|
this.$nextTick(() => {
|
|
this.$refs.dialog.initRecharge(v);
|
|
});
|
|
},
|
|
changeTableSize(v) {
|
|
this.tableSize = v;
|
|
},
|
|
getDataList() {
|
|
this.loading = true;
|
|
// 带多条件搜索参数获取表单数据 请自行修改接口
|
|
getGroupList(this.searchForm).then((res) => {
|
|
this.loading = false;
|
|
if (res.success) {
|
|
this.data = res.result.records;
|
|
this.total = res.result.total;
|
|
if (this.data.length == 0 && this.searchForm.pageNumber > 1) {
|
|
this.searchForm.pageNumber -= 1;
|
|
this.getDataList();
|
|
}
|
|
}
|
|
});
|
|
},
|
|
},
|
|
mounted() {
|
|
this.init();
|
|
},
|
|
};
|
|
</script>
|
|
<style lang="less">
|
|
@import "@/styles/table-common.less";
|
|
</style>
|