six_uniapp_0001
This commit is contained in:
doudou201703
@@ -0,0 +1,324 @@
|
||||
<!-- 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>
|
||||
Reference in New Issue
Block a user