5 changed files with 224 additions and 1 deletions
-
3src/js/api.js
-
6src/pages.json
-
85src/subpackage/order/components/header/header.vue
-
44src/subpackage/order/components/s_line/s_line.vue
-
87src/subpackage/order/pages/display_cabinets/detail/detail.vue
@ -0,0 +1,85 @@ |
|||
<template> |
|||
<view class="header-container"> |
|||
<view class="hc-stadium"> |
|||
<image class="hs-img" mode="aspectFit" :src="logo"></image> |
|||
<view class="hs-txt">{{ source || '-' }}</view> |
|||
</view> |
|||
<view class="hc-user"> |
|||
<view class="hu-line"> |
|||
<view class="hl-view"><text class="hl-txt">手机号码：</text>{{ phone || '-' }}</view> |
|||
<view class="hl-view">{{ status || '-' }}</view> |
|||
</view> |
|||
<view class="hu-line"> |
|||
<view class="hl-view"><text class="hl-txt">用户昵称：</text>{{ name || '-' }}</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
props: { |
|||
logo: { |
|||
default: '-', |
|||
}, |
|||
source: { |
|||
default: '-', |
|||
}, |
|||
phone: { |
|||
default: '-', |
|||
}, |
|||
name: { |
|||
default: '-', |
|||
}, |
|||
status: { |
|||
default: '-' |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
<style lang="scss"> |
|||
@import '~style/public.scss'; |
|||
.header-container{ |
|||
padding: 30upx; |
|||
margin-bottom: 24upx; |
|||
background-color: #fff; |
|||
.hc-stadium{ |
|||
@include centerFlex(flex-start); |
|||
>.hs-img{ |
|||
flex-shrink: 0; |
|||
margin-right: 14upx; |
|||
width: 40upx; |
|||
height: 40upx; |
|||
} |
|||
>.hs-txt{ |
|||
font-size: 28upx; |
|||
line-height: 40upx; |
|||
color: #1a1a1a; |
|||
@include textHide(1); |
|||
} |
|||
} |
|||
.hc-user{ |
|||
padding-top: 24upx; |
|||
margin-top: 26upx; |
|||
border-top: 2upx solid #D8D8D8; |
|||
.hu-line{ |
|||
@include centerFlex(space-between); |
|||
.hl-view{ |
|||
font-size: 28upx; |
|||
line-height: 40upx; |
|||
&:first-child{ |
|||
flex-grow: 1; |
|||
color: #1a1a1a; |
|||
.hl-txt{ |
|||
color: #9C9C9F; |
|||
} |
|||
} |
|||
&+.hl-view{ |
|||
flex-shrink: 0; |
|||
color: #EA5061; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,44 @@ |
|||
<template> |
|||
<view class="s-line"> |
|||
<view class="sl-view">{{ keyname || '-' }}</view> |
|||
<view class="sl-view">{{ value || '-' }}</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
props: { |
|||
keyname: { |
|||
default: '-', |
|||
type: String, |
|||
}, |
|||
value: { |
|||
default: '' |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
|
|||
.s-line{ |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
.sl-view{ |
|||
margin-bottom: 26upx; |
|||
color: #1A1A1A; |
|||
&:first-child{ |
|||
flex-shrink: 0; |
|||
font-size: 28upx; |
|||
} |
|||
&+.sl-view{ |
|||
margin-left: 20upx; |
|||
overflow: hidden; |
|||
white-space: nowrap; |
|||
text-overflow: ellipsis; |
|||
font-size: 24upx; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,87 @@ |
|||
<template> |
|||
<view class="display_cabinets_detail"> |
|||
<o-header></o-header> |
|||
|
|||
<view class="rent-info dcd-box"> |
|||
<view class="dc-tit">商品详情</view> |
|||
<a-line :value="'豆奶' || '-'"> |
|||
<block slot="name">产品名称：</block> |
|||
</a-line> |
|||
<a-line :value="'250ml' || '-'"> |
|||
<block slot="name">规格：</block> |
|||
</a-line> |
|||
<a-line :value="'1' || '-'"> |
|||
<block slot="name">数量：</block> |
|||
</a-line> |
|||
<a-line :value="'￥2' || '-'"> |
|||
<block slot="name">价格：</block> |
|||
</a-line> |
|||
<view class="ri-line"></view> |
|||
<view class="ri-price"> |
|||
<s-line :keyname="'积分抵扣'" :value="'¥6'"></s-line> |
|||
<s-line :keyname="'折扣金额'" :value="'¥6'"></s-line> |
|||
<s-line :keyname="'优惠券优惠'" :value="'¥6'"></s-line> |
|||
<view class="rp-total"><text>合计支付：</text>￥5</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="dcd-box"> |
|||
<view class="dc-tit">支付详情</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 util from '../../../../../utils/util'; |
|||
export default { |
|||
components: { |
|||
'a-line': a_line, |
|||
'o-header': header, |
|||
's-line': s_line, |
|||
}, |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
@import '~style/public.scss'; |
|||
.dcd-box{ |
|||
margin-bottom: 24upx; |
|||
padding: 30upx; |
|||
background-color: #fff; |
|||
|
|||
} |
|||
.dc-tit{ |
|||
margin-bottom: 20upx; |
|||
line-height: 44upx; |
|||
font-size: 32upx; |
|||
color: #333; |
|||
} |
|||
.rent-info{ |
|||
.ri-line{ |
|||
margin: 30upx 0; |
|||
height: 2upx; |
|||
background-color: #D8D8D8; |
|||
} |
|||
.ri-price{ |
|||
.rp-total{ |
|||
text-align: right; |
|||
line-height: 40upx; |
|||
font-weight: 500; |
|||
font-size: 28upx; |
|||
color: #333; |
|||
@include textHide(1); |
|||
>text{ |
|||
font-weight: 400; |
|||
color: #9A9A9D; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
</style> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue