307 lines
7.9 KiB
Vue
307 lines
7.9 KiB
Vue
<template>
|
|
<view class="order-data">
|
|
<u-navbar title="" safeAreaInsetTop placeholder>
|
|
<view class="u-nav-slot f-a-i" slot="left" @click="navBackFn">
|
|
<u-icon name="arrow-left" size="19"></u-icon>
|
|
<view class="state">
|
|
<text v-if="orderData.status==0">待支付</text>
|
|
<text v-if="orderData.status==1">未提车</text>
|
|
<text v-if="orderData.status==2">租赁期</text>
|
|
<text v-if="orderData.status==3">已还车</text>
|
|
<text v-if="orderData.status==4">已取消</text>
|
|
</view>
|
|
</view>
|
|
</u-navbar>
|
|
<view class="cont car-info flex">
|
|
<view class="car-info-cont">
|
|
<view class="car-info-cont-name">
|
|
{{orderData.title}}
|
|
</view>
|
|
<view class="car-info-cont-label">
|
|
<view class="f-a-i" v-for="(item,index) in orderData.tags" :key="index">
|
|
<text>{{item.name}}</text>
|
|
<u-line v-if="index!=orderData.tags-1" direction="col" length="10" margin="0 12rpx"></u-line>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="">
|
|
<image :src="orderData.image" mode=""></image>
|
|
</view>
|
|
</view>
|
|
<view class="title">租赁信息</view>
|
|
<view class="buy-info">
|
|
<view class="f-jcsb cont-list">
|
|
<view>车主姓名</view>
|
|
<view>{{orderData.realName}}</view>
|
|
</view>
|
|
<view class="f-jcsb cont-list cont-ma48">
|
|
<view>身份证</view>
|
|
<view>{{orderData.idCard}}</view>
|
|
</view>
|
|
<view class="f-jcsb cont-list cont-ma48">
|
|
<view>手机号码</view>
|
|
<view>{{orderData.phone}}</view>
|
|
</view>
|
|
</view>
|
|
<view class="title">费用及时间</view>
|
|
<view class="buy-info">
|
|
<view class="f-jcsb cont-list">
|
|
<view>车牌号</view>
|
|
<view>{{orderData.carNo?orderData.carNo:'--'}}</view>
|
|
</view>
|
|
<view class="f-jcsb cont-list cont-ma48">
|
|
<view>租赁费用</view>
|
|
<view>¥{{orderData.price}}</view>
|
|
</view>
|
|
<view class="f-jcsb cont-list cont-ma48">
|
|
<view>租赁期限</view>
|
|
<view>{{orderData.monthRent}}个月</view>
|
|
</view>
|
|
<view class="f-jcsb cont-list cont-ma48">
|
|
<view>优惠抵扣</view>
|
|
<view>-￥{{orderData.couponPrice?orderData.couponPrice:0}}</view>
|
|
</view>
|
|
<view class="f-jcsb cont-list cont-ma48">
|
|
<view>实付押金</view>
|
|
<view>¥{{orderData.payPrice}}</view>
|
|
</view>
|
|
<view class="f-jcsb cont-list cont-ma48">
|
|
<view>租赁期限</view>
|
|
<view>{{orderData.takeTime}}~{{orderData.giveTime}}</view>
|
|
</view>
|
|
<view class="f-jcsb cont-list cont-ma48">
|
|
<view>下单时间</view>
|
|
<view>{{orderData.takeTime}}</view>
|
|
</view>
|
|
<view class="f-jcsb cont-list cont-ma48">
|
|
<view>提车时间</view>
|
|
<view>{{orderData.takeTime}}</view>
|
|
</view>
|
|
</view>
|
|
<view class="bottom-butt-caozuo f-jce">
|
|
<view class="flex">
|
|
<u-button type="primary" text="联系客服" plain color="#333333" shape="circle" @click=""
|
|
:customStyle="{width:'192rpx',height:'80rpx',marginLeft: '24rpx',}"></u-button>
|
|
<u-button v-if="orderData.status==0" type="primary" text="取消订单" plain color="#333333" shape="circle"
|
|
@click="getInformationCancelFn"
|
|
:customStyle="{width:'192rpx',height:'80rpx',marginLeft: '24rpx'}"></u-button>
|
|
<u-button v-if="orderData.status==3" type="primary" text="查看合同" plain color="#333333" shape="circle"
|
|
@click="examineContractFn"
|
|
:customStyle="{width:'192rpx',height:'80rpx',marginLeft: '24rpx'}"></u-button>
|
|
<u-button v-if="orderData.status==2&&orderData.giveStatus==0" type="primary" text="提前还车" color="#13AFA8"
|
|
shape="circle" @click="navInAdvanceFn"
|
|
:customStyle="{width:'192rpx',height:'80rpx',marginLeft: '24rpx'}"></u-button>
|
|
<u-button v-if="orderData.status==0" type="primary" text="付款" plain color="#333333" shape="circle"
|
|
@click="orderPaymentFn(orderData)"
|
|
:customStyle="{width:'192rpx',height:'80rpx',marginLeft: '24rpx'}"></u-button>
|
|
</view>
|
|
</view>
|
|
<!-- 付款弹出层 金额:payPrice show:topUpTypeShow 立即支付:payPopupBtn -->
|
|
<Payment ref="payment" :payPrice="payPrice" :topUpTypeShow="topUpTypeShow" :payPopupBtn="payPopupBtn"></Payment>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
paymentFn
|
|
} from "@/utils/index.js"
|
|
import Payment from "@/components/payment.vue"
|
|
import {
|
|
getInformationOrderDealer,
|
|
getInformationCancel
|
|
} from "@/api/myOrder/index.js"
|
|
import {
|
|
frontPayPayrental,
|
|
} from "@/api/showroom/showroom.js"
|
|
export default {
|
|
components: {
|
|
Payment
|
|
},
|
|
data() {
|
|
return {
|
|
orderData: {},
|
|
orderId: '',
|
|
topUpTypeShow: false,
|
|
payPrice: 0,
|
|
payData: {}
|
|
}
|
|
},
|
|
methods: {
|
|
//付款
|
|
orderPaymentFn(item) {
|
|
this.topUpTypeShow = true
|
|
this.payPrice = item.payPrice
|
|
this.payData.orderNo = item.orderNo
|
|
},
|
|
//去支付
|
|
payPopupBtn() {
|
|
let topUpType = this.$refs.payment.topUpType
|
|
let payData = {
|
|
...this.$refs.payment.payData,
|
|
...this.payData
|
|
}
|
|
if (topUpType == 'ye') {
|
|
//买车
|
|
frontPayPayrental(payData).then(res => {
|
|
this.topUpTypeShow = false
|
|
uni.navigateTo({
|
|
url: `/pages/driver/serve/coupons/payresult?resultType=res`
|
|
})
|
|
}).catch(err => {
|
|
uni.navigateTo({
|
|
url: `/pages/driver/serve/coupons/payresult?resultType=err`
|
|
})
|
|
})
|
|
|
|
} else if (topUpType == 'zfb') {
|
|
//买车
|
|
frontPayPayrental(payData).then(res => {
|
|
this.topUpTypeShow = false
|
|
paymentFn(payData.payType, res.data.alipayRequest).then(res => {
|
|
if (res.channel.serviceReady) {
|
|
uni.navigateTo({
|
|
url: `/pages/driver/serve/coupons/payresult?resultType=res`
|
|
})
|
|
}
|
|
}).catch(err => {
|
|
uni.navigateTo({
|
|
url: `/pages/driver/serve/coupons/payresult?resultType=err`
|
|
})
|
|
})
|
|
})
|
|
|
|
} else {
|
|
uni.showToast({
|
|
title: '目前不支持微信支付',
|
|
duration: 2000,
|
|
icon: 'none'
|
|
});
|
|
}
|
|
},
|
|
//返回
|
|
navBackFn() {
|
|
uni.navigateBack()
|
|
},
|
|
examineContractFn(item) {
|
|
uni.navigateTo({
|
|
url: `/pages/carShop/order/examine_contract/examine_contract?id=${this.orderId}&type=1`
|
|
})
|
|
},
|
|
//取消订单
|
|
getInformationCancelFn() {
|
|
getInformationCancel(this.orderId).then(res => {
|
|
// this.orderData = res.data
|
|
this.getInformationOrderDealerFn()
|
|
})
|
|
},
|
|
//提前还车
|
|
navInAdvanceFn() {
|
|
uni.navigateTo({
|
|
url: `/pages/driver/mine/my_order/rentCars/in_advance?id=${this.orderId}&type==1`
|
|
})
|
|
},
|
|
getInformationOrderDealerFn() {
|
|
getInformationOrderDealer(this.orderId).then(res => {
|
|
console.log( '详情',res.data);
|
|
this.orderData = res.data
|
|
})
|
|
}
|
|
},
|
|
onShow() {
|
|
this.getInformationOrderDealerFn()
|
|
},
|
|
onLoad(options) {
|
|
console.log(options, '11111');
|
|
this.orderId = options.id
|
|
this.getInformationOrderDealerFn()
|
|
// getInformationOrderDealer(options.id).then(res => {
|
|
// this.orderData = res.data
|
|
// })
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
page {
|
|
background: #f5f5f5;
|
|
}
|
|
|
|
.order-data {
|
|
padding-bottom: 160rpx;
|
|
}
|
|
|
|
.bottom-butt-caozuo {
|
|
width: 100%;
|
|
padding: 18rpx 24rpx 40rpx 24rpx;
|
|
position: fixed;
|
|
left: 0;
|
|
bottom: 0;
|
|
background: #fff;
|
|
}
|
|
|
|
.u-nav-slot {
|
|
.state {
|
|
font-size: 36rpx;
|
|
font-weight: 500;
|
|
color: #000000;
|
|
}
|
|
}
|
|
|
|
.buy-info {
|
|
background: #fff;
|
|
width: calc(100% - 48rpx);
|
|
margin-top: 16rpx;
|
|
margin-left: 24rpx;
|
|
padding: 40rpx 32rpx;
|
|
border-radius: 8rpx;
|
|
|
|
.cont-list {
|
|
padding-bottom: 16rpx;
|
|
border-bottom: 1rpx solid #eee;
|
|
}
|
|
|
|
.cont-ma48 {
|
|
margin-top: 48rpx;
|
|
}
|
|
}
|
|
|
|
.car-info {
|
|
.car-info-cont {
|
|
width: calc(100% - 218rpx);
|
|
margin-right: 16rpx;
|
|
font-size: 26rpx;
|
|
font-weight: 400;
|
|
color: #666666;
|
|
|
|
.car-info-cont-name {
|
|
font-size: 32rpx;
|
|
font-weight: 400;
|
|
color: #111111;
|
|
}
|
|
|
|
.car-info-cont-label {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
margin-top: 8rpx;
|
|
}
|
|
}
|
|
|
|
image {
|
|
width: 202rpx;
|
|
height: 150rpx;
|
|
}
|
|
}
|
|
|
|
.cont {
|
|
padding: 32rpx 24rpx;
|
|
background: #fff;
|
|
width: calc(100% - 48rpx);
|
|
margin-top: 16rpx;
|
|
margin-left: 24rpx;
|
|
border-radius: 8rpx;
|
|
}
|
|
|
|
.title {
|
|
margin: 24rpx 0 16rpx 24rpx;
|
|
}
|
|
</style> |