3
0
Fork 0
web-store-retail-h5/pages/selfService/cancleOrder/index.vue

600 lines
12 KiB
Vue
Raw Permalink Normal View History

2025-03-23 09:29:40 +08:00
<!--
* @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">{{$t('MY_ORD_1')}}{{ 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">
{{$t('MY_ORD_15')}}{{ 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="$t('ENU_APPROVE_B_234')"
@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">
{{$t('MY_ORD_5')}}
</view>
<view class="pop_t">{{$t('w_0077')}}</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">
{{$t('MY_ORD_6')}}
</view>
<view class="tit6">
{{ details.orderAmount |toThousandthAndKeepDecimal}}
</view>
</view>
<view class="disFlex atm just mbt10">
<view class="tit1">
{{$t('MY_ORD_16')}}(PV)
</view>
<view class="tit6">
{{ details.orderAchieve |toThousandthAndKeepDecimal}}
</view>
</view>
<view class="disFlex atm just mbt10">
<view class="tit1">
{{$t('MY_ORD_16')}}(BV)
</view>
<view class="tit6">
{{ details.orderAssAchieve |toThousandthAndKeepDecimal}}
</view>
</view>
<view class="xian"></view>
<view class="pop_t mbt10">
{{$t('w_0065')}}
</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: this.$t('MY_ORD_52'),
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: this.$t('APP_ADD_16'),
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: this.$t('w_0004'),
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>