Compare commits
merge into: APP:master
APP:account
APP:course
APP:dev
APP:feat-230721
APP:gongyingshang
APP:master
APP:md0726
APP:organize
APP:privacy
APP:tid1509
APP:tid1731
APP:tid1867
APP:tid1878
APP:voice
APP:voice08
pull from: APP:organize
APP:account
APP:course
APP:dev
APP:feat-230721
APP:gongyingshang
APP:master
APP:md0726
APP:organize
APP:privacy
APP:tid1509
APP:tid1731
APP:tid1867
APP:tid1878
APP:voice
APP:voice08
2 Commits
| Author | SHA1 | Message | Date |
|---|---|---|---|
 刘嘉炜
|
b19132c30a |
add organize detail api
|
3 years ago |
|
刘嘉炜
|
a69f892469 |
add organize detail
|
3 years ago |
6 changed files with 583 additions and 16 deletions
-
41src/components/organize_order/organize_order.vue
-
6src/pages.json
-
6src/pages/order_list/order_list.vue
-
12src/subpackage/device/pages/order_details/order_details.vue
-
3src/subpackage/order/js/api.js
-
531src/subpackage/order/pages/organize/detail/detail.vue
@ -0,0 +1,531 @@ |
|||
<template> |
|||
<view class="organize-detail"> |
|||
<!-- 地址&订单信息 --> |
|||
<view class="od-box od-order"> |
|||
<view class="oo-stadium"> |
|||
<image mode="aspectFit" :src="orderLabel.BrandAndStadiumLogo || ''"></image> |
|||
<view>{{ orderLabel.BrandAndStadiumName || '-' }}</view> |
|||
</view> |
|||
<view class="ob-line"> |
|||
<view class="ol-left"> |
|||
<view class="ol-name">订单编号：</view> |
|||
<view class="ol-txt"> |
|||
<view class="ot-txt">{{ orderInfo.order_no || '-' }}</view> |
|||
</view> |
|||
</view> |
|||
<view class="ol-status" :class="[originalOrder.pay_status == 0 ?'ol-active':'']">{{ orderStatus(originalOrder.pay_status) }}</view> |
|||
</view> |
|||
<view class="ob-line"> |
|||
<view class="ol-left"> |
|||
<view class="ol-name">创建时间：</view> |
|||
<view class="ol-txt"> |
|||
<view class="ot-txt">{{ orderInfo.created_at || '-' }}</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="ob-line"> |
|||
<view class="ol-left"> |
|||
<view class="ol-name">用户昵称：</view> |
|||
<view class="ol-txt"> |
|||
<view class="ot-txt">{{ orderInfo.user_nickname|| '-' }}</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="ob-line"> |
|||
<view class="ol-left"> |
|||
<view class="ol-name">约玩类型：</view> |
|||
<view class="ol-txt"> |
|||
<view class="ot-txt ot-green">{{ organizeType(orderInfo.type || '') }}</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 用户信息 --> |
|||
<view class="od-box"> |
|||
<view class="ob-tit">用户信息</view> |
|||
<view class="ob-line"> |
|||
<view class="ol-left"> |
|||
<view class="ol-name">姓名：</view> |
|||
<view class="ol-txt"> |
|||
<view class="ot-txt">{{ orderInfo.actual_name || '-' }}</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="ob-line"> |
|||
<view class="ol-left"> |
|||
<view class="ol-name">身份证号码：</view> |
|||
<view class="ol-txt"> |
|||
<view class="ot-txt">{{ orderInfo.id_card || '-' }}</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
|
|||
|
|||
<!-- 约玩信息 --> |
|||
<view class="od-box od-mes"> |
|||
<view class="ob-tit">约玩信息</view> |
|||
<view class="om-theme"> |
|||
<view>个人</view> |
|||
<text>{{ orderInfo.theme || '-' }}</text> |
|||
</view> |
|||
<view class="ob-line"> |
|||
<view class="ol-left"> |
|||
<view class="ol-name">约玩项目：</view> |
|||
<view class="ol-txt"> |
|||
<view class="ot-txt">{{ originalOrder.venue_type_name || '-' }}</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="ob-line"> |
|||
<view class="ol-left"> |
|||
<view class="ol-name">报名费用：</view> |
|||
<view class="ol-txt"> |
|||
<view class="ot-txt">¥{{orderInfo.price_per_person || 0}}</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="ob-line"> |
|||
<view class="ol-left"> |
|||
<view class="ol-name">约玩时间：</view> |
|||
<view class="ol-txt"> |
|||
<view class="ot-txt">{{ originalOrder.date || '-' }} {{ originalOrder.duration || '-' }}</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="ob-line"> |
|||
<view class="ol-left"> |
|||
<view class="ol-name">预定场次：</view> |
|||
<view class="ol-txt"> |
|||
<view class="ot-list"> |
|||
<view class="ol-item" v-for="(e, i) in originalOrder.sessions" :key="i"> |
|||
{{ e.venue_name || '-' }} {{ e.duration || '-' }} |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 约玩报名信息 --> |
|||
<view class="od-box od-sign-info" v-if="originalOrder.pay_status==2&&orderInfo.type=='Main'"> |
|||
<view class="ob-tit">约玩报名信息</view> |
|||
<view class="ob-list"> |
|||
<block v-for="(e, i) in orderInfo.sub_order_data" :key="i"> |
|||
<view class="ob-item" v-if="isExpand || i < 10"> |
|||
<image mode="aspectFit" :src="e.user_avatar_url || ''"></image> |
|||
<view>{{ e.user_nickname || '-' }}</view> |
|||
</view> |
|||
</block> |
|||
|
|||
</view> |
|||
<view class="osi-expand" @click="isExpand = !isExpand" v-if="orderInfo.sub_order_data>=10"> |
|||
<image :class="[isExpand?'active':'']" mode="aspectFit" src="/subpackage/order/static/images/down_arrow.png"></image> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 差价 --> |
|||
<view class="od-box od-spread"> |
|||
<view class="os-line"> |
|||
<view class="ol-txt">场地费：50元</view> |
|||
</view> |
|||
<view class="os-line"> |
|||
<view class="ol-txt">报名人数：4人</view> |
|||
</view> |
|||
<view class="os-line"> |
|||
<view class="ol-txt">每人AA费用：12.5元</view> |
|||
<view class="ol-tip">* 每人AA费用=场地费/报名人数</view> |
|||
</view> |
|||
<view class="os-line"> |
|||
<view class="ol-txt"> |
|||
差价退费：12.5元 <text>自动退费失败，请手动差价退费</text> |
|||
</view> |
|||
<view class="ol-tip">* 差价退费=每人支付的费用-每人的aa费用</view> |
|||
</view> |
|||
<view class="os-btn">差价退费</view> |
|||
</view> |
|||
|
|||
<!-- 折扣信息 --> |
|||
<view class="od-box od-pay-info" v-if="originalOrder.pay_status != 0"> |
|||
<view class="opi-line"> |
|||
<view>金额小计</view> |
|||
<view>¥{{ originalOrder.amount || 0 }}</view> |
|||
</view> |
|||
<view class="opi-line"> |
|||
<view>积分抵扣</view> |
|||
<view>¥{{ originalOrder.deduction_amount || 0 }}</view> |
|||
</view> |
|||
<view class="opi-line"> |
|||
<view>折扣金额</view> |
|||
<view>¥{{ originalOrder.discount_amount || 0 }}</view> |
|||
</view> |
|||
<view class="opi-line"> |
|||
<view>优惠券优惠</view> |
|||
<view>¥{{ originalOrder.coupons_amount || 0 }}</view> |
|||
</view> |
|||
<view class="opi-total">合计支付：<text>￥{{ originalOrder.pay_amount || 0 }}</text></view> |
|||
</view> |
|||
<!-- 支付信息 --> |
|||
<view class="od-box" v-if="originalOrder.pay_status == 1 || originalOrder.pay_status == 2"> |
|||
<view class="ob-tit">支付信息</view> |
|||
<view class="ob-line"> |
|||
<view class="ol-left"> |
|||
<view class="ol-name">支付方式：</view> |
|||
<view class="ol-txt"> |
|||
<view class="ot-txt">{{ zh_pay_type(originalOrder.pay_type) || '-' }}</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="ob-line"> |
|||
<view class="ol-left"> |
|||
<view class="ol-name">支付时间：</view> |
|||
<view class="ol-txt"> |
|||
<view class="ot-txt">{{ originalOrder.pay_time || '-' }}</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="ob-line"> |
|||
<view class="ol-left"> |
|||
<view class="ol-name">微信交易号：</view> |
|||
<view class="ol-txt"> |
|||
<view class="ot-txt">{{ originalOrder.trade_no || '-' }}</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 退款信息 --> |
|||
<view class="od-box" v-if="originalOrder.pay_status == 4"> |
|||
<view class="ob-tit">退款信息</view> |
|||
<view class="ob-line"> |
|||
<view class="ol-left"> |
|||
<view class="ol-name">退款时间：</view> |
|||
<view class="ol-txt"> |
|||
<view class="ot-txt">{{ originalOrder.refund_time || '-' }}</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="ob-line"> |
|||
<view class="ol-left"> |
|||
<view class="ol-name">退款编号：</view> |
|||
<view class="ol-txt"> |
|||
<view class="ot-txt">{{ originalOrder.refund_no || '-' }}</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="ob-line"> |
|||
<view class="ol-left"> |
|||
<view class="ol-name">退款金额：</view> |
|||
<view class="ol-txt"> |
|||
<view class="ot-txt">{{ originalOrder.refund_amount || '-' }}</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="ob-line"> |
|||
<view class="ol-left"> |
|||
<view class="ol-name">退款说明：</view> |
|||
<view class="ol-txt"> |
|||
<view class="ot-txt">{{ originalOrder.refund_reason || '-' }}</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import { ORDER_API } from '../../../js/api'; |
|||
import server from '../../../js/server'; |
|||
import util from '../../../../../utils/util'; |
|||
export default { |
|||
computed: { |
|||
orderLabel(){ |
|||
let { orderInfo } = this; |
|||
if(orderInfo&&orderInfo.label)return orderInfo.label || {}; |
|||
return {} |
|||
}, |
|||
originalOrder(){ |
|||
let { orderInfo } = this; |
|||
if(orderInfo&&orderInfo.original_order)return orderInfo.original_order || {}; |
|||
return {} |
|||
} |
|||
}, |
|||
data(){ |
|||
return { |
|||
isExpand: false, |
|||
orderInfo: {} |
|||
} |
|||
}, |
|||
onLoad(options){ |
|||
this.getOrderInfo({ |
|||
order_no: options.order_no, |
|||
stadium_id: options.stadium_id, |
|||
}) |
|||
}, |
|||
methods: { |
|||
// 支付类型 |
|||
zh_pay_type: util.order_pay_type_txt, |
|||
organizeType(type = ''){ |
|||
// 约玩类型 type Main/Sub 发起、参与 |
|||
const _obj = { |
|||
'Main': '发起的约玩', |
|||
'Sub': '参与的约玩', |
|||
} |
|||
return _obj[`${type}`] || '-' |
|||
}, |
|||
orderStatus(status = ''){ |
|||
const _obj = {/* */ |
|||
'1': '已付款', |
|||
'2': '已完成', |
|||
'4': '已退款', |
|||
} |
|||
return _obj[`${status}`] || '-'; |
|||
}, |
|||
getOrderInfo({ |
|||
order_no = '', |
|||
stadium_id = '', |
|||
}){ |
|||
util.showLoad(); |
|||
server.get({ |
|||
url: ORDER_API.organizeOrderDetail, |
|||
data: { |
|||
order_no, |
|||
stadium_id, |
|||
}, |
|||
failMsg: '加载订单失败！' |
|||
}) |
|||
.then(res=>{ |
|||
util.hideLoad(); |
|||
this.orderInfo = res || {}; |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
@import '~style/public.scss'; |
|||
.organize-detail{ |
|||
padding: 24upx; |
|||
padding-bottom: calc( 24upx + constant(safe-area-inset-bottom)); /* 兼容 iOS < 11.2 */ |
|||
padding-bottom: calc( 24upx + env(safe-area-inset-bottom)); /* 兼容 iOS >= 11.2 */ |
|||
} |
|||
.od-box{ |
|||
margin-bottom: 24upx; |
|||
padding: 30upx; |
|||
background-color: #fff; |
|||
border-radius: 10upx; |
|||
.ob-tit{ |
|||
margin-bottom: 20upx; |
|||
line-height: 44upx; |
|||
font-weight: 500; |
|||
font-size: 32upx; |
|||
color: #333; |
|||
} |
|||
.ob-line{ |
|||
@include centerFlex(space-between); |
|||
.ol-left{ |
|||
flex-grow: 1; |
|||
display: flex; |
|||
.ol-name{ |
|||
flex-shrink: 0; |
|||
flex-grow: 0; |
|||
font-size: 28upx; |
|||
line-height: 52upx; |
|||
color: #9a9a9d; |
|||
} |
|||
.ol-txt{ |
|||
.ot-txt{ |
|||
font-size: 28upx; |
|||
line-height: 52upx; |
|||
color: #333333; |
|||
@include textHide(1); |
|||
&.ot-green{ |
|||
color: $themeColor; |
|||
} |
|||
} |
|||
.ot-list{ |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
.ol-item{ |
|||
min-width: 200upx; |
|||
margin-right: 10upx; |
|||
line-height: 52upx; |
|||
font-size: 28upx; |
|||
color: #333; |
|||
@include textHide(1); |
|||
} |
|||
} |
|||
} |
|||
|
|||
|
|||
} |
|||
.ol-status{ |
|||
flex-shrink: 0; |
|||
flex-grow: 0; |
|||
margin-left: 12upx; |
|||
font-size: 28upx; |
|||
color: #9A9A9D; |
|||
&.ol-active{ |
|||
color: $themeColor; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.od-order{ |
|||
.oo-stadium{ |
|||
margin-bottom: 26upx; |
|||
padding-bottom: 24upx; |
|||
border-bottom: 2upx solid #D8D8D8; |
|||
@include centerFlex(flex-start); |
|||
>image{ |
|||
flex-shrink: 0; |
|||
flex-grow: 0; |
|||
margin-right: 14upx; |
|||
width: 40upx; |
|||
height: 40upx; |
|||
} |
|||
>view{ |
|||
line-height: 40upx; |
|||
font-weight: 500; |
|||
font-weight: 28upx; |
|||
color: #1a1a1a; |
|||
@include textHide(1); |
|||
} |
|||
} |
|||
} |
|||
.od-mes{ |
|||
.om-theme{ |
|||
margin-bottom: 26upx; |
|||
line-height: 44upx; |
|||
font-size: 32upx; |
|||
font-weight: 500; |
|||
color: #333; |
|||
>view{ |
|||
display: inline-block; |
|||
margin-right: 12upx; |
|||
width: 64upx; |
|||
height: 40upx; |
|||
line-height: 40upx; |
|||
text-align: center; |
|||
border-radius: 6upx; |
|||
font-size: 20upx; |
|||
color: #68E339; |
|||
background-color: rgba($color: #68E339, $alpha: .15); |
|||
} |
|||
} |
|||
} |
|||
.od-pay-info{ |
|||
.opi-line{ |
|||
@include centerFlex(space-between); |
|||
margin-bottom: 20upx; |
|||
>view{ |
|||
flex-shrink: 0; |
|||
flex-grow: 0; |
|||
font-size: 28upx; |
|||
line-height: 40upx; |
|||
color: #333; |
|||
&+view{ |
|||
font-size: 24upx; |
|||
@include textHide(1); |
|||
} |
|||
} |
|||
} |
|||
.opi-total{ |
|||
text-align: right; |
|||
font-size: 28upx; |
|||
color: #333; |
|||
>text{ |
|||
font-weight: 500; |
|||
color: #FF873D; |
|||
} |
|||
} |
|||
} |
|||
.od-spread{ |
|||
.os-line{ |
|||
margin-bottom: 20upx; |
|||
.ol-txt{ |
|||
margin-bottom: 6upx; |
|||
font-size: 32upx; |
|||
line-height: 44upx; |
|||
color: #333; |
|||
>text{ |
|||
margin-left: 20upx; |
|||
font-size: 24upx; |
|||
color: #EA5061; |
|||
} |
|||
} |
|||
.ol-tip{ |
|||
font-size: 28upx; |
|||
line-height: 40upx; |
|||
color: #9A9A9D; |
|||
} |
|||
} |
|||
.os-btn{ |
|||
margin: 0 auto; |
|||
width: 176upx; |
|||
height: 64upx; |
|||
line-height: 64upx; |
|||
line-height: 64upx; |
|||
text-align: center; |
|||
border-radius: 10upx; |
|||
font-size: 28upx; |
|||
font-weight: 500; |
|||
color: #fff; |
|||
background-color: #FF873D; |
|||
} |
|||
} |
|||
.od-sign-info{ |
|||
padding: 30upx 10upx !important; |
|||
.ob-tit{ |
|||
padding-left: 20upx; |
|||
} |
|||
.ob-list{ |
|||
display: flex; |
|||
align-content: flex-start; |
|||
flex-wrap: wrap; |
|||
.ob-item{ |
|||
margin-bottom: 26upx; |
|||
flex-grow: 0; |
|||
flex-shrink: 0; |
|||
width: 20%; |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
justify-content: center; |
|||
>image{ |
|||
margin-bottom: 16upx; |
|||
flex-grow: 0; |
|||
flex-shrink: 0; |
|||
width: 100upx; |
|||
height: 100upx; |
|||
border-radius: 50%; |
|||
} |
|||
>view{ |
|||
@include textHide(1); |
|||
max-width: 120upx; |
|||
font-size: 24upx; |
|||
line-height: 34upx; |
|||
text-align: center; |
|||
color: #9A9A9D; |
|||
} |
|||
} |
|||
|
|||
} |
|||
.osi-expand{ |
|||
@include centerFlex(center); |
|||
padding: 20upx 0; |
|||
>image{ |
|||
width: 24upx; |
|||
height: 24upx; |
|||
|
|||
} |
|||
.active{ |
|||
transform: rotate(180deg); |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue