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>
|