324 lines
9.6 KiB
Vue
324 lines
9.6 KiB
Vue
<!-- components/order-card-pdd.vue -->
|
||
<template>
|
||
<view class="order-card">
|
||
<!-- 店铺头部 -->
|
||
<view class="shop-header">
|
||
<view class="shop-info">
|
||
<!-- <image class="shop-logo" src="https://picsum.photos/60/60?random=1" mode="aspectFill"/>-->
|
||
<image class="shop-logo" src="https://hudie.xiao.band/icon/six.png" mode="aspectFill"/>
|
||
<view class="shop-name">六果泡泡专卖店</view>
|
||
<view class="shop-arrow">›</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 循环: 商品列表 -->
|
||
<view class="goods-list" v-for="(goods,index) in xiaoMain.card购物车列表数据" :key="index">
|
||
<view class="goods-item">
|
||
<image class="goods-image" :src="goods.goods_sku_主图" mode="aspectFill"/>
|
||
<view class="goods-info">
|
||
<text class="goods-name">{{ goods.goods_商品标题 }}</text>
|
||
<text class="goods-spec">{{ goods.销售规格 }}</text>
|
||
<text class="goods-spec">{{ goods.goods_sku_name }}</text>
|
||
<view class="goods-price-row">
|
||
<text class="goods-price">¥{{ goods.会员价 / 100 }}</text>
|
||
<text class="goods-count">×{{ goods.单个商品订单数量 }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
|
||
<!-- 订单金额 -->
|
||
<view class="order-amount">
|
||
<text class="order-no">
|
||
<!-- {{ dayjs(orderItems.dateAndTime).format("MM月DD日 HH:mm") }}-->
|
||
|
||
</text>
|
||
<text style="flex: 1"></text>
|
||
<!-- <text class="amount-label">共{{ orderItems.order购物车商品数量 }}件商品 实付：</text>-->
|
||
<text class="amount-label">共{{ 订单商品总数量 }}件商品 实付：</text>
|
||
<text class="amount-value">¥{{ 实付订单的总金额 / 100 }}</text>
|
||
<!-- <view class="order-number" @click="复制订单号(orderItems.order物流公司订单编号??'')">-->
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script lang="ts" setup>
|
||
// 数据全部写死在组件内部，无需外部传入
|
||
import {useMainXiaoStore} from "@/stores/piniaPro/miniChatStore";
|
||
|
||
|
||
let xiaoMain = useMainXiaoStore();
|
||
|
||
|
||
defineOptions({options: {styleIsolation: "shared"}, name: "card-list-data-item"});
|
||
|
||
|
||
const 订单商品总数量 = xiaoMain.card购物车列表数据.reduce((previousValue, currentValue,) => {
|
||
return previousValue + currentValue.单个商品订单数量;
|
||
}, 0);
|
||
const 实付订单的总金额 = xiaoMain.card购物车列表数据.reduce((previousValue, currentValue,) => {
|
||
return previousValue + currentValue.单个商品订单总金额;
|
||
}, 0);
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.order-card {
|
||
//background: #ffffff;
|
||
border-radius: 16rpx;
|
||
margin: 0 24rpx;
|
||
overflow: hidden;
|
||
|
||
// 店铺头部
|
||
.shop-header {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 24rpx 28rpx 20rpx;
|
||
border-bottom: 2rpx solid #f0f0f0;
|
||
|
||
.shop-info {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12rpx;
|
||
|
||
.shop-logo {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
border-radius: 8rpx;
|
||
}
|
||
|
||
.shop-name {
|
||
font-size: 26rpx;
|
||
font-weight: 550;
|
||
color: #333;
|
||
}
|
||
|
||
.shop-arrow {
|
||
font-size: 32rpx;
|
||
color: #ccc;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.shop-date {
|
||
font-size: 26rpx;
|
||
font-weight: 550;
|
||
color: #333;
|
||
}
|
||
}
|
||
|
||
.order-status {
|
||
font-size: 24rpx;
|
||
font-weight: 450;
|
||
|
||
&.status-shipped {
|
||
color: #07c160;
|
||
}
|
||
}
|
||
}
|
||
|
||
// 商品列表
|
||
.goods-list {
|
||
padding: 20rpx 28rpx;
|
||
|
||
.goods-item {
|
||
display: flex;
|
||
gap: 20rpx;
|
||
margin-bottom: 20rpx;
|
||
|
||
&:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.goods-image {
|
||
width: 180rpx;
|
||
height: 180rpx;
|
||
border-radius: 12rpx;
|
||
//background: #f5f5f5;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.goods-info {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
min-width: 0;
|
||
|
||
.goods-name {
|
||
font-size: 26rpx;
|
||
color: #1a1a1a;
|
||
line-height: 1.5;
|
||
display: -webkit-box;
|
||
-webkit-line-clamp: 2;
|
||
line-clamp: 2;
|
||
-webkit-box-orient: vertical;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.goods-spec {
|
||
font-size: 22rpx;
|
||
color: #999;
|
||
margin: 6rpx 0;
|
||
}
|
||
|
||
.goods-price-row {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
|
||
.goods-price {
|
||
font-size: 28rpx;
|
||
color: #f0883a;
|
||
font-weight: 650;
|
||
}
|
||
|
||
.goods-count {
|
||
font-size: 24rpx;
|
||
color: #999;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// 订单金额
|
||
.order-amount {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-end;
|
||
padding: 16rpx 28rpx;
|
||
border-top: 2rpx solid #f5f5f5;
|
||
|
||
.order-no {
|
||
font-size: 20rpx;
|
||
color: #666;
|
||
}
|
||
|
||
.amount-label {
|
||
font-size: 24rpx;
|
||
color: #666;
|
||
}
|
||
|
||
.amount-value {
|
||
font-size: 30rpx;
|
||
color: #f0883a;
|
||
font-weight: 750;
|
||
}
|
||
}
|
||
|
||
.order-number {
|
||
font-size: 20rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
color: #666;
|
||
padding: 0 28rpx 16rpx;
|
||
}
|
||
|
||
// 操作按钮
|
||
.action-bar {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 20rpx 28rpx 24rpx;
|
||
border-top: 2rpx solid #f5f5f5;
|
||
|
||
.action-left {
|
||
display: flex;
|
||
gap: 16rpx;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.action-right {
|
||
display: flex;
|
||
gap: 16rpx;
|
||
flex-shrink: 0;
|
||
|
||
.action-btn {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 12rpx 28rpx;
|
||
border-radius: 30rpx;
|
||
font-size: 24rpx;
|
||
font-weight: 460;
|
||
border: none;
|
||
outline: none;
|
||
transition: all 0.15s ease;
|
||
white-space: nowrap;
|
||
height: auto;
|
||
line-height: 1.4;
|
||
|
||
&.primary {
|
||
background: #ff4444;
|
||
color: #ffffff;
|
||
|
||
&:active {
|
||
opacity: 0.82;
|
||
transform: scale(0.97);
|
||
}
|
||
}
|
||
|
||
&.secondary {
|
||
background: #ffffff;
|
||
color: #666;
|
||
border: 2rpx solid #d9d9d9;
|
||
|
||
&:active {
|
||
background: #f5f5f5;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// 暗黑模式适配
|
||
@media (prefers-color-scheme: dark) {
|
||
.order-card {
|
||
background: #1c1c1e;
|
||
|
||
.shop-header {
|
||
border-bottom-color: #333;
|
||
|
||
.shop-info {
|
||
.shop-name {
|
||
color: #e0e0e0;
|
||
}
|
||
}
|
||
}
|
||
|
||
.goods-list {
|
||
.goods-item {
|
||
.goods-info {
|
||
.goods-name {
|
||
color: #e0e0e0;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.order-amount {
|
||
border-top-color: #333;
|
||
|
||
.amount-label {
|
||
color: #999;
|
||
}
|
||
}
|
||
|
||
.action-bar {
|
||
border-top-color: #333;
|
||
|
||
.action-btn {
|
||
&.secondary {
|
||
background: #2c2c2e;
|
||
color: #ccc;
|
||
border-color: #555;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style> |