czg_team/cashier-web
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

代客下单新增限时折扣角标

Browse Source
This commit is contained in:
gyq
2025-11-12 10:09:22 +08:00
parent 636fa4e033
commit 2d8abc2fea
17 changed files with 222 additions and 163 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
src/views/tool/Instead/components/goods-item.vue
View File

@@ -3,15 +3,18 @@
<el-image v-if="item.coverImg" class="goods-image"
:src="item.coverImg + '?x-oss-process=image/resize,m_lfit,w_100,h_100'" fit="cover"></el-image>
<div class="info" @click="itemClick">
<div class="name u-flex u-flex-wrap">
<span class="weight" v-if="item.type == 'weight'">称重</span>
<span class="u-line-3">{{ item.name }}</span>
<div class="dot" v-if="item.isLimitDiscount">限时折扣</div>
<div class="btm">
<div class="name u-flex u-flex-wrap">
<span class="weight" v-if="item.type == 'weight'">称重</span>
<span class="u-line-3">{{ item.name }}</span>
</div>
<div class="limit_wrap" v-if="item.isLimitDiscount">
<span class="o_price">￥{{ item.lowPrice }}</span>
<span class="sale_price">￥{{ item.limitDiscountPrice }}</span>
</div>
<div v-else>￥{{ item.lowPrice }}</div>
</div>
<div class="" v-if="item.isLimitDiscount">
<span class="o_price">￥{{ item.lowPrice }}</span>
<span>￥{{ item.limitDiscountPrice }}</span>
</div>
<div v-else>￥{{ item.lowPrice }}</div>
</div>
<div class="status" v-if="
item.isSoldStock ||
@@ -97,20 +100,42 @@ function isProductAvailable(sellDaysStr, startTimeStr, endTimeStr) {
display: flex;
flex-direction: column;
justify-content: space-between;
background-color: rgba(46, 46, 46, 0.38);
// background-color: rgba(46, 46, 46, 0.3);
z-index: 1;
.btm {
width: 100%;
padding: 20px 6px 0;
position: absolute;
bottom: 0;
left: 0;
z-index: 2;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.6));
}
.dot {
padding: 2px 4px 2px 6px;
border-radius: 0 0 0 8px;
font-size: 10px;
background-color: var(--el-color-danger);
display: flex;
justify-content: center;
position: absolute;
top: 0;
right: -0;
}
}
.status {
position: absolute;
box-sizing: border-box;
padding: 8px;
z-index: 2;
z-index: 99;
inset: 0;
display: flex;
justify-content: center;
align-items: center;
background-color: rgba($color: #000000, $alpha: 0.5);
background-color: rgba($color: #000000, $alpha: 0.6);
}
}
@@ -129,9 +154,20 @@ function isProductAvailable(sellDaysStr, startTimeStr, endTimeStr) {
margin-right: 2px;
}
.o_price {
font-size: 10px;
text-decoration: line-through;
opacity: .8;
.limit_wrap {
display: flex;
.o_price {
font-size: 12px;
text-decoration: line-through;
opacity: .8;
margin-right: 4px;
position: relative;
top: 2px;
}
.sale_price {
font-size: 14px;
}
}
</style>