428 lines
9.7 KiB
Vue
428 lines
9.7 KiB
Vue
<template>
|
||
<view class="container">
|
||
<!-- 顶部 Header: 极简大气 -->
|
||
<view class="detail-header">
|
||
<view class="header-content">
|
||
<view class="title-group">
|
||
<text class="page-title">{{ listName }}</text>
|
||
<text class="page-subtitle">高端臻选系列</text>
|
||
</view>
|
||
<view class="header-badges">
|
||
<text class="count-badge">共计 {{ info.items ? info.items.length : 0 }} 件</text>
|
||
<text class="id-badge">清单号: {{ listId }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 商品列表 -->
|
||
<scroll-view class="list-container" scroll-y>
|
||
<view
|
||
v-for="(item, index) in info.items"
|
||
:key="index"
|
||
class="product-card animate-up"
|
||
:style="{ animationDelay: index * 0.05 + 's' }"
|
||
>
|
||
<!-- 1. 卡片顶部工具栏：此处替代了 u-swipe-action -->
|
||
<!-- 彻底移除了滑动组件，改为显性的删除按钮 -->
|
||
<view class="card-top-bar" @tap="navigateToDetail(item.product.id)">
|
||
<view class="top-left">
|
||
<text class="index-num">NO.{{ index + 1 < 10 ? '0' + (index + 1) : index + 1 }}</text>
|
||
<text class="divider-v">|</text>
|
||
<text class="status-text">已选配置</text>
|
||
</view>
|
||
|
||
<view class="top-right">
|
||
<!-- 删除按钮 -->
|
||
<view class="action-btn delete" @tap.stop="handleDelete(index, item.id)">
|
||
<u-icon name="trash" color="#999" size="18"></u-icon>
|
||
</view>
|
||
<!-- 详情跳转图标 -->
|
||
<view class="action-btn arrow">
|
||
<u-icon name="arrow-right" color="#ccc" size="14"></u-icon>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 2. 产品主体内容：左图右文，极简排版 -->
|
||
<view class="card-body" @tap="navigateToDetail(item.product.id)">
|
||
<view class="image-wrapper">
|
||
<image
|
||
:src="item.product.cover"
|
||
mode="aspectFill"
|
||
class="product-thumb"
|
||
/>
|
||
</view>
|
||
<view class="product-info">
|
||
<text class="p-title">{{ item.product.title }}</text>
|
||
<view class="p-tags">
|
||
<text class="luxury-tag">甄选家具</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 3. 规格清单：轻奢菜单风格 -->
|
||
<view class="specs-panel">
|
||
<view class="specs-inner">
|
||
<view
|
||
v-for="(spec, sIndex) in item.product.price_sheet"
|
||
:key="sIndex"
|
||
class="spec-item"
|
||
>
|
||
<view class="spec-header">
|
||
<text class="spec-label">{{ spec.specification }}</text>
|
||
</view>
|
||
|
||
<view class="spec-detail-row">
|
||
<!-- 移除 nowrap 防止长文本撑开 -->
|
||
<text class="dim-text" v-if="spec.dimension">{{ spec.dimension }}</text>
|
||
<view class="dashed-line"></view>
|
||
<view class="price-group">
|
||
<view v-for="(pItem, pIndex) in spec.routine" :key="pIndex" class="price-unit">
|
||
<text class="currency">¥</text>{{ pItem }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
|
||
<view class="safe-bottom"></view>
|
||
</scroll-view>
|
||
|
||
<u-toast ref="uToast"></u-toast>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {deleteCartItemApi, getCartItemApi} from "@/api/page/cart";
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
listId: '',
|
||
listName: '清单详情',
|
||
info: { items: [] },
|
||
// swipeOptions 已彻底移除
|
||
}
|
||
},
|
||
onLoad(options) {
|
||
this.listId = options.id
|
||
this.getInfo();
|
||
},
|
||
methods: {
|
||
handleDelete(index, id) {
|
||
uni.showModal({
|
||
title: '移除确认',
|
||
content: '将从您的甄选清单中移除此商品',
|
||
confirmText: '移除',
|
||
confirmColor: '#B4854D', // 金色确认按钮
|
||
cancelColor: '#999999',
|
||
success: (res) => {
|
||
if (res.confirm) {
|
||
deleteCartItemApi(id).then(() => {
|
||
this.info.items.splice(index, 1)
|
||
this.$refs.uToast.show({
|
||
type: 'success',
|
||
message: '已移除'
|
||
})
|
||
})
|
||
}
|
||
}
|
||
})
|
||
},
|
||
getInfo() {
|
||
uni.showLoading({ title: '加载中...' }) // 中文Loading
|
||
getCartItemApi(this.listId).then((res) => {
|
||
this.info = res || { items: [] };
|
||
uni.hideLoading()
|
||
})
|
||
},
|
||
navigateToDetail(id) {
|
||
uni.navigateTo({
|
||
url: `/pages/product/detail?id=${id}`,
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
/* 核心修复：强制使用 border-box 盒模型，防止 padding 撑开宽度 */
|
||
view, scroll-view, text, image {
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
/* 全局容器：高级灰背景 */
|
||
.container {
|
||
min-height: 100vh;
|
||
width: 100%; /* 确保容器宽度 */
|
||
background-color: #F7F8FA;
|
||
display: flex;
|
||
flex-direction: column;
|
||
overflow-x: hidden; /* 防止水平溢出 */
|
||
}
|
||
|
||
@keyframes slideUp {
|
||
from { opacity: 0; transform: translateY(30rpx); }
|
||
to { opacity: 1; transform: translateY(0); }
|
||
}
|
||
.animate-up { animation: slideUp 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) backwards; }
|
||
|
||
/* 1. Header 区域：极简，大量留白 */
|
||
.detail-header {
|
||
width: 100%;
|
||
background: #fff;
|
||
padding: 50rpx 40rpx 30rpx;
|
||
position: relative;
|
||
z-index: 10;
|
||
}
|
||
|
||
.header-content {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: flex-end;
|
||
}
|
||
|
||
.title-group {
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.page-title {
|
||
font-size: 48rpx;
|
||
font-weight: 300; /* 细字体显得更高级 */
|
||
color: #1A1A1A;
|
||
letter-spacing: 2rpx;
|
||
margin-bottom: 8rpx;
|
||
font-family: serif; /* 尝试使用衬线风格（取决于系统支持） */
|
||
}
|
||
|
||
.page-subtitle {
|
||
font-size: 18rpx;
|
||
color: #B4854D; /* 金色副标题 */
|
||
letter-spacing: 6rpx;
|
||
font-weight: 600;
|
||
text-transform: uppercase;
|
||
}
|
||
|
||
.header-badges {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: flex-end;
|
||
gap: 6rpx;
|
||
}
|
||
|
||
.count-badge, .id-badge {
|
||
font-size: 20rpx;
|
||
color: #999;
|
||
font-family: Arial, Helvetica, sans-serif;
|
||
letter-spacing: 1rpx;
|
||
}
|
||
|
||
/* 2. 列表容器 */
|
||
.list-container {
|
||
flex: 1;
|
||
width: 100%; /* 明确宽度 */
|
||
padding: 30rpx;
|
||
}
|
||
|
||
/* 3. 商品卡片：核心设计 */
|
||
.product-card {
|
||
width: 100%; /* 确保卡片不超出父容器 */
|
||
background: #fff;
|
||
margin-bottom: 30rpx;
|
||
border-radius: 12rpx; /* 不需要太大的圆角 */
|
||
box-shadow: 0 10rpx 40rpx rgba(0,0,0,0.04); /* 大而柔和的阴影 */
|
||
overflow: hidden;
|
||
position: relative;
|
||
border: 1rpx solid rgba(0,0,0,0.02); /* 极细的边框 */
|
||
}
|
||
|
||
/* -- 卡片顶部工具栏 -- */
|
||
.card-top-bar {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 24rpx 30rpx;
|
||
border-bottom: 1rpx solid #F5F5F5;
|
||
background: #fff;
|
||
}
|
||
|
||
.top-left {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.index-num {
|
||
font-family: 'Times New Roman', serif;
|
||
font-size: 28rpx;
|
||
font-weight: 700;
|
||
color: #333;
|
||
font-style: italic;
|
||
}
|
||
|
||
.divider-v {
|
||
margin: 0 16rpx;
|
||
color: #eee;
|
||
font-size: 20rpx;
|
||
}
|
||
|
||
.status-text {
|
||
font-size: 22rpx;
|
||
color: #999;
|
||
letter-spacing: 1rpx;
|
||
}
|
||
|
||
.top-right {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 30rpx; /* 按钮之间拉开距离 */
|
||
}
|
||
|
||
.action-btn {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 44rpx;
|
||
height: 44rpx;
|
||
}
|
||
|
||
/* -- 卡片主体 (图片+标题) -- */
|
||
.card-body {
|
||
padding: 30rpx;
|
||
display: flex;
|
||
align-items: center; /* 垂直居中 */
|
||
gap: 30rpx;
|
||
}
|
||
|
||
.image-wrapper {
|
||
width: 140rpx;
|
||
height: 140rpx;
|
||
border-radius: 6rpx;
|
||
overflow: hidden;
|
||
background: #F9F9F9;
|
||
box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.05);
|
||
flex-shrink: 0; /* 防止图片被压缩 */
|
||
}
|
||
|
||
.product-thumb {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.product-info {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
overflow: hidden; /* 防止文字过长溢出 */
|
||
}
|
||
|
||
.p-title {
|
||
font-size: 32rpx;
|
||
color: #222;
|
||
font-weight: 500;
|
||
line-height: 1.5;
|
||
margin-bottom: 16rpx;
|
||
/* 增加截断，防止超长标题撑开 */
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.p-tags {
|
||
display: flex;
|
||
}
|
||
|
||
.luxury-tag {
|
||
font-size: 18rpx;
|
||
color: #B4854D;
|
||
background: rgba(180, 133, 77, 0.08); /* 极淡的金色背景 */
|
||
padding: 4rpx 12rpx;
|
||
border-radius: 4rpx;
|
||
letter-spacing: 1rpx;
|
||
font-weight: 600;
|
||
}
|
||
|
||
/* -- 规格清单面板 (菜单式) -- */
|
||
.specs-panel {
|
||
padding: 0 30rpx 40rpx; /* 底部留白 */
|
||
}
|
||
|
||
.specs-inner {
|
||
background: #FAFAFA; /* 浅灰底 */
|
||
border: 1rpx solid #EFEFEF;
|
||
border-radius: 8rpx;
|
||
padding: 24rpx;
|
||
}
|
||
|
||
.spec-item {
|
||
margin-bottom: 24rpx;
|
||
}
|
||
|
||
.spec-item:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.spec-header {
|
||
margin-bottom: 8rpx;
|
||
}
|
||
|
||
.spec-label {
|
||
font-size: 26rpx;
|
||
color: #333;
|
||
font-weight: 600;
|
||
display: block;
|
||
}
|
||
|
||
.spec-detail-row {
|
||
display: flex;
|
||
align-items: baseline;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.dim-text {
|
||
font-size: 22rpx;
|
||
color: #888;
|
||
/* 移除 nowrap，允许换行，防止长尺寸描述撑开容器 */
|
||
/* white-space: nowrap; */
|
||
padding-right: 10rpx;
|
||
}
|
||
|
||
/* 虚线连接符 */
|
||
.dashed-line {
|
||
flex: 1;
|
||
height: 1px;
|
||
border-bottom: 2rpx dashed #E0E0E0;
|
||
margin: 0 16rpx;
|
||
position: relative;
|
||
top: -6rpx; /* 微调对齐 */
|
||
min-width: 40rpx; /* 保证至少有一点虚线 */
|
||
}
|
||
|
||
.price-group {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: flex-end;
|
||
flex-shrink: 0; /* 防止价格被挤压 */
|
||
}
|
||
|
||
.price-unit {
|
||
font-family: 'Times New Roman', serif; /* 衬线体价格，显贵 */
|
||
font-size: 30rpx;
|
||
color: #B4854D;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.currency {
|
||
font-size: 20rpx;
|
||
margin-right: 4rpx;
|
||
font-weight: normal;
|
||
}
|
||
|
||
.safe-bottom {
|
||
height: 60rpx;
|
||
}
|
||
</style> |