cashier_weapp/pages/group_order/components/groupOrderInfo.vue

127 lines
2.3 KiB
Vue

<template>
<view class="Box">
<view class="fontStyle">
<image src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/drder/sfmoney.png"
style="width: 28.29rpx;height: 31.93rpx;" mode=""></image>
<text>订单信息</text>
</view>
<view class="content">
<view>
<text></text> <text></text> <text>:</text>
</view>
<text>{{info.orderNo}}</text>
</view>
<view class="content">
<view>
<text></text> <text></text> <text>:</text>
</view>
<text>{{info.phone}}</text>
</view>
<view class="content">
<view>
<text></text> <text></text> <text></text> <text>:</text>
</view>
<text>{{info.payTime}}</text>
</view>
<view class="content">
<view>
<text></text> <text>:</text>
</view>
<text>{{info.number}}</text>
</view>
<view class="content">
<view>
<text></text> <text>:</text>
</view>
<text>{{info.orderAmount}}</text>
</view>
<view class="content">
<view>
<text></text> <text></text> <text></text> <text>:</text>
</view>
<text style="color: #FF4C11;">{{info.saveAmount}}</text>
</view>
<view class="content">
<view>
<text></text><text></text> <text>:</text>
</view>
<text>{{info.payAmount}}</text>
</view>
</view>
</template>
<script>
export default {
props: ['info'],
data() {
return {}
},
methods: {
}
}
</script>
<style lang="less" scoped>
.Box {
width: 750rpx;
background: #FFFFFF;
border-radius: 16rpx 16rpx 16rpx 16rpx;
padding: 32rpx 64rpx;
margin-top: 32rpx;
position: relative;
.fontStyle {
.df;
>text {
font-weight: 500;
font-size: 28rpx;
color: #333333;
margin-left: 12rpx
}
}
.content {
.df(flex-start, stretch);
margin-top: 16rpx;
margin-left: 20rpx;
>view {
>text {
font-weight: 400;
font-size: 24rpx;
color: #666666;
}
font-weight: 400;
font-size: 24rpx;
color: #666666;
margin-right: 50rpx;
width: 120rpx;
.df(space-between)
}
>text {
font-weight: 400;
font-size: 24rpx;
color: #333333;
}
}
}
.ml-20 {
margin-left: 20rpx;
}
.df(@start: flex-start, @position: center) {
display: flex;
justify-content: @start;
align-items: @position;
}
</style>