fix: 积分订单样式改造
This commit is contained in:
parent
c3e5b629c5
commit
6a58e9edbc
|
|
@ -28,92 +28,166 @@
|
||||||
placeholder="商品名称"
|
placeholder="商品名称"
|
||||||
></el-input>
|
></el-input>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<!-- <el-form-item label="预售时间"> -->
|
<el-form-item label="订单状态">
|
||||||
<!-- <el-date-picker -->
|
<el-select
|
||||||
<!-- @change="changeValueOne" -->
|
v-model="formInline.orderStatus"
|
||||||
<!-- value-format="yyyy-MM-dd HH:mm:ss" -->
|
placeholder="请选择订单状态"
|
||||||
<!-- v-model="valueOne" -->
|
clearable
|
||||||
<!-- type="datetimerange" -->
|
style="width: 150px"
|
||||||
<!-- start-placeholder="开始日期" -->
|
>
|
||||||
<!-- end-placeholder="结束日期" -->
|
<el-option label="待备货" value="1"></el-option>
|
||||||
<!-- > -->
|
<el-option label="待取货" value="2"></el-option>
|
||||||
<!-- </el-date-picker> -->
|
<el-option label="待收货" value="3"></el-option>
|
||||||
<!-- </el-form-item> -->
|
<el-option label="已完成" value="4"></el-option>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
<el-form-item>
|
<el-form-item>
|
||||||
<el-button type="primary" @click="getList">查询</el-button>
|
<el-button type="primary" @click="getList">查询</el-button>
|
||||||
<el-button type="primary" @click="Reset">重置</el-button>
|
<el-button type="primary" @click="Reset">重置</el-button>
|
||||||
<el-button
|
|
||||||
type="success"
|
|
||||||
@click="
|
|
||||||
$router.push({ name: 'operation-management-total-order/index' })
|
|
||||||
"
|
|
||||||
>菜市场总订单</el-button
|
|
||||||
>
|
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-form>
|
</el-form>
|
||||||
<el-tabs v-model="formInline.group" @tab-click="handleClick">
|
<!-- <el-tabs v-model="formInline.group" @tab-click="handleClick">
|
||||||
<el-tab-pane
|
<el-tab-pane
|
||||||
v-for="item in statusList"
|
v-for="item in statusList"
|
||||||
:key="item.value"
|
:key="item.value"
|
||||||
:label="item.label"
|
:label="item.label"
|
||||||
:name="item.value"
|
:name="item.value"
|
||||||
></el-tab-pane>
|
></el-tab-pane>
|
||||||
</el-tabs>
|
</el-tabs> -->
|
||||||
<el-table :data="tableData" height="70vh" border style="width: 100%">
|
<el-table :data="tableData" height="70vh" border style="width: 100%">
|
||||||
<el-table-column type="expand">
|
<el-table-column
|
||||||
<template slot-scope="props">
|
label="商品单号"
|
||||||
<div style="padding-left: 20px" m="4">
|
prop="productOrderNo"
|
||||||
<el-table :data="props.row.productOrders" :border="true">
|
width="150"
|
||||||
<el-table-column type="index" width="50" label="序号">
|
align="center"
|
||||||
</el-table-column>
|
/>
|
||||||
<el-table-column label="商品订单号" prop="productOrderNo" />
|
<el-table-column
|
||||||
<el-table-column label="商品名称" prop="productName" />
|
label="结算单位订单号"
|
||||||
<el-table-column label="商品原价" prop="originPrice" />
|
prop="unitOrderNo"
|
||||||
<el-table-column label="商品终价" prop="finalPrice" />
|
width="150"
|
||||||
<el-table-column label="商品订单金额" prop="productOrderMoney" />
|
align="center"
|
||||||
<el-table-column label="商品数量" prop="productCount" />
|
/>
|
||||||
<el-table-column label="商品单价" prop="productFinalPrice" />
|
<el-table-column
|
||||||
<el-table-column label="商品图片" prop="productImg">
|
label="总订单号"
|
||||||
<template slot-scope="scope">
|
prop="totalOrderNo"
|
||||||
<el-image
|
width="120"
|
||||||
style="width: 60px; height: 60px"
|
align="center"
|
||||||
:src="scope.row.productImg"
|
/>
|
||||||
:preview-src-list="[scope.row.productImg]"
|
<el-table-column
|
||||||
|
label="总商品数量"
|
||||||
|
prop="productCount"
|
||||||
|
width="100"
|
||||||
|
align="center"
|
||||||
|
/>
|
||||||
|
<el-table-column
|
||||||
|
label="商品原价"
|
||||||
|
prop="originPrice"
|
||||||
|
width="100"
|
||||||
|
align="center"
|
||||||
>
|
>
|
||||||
</el-image>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
</el-table>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column label="总订单号" prop="orderNo" />
|
|
||||||
<el-table-column label="结算单位订单号" prop="unitOrderNo" />
|
|
||||||
<el-table-column label="总商品数量" prop="productCount" />
|
|
||||||
<el-table-column label="订单状态" prop="preSaleStage">
|
|
||||||
<template slot-scope="scope">
|
<template slot-scope="scope">
|
||||||
{{
|
¥{{ scope.row.originPrice || "0.00" }}
|
||||||
scope.row.preSaleStage === 1
|
|
||||||
? '已付定金'
|
|
||||||
: scope.row.preSaleStage === 2
|
|
||||||
? '已付尾款'
|
|
||||||
: '待付定金'
|
|
||||||
}}
|
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column label="顾客实际支付" prop="totalPayMoney" />
|
<el-table-column
|
||||||
<el-table-column label="商品总价" prop="productMoney" />
|
label="商品终价"
|
||||||
<el-table-column label="配送费" prop="deliveryMoney" />
|
prop="finalPrice"
|
||||||
<el-table-column label="优惠券减免" prop="couponMoney" />
|
width="100"
|
||||||
<el-table-column label="支付时间" prop="payTime" />
|
align="center"
|
||||||
<el-table-column label="预计送达时间" prop="predictDeliveryTime" />
|
>
|
||||||
<el-table-column label="预计收入" prop="predictIncome" />
|
|
||||||
<el-table-column label="距离" prop="distance" />
|
|
||||||
<el-table-column label="备注" prop="remark" />
|
|
||||||
<el-table-column fixed="right" width="100px" label="操作" align="center">
|
|
||||||
<template slot-scope="scope">
|
<template slot-scope="scope">
|
||||||
<el-button type="primary" size="mini" @click="view(scope.row)">
|
¥{{ scope.row.finalPrice || "0.00" }}
|
||||||
查看
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
label="商品数量"
|
||||||
|
prop="productQuantity"
|
||||||
|
width="100"
|
||||||
|
align="center"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<el-table-column
|
||||||
|
label="消耗积分"
|
||||||
|
prop="pointsUsed"
|
||||||
|
width="100"
|
||||||
|
align="center"
|
||||||
|
/>
|
||||||
|
<el-table-column
|
||||||
|
label="订单状态"
|
||||||
|
prop="orderStatus"
|
||||||
|
width="100"
|
||||||
|
align="center"
|
||||||
|
>
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<el-tag :type="getStatusTagType(scope.row.orderStatus)">
|
||||||
|
{{ getStatusText(scope.row.orderStatus) }}
|
||||||
|
</el-tag>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
label="顾客实际支付"
|
||||||
|
prop="totalPayMoney"
|
||||||
|
width="120"
|
||||||
|
align="center"
|
||||||
|
>
|
||||||
|
<template slot-scope="scope">
|
||||||
|
¥{{ scope.row.totalPayMoney || "0.00" }}
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
label="商品总价"
|
||||||
|
prop="productMoney"
|
||||||
|
width="100"
|
||||||
|
align="center"
|
||||||
|
>
|
||||||
|
<template slot-scope="scope">
|
||||||
|
¥{{ scope.row.productMoney || "0.00" }}
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
label="配送费"
|
||||||
|
prop="deliveryMoney"
|
||||||
|
width="80"
|
||||||
|
align="center"
|
||||||
|
>
|
||||||
|
<template slot-scope="scope">
|
||||||
|
¥{{ scope.row.deliveryMoney || "0.00" }}
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
label="优惠券减免"
|
||||||
|
prop="couponMoney"
|
||||||
|
width="100"
|
||||||
|
align="center"
|
||||||
|
>
|
||||||
|
<template slot-scope="scope">
|
||||||
|
¥{{ scope.row.couponMoney || "0.00" }}
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
label="支付时间"
|
||||||
|
prop="payTime"
|
||||||
|
width="150"
|
||||||
|
align="center"
|
||||||
|
/>
|
||||||
|
<el-table-column
|
||||||
|
label="预计收入"
|
||||||
|
prop="predictIncome"
|
||||||
|
width="100"
|
||||||
|
align="center"
|
||||||
|
>
|
||||||
|
<template slot-scope="scope">
|
||||||
|
¥{{ scope.row.predictIncome || "0.00" }}
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="关联总订单链接" width="120" align="center">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<el-button
|
||||||
|
type="text"
|
||||||
|
size="small"
|
||||||
|
@click="viewTotalOrder(scope.row)"
|
||||||
|
>
|
||||||
|
查看总订单
|
||||||
</el-button>
|
</el-button>
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
|
|
@ -137,69 +211,71 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import viewDetails from './popup/view-details.vue'
|
import viewDetails from "./popup/view-details.vue";
|
||||||
import { mapState } from 'vuex'
|
import { mapState } from "vuex";
|
||||||
export default {
|
export default {
|
||||||
components: { viewDetails },
|
components: { viewDetails },
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
valueOne: [],
|
valueOne: [],
|
||||||
formInline: {
|
formInline: {
|
||||||
group: '',
|
group: "",
|
||||||
shopId: '',
|
shopId: "",
|
||||||
pageNumber: 1,
|
pageNumber: 1,
|
||||||
pageSize: 10,
|
pageSize: 10,
|
||||||
productName: '',
|
productName: "",
|
||||||
startTime: '',
|
orderStatus: "",
|
||||||
endTime: ''
|
startTime: "",
|
||||||
|
endTime: ""
|
||||||
},
|
},
|
||||||
statusList: [
|
statusList: [
|
||||||
{
|
{
|
||||||
label: '全部订单',
|
label: "全部订单",
|
||||||
value: '0'
|
value: "0"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: '待备货',
|
label: "待备货",
|
||||||
value: '1'
|
value: "1"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: '待取货',
|
label: "待取货",
|
||||||
value: '2'
|
value: "2"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: '待收货',
|
label: "待收货",
|
||||||
value: '3'
|
value: "3"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: '已完成',
|
label: "已完成",
|
||||||
value: '4'
|
value: "4"
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
tableData: [],
|
tableData: [],
|
||||||
total: 0
|
total: 0
|
||||||
}
|
};
|
||||||
},
|
},
|
||||||
created() {
|
created() {
|
||||||
this.formInline = {
|
this.formInline = {
|
||||||
group: '0',
|
group: "0",
|
||||||
// marketId: this.marketId,
|
// marketId: this.marketId,
|
||||||
shopId: this.shopId,
|
shopId: this.shopId,
|
||||||
productName: '',
|
productName: "",
|
||||||
startTime: '',
|
orderStatus: "",
|
||||||
endTime: ''
|
startTime: "",
|
||||||
}
|
endTime: ""
|
||||||
this.valueOne = []
|
};
|
||||||
this.getList()
|
this.valueOne = [];
|
||||||
|
this.getList();
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
changeValueOne(e) {
|
changeValueOne(e) {
|
||||||
console.log(e)
|
console.log(e);
|
||||||
if (e) {
|
if (e) {
|
||||||
this.formInline.startTime = e[0]
|
this.formInline.startTime = e[0];
|
||||||
this.formInline.endTime = e[1]
|
this.formInline.endTime = e[1];
|
||||||
} else {
|
} else {
|
||||||
this.formInline.startTime = ''
|
this.formInline.startTime = "";
|
||||||
this.formInline.endTime = ''
|
this.formInline.endTime = "";
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
getList() {
|
getList() {
|
||||||
|
|
@ -210,48 +286,75 @@ export default {
|
||||||
orderCategory: 2
|
orderCategory: 2
|
||||||
})
|
})
|
||||||
.then(res => {
|
.then(res => {
|
||||||
console.log(res)
|
console.log(res);
|
||||||
this.tableData = res.data.data.data
|
this.tableData = res.data.data.data;
|
||||||
this.total = Number(res.data.data.total)
|
this.total = Number(res.data.data.total);
|
||||||
})
|
});
|
||||||
},
|
},
|
||||||
Reset() {
|
Reset() {
|
||||||
this.formInline = {
|
this.formInline = {
|
||||||
group: '0',
|
group: "0",
|
||||||
shopId: this.shopId,
|
shopId: this.shopId,
|
||||||
productName: '',
|
productName: "",
|
||||||
startTime: '',
|
orderStatus: "",
|
||||||
endTime: ''
|
startTime: "",
|
||||||
}
|
endTime: ""
|
||||||
this.valueOne = []
|
};
|
||||||
this.getList()
|
this.valueOne = [];
|
||||||
|
this.getList();
|
||||||
},
|
},
|
||||||
handleClick(e) {
|
handleClick(e) {
|
||||||
this.advanceSellStatus = e.name
|
this.advanceSellStatus = e.name;
|
||||||
this.getList()
|
this.getList();
|
||||||
},
|
},
|
||||||
view(row) {
|
view(row) {
|
||||||
this.$refs.viewDetails.toggle(row).update()
|
this.$refs.viewDetails.toggle(row).update();
|
||||||
|
},
|
||||||
|
viewOrderDetail(row) {
|
||||||
|
// 查看订单明细的逻辑
|
||||||
|
this.$message.info("查看订单明细功能待实现");
|
||||||
|
},
|
||||||
|
viewTotalOrder(row) {
|
||||||
|
// 查看总订单的逻辑
|
||||||
|
this.$message.info("查看总订单功能待实现");
|
||||||
|
},
|
||||||
|
getStatusText(status) {
|
||||||
|
const statusMap = {
|
||||||
|
1: "待备货",
|
||||||
|
2: "待取货",
|
||||||
|
3: "待收货",
|
||||||
|
4: "已完成"
|
||||||
|
};
|
||||||
|
return statusMap[status] || "未知状态";
|
||||||
|
},
|
||||||
|
getStatusTagType(status) {
|
||||||
|
const typeMap = {
|
||||||
|
1: "warning",
|
||||||
|
2: "primary",
|
||||||
|
3: "info",
|
||||||
|
4: "success"
|
||||||
|
};
|
||||||
|
return typeMap[status] || "";
|
||||||
},
|
},
|
||||||
handleSizeChange(val) {
|
handleSizeChange(val) {
|
||||||
this.formInline.pageSize = val
|
this.formInline.pageSize = val;
|
||||||
this.getList()
|
this.getList();
|
||||||
},
|
},
|
||||||
handleCurrentChange(val) {
|
handleCurrentChange(val) {
|
||||||
this.formInline.pageNumber = val
|
this.formInline.pageNumber = val;
|
||||||
this.getList()
|
this.getList();
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
...mapState('userData', [
|
...mapState("userData", [
|
||||||
'isMerchant',
|
"isMerchant",
|
||||||
'marketList',
|
"marketList",
|
||||||
'storeList',
|
"storeList",
|
||||||
'marketId',
|
"marketId",
|
||||||
'shopId'
|
"shopId"
|
||||||
])
|
])
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped></style>
|
<style lang="scss" scoped></style>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue