Skip to content

U
uni-pdtravel
Commit 53604d34 authored by qipeng's avatar qipeng
Browse files
Options

退单流程

parent 1e405160
Hide whitespace changes
Inline Side-by-side
Showing with 679 additions and 32 deletions
pages/my/order/afterSale/applyAfterSale/applyAfterSale - 副本.vue 0 → 100644
View file @ 53604d34
<template>
<view>
<web-view :src="outUrl"></web-view>
</view>
</template>
<script>
export default {
data() {
return {
outUrl:'',//跳出地址
}
},
onLoad(option) {
let orderId= option.orderId||''
let pdOpenid=uni.getStorageSync('openid')//胖丁小程序openid,临时用，当公众号授权做好之后可以删除
let pdToken=uni.getStorageSync('token')
let pdCreateUserId=uni.getStorageSync('createUserId')
let pdUserId=uni.getStorageSync('userId')
let ifyukuaiCode=option.ifyukuaiCode||''//是否是渝快码跳入，渝快码跳入需要在H5端另外走流程
this.outUrl='https://wx.pangdly.com/#/applyAfterSales?id='+orderId+'&pdOpenid='+pdOpenid+'&pdToken='+pdToken+'&pdCreateUserId='+pdCreateUserId+'&pdUserId='+pdUserId+'&ifyukuaiCode='+ifyukuaiCode
},
methods: {
}
}
</script>
<style>
pages/my/order/afterSale/applyAfterSale/applyAfterSale.vue
View file @ 53604d34
<template>
<view>
<web-view :src="outUrl"></web-view>
<view class="apply-box">
<!--提示-->
<view class="apply-tips">
同一身份证退票当日仅再购1次，同一身份证一个月累计可购3次
</view>
<view class="apply-ticket general-Box">
<view class="ticket-title">
<view class="title-name">{{orderInfo.merchantName}}（{{orderInfo.productName}}）</view>
<view class="title-num">x{{orderInfo.orderNum}}</view>
</view>
<view class="ticket-timer">游玩当日{{orderInfo.orderRefundRuleList[0].refundTime}}之前未使用可退</view>
</view>
<!-- <view class="apply-user general-Box">
<view class="user-title">
<view class="title-name">用户选择</view>
<u-checkbox @change="checkedAll" v-model="applyClickAll" >全选</u-checkbox>
</view>
<u-checkbox-group @change="checkboxGroupChange">
<u-checkbox
@change="checkboxChange"
v-model="item.checked"
v-for="(item, index) in applyUserList" :key="index"
:name="item.name"
>{{item.name}}</u-checkbox>
</u-checkbox-group>
</view> -->
<view class="apply-moneyBox general-Box">
<view class="moneyBox-list">
<view class="list-name">订单实付</view>
<view class="list-money">￥{{orderInfo.pdOrderMoney}}</view>
</view>
<view class="moneyBox-list">
<view class="list-name">退款金额</view>
<view class="list-money list-clolrOrange">￥{{parseFloat(orderInfo.pdOrderMoney)-parseFloat(orderInfo.refundFee)}}</view>
</view>
</view>
<view class="apply-cause general-Box">
<view class="cause-title">
退改原因（必填）
</view>
<view class="cause-list">
<view class="list-case" v-for="(item,index) in causeList" :key="index" @click="clickNewFun(item.labelNum)">
<view class="case-name">{{item.name}}</view>
<view class="case-click" :class="causeNum==item.labelNum?'case-clickAct':''"></view>
</view>
</view>
</view>
<view class="apply-textarea general-Box" v-if="causeNum==5">
<u-input v-model="causeInput" type="textarea" placeholder="补充详细退改原因以便商家更快帮您处理" maxlength="200" />
</view>
<view class="apply-toButton" v-if="isRefund" @click="confirm()">
退款提交
</view>
<view class="apply-toButton" v-else>
退款时间为08:00:00-{{orderInfo.orderRefundRuleList[0].refundTime}}
</view>
</view>
</template>
......@@ -8,21 +62,339 @@
export default {
data() {
return {
outUrl:'',//跳出地址
applyClickAll:false,//是否全选
applyUserList:[
{
name:'张三',
checked:false,
},
{
name:'李四',
checked:false,
},
],//用户信息
causeList:[
{
name:'更改出行日期',
labelNum:1
},
{
name:'计划有变',
labelNum:2
},
{
name:'信息填错',
labelNum:3
},
{
name:'景区临时关闭',
labelNum:4
},
{
name:'其他原因',
labelNum:5
},
],//退订原因
causeNum:null,
reason:'',//退单原因
causeInput:'',//其他原因
id:'',//订单ID
openId:'',//用户ID
orderInfo:{},//订单信息
isRefund:false,//是否可以退单
}
},
onLoad(option) {
let orderId= option.orderId||''
let pdOpenid=uni.getStorageSync('openid')//胖丁小程序openid,临时用，当公众号授权做好之后可以删除
let pdToken=uni.getStorageSync('token')
let pdCreateUserId=uni.getStorageSync('createUserId')
let pdUserId=uni.getStorageSync('userId')
let ifyukuaiCode=option.ifyukuaiCode||''//是否是渝快码跳入，渝快码跳入需要在H5端另外走流程
this.outUrl='https://wx.pangdly.com/#/applyAfterSales?id='+orderId+'&pdOpenid='+pdOpenid+'&pdToken='+pdToken+'&pdCreateUserId='+pdCreateUserId+'&pdUserId='+pdUserId+'&ifyukuaiCode='+ifyukuaiCode
this.id = option.orderId||''
this.openId = uni.getStorageSync('openid') //openid oroHZ5FaUQ_SOOC_uQQP92fJpBRE oh2UV1lyYABHMZ1rMlgjhVHyyYDQ
//this.openId = 'oh2UV1lyYABHMZ1rMlgjhVHyyYDQ'
this.getDetail()
},
methods: {
confirm(){//提交退订申请
if(this.causeNum==5&&this.causeInput==''){
uni.showToast({
title: '请输入原因',
icon: 'none'
})
return false
}
if(this.causeNum==5){
this.reason = this.causeInput
}else if(this.causeNum==1){
this.reason = '更改出行日期'
}else if(this.causeNum==2){
this.reason = '计划有变'
}else if(this.causeNum==3){
this.reason = '信息填错'
}else if(this.causeNum==4){
this.reason = '景区临时关闭'
}
if(this.reason==''){
uni.showToast({
title: '请选择退改原因',
icon: 'none'
})
return false
}
var data = {
orderId:this.orderInfo.id,
userId:this.openId,
refundReason:this.reason,
refundNum:this.orderInfo.orderNum,
refundMoney:parseFloat(this.orderInfo.pdOrderMoney)-parseFloat(this.orderInfo.depositReceived),
pdRefundMoney:parseFloat(this.orderInfo.pdOrderMoney),
refundType:0,
pdRefundFee:this.orderInfo.depositReceived,
}
this.$request('order/userOrder/refundTicket',data).then((res)=>{
if(res.code == '00'){
uni.showToast({
title: '申请成功',
icon: 'none'
})
uni.reLaunch({
url: '/pages/my/order/orderList/orderList'
})
}else{
uni.showToast({
title: res.message,
icon: 'none'
})
}
})
},
getDetail(){//订单信息加载
var data = {
orderId:this.id,
userId:this.openId
}
this.$request('order/userOrder/findOrderDetail',data).then((res)=>{
if(res.code == '00'){
this.orderInfo = res.data
if(this.getNowTime()>'08:00:00'&&this.getNowTime()<this.orderInfo.orderRefundRuleList[0].refundTime){
this.isRefund = true
}else{
this.isRefund = false
}
}else{
uni.showToast({
title: res.message,
icon: 'none'
})
}
})
},
//当前选择的原因
clickNewFun(labelNum){
this.causeNum = labelNum
},
// // 选中某个复选框时，由checkbox时触发 可以获取当前选择值的所有信息
// checkboxChange(e) {
// // console.log(e)
// },
// // 选中任一checkbox时，由checkbox-group触发 已经选择了多少选项
// checkboxGroupChange(e) {
// // console.log(e)
// if(this.applyUserList.length==e.length){
// this.applyClickAll = true
// }else{
// this.applyClickAll =false
// }
// },
// // 全选
// checkedAll(e) {
// console.log(e)
// if(e.value==true){
// this.applyUserList.map(val => {
// val.checked = true
// })
// }else{
// this.applyUserList.map(val => {
// val.checked = false
// })
// }
// },
getNowTime() {//获取当前时间(HH-MM-SS)
var date = new Date()
var seperator1 = '-'
var seperator2 = ':'
var month = date.getMonth() + 1
var strDate = date.getDate()
if (month >= 1 && month <= 9) {
month = '0' + month
}
if (strDate >= 0 && strDate <= 9) {
strDate = '0' + strDate
}
var Hours = date.getHours()
var Minutes = date.getMinutes()
var Seconds = date.getSeconds()
if (Hours >= 0 && Hours <= 9) {
Hours = '0' + Hours
}
if (Minutes >= 0 && Minutes <= 9) {
Minutes = '0' + Minutes
}
if (Seconds >= 0 && Seconds <= 9) {
Seconds = '0' + Seconds
}
var time = Hours + seperator2 + Minutes + seperator2 + Seconds
return time
},
}
}
</script>
<style>
<style scoped="scoped" lang="scss">
.apply-box{
height: 100vh;
background-color: #ECF3FE;
padding: 0rpx 0rpx 122rpx 0rpx;
overflow: auto;
}
.apply-tips{
padding: 12rpx 32rpx 12rpx 32rpx;
font-size: 24rpx;
color: #FC771D;
line-height: 42rpx;
background: #FFF1E8;
margin-bottom: 16rpx;
}
.general-Box{
width: 702rpx;
padding: 0 24rpx 0 24rpx;
background: #FFFFFF;
box-shadow: 0rpx 0rpx 16rpx 2rpx rgba(0,0,0,0.08);
border-radius: 16rpx 16rpx 16rpx 16rpx;
margin: 0 auto 16rpx auto;
}
.apply-ticket{
padding: 32rpx 24rpx 32rpx 24rpx;
.ticket-title{
display: flex;
justify-content: space-between;
margin-bottom: 16rpx;
.title-name{
font-size: 32rpx;
font-weight: bold;
color: #191919;
line-height: 40rpx;
}
.title-num{
font-size: 32rpx;
font-weight: bold;
color: #333333;
line-height: 40rpx;
}
}
.ticket-timer{
font-size: 28rpx;
color: #3688FF;
line-height: 40rpx;
}
}
.apply-user{
padding: 24rpx 24rpx 30rpx 24rpx;
.user-title{
display: flex;
margin-bottom: 30rpx;
.title-name{
font-size: 32rpx;
font-weight: bold;
color: #333333;
line-height: 40rpx;
margin-right: 24rpx;
}
}
/deep/ .u-checkbox__label{
width: 160rpx;
}
}
.apply-moneyBox{
padding: 0 24rpx 0 24rpx;
.moneyBox-list{
display: flex;
justify-content: space-between;
border-bottom: 2rpx solid #ECECEC;
}
.moneyBox-list:nth-last-child(1){
border-bottom: none;
}
.list-name,
.list-money{
font-size: 32rpx;
color: #191919;
line-height: 108rpx;
}
.list-clolrOrange{
color: #FC6703;
}
}
.apply-cause{
padding: 0;
.cause-title{
padding: 24rpx;
font-size: 32rpx;
font-weight: bold;
color: #191919;
line-height: 44rpx;
box-shadow: 0rpx 2rpx 0rpx 2rpx rgba(0,0,0,0.08);
}
.cause-list{
padding: 40rpx 24rpx 40rpx 24rpx;
.list-case{
display: flex;
justify-content: space-between;
margin-bottom: 40rpx;
.case-name{
font-size: 32rpx;
color: #191919;
line-height: 48rpx;
}
.case-click{
width: 48rpx;
height: 48rpx;
box-sizing: border-box;
border: 2rpx solid #3688FF;
border-radius: 50%;
}
.case-clickAct{
border: 12rpx solid #3688FF;
}
}
.list-case:nth-last-child(1){
margin-bottom: 0;
}
}
}
.apply-textarea{
padding: 24rpx;
/deep/ .u-border{
border: none;
}
/deep/ .u-input__textarea{
height: 248rpx !important;
background: #F6FAFF;
border-radius: 8rpx 8rpx 8rpx 8rpx;
padding: 24rpx !important;
}
}
.apply-toButton{
width: 750rpx;
height: 98rpx;
background: #3688FF;
box-shadow: 0rpx 4rpx 12rpx 2rpx rgba(0,0,0,0.16);
font-size: 28rpx;
font-weight: bold;
color: #FFFFFF;
line-height: 98rpx;
text-align: center;
position: fixed;
bottom: 0;
left: 0;
}
</style>
pages/my/order/electronicTicket/electronicTicket.vue
View file @ 53604d34
<template>
<view class="page-box">
<view class="order-titleTips" v-if="orderInfo.channelType==8">
温馨提示：如需退票，请向您购票的渠道咨询
</view>
<view class="order-titleTips" v-if="orderInfo.orderStatus==6">
温馨提示：系统将在3个工作日内核实情况，符合退改规则，退款 金额将在3个工作日内原路退还。
</view>
<view class="order-status">
<view class="status-box">
<template v-if="orderInfo.channelType==8">
......@@ -9,19 +15,7 @@
</template>
<template v-else>
<view class="status-type" v-if="orderInfo.orderStatus==2">
<!-- <template v-if="orderInfo.orderType==1">
出票成功
</template>
<template v-else-if="orderInfo.orderType==2">
预订成功
</template>
<template v-else-if="orderInfo.orderType==3">
预订成功
</template>
<template v-else-if="orderInfo.orderType==4">
购买成功
</template> -->
<view class="status-type">
{{orderInfo.orderStatus|orderStatus1}}
</view>
<!-- {{orderInfo.merchantName}}（{{orderInfo.productName}}） -->
......@@ -30,6 +24,35 @@
</view>
</view>
<view class="order-unsubscribe" v-if="orderInfo.orderStatus==3||orderInfo.orderStatus==6||orderInfo.orderStatus==7||orderInfo.orderStatus==8">
<view class="unsubscribe-title" :class="unsubscribeType==true?'unsubscribe-title2':''" @click="unsubscribeUpDownFun()">
<view class="title-name">退订详情</view>
<view class="title-right">
<view class="right-name">查看详情</view>
<u-icon name="arrow-down" color="#3688FF" size="24" v-if="unsubscribeType==false"></u-icon>
<u-icon name="arrow-up" color="#3688FF" size="24" v-else></u-icon>
</view>
</view>
<view class="unsubscribe-timeline" v-if="unsubscribeType">
<view class="timeline-list" v-for="(item,index) in timelineList" :key="index">
<view class="list-box">
<view class="list-line"></view>
<view class="list-line2"></view>
<view class="list-markers">
<u-icon name="checkbox-mark" color="#FFFFFF" size="16"></u-icon>
</view>
<view class="list-markersBig">
<view class="markersBig-In"></view>
</view>
</view>
<view class="list-case">
<view class="case-name">{{item.refundStatusName}}</view>
<view class="case-text">{{item.refundReason}}</view>
<view class="case-timer">{{item.refundDate}}</view>
</view>
</view>
</view>
</view>
<template v-if="orderInfo.orderType==1&&ticketCode!=null&&orderInfo.orderStatus==2||orderInfo.orderType==1&&ticketCode!=null&&orderInfo.orderStatus==4||orderInfo.orderType==3&&ticketCode!=null&&orderInfo.orderStatus==4||orderInfo.orderType==3&&ticketCode!=null&&orderInfo.orderStatus==2">
<view class="order-certificate order-allType order-positionTop" :class="orderInfo.orderStatus==6?'order-positionTopAct':''" >
<!-- <view class="alltype-title">
......@@ -555,6 +578,29 @@ export default {
imagePath:'',//图片接受地址
imgTypeShow:true,//是否展示图片
sortRefreshNew:null,//当前时间
unsubscribeType:false,//头部 退订详情 收起/展开
timelineList:[
// {
// name:'退订来源',
// message:'系统',
// timer:'2023/09/05 17:42:32',
// },
// {
// name:'退订原因',
// message:'购买门票次数超过今日上限（每日限购 2 次）',
// timer:'2023/09/05 17:42:32',
// },
// {
// name:'退订结果',
// message:'退订成功',
// timer:'2023/09/05 17:42:32',
// },
// {
// name:'退款进度',
// message:'￥60.00 已原路退回',
// timer:'2023/09/05 17:42:32',
// },
],//退单进程
}
},
onShow() {
......@@ -612,6 +658,13 @@ export default {
})
},
methods: {
unsubscribeUpDownFun(){//头部订单详情开关
if(this.unsubscribeType==false){
this.unsubscribeType=true
}else{
this.unsubscribeType=false
}
},
toMyCoupon(){//跳转我的优惠券
uni.navigateTo({
url:'/pages/my/couponCenter/myCouponList/myCouponList'
......@@ -742,6 +795,32 @@ export default {
// clearInterval(timer)
// })
}
if(this.orderInfo.orderRefundList!=undefined&&this.orderInfo.orderRefundList.length>0){
this.timelineList = this.orderInfo.orderRefundList
this.timelineList.forEach((item,index)=>{
if(item.refundStatus==0){
item['refundStatusName'] = '退款中'
}else if(item.refundStatus==1){
item['refundStatusName'] = '退款成功'
}else if(item.refundStatus==2){
item['refundStatusName'] = '退款失败'
}else if(item.refundStatus==3){
item['refundStatusName'] = '退票中'
}else if(item.refundStatus==4){
item['refundStatusName'] = '退票确认'
}else if(item.refundStatus==5){
item['refundStatusName'] = '退货完成'
}else if(item.refundStatus==6){
item['refundStatusName'] = '退票审核中'
}else if(item.refundStatus==7){
item['refundStatusName'] = '退票失败'
}
})
if(this.orderInfo.orderStatus==3||this.orderInfo.orderStatus==6||this.orderInfo.orderStatus==7||this.orderInfo.orderStatus==8){
this.unsubscribeType = true
}
}
this.findCouponListFun()
}else{
uni.showToast({
......@@ -822,7 +901,7 @@ export default {
}).catch((err)=>{
this.timer1=setTimeout(()=>{
this.getSortInfo()
},10000)
},1000)
// this.$once('hook:beforeDestroy',()=>{
// clearTimeout(timer)
// })
......@@ -1105,20 +1184,20 @@ export default {
}
.order-status {
width: 750rpx;
height: 464rpx;
max-height: 464rpx;
background: linear-gradient(180deg, #3688FF 0%, #3688FF 37%, #ECF3FE 100%);
padding: 48rpx 32rpx 32rpx 40rpx;
box-sizing: border-box;
position: relative;
}
.order-status .status-box {
display: flex;
flex-wrap: wrap;
color: #fff;
overflow: hidden;
}
.order-status .status-type {
width: 100%;
font-size: 48rpx;
......@@ -1127,7 +1206,7 @@ export default {
margin-bottom: 8rpx;
flex-shrink:0
}
.order-status .status-product,
.order-status .status-prompt {
font-size: 28rpx;
......@@ -1137,7 +1216,7 @@ export default {
text-overflow: ellipsis;
-o-text-overflow:ellipsis;
}
.order-status .status-icon {
width: 106rpx;
height: 104rpx;
......@@ -1208,12 +1287,12 @@ export default {
top: 24rpx !important;
}
.order-positionTop:nth-child(2){
margin-top: -322rpx;
margin-top: 0;//-322rpx;
position: relative;
z-index: 2;
}
.order-positionTopAct{
margin-top: -262rpx;
margin-top: 0;//-262rpx;
}
/*排队详情*/
.order-queueUp {
......@@ -1609,4 +1688,166 @@ export default {
height: 180px;
margin: 0 auto;
}
/*头部提示*/
.order-titleTips{
padding: 16rpx 32rpx 16rpx 32rpx;
color: #FC771D;
font-size: 24rpx;
line-height: 34rpx;
background: #FFF1E8;
}
/*退订详情*/
.order-unsubscribe{
width: 710rpx;
background-color: #fff;
box-shadow: 0rpx 0rpx 6rpx 0rpx rgba(0, 0, 0, 0.04);
border-radius: 16rpx 16rpx 16rpx 16rpx;
padding: 0 24rpx 0 24rpx;
margin: 0 auto 16rpx auto;
overflow: hidden;
.unsubscribe-title{
display: flex;
justify-content: space-between;
border-bottom: 2rpx solid #ECECEC;
.title-name{
font-size: 24rpx;
font-weight: bold;
color: #FC771D;
line-height: 82rpx;
}
.title-right{
display: flex;
font-size: 24rpx;
color: #3688FF;
line-height: 82rpx;
.right-name{
margin-right: 5rpx;
}
/deep/ .u-icon__icon{
top: 5rpx !important;
}
}
}
.unsubscribe-title2{
margin-bottom: 24rpx;
}
.unsubscribe-timeline{
.timeline-list{
position: relative;
padding-bottom: 40rpx;
padding-left: 48rpx;
.list-box{
width: 32rpx;
margin: auto;
position: absolute;
left: 0rpx;
top: 0;
bottom: 0;
}
.list-line{
width: 2rpx;
background-color: #ECECEC;
margin: auto;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 10;
}
.list-markers{
width: 16rpx;
height: 16rpx;
background-color: #999999;
border-radius: 25rpx;
margin: auto;
position: absolute;
left: 0;
right: 0;
top: 12rpx;
z-index: 11;
/deep/ u-icon{
position: absolute;
top: 0;
left: 0;
}
}
.list-case{
.case-name{
font-size: 28rpx;
color: #333333;
line-height: 40rpx;
margin-bottom: 16rpx;
}
.case-text{
font-size: 24rpx;
font-weight: bold;
color: #333333;
line-height: 34rpx;
margin-bottom: 8rpx;
}
.case-timer{
font-size: 20rpx;
color: #999999;
line-height: 28rpx;
}
}
}
.timeline-list:nth-child(1){
.list-line{
top: 14rpx
}
}
.timeline-list:nth-last-child(1){
padding-bottom: 24rpx;
.list-line{
display: none;
}
.list-line2{
width: 2rpx;
height: 14rpx;
background-color: #ECECEC;
margin: auto;
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 10;
}
.list-markers{
display: none;
}
.list-markersBig{
width: 32rpx;
height: 32rpx;
background-color: #ADCDFC;
border-radius: 25rpx;
margin: auto;
position: absolute;
left: 0;
right: 0;
top: 6rpx;
z-index: 11;
.markersBig-In{
width: 16rpx;
height: 16rpx;
background-color: #3688FF;
border-radius: 25rpx;
margin: auto;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 12;
}
}
.list-case{
.case-text{
color: #3688FF;
}
}
}
}
}
</style>
pages/my/order/orderList/orderList.vue
View file @ 53604d34
......@@ -606,6 +606,12 @@ export default {
})
}
})
.catch((err)=>{
setTimeout(()=>{
this.getData(2)
},1000)
})
}
},
operation(item,index){//操作 删除和取消订单
......
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