From 92230c9a97dc9ce9df3313d11d26999c04bb6b26 Mon Sep 17 00:00:00 2001
From: gaoluyang <2820782392@qq.com>
Date: 星期二, 15 七月 2025 13:12:48 +0800
Subject: [PATCH] 项目初始化
---
src/pages_template/pages/order/OrderItem.vue | 197 +++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 197 insertions(+), 0 deletions(-)
diff --git a/src/pages_template/pages/order/OrderItem.vue b/src/pages_template/pages/order/OrderItem.vue
new file mode 100644
index 0000000..2e25269
--- /dev/null
+++ b/src/pages_template/pages/order/OrderItem.vue
@@ -0,0 +1,197 @@
+<script setup>
+import { defineProps } from 'vue';
+
+const props = defineProps({
+ order: {
+ type: Object,
+ required: true
+ }
+});
+
+// 浠锋牸灏忔暟
+const priceDecimal = (val) => {
+ if (val !== parseInt(val)) return val.slice(-2);
+ else return '00';
+};
+
+// 浠锋牸鏁存暟
+const priceInt = (val) => {
+ if (val !== parseInt(val)) return val.split('.')[0];
+ else return val;
+};
+
+// 鎬讳环
+const totalPrice = (item) => {
+ let price = 0;
+ item.forEach(val => {
+ price += parseFloat(val.price);
+ });
+ return price.toFixed(2);
+};
+
+// 鎬讳欢鏁�
+const totalNum = (item) => {
+ let num = 0;
+ item.forEach(val => {
+ num += val.number;
+ });
+ return num;
+};
+</script>
+
+<template>
+ <view class="order">
+ <view class="top">
+ <view class="left">
+ <u-icon name="home" :size="30" color="rgb(94,94,94)"></u-icon>
+ <view class="store">{{ order.store }}</view>
+ <u-icon name="arrow-right" color="rgb(203,203,203)" :size="26"></u-icon>
+ </view>
+ <view class="right">{{ order.deal }}</view>
+ </view>
+ <view class="item" v-for="(item, index) in order.goodsList" :key="index">
+ <view class="left">
+ <image :src="item.goodsUrl" mode="aspectFill"></image>
+ </view>
+ <view class="content">
+ <view class="title u-line-2">{{ item.title }}</view>
+ <view class="type">{{ item.type }}</view>
+ <view class="delivery-time">鍙戣揣鏃堕棿 {{ item.deliveryTime }}</view>
+ </view>
+ <view class="right">
+ <view class="price">
+ 锟{ priceInt(item.price) }}
+ <text class="decimal">.{{ priceDecimal(item.price) }}</text>
+ </view>
+ <view class="number">x{{ item.number }}</view>
+ </view>
+ </view>
+ <view class="total">
+ 鍏眥{ totalNum(order.goodsList) }}浠跺晢鍝� 鍚堣:
+ <text class="total-price">
+ 锟{ priceInt(totalPrice(order.goodsList)) }}.
+ <text class="decimal">{{ priceDecimal(totalPrice(order.goodsList)) }}</text>
+ </text>
+ </view>
+ <view class="bottom">
+ <view class="more"><u-icon name="more-dot-fill" color="rgb(203,203,203)"></u-icon></view>
+ <view class="logistics btn">鏌ョ湅鐗╂祦</view>
+ <view class="exchange btn">鍗栦簡鎹㈤挶</view>
+ <view class="evaluate btn">璇勪环</view>
+ </view>
+ </view>
+</template>
+
+<style lang="scss" scoped>
+.order {
+ width: 710rpx;
+ background-color: #ffffff;
+ margin: 20rpx auto;
+ border-radius: 20rpx;
+ box-sizing: border-box;
+ padding: 20rpx;
+ font-size: 28rpx;
+
+ .top {
+ display: flex;
+ justify-content: space-between;
+
+ .left {
+ display: flex;
+ align-items: center;
+
+ .store {
+ margin: 0 10rpx;
+ font-size: 32rpx;
+ font-weight: bold;
+ }
+ }
+
+ .right {
+ color: $u-warning-dark;
+ }
+ }
+
+ .item {
+ display: flex;
+ margin: 20rpx 0 0;
+
+ .left {
+ margin-right: 20rpx;
+
+ image {
+ width: 200rpx;
+ height: 200rpx;
+ border-radius: 10rpx;
+ }
+ }
+
+ .content {
+ .title {
+ font-size: 28rpx;
+ line-height: 50rpx;
+ }
+
+ .type {
+ margin: 10rpx 0;
+ font-size: 24rpx;
+ color: $u-tips-color;
+ }
+
+ .delivery-time {
+ color: #e5d001;
+ font-size: 24rpx;
+ }
+ }
+
+ .right {
+ margin-left: 10rpx;
+ padding-top: 20rpx;
+ text-align: right;
+
+ .decimal {
+ font-size: 24rpx;
+ margin-top: 4rpx;
+ }
+
+ .number {
+ color: $u-tips-color;
+ font-size: 24rpx;
+ }
+ }
+ }
+
+ .total {
+ margin-top: 20rpx;
+ text-align: right;
+ font-size: 24rpx;
+
+ .total-price {
+ font-size: 32rpx;
+ }
+ }
+
+ .bottom {
+ display: flex;
+ margin-top: 40rpx;
+ padding: 0 10rpx;
+ justify-content: space-between;
+ align-items: center;
+
+ .btn {
+ line-height: 52rpx;
+ width: 160rpx;
+ border-radius: 26rpx;
+ border: 2rpx solid $u-border-color;
+ font-size: 26rpx;
+ text-align: center;
+ color: $u-info-dark;
+ }
+
+ .evaluate {
+ color: $u-warning-dark;
+ border-color: $u-warning-dark;
+ }
+ }
+}
+</style>
--
Gitblit v1.9.3