fix:阶梯拼团弹框样式调整

pull/8/head
kele 2023-02-03 18:46:50 +08:00
parent 8a0e49fde2
commit 68ee5d5ba6
1 changed files with 63 additions and 48 deletions

View File

@ -12,11 +12,8 @@
</image> </image>
</view> </view>
<view class="header-right ss-flex-col ss-row-between ss-flex-1"> <view class="header-right ss-flex-col ss-row-between ss-flex-1">
<view class="goods-title ss-line-2">{{ goodsInfo.title }}</view> <view class="goods-title ss-line-2">
<view class="header-right-bottom ss-flex ss-col-center ss-row-between"> <view class="tig ss-flex ss-col-center">
<view class="price-text"> {{ goodsPrice }}</view>
<!-- TODO @jj 拼团价放在标题左边 -->
<!-- <view class="tig ss-flex ss-col-center">
<view class="tig-icon ss-flex ss-col-center ss-row-center"> <view class="tig-icon ss-flex ss-col-center ss-row-center">
<view class="groupon-tag"> <view class="groupon-tag">
<image :src="sheep.$url.static('/static/img/shop/goods/groupon-tag-white.png')"> <image :src="sheep.$url.static('/static/img/shop/goods/groupon-tag-white.png')">
@ -24,9 +21,16 @@
</view> </view>
</view> </view>
<view class="tig-title">拼团价</view> <view class="tig-title">拼团价</view>
</view> --> </view>
<view class="info-title">
{{ goodsInfo.title }}
</view>
</view>
<view class="header-right-bottom ss-flex ss-col-center ss-row-between">
<view class="price-text"> {{ goodsPrice }}</view>
<view class="stock-text ss-m-l-20"> <view class="stock-text ss-m-l-20">
库存{{ state.selectedSkuPrice.stock || goodsInfo.stock }}000 库存{{ state.selectedSkuPrice.stock || goodsInfo.stock }}
</view> </view>
</view> </view>
</view> </view>
@ -92,7 +96,9 @@
<view class="buy-box ss-flex ss-col-center ss-flex ss-col-center ss-row-center"> <view class="buy-box ss-flex ss-col-center ss-flex ss-col-center ss-row-center">
<view class="ss-flex"> <view class="ss-flex">
<button class="ss-reset-button origin-price-btn ss-flex-col"> <button class="ss-reset-button origin-price-btn ss-flex-col">
<view class="btn-title">{{ state.grouponNum === 0 ? '阶梯团' : state.grouponNum + '人团' }}</view> <view class="btn-title">{{
state.grouponNum === 0 ? '阶梯团' : state.grouponNum + '人团'
}}</view>
</button> </button>
<button class="ss-reset-button btn-tox ss-flex-col" @tap="onBuy"> <button class="ss-reset-button btn-tox ss-flex-col" @tap="onBuy">
<view class="btn-price"> <view class="btn-price">
@ -154,7 +160,6 @@
currentSkuArray: [], currentSkuArray: [],
grouponNum: props.grouponNum, grouponNum: props.grouponNum,
}); });
// //
if (!props.goodsInfo.is_sku) { if (!props.goodsInfo.is_sku) {
state.selectedSkuPrice = props.goodsInfo.sku_prices[0]; state.selectedSkuPrice = props.goodsInfo.sku_prices[0];
@ -179,10 +184,12 @@
// //
const goodsPrice = computed(() => { const goodsPrice = computed(() => {
if (isEmpty(state.selectedSkuPrice)) { if (isEmpty(state.selectedSkuPrice)) {
console.log(222);
return formatPrice(props.goodsInfo.price); return formatPrice(props.goodsInfo.price);
} }
if (state.grouponNum === 0 && activityType === 'groupon_ladder') { if (state.grouponNum === 0 && activityType === 'groupon_ladder') {
return formatPrice(props.goodsInfo.price) console.log(1111);
return formatPrice(props.goodsInfo.price);
} }
if (activityType === 'groupon') { if (activityType === 'groupon') {
@ -201,7 +208,9 @@
return formatPrice(props.goodsInfo.price); return formatPrice(props.goodsInfo.price);
} }
if(state.grouponNum === 0 && activityType === 'groupon_ladder') return; if (state.grouponNum === 0 && activityType === 'groupon_ladder') {
return formatPrice(props.goodsInfo.price);
}
if (activityType === 'groupon') { if (activityType === 'groupon') {
return state.selectedSkuPrice.leader_price; return state.selectedSkuPrice.leader_price;
@ -480,6 +489,43 @@
font-size: 28rpx; font-size: 28rpx;
font-weight: 500; font-weight: 500;
line-height: 42rpx; line-height: 42rpx;
position: relative;
.tig {
border: 2rpx solid #ff6000;
border-radius: 4rpx;
width: 126rpx;
height: 38rpx;
position: absolute;
left: 0;
top: 0;
.tig-icon {
width: 40rpx;
height: 40rpx;
background: #ff6000;
margin-left: -2rpx;
border-radius: 4rpx 0 0 4rpx;
.groupon-tag {
width: 32rpx;
height: 32rpx;
}
}
.tig-title {
font-size: 24rpx;
font-weight: 500;
line-height: normal;
color: #ff6000;
width: 86rpx;
display: flex;
justify-content: center;
align-items: center;
}
}
.info-title {
text-indent: 132rpx;
}
} }
.price-text { .price-text {
@ -542,37 +588,6 @@
} }
} }
.tig {
border: 2rpx solid #ff6000;
border-radius: 4rpx;
width: 126rpx;
height: 38rpx;
.tig-icon {
width: 40rpx;
height: 40rpx;
background: #ff6000;
margin-left: -2rpx;
border-radius: 4rpx 0 0 4rpx;
.groupon-tag {
width: 32rpx;
height: 32rpx;
}
}
.tig-title {
font-size: 24rpx;
font-weight: 500;
line-height: normal;
color: #ff6000;
width: 86rpx;
display: flex;
justify-content: center;
align-items: center;
}
}
image { image {
width: 100%; width: 100%;
height: 100%; height: 100%;