zm/nuttyreading-master-html
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

订单完善

Browse Source
This commit is contained in:
@fawn-nine
2023-11-01 17:08:28 +08:00
parent c7d77c2249
commit 496c0c4cf4
2 changed files with 155 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
src/views/modules/order/buyorder.vue
View File

@@ -177,10 +177,10 @@
</el-tooltip>
<div class=" productItem k4545">
<img :class="children.expressInfo && children.expressInfo.expressOrderSn != null ? 'greeyImg' : 'lightImg'" :src="children.productImage" width="60px" height="60px">
</div>
</div>
<div class="price " style="flex:1">
<div class="bookName">{{ children.productName }}</div>
<div class="bookName">{{ children.productName }} &nbsp;
<i v-if="children.books && children.books.length > 0" @click.stop="seeBooks(children.books)" class="el-icon-view" style="color:#409eff; cursor: pointer;"></i></div>
<div><span>￥{{ children.productPrice }}</span> × {{ children.quantity }} </div>
</div>
@@ -279,7 +279,7 @@
{{ (pageIndex - 1) * pageSize + scope.$index + 1 }}
</template>
</el-table-column> -->
<el-table-column prop="orderSn" header-align="center" align="center" label="订单编号" width="300">
<el-table-column prop="orderSn" header-align="center" align="center" label="订单编号" width="150">
</el-table-column>
<!-- <el-table-column prop="userName" header-align="center" align="center" label="下单人姓名">
</el-table-column> -->
@@ -356,9 +356,25 @@
</el-table-column> -->
<el-table-column prop="createTime" header-align="center" align="center" label="下单时间">
</el-table-column>
<el-table-column prop="shippingTime" header-align="center" align="center" label="发货时间">
<el-table-column prop="goodsList" header-align="center" align="center" label="下单商品" width="500">
<template slot-scope="scope">
<!-- {{scope.row.goodsList}} -->
<div v-for="(item, index) in scope.row.goodsList" :key="index">
<div class="flexbox" style="align-items:center; margin-bottom:10px">
<div class="img">
<img style="padding: 2px; border:1px solid #f1f1f1; margin-right: 5px;" :src="item.productImage" width="40px" height="40px">
</div>
<div>
<span>{{item.productName}} [ ×{{item.quantity}} ]
<i v-if="item.books && item.books.length > 0" @click.stop="seeBooks(item.books)" class="el-icon-view" style="color:#409eff; cursor: pointer;"></i></span>
</div>
</div>
</div>
</template>
</el-table-column>
<el-table-column prop="orderStatus" header-align="center" align="center" label="订单状态">
<!-- <el-table-column prop="shippingTime" header-align="center" align="center" label="发货时间">
</el-table-column> -->
<el-table-column prop="orderStatus" header-align="center" align="center" label="订单状态" width="80">
<template slot-scope="scope">
<el-tag v-if="scope.row.orderStatus == 0" type="success">待付款</el-tag>
<el-tag v-if="scope.row.orderStatus == 1" type="success">待发货</el-tag>
@@ -458,6 +474,28 @@
<el-button type="primary" @click="changeAddress">确 定</el-button>
</span>
</el-dialog>
<el-dialog center
title="商品包含的书籍信息"
:visible.sync="booksShow"
width="500"
:close="booksHandleClose">
<div>
<span>该商品共包含了 {{currBookLIst.length}} 个书籍</span>
<ul class="booksUl ">
<li class="flexbox" v-for="item in currBookLIst" :key="item.id">
<div class="img">
<img style="padding: 2px; border:1px solid #f1f1f1; margin-right: 5px;" :src="item.images" width="100px" height="100px">
</div>
<div>
<span>{{item.name}}[{{item.id}}]</span>
</div>
</li>
</ul>
</div>
<span slot="footer" class="dialog-footer">
<el-button type="primary" @click="booksHandleClose">确 定</el-button>
</span>
</el-dialog>
<el-pagination v-if="tabChange.isPrint != 1" @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex"
:page-sizes="[40, 60, 100, 150]" :page-size="pageSize" :total="totalPage"
layout="total, sizes, prev, pager, next, jumper">
@@ -619,6 +657,8 @@ export default {
},
SheetSelectionList:[],
addressLoad:false, // 省份加载动画
booksShow: false, // 展示包含书籍信息
currBookLIst:[]
}
},
components: {
@@ -633,6 +673,14 @@ export default {
}
},
methods: {
seeBooks(arr){
this.currBookLIst = arr
this.booksShow = true
},
booksHandleClose(){
this.currBookLIst = []
this.booksShow = false
},
changeAddress(){
console.log(this.addressForm.orderSn,'this.addressForm')
if(this.addressForm.provinceCode && this.addressForm.cityCode && this.addressForm.countyCode){
@@ -1217,6 +1265,9 @@ export default {
}
</style>
<style lang="less" scoped>
.booksUl{ overflow: hidden; margin-top: 15px; padding-left: 0;
li{list-style: none; width: 50%; float: left; align-items: center; margin-bottom: 15px;}
}
.flexbox {
display: flex;
}

125
src/views/modules/order/buyorderdetail.vue
View File

@@ -53,30 +53,7 @@
<li><span class="infoTitle">积分抵扣：</span><span>{{orderDetails.districtPrice}}</span></li>
<li class="line"></li>
</div>
<div style="clear:both"></div>
<div class="liName">物流信息 <a href="#" @click="changeAddressShow" v-if="orderDetails.orderStatus <= 1"><i class="el-icon-edit"></i>修改收货信息</a></div>
<li><span class="infoTitle">收货人：</span><span>{{orderDetails.consignee.consigneeName}}</span>&nbsp;&nbsp;&nbsp;<span>{{orderDetails.consignee.consigneeMobile}}</span></li>
<li><span class="infoTitle">收货地址：</span><span>{{orderDetails.consignee.province}}-{{orderDetails.consignee.city}}-{{orderDetails.consignee.county}}-{{orderDetails.consignee.address}}</span></li>
<!-- <el-alert title="`该订单下共有 2 条物流信息`" type="info">
</el-alert> -->
<li class="flexbox deliverBox" style="width: 100%;" v-if="sheetList.length > 0">
<el-row :gutter="20" style="100%">
<el-col :md="12" :lg="8" class="item" v-for="(item, index) in sheetList" :key="index">
<div class="deliver_heade">
<!-- <div><span class="infoTitle">物流公司：</span><span>{{item.expressCompanyName}}</span></div> -->
<div><span class="infoTitle">运单号：</span><span style="margin-right:10px">{{item.expressOrderSn}}</span>
<el-button type="primary" size="mini" plain @click="seeSheetDetails(item)">查看物流进度</el-button>
</div>
<div></div>
</div>
</el-col>
</el-row>
</li>
<li class="line" style="margin:10px 0;"></li>
<div style="clear:both"></div>
<!-- 订单商品 -->
<div class="liName">商品信息</div>
<el-table :data="orderDetails.goodsList"
@@ -87,7 +64,8 @@
<template slot-scope="scope">
<div class="flexbox">
<img style="padding: 2px; border:1px solid #f1f1f1; margin-right: 5px;" :src="scope.row.productImage" width="30px" height="30px">
<div class="proname">{{ scope.row.productName}}</div>
<div class="proname">{{ scope.row.productName}}
<i v-if="scope.row.books && scope.row.books.length > 0" @click.stop="seeBooks(scope.row.books)" class="el-icon-view" style="color:#409eff; cursor: pointer;"></i></div>
</div>
</template>
</el-table-column>
@@ -101,6 +79,50 @@
label="数量" width="80">
</el-table-column>
</el-table>
<div v-if="orderDetails.consignee" style="margin-top:20px">
<div class="liName">物流信息 <a href="#" @click="changeAddressShow" v-if="orderDetails.orderStatus <= 1"><i class="el-icon-edit"></i>修改收货信息</a></div>
<div style="background:#f9f9f9; padding:5px; overflow:hidden; ">
<li><span class="infoTitle">收货人：</span><span>{{orderDetails.consignee.consigneeName}}</span>&nbsp;&nbsp;&nbsp;<span>{{orderDetails.consignee.consigneeMobile}}</span></li>
<li><span class="infoTitle">收货地址：</span><span>{{orderDetails.consignee.province}}-{{orderDetails.consignee.city}}-{{orderDetails.consignee.county}}-{{orderDetails.consignee.address}}</span></li>
</div>
</div>
<!-- <el-alert title="`该订单下共有 2 条物流信息`" type="info">
</el-alert> -->
<li class="flexbox deliverBox" style="width: 100%;" v-if="orderDetails.orderStatus > 0 && sheetList && sheetList.length > 0">
<el-row :gutter="20" style="flex-wrap:wrap; width: 100%;" class="flexbox">
<el-col :md="12" :lg="12" class="item" v-for="(item, index) in sheetList" :key="index" style="margin-bottom:20px;">
<div class="deliver_heade">
<!-- <div><span class="infoTitle">物流公司：</span><span>{{item.expressCompanyName}}</span></div> -->
<div>
<span class="infoTitle">快递包裹 {{index+1}} 运单号：</span><span style="margin-right:10px">{{item.expressOrderSn}}</span>
<el-button type="primary" size="mini" plain @click="seeSheetDetails(item)">查看物流进度</el-button>
<!-- 包含的订单商品信息 -->
<div class="" v-if="sheetList && sheetList.length > 0" style="margin-top:15px; overflow:hidden; background:#f9f9f9; padding:10px;">
<ul class="sheetOrdersUl" style="overflow:hidden">
<li style="flex-wrap:wrap; margin-bottom:10px; width: 100%;">
<div style="width:100%" v-if="showChange">订单编号：{{item.orderSn}}
<i v-if="item.showProduct" @click.stop="showProducts(item, index)" class="el-icon-arrow-up myicon" style="color:#409eff; cursor: pointer;"></i>
<i v-else @click.stop="showProducts(item,index)" class="el-icon-arrow-down myicon" style="color:#409eff; cursor: pointer;"></i>
</div>
<div v-if="showChange && item.showProduct">
<div class="flexbox" v-for="item2 in item.products" :key="item2.productId" style="align-items:center; margin-bottom:10px">
<div class="img">
<img style="padding: 2px; border:1px solid #f1f1f1; margin-right: 5px;" :src="item2.productImages" width="60px" height="60px">
</div>
<div>
<span>{{item2.productName}} [ ×{{item2.quantity}} ]</span>
</div>
</div></div>
</li>
</ul>
</div>
</div>
</div>
</el-col>
</el-row>
</li>
<li class="line" style="margin:10px 0;"></li>
</ul>
</div>
<!-- 抽屉 -->
@@ -110,7 +132,7 @@
@close="drawerHandleClose">
<div class="deliver_info">
<div>运单信息：{{currentSheet.expressCompanyName}} - {{currentSheet.expressOrderSn}}</div>
<div class="scroll" style="padding: 10px;" v-if="traces.length > 0">
<div class="scroll" style="padding: 10px;" v-if="traces && traces.length > 0">
<el-timeline :reverse="reverse">
<el-timeline-item v-for="(activity, index2) in traces" :key="index2" :icon="activity.icon"
:timestamp="activity.acceptTime">
@@ -173,6 +195,28 @@
<el-button type="primary" @click="changeAddress">确 定</el-button>
</span>
</el-dialog>
<el-dialog center
title="商品包含的书籍信息"
:visible.sync="booksShow"
width="500"
:close="booksHandleClose">
<div>
<span>该商品共包含了 {{currBookLIst.length}} 个书籍</span>
<ul class="booksUl ">
<li class="flexbox" v-for="item in currBookLIst" :key="item.id">
<div class="img">
<img style="padding: 2px; border:1px solid #f1f1f1; margin-right: 5px;" :src="item.images" width="100px" height="100px">
</div>
<div>
<span>{{item.name}}[{{item.id}}]</span>
</div>
</li>
</ul>
</div>
<span slot="footer" class="dialog-footer">
<el-button type="primary" @click="booksHandleClose">确 定</el-button>
</span>
</el-dialog>
<!-- <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update> -->
<setDeliverDialog ref="setDeliverDialog" :visible="setDeliverVisible" :selectData="orderList"
@closeDeliverDialog='closeDeliverDialog'></setDeliverDialog>
@@ -242,6 +286,9 @@ export default {
],
},
sheetList:[], // 面单列表
currBookLIst:[],
booksShow: false,
showChange:true,
}
},
components: {
@@ -255,6 +302,20 @@ export default {
// this.getOrderSheetList()
},
methods: {
showProducts(item,index){
this.showChange = false
this.sheetList[index].showProduct = !item.showProduct
this.showChange = true
// console.log(this.sheetList,'this.sheetList[index].showProduct')
},
seeBooks(arr){
this.currBookLIst = arr
this.booksShow = true
},
booksHandleClose(){
this.currBookLIst = []
this.booksShow = false
},
drawerHandleClose(){
console.log('关闭')
this.traces = []
@@ -430,7 +491,10 @@ export default {
}).then(({ data }) => {
if (data && data.code === 0) {
// console.log(data.result,'data.result')
this.orderDetails = data.result
this.orderDetails = data.result
data.result.expressOrders.forEach(element => {
element.showProduct = false
});
this.sheetList = data.result.expressOrders
} else {
this.orderDetails = {}
@@ -456,6 +520,13 @@ export default {
</script>
<style lang="less" scoped>
.myicon{border: 1px solid #409eff;}
.booksUl{ overflow: hidden; margin-top: 15px; padding-left: 0;
li{list-style: none; width: 50%; float: left; align-items: center; margin-bottom: 15px;}
}
.sheetOrdersUl{padding-left: 0;
li{width: 100%;}
}
.orderType{
overflow: hidden; margin-bottom: 20px;
.item{