mobile/components/diy/product/product.vue
@@ -28,15 +28,46 @@
                           <!-- 商品价格 -->
                           <view class="price d-s-c mt10">
                              <view v-if="itemData.style.show.productPrice" class="theme-price">
                                 <text>¥</text>
                                 <text class="">{{ product.product_price }}</text>
                                 <text v-if="product.is_price_negotiable">价格面议</text>
                                 <template v-else>
                                    <text>¥</text>
                                    <text class="">{{ product.product_price }}</text>
                                 </template>
                              </view>
                              <view class="ml10 gray9 text-d-line f28"
                                 v-if="itemData.style.show.linePrice && product.line_price > 0">
                                 v-if="itemData.style.show.linePrice && product.line_price > 0 && !product.is_price_negotiable">
                                 <text>¥</text>
                                 <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="handleCartItemAction(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="handleCartItemAction(item,index)">
                                 <text class="icon iconfont icon-jia"></text>
                              </view>
                           </view>
                        </template>
                     </view>
                        </view>
                     </view>
                  </template>
@@ -51,11 +82,14 @@
                           {{ product.product_name }}</view>
                        <view class="price d-s-c">
                           <view v-if="itemData.style.show.productPrice == 1" class="theme-price">
                              <text class="f22">¥</text>
                              <text class="">{{ product.product_price }}</text>
                              <text v-if="product.is_price_negotiable">价格面议</text>
                              <template v-else>
                                 <text class="f22">¥</text>
                                 <text class="">{{ product.product_price }}</text>
                              </template>
                           </view>
                           <view class="ml20 gray9 text-d-line"
                              v-if="itemData.style.show.linePrice == 1 && product.line_price > 0"><text
                              v-if="itemData.style.show.linePrice == 1 && product.line_price > 0 && !product.is_price_negotiable"><text
                                 class="f22">¥</text>{{ product.line_price }}</view>
                        </view>
                     </view>
@@ -77,11 +111,14 @@
                              {{ product.product_name }}</view>
                           <view class="price d-s-c f12">
                              <view v-if="itemData.style.show.productPrice == 1" class="theme-price">
                                 <text>¥</text>
                                 <text class="">{{ product.product_price }}</text>
                                 <text v-if="product.is_price_negotiable">价格面议</text>
                                 <template v-else>
                                    <text>¥</text>
                                    <text class="">{{ product.product_price }}</text>
                                 </template>
                              </view>
                              <view class="ml10 gray9 text-d-line"
                                 v-if="itemData.style.show.linePrice == 1 && product.line_price > 0">
                                 v-if="itemData.style.show.linePrice == 1 && product.line_price > 0 && !product.is_price_negotiable">
                                 ¥{{ product.line_price }}</view>
                           </view>
                        </view>
@@ -109,6 +146,39 @@
         gotoDetail(e) {
            let url = '/pages/product/detail/detail?product_id=' + e;
            this.gotoPage(url);
         },
         /*处理购物车操作 - 价格面议商品特殊处理*/
         handleCartItemAction(item, index) {
            // 如果是价格面议商品,提示联系客服
            if (item.is_price_negotiable) {
               uni.showModal({
                  title: '温馨提示',
                  content: '该商品为价格面议商品,请联系客服咨询具体价格',
                  confirmText: '联系客服',
                  cancelText: '取消',
                  success: (res) => {
                     if (res.confirm) {
                        // 跳转到商品详情页联系客服
                        this.gotoDetail(item.product_id);
                     }
                  }
               });
            } else {
               // 非价格面议商品,正常添加到购物车
               this.addToCart(item, index);
            }
         },
         /*添加到购物车*/
         addToCart(item, index) {
            // 这里实现具体的添加购物车逻辑
            console.log('添加到购物车:', item.product_id);
            // 示例实现
            uni.showToast({
               title: '已添加到购物车',
               icon: 'success'
            });
         }
      }
   };
@@ -285,4 +355,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>