8 changed files with 511 additions and 91 deletions
-
4src/js/api.js
-
22src/pages.json
-
56src/subpackage/order/components/p_line/p_line.vue
-
12src/subpackage/order/pages/devices/detail/detail.vue
-
177src/subpackage/order/pages/events/detail/detail.vue
-
68src/subpackage/order/pages/events/member_info/member_info.vue
-
95src/subpackage/order/pages/events/member_list/member_list.vue
@ -0,0 +1,56 @@ |
|||||
|
<template> |
||||
|
<view class="p-line"> |
||||
|
<view class="pl-key">{{ keyname || '-' }}</view> |
||||
|
<view class="pl-value">{{ value || '-' }}</view> |
||||
|
<view class="pl-btn" v-if="isbtn">复制</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
props: { |
||||
|
isbtn: { |
||||
|
default: false, |
||||
|
type: Boolean |
||||
|
}, |
||||
|
keyname: { |
||||
|
default: '-', |
||||
|
type: String |
||||
|
}, |
||||
|
value: { |
||||
|
default: '-', |
||||
|
type: String |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss"> |
||||
|
@import '~style/public.scss'; |
||||
|
.p-line{ |
||||
|
display: flex; |
||||
|
align-items: flex-start; |
||||
|
.pl-key{ |
||||
|
flex-shrink: 0; |
||||
|
width: 160upx; |
||||
|
flex-grow: 0; |
||||
|
line-height: 52upx; |
||||
|
font-size: 28upx; |
||||
|
color: #9A9A9D; |
||||
|
} |
||||
|
.pl-value{ |
||||
|
line-height: 52upx; |
||||
|
font-size: 28upx; |
||||
|
color: #333333; |
||||
|
word-break: break-all; |
||||
|
} |
||||
|
.pl-btn{ |
||||
|
margin-left: 20upx; |
||||
|
flex-shrink: 0; |
||||
|
line-height: 52upx; |
||||
|
font-size: 28upx; |
||||
|
color: $themeColor; |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
</style> |
@ -0,0 +1,177 @@ |
|||||
|
<template> |
||||
|
<view class="events-detail"> |
||||
|
<o-header></o-header> |
||||
|
<!-- 个人 --> |
||||
|
<block v-if="false"> |
||||
|
<view class="ed-type-box"> |
||||
|
<view class="ed-tit">保险信息</view> |
||||
|
<a-line :value="'阿拉斯加山脉'"> |
||||
|
<block slot="name">姓名:</block> |
||||
|
</a-line> |
||||
|
<a-line :value="'4409531656666'"> |
||||
|
<block slot="name">身份证号码:</block> |
||||
|
</a-line> |
||||
|
</view> |
||||
|
<view class="ed-box"> |
||||
|
<view class="ed-tit">参赛资料</view> |
||||
|
<a-line :value="'阿拉斯加山脉'"> |
||||
|
<block slot="name">姓名:</block> |
||||
|
</a-line> |
||||
|
<a-line :value="'18316535485'"> |
||||
|
<block slot="name">手机号码:</block> |
||||
|
</a-line> |
||||
|
<a-line :value="'男'"> |
||||
|
<block slot="name">性别:</block> |
||||
|
</a-line> |
||||
|
<a-line :value="'60kg'"> |
||||
|
<block slot="name">体重:</block> |
||||
|
</a-line> |
||||
|
<view class="ed-tit">资质证书</view> |
||||
|
<view class="ed-img-list"> |
||||
|
<image></image> |
||||
|
<image></image> |
||||
|
<image></image> |
||||
|
<image></image> |
||||
|
<image></image> |
||||
|
</view> |
||||
|
</view> |
||||
|
</block> |
||||
|
|
||||
|
<!-- 团队 --> |
||||
|
<block> |
||||
|
<view class="ed-type-box"> |
||||
|
<view class="ed-tit">团队负责人信息</view> |
||||
|
<a-line :value="'阿拉斯加山脉'"> |
||||
|
<block slot="name">姓名:</block> |
||||
|
</a-line> |
||||
|
<a-line :value="'15440953165'"> |
||||
|
<block slot="name">手机号码:</block> |
||||
|
</a-line> |
||||
|
</view> |
||||
|
<view class="ed-box"> |
||||
|
<view class="ed-tit">赛事信息</view> |
||||
|
<s-line :keyname="'参赛成员'" :value="'已选参赛人员:6人'"></s-line> |
||||
|
<a-line :value="'白云冲锋队'"> |
||||
|
<block slot="name">团队名称:</block> |
||||
|
</a-line> |
||||
|
<a-line :value="'待确认'" value-color="#ea5061"> |
||||
|
<block slot="name">参赛成员确认状态:</block> |
||||
|
</a-line> |
||||
|
<view class="eb-btn">查看参赛成员</view> |
||||
|
</view> |
||||
|
</block> |
||||
|
<view class="ed-box"> |
||||
|
<view class="ed-tit">赛事信息</view> |
||||
|
<a-line :value="'欧轩科技篮球赛事'"> |
||||
|
<block slot="name">赛事名称:</block> |
||||
|
</a-line> |
||||
|
<a-line :value="'个人赛'"> |
||||
|
<block slot="name">赛事类型:</block> |
||||
|
</a-line> |
||||
|
<a-line :value="'广州市白云区永泰路'"> |
||||
|
<block slot="name">赛事地址:</block> |
||||
|
</a-line> |
||||
|
<a-line :value="'2020/09/25 7:00 ~ 2020/-9/25 15:00'"> |
||||
|
<block slot="name">活动时间:</block> |
||||
|
</a-line> |
||||
|
<a-line :value="'55/人'"> |
||||
|
<block slot="name">活动费用:</block> |
||||
|
</a-line> |
||||
|
</view> |
||||
|
|
||||
|
<view class="ed-box"> |
||||
|
<view class="ed-tit">赛事信息</view> |
||||
|
<s-line :keyname="'金额小计'" :value="'¥99.99'"></s-line> |
||||
|
<s-line :keyname="'积分抵扣'" :value="'¥99.99'"></s-line> |
||||
|
<s-line :keyname="'折扣金额'" :value="'¥99.99'"></s-line> |
||||
|
<s-line :keyname="'优惠券优惠'" :value="'¥99.99'"></s-line> |
||||
|
<view class="total-line"> |
||||
|
<text>合计支付:</text>¥98.99 |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="ed-box"> |
||||
|
<view class="ed-tit">支付详情</view> |
||||
|
<p-line :keyname="'订单编号'" :value="'sc20 0822 0815 6894'" isbtn></p-line> |
||||
|
<p-line :keyname="'支付方式'" :value="'微信支付'"></p-line> |
||||
|
<p-line :keyname="'支付时间'" :value="'2020-08-22 10:12:25'"></p-line> |
||||
|
<p-line :keyname="'交易流水号'" :value="'202009181255364564612622'"></p-line> |
||||
|
<p-line :keyname="'退款编号'" :value="'kc20201230181914997632'"></p-line> |
||||
|
<p-line :keyname="'退款时间'" :value="'2020-12-30 18:19:14'"></p-line> |
||||
|
<p-line :keyname="'退款金额'" :value="'¥2300'"></p-line> |
||||
|
<p-line :keyname="'退款原因'" :value="'自动退款,赛程报名人数未达到最低报名人数条件'"></p-line> |
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { ORDER_API } from '../../../js/api'; |
||||
|
import server from '../../../js/server'; |
||||
|
import a_line from '../../../../../components/order_list/a_line/a_line.vue'; |
||||
|
import header from '../../../components/header/header.vue'; |
||||
|
import s_line from '../../../components/s_line/s_line.vue'; |
||||
|
import p_line from '../../../components/p_line/p_line.vue'; |
||||
|
import util from '../../../../../utils/util'; |
||||
|
export default { |
||||
|
components: { |
||||
|
'a-line': a_line, |
||||
|
'o-header': header, |
||||
|
's-line': s_line, |
||||
|
'p-line': p_line, |
||||
|
}, |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss"> |
||||
|
@import '~style/public.scss'; |
||||
|
.ed-box{ |
||||
|
margin-bottom: 24upx; |
||||
|
padding: 30upx; |
||||
|
background-color: #fff; |
||||
|
} |
||||
|
.ed-tit{ |
||||
|
margin-bottom: 20upx; |
||||
|
font-size: 32upx; |
||||
|
line-height: 44upx; |
||||
|
color: #1a1a1a; |
||||
|
} |
||||
|
.total-line{ |
||||
|
text-align: right; |
||||
|
font-size: 32upx; |
||||
|
font-weight: 500; |
||||
|
line-height: 52upx; |
||||
|
color: #1a1a1a; |
||||
|
@include textHide(1); |
||||
|
>text{ |
||||
|
font-size: 28upx; |
||||
|
font-weight: 400; |
||||
|
color: #9a9a9d; |
||||
|
} |
||||
|
} |
||||
|
.ed-type-box{ |
||||
|
padding: 30upx; |
||||
|
margin-bottom: 2upx; |
||||
|
background-color: #fff; |
||||
|
} |
||||
|
.ed-img-list{ |
||||
|
display: flex; |
||||
|
flex-wrap: wrap; |
||||
|
align-content: flex-start; |
||||
|
image{ |
||||
|
margin-right: 30upx; |
||||
|
margin-bottom: 30upx; |
||||
|
width: 180upx; |
||||
|
height: 180upx; |
||||
|
background-color: skyblue; |
||||
|
} |
||||
|
} |
||||
|
.eb-btn{ |
||||
|
margin-top: 48upx; |
||||
|
line-height: 88upx; |
||||
|
text-align: center; |
||||
|
border-radius: 10upx; |
||||
|
font-size: 32upx; |
||||
|
background-color: $themeColor; |
||||
|
color: #fff; |
||||
|
} |
||||
|
|
||||
|
</style> |
@ -0,0 +1,68 @@ |
|||||
|
<template> |
||||
|
<view class="menber-info"> |
||||
|
<view class="ed-type-box"> |
||||
|
<view class="ed-tit">保险信息</view> |
||||
|
<a-line :value="'阿拉斯加山脉'"> |
||||
|
<block slot="name">姓名:</block> |
||||
|
</a-line> |
||||
|
<a-line :value="'4409531656666'"> |
||||
|
<block slot="name">身份证号码:</block> |
||||
|
</a-line> |
||||
|
</view> |
||||
|
<view class="ed-box"> |
||||
|
<view class="ed-tit">参赛资料</view> |
||||
|
<a-line :value="'阿拉斯加山脉'"> |
||||
|
<block slot="name">姓名:</block> |
||||
|
</a-line> |
||||
|
<a-line :value="'18316535485'"> |
||||
|
<block slot="name">手机号码:</block> |
||||
|
</a-line> |
||||
|
<a-line :value="'男'"> |
||||
|
<block slot="name">性别:</block> |
||||
|
</a-line> |
||||
|
<a-line :value="'60kg'"> |
||||
|
<block slot="name">体重:</block> |
||||
|
</a-line> |
||||
|
<view class="ed-tit">资质证书</view> |
||||
|
<view class="ed-img-list"> |
||||
|
<image></image> |
||||
|
<image></image> |
||||
|
<image></image> |
||||
|
<image></image> |
||||
|
<image></image> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { ORDER_API } from '../../../js/api'; |
||||
|
import server from '../../../js/server'; |
||||
|
import a_line from '../../../../../components/order_list/a_line/a_line.vue'; |
||||
|
import header from '../../../components/header/header.vue'; |
||||
|
import s_line from '../../../components/s_line/s_line.vue'; |
||||
|
import p_line from '../../../components/p_line/p_line.vue'; |
||||
|
import util from '../../../../../utils/util'; |
||||
|
export default { |
||||
|
components: { |
||||
|
'a-line': a_line, |
||||
|
'o-header': header, |
||||
|
's-line': s_line, |
||||
|
'p-line': p_line, |
||||
|
}, |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss"> |
||||
|
@import '~style/public.scss'; |
||||
|
.ed-box{ |
||||
|
margin-bottom: 24upx; |
||||
|
padding: 30upx; |
||||
|
background-color: #fff; |
||||
|
} |
||||
|
.ed-type-box{ |
||||
|
padding: 30upx; |
||||
|
margin-bottom: 2upx; |
||||
|
background-color: #fff; |
||||
|
} |
||||
|
</style> |
@ -0,0 +1,95 @@ |
|||||
|
<template> |
||||
|
<view class="member-list"> |
||||
|
<view class="ml-header"> |
||||
|
<view class="mh-tit">团队名称:白云冲锋队</view> |
||||
|
<a-line :value="'待确认'" value-color="#ea5061"> |
||||
|
<block slot="name">参赛成员确认状态:</block> |
||||
|
</a-line> |
||||
|
</view> |
||||
|
<view class="ml-bar"><text>参赛成员</text> <text>已选:</text>6人</view> |
||||
|
<view class="ml-list"> |
||||
|
<view class="ml-item" v-for="i in 10" :key="i"> |
||||
|
<view class="mi-name">成员1:林花花</view> |
||||
|
<view><text>已完善</text><image></image></view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import a_line from '../../../../../components/order_list/a_line/a_line.vue'; |
||||
|
export default { |
||||
|
components: { |
||||
|
'a-line': a_line, |
||||
|
}, |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss"> |
||||
|
@import '~style/public.scss'; |
||||
|
.member-list{ |
||||
|
padding-bottom: 0upx; |
||||
|
padding-bottom: calc( 0upx + constant(safe-area-inset-bottom)); /* 兼容 iOS < 11.2 */ |
||||
|
padding-bottom: calc( 0upx + env(safe-area-inset-bottom)); /* 兼容 iOS >= 11.2 */ |
||||
|
} |
||||
|
.mh-tit{ |
||||
|
margin-bottom: 10upx; |
||||
|
font-size: 32upx; |
||||
|
line-height: 44upx; |
||||
|
color: #333; |
||||
|
} |
||||
|
.ml-header{ |
||||
|
padding: 30upx; |
||||
|
margin-bottom: 30upx; |
||||
|
background-color: #fff; |
||||
|
} |
||||
|
.ml-bar{ |
||||
|
padding: 0 30upx; |
||||
|
line-height: 100upx; |
||||
|
margin-bottom: 2upx; |
||||
|
background-color: #fff; |
||||
|
font-size: 28upx; |
||||
|
color: $themeColor; |
||||
|
@include textHide(1); |
||||
|
>text{ |
||||
|
&:first-child{ |
||||
|
margin-right: 20upx; |
||||
|
font-size: 32upx; |
||||
|
font-weight: 500; |
||||
|
color: #333; |
||||
|
} |
||||
|
&+text{ |
||||
|
color: #9a9a9d; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.ml-list{ |
||||
|
.ml-item{ |
||||
|
margin-bottom: 2upx; |
||||
|
padding: 0 34upx; |
||||
|
height: 136upx; |
||||
|
background-color: #fff; |
||||
|
@include centerFlex(space-between); |
||||
|
>view{ |
||||
|
&:first-child{ |
||||
|
font-size: 28upx; |
||||
|
color: #333; |
||||
|
@include textHide(1); |
||||
|
} |
||||
|
&+view{ |
||||
|
margin-left: 20upx; |
||||
|
flex-shrink: 0; |
||||
|
font-size: 28upx; |
||||
|
color: #9a9a9d; |
||||
|
image{ |
||||
|
margin-left: 24upx; |
||||
|
vertical-align: middle; |
||||
|
width: 24upx; |
||||
|
height: 24upx; |
||||
|
background-color: skyblue; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
Write
Preview
Loading…
Cancel
Save
Reference in new issue