You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
221 lines
4.8 KiB
221 lines
4.8 KiB
<template>
|
|
<view class="flex-col page">
|
|
<view class="flex-col group_4">
|
|
<view class="flex-col">
|
|
<view class="flex-col section_2">
|
|
<view class="justify-between">
|
|
<text class="text_2">费用合计</text>
|
|
<text class="text_3">¥120</text>
|
|
</view>
|
|
<view class="justify-between group_7">
|
|
<text class="text_4">订单折扣</text>
|
|
<text class="text_5">无</text>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="card">
|
|
<!-- <u-collapse @change="change" @close="close" @open="open" ref="myCollapse" > -->
|
|
<u-collapse :border="false" ref="myCollapse" :value="['Rating fee']">
|
|
<u-collapse-item title="评级费用" value="¥120" name="Rating fee" >
|
|
<view class="u-collapse-content lf-row-between collapse-item-content">
|
|
<view>ANDRW WIGGINS</view>
|
|
<view>¥40</view>
|
|
</view>
|
|
<view class="u-collapse-content lf-row-between collapse-item-content">
|
|
<view>ANDRW WIGGINS</view>
|
|
<view>¥40</view>
|
|
</view>
|
|
<view class="u-collapse-content lf-row-between collapse-item-content">
|
|
<view>ANDRW WIGGINS</view>
|
|
<view>¥40</view>
|
|
</view>
|
|
</u-collapse-item>
|
|
</u-collapse>
|
|
</view>
|
|
|
|
<view class="card">
|
|
<u-collapse :border="false" :value="['other expenses']">
|
|
<u-collapse-item title="其他费用" value="¥0" name="other expenses" >
|
|
<lf-table :Header="header" :Content="content" height="auto" width="100%" :showNumber="false" :border="false" headBgColor="transparent"></lf-table>
|
|
</u-collapse-item>
|
|
</u-collapse>
|
|
</view>
|
|
<view style="width: 100%; height: 30rpx;"></view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import lfTable from '@/components/lf-table.vue'
|
|
|
|
export default {
|
|
components: {
|
|
lfTable
|
|
},
|
|
data() {
|
|
return {
|
|
header: [{
|
|
text: '费用名称',
|
|
width: 171,
|
|
key: 'name'
|
|
},{
|
|
text: '价格',
|
|
width: 171,
|
|
key: 'price'
|
|
},{
|
|
text: '数量',
|
|
width: 171,
|
|
key: 'number'
|
|
},{
|
|
text: '合计',
|
|
width: 171,
|
|
key: 'total'
|
|
}],
|
|
content: [{
|
|
name: '牛奶',
|
|
price: '￥10',
|
|
number: 3,
|
|
total: '￥10'
|
|
},{
|
|
name: '大咖',
|
|
price: '￥10',
|
|
number: 2,
|
|
total: '￥10'
|
|
}]
|
|
};
|
|
},
|
|
onLoad(){
|
|
// todo 折叠面板获取到数据后需要重新计算高度：this.$nextTick(() => this.$refs.myCollapse.init())
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.center-section {
|
|
margin-top: 30rpx;
|
|
padding: 40rpx 30rpx 40rpx 32rpx;
|
|
background-color: rgb(255, 255, 255);
|
|
}
|
|
.image_6 {
|
|
margin-left: 8rpx;
|
|
align-self: center;
|
|
width: 26rpx;
|
|
height: 16rpx;
|
|
}
|
|
.text_6 {
|
|
color: rgb(51, 51, 51);
|
|
font-size: 32rpx;
|
|
font-weight: 500;
|
|
line-height: 44rpx;
|
|
white-space: nowrap;
|
|
}
|
|
.right-group {
|
|
color: rgb(231, 162, 63);
|
|
font-size: 32rpx;
|
|
font-weight: 600;
|
|
line-height: 44rpx;
|
|
white-space: nowrap;
|
|
}
|
|
.group_9 {
|
|
margin-top: 40rpx;
|
|
color: rgb(119, 119, 119);
|
|
font-size: 28rpx;
|
|
font-weight: 500;
|
|
line-height: 40rpx;
|
|
white-space: nowrap;
|
|
}
|
|
.page {
|
|
background-color: #f6f6f6;
|
|
width: 100%;
|
|
overflow-y: auto;
|
|
height: 100%;
|
|
}
|
|
.group_4 {
|
|
padding: 2rpx 0 16rpx;
|
|
flex: 1 1 auto;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.section_2 {
|
|
padding: 40rpx 32rpx;
|
|
background-color: rgb(255, 255, 255);
|
|
}
|
|
.group_7 {
|
|
margin-top: 50rpx;
|
|
}
|
|
.group_10 {
|
|
margin-top: 30rpx;
|
|
color: rgb(119, 119, 119);
|
|
font-size: 28rpx;
|
|
font-weight: 500;
|
|
line-height: 40rpx;
|
|
white-space: nowrap;
|
|
}
|
|
.group_11 {
|
|
margin-top: 30rpx;
|
|
color: rgb(119, 119, 119);
|
|
font-size: 28rpx;
|
|
font-weight: 500;
|
|
line-height: 40rpx;
|
|
white-space: nowrap;
|
|
}
|
|
.text_2 {
|
|
color: rgb(51, 51, 51);
|
|
font-size: 32rpx;
|
|
font-weight: 500;
|
|
line-height: 44rpx;
|
|
white-space: nowrap;
|
|
}
|
|
.text_3 {
|
|
color: rgb(231, 162, 63);
|
|
font-size: 32rpx;
|
|
font-weight: 600;
|
|
line-height: 44rpx;
|
|
white-space: nowrap;
|
|
}
|
|
.text_4 {
|
|
color: rgb(51, 51, 51);
|
|
font-size: 32rpx;
|
|
font-weight: 500;
|
|
line-height: 44rpx;
|
|
white-space: nowrap;
|
|
}
|
|
.text_5 {
|
|
color: rgb(51, 51, 51);
|
|
font-size: 32rpx;
|
|
font-weight: 600;
|
|
line-height: 44rpx;
|
|
white-space: nowrap;
|
|
}
|
|
.text_18 {
|
|
margin-left: 116rpx;
|
|
}
|
|
.text_19 {
|
|
margin-left: 118rpx;
|
|
}
|
|
.text_20 {
|
|
margin-left: 116rpx;
|
|
}
|
|
|
|
.card{
|
|
width: 750rpx;
|
|
height: auto;
|
|
background-color: #FFFFFF;
|
|
margin-top: 30rpx;
|
|
}
|
|
.collapse-item-content{
|
|
padding: 12rpx 0;
|
|
&>view:nth-child(1){
|
|
width: 80%;
|
|
}
|
|
&>view:nth-child(2){
|
|
width: 20%;
|
|
text-align: right;
|
|
}
|
|
}
|
|
/deep/.u-cell__value{
|
|
font-size: 32rpx !important;
|
|
color: #E7A23F !important;
|
|
}
|
|
</style>
|