Merge branch 'bd-dev' of gitee.com:cabbage_qd/web-base-h5 into bd-test
This commit is contained in:
woody
commit
bfb31e493e
|
|
@ -91,7 +91,13 @@ export default {
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
label: '秒杀专区',
|
||||||
|
value: 14,
|
||||||
|
name: 'live',
|
||||||
|
isShow: true,
|
||||||
|
children: [],
|
||||||
|
},
|
||||||
{
|
{
|
||||||
label: '复购专区',
|
label: '复购专区',
|
||||||
value: 3,
|
value: 3,
|
||||||
|
|
|
||||||
|
|
@ -78,129 +78,133 @@
|
||||||
class="goodList_i"
|
class="goodList_i"
|
||||||
@tap="goDetails(item)"
|
@tap="goDetails(item)"
|
||||||
>
|
>
|
||||||
<view
|
<view style="display: flex; flex: 1">
|
||||||
class="fly"
|
|
||||||
v-show="item.preSaleStatus == 3 || item.isSale == 1"
|
|
||||||
></view>
|
|
||||||
<view class="image-container">
|
|
||||||
<img :src="item.cover || item.cover1" class="cover" alt="" />
|
|
||||||
<!-- 三角形角标 -->
|
|
||||||
<view class="triangle-badge" v-if="item.warnMessage">
|
|
||||||
<view
|
|
||||||
class="triangle-badge-text"
|
|
||||||
:class="{
|
|
||||||
'text-2': item.warnMessage.length === 2,
|
|
||||||
'text-3': item.warnMessage.length === 3,
|
|
||||||
'text-4': item.warnMessage.length === 4,
|
|
||||||
}"
|
|
||||||
>
|
|
||||||
{{ item.warnMessage }}
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<view class="goodList_ir">
|
|
||||||
<view>
|
|
||||||
<span class="qzbq" v-if="item.prefixLabelTarget != undefined">{{
|
|
||||||
item.prefixLabelTarget.label
|
|
||||||
}}</span>
|
|
||||||
<span style="font-weight: 500">{{ item.waresName }}</span>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<!-- 库存进度条 -->
|
|
||||||
<view
|
<view
|
||||||
class="inventory-progress-container"
|
class="fly"
|
||||||
v-if="item.useRatio && item.inventory !== undefined"
|
v-show="item.preSaleStatus == 3 || item.isSale == 1"
|
||||||
>
|
></view>
|
||||||
<view class="inventory-header">
|
<view class="image-container">
|
||||||
<view class="inventory-label">
|
<img :src="item.cover || item.cover1" class="cover" alt="" />
|
||||||
<text class="inventory-status">库存剩余</text>
|
<!-- 三角形角标 -->
|
||||||
</view>
|
<view class="triangle-badge" v-if="item.warnMessage">
|
||||||
<view
|
<view
|
||||||
class="inventory-percentage"
|
class="triangle-badge-text"
|
||||||
:class="getPercentageClass(item.inventory)"
|
:class="{
|
||||||
>
|
'text-2': item.warnMessage.length === 2,
|
||||||
{{ getInventoryPercentage(item.inventory) }}%
|
'text-3': item.warnMessage.length === 3,
|
||||||
</view>
|
'text-4': item.warnMessage.length === 4,
|
||||||
</view>
|
|
||||||
<view class="inventory-progress-bar">
|
|
||||||
<view
|
|
||||||
class="inventory-progress-fill"
|
|
||||||
:style="{
|
|
||||||
width: getInventoryPercentage(item.inventory) + '%',
|
|
||||||
}"
|
}"
|
||||||
:class="getProgressClass(item.inventory)"
|
|
||||||
>
|
>
|
||||||
<!-- 添加流动光效 -->
|
{{ item.warnMessage }}
|
||||||
<view
|
|
||||||
class="progress-shine"
|
|
||||||
v-if="getInventoryPercentage(item.inventory) <= 30"
|
|
||||||
></view>
|
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<view
|
<view class="goodList_ir">
|
||||||
class="pv"
|
<view>
|
||||||
v-if="
|
<view>
|
||||||
specialArea != 18 &&
|
<span
|
||||||
specialArea != 13 &&
|
class="qzbq"
|
||||||
specialArea != 31 &&
|
v-if="item.prefixLabelTarget != undefined"
|
||||||
specialArea != 10
|
>{{ item.prefixLabelTarget.label }}</span
|
||||||
"
|
>
|
||||||
>
|
<span style="font-weight: 500">{{ item.waresName }}</span>
|
||||||
业绩:{{ item.waresAchieve | numberToCurrency }}
|
</view>
|
||||||
</view>
|
|
||||||
<view class="pv" v-if="specialArea == 10">
|
|
||||||
积分可抵扣:{{ item.deductMoney | numberToCurrency }}
|
|
||||||
</view>
|
|
||||||
<view
|
|
||||||
class="pv"
|
|
||||||
v-if="specialArea == 31 && userInfo.isMakerSpace == 0"
|
|
||||||
>
|
|
||||||
业绩:{{ item.waresAchieve | numberToCurrency }}
|
|
||||||
</view>
|
|
||||||
<view class="pv" v-if="specialArea == 13">
|
|
||||||
BV:{{ item.assAchieve | numberToCurrency }}
|
|
||||||
</view>
|
|
||||||
<!-- <view class="pv"> 销量:{{ item.sales | seles }} </view> -->
|
|
||||||
<view class="goodList_ib">
|
|
||||||
<view v-if="specialArea == 31 && userInfo.isMakerSpace == 1">
|
|
||||||
{{ item.vipPrice | numberToCurrency }}
|
|
||||||
</view>
|
</view>
|
||||||
<view
|
<view>
|
||||||
v-if="
|
<view
|
||||||
(specialArea == 31 && userInfo.isMakerSpace == 0) ||
|
class="inventory-progress-container"
|
||||||
specialArea != 31
|
v-if="item.useRatio && item.inventory !== undefined"
|
||||||
"
|
>
|
||||||
>
|
<view class="inventory-progress-bar">
|
||||||
{{ item.waresPrice | numberToCurrency }}
|
<view
|
||||||
|
class="inventory-progress-fill"
|
||||||
|
:style="{
|
||||||
|
width: getInventoryPercentage(item.inventory) + '%',
|
||||||
|
}"
|
||||||
|
:class="getProgressClass(item.inventory)"
|
||||||
|
>
|
||||||
|
<!-- 添加流动光效 -->
|
||||||
|
<view
|
||||||
|
class="progress-shine"
|
||||||
|
v-if="getInventoryPercentage(item.inventory) <= 30"
|
||||||
|
></view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view
|
||||||
|
class="inventory-percentage"
|
||||||
|
:class="getPercentageClass(item.inventory)"
|
||||||
|
>
|
||||||
|
剩余{{ getInventoryPercentage(item.inventory) }}%
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="goodList_ib">
|
||||||
|
<view>
|
||||||
|
<view
|
||||||
|
class="pv"
|
||||||
|
v-if="
|
||||||
|
specialArea != 18 &&
|
||||||
|
specialArea != 13 &&
|
||||||
|
specialArea != 31 &&
|
||||||
|
specialArea != 10
|
||||||
|
"
|
||||||
|
>
|
||||||
|
业绩:{{ item.waresAchieve | numberToCurrency }}
|
||||||
|
</view>
|
||||||
|
<view class="pv" v-if="specialArea == 10">
|
||||||
|
积分可抵扣:{{ item.deductMoney | numberToCurrency }}
|
||||||
|
</view>
|
||||||
|
<view
|
||||||
|
class="pv"
|
||||||
|
v-if="specialArea == 31 && userInfo.isMakerSpace == 0"
|
||||||
|
>
|
||||||
|
业绩:{{ item.waresAchieve | numberToCurrency }}
|
||||||
|
</view>
|
||||||
|
<view class="pv" v-if="specialArea == 13">
|
||||||
|
BV:{{ item.assAchieve | numberToCurrency }}
|
||||||
|
</view>
|
||||||
|
<view
|
||||||
|
v-if="specialArea == 31 && userInfo.isMakerSpace == 1"
|
||||||
|
>
|
||||||
|
{{ item.vipPrice | numberToCurrency }}
|
||||||
|
</view>
|
||||||
|
<view
|
||||||
|
v-if="
|
||||||
|
(specialArea == 31 && userInfo.isMakerSpace == 0) ||
|
||||||
|
specialArea != 31
|
||||||
|
"
|
||||||
|
>
|
||||||
|
{{ item.waresPrice | numberToCurrency }}
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<img
|
||||||
|
@click.stop="addCar(item)"
|
||||||
|
v-show="
|
||||||
|
item.preSaleStatus != 3 &&
|
||||||
|
item.isSale != 1 &&
|
||||||
|
specialArea != 31
|
||||||
|
"
|
||||||
|
src="@/static/images/cart.png"
|
||||||
|
alt=""
|
||||||
|
/>
|
||||||
|
<img
|
||||||
|
@click.stop="addCar(item)"
|
||||||
|
v-show="
|
||||||
|
item.preSaleStatus != 3 &&
|
||||||
|
item.isSale != 1 &&
|
||||||
|
specialArea == 31 &&
|
||||||
|
userInfo.isMakerSpace == 0
|
||||||
|
"
|
||||||
|
src="@/static/images/cart.png"
|
||||||
|
alt=""
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<img
|
|
||||||
@click.stop="addCar(item)"
|
|
||||||
v-show="
|
|
||||||
item.preSaleStatus != 3 &&
|
|
||||||
item.isSale != 1 &&
|
|
||||||
specialArea != 31
|
|
||||||
"
|
|
||||||
src="@/static/images/cart.png"
|
|
||||||
alt=""
|
|
||||||
/>
|
|
||||||
<img
|
|
||||||
@click.stop="addCar(item)"
|
|
||||||
v-show="
|
|
||||||
item.preSaleStatus != 3 &&
|
|
||||||
item.isSale != 1 &&
|
|
||||||
specialArea == 31 &&
|
|
||||||
userInfo.isMakerSpace == 0
|
|
||||||
"
|
|
||||||
src="@/static/images/cart.png"
|
|
||||||
alt=""
|
|
||||||
/>
|
|
||||||
</view>
|
</view>
|
||||||
<!-- <view class="pv" v-show="specialArea == 31"> 统一零售价:{{ item.retailPrice| numberToCurrency | isLocal}} </view> -->
|
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<!-- <view class="zhan"></view> -->
|
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
@ -730,22 +734,21 @@ export default {
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
|
|
||||||
.goodList_i {
|
.goodList_i {
|
||||||
display: flex;
|
// display: flex;
|
||||||
border-bottom: 1px solid #eee;
|
border-bottom: 1px solid #eee;
|
||||||
padding: 30rpx 0;
|
padding: 20rpx 0 10rpx;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
.goodList_ir {
|
.goodList_ir {
|
||||||
margin-left: 24rpx;
|
|
||||||
flex: 1;
|
flex: 1;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
font-size: 28rpx;
|
font-size: 30rpx;
|
||||||
font-family: Microsoft YaHei;
|
font-family: Microsoft YaHei;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
color: #333333;
|
color: #333333;
|
||||||
|
margin-left: 24rpx;
|
||||||
.goodList_ib {
|
.goodList_ib {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
@ -880,12 +883,16 @@ export default {
|
||||||
|
|
||||||
/* 库存进度条样式 - 升级版 */
|
/* 库存进度条样式 - 升级版 */
|
||||||
.inventory-progress-container {
|
.inventory-progress-container {
|
||||||
margin-top: 10rpx;
|
// margin-bottom: 10rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
width: 100%;
|
||||||
.inventory-header {
|
.inventory-header {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
margin-bottom: 12rpx;
|
margin-right: 10rpx;
|
||||||
|
// margin-bottom: 12rpx;
|
||||||
|
|
||||||
.inventory-label {
|
.inventory-label {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
@ -903,37 +910,38 @@ export default {
|
||||||
color: #333;
|
color: #333;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
.inventory-percentage {
|
||||||
|
font-size: 24rpx;
|
||||||
|
font-weight: 700;
|
||||||
|
font-family:
|
||||||
|
DIN Alternate,
|
||||||
|
Arial,
|
||||||
|
sans-serif;
|
||||||
|
|
||||||
.inventory-percentage {
|
&.percentage-critical {
|
||||||
font-size: 24rpx;
|
color: #ff3742;
|
||||||
font-weight: 700;
|
animation: percentageBlink 1s ease-in-out infinite;
|
||||||
font-family:
|
text-shadow: 0 0 10rpx rgba(255, 55, 66, 0.3);
|
||||||
DIN Alternate,
|
}
|
||||||
Arial,
|
|
||||||
sans-serif;
|
|
||||||
|
|
||||||
&.percentage-critical {
|
&.percentage-urgent {
|
||||||
color: #ff3742;
|
color: #ff5252;
|
||||||
animation: percentageBlink 1s ease-in-out infinite;
|
animation: percentageGlow 2s ease-in-out infinite;
|
||||||
text-shadow: 0 0 10rpx rgba(255, 55, 66, 0.3);
|
}
|
||||||
}
|
|
||||||
|
|
||||||
&.percentage-urgent {
|
&.percentage-normal {
|
||||||
color: #ff5252;
|
color: #005bac;
|
||||||
animation: percentageGlow 2s ease-in-out infinite;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.percentage-normal {
|
|
||||||
color: #005bac;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.inventory-progress-bar {
|
.inventory-progress-bar {
|
||||||
width: 100%;
|
width: 0;
|
||||||
height: 16rpx;
|
flex: 1;
|
||||||
|
height: 18rpx;
|
||||||
|
margin-right: 10rpx;
|
||||||
background: rgba(0, 0, 0, 0.08);
|
background: rgba(0, 0, 0, 0.08);
|
||||||
border-radius: 8rpx;
|
border-radius: 12rpx;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
position: relative;
|
position: relative;
|
||||||
box-shadow: inset 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
|
box-shadow: inset 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue