600 lines
12 KiB
Vue
600 lines
12 KiB
Vue
<!--
|
||
* @Descripttion:
|
||
* @version:
|
||
* @Author: kBank
|
||
* @Date: 2022-11-21 15:11:22
|
||
-->
|
||
<template>
|
||
<view class="content">
|
||
<view v-for="(item, index) in orderLists"
|
||
class="orderList_i">
|
||
<view @click.stop="getDetails(item)">
|
||
<view class="disFlex atm just mbt10">
|
||
<view class="disFlex atm">
|
||
<view class="quan">{{ item.orderTypeVal }}</view>
|
||
<view class="tit1">{{'订单编号'}}{{ item.orderCode }}</view>
|
||
</view>
|
||
<view class="tit2">
|
||
{{ item.orderStatusVal }}
|
||
</view>
|
||
</view>
|
||
<view v-for="ctem,cndex in item.itemList"
|
||
:key="cndex"
|
||
class="disFlex atm just mbt10">
|
||
<view class="disFlex atm">
|
||
<img :src="ctem.cover"
|
||
alt="">
|
||
<view class="tit3">
|
||
{{ ctem.productName }}
|
||
</view>
|
||
</view>
|
||
<view style="text-align:right">
|
||
<view class="tit4">
|
||
{{ ctem.price | numberToCurrency | isLocal}}
|
||
</view>
|
||
<view class="tit5">
|
||
x{{ ctem.quantity }}
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
<view class="tit1">
|
||
{{'创建时间'}}：{{ item.creationTime }}
|
||
</view>
|
||
</view>
|
||
<view class="xian"></view>
|
||
<view class="disFlex">
|
||
<view style="flex: 1;"></view>
|
||
<view class="disFlex">
|
||
<u-button type="primary"
|
||
class="lBtn"
|
||
:plain="true"
|
||
shape="circle"
|
||
:text="'撤销订单'"
|
||
@click="cancleOrder(item)"
|
||
color="#999"></u-button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<u-popup class="pop"
|
||
:show="detailsShow"
|
||
closeable
|
||
:round="10"
|
||
mode="center"
|
||
@close="detailsShow= false">
|
||
<view class="pop_a">
|
||
<view class="t_tit">
|
||
{{'订单详情'}}
|
||
</view>
|
||
<view class="pop_t">{{'商品信息'}}</view>
|
||
<view class="xian"></view>
|
||
<view class="orderList_a">
|
||
<view v-for="ctem,cndex in details.itemList"
|
||
:key="cndex"
|
||
class="disFlex atm just mbt10">
|
||
<view class="disFlex just"
|
||
style="flex:1">
|
||
<img :src="ctem.cover"
|
||
alt="">
|
||
<view style="flex:1">
|
||
<view class="disFlex atm just">
|
||
<view class="tit3">
|
||
{{ ctem.productName }}
|
||
</view>
|
||
<view class="tit5">
|
||
x{{ ctem.quantity }}
|
||
</view>
|
||
</view>
|
||
<view class="tit4">
|
||
{{ ctem.price | numberToCurrency | isLocal}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="disFlex atm just mbt10">
|
||
<view class="tit1">
|
||
{{'订单金额'}}
|
||
</view>
|
||
<view class="tit6">
|
||
{{ details.orderAmount |toThousandthAndKeepDecimal}}
|
||
</view>
|
||
</view>
|
||
<view class="disFlex atm just mbt10">
|
||
<view class="tit1">
|
||
{{'订单业绩'}}(PV)
|
||
</view>
|
||
<view class="tit6">
|
||
{{ details.orderAchieve |toThousandthAndKeepDecimal}}
|
||
</view>
|
||
</view>
|
||
<!-- <view class="disFlex atm just mbt10">
|
||
<view class="tit1">
|
||
{{'订单业绩'}}(BV)
|
||
</view>
|
||
<view class="tit6">
|
||
{{ details.orderAssAchieve |toThousandthAndKeepDecimal}}
|
||
</view>
|
||
</view> -->
|
||
<view class="xian"></view>
|
||
<view class="pop_t mbt10">
|
||
{{'收货人信息'}}
|
||
</view>
|
||
<view class="disFlex atm mbt10 tit6">
|
||
<view>
|
||
{{ details.recName }}
|
||
</view>
|
||
<view>
|
||
{{ details.recPhone }}
|
||
</view>
|
||
</view>
|
||
<view class="mbt10 tit1">
|
||
{{ details.recProvince }} {{ details.recCity }} {{ details.recCounty }} {{ details.address }}
|
||
</view>
|
||
</view>
|
||
</u-popup>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import * as api from '@/config/order.js'
|
||
export default {
|
||
data() {
|
||
return {
|
||
orderTypes: [],
|
||
rightShow: false,
|
||
remarkEd: '',
|
||
content: '确认取消订单?',
|
||
isRemark: false,
|
||
cancelCode: '',
|
||
details: '',
|
||
orderStatusList: [],
|
||
detailsShow: false,
|
||
isTab: -1,
|
||
// 查询参数
|
||
queryParams: {
|
||
pageNum: 1,
|
||
pageSize: 50,
|
||
},
|
||
select: {
|
||
orderType: '',
|
||
},
|
||
orderLists: [],
|
||
}
|
||
},
|
||
|
||
onLoad() {
|
||
this.getDataList()
|
||
},
|
||
onShow() {},
|
||
onReachBottom() {
|
||
this.queryParams.pageNum++
|
||
this.getDataList()
|
||
},
|
||
methods: {
|
||
cancleOrder(item) {
|
||
let that = this
|
||
uni.showModal({
|
||
title: '确定撤销订单?',
|
||
success: function (response) {
|
||
if (response.confirm) {
|
||
api.selfRevokeListCheck(item).then((res) => {
|
||
if (res.code == 200) {
|
||
api.selfRevokeOrder(item).then((res) => {
|
||
if (res.code == 200) {
|
||
uni.showToast({
|
||
title: res.msg,
|
||
icon: 'none',
|
||
duration: 1500,
|
||
})
|
||
that.orderLists = []
|
||
that.getDataList()
|
||
} else {
|
||
uni.showToast({
|
||
title: res.msg,
|
||
icon: 'none',
|
||
duration: 1500,
|
||
})
|
||
}
|
||
})
|
||
} else {
|
||
uni.showToast({
|
||
title: res.msg,
|
||
icon: 'none',
|
||
duration: 1500,
|
||
})
|
||
}
|
||
})
|
||
}
|
||
},
|
||
})
|
||
},
|
||
getDetails(item) {
|
||
api.orderDetails(item.orderCode).then((res) => {
|
||
this.details = res.data
|
||
this.detailsShow = true
|
||
})
|
||
},
|
||
getOrderStatus() {
|
||
api.orderStatus().then((res) => {
|
||
res.data.unshift({
|
||
label: '全部',
|
||
value: '',
|
||
})
|
||
this.orderStatusList = res.data
|
||
})
|
||
},
|
||
getDataList(index) {
|
||
api.selfRevokeList(Object.assign({}, this.queryParams)).then((res) => {
|
||
this.orderLists = this.orderLists.concat(res.rows)
|
||
this.total = res.total
|
||
})
|
||
},
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.index_header {
|
||
background: #fff;
|
||
font-size: 18px;
|
||
font-family: PingFang SC-Semibold, PingFang SC;
|
||
font-weight: 600;
|
||
color: #333333;
|
||
text-align: center;
|
||
padding: 10px 0;
|
||
position: fixed;
|
||
width: 100%;
|
||
z-index: 100000000;
|
||
}
|
||
|
||
.shareImg {
|
||
position: fixed;
|
||
margin: 14rpx 24rpx;
|
||
z-index: 1000000000;
|
||
right: 10rpx;
|
||
top: 10rpx;
|
||
img {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
}
|
||
}
|
||
|
||
.zhan1 {
|
||
height: 50px;
|
||
}
|
||
|
||
.seach {
|
||
background: #fff;
|
||
overflow: hidden;
|
||
padding: 20rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
position: relative;
|
||
border-bottom: 2rpx solid #eee;
|
||
.seach_i {
|
||
padding: 0 20rpx;
|
||
border-radius: 34rpx;
|
||
background: #fff;
|
||
flex: 1;
|
||
background: #f5f6f8; // margin-right: 40rpx;
|
||
}
|
||
.seatch_r {
|
||
background: #fb3024;
|
||
border-radius: 50%;
|
||
padding: 8rpx;
|
||
margin-left: 24rpx;
|
||
}
|
||
}
|
||
|
||
.timeSlide {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 38rpx 26rpx;
|
||
.timeA {
|
||
font-size: 26rpx;
|
||
font-family: Source Han Sans CN;
|
||
font-weight: 400;
|
||
color: #333;
|
||
margin-right: 46rpx;
|
||
border-bottom: 2rpx solid #fff; // padding-bottom: 10rpx;
|
||
}
|
||
.timeB {
|
||
width: 158rpx;
|
||
font-size: 24rpx;
|
||
font-family: Arial;
|
||
font-weight: 400;
|
||
color: #999999;
|
||
margin-right: 46rpx;
|
||
border-bottom: 2rpx solid #eee; // padding-bottom: 10rpx;
|
||
text-align: center;
|
||
}
|
||
}
|
||
|
||
.tab {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 0 24rpx;
|
||
margin-top: 20rpx;
|
||
margin-bottom: 6rpx;
|
||
}
|
||
|
||
.tab_i {
|
||
// width: 120rpx;
|
||
text-align: center;
|
||
font-size: 28rpx;
|
||
font-family: PingFang SC;
|
||
font-weight: 400;
|
||
color: #333333; // margin-right: 28rpx;
|
||
white-space: nowrap;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
}
|
||
|
||
.heng {
|
||
width: 24px;
|
||
height: 2px;
|
||
background: #ed1d25;
|
||
border-radius: 1px 1px 1px 1px;
|
||
margin-top: 4rpx;
|
||
}
|
||
|
||
.heng1 {
|
||
width: 24px;
|
||
height: 2px;
|
||
background: #fff;
|
||
border-radius: 1px 1px 1px 1px;
|
||
margin-top: 4rpx;
|
||
}
|
||
|
||
.hui {
|
||
height: 10rpx;
|
||
background: #eee;
|
||
}
|
||
|
||
.zhan {
|
||
height: 80rpx;
|
||
}
|
||
|
||
.con_top {
|
||
position: fixed;
|
||
background: #fff;
|
||
width: 100%;
|
||
z-index: 10;
|
||
}
|
||
|
||
.disFlex {
|
||
display: flex;
|
||
}
|
||
|
||
.atm {
|
||
align-items: center;
|
||
}
|
||
|
||
.just {
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.mbt10 {
|
||
margin-bottom: 14rpx;
|
||
}
|
||
|
||
.orderList_i {
|
||
padding: 25rpx;
|
||
border-bottom: 22rpx solid #eee;
|
||
background: #fff;
|
||
img {
|
||
width: 124rpx;
|
||
height: 124rpx;
|
||
border-radius: 20rpx;
|
||
margin-right: 20rpx;
|
||
}
|
||
}
|
||
|
||
.orderList_a {
|
||
img {
|
||
width: 124rpx;
|
||
height: 124rpx;
|
||
border-radius: 20rpx;
|
||
margin-right: 20rpx;
|
||
}
|
||
}
|
||
|
||
.quan {
|
||
background: #3d3d3d;
|
||
border-radius: 15px;
|
||
font-size: 20rpx;
|
||
font-family: Source Han Sans CN;
|
||
font-weight: 400;
|
||
color: #ffffff;
|
||
padding: 5rpx 20rpx;
|
||
margin-right: 10rpx;
|
||
}
|
||
|
||
.tit1 {
|
||
font-size: 24rpx;
|
||
font-family: Source Han Sans CN;
|
||
font-weight: 400;
|
||
color: #999999;
|
||
}
|
||
|
||
.tit2 {
|
||
font-size: 24rpx;
|
||
font-family: Source Han Sans CN;
|
||
font-weight: 400;
|
||
color: #69a35b;
|
||
}
|
||
|
||
.tit3 {
|
||
font-size: 28rpx;
|
||
font-family: Source Han Sans CN;
|
||
font-weight: 400;
|
||
color: #333333;
|
||
}
|
||
|
||
.tit4 {
|
||
font-size: 24rpx;
|
||
font-family: Source Han Sans CN;
|
||
font-weight: 400;
|
||
color: #fb3024;
|
||
}
|
||
|
||
.tit5 {
|
||
font-size: 22rpx;
|
||
font-family: Source Han Sans CN;
|
||
font-weight: 400;
|
||
color: #666666;
|
||
}
|
||
|
||
.tit6 {
|
||
font-size: 26rpx;
|
||
font-family: Source Han Sans CN;
|
||
font-weight: 400;
|
||
color: #333333;
|
||
}
|
||
|
||
.xian {
|
||
background: #eee;
|
||
height: 2rpx;
|
||
margin: 20rpx 0;
|
||
}
|
||
|
||
.lBtn {
|
||
margin-right: 20rpx;
|
||
}
|
||
|
||
.pop_a {
|
||
padding: 20rpx;
|
||
}
|
||
|
||
.t_tit {
|
||
text-align: center;
|
||
margin-top: 20px;
|
||
}
|
||
|
||
.pop_t {
|
||
font-size: 28rpx;
|
||
font-family: Source Han Sans CN;
|
||
font-weight: bold;
|
||
color: #333333;
|
||
}
|
||
|
||
::v-deep .u-popup__content {
|
||
// width: 90%;
|
||
}
|
||
|
||
.pop ::v-deep .u-popup__content {
|
||
width: 90%;
|
||
}
|
||
|
||
.rightPopup {
|
||
width: 645rpx;
|
||
.popup_top {
|
||
padding: 25rpx;
|
||
background-color: rgba(255, 234, 233, 0.65);
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
font-size: 28rpx;
|
||
font-family: Source Han Sans CN;
|
||
font-weight: 400;
|
||
color: #333333;
|
||
border-bottom: 2rpx solid #eeeeee;
|
||
.top_red {
|
||
color: #fb3024;
|
||
}
|
||
}
|
||
.typesBox {
|
||
margin-top: 40rpx;
|
||
.typeTitle {
|
||
padding: 0 24rpx;
|
||
font-size: 30rpx;
|
||
font-family: Source Han Sans CN;
|
||
font-weight: bold;
|
||
color: #333333;
|
||
}
|
||
.choiceBox {
|
||
padding: 0 12rpx;
|
||
display: flex;
|
||
margin-top: 17rpx;
|
||
align-items: center; // flex-wrap: wrap;
|
||
.flex_btn {
|
||
background-color: #f4f4f4;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 14rpx 20rpx;
|
||
border-radius: 30rpx;
|
||
font-size: 24rpx;
|
||
font-family: Source Han Sans CN;
|
||
font-weight: 400;
|
||
color: #333333;
|
||
margin: 17rpx 5rpx;
|
||
width: 100%;
|
||
}
|
||
.selectbtn {
|
||
background-color: #c8161d;
|
||
color: #ffffff;
|
||
}
|
||
}
|
||
.choiceBox1 {
|
||
padding: 0 12rpx;
|
||
display: flex;
|
||
margin-top: 17rpx;
|
||
align-items: center;
|
||
flex-wrap: wrap;
|
||
.flex_btn {
|
||
background-color: rgba(255, 234, 233, 0.65);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 14rpx 20rpx;
|
||
border-radius: 30rpx;
|
||
font-size: 24rpx;
|
||
font-family: Source Han Sans CN;
|
||
font-weight: 400;
|
||
color: #333333;
|
||
margin: 17rpx 5rpx;
|
||
}
|
||
.selectbtn {
|
||
background-color: #c8161d;
|
||
color: #ffffff;
|
||
}
|
||
}
|
||
}
|
||
.footer {
|
||
position: fixed;
|
||
bottom: 0;
|
||
display: flex;
|
||
align-items: center;
|
||
width: 100%;
|
||
.footer_l {
|
||
width: 327rpx;
|
||
text-align: center;
|
||
background: #f3f3f3;
|
||
height: 100rpx;
|
||
line-height: 100rpx;
|
||
}
|
||
.footer_r {
|
||
width: 327rpx;
|
||
text-align: center;
|
||
background: #ee252a;
|
||
height: 100rpx;
|
||
line-height: 100rpx;
|
||
color: #fff;
|
||
}
|
||
}
|
||
}
|
||
|
||
.contain ::v-deep .u-transition {
|
||
top: 45px !important;
|
||
}
|
||
|
||
.timePicker ::v-deep .u-transition {
|
||
z-index: 10076 !important;
|
||
}
|
||
</style>
|