qiubinghui
/
zhywpt-sp
Observar 1
Favorito 0
Fork 0
Código Issues 0 Pull requests 0 Versões 0 Wiki Atividade
Ver código fonte

订单ui替换

master
yangteng 7 meses atrás
pai
f239e8a56a
commit
2abc11f10b
9 arquivos alterados com 1015 adições e 303 exclusões
Visão dividida Mostrar estatísticas do Diff
  1. 1
    1
      composables/order/useOrderListItem.ts
  2. 82
    38
      pages/order/components/order-list-item-new.vue
  3. 4
    5
      pages/order/components/order-list-item.vue
  4. 7
    7
      pages/order/components/order-tabbar.vue
  5. 675
    0
      pages/order/order - 删除.vue
  6. 160
    240
      pages/order/order.vue
  7. 2
    2
      subpackage/after-sale/progress-query/progress-query-business-details.vue
  8. 7
    8
      subpackage/orders/order-details-new.vue
  9. 77
    2
      utils/utils.ts

+ 1
- 1
composables/order/useOrderListItem.ts Ver arquivo

@@ -116,7 +116,7 @@ export default function useOrderListItem(props) {
"tabIndex": props.index + '',
"pageNo": params.pageNum,
"pageSize": params.pageSize,
"promotionModes": 1,
// "promotionModes": 1,
},
method: 'POST',
showLoading: true

+ 82
- 38
pages/order/components/order-list-item-new.vue Ver arquivo

@@ -5,41 +5,43 @@
@click.stop="gotoOrderDetails(item,1)">
<view class="head">
<view class="name">
<image :src="`${$imgUrl}order/icon-star-green.png`" class="icon" mode="aspectFill"></image>
<text class="title">{{item.productName ?item.productName: ''}}</text>
</view>

<view class="status text-orange" v-if="item.orderStatus == OrderStatus.已取消">已取消</view>
<!--异地 orderStatus=-1，你判断这个remoteStatus 是字符串7，就显示审核未通过 -->
<view class="status text-orange" v-else-if="item.orderStatus == OrderStatus.已取消 && item.remoteStatus=='7' && item.deviceType == deviceType">审核不通过</view>
<view class="status text-green" v-else
:class="{'text-orange':item.orderStep == OrderStatus.已完成 || item.orderStep == OrderStatus.已结束
|| item.orderStep == OrderStatus['换货-设备已回收'] || item.orderStep == OrderStatus.退款成功 || item.orderStep == OrderStatus.退货成功}">
{{(item.orderStep==12 && item.reshipment==1)?"补货中":getOrderStatusName(item.orderStep)}}
<image :src="`${$imgUrl}order/icon-car.png`" class="icon" mode="aspectFit"></image>
<text class="title">{{item.vehiclePlate ?item.vehiclePlate: ''}}</text>
</view>
<view v-if="item.promotionModes==1" class="xiao">小程序</view>
<view v-else class="xianxia">线下网点</view>
</view>
<view class="detail">
<view class="orders">
<view class="order-text">
<text class="type">新办单号：</text>
<text class="value">{{item.orderId}}</text>
</view>
<!-- <view class="order-text odd">
<text class="type">业务类型：</text>
<text class="value">{{getOrderTypeName(item.orderType)}}</text>
</view> -->
<view class="order-text">
<text class="type">订单车牌号：</text>
<text class="value">{{item.vehiclePlate}}</text>
<view>
</view>
<view class="content">
<view class="picture">
<view>
<text>车牌颜色：</text>
<text>{{getVehiclePlateColor(item.vehiclePlateColor)}}</text>
</view>
<view class="order-text odd">
<text class="type">订单车牌颜色：</text>
<text class="value">{{getVehiclePlateColor(item.vehiclePlateColor)}}</text>
<view>
<view v-if="item.orderStatus == OrderStatus.已取消">
<image class="tupian" :src="`${$imgUrl}order/yiquxiao.png`" mode="aspectFill"></image>
</view>
<!--异地 orderStatus=-1，你判断这个remoteStatus 是字符串7，就显示审核未通过 -->
<view v-else-if="item.orderStatus == OrderStatus.已取消 && item.remoteStatus=='7' && item.deviceType == deviceType">
<image class="tupian" :src="`${$imgUrl}order/nopass.png`" mode="aspectFill"></image>
</view>
<view v-else
:class="{'text-orange':item.orderStep == OrderStatus.已完成 || item.orderStep == OrderStatus.已结束
|| item.orderStep == OrderStatus['换货-设备已回收'] || item.orderStep == OrderStatus.退款成功 || item.orderStep == OrderStatus.退货成功}">
<image class="tupian" v-if="item.orderStep==12 && item.reshipment==1" :src="`${$imgUrl}order/buhuozhong.png`" mode="aspectFill"></image>
<image class="tupian" v-else :src="`${$imgUrl}order/${getOrderStatusNameNew(item.orderStep)}.png`" mode="aspectFill"></image>
</view>
</view>
</view>
<view class="money"><text class="cny">￥</text><text class="amount"
v-if="item.amount">{{item.amount / 100}}</text><text class="amount" v-else>0.00</text>
<view>
<text class="type">新办订单号：</text>
<text class="value">{{item.orderId}}</text>
</view>
<view class="all">合计：<text class="cny">￥</text><text class="amount"
v-if="item.amount">{{item.amount / 100}}</text><text class="amount" v-else>0.00</text></view>
</view>
<!-- item.orderSource==1 app -->
<view v-if="item.orderStatus != OrderStatus.已取消 && !item.orderSource">
@@ -170,6 +172,7 @@
import { deviceType } from "@/utils/network/difference";
import {
getOrderStatusName,
getOrderStatusNameNew,
msg,
getOrderTypeName
} from "@/utils/utils";
@@ -244,8 +247,10 @@
display: flex;
justify-content: space-between;
align-items: center;
padding: 20rpx 28rpx;
padding: 20rpx 0;
border-bottom: 1px solid #dcdcdc;
width:95%;
margin: 0 auto;
}

.item .head {
@@ -268,8 +273,8 @@
}

.item .head .icon {
width: 48rpx;
height: 48rpx;
width: 37rpx;
height: 31rpx;
}

.item .head .name {
@@ -294,8 +299,10 @@
}

.title {
font-size: 30rpx;
color: #333;
font-size: 30rpx !important;
color: #333 !important;
margin-left: 10rpx;
font-weight: bold !important;
}

.tag-green {
@@ -419,8 +426,8 @@
}

.btn-primary {
border: 1px solid #00b38b;
color: #00b38b;
color:white;
background-color: #133850 ;
}

.btn-disable {
@@ -430,11 +437,48 @@
}

.btn-normal {
border: 1px solid #dcdcdc;
color: #333;
border: 1px solid #133850 ;
color: #133850 ;
}

.evaluation {
display: flex;
}
.content{
font-size: 26rpx;
padding: 6rpx 20rpx;
}
.all{
display: flex;
justify-content: flex-end;
align-items: center;
margin-top: 10rpx;
}
.picture{
display: flex;
align-items: center;
justify-content: space-between;
margin: 10rpx 0;
}
.picture>view:first-child{
width: 65%;
}
.xiao{
background: #42D175;
border-radius: 5rpx 5rpx 5rpx 5rpx;
color: white;
font-size: 20rpx;
padding: 4rpx 6rpx;
}
.xianxia{
background: #CCB375;
border-radius: 5rpx 5rpx 5rpx 5rpx;
color: white;
font-size: 20rpx;
padding: 4rpx 6rpx;
}
.tupian{
width: 90rpx;
height: 80rpx;
}
</style>

+ 4
- 5
pages/order/components/order-list-item.vue Ver arquivo

@@ -4,9 +4,9 @@
<view class="as-layout-horizontal as-gravity-center-start search-layout">
<view class="search-box">
<image :src="`${$imgUrl}service/icon-search.png`" class="icon" mode="aspectFill"></image>
<input class="search" placeholder="请输入车牌号" @input="onKeyInput" v-model="searchKeyWords" />
<input class="search" placeholder="请输入车牌号" @blur="onKeyInput" v-model="searchKeyWords" />
</view>
<view class="search-btn" @click="doSearch">搜索</view>
<!-- <view class="search-btn" @click="doSearch">搜索</view> -->
</view>

<!-- 数据为空 -->
@@ -75,13 +75,12 @@
}

.search-layout {
padding-top: 180rpx;

padding-top: 90rpx;
.search-box {
margin: 30rpx 30rpx 0rpx 30rpx;
height: 80rpx;
background: #FFFFFF;
border: 1px solid #DCDCDC;
// border: 1px solid #DCDCDC;
border-radius: 40rpx;
display: flex;
justify-content: center;

+ 7
- 7
pages/order/components/order-tabbar.vue Ver arquivo

@@ -95,12 +95,12 @@
content: '';
width: 0;
height: 0;
border-bottom: 6rpx solid #00B38B;
border-bottom: 6rpx solid #01243A;
left: 50%;
bottom: 18rpx;
bottom: 8rpx;
z-index: -99;
height: 16rpx;
background: #00b38b;
height: 6rpx;
background: #01243A;
opacity: 0.3;
transform: translateX(-50%);
transition: .3s;
@@ -112,19 +112,19 @@
font-size: 30rpx;

&:after {
width: 70%;
width: 50%;
border-radius: 6rpx;
}

&:first-child {
&:after {
width: 50%;
width: 30%;
}
}

&:last-child {
&:after {
width: 95%;
width: 75%;
}
}
}

+ 675
- 0
pages/order/order - 删除.vue Ver arquivo

@@ -0,0 +1,675 @@
<!-- 订单列表2 -->
<template>
<filter>
<empty-view v-if="!data.login" mode="permission" content="请先登录再查看订单" btnTxt="立即登录"
@btnClick="$util.navTo('/login/login')">
</empty-view>

<view class="list-wrapper" v-else>
<view class="top-content">
<view class="top-menu">
<view :class="item == state.tabActive ? 'tab active' : 'tab'" v-for="item in state.flowPathTabList"
:key="item" @click="flowPathTabHandle(item)">
<view class="border"></view>{{ item }}
</view>
</view>
<order-tabbar ref="tabbarRef" :tabs="data.tabsList" v-model:curIndex="data.tabIndex"
v-if="data.tabsList.length > 0" @index="test"></order-tabbar>
</view>

<order-list-item v-if="state.tabActive=='小程序'" ref="mescrollItem" :index="data.tabIndex"
:refresh="data.refresh">
</order-list-item>
<view v-else>
<!-- 搜索框 -->
<view class="as-layout-horizontal as-gravity-center-start search-layout">
<view class="search-box">
<image :src="`${$imgUrl}service/icon-search.png`" class="icon" mode="aspectFill"></image>
<input class="search" placeholder="请输入车牌号" @input="onKeyInput" />
</view>
<!-- <view class="search-btn" @click="doSearch">搜索</view> -->
</view>
<!-- 数据为空 -->
<empty-view :mode="config.emptyHint.mode" :content="config.emptyHint.hint"
v-if="state.appOrdersList.length === 0" />
<block v-for="(item,index) in state.appOrdersList" :key="index">
<view :class="item.orderStatus == OrderStatus.已取消 ? 'item finished' : 'item'"
@click.stop="gotoOrderDetails(item,2)">
<view class="head">
<view class="name">
<image :src="`${$imgUrl}order/icon-star-green.png`" class="icon" mode="aspectFill">
</image>
<text class="title">{{item.productName ?item.productName: ''}}</text>
</view>

<view class="status text-orange" v-if="item.orderStatus == OrderStatus.已取消">已取消</view>
<view class="status text-green" v-else
:class="{'text-orange':item.orderStep == OrderStatus.已完成 || item.orderStep == OrderStatus.已结束
|| item.orderStep == OrderStatus['换货-设备已回收'] || item.orderStep == OrderStatus.退款成功 || item.orderStep == OrderStatus.退货成功}">
{{getOrderStatusName(item.orderStep)}}
</view>
</view>
<view class="detail">
<view class="orders">
<view class="order-text">
<text class="type">新办单号：</text>
<text class="value">{{item.orderId}}</text>
</view>
<view class="order-text odd">
<text class="type">业务类型：</text>
<text class="value">{{getOrderTypeName(item.orderType)}}</text>
</view>
<view class="order-text">
<text class="type">订单车牌号：</text>
<text class="value">{{item.vehiclePlate}}</text>
</view>
<view class="order-text odd">
<text class="type">订单车牌颜色：</text>
<text class="value">{{getVehiclePlateColor(item.vehiclePlateColor)}}</text>
</view>
</view>
<view class="money"><text class="cny">￥</text>
<text class="amount" v-if="item.amount">{{item.amount / 100}}</text>
<text class="amount" v-else>0.00</text>
</view>
</view>

<!-- 待激活 -->
<view class="btns" v-if="item.orderStep == OrderStatus.待激活 && item.cardId && item.obuId">
<view class="btn btn-primary" @click.stop="gotoActiveOrder(item)">去激活</view>
</view>
<!-- 已完成 -->
<view class="btns" v-else-if="item.orderStep == OrderStatus.已完成">

<view class="btn btn-normal" v-if="item.isStaff==1 && item.isProduct==1">
已评价
</view>
<view class='evaluation' v-else>
<view class="btn btn-primary" @click.stop="gotoEvaluateSalesman(item)">去评价</view>
</view>
</view>
</view>
</block>
<uni-load-more :status="params.status" iconType="snow" :icon-size="16" :content-text="config.contentTxt"
v-if="state.appOrdersList.length > 0" />
</view>
</view>
</filter>
</template>

<script setup lang="ts">
import orderTabbar from "./components/order-tabbar.vue";
import orderListItem from "./components/order-list-item";
import useOrderList from "@/composables/order/useOrderList";
import filter from '@/components/filter/filter.vue';
import { onLoad, onReachBottom, onShow, onPullDownRefresh } from "@dcloudio/uni-app";
import useOrderListItem from "@/composables/order/useOrderListItem";
import useOrderSkip from "@/composables/order/useOrderSkip";
import {
getOrderStatusName,
msg,
getOrderTypeName,
hasLogin, timesDiff
} from "@/utils/utils";
import {
vehiclePlateColor
} from "@/datas/vehiclePlateColor";
import { getItem, StorageKeys, setItem } from "@/utils/storage";
import { PageData } from "@/datas/enum";
import {
OrderStatus
} from "@/datas/enum";
import {
reactive, watch, ref
} from "vue";
import { requestNew } from "@/utils/network/request.js";
import { appPage } from "@/utils/network/api";
import { log } from "console";
const tools = require("../../static/etcUtil/tools.js");
const state = reactive({
tabActive: "小程序",
flowPathTabList: ["小程序", "线下网点"],
appOrdersList: [],
index: 0
})
const {
data,
tabbarRef
} = useOrderList();
//办理订单按钮跳转业务逻辑
const {
gotoActiveOrder,
gotoOrderDetails,
gotoEvaluateSalesman
} = useOrderSkip();
//请求参数
const params = reactive({
pageNum: PageData.NUM,
pageSize: PageData.SIZE,
total: 0,
status: 'more',
reload: false,
})
function test(index) {
console.log("test", index, data.tabIndex)
state.index = index
if (state.tabActive == '小程序') {
changeTab(state.tabActive)
} else {
console.log("apppppppp",)
getList()
}
}

const props = defineProps({
index: {
type: Number,
default() {
return 0
}
},
refresh: { //是否刷新列表
type: Boolean,
default: true
}
})

const { changeTab, config, refreshList } = useOrderListItem(props);

onLoad((option) => {
// 一进来就调一遍
changeTab(state.tabActive)
})
let searchKeyWords = '';
//获取车牌颜色文字
const getVehiclePlateColor = (id : number) => {

const colors = vehiclePlateColor.filter(item => item.id == id);
return colors[0].color
}
const flowPathTabHandle = (tab) => {
console.log("tab", tab)
state.tabActive = tab;
if (state.tabActive == '小程序') {
changeTab(state.tabActive)
} else {
console.log("apppppppp",)
getList()
}

};
//搜索
const doSearch = () => {
// #ifdef MP-WEIXIN
if (!searchKeyWords) {
msg('请输入需要搜索的车牌号！');
return;
}
getList();
// #endif
// #ifdef MP-ALIPAY
tools.showLoadingAlert("加载中");
getList();
tools.hideLoadingAlert();
// #endif

}
//订单车牌号输入
const onKeyInput = (event) => {
searchKeyWords = event.target.value;
if (searchKeyWords == '') {
getList();
}
}


const getList = async () => {
if (!hasLogin()) {
uni.stopPullDownRefresh();
return;
}
const options = {
type: 2,
data: {
"opId": getItem(StorageKeys.OpenId),
"vehiclePlate": searchKeyWords,
"tabIndex": state.index + '',
"pageNo": params.pageNum,
"pageSize": params.pageSize,
},
method: 'POST',
showLoading: true
}
requestNew(appPage, options).then((res) => {
uni.hideLoading()
var data = res;
console.log("state.appOrdersList", data)

params.total = data.totalCount;

if (params.pageNum === 1) {
state.appOrdersList = [];
}
if (params.total > 0) {
const curList = data.data || [];
state.appOrdersList = params.reload ? curList : state.appOrdersList.concat(curList);
params.reload = false;
}

if (params.total === state.appOrdersList.length) {
params.reload = false;
params.status = 'noMore';
}

if (params.pageNum === 1) {
uni.stopPullDownRefresh();
}
// 订单发货后未激活 30天 以后 结束订单功能 insertTime >30 算出来距离今天是负数 updateTime<30(结束订单)
for (var k = 0; k < state.appOrdersList.length; k++) {
if (state.appOrdersList[k]['insertTime']) {
if (timesDiff(state.appOrdersList[k]['insertTime'].replace("T", " ")).days > 30) {
state.appOrdersList[k]['finishOrder'] = true //可以结束
} else {
state.appOrdersList[k]['finishOrder'] = false //不可以结束
}
}
if (state.appOrdersList[k]['updateTime']) {
if (timesDiff(state.appOrdersList[k]['updateTime'].replace("T", " ")).days <= 30) {
state.appOrdersList[k]['isUseAgain'] = true //可以再次使用
} else {
state.appOrdersList[k]['isUseAgain'] = false //不可以再次使用
}
}
}
uni.$emit("refreshOrder");
console.log("data.refresh===============", props.refresh, state.appOrdersList)
})
.catch((err) => {
console.log(err);
});
}
onReachBottom(() => {
loadMore();
});
/* 加载更多 */
const loadMore = () => {
if (params.total > state.appOrdersList.length) {
params.status = 'loading';
params.pageNum++;
getList();
} else {
params.status = 'noMore';
}
}
onPullDownRefresh(() => {
if (hasLogin()) {
getList();
}
});
</script>

<style lang="scss">
page {
background: #eef7f7;
}

:deep(.u-mode-center-box) {
border-radius: 20rpx;
}
</style>
<style lang="scss" scoped>
.top-content {
position: fixed;
left: 0;
z-index: 99999;
background-color: white;
}

.top-menu {
display: flex;
justify-content: space-around;
}

.top-menu .tab {
font-size: 28rpx;
padding: 30rpx 30rpx;
color: #666666;
position: relative;
}

.top-menu .active .border {
position: absolute;
width: 70%;
height: 16rpx;
background: #00b38b;
opacity: 0.3;
bottom: 28rpx;
z-index: -99;
left: 15%;
border-radius: 6rpx;
}

.top-menu .active {
font-weight: bold;
font-size: 32rpx;
color: #0d0f26;
}

.top-menu .active::before {
width: 100%;
height: 16rpx;
background: #00b38b;
opacity: 0.3;
}

.search-layout {
padding-top: 180rpx;

.search-box {
margin: 30rpx 30rpx 0rpx 30rpx;
height: 80rpx;
background: #FFFFFF;
border: 1px solid #DCDCDC;
border-radius: 40rpx;
display: flex;
justify-content: center;
align-items: center;
box-sizing: border-box;
flex: 1;
}

.search-box .icon {
width: 48rpx;
height: 48rpx;
margin: 0 20rpx;
}

.search-box .search {
flex: 1;
margin-right: 20rpx;
height: 100%;
padding: 0 10rpx;
font-size: 28rpx;
color: #00b38b;
}

.search-btn {
color: white;
background-color: #00B38B;
width: 140rpx;
height: 75rpx;
line-height: 75rpx;
font-size: 32rpx;
border-radius: 40rpx;
text-align: center;
margin-right: 30rpx;
margin-top: 30rpx;
}
}

.item .head {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20rpx 28rpx;
border-bottom: 1px solid #dcdcdc;
}

.item .head {
.head-row {
display: flex;
width: 100%;
justify-content: space-between;
align-items: center;
}

.name {}

.name>text {
font-size: 26rpx;
font-family: Noto Sans S Chinese;
font-weight: 400;
color: #999999;
line-height: 36rpx;
}
}

.item .head .icon {
width: 48rpx;
height: 48rpx;
}

.item .head .name {
display: flex;
align-items: center;
}

.text-green {
font-size: 26rpx;
color: #00b38b;
}

.text-orange {
font-size: 26rpx;
color: #ff8000;
}

.text-black {
font-size: 28rpx;
color: #333;
font-weight: 500;
}

.title {
font-size: 30rpx;
color: #333;
}

.tag-green {
font-size: 22rpx;
height: 40rpx;
line-height: 40rpx;
padding: 0 12rpx;
border-radius: 6rpx;
background: #d9f4ee;
color: #00b38b;
}

.tag-grey {
font-size: 22rpx;
height: 40rpx;
line-height: 40rpx;
padding: 0 12rpx;
border-radius: 6rpx;
background: #e8e8e8;
color: #666;
}

.detail {
display: flex;
justify-content: space-between;
align-items: center;
padding: 30rpx 32rpx;
}

.detail .type {
font-size: 26rpx;
color: #999;
}

.detail .value {
font-size: 26rpx;
color: #333;
}

.finished .detail .value {
color: #999;
}

.detail .odd {
margin: 20rpx 0;
}

.cny {
font-size: 26rpx;
color: #333;
}

.finished .cny {
color: #999;
}

.amount {
font-size: 40rpx;
font-weight: bold;
}

.bottom .amount {
color: #ff8000;
}

.finished .amount {
color: #999;
}

.btns {
position: relative;
display: flex;
align-items: center;
justify-content: flex-end;
border-top: 1px solid #dcdcdc;
margin: 0 30rpx;
padding: 20rpx 0;
}

.bottom {
display: flex;
justify-content: space-between;
align-items: center;
border-top: 1px solid #dcdcdc;
margin: 0 30rpx;
padding: 20rpx 0;
}

.btn {
height: 60rpx;
line-height: 58rpx;
border-radius: 30rpx;
padding: 0 24rpx;
font-size: 23rpx;
box-sizing: border-box;
margin-right: 12rpx;
}



.btns .btn:last-child {
margin: 0;
}

.btns .state {
position: absolute;
left: 0;
font-size: 26rpx;
font-family: Noto Sans S Chinese;
font-weight: 400;
color: #999999;
line-height: 58rpx;

text {
font-size: 26rpx;
font-family: Noto Sans S Chinese;
font-weight: 400;
color: #00B38B;
line-height: 58rpx;
}
}

.btn-primary {
border: 1px solid #00b38b;
color: #00b38b;
}

.btn-disable {
border: 1px solid #999;
color: #999;

}

.btn-normal {
border: 1px solid #dcdcdc;
color: #333;
}

.evaluation {
display: flex;
}

.finished .detail .value {
color: #999;
}

.detail .odd {
margin: 20rpx 0;
}

.cny {
font-size: 26rpx;
color: #333;
}

.finished .cny {
color: #999;
}

.item {
background: #ffffff;
box-shadow: 0rpx 2rpx 6rpx 0rpx rgba(223, 223, 223, 0.8);
border-radius: 20rpx;
box-sizing: border-box;
display: flex;
flex-direction: column;
margin: 30rpx 30rpx 0rpx;
}

.bg-white .item {
box-shadow: 0rpx 4rpx 13rpx 3rpx rgba(223, 223, 223, 0.8);
}

.item .head {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20rpx 28rpx;
border-bottom: 1px solid #dcdcdc;
}

.item .head {
.head-row {
display: flex;
width: 100%;
justify-content: space-between;
align-items: center;
}

.name {}

.name>text {
font-size: 26rpx;
font-family: Noto Sans S Chinese;
font-weight: 400;
color: #999999;
line-height: 36rpx;
}
}

.item .head .icon {
width: 48rpx;
height: 48rpx;
}

.item .head .name {
display: flex;
align-items: center;
}
</style>

+ 160
- 240
pages/order/order.vue Ver arquivo

@@ -7,92 +7,13 @@

<view class="list-wrapper" v-else>
<view class="top-content">
<view class="top-menu">
<view :class="item == state.tabActive ? 'tab active' : 'tab'" v-for="item in state.flowPathTabList"
:key="item" @click="flowPathTabHandle(item)">
<view class="border"></view>{{ item }}
</view>
</view>
<order-tabbar ref="tabbarRef" :tabs="data.tabsList" v-model:curIndex="data.tabIndex"
v-if="data.tabsList.length > 0" @index="test"></order-tabbar>
v-if="data.tabsList.length > 0"></order-tabbar>
</view>

<order-list-item v-if="state.tabActive=='小程序'" ref="mescrollItem" :index="data.tabIndex"
<order-list-item ref="mescrollItem" :index="data.tabIndex"
:refresh="data.refresh">
</order-list-item>
<view v-else>
<!-- 搜索框 -->
<view class="as-layout-horizontal as-gravity-center-start search-layout">
<view class="search-box">
<image :src="`${$imgUrl}service/icon-search.png`" class="icon" mode="aspectFill"></image>
<input class="search" placeholder="请输入车牌号" @input="onKeyInput" />
</view>
<view class="search-btn" @click="doSearch">搜索</view>
</view>
<!-- 数据为空 -->
<empty-view :mode="config.emptyHint.mode" :content="config.emptyHint.hint"
v-if="state.appOrdersList.length === 0" />
<block v-for="(item,index) in state.appOrdersList" :key="index">
<view :class="item.orderStatus == OrderStatus.已取消 ? 'item finished' : 'item'"
@click.stop="gotoOrderDetails(item,2)">
<view class="head">
<view class="name">
<image :src="`${$imgUrl}order/icon-star-green.png`" class="icon" mode="aspectFill">
</image>
<text class="title">{{item.productName ?item.productName: ''}}</text>
</view>

<view class="status text-orange" v-if="item.orderStatus == OrderStatus.已取消">已取消</view>
<view class="status text-green" v-else
:class="{'text-orange':item.orderStep == OrderStatus.已完成 || item.orderStep == OrderStatus.已结束
|| item.orderStep == OrderStatus['换货-设备已回收'] || item.orderStep == OrderStatus.退款成功 || item.orderStep == OrderStatus.退货成功}">
{{getOrderStatusName(item.orderStep)}}
</view>
</view>
<view class="detail">
<view class="orders">
<view class="order-text">
<text class="type">新办单号：</text>
<text class="value">{{item.orderId}}</text>
</view>
<view class="order-text odd">
<text class="type">业务类型：</text>
<text class="value">{{getOrderTypeName(item.orderType)}}</text>
</view>
<view class="order-text">
<text class="type">订单车牌号：</text>
<text class="value">{{item.vehiclePlate}}</text>
</view>
<view class="order-text odd">
<text class="type">订单车牌颜色：</text>
<text class="value">{{getVehiclePlateColor(item.vehiclePlateColor)}}</text>
</view>
</view>
<view class="money"><text class="cny">￥</text>
<text class="amount" v-if="item.amount">{{item.amount / 100}}</text>
<text class="amount" v-else>0.00</text>
</view>
</view>

<!-- 待激活 -->
<view class="btns" v-if="item.orderStep == OrderStatus.待激活 && item.cardId && item.obuId">
<view class="btn btn-primary" @click.stop="gotoActiveOrder(item)">去激活</view>
</view>
<!-- 已完成 -->
<view class="btns" v-else-if="item.orderStep == OrderStatus.已完成">

<view class="btn btn-normal" v-if="item.isStaff==1 && item.isProduct==1">
已评价
</view>
<view class='evaluation' v-else>
<view class="btn btn-primary" @click.stop="gotoEvaluateSalesman(item)">去评价</view>
</view>
</view>
</view>
</block>
<uni-load-more :status="params.status" iconType="snow" :icon-size="16" :content-text="config.contentTxt"
v-if="state.appOrdersList.length > 0" />
</view>
</view>
</filter>
</template>
@@ -102,33 +23,33 @@
import orderListItem from "./components/order-list-item";
import useOrderList from "@/composables/order/useOrderList";
import filter from '@/components/filter/filter.vue';
import { onLoad, onReachBottom, onShow, onPullDownRefresh } from "@dcloudio/uni-app";
// import { onLoad} from "@dcloudio/uni-app";
import useOrderListItem from "@/composables/order/useOrderListItem";
import useOrderSkip from "@/composables/order/useOrderSkip";
import {
getOrderStatusName,
msg,
getOrderTypeName,
hasLogin, timesDiff
} from "@/utils/utils";
// import useOrderSkip from "@/composables/order/useOrderSkip";
// import {
// getOrderStatusName,
// msg,
// getOrderTypeName,
// hasLogin, timesDiff
// } from "@/utils/utils";
import {
vehiclePlateColor
} from "@/datas/vehiclePlateColor";
import { getItem, StorageKeys, setItem } from "@/utils/storage";
// import { getItem, StorageKeys, setItem } from "@/utils/storage";
import { PageData } from "@/datas/enum";
import {
OrderStatus
} from "@/datas/enum";
// import {
// OrderStatus
// } from "@/datas/enum";
import {
reactive, watch, ref
} from "vue";
import { requestNew } from "@/utils/network/request.js";
import { appPage } from "@/utils/network/api";
import { log } from "console";
// import { requestNew } from "@/utils/network/request.js";
// import { appPage } from "@/utils/network/api";
// import { log } from "console";
const tools = require("../../static/etcUtil/tools.js");
const state = reactive({
tabActive: "小程序",
flowPathTabList: ["小程序", "线下网点"],
// flowPathTabList: ["小程序", "线下网点"],
appOrdersList: [],
index: 0
})
@@ -137,11 +58,11 @@
tabbarRef
} = useOrderList();
//办理订单按钮跳转业务逻辑
const {
gotoActiveOrder,
gotoOrderDetails,
gotoEvaluateSalesman
} = useOrderSkip();
// const {
// gotoActiveOrder,
// gotoOrderDetails,
// gotoEvaluateSalesman
// } = useOrderSkip();
//请求参数
const params = reactive({
pageNum: PageData.NUM,
@@ -150,16 +71,16 @@
status: 'more',
reload: false,
})
function test(index) {
console.log("test", index, data.tabIndex)
state.index = index
if (state.tabActive == '小程序') {
changeTab(state.tabActive)
} else {
console.log("apppppppp",)
getList()
}
}
// function test(index) {
// console.log("test", index, data.tabIndex)
// state.index = index
// if (state.tabActive == '小程序') {
// changeTab(state.tabActive)
// } else {
// console.log("apppppppp",)
// getList()
// }
// }

const props = defineProps({
index: {
@@ -176,141 +97,141 @@

const { changeTab, config, refreshList } = useOrderListItem(props);

onLoad((option) => {
// 一进来就调一遍
changeTab(state.tabActive)
})
let searchKeyWords = '';
// onLoad((option) => {
// // 一进来就调一遍
// changeTab(state.tabActive)
// })
// let searchKeyWords = '';
//获取车牌颜色文字
const getVehiclePlateColor = (id : number) => {
const colors = vehiclePlateColor.filter(item => item.id == id);
return colors[0].color
}
const flowPathTabHandle = (tab) => {
console.log("tab", tab)
state.tabActive = tab;
if (state.tabActive == '小程序') {
changeTab(state.tabActive)
} else {
console.log("apppppppp",)
getList()
}
};
// const getVehiclePlateColor = (id : number) => {
// const colors = vehiclePlateColor.filter(item => item.id == id);
// return colors[0].color
// }
// const flowPathTabHandle = (tab) => {
// console.log("tab", tab)
// state.tabActive = tab;
// if (state.tabActive == '小程序') {
// changeTab(state.tabActive)
// } else {
// console.log("apppppppp",)
// getList()
// }
// };
//搜索
const doSearch = () => {
// #ifdef MP-WEIXIN
if (!searchKeyWords) {
msg('请输入需要搜索的车牌号！');
return;
}
getList();
// #endif
// #ifdef MP-ALIPAY
tools.showLoadingAlert("加载中");
getList();
tools.hideLoadingAlert();
// #endif
}
// const doSearch = () => {
// // #ifdef MP-WEIXIN
// if (!searchKeyWords) {
// msg('请输入需要搜索的车牌号！');
// return;
// }
// getList();
// // #endif
// // #ifdef MP-ALIPAY
// tools.showLoadingAlert("加载中");
// getList();
// tools.hideLoadingAlert();
// // #endif
// }
//订单车牌号输入
const onKeyInput = (event) => {
searchKeyWords = event.target.value;
if (searchKeyWords == '') {
getList();
}
}
const getList = async () => {
if (!hasLogin()) {
uni.stopPullDownRefresh();
return;
}
const options = {
type: 2,
data: {
"opId": getItem(StorageKeys.OpenId),
"vehiclePlate": searchKeyWords,
"tabIndex": state.index + '',
"pageNo": params.pageNum,
"pageSize": params.pageSize,
},
method: 'POST',
showLoading: true
}
requestNew(appPage, options).then((res) => {
uni.hideLoading()
var data = res;
console.log("state.appOrdersList", data)
params.total = data.totalCount;
if (params.pageNum === 1) {
state.appOrdersList = [];
}
if (params.total > 0) {
const curList = data.data || [];
state.appOrdersList = params.reload ? curList : state.appOrdersList.concat(curList);
params.reload = false;
}
if (params.total === state.appOrdersList.length) {
params.reload = false;
params.status = 'noMore';
}
if (params.pageNum === 1) {
uni.stopPullDownRefresh();
}
// 订单发货后未激活 30天 以后 结束订单功能 insertTime >30 算出来距离今天是负数 updateTime<30(结束订单)
for (var k = 0; k < state.appOrdersList.length; k++) {
if (state.appOrdersList[k]['insertTime']) {
if (timesDiff(state.appOrdersList[k]['insertTime'].replace("T", " ")).days > 30) {
state.appOrdersList[k]['finishOrder'] = true //可以结束
} else {
state.appOrdersList[k]['finishOrder'] = false //不可以结束
}
}
if (state.appOrdersList[k]['updateTime']) {
if (timesDiff(state.appOrdersList[k]['updateTime'].replace("T", " ")).days <= 30) {
state.appOrdersList[k]['isUseAgain'] = true //可以再次使用
} else {
state.appOrdersList[k]['isUseAgain'] = false //不可以再次使用
}
}
}
uni.$emit("refreshOrder");
console.log("data.refresh===============", props.refresh, state.appOrdersList)
})
.catch((err) => {
console.log(err);
});
}
onReachBottom(() => {
loadMore();
});
// const onKeyInput = (event) => {
// searchKeyWords = event.target.value;
// if (searchKeyWords == '') {
// getList();
// }
// }
// const getList = async () => {
// if (!hasLogin()) {
// uni.stopPullDownRefresh();
// return;
// }
// const options = {
// type: 2,
// data: {
// "opId": getItem(StorageKeys.OpenId),
// "vehiclePlate": searchKeyWords,
// "tabIndex": state.index + '',
// "pageNo": params.pageNum,
// "pageSize": params.pageSize,
// },
// method: 'POST',
// showLoading: true
// }
// requestNew(appPage, options).then((res) => {
// uni.hideLoading()
// var data = res;
// console.log("state.appOrdersList", data)
// params.total = data.totalCount;
// if (params.pageNum === 1) {
// state.appOrdersList = [];
// }
// if (params.total > 0) {
// const curList = data.data || [];
// state.appOrdersList = params.reload ? curList : state.appOrdersList.concat(curList);
// params.reload = false;
// }
// if (params.total === state.appOrdersList.length) {
// params.reload = false;
// params.status = 'noMore';
// }
// if (params.pageNum === 1) {
// uni.stopPullDownRefresh();
// }
// // 订单发货后未激活 30天 以后 结束订单功能 insertTime >30 算出来距离今天是负数 updateTime<30(结束订单)
// for (var k = 0; k < state.appOrdersList.length; k++) {
// if (state.appOrdersList[k]['insertTime']) {
// if (timesDiff(state.appOrdersList[k]['insertTime'].replace("T", " ")).days > 30) {
// state.appOrdersList[k]['finishOrder'] = true //可以结束
// } else {
// state.appOrdersList[k]['finishOrder'] = false //不可以结束
// }
// }
// if (state.appOrdersList[k]['updateTime']) {
// if (timesDiff(state.appOrdersList[k]['updateTime'].replace("T", " ")).days <= 30) {
// state.appOrdersList[k]['isUseAgain'] = true //可以再次使用
// } else {
// state.appOrdersList[k]['isUseAgain'] = false //不可以再次使用
// }
// }
// }
// uni.$emit("refreshOrder");
// console.log("data.refresh===============", props.refresh, state.appOrdersList)
// })
// .catch((err) => {
// console.log(err);
// });
// }
// onReachBottom(() => {
// loadMore();
// });
/* 加载更多 */
const loadMore = () => {
if (params.total > state.appOrdersList.length) {
params.status = 'loading';
params.pageNum++;
getList();
} else {
params.status = 'noMore';
}
}
onPullDownRefresh(() => {
if (hasLogin()) {
getList();
}
});
// const loadMore = () => {
// if (params.total > state.appOrdersList.length) {
// params.status = 'loading';
// params.pageNum++;
// getList();
// } else {
// params.status = 'noMore';
// }
// }
// onPullDownRefresh(() => {
// if (hasLogin()) {
// getList();
// }
// });
</script>

<style lang="scss">
page {
background: #eef7f7;
background: #E9EDF0;
}

:deep(.u-mode-center-box) {
@@ -363,7 +284,6 @@
}

.search-layout {
padding-top: 180rpx;

.search-box {
margin: 30rpx 30rpx 0rpx 30rpx;

+ 2
- 2
subpackage/after-sale/progress-query/progress-query-business-details.vue Ver arquivo

@@ -91,8 +91,8 @@
padding: 20rpx 0;
}
.btn-primary {
border: 1px solid #00b38b;
color: #00b38b;
color:white;
background-color: #133850 ;
}
.btn {
height: 60rpx;

+ 7
- 8
subpackage/orders/order-details-new.vue Ver arquivo

@@ -768,14 +768,13 @@

.d-label {
font-size: 26rpx;
//width: 135rpx;
color: #999999;
// color: #133850;
text-align: right;
}

.d-value {
font-size: 26rpx;
color: #333333;
// color: #133850;
flex: 1;
overflow: hidden;
}
@@ -795,9 +794,9 @@
}

.btn {
border: 1px solid #DCDCDC;
border: 1px solid #133850 ;
color: #133850 ;
border-radius: 30rpx;
color: #333333;
font-size: 24rpx;
height: 52rpx;
width: 130rpx;
@@ -807,11 +806,11 @@
}

.btn-green {
border: 1px solid #00B38B;
color:white;
background-color: #133850 ;
border-radius: 30rpx;
color: #00B38B;
height: 52rpx;
padding: 0 10rpx;
padding: 2rpx 22rpx;
display: flex;
justify-content: center;
align-items: center;

+ 77
- 2
utils/utils.ts Ver arquivo

@@ -218,12 +218,87 @@ export const getOrderStatusName = (status) => {
break;
}
}

//根据订单状态获取订单状态文字
export const getOrderStatusNameNew = (status) => {
switch (Number(status)) {
case Number(OrderStatus.完成填写基本信息):
return 'shenqingzhong';
break;
case Number(OrderStatus["完成个人/单位信息上传"]):
return 'shenqingzhong';
break;
case Number(OrderStatus.完成车辆信息上传):
return 'shenqingzhong';
break;
case Number(OrderStatus.待支付):
return 'daizhifu';
break;
case Number(OrderStatus.待支付3):
return 'shenqingzhong';
break;
case Number(OrderStatus.待支付2):
return 'daizhifu';
break;
case Number(OrderStatus.完成签约):
return 'finishqianyue';
break;
case Number(OrderStatus.待审核):
return 'daishenhe';
break;
case Number(OrderStatus.审核不通过):
return 'nopass';
break;
case Number(OrderStatus.待发货):
return 'daifanhuo';
break;
case Number(OrderStatus.待收货):
return 'daishouhuo';
break;
case Number(OrderStatus.待激活):
return 'dajihuo';
break;
case Number(OrderStatus.已完成):
return 'yiwancheng';
break;
case Number(OrderStatus["已申请-换货"]):
return 'huanhuozhong';
break;
case Number(OrderStatus["已申请-退货"]):
return 'tuihuozhong';
break;
case Number(OrderStatus.已结束):
return 'yijieshu';
break;
case Number(OrderStatus.退款中):
return 'tuikuanzhong';
break;
case Number(OrderStatus.退款成功):
return 'tuikuanchenggong';
break;
case Number(OrderStatus.退货成功):
return 'tuihuosuccess';
break;
case Number(OrderStatus["换货-设备已回收"]):
return 'huanhuochenggong';
break;
case Number(OrderStatus["完成车辆信息上传/待支付"]):
return 'daizhifu';
break;
case Number(OrderStatus["已支付/待签约"]):
return 'daiqianyue';
break;
default:
break;
}
}
//根据订单类型获取订单类型文字
export const getOrderTypeName = (orderType) => {
return OrderTypes[orderType];
}

//根据订单类型获取订单类型文字
export const getOrderTypeNameNew = (orderType) => {
return OrderTypesNew[orderType];
}
//根据车辆类型获取车辆名称
export const getCarTypeName = (carType : any) => {
switch (carType) {

Escrever Pré-visualização
Carregando…
Cancelar
Salvar