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