From dd6fdd9bcff3c2b3dcebdb0db3f80bc9dd469bc4 Mon Sep 17 00:00:00 2001
From: quanwei <419654421@qq.com>
Date: Thu, 25 Dec 2025 10:00:15 +0800
Subject: [PATCH] 1. 添加滚动效果 2. 修复供应方无法开通权限
---
mobile/components/diy/product/product.vue | 284 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 284 insertions(+), 0 deletions(-)
diff --git a/mobile/components/diy/product/product.vue b/mobile/components/diy/product/product.vue
index e869187..90c017b 100644
--- a/mobile/components/diy/product/product.vue
+++ b/mobile/components/diy/product/product.vue
@@ -37,6 +37,34 @@
<text>{{ product.line_price }}</text>
</view>
</view>
+ <!-- 购物车操作组件 -->
+ <view class="cart-action">
+ <!-- 多规格商品显示选择规格按钮 -->
+ <view class="spec-select-btn" v-if="item.spec_type === 20"
+ @click.stop="showSpecPopup(item,index)">
+ <text>选择规格</text>
+ <!-- 购物车数量徽章 -->
+ <view class="cart-badge" v-if="(item.cart && item.cart.total_num > 0)">
+ <text class="cart-count">{{ item.cart.total_num || 0 }}</text>
+ </view>
+ </view>
+ <!-- 单规格商品显示购物车操作 -->
+ <template v-else>
+ <view class="cart-btn-add" v-if="!item.cart.total_num || item.cart.total_num <= 0"
+ @click.stop="addToCart(item,index)">
+ <text class="icon iconfont icon-jia"></text>
+ </view>
+ <view class="cart-number-controller" v-else>
+ <view class="cart-btn-sub" @click.stop="decreaseCart(item,index)">
+ <text class="icon iconfont icon-jian"></text>
+ </view>
+ <view class="cart-number">{{ item.cart.total_num }}</view>
+ <view class="cart-btn-add" @click.stop="increaseCart(item,index)">
+ <text class="icon iconfont icon-jia"></text>
+ </view>
+ </view>
+ </template>
+ </view>
</view>
</view>
</template>
@@ -285,4 +313,260 @@
.diy-product .display__slide .column__3 .product-item {
width: 200rpx;
}
+ //购物车
+ .cart-action {
+ display: flex;
+ justify-content: flex-end;
+ }
+
+ .cart-btn-add,
+ .cart-btn-sub {
+ width: 48rpx;
+ height: 48rpx;
+ border-radius: 50%;
+ background: #ff6b6b;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ color: white;
+ font-size: 24rpx;
+ }
+
+ .spec-select-btn {
+ padding: 2rpx 4rpx;
+ background: #ff6b6b;
+ color: white;
+ border-radius: 24rpx;
+ font-size: 24rpx;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ min-width: 120rpx;
+ height: 48rpx;
+ position: relative;
+ }
+
+ .cart-btn-sub {
+ background: #f0f0f0;
+ color: #666;
+ }
+
+ .cart-number {
+ margin: 0 10rpx;
+ font-size: 28rpx;
+ }
+
+ .cart-number-controller {
+ display: flex;
+ align-items: center;
+ }
+
+ /* 规格选择弹窗样式 */
+ .spec-popup {
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ z-index: 1000;
+ visibility: hidden;
+ opacity: 0;
+ transition: all 0.3s ease;
+ }
+
+ .spec-popup.visible {
+ visibility: visible;
+ opacity: 1;
+ }
+
+ .popup-mask {
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background: rgba(0, 0, 0, 0.6);
+ }
+
+ .popup-content {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ background: white;
+ border-top-left-radius: 20rpx;
+ border-top-right-radius: 20rpx;
+ padding: 30rpx;
+ transform: translateY(100%);
+ transition: transform 0.3s ease;
+ max-height: 80%;
+ overflow-y: auto;
+ }
+
+ .spec-popup.visible .popup-content {
+ transform: translateY(0);
+ }
+
+ .popup-header {
+ display: flex;
+ position: relative;
+ padding-right: 60rpx;
+ margin-bottom: 30rpx;
+ }
+
+ .popup-header image {
+ width: 160rpx;
+ height: 160rpx;
+ border-radius: 10rpx;
+ }
+
+ .popup-header-info {
+ margin-left: 20rpx;
+ flex: 1;
+ }
+
+ .price {
+ font-size: 36rpx;
+ color: #ff6b6b;
+ font-weight: bold;
+ }
+
+ .stock {
+ font-size: 24rpx;
+ color: #999;
+ margin-top: 10rpx;
+ }
+
+ .selected-spec {
+ font-size: 24rpx;
+ color: #666;
+ margin-top: 10rpx;
+ }
+
+ .popup-header-right {
+ position: absolute;
+ right: 0;
+ top: 0;
+ display: flex;
+ align-items: center;
+ gap: 20rpx;
+ }
+
+ .cart-badge {
+ position: absolute;
+ top: -12rpx;
+ right: -12rpx;
+ background: #ff4757;
+ color: white;
+ border-radius: 50%;
+ min-width: 32rpx;
+ height: 32rpx;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 20rpx;
+ line-height: 1;
+ padding: 0 6rpx;
+ z-index: 10;
+ }
+
+ .cart-count {
+ color: white;
+ font-size: 20rpx;
+ line-height: 1;
+ }
+
+ .close-btn {
+ width: 50rpx;
+ height: 50rpx;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ color: #999;
+ }
+
+ .spec-section {
+ margin-bottom: 30rpx;
+ }
+
+ .spec-group {
+ margin-bottom: 30rpx;
+ }
+
+ .spec-group-name {
+ font-size: 28rpx;
+ font-weight: bold;
+ margin-bottom: 20rpx;
+ }
+
+ .spec-options {
+ display: flex;
+ flex-wrap: wrap;
+ }
+
+ .spec-option {
+ padding: 10rpx 20rpx;
+ border: 1rpx solid #ddd;
+ border-radius: 10rpx;
+ margin-right: 20rpx;
+ margin-bottom: 20rpx;
+ font-size: 26rpx;
+ }
+
+ .spec-option.active {
+ border-color: #ff6b6b;
+ color: #ff6b6b;
+ }
+
+ .quantity-section {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ margin-bottom: 30rpx;
+ }
+
+ .quantity-label {
+ font-size: 28rpx;
+ }
+
+ .quantity-controller {
+ display: flex;
+ align-items: center;
+ }
+
+ .quantity-btn {
+ width: 50rpx;
+ height: 50rpx;
+ border: 1rpx solid #ddd;
+ border-radius: 10rpx;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 24rpx;
+ }
+
+ .quantity-btn.disabled {
+ opacity: 0.5;
+ }
+
+ .quantity-display {
+ margin: 0 20rpx;
+ font-size: 28rpx;
+ min-width: 60rpx;
+ text-align: center;
+ }
+
+ .action-buttons {
+ text-align: center;
+ }
+
+ .add-cart-btn {
+ width: 100%;
+ height: 80rpx;
+ background: linear-gradient(90deg, #ff6b6b, #ff8e8e);
+ border-radius: 40rpx;
+ color: white;
+ font-size: 32rpx;
+ border: none;
+ }
</style>
--
Gitblit v1.9.2