chore：商品分类样式2信这个购物车功能
This commit is contained in:
@@ -197,6 +197,10 @@ const localDevConfig = ({
|
||||
uniacid: 351,
|
||||
domain: 'https://5g.aigc-quickapp.com/',
|
||||
},
|
||||
'2709': { // 中央厨房
|
||||
uniacid: 2709,
|
||||
domain: 'https://xcx.aigc-quickapp.com/',
|
||||
},
|
||||
// })['5g-237']; // 商品分类，没有立即咨询文字
|
||||
// })['5g-97']; // 大宗商品贸易，支持自定义字体大小、颜色
|
||||
// })['5g-50']; // 燃气安全产品机器人，购物车无反应
|
||||
@@ -212,7 +216,7 @@ const localDevConfig = ({
|
||||
// })['local-11']; // 选择要使用的环境配置
|
||||
// })['2811']; // 本地
|
||||
|
||||
})['2811']; // 本地
|
||||
})['2709']; // 本地
|
||||
// })['local-2']; // 本地
|
||||
// })['local-11']; // 本地
|
||||
// })['1-test']; // test
|
||||
|
||||
@@ -316,8 +316,8 @@
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 模板4: 右侧+按钮/择规格按钮(图片样式) -->
|
||||
<view class="right-wrap" v-if="value.template == 4">
|
||||
<!-- 风格2/模板4: 右侧+按钮/择规格按钮 -->
|
||||
<view class="right-wrap" v-if="(value.template == 2 || value.template == 4) && showAddCart">
|
||||
<block v-if="item.is_virtual">
|
||||
<view class="color-base-bg select-sku" @tap.stop="toDetail(item)">{{ $lang('components-diy.diy-category-item.buyNow') }}</view>
|
||||
</block>
|
||||
@@ -441,7 +441,7 @@
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="right-wrap" v-if="value.template == 2 || value.template == 4">
|
||||
<view class="right-wrap" v-if="(value.template == 2 || value.template == 4) && showAddCart">
|
||||
<block v-if="item.is_virtual">
|
||||
<view class="color-base-bg select-sku" @tap.stop="toDetail(item)">{{ $lang('components-diy.diy-category-item.buyNow') }}</view>
|
||||
</block>
|
||||
@@ -559,6 +559,13 @@ export default {
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
// 后台新增开关：加购按钮；未下发时兼容旧字段 quickBuy
|
||||
showAddCart() {
|
||||
const v = this.value;
|
||||
if (v.showAddCart !== undefined) return v.showAddCart;
|
||||
if (v.show_add_cart !== undefined) return v.show_add_cart;
|
||||
return v.quickBuy;
|
||||
},
|
||||
/**
|
||||
* 当前分类层级 (参考 template 2 的 goodsLevel 模式)
|
||||
* 优先级: 数据层级 > 后台配置 > 兜底
|
||||
@@ -1651,8 +1658,8 @@ export default {
|
||||
}
|
||||
}
|
||||
|
||||
/* 单列布局 */
|
||||
&.single-column {
|
||||
/* 单列布局（不包含模板2/4，模板2/4使用模板4卡片样式） */
|
||||
&.single-column:not([data-template='2']):not([data-template='4']) {
|
||||
flex-direction: column;
|
||||
|
||||
.goods-item {
|
||||
@@ -2033,7 +2040,8 @@ export default {
|
||||
}
|
||||
}
|
||||
|
||||
// ===================== 模板4 商品分类样式(单列卡片式: 左图右文 + 右侧+按钮) =====================
|
||||
// ===================== 模板2/4 商品分类样式(单列卡片式: 左图右文 + 右侧+按钮) =====================
|
||||
&[data-template='2'],
|
||||
&[data-template='4'] {
|
||||
// 整体灰色背景让卡片有层次
|
||||
background: #f4f6fa;
|
||||
|
||||
@@ -191,9 +191,14 @@
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 模板4: 底部购物车栏 -->
|
||||
<!-- 风格2/模板4: 底部购物车栏
|
||||
不用 position:fixed: 小程序/H5/鸿蒙下 fixed 受页面避让与父级 transform 影响,
|
||||
会"跟在内容后面"只有滚到底才看得见。
|
||||
.category-page-wrap 是固定高度(calc(100vh - tabBarHeight))的纵向 flex 容器,
|
||||
content-box 为 flex:1 height:0, 把结算栏作为普通子项排在末尾,
|
||||
无论右侧商品列表怎么滚动, 结算栏始终固定显示在底部 -->
|
||||
<view class="cart-box cart-box-template-4"
|
||||
v-if="value.template == 4 && value.quickBuy && storeToken && categoryTree && categoryTree.length">
|
||||
v-if="(value.template == 2 || value.template == 4) && showCartSettlement && storeToken && categoryTree && categoryTree.length">
|
||||
<view class="left-wrap">
|
||||
<view class="cart-icon" ref="cartIcon" :animation="cartAnimation"
|
||||
@tap.stop="$util.redirectTo('/pages_goods/cart')">
|
||||
@@ -317,6 +322,19 @@ export default {
|
||||
let money = parseFloat(this.cartMoney).toFixed(2);
|
||||
return money.split('.');
|
||||
},
|
||||
// 后台新增开关：显示购物车及结算按钮 / 加购按钮；未下发时兼容旧字段 quickBuy
|
||||
showCartSettlement() {
|
||||
const v = this.value;
|
||||
if (v.showCartSettlement !== undefined) return v.showCartSettlement;
|
||||
if (v.show_cart_settlement !== undefined) return v.show_cart_settlement;
|
||||
return v.quickBuy;
|
||||
},
|
||||
showAddCart() {
|
||||
const v = this.value;
|
||||
if (v.showAddCart !== undefined) return v.showAddCart;
|
||||
if (v.show_add_cart !== undefined) return v.show_add_cart;
|
||||
return v.quickBuy;
|
||||
},
|
||||
// 转换字符数值为真正的数值
|
||||
navbarHeight() {
|
||||
// #ifdef APP-PLUS || H5
|
||||
@@ -652,7 +670,8 @@ export default {
|
||||
* @param {Object} top
|
||||
*/
|
||||
addCartPoint(left, top) {
|
||||
if (this.value.template != 2 && !this.value.quickBuy) return;
|
||||
if (this.value.template != 2 && this.value.template != 4) return;
|
||||
if (!this.showCartSettlement) return;
|
||||
|
||||
let key = new Date().getTime();
|
||||
this.$set(this.carIconList, key, {
|
||||
@@ -1107,7 +1126,8 @@ export default {
|
||||
// 模板4 底部购物车栏(图片样式)
|
||||
.cart-box-template-4 {
|
||||
height: 110rpx;
|
||||
padding: 0 30rpx;
|
||||
width: 100%;
|
||||
flex-shrink: 0;
|
||||
background: #fff;
|
||||
border-top: 1rpx solid #f0f0f0;
|
||||
position: relative;
|
||||
@@ -1211,11 +1231,6 @@ export default {
|
||||
}
|
||||
}
|
||||
|
||||
.cart-box {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
::v-deep .template-four {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
@@ -1422,6 +1437,111 @@ export default {
|
||||
}
|
||||
}
|
||||
|
||||
// 风格2 复用模板4 的底部购物车栏样式
|
||||
.category-template-2 {
|
||||
// 模板4 底部购物车栏(图片样式)
|
||||
.cart-box-template-4 {
|
||||
height: 110rpx;
|
||||
width: 100%;
|
||||
flex-shrink: 0;
|
||||
background: #fff;
|
||||
border-top: 1rpx solid #f0f0f0;
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
box-shadow: 0 -4rpx 12rpx rgba(0, 0, 0, 0.04);
|
||||
|
||||
.left-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.cart-icon {
|
||||
width: 90rpx;
|
||||
height: 90rpx;
|
||||
position: relative;
|
||||
margin-top: -10rpx;
|
||||
|
||||
.iconfont {
|
||||
color: var(--btn-text-color, #fff);
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
background-color: $base-color;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 40rpx;
|
||||
box-shadow: 0 4rpx 12rpx rgba(255, 107, 53, 0.35);
|
||||
}
|
||||
|
||||
.num {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
transform: translate(20%, 0);
|
||||
display: inline-block;
|
||||
box-sizing: border-box;
|
||||
color: #fff;
|
||||
line-height: 1.2;
|
||||
text-align: center;
|
||||
font-size: 24rpx;
|
||||
padding: 0 8rpx;
|
||||
min-width: 32rpx;
|
||||
border-radius: 18rpx;
|
||||
background-color: var(--price-color, #FF6B35);
|
||||
border: 2rpx solid #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.price {
|
||||
margin-left: 16rpx;
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
line-height: 1;
|
||||
|
||||
.title {
|
||||
color: #333;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.unit,
|
||||
.money {
|
||||
color: var(--price-color, #FF6B35);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.unit {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.money {
|
||||
font-size: 36rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.right-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.settlement-btn {
|
||||
margin: 0;
|
||||
width: 220rpx;
|
||||
font-weight: bold;
|
||||
border-radius: 50rpx;
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
font-size: 30rpx;
|
||||
background: $base-color;
|
||||
color: var(--btn-text-color, #fff);
|
||||
|
||||
&::after {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content-wrap .categoty-goods-wrap .goods-list {
|
||||
margin-top: 30rpx;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user