chenkainan
4 months ago
7 changed files with 1053 additions and 682 deletions
@ -0,0 +1,272 @@ |
|||
<template> |
|||
<view class="bg"> |
|||
<view class="title-box"> |
|||
<uni-icons type="left" size="30" @click="goBack"></uni-icons> |
|||
<view>订单状态</view> |
|||
</view> |
|||
|
|||
<view class="state-box"> |
|||
<view>{{info.state_text}}</view> |
|||
|
|||
<!-- 待支付时会显示自动取消时间 --> |
|||
<view v-if="info.state=='WAIT_PAYMENT'" class="close-time">订单将在<span>{{info.close_time.slice(-8)}}</span>自动取消</view> |
|||
|
|||
<!-- 待退款 --> |
|||
<view v-if="info.state=='REFUNDING'" class="close-time">系统将在1-7个工作日内原路退回您的原支付账户</view> |
|||
|
|||
<!-- 退款完成 --> |
|||
<view v-if="info.state=='REFUND'" class="close-time">您的退款金额已退还到您的原支付账户</view> |
|||
</view> |
|||
|
|||
<view class="box"> |
|||
<!-- 循环子订单 --> |
|||
<view v-for="(item,index) in orderChildList" :key="index"> |
|||
<view class="product-box"> |
|||
<view class="title" @click="item.type=item.product_model;gotoDetailByType(item)"> |
|||
{{item.product_title}} |
|||
<image src="https://static.ticket.sz-trip.com/shiweisuzhou/images/order/rightIcon.png" class="rightIcon"></image> |
|||
</view> |
|||
<view class="subtitle" v-if="item.use_date"><span>出行时间：</span>{{item.use_date}}</view> |
|||
<view class="subtitle" v-if="item.use_date"><span>开放时间：</span>{{item.use_date}}</view> |
|||
<view class="line"></view> |
|||
<view class="skutitle flex-between"> |
|||
<view>{{item.sku_name}}</view> |
|||
<view> |
|||
<span>￥{{item.product_price / 100}}</span> |
|||
x{{item.product_num}} |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="product-box"> |
|||
<view class="title">出行人</view> |
|||
<view class="subtitle flex-between"> |
|||
<span>手机号：</span>{{item.phone}} |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="product-box"> |
|||
<view class="subtitle flex-between"> |
|||
<span>商品总额：</span>￥{{info.total_money / 100}} |
|||
</view> |
|||
<view class="subtitle flex-between"> |
|||
<span>优惠券：</span>-￥{{info.preference_money / 100}} |
|||
</view> |
|||
<view class="subtitle flex-between"> |
|||
<span>实付金额：</span><view class="price">{{info.paid_money / 100}}</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="product-box"> |
|||
<view class="title">订单信息</view> |
|||
<view class="subtitle" style="display: flex;"> |
|||
<span>订单账号：</span>{{info.order_id}} |
|||
<view class="copy flex-around" @click="clickCopy"> |
|||
<image src="https://static.ticket.sz-trip.com/shiweisuzhou/images/order/copy.png"></image> |
|||
复制 |
|||
</view> |
|||
</view> |
|||
<view class="subtitle"> |
|||
<span>下单时间：</span>{{info.close_time}} |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="kefu-box"> |
|||
<image src="https://static.ticket.sz-trip.com/shiweisuzhou/images/order/kefu.png"></image> |
|||
联系客服 |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
orderId: '', |
|||
info: {}, |
|||
orderChildList: [] |
|||
} |
|||
}, |
|||
onLoad(option) { |
|||
this.orderId = option.id |
|||
this.getDetail() |
|||
}, |
|||
methods: { |
|||
getDetail() { |
|||
this.Post({ |
|||
order_id: this.orderId |
|||
},'/api/order/query').then(res => { |
|||
console.log(res.data) |
|||
this.info = res.data |
|||
this.orderChildList = res.data.order_product_list |
|||
// 景点、线路、自提需展示二维码 |
|||
// this.info.order_product_list.forEach(item => {}) |
|||
}) |
|||
}, |
|||
// 复制订单号 |
|||
clickCopy() { |
|||
uni.setClipboardData({ |
|||
data: this.info.order_id, //要被复制的内容 |
|||
success: () => { |
|||
//复制成功的回调函数 |
|||
uni.showToast({ |
|||
title: '复制成功', |
|||
icon: 'none' |
|||
}); |
|||
} |
|||
}); |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.bg { |
|||
width: 750rpx; |
|||
overflow-x: hidden; |
|||
min-height: 100vh; |
|||
background-color: #F7F7F7; |
|||
padding-bottom: 200rpx; |
|||
} |
|||
|
|||
.title-box { |
|||
font-size: 40rpx; |
|||
padding: 0 26.67rpx; |
|||
z-index: 2; |
|||
display: flex; |
|||
align-items: center; |
|||
width: 100%; |
|||
background: #D3E8A7; |
|||
height: 176rpx; |
|||
padding: 90rpx 26rpx 0 ; |
|||
|
|||
view { |
|||
font-weight: 400; |
|||
font-size: 36rpx; |
|||
color: #000000; |
|||
margin-left: 230rpx; |
|||
} |
|||
} |
|||
|
|||
.state-box { |
|||
width: 750rpx; |
|||
height: 240rpx; |
|||
background: linear-gradient(180deg, #D3E8A7, #D3E8A7, #D3E8A7, #F7F7F7); |
|||
padding: 42rpx 0 0 53rpx; |
|||
font-weight: bold; |
|||
font-size: 43rpx; |
|||
color: #000000; |
|||
|
|||
.close-time { |
|||
font-weight: 500; |
|||
font-size: 27rpx; |
|||
color: #000000; |
|||
|
|||
span { |
|||
color: #C3282E; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.box { |
|||
position: relative; |
|||
padding: 0 26rpx; |
|||
margin-top: -66rpx; |
|||
|
|||
.product-box { |
|||
padding: 28rpx 28rpx 46rpx; |
|||
margin-bottom: 22rpx; |
|||
background: #FFFFFF; |
|||
border-radius: 20rpx; |
|||
|
|||
.title { |
|||
font-weight: bold; |
|||
font-size: 36rpx; |
|||
color: #000000; |
|||
display: flex; |
|||
align-items: center; |
|||
|
|||
.rightIcon { |
|||
width: 17.33rpx; |
|||
height: 29.33rpx; |
|||
margin-left: 25rpx; |
|||
} |
|||
} |
|||
|
|||
.subtitle { |
|||
font-weight: 500; |
|||
font-size: 27rpx; |
|||
color: #000000; |
|||
margin-top: 18rpx; |
|||
|
|||
span { |
|||
color: #666666; |
|||
min-width: 125rpx; |
|||
} |
|||
} |
|||
|
|||
.line { |
|||
width: 643rpx; |
|||
height: 1rpx; |
|||
background: #D8D8D8; |
|||
margin: 33rpx 0; |
|||
} |
|||
|
|||
.skutitle { |
|||
font-weight: 500; |
|||
font-size: 27rpx; |
|||
color: #000000; |
|||
|
|||
span { |
|||
margin-right: 60rpx; |
|||
} |
|||
} |
|||
|
|||
.price { |
|||
font-weight: bold; |
|||
font-size: 34rpx; |
|||
color: #C3282E; |
|||
} |
|||
.price::before { |
|||
font-size: 24rpx; |
|||
content: '￥'; |
|||
} |
|||
|
|||
.copy { |
|||
width: 93rpx; |
|||
height: 37rpx; |
|||
border-radius: 11rpx; |
|||
border: 1rpx solid #515150; |
|||
font-weight: 500; |
|||
font-size: 22rpx; |
|||
color: #515150; |
|||
margin-left: 30rpx; |
|||
|
|||
image { |
|||
width: 22rpx; |
|||
height: 23.33rpx; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.kefu-box { |
|||
height: 96rpx; |
|||
background: #FFFFFF; |
|||
border-radius: 20rpx; |
|||
padding-left: 27rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
font-weight: 500; |
|||
font-size: 31rpx; |
|||
color: #000000; |
|||
|
|||
image { |
|||
width: 44rpx; |
|||
height: 44rpx; |
|||
margin-right: 14rpx; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue