net/xcx_temp_back
Template
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fixed 修改订单列表查询

Browse Source
This commit is contained in:
lwh 2023-09-01 16:20:56 +08:00
parent 6da2ac30ee
commit d3a9bbdc89
2 changed files with 217 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

81
src/views/business/OrderManage/Orders/index.vue
View File

@ -74,44 +74,52 @@
<!-- 表格渲染 prop="对应的字段"-->
<el-table v-loading="loading" :data="dataList" ref="tableRef" border highlight-current-row
@selection-change="handleSelectionChange">
<el-table-column type="selection" width="50" align="center" />
<el-table-column type="selection" width="50" align="center" />
<el-table-column prop="orderNumber" label="订单号" :show-overflow-tooltip="true" width="250" />
<el-table-column prop="goodsInfo" label="商品信息" width="350">
<el-table-column prop="goodsInfo" label="商品信息 / 单价与数量" width="450">
<template #default="scope">
<div class="goods-info-box">
<div class="order-num-box">
<div>订单号：<b>{{ scope.row.orderNumber }}</b></div>
<el-link class="copy" type="primary" @click="copyText(scope.row.orderNumber)">复制订单号</el-link>
</div>
<div class="goods-info-box" v-for="(item, idx) in scope.row.goodsInfoList" :key="idx">
<el-image preview-teleported :hide-on-click-modal="true" lazy class="table-td-thumb" fit="contain"
:src="scope.row.goodsInfo.goodsPicture?.split(',')[0]"
:preview-src-list="scope.row.goodsInfo.goodsPicture?.split(',')">
:src="item.goodsPicture?.split(',')[0]" :preview-src-list="item.goodsPicture?.split(',')">
<div><el-icon :size="15">
<document />
</el-icon></div>
</el-image>
<div>
<div class="goods-info-text m2">
{{ scope.row.goodsInfo.goodsName }}
{{ item.goodsName }}
</div>
<div>
<el-tag>{{ scope.row.goodsInfo.goodsSpecName }}</el-tag>
<el-tag type="info">{{ item.goodsSpecName }}</el-tag>
</div>
</div>
<div class="price-box">
<div>￥ {{ item.goodsPrice }}</div>
<div>× {{ item.goodsTotalNum }}</div>
</div>
</div>
</template>
</el-table-column>
<el-table-column prop="goodsInfo" label="单价/数量" width="150">
<!-- <el-table-column prop="goodsInfo" label="单价/数量" width="150">
<template #default="scope">
<div>￥ {{ scope.row.goodsInfo.goodsPrice }}</div>
<div>× {{ scope.row.goodsTotalNum }}</div>
</template>
</el-table-column>
</el-table-column> -->
<el-table-column prop="payPrice" label="实付款" width="150">
<template #default="scope">
<div>￥ {{ scope.row.goodsInfo.goodsPrice }}</div>
<div>￥ {{ scope.row.payPrice }}</div>
<div>(含运费：￥ {{ scope.row.expressPrice }})</div>
</template>
</el-table-column>
<el-table-column prop="goodsInfo" label="买家信息" width="250">
<el-table-column prop="goodsInfo" label="买家信息" width="200">
<template #default="scope">
<div class="goods-info-box">
<div class="avatar">
@ -129,32 +137,34 @@
</div>
</template>
</el-table-column>
<el-table-column prop="payType" label="支付方式" width="150">
<el-table-column prop="payType" label="支付方式" width="150">
<template #default="scope">
<dict-tag :options="pay_type" :value="scope.row.payType" />
</template>
</el-table-column>
<el-table-column prop="deliveryType" label="配送方式" width="150">
<el-table-column prop="deliveryType" label="配送方式" width="150">
<template #default="scope">
<dict-tag :options="delivery_type" :value="scope.row.deliveryType" />
</template>
</el-table-column>
<el-table-column prop="deliveryStatus" label="交易状态" width="200">
<el-table-column prop="deliveryStatus" label="交易状态" width="200">
<template #default="scope">
<div class="status-box">付款状态: &nbsp;<dict-tag :options="pay_status" :value="scope.row.payStatus" /></div>
<div class="status-box">发货状态: &nbsp;<dict-tag :options="delivery_status" :value="scope.row.deliveryStatus" /></div>
<div class="status-box">收货状态: &nbsp;<dict-tag :options="receipt_status" :value="scope.row.receiptStatus" /></div>
<div class="status-box">发货状态: &nbsp;<dict-tag :options="delivery_status" :value="scope.row.deliveryStatus" />
</div>
<div class="status-box">收货状态: &nbsp;<dict-tag :options="receipt_status" :value="scope.row.receiptStatus" />
</div>
<div class="status-box">订单状态: &nbsp;<dict-tag :options="order_status" :value="scope.row.orderStatus" /></div>
</template>
</el-table-column>
<el-table-column prop="createTime" label="下单时间" :show-overflow-tooltip="true" />
<el-table-column prop="createTime" label="下单时间" :show-overflow-tooltip="true" width="200" />
<el-table-column label="操作" width="350" fixed="right">
<el-table-column label="操作" width="250" fixed="right">
<template #default="scope">
<!-- <el-button type="primary" size="small" icon="edit" @click="handleUpdate(scope.row)"
v-hasPermi="['business:order:addOrUpdate']">编辑</el-button> -->
<el-button type="primary" size="small" icon="view" @click="handleDetail(scope.row)">详情</el-button>
<el-button type="primary" size="small" icon="view" @click="handleDetail(scope.row)">详情</el-button>
<el-button type="danger" size="small" icon="delete" @click="handleDelete(scope.row)"
v-hasPermi="['business:order:delete']">删除</el-button>
</template>
@ -179,6 +189,7 @@ import { exportOrder, orderList, delOrder } from '@/api/business/OrderManage/Ord
import AddDialog from "./components/AddDialog.vue";
import EditDialog from "./components/EditDialog.vue";
import DetailDialog from "./components/DetailDialog.vue";
import useClipboard from 'vue-clipboard3'
const AddDialogVisible = ref(false);
const EditDialogVisible = ref(false);
@ -205,6 +216,8 @@ const loading = ref(true)
// 路由
const router = useRouter();
const { toClipboard } = useClipboard()
const data = reactive({
form: {},
queryParams: {
@ -219,6 +232,15 @@ const dateRange = ref([])
// 业务方法
const copyText = async (val) => {
try {
await toClipboard(val)
proxy.$modal.msgSuccess('复制成功！')
} catch (e) {
console.log(e)
proxy.$modal.msgError('当前浏览器不支持')
}
}
// 字典获取
const pay_type = ref([]);
@ -386,10 +408,11 @@ function handleDetail(row) {
handleQuery()
</script>
<style>
<style lang="scss">
.goods-info-box {
display: flex;
justify-content: space-between;
margin: 10px 0;
}
.goods-info-text {
@ -411,9 +434,23 @@ handleQuery()
margin-right: 15px;
}
.status-box{
.status-box {
display: flex;
align-items: center;
margin-bottom: 2px;
}
.price-box{
width: 60px;
}
.order-num-box{
display: flex;
position: relative;
.copy{
position: absolute;
right: 0%;
}
}
</style>

159
src/views/business/OrderManage/Orders/orderDetail.vue
View File

@ -32,20 +32,151 @@
</el-card>
<!-- 订单信息 -->
<el-card class="box-card">
<!-- 订单操作 -->
<div class="order-operation">
<div class="card-title">订单操作</div>
<div class="btn-box">
<el-button type="primary">发 货</el-button>
</div>
</div>
<el-divider />
<div class="order-info">
<div class="card-title">订单信息</div>
<el-row class="order-info-box">
<el-col :span="8">订单号： 11111</el-col>
<el-col :span="8">实付款金额： 11111</el-col>
<el-col :span="8">支付方式： 11111</el-col>
</el-row>
<el-row class="order-info-box">
<el-col :span="8">配送方式： 11111</el-col>
<el-col :span="8">运费金额： 11111</el-col>
<el-col :span="8">订单状态： 11111</el-col>
</el-row>
<el-row class="order-info-box">
<el-col :span="8">订单号： 11111</el-col>
<el-col :span="8">买家信息： 11111</el-col>
<el-col :span="8"> 买家留言： 11111</el-col>
</el-row>
</div>
</el-card>
<!-- 商品信息 -->
<el-card class="box-card">
<div class="card-title">订单商品</div>
<el-table v-loading="loading" :data="dataList" ref="tableRef" highlight-current-row>
<el-table-column prop="goodsInfo" label="商品信息" width="850">
<!-- <template #default="scope">
<div class="goods-info-box">
<el-image preview-teleported :hide-on-click-modal="true" lazy class="table-td-thumb" fit="contain"
:src="scope.row.goodsPicture?.split(',')[0]" :preview-src-list="scope.row.goodsPicture?.split(',')">
<div><el-icon :size="15">
<document />
</el-icon></div>
</el-image>
<div>
<div class="goods-info-text m2">
{{ scope.row.goodsName }}
</div>
<div>
<el-tag type="info">{{ scope.row.goodsSpecName }}</el-tag>
</div>
</div>
</div>
</template> -->
</el-table-column>
<el-table-column prop="payPrice" label="编码" width="150" />
<el-table-column prop="payPrice" label="重量(Kg)" width="150" />
<el-table-column prop="payType" label="单价" width="150">
<!-- <template #default="scope">
<div>￥ 2</div>
</template> -->
</el-table-column>
<el-table-column prop="payType" label="购买数量" width="150">
<!-- <template #default="scope">
<div>￥ 2</div>
</template> -->
</el-table-column>
<el-table-column prop="payType" label="商品总价" width="150">
<!-- <template #default="scope">
<div>￥ 2</div>
</template> -->
</el-table-column>
</el-table>
<div class="order-summary-box">
<div>订单总额: &nbsp;￥111.00</div>
<div>运费金额: &nbsp;￥0.00</div>
<div>实付款金额: &nbsp;<b>￥111.00</b></div>
</div>
</el-card>
<!-- 收货信息 / 发货信息 -->
<!-- 订单信息 -->
<el-card class="box-card">
<div class="card-title">收货信息</div>
<el-row class="order-info-box">
<el-col :span="8">收货人姓名： 11111</el-col>
<el-col :span="8">联系电话： 11111</el-col>
<el-col :span="8">收货地区： 11111</el-col>
</el-row>
<el-row class="order-info-box">
<el-col :span="8">详细地址： 11111</el-col>
</el-row>
<el-divider />
<div class="card-title">发货信息</div>
<el-row class="order-info-box">
<el-col :span="8">物流公司： 11111</el-col>
<el-col :span="8">物流单号： 11111</el-col>
<el-col :span="8">发货状态： 11111</el-col>
</el-row>
<el-row class="order-info-box">
<el-col :span="8">发货时间： 11111</el-col>
</el-row>
</el-card>
</template>
<script setup>
const progress = ref(2)
const loading = ref(false)
const dataList = ref([])
</script>
<style lang="scss" scoped>
.box-card {
margin-bottom: 50px;
position: relative;
margin-bottom: 30px;
}
.card-title {
// font-size: 18px;
margin-bottom: 30px;
font-weight: bold;
}
.btn-box {
display: flex;
}
// 分割线
@ -63,7 +194,7 @@ const progress = ref(2)
text-align: center;
position: relative;
li{
li {
list-style: none;
}
@ -180,4 +311,28 @@ const progress = ref(2)
color: #fff;
}
}
// 信息盒子
.order-info{
margin-bottom: 10px;
}
.order-info-box {
font-size: 15px;
margin-top: 25px;
}
// 订单商品
.order-summary-box {
display: flex;
align-items: flex-end;
flex-direction: column;
margin: 20px 0;
div {
font-size: 15px;
margin-bottom: 5px;
}
}
</style>