liguigong
b91b273686
- 创建代码忽略文件列表 (.gitignore) - 设置代码格式化规则 (.prettierrc)- 添加各种样式文件，包括背景、边框、按钮、卡片等组件样式 - 创建暗黑主题样式文件 - 添加表单和代码样式文件
115 lines
2.4 KiB
Vue
115 lines
2.4 KiB
Vue
<template>
|
||
<view class="bg-white order-list-card-box ss-r-10 ss-m-t-14 ss-m-20"
|
||
:key="orderData.id">
|
||
<view class="order-card-header ss-flex ss-col-center ss-row-between ss-p-x-20">
|
||
<view class="order-no">订单号：{{ orderData.no }}</view>
|
||
<view class="order-state ss-font-26" :class="formatOrderColor(orderData)">
|
||
{{ formatOrderStatus(orderData) }}
|
||
</view>
|
||
</view>
|
||
<view class="border-bottom" v-for="item in orderData.items" :key="item.id">
|
||
<s-goods-item
|
||
:img="item.picUrl"
|
||
:title="item.spuName"
|
||
:skuText="item.properties.map((property) => property.valueName).join(' ')"
|
||
:price="item.price"
|
||
:num="item.count"
|
||
/>
|
||
</view>
|
||
<view class="pay-box ss-m-t-30 ss-flex ss-row-right ss-p-r-20">
|
||
<view class="ss-flex ss-col-center">
|
||
<view class="discounts-title pay-color">共 {{ orderData.productCount }} 件商品,总金额:</view>
|
||
<view class="discounts-money pay-color">
|
||
￥{{ fen2yuan(orderData.payPrice) }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { fen2yuan, formatOrderColor, formatOrderStatus } from '@/sheep/hooks/useGoods';
|
||
|
||
const props = defineProps({
|
||
orderData: {
|
||
type: Object,
|
||
default: {},
|
||
},
|
||
});
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.order-list-card-box {
|
||
.order-card-header {
|
||
height: 80rpx;
|
||
|
||
.order-no {
|
||
font-size: 26rpx;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.order-state {}
|
||
}
|
||
.pay-box {
|
||
.discounts-title {
|
||
font-size: 24rpx;
|
||
line-height: normal;
|
||
color: #999999;
|
||
}
|
||
|
||
.discounts-money {
|
||
font-size: 24rpx;
|
||
line-height: normal;
|
||
color: #999;
|
||
font-family: OPPOSANS;
|
||
}
|
||
|
||
.pay-color {
|
||
color: #333;
|
||
}
|
||
}
|
||
.order-card-footer {
|
||
height: 100rpx;
|
||
|
||
.more-item-box {
|
||
padding: 20rpx;
|
||
|
||
.more-item {
|
||
height: 60rpx;
|
||
|
||
.title {
|
||
font-size: 26rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.more-btn {
|
||
color: $dark-9;
|
||
font-size: 24rpx;
|
||
}
|
||
|
||
.content {
|
||
width: 154rpx;
|
||
color: #333333;
|
||
font-size: 26rpx;
|
||
font-weight: 500;
|
||
}
|
||
}
|
||
}
|
||
.warning-color {
|
||
color: #faad14;
|
||
}
|
||
|
||
.danger-color {
|
||
color: #ff3000;
|
||
}
|
||
|
||
.success-color {
|
||
color: #52c41a;
|
||
}
|
||
|
||
.info-color {
|
||
color: #999999;
|
||
}
|
||
</style>
|