添加活动专区/供需匹配 字体颜色/图片前端

sqw123

2025-12-23 a8b9a78690f1255c4cf648531476d4321c306029

 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>