|
|
@@ -1,30 +1,33 @@ |
|
|
|
<template> |
|
|
|
<div class="page"> |
|
|
|
<div class="commoditylIst" ref="scrollContainerRef" @wheel="handleWheel"> |
|
|
|
<div class="item" v-for="item in packageList" :key="item.typeDesc"> |
|
|
|
<div class="item" v-for="item in packageList" :key="item.typeDesc" :class="item.sellPriceRmb <= 0 ? 'dashed' : ''"> |
|
|
|
<div @click="clickPayDialog(item)"> |
|
|
|
<div class="line" :style="`background-color:${item.color} ;`"></div> |
|
|
|
<div class="line" :style="`background-color:${ item.sellPriceRmb > 0 ? item.color : '#eee'} ;`"></div> |
|
|
|
<div class="info"> |
|
|
|
<!-- 商品信息 --> |
|
|
|
<div class="content"> |
|
|
|
<div class="titleBox"> |
|
|
|
<!-- <p class="iconText" v-if="item.sellPriceRmb <= 0" >会员权益</p> --> |
|
|
|
<div class="title"> |
|
|
|
{{ item.title }} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<template v-if="item.sellPriceRmb > 0"> |
|
|
|
<div class="money"> |
|
|
|
<span class="price">{{ |
|
|
|
item.sellPriceRmb |
|
|
|
item.sellPriceRmb / 100 |
|
|
|
}} ¥</span |
|
|
|
>/ <span style="text-decoration:line-through;"> {{ $t("store.priceRmb") }}{{ item.priceRmb }}</span> |
|
|
|
>/ <span style="text-decoration:line-through;"> {{ $t("store.priceRmb") }}{{ item.priceRmb / 100 }}</span> |
|
|
|
</div> |
|
|
|
<div class="time"> |
|
|
|
{{ $t("store.glod") }}<span>{{ item.glod }}</span |
|
|
|
> |
|
|
|
</div> |
|
|
|
<div class="button" @click="createOrder(item)" :style="`background-color: #f3af00 ;`"> |
|
|
|
<div v-if="item.sellPriceRmb > 0" class="button" @click="createOrder(item)" :style="`background-color: #f3af00 ;`"> |
|
|
|
{{ $t("store.createOrder") }} |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
</div> |
|
|
|
<!-- 商品权益 --> |
|
|
|
<div class="authority"> |
|
|
@@ -439,6 +442,9 @@ function findStatus() { |
|
|
|
overflow: hidden; |
|
|
|
transition: all 0.2s; |
|
|
|
cursor: pointer; |
|
|
|
&.dashed { |
|
|
|
border: 1px dashed #c0bfbd; |
|
|
|
} |
|
|
|
&:hover { |
|
|
|
.mask { |
|
|
|
display: block; |
|
|
@@ -472,10 +478,21 @@ function findStatus() { |
|
|
|
padding: 20px; |
|
|
|
border-bottom: 1px solid #c0bfbd; |
|
|
|
cursor: pointer; |
|
|
|
position: relative; |
|
|
|
.titleBox { |
|
|
|
display: flex; |
|
|
|
justify-content: space-between; |
|
|
|
} |
|
|
|
.iconText{ |
|
|
|
font-size: 14px; |
|
|
|
position: absolute; |
|
|
|
left:-20px; |
|
|
|
top:0; |
|
|
|
transform: rotate(-45deg); |
|
|
|
background: rgb(243, 175, 0); |
|
|
|
padding: 3px 10px; |
|
|
|
color: #fff; |
|
|
|
} |
|
|
|
.title { |
|
|
|
font-size: 30px; |
|
|
|
font-weight: 700; |
|
|
|