| | |
| | | <!-- 商品价格 --> |
| | | <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> |
| | |
| | | {{ 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> |
| | |
| | | {{ 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> |
| | |
| | | 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' |
| | | }); |
| | | } |
| | | } |
| | | }; |
| | |
| | | .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> |