Skip to content

U
uni-pdtravel
Commit 92d2ea9b authored by qipeng's avatar qipeng
Browse files
Options

订单列表修改

parent 3ad0f954
Hide whitespace changes
Inline Side-by-side
Showing with 879 additions and 35 deletions
pages/my/order/productList/productList.vue
View file @ 92d2ea9b
<template>
<view>
<view class="product-title">
<u-icon name="arrow-left" color="#191919" size="32" @click=""></u-icon>
我的订单
</view>
<view class="product-orderState">
<view class="orderState-click">
<text class="click-name">全部</text>
<view class="click-line">
<text></text>
</view>
<view class="productBigBox">
<view class=".product-SearchBox">
<view class="product-title">
<u-icon name="arrow-left" color="#191919" size="32" @click=""></u-icon>
我的订单
</view>
<view class="orderState-click">
<text class="click-name">待付款</text>
<view class="click-line">
<text></text>
<!--头部切换-->
<view class="product-orderState">
<view class="orderState-click" :class="orderStatus===''?'orderState-clickAct':''" @click="screenChange('')">
全部
<view class="click-line">
<text></text>
</view>
</view>
</view>
<view class="orderState-click">
<text class="click-name">待使用</text>
<view class="click-line">
<text></text>
<view class="orderState-click" :class="orderStatus==='0'?'orderState-clickAct':''" @click="screenChange('0')">
待付款
<view class="click-line">
<text></text>
</view>
</view>
<view class="orderState-click" :class="orderStatus=='2'?'orderState-clickAct':''" @click="screenChange('2')">
待使用
<view class="click-line">
<text></text>
</view>
</view>
<view class="orderState-click" :class="orderStatus=='3'?'orderState-clickAct':''" @click="screenChange('3')">
待收货
<view class="click-line">
<text></text>
</view>
</view>
<view class="orderState-click" :class="orderStatus=='5'?'orderState-clickAct':''" @click="screenChange('5')">
待评价
<view class="click-line">
<text></text>
</view>
</view>
</view>
<view class="orderState-click">
<text class="click-name">待收货</text>
<view class="click-line">
<text></text>
<!--查询-->
<view class="product-searchBt">
<view class="searchBt-left" @click="orderShow=true">
<text>{{orderName}}</text>
<u-icon v-if="orderShow==false" name="arrow-down" color="#333333" size="28"></u-icon>
<u-icon v-else name="arrow-up" color="#333333" size="28"></u-icon>
<u-picker mode="selector" v-model="orderShow" :default-selector="[orderType]" :range="option" range-key="cateName" @confirm="industrysTypeConfirm($event)" @cancel="cancel"></u-picker>
</view>
<text @click="showQueryPhone()">手机查询</text>
</view>
<view class="orderState-click">
<text class="click-name">待评价</text>
<view class="click-line">
<text></text>
</view>
<!--手机查询遮罩-->
<u-popup mode="bottom" v-model="phoneQuery">
<view class="content">
<view class="content-title">
订单查询
<u-icon name="close" color="#333333" size="28" @click="phoneQuery=false"></u-icon>
</view>
<view class="content-list">
<text class="list-name">手机号码</text>
<text class="list-name2">：</text>
<input class="uni-input" v-model.trim="touristPhone" />
</view>
<view class="content-list">
<text class="list-name">姓名</text>
<text class="list-name2">：</text>
<input class="uni-input" v-model.trim="touristName" />
</view>
<view class="confrim-btn">
<u-button @click="queryPhoneOrder()">查询</u-button>
</view>
</view>
</u-popup>
<!--列表-->
<view class="product-goods" v-if="lists.length>0">
<template v-for="(item,index) in lists">
<view class="product-block" :key="index" v-if="item.showList" @click="orderJump(item.id)">
<view class="block-title">
<view class="title-left">
<view class="left-imgBox" v-if="item.orderType==1">
<image class="left-img" :src="require('@/static/img/my/iconjingqumenpiao.png')"></image>
</view>
<view class="left-imgBox" v-else-if="item.orderType==2">
<image class="left-img" :src="require('@/static/img/my/iconjiudian.png')"></image>
</view>
<view class="left-imgBox" v-else-if="item.orderType==3">
<image class="left-img" :src="require('@/static/img/my/iconcanyin.png')"></image>
</view>
<view class="left-imgBox" v-else-if="item.orderType==4">
<image class="left-img" :src="require('@/static/img/my/iconliwu1.png')"></image>
</view>
<view class="left-imgBox" v-else-if="item.orderType==5">
<image class="left-img" :src="require('@/static/img/my/iconchuzuche.png')"></image>
</view>
<view class="left-imgBox" v-else-if="item.orderType==10">
<image class="left-img" :src="require('@/static/img/my/iconzuhe.png')"></image>
</view>
<view class="left-imgBox" v-else>
<image class="left-img" :src="require('@/static/img/my/iconqita.png')"></image>
</view>
<text class="left-Name">{{item.merchantName}}({{item.productName}})</text>
</view>
<view class="title-right" v-if="item.orderType!=10&&item.orderType!=0">
<template v-if="item.orderType==1">
{{item.orderStatus|orderStatus1}}
</template>
<template v-else-if="item.orderType==2">
{{item.orderStatus|orderStatus2}}
</template>
<template v-else-if="item.orderType==3">
{{item.orderStatus|orderStatus3}}
</template>
<template v-else-if="item.orderType==4">
{{item.orderStatus|orderStatus4}}
</template>
</view>
</view>
<view class="block-main">
<view class="mian-InfoWrap">
<view class="InfoWrap-mb30">订单时间：{{item.playDate.substr(0,10)}}</view>
<view>
购买数量：
<template v-if="item.orderType==1">{{item.orderNum}}张</template>
<template v-else-if="item.orderType==2">{{item.orderNum}}间</template>
<template v-else-if="item.orderType==3">{{item.orderNum}}桌</template>
<template v-else-if="item.orderType==4">{{item.orderNum}}箱</template>
<template v-else-if="item.orderType==10">{{item.orderNum}}张</template>
</view>
<view class="allPice">
<text>¥</text>{{item.totalMoney}}
</view>
</view>
<view class="main-right">
<u-icon name="arrow-right" color="#333333" size="28"></u-icon>
</view>
</view>
<view class="block-Btn">
<view class="block-button" @click.stop="operation(item,index)" v-if="item.orderStatus==9">删除</view>
<view class="block-button" @click.stop="operation(item,index)" v-if="item.orderStatus==0">取消订单</view>
<template v-if="item.orderType==4"><!--特产-->
<view class="block-button" v-if="item.orderStatus==1||item.orderStatus==2||item.orderStatus==4||item.orderStatus==5||item.orderStatus==10" @click.stop="orderJump(item.id)">查看详情</view>
<view class="block-button" v-if="item.orderStatus==2||item.orderStatus==4||item.orderStatus==5||item.orderStatus==10">查看物流</view>
<view class="block-button" v-if="item.orderStatus==5">评价</view>
</template>
<template v-else>
<view class="block-button" v-if="item.orderStatus==1||item.orderStatus==2||item.orderStatus==4||item.orderStatus==5||item.orderStatus==10" @click.stop="orderJump(item.id)">{{item.orderStatus==2?'去使用':'查看详情'}}</view>
<view class="block-button" v-if="item.orderStatus==2&&item.isRefund!=0" @click.stop="refundJump(item.id)">退款/售后</view>
<view class="block-button" v-if="item.orderStatus==5">评价</view>
</template>
<view class="block-button block-buttonOrange" v-if="item.orderStatus==0">去支付</view>
</view>
</view>
</template>
<view class="goods-NoMore" v-if="dataLengthType==true">暂无更多数据</view>
</view>
<view class="product-goods" v-else>
<view class="order-No">暂无订单信息</view>
</view>
<u-toast ref="uToast" />
<u-modal v-model="configShow" show-cancel-button="true" :content="configTitle" @confirm="operationEnter()" @cancel="operationClose()"></u-modal>
</view>
</template>
<script>
import uPicker from "@/uview-ui/components/u-picker/u-picker.vue";
import uPopup from "@/uview-ui/components/u-popup/u-popup.vue";
import uToast from "@/uview-ui/components/u-toast/u-toast.vue";
import uModal from "@/uview-ui/components/u-modal/u-modal.vue";
export default {
filters:{
orderType(i){//订单类型
switch(i){
case 0:
return '其他'
break
case 1:
return '景区'
break
case 2:
return '酒店'
break
case 3:
return '餐饮'
break
case 4:
return '特产'
case 5:
return '运营车'
case 10:
return '组合订单'
}
},
orderStatus1(i){//景区订单状态
switch(i){
case 0:
return '待支付'
break
case 1:
return '出票中'
break
case 2:
return '出票成功'
break
case 3:
return '预定失败'
break
case 4:
return '核销中'
break
case 5:
return '待评价'
break
case 6:
return '退款中'
break
case 7:
return '部分退货/退款'
break
case 8:
return '全部退款退货 '
break
case 9:
return '取消 '
break
case 10:
return '已完成 '
break
case 11:
return '已过期 '
break
}
},
orderStatus2(i){//酒店订单状态
switch(i){
case 0:
return '待支付'
break
case 1:
return '确认中'
break
case 2:
return '预定成功'
break
case 3:
return '预定失败'
break
case 4:
return '核销中'
break
case 5:
return '待评价'
break
case 6:
return '退款中'
break
case 7:
return '部分退货/退款'
break
case 8:
return '全部退款退货 '
break
case 9:
return '取消 '
break
case 10:
return '已完成 '
break
case 11:
return '已过期 '
break
}
},
orderStatus3(i){//餐饮订单状态
switch(i){
case 0:
return '待支付'
break
case 1:
return '确认中'
break
case 2:
return '预定成功'
break
case 3:
return '预定失败'
break
case 4:
return '核销中'
break
case 5:
return '待评价'
break
case 6:
return '退款中'
break
case 7:
return '部分退货/退款'
break
case 8:
return '全部退款退货 '
break
case 9:
return '取消 '
break
case 10:
return '已完成 '
break
case 11:
return '已过期 '
break
}
},
orderStatus4(i){//餐饮订单状态
switch(i){
case 0:
return '待支付'
break
case 1:
return '待发货'
break
case 2:
return '待收货'
break
case 3:
return '预定失败'
break
case 4:
return '核销中'
break
case 5:
return '已收货'
break
case 6:
return '退款中'
break
case 7:
return '部分退货/退款'
break
case 8:
return '全部退款退货 '
break
case 9:
return '取消 '
break
case 10:
return '已完成 '
break
case 11:
return '已过期 '
break
}
}
},
components: {
uPicker,
uPopup,
uToast,
uModal
},
data() {
return {
queryLoad:false,//查询加载图标显示隐藏
phoneQuery:false,//手机查询显示隐藏
touristPhone:'',//旅客电话
touristName:'',//旅客姓名
orderStatus:'',//订单状态
nodataShow:false,//没有数据时展示
lists:[],//数据
orderType:0,//筛选 //1景区，2酒店，3餐饮，4特产，5运营车，10组合订单
orderName:'全部',//筛选 //1景区，2酒店，3餐饮，4特产，5运营车，10组合订单
orderShow:false,
option: [
{ cateName: '全部', id: 0 },
{ cateName: '景区', id: 1 },
{ cateName: '酒店', id: 2 },
{ cateName: '餐饮', id: 3 },
{ cateName: '特产', id: 4 },
// { cateName: '运营车', id: 5 },
// { cateName: '组合订单', id: 10 },
],
isTrue:true,//截留 防止重复加载
pageIndex:1,//当前页
pageTotal:0,//总条数
configShow:false,//删除订单确认框
configTitle:'',//弹窗title
operationItem:null,//操作项的数据 删除和取消订单
operationIndex:null,//操作下标
callbackurl:'',//回调页面
ifNotice:'',//是否通知
openId:'',
ifyukuaiCode:'',//渝快付
dataLengthType:false,//上拉加载无更多数据时显示
}
},
onLoad(option) {
//this.openId = uni.getStorageSync("openid")
this.openId = "oh2UV1lyYABHMZ1rMlgjhVHyyYDQ"
this.ifyukuaiCode = option.ifyukuaiCode||''
this.getData(1)
},
methods: {
methods: {
screenChange(i){//顶部导航切换
this.orderStatus = i
this.pageIndex = 1
this.pageTotal = 0
this.isTrue = true
this.lists = []
this.getData(1)
},
industrysTypeConfirm(e) {//单列----分类 点击确定
this.orderType = this.option[e].id
this.orderName = this.option[e].cateName
this.pageIndex = 1
this.pageTotal = 0
this.isTrue = true
this.lists = []
this.getData(1)
this.cancel()
},
cancel() {//单列 点击取消
this.orderShow = false
},
showQueryPhone(){//展示手机查询弹窗
this.touristPhone=''
this.touristName=''
this.phoneQuery=true
},
queryPhoneOrder(){//通过手机号查看订单
}
if(!(/^1[34578]\d{9}$/.test(this.touristPhone))){
this.$refs.uToast.show({
title: '请填写正确的手机号码',
type: 'error',
})
return
}
if(this.touristName==''){
this.$refs.uToast.show({
title: '姓名不可为空',
type: 'error',
})
return
}
let data={
openid:this.openId,//用户Id
touristPhone:this.touristPhone,//旅客电话
touristName:this.touristName,//旅客姓名
}
this.queryLoad=true
this.$request('order/pdOrder/findOrderInfoByPhone',data).then((res)=>{
this.queryLoad=false
if(res.code=='00'){
this.phoneQuery=false
uni.navigateTo({
url: '/pages/my/order/productList/productList'
})
}else{
this.$refs.uToast.show({
title: res.message,
type: 'error',
})
}
})
},
getData(flag){//获取订单列表
this.nodataShow = false
if(this.isTrue){
this.isTrue = false
if(this.orderStatus=='2'){//点击的待使用
var orderStatusList=[2,4,5]
var data={
pageIndex:this.pageIndex,
pageSize:20,
orderType:this.orderType==0?'':this.orderType,
orderStatusList :orderStatusList,
userId:this.openId
}
}else{
var data={
pageIndex:this.pageIndex,
pageSize:20,
orderType:this.orderType==0?'':this.orderType,
orderStatus:this.orderStatus=='3'?2:parseFloat(this.orderStatus),
userId:this.openId
}
}
this.$request('order/userOrder/findOrderList',data)
.then((res)=>{
var ret = res
if(ret.code=='00'){
if(flag==1){//第一次加载
this.lists = []
}
if(ret.data.length>0){
this.dataLengthType = false
}else{
this.dataLengthType = true
}
ret.data.list.forEach((item)=>{
if(this.orderStatus=='0'){////待付款的订单 pid 不能空的不显示
if(item.pid){
}else{
this.lists.push(item)
}
}else if(this.orderStatus=='2'){//待评价和待使用不能显示组合订单
if(item.orderType!=10&&item.orderType!=4){
this.lists.push(item)
}
}else if(this.orderStatus=='3'){//待收货和待使用不能显示组合订单
if(item.orderType!=10&&item.orderType==4){
this.lists.push(item)
}
}else if(this.orderStatus=='5'){//待评价不能显示组合订单
if(item.orderType!=10){
this.lists.push(item)
}
}else{
if(item.isDelete!=1){//（ 0 未删除 1 已删除）
this.lists.push(item)
}
}
})
this.isTrue = true
this.pageIndex++
this.pageTotal = ret.data.pageTotal
if(this.lists.length==0){
this.nodataShow = true
}
// 主订单显示待支付子订单显示除了待支付
this.lists.forEach((item)=>{
if(item.subOrderType!=9){
if(item.orderType==10&&item.orderStatus==0){
item.showList=true
}
if(item.orderType!=10&&item.orderStatus!=0){
item.showList=true
}
}
})
}else{
this.$refs.uToast.show({
title: '暂无订单信息',
type: 'error',
})
}
})
}
},
operation(item,index){//操作 删除和取消订单
this.operationItem = item
this.operationIndex = index
if(item.orderStatus==0){
this.configTitle = '确认取消订单'
}else{
this.configTitle = '确认删除订单'
}
this.configShow = true
},
operationEnter(){//操作 删除和取消订单 确定
if(this.operationItem.orderStatus==0){//取消订单
this.$request('order/userOrder/cancelOrder',{
id:this.operationItem.id,
userId:this.openId
})
.then((res)=>{
var ret = res
if(ret.code=='00'){
this.$refs.uToast.show({
title: "订单取消成功",
type: 'success',
})
//this.$store.commit('showLoading')
this.pageIndex = 1
this.pageTotal = 0
this.isTrue = true
this.lists[this.operationIndex].orderStatus = 9
// this.lists = []
// this.getData(1)
this.configShow = false
}else{
this.$refs.uToast.show({
title: ret.message,
type: 'error',
})
}
})
}else{//删除订单
this.$request('order/userOrder/deleteOrder',{
id:this.operationItem.id,
userId:this.openId
})
.then((res)=>{
var ret = res
if(ret.code=='00'){
this.$refs.uToast.show({
title: "订单删除成功",
type: 'success',
})
//this.$store.commit('showLoading')
this.pageIndex = 1
this.pageTotal = 0
this.isTrue = true
this.lists.splice(this.operationIndex,1)
// this.lists = []
// this.getData(1)
this.configShow = false
}else{
this.$refs.uToast.show({
title: ret.message,
type: 'error',
})
}
})
}
},
operationClose(){//操作 删除和取消订单 取消
this.configShow =false
},
orderJump(orderId){//-------------------订单详情跳转
uni.navigateTo({
url: '/pages/my/order/electronicTicket/electronicTicket?orderId='+orderId
})
},
refundJump(id){//-------------------退款
uni.reLaunch({
url: '/pages/my/order/applyAfterSales/applyAfterSales?orderId='+id+'&ifyukuaiCode='+this.ifyukuaiCode
})
},
},
onReachBottom(){//上拉加载
uni.showToast({
title: '进入上拉加载',
icon: 'none',
duration: 2000
})
this.pageIndex++;
this.getData(2);
},
}
</script>
......@@ -60,6 +646,17 @@
page{
background-color: #f5f5f5;
}
.productBigBox{
background-color: #f5f5f5;
min-height: 100vh;
}
.product-SearchBox{
width: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 20;
}
.product-title{
display: flex;
justify-content: center;
......@@ -70,7 +667,6 @@ page{
font-weight: bold;
line-height: 80rpx;
text-align: center;
position: relative;
u-icon{
height: 80rpx;
position: absolute;
......@@ -82,8 +678,256 @@ page{
.product-orderState{
display: flex;
justify-content: space-between;
width: 100%;
padding: 0 24rpx;
background-color: #fff;
.orderState-click{
display: flex;
justify-content: center;
width: 100rpx;
height: 80rpx;
align-items: center;
color: #999999;
font-size: 28rpx;
position: relative;
.click-line{
display: none;
width: 55%;
height: 4rpx;
background-image: linear-gradient(to right, #9FCFFF , #DAE6F6);
margin: auto;
position: absolute;
bottom: 12rpx;
left: 0;
right: 0;
}
}
.orderState-clickAct{
color: #191919;
font-size: 32rpx;
font-weight: bold;
.click-line{
display: inline-block;
}
}
}
.product-searchBt{
width: 100%;
height: 80rpx;
box-shadow: 0 0 0;
display: flex;
background-color:#fff;
justify-content: space-between;
padding: 0 30rpx;
line-height: 80rpx;
box-shadow: 0px 6px 8px rgba(0, 0, 0, 0.08);
.searchBt-left{
display: flex;
width: 100rpx;
justify-content: center;
text:nth-child(1){
margin-right: 5rpx;
}
}
}
.content-title{
display: flex;
justify-content: center;
height: 80rpx;
line-height: 80rpx;
position: relative;
font-size: 32rpx;
font-weight: bold;
u-icon{
color: #c8c9cc;
position: absolute;
right: 16rpx;
top: 0;
bottom: 0;
}
}
.content-list{
display: flex;
padding: 0 24rpx 0 24rpx;
margin-top: 20rpx;
.list-name{
display: inline-block;
text-align: justify;
text-align-last: justify;
width: 110rpx;
font-size: 26rpx;
line-height: 40px;
flex-shrink: 0;
}
.list-name2{
line-height: 40px;
}
.uni-input{
height: 40px;
border-bottom: 1px solid #d1d1d1;
flex: 1;
}
}
.confrim-btn{
margin: 64rpx 24rpx 40rpx 24rpx;
/deep/ .u-size-default{
height: 80rpx;
line-height: 80rpx;
border-radius: 15rpx;
color: #FFFFFF;
text-align: center;
background: linear-gradient(134deg, #ED400C 0%, #FB862C 100%);
font-size: 28rpx;
border-radius: 8rpx;
border: none;
}
}
.product-goods{
padding: 30rpx;
padding-top: 270rpx;
overflow: auto;
position: relative;
.product-block{
border-radius: 5px;
margin-bottom: 20rpx;
background: #fff;
box-shadow: 0px 3px 0px rgba(0, 0, 0, 0.02);
.block-title{
padding: 30rpx 24rpx 25rpx 24rpx;
box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.08);
display: flex;
justify-content: space-between;
font-size: 30rpx;
color: #333;
.title-left{
flex: 1;
display: flex;
align-items: center;
.left-imgBox{
width: 32rpx;
height: 32rpx;
display: flex;
margin-right: 16rpx;
border-radius: 3px;
flex-shrink: 0;
background-color: #FEB221;
}
.left-img{
display: inline-block;
width: 32rpx;
height: 32rpx;
}
.left-Name{
font-size: 0.32rem;
color: #191919;
font-weight: bold;
flex: 1;
font-size: 28rpx;
line-height: 36rpx;
}
}
.title-right{
width: 160rpx;
display: flex;
justify-content: flex-end;
align-items: center;
font-size: 24rpx;
color: #ED400C;
}
}
.block-main{
display: flex;
height: 174rpx;
border-bottom: none;
color: #333333;
position: relative;
padding: 36rpx 24rpx 24rpx 24rpx;
.mian-InfoWrap{
display: flex;
flex: 1;
font-size: 30rpx;
color: #666666;
flex-wrap: wrap;
word-break: break-all;
margin-right: 20rpx;
flex-direction: column;
justify-content: center;
height: 100%;
.InfoWrap-mb30{
margin-bottom: 30rpx;
}
.allPice{
position: absolute;
left: 24rpx;
bottom: -80rpx;
color: #ED400C;
font-size: 40rpx;
font-weight: bold;
display: flex;
text{
font-size: 24rpx;
font-weight: normal;
margin-right: 4rpx;
line-height: 60rpx;
}
}
}
.main-right{
height: 100%;
display: flex;
align-items: center;
color: #6b6b6b;
}
}
.block-Btn{
display: flex;
justify-content: flex-end;
height: 100rpx;
align-items: center;
padding: 0 20rpx;
.block-button{
width: 152rpx;
height: 64rpx;
line-height: 64rpx;
color: #333333;
padding: 0;
text-align: center;
display: inline-block;
box-sizing: content-box;
font-size: 28rpx;
border: 1px solid #cccccc;
border-radius: 8rpx;
align-items: center;
margin-right: 15rpx;
}
.block-button:nth-last-child(1){
margin-right: 0;
}
.block-buttonOrange{
color: #f9690e;
border: 1px solid #f9690e;
}
}
}
.goods-NoMore{
height: 40rpx;
color: #666666;
font-size: 30rpx;
line-height: 40rpx;
text-align: center;
}
.order-No{
height: 40rpx;
color: #666666;
font-size: 30rpx;
line-height: 40rpx;
text-align: center;
margin: auto;
position: absolute;
top: 400;
right: 0;
bottom: 0;
left: 0;
}
}
</style>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment