5 changed files with 498 additions and 5 deletions
-
28src/components/organize_order/organize_order.vue
-
6src/pages.json
-
4src/pages/order_list/order_list.vue
-
3src/subpackage/order/js/api.js
-
460src/subpackage/order/pages/organize/detail/detail.vue
@ -0,0 +1,460 @@ |
|||
<template> |
|||
<view class="organize-detail"> |
|||
<!-- 地址&订单信息 --> |
|||
<view class="od-box od-order"> |
|||
<view class="oo-stadium"> |
|||
<image></image> |
|||
<view>欧轩智能场馆(羽毛球永泰店)</view> |
|||
</view> |
|||
<view class="ob-line"> |
|||
<view class="ol-left"> |
|||
<view class="ol-name">订单编号：</view> |
|||
<view class="ol-txt"> |
|||
<view class="ot-txt">2352534645764747</view> |
|||
</view> |
|||
</view> |
|||
<view class="ol-status">已完成</view> |
|||
</view> |
|||
<view class="ob-line"> |
|||
<view class="ol-left"> |
|||
<view class="ol-name">创建时间：</view> |
|||
<view class="ol-txt"> |
|||
<view class="ot-txt">2019-06-06 12:00:06</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">你的小甜心</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">参与约玩</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">小李广中</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">522424200004071234</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 约玩报名信息 --> |
|||
<view class="od-box od-sign-info"> |
|||
<view class="ob-tit">约玩报名信息</view> |
|||
<view class="ob-list"> |
|||
<view class="ob-item" v-for="i in 8" :key="i"> |
|||
<image></image> |
|||
<view>永爱倒特永爱倒特…</view> |
|||
</view> |
|||
</view> |
|||
<view class="osi-expand" @click="isExpand = !isExpand"> |
|||
<image :class="[isExpand?'active':'']" mode="aspectFit" src="/subpackage/order/static/images/down_arrow.png"></image> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 约玩信息 --> |
|||
<view class="od-box od-mes"> |
|||
<view class="ob-tit">约玩信息</view> |
|||
<view class="om-theme"> |
|||
<view>个人</view> |
|||
<text>欧轩网络科技有限公司神秘大雁山环岛骑行游玩户外露营活动</text> |
|||
</view> |
|||
<view class="ob-line"> |
|||
<view class="ol-left"> |
|||
<view class="ol-name">约玩项目：</view> |
|||
<view class="ol-txt"> |
|||
<view class="ot-txt">篮球</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">¥50.00</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">2022年5月17日(周五)</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">1号场 10:00-13:00</view> |
|||
<view class="ol-item">1号场 10:00-13:00</view> |
|||
<view class="ol-item">1号场 10:00-13:00</view> |
|||
<view class="ol-item">1号场 10:00-13:00</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</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"> |
|||
<view class="opi-line"> |
|||
<view>金额小计</view> |
|||
<view>¥6</view> |
|||
</view> |
|||
<view class="opi-line"> |
|||
<view>积分抵扣</view> |
|||
<view>¥6</view> |
|||
</view> |
|||
<view class="opi-line"> |
|||
<view>折扣金额</view> |
|||
<view>¥6</view> |
|||
</view> |
|||
<view class="opi-line"> |
|||
<view>优惠券优惠</view> |
|||
<view>¥6</view> |
|||
</view> |
|||
<view class="opi-total">合计支付：<text>￥5</text></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">微信支付</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">2019年6月18日 10:30:40</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">424736746998493847989434</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 { |
|||
data(){ |
|||
return { |
|||
isExpand: false, |
|||
orderInfo: {} |
|||
} |
|||
}, |
|||
onLoad(options){ |
|||
this.getOrderInfo({ |
|||
order_no: options.order_no, |
|||
stadium_id: options.stadium_id, |
|||
}) |
|||
}, |
|||
methods: { |
|||
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; |
|||
} |
|||
} |
|||
} |
|||
.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; |
|||
background-color: skyblue; |
|||
} |
|||
>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%; |
|||
background-color: purple; |
|||
} |
|||
>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