angelo
/
web-base-h5
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
web-base-h5/pages/mine/order/index.vue

873 lines
20 KiB
Vue
Raw 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">
<backIcon></backIcon>
<view class="index_header">
feat(global): 全局国际化文案替换
2025-04-01 21:35:18 +08:00
<view>{{'我的订单'}}</view>
## 初始化；
2025-03-23 09:29:40 +08:00
</view>
feat(userData): 移除无用字段，处理用户昵称保存报错的问题，订单列表高级筛选问题修复
2025-04-07 18:00:26 +08:00
<!-- <view class="clearFilter" @click="clearFilter">
清除筛选
</view> -->
<view
class="shareImg"
@click="rightOpen"
>
<img
src="@/static/images/serach_999.png"
alt=""
/>
## 初始化；
2025-03-23 09:29:40 +08:00
</view>
<view class="zhan1"></view>
<view class="con_top">
<view class="tab">
<view v-for="(item, index) in orderStatusList"
:key="index"
@click="isTab = item.value"
class="tab_i">
<view>{{ item.label }}</view>
feat(userData): 移除无用字段，处理用户昵称保存报错的问题，订单列表高级筛选问题修复
2025-04-07 18:00:26 +08:00
<view :class="isTab===item.value?'heng':'heng1'">
## 初始化；
2025-03-23 09:29:40 +08:00
</view>
</view>
</view>
<view class="hui"></view>
</view>
<view class="zhan"></view>
<view v-for="(item, index) in orderLists"
feat(userData): 移除无用字段，处理用户昵称保存报错的问题，订单列表高级筛选问题修复
2025-04-07 18:00:26 +08:00
:key="index"
## 初始化；
2025-03-23 09:29:40 +08:00
class="orderList_i">
<view @click.stop="getDetails(item)">
<view class="disFlex atm just mbt10">
<view class="disFlex atm">
<view class="quan">{{ item.orderTypeVal }}</view>
feat(global): 全局国际化文案替换
2025-04-01 21:35:18 +08:00
<view class="tit1">{{'订单编号'}}{{ item.orderCode }}</view>
## 初始化；
2025-03-23 09:29:40 +08:00
</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">
feat(global): 全局国际化文案替换
2025-04-01 21:35:18 +08:00
{{'创建时间'}}：{{ item.creationTime }}
## 初始化；
2025-03-23 09:29:40 +08:00
</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="openRemark(item)"
v-if="item.remark"
color="#999"></u-button>
<u-button type="primary"
v-if="item.orderStatus == 0"
class="lBtn"
:plain="true"
shape="circle"
feat(global): 全局国际化文案替换
2025-04-01 21:35:18 +08:00
:text="'撤销订单'"
## 初始化；
2025-03-23 09:29:40 +08:00
@click="cancelPay(item)"
color="#999"></u-button>
<u-button type="primary"
v-if="item.orderStatus == 0"
shape="circle"
@click="goPay(item)"
feat(global): 全局国际化文案替换
2025-04-01 21:35:18 +08:00
:text="'支付'"
## 初始化；
2025-03-23 09:29:40 +08:00
color="#E03030"></u-button>
<u-button type="primary"
v-if="item.orderStatus == 3||item.orderStatus == 5"
@click="openWl(item)"
shape="circle"
feat(global): 全局国际化文案替换
2025-04-01 21:35:18 +08:00
:text="'查看物流'"
## 初始化；
2025-03-23 09:29:40 +08:00
color="#E03030"></u-button>
</view>
</view>
</view>
<view class="timePicker">
<u-datetime-picker :closeOnClickOverlay="true"
@close="dataShow = false"
@cancel="dataShow = false"
@confirm="getDate"
:show="dataShow"
v-model="value1"
mode="date"></u-datetime-picker>
<u-datetime-picker :closeOnClickOverlay="true"
@close="dataShow1 = false"
@cancel="dataShow1 = false"
@confirm="getDate1"
:show="dataShow1"
v-model="value2"
mode="date"></u-datetime-picker>
</view>
<u-popup class="pop"
:show="detailsShow"
closeable
:round="10"
mode="center"
@close="detailsShow= false">
<view class="pop_a">
<view class="t_tit">
feat(global): 全局国际化文案替换
2025-04-01 21:35:18 +08:00
{{'订单详情'}}
## 初始化；
2025-03-23 09:29:40 +08:00
</view>
feat(global): 全局国际化文案替换
2025-04-01 21:35:18 +08:00
<view class="pop_t">{{'商品信息'}}</view>
## 初始化；
2025-03-23 09:29:40 +08:00
<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">
feat(global): 全局国际化文案替换
2025-04-01 21:35:18 +08:00
{{'订单金额'}}
## 初始化；
2025-03-23 09:29:40 +08:00
</view>
<view class="tit6">
{{ details.orderAmount |toThousandthAndKeepDecimal}}
</view>
</view>
<view class="disFlex atm just mbt10">
<view class="tit1">
feat(global): 全局国际化文案替换
2025-04-01 21:35:18 +08:00
{{'订单业绩'}}(PV)
## 初始化；
2025-03-23 09:29:40 +08:00
</view>
<view class="tit6">
{{ details.orderAchieve |toThousandthAndKeepDecimal}}
</view>
</view>
fix(order): bug-6 订单业绩bv不展示
2025-04-09 11:59:40 +08:00
<!-- <view class="disFlex atm just mbt10">
## 初始化；
2025-03-23 09:29:40 +08:00
<view class="tit1">
feat(global): 全局国际化文案替换
2025-04-01 21:35:18 +08:00
{{'订单业绩'}}(BV)
## 初始化；
2025-03-23 09:29:40 +08:00
</view>
<view class="tit6">
{{ details.orderAssAchieve |toThousandthAndKeepDecimal}}
</view>
fix(order): bug-6 订单业绩bv不展示
2025-04-09 11:59:40 +08:00
</view> -->
## 初始化；
2025-03-23 09:29:40 +08:00
<view class="xian"></view>
<view class="pop_t mbt10">
feat(global): 全局国际化文案替换
2025-04-01 21:35:18 +08:00
{{'收货人信息'}}
## 初始化；
2025-03-23 09:29:40 +08:00
</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>
<u-modal :show="cancleOrder"
showConfirmButton
showCancelButton
:content='content'
confirmColor='#DE3932'
@confirm="toCancel"
@cancel="cancleOrder=false"
ref="uModal"
:asyncClose="true"></u-modal>
<u-modal :show="isRemark"
showConfirmButton
:content='remarkEd'
confirmColor='#DE3932'
@confirm="isRemark=false"
ref="uModal"
:asyncClose="true"></u-modal>
<view class="contain">
<u-popup :show="rightShow"
mode="right"
@close="rightShow = false"
:closeOnClickOverlay="false">
<view class="rightPopup">
<view class="popup_top">
feat(global): 全局国际化文案替换
2025-04-01 21:35:18 +08:00
<view>{{'筛选'}}</view>
## 初始化；
2025-03-23 09:29:40 +08:00
<view class="top_red"
feat(global): 全局国际化文案替换
2025-04-01 21:35:18 +08:00
@click="rightShow = false">{{'返回'}}</view>
## 初始化；
2025-03-23 09:29:40 +08:00
</view>
<view class="typesBox">
<view class="typeTitle">
feat(global): 全局国际化文案替换
2025-04-01 21:35:18 +08:00
{{'订单编号'}}
## 初始化；
2025-03-23 09:29:40 +08:00
</view>
<view class="choiceBox">
<view class="flex_btn">
feat(global): 全局国际化文案替换
2025-04-01 21:35:18 +08:00
<u--input :placeholder="'请输入'"
## 初始化；
2025-03-23 09:29:40 +08:00
v-model="select.orderCode"
border="none"></u--input>
</view>
</view>
</view>
<view class="typesBox">
<view class="typeTitle">
feat(global): 全局国际化文案替换
2025-04-01 21:35:18 +08:00
{{'会员编号'}}
## 初始化；
2025-03-23 09:29:40 +08:00
</view>
<view class="choiceBox">
<view class="flex_btn">
feat(global): 全局国际化文案替换
2025-04-01 21:35:18 +08:00
<u--input :placeholder="'请输入'"
## 初始化；
2025-03-23 09:29:40 +08:00
v-model="select.memberCode"
border="none"></u--input>
</view>
</view>
</view>
<view class="typesBox">
<view class="typeTitle">
feat(global): 全局国际化文案替换
2025-04-01 21:35:18 +08:00
{{'订单类型'}}
## 初始化；
2025-03-23 09:29:40 +08:00
</view>
<view class="choiceBox1">
<view class="flex_btn"
@click="clickType(item)"
v-for="(item,index) in orderTypes"
:key="index"
:class="select.orderType==item.value?'selectbtn':''">
{{item.label}}
</view>
</view>
</view>
<view class="typesBox">
<view class="typeTitle">
feat(global): 全局国际化文案替换
2025-04-01 21:35:18 +08:00
{{'日期区间'}}
## 初始化；
2025-03-23 09:29:40 +08:00
</view>
<view class="choiceBox1">
<view class="flex_btn"
style="flex:1"
@click="openDate">
feat(global): 全局国际化文案替换
2025-04-01 21:35:18 +08:00
{{select.creationTimeStart?select.creationTimeStart:'开始时间'}}
## 初始化；
2025-03-23 09:29:40 +08:00
</view>
<view style="color: #666;">
——
</view>
<view class="flex_btn"
style="flex:1"
@click="openDate1">
feat(global): 全局国际化文案替换
2025-04-01 21:35:18 +08:00
{{select.creationTimeEnd?select.creationTimeEnd:'结束时间'}}
## 初始化；
2025-03-23 09:29:40 +08:00
</view>
</view>
</view>
<view class="footer">
<view class="footer_l"
feat(global): 全局国际化文案替换
2025-04-01 21:35:18 +08:00
@tap="reset">{{'清空筛选条件'}}</view>
## 初始化；
2025-03-23 09:29:40 +08:00
<view class="footer_r"
feat(global): 全局国际化文案替换
2025-04-01 21:35:18 +08:00
@tap="getDataList(1)">{{'确定'}}</view>
## 初始化；
2025-03-23 09:29:40 +08:00
</view>
</view>
</u-popup>
</view>
</view>
</template>
<script>
import backIcon from '@/components/backIcon.vue'
import * as reg from '@/config/regiest'
import * as api from '@/config/order.js'
import { formatMsToDate } from '@/util/index'
export default {
components: {
backIcon,
},
data() {
return {
orderTypes: [],
rightShow: false,
remarkEd: '',
feat(global): 全局国际化文案替换
2025-04-01 21:35:18 +08:00
content: '确认取消订单?',
## 初始化；
2025-03-23 09:29:40 +08:00
cancleOrder: false,
isRemark: false,
cancelCode: '',
details: '',
orderStatusList: [],
dataShow: false,
dataShow1: false,
detailsShow: false,
value1: Number(new Date()),
value2: Number(new Date()),
isTab: -1,
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 50,
},
select: {
orderType: '',
},
orderLists: [],
}
},
watch: {
isTab(n, o) {
this.select.orderStatus = n
this.queryParams.pageNum = 1
this.orderLists = []
this.getDataList()
},
},
onLoad(options) {
if (options.isTab && options.isTab != '') {
this.isTab = Number(options.isTab)
this.select.orderStatus = this.isTab
} else {
this.isTab = ''
this.select.orderStatus = this.isTab
}
this.getOrderStatus()
// this.getDataList()
this.getOrderType()
},
onShow() {},
onReachBottom() {
this.queryParams.pageNum++
this.getDataList()
},
methods: {
reset() {
this.queryParams.pageNum = 1
this.select = {
orderType: '',
}
this.getDataList()
},
clickType(item) {
this.select.orderType = item.value
},
getOrderType() {
api.orderType().then((res) => {
res.data.unshift({
feat(global): 全局国际化文案替换
2025-04-01 21:35:18 +08:00
label: '全部',
## 初始化；
2025-03-23 09:29:40 +08:00
value: '',
})
this.orderTypes = res.data
})
},
rightOpen() {
this.rightShow = true
},
openWl(item) {
uni.navigateTo({
url: '/pages/mine/order/wl?id=' + item.orderCode,
})
},
openRemark(item) {
this.remarkEd = item.remark
this.isRemark = true
},
goPay(item) {
let orderItemsParams = []
item.itemList.forEach((ctem) => {
if(ctem.waresCode){
orderItemsParams.push({
waresCode: ctem.waresCode,
})
}
})
let checkObj = {
specialArea: item.orderType,
orderItemsParams: orderItemsParams,
}
api.payCheck(item.orderCode).then((res) => {
if (res.code == 200) {
feat(prettier): add prettier for code
2025-04-08 17:51:03 +08:00
uni.navigateTo({
url:
'/pages/pay/index?paramsPost=' +
JSON.stringify(item) +
'&businessType=1',
})
## 初始化；
2025-03-23 09:29:40 +08:00
} else {
uni.showToast({
title: res.msg,
icon: 'success',
mask: true,
})
}
})
// uni.navigateTo({
// url:
// '/pages/pay/index?paramsPost=' +
// JSON.stringify(item) +
// '&businessType=1',
// })
},
toCancel() {
api.cancelOrder(this.cancelCode).then((res) => {
if (res.code == 200) {
uni.showToast({
feat(global): 全局国际化文案替换
2025-04-01 21:35:18 +08:00
title: '订单已取消',
## 初始化；
2025-03-23 09:29:40 +08:00
icon: 'none',
duration: 1500,
})
this.queryParams.pageNum = 1
this.orderLists = []
this.getDataList()
}
this.cancleOrder = false
})
},
cancelPay(val) {
this.cancelCode = val.orderCode
this.cancleOrder = true
},
getDetails(item) {
api.orderDetails(item.orderCode).then((res) => {
this.details = res.data
this.detailsShow = true
})
},
getDate(e) {
this.select.creationTimeStart = formatMsToDate(e.value)
this.dataShow = false
},
getDate1(e) {
this.select.creationTimeEnd = formatMsToDate(e.value)
this.dataShow1 = false
},
openDate() {
this.dataShow = true
},
openDate1() {
this.dataShow1 = true
},
getOrderStatus() {
api.orderStatus().then((res) => {
res.data.unshift({
feat(global): 全局国际化文案替换
2025-04-01 21:35:18 +08:00
label: '全部',
## 初始化；
2025-03-23 09:29:40 +08:00
value: '',
})
this.orderStatusList = res.data
})
},
getDataList(index) {
if (index) {
this.queryParams.pageNum = 1
feat(userData): 移除无用字段，处理用户昵称保存报错的问题，订单列表高级筛选问题修复
2025-04-07 18:00:26 +08:00
this.orderLists = []
## 初始化；
2025-03-23 09:29:40 +08:00
}
this.rightShow = false
api
.orderList(Object.assign({}, this.queryParams, this.select))
.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%;
fix(order): 头部z-index问题处理
2025-04-10 09:36:42 +08:00
z-index: 499;
## 初始化；
2025-03-23 09:29:40 +08:00
}
.shareImg {
position: fixed;
margin: 14rpx 24rpx;
z-index: 1000000000;
right: 10rpx;
top: 10rpx;
img {
width: 40rpx;
height: 40rpx;
}
}
feat(userData): 移除无用字段，处理用户昵称保存报错的问题，订单列表高级筛选问题修复
2025-04-07 18:00:26 +08:00
.clearFilter {
position: fixed;
top: 28rpx;
right: 90rpx;
z-index: 1000000000;
color: #999;
font-size: 28rpx;
}
## 初始化；
2025-03-23 09:29:40 +08:00
.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>