|
|
|
@ -80,61 +80,52 @@ |
|
|
|
<view class="empty-sub">换个关键词或分类试试，新的校园店铺会出现在这里</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<view class="shop-card community-shop-card" v-for="(item,index) in shopList" :key="index" @tap="goShop(item)"> |
|
|
|
<view @tap.stop="buyingye" v-if="item.status === 0" class="closed-mask"> |
|
|
|
<view class="shop-card community-shop-card" :class="{'shop-card-disabled': item.status != 1}" |
|
|
|
v-for="(item,index) in shopList" :key="index" @tap="goShop(item)"> |
|
|
|
<view @tap.stop="buyingye" v-if="item.status != 1" class="closed-mask"> |
|
|
|
<view class="closed-text">休息中</view> |
|
|
|
</view> |
|
|
|
<view class="rank-tag">销量 {{item.saleCount != null ? item.saleCount : 0}}</view> |
|
|
|
<view class="live-dot"></view> |
|
|
|
<view class="shop-sticker">{{item.uiLiveText}}</view> |
|
|
|
<view class="shop-card-bg"></view> |
|
|
|
<view class="shop-top"> |
|
|
|
<view class="shop-img"> |
|
|
|
<image :src="item.shopIcon" mode="aspectFill"></image> |
|
|
|
<view class="shop-img-badge">校</view> |
|
|
|
<view class="shop-img-badge">拼团更省钱</view> |
|
|
|
</view> |
|
|
|
<view class="shop-info"> |
|
|
|
<view class="shop-name">{{item.shopName}}</view> |
|
|
|
<view class="shop-desc">{{item.subtitle || '校园附近宝藏小店，约上同学一起拼'}}</view> |
|
|
|
<view class="social-row"> |
|
|
|
<view class="avatar-stack"> |
|
|
|
<view class="mini-avatar">同</view> |
|
|
|
<view class="mini-avatar">舍</view> |
|
|
|
<view class="mini-avatar">拼</view> |
|
|
|
<view class="shop-content-center"> |
|
|
|
<view class="shop-rate"> |
|
|
|
<view class="shop-rate-num">{{item.shopScore ? item.shopScore : 5}}</view> |
|
|
|
<uni-rate :disabled="true" size="16" disabledColor="#ffb854" |
|
|
|
:value="item.shopScore ? item.shopScore : 5" /> |
|
|
|
</view> |
|
|
|
<view class="shop-tag"> |
|
|
|
<text>{{item.uiShopType}}</text> |
|
|
|
</view> |
|
|
|
<view class="social-copy">同校{{item.uiBuyerCount}}人在买 · {{item.uiDormText}}</view> |
|
|
|
</view> |
|
|
|
<view class="tag-row"> |
|
|
|
<text>{{item.uiShopType}}</text> |
|
|
|
<text>{{item.uiMissingText}}人就成团</text> |
|
|
|
<text v-if="item.shopAreaTitle">{{item.shopAreaTitle}}</text> |
|
|
|
<view class="shop-content-bottom"> |
|
|
|
<view class="shop-deal"> |
|
|
|
<text>{{item.subtitle || '约上同学一起拼'}}</text> |
|
|
|
</view> |
|
|
|
<view class="shop-sale">已售{{item.saleCount != null ? item.saleCount : 0}}</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<view class="group-status-row"> |
|
|
|
<view class="status-pill success">刚刚有人拼成功</view> |
|
|
|
<view class="status-pill nearby">附近宿舍在拼</view> |
|
|
|
<view class="heat-bar"> |
|
|
|
<view class="heat-progress" :style="item.uiHeatStyle"></view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<view class="product-strip community-products" v-if="item.uiPreviewProducts.length > 0"> |
|
|
|
<view class="product-card" v-for="(product,productIndex) in item.uiPreviewProducts" :key="productIndex" |
|
|
|
@tap.stop="goShop(item)"> |
|
|
|
<image :src="product.productPicture" mode="aspectFill"></image> |
|
|
|
<view class="product-name">{{product.productName}}</view> |
|
|
|
<view class="product-price"> |
|
|
|
<text class="group-label">拼团</text> |
|
|
|
<text class="group-price">¥{{getGroupPrice(product)}}</text> |
|
|
|
<text class="origin-price" v-if="getOriginPrice(product)">¥{{getOriginPrice(product)}}</text> |
|
|
|
<view class="group-buy-price"> |
|
|
|
<text class="group-label">拼</text> |
|
|
|
<text class="group-price">¥{{getGroupPrice(product)}}</text> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<view class="shop-bottom"> |
|
|
|
<view class="bottom-copy">进店看看同学们都在拼什么</view> |
|
|
|
<view class="go-btn">找搭子</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<uni-load-more :status="loadStatus" v-if="shopList.length > 0" /> |
|
|
|
@ -1549,11 +1540,11 @@ |
|
|
|
|
|
|
|
.shop-card { |
|
|
|
margin-bottom: 20rpx; |
|
|
|
padding: 18rpx 16rpx 16rpx; |
|
|
|
border-radius: 32rpx; |
|
|
|
background: rgba(255, 255, 255, 0.98); |
|
|
|
border: 1rpx solid rgba(255, 221, 188, 0.72); |
|
|
|
box-shadow: 0 16rpx 34rpx rgba(178, 102, 48, 0.12); |
|
|
|
padding: 0; |
|
|
|
border-radius: 34rpx; |
|
|
|
background: rgba(255, 255, 255, 0.9); |
|
|
|
border: 1rpx solid rgba(255, 221, 188, 0.76); |
|
|
|
box-shadow: 0 18rpx 44rpx rgba(178, 102, 48, 0.12); |
|
|
|
position: relative; |
|
|
|
z-index: 1; |
|
|
|
overflow: hidden; |
|
|
|
@ -1561,8 +1552,12 @@ |
|
|
|
} |
|
|
|
|
|
|
|
.community-shop-card { |
|
|
|
padding: 20rpx 18rpx 18rpx; |
|
|
|
border-radius: 36rpx; |
|
|
|
padding: 0; |
|
|
|
border-radius: 34rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.shop-card-disabled { |
|
|
|
box-shadow: none; |
|
|
|
} |
|
|
|
|
|
|
|
.shop-card::after { |
|
|
|
@ -1576,6 +1571,16 @@ |
|
|
|
top: -120rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.shop-card-bg { |
|
|
|
position: absolute; |
|
|
|
top: -120rpx; |
|
|
|
right: -90rpx; |
|
|
|
width: 300rpx; |
|
|
|
height: 300rpx; |
|
|
|
border-radius: 50%; |
|
|
|
background: rgba(255, 225, 177, 0.38); |
|
|
|
} |
|
|
|
|
|
|
|
.closed-mask { |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
@ -1583,7 +1588,7 @@ |
|
|
|
top: 0; |
|
|
|
left: 0; |
|
|
|
z-index: 8; |
|
|
|
border-radius: 32rpx; |
|
|
|
border-radius: inherit; |
|
|
|
background: rgba(92, 48, 21, 0.16); |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
@ -1640,20 +1645,21 @@ |
|
|
|
} |
|
|
|
|
|
|
|
.shop-top { |
|
|
|
padding: 22rpx; |
|
|
|
display: flex; |
|
|
|
position: relative; |
|
|
|
z-index: 1; |
|
|
|
z-index: 2; |
|
|
|
} |
|
|
|
|
|
|
|
.shop-img { |
|
|
|
width: 204rpx; |
|
|
|
height: 204rpx; |
|
|
|
width: 188rpx; |
|
|
|
height: 188rpx; |
|
|
|
flex-shrink: 0; |
|
|
|
border-radius: 28rpx; |
|
|
|
border-radius: 32rpx; |
|
|
|
background: #fff1df; |
|
|
|
position: relative; |
|
|
|
overflow: hidden; |
|
|
|
box-shadow: 0 12rpx 26rpx rgba(178, 102, 48, 0.12); |
|
|
|
box-shadow: 0 16rpx 32rpx rgba(178, 102, 48, 0.16); |
|
|
|
} |
|
|
|
|
|
|
|
.shop-img image { |
|
|
|
@ -1662,33 +1668,32 @@ |
|
|
|
} |
|
|
|
|
|
|
|
.shop-img-badge { |
|
|
|
width: 42rpx; |
|
|
|
height: 42rpx; |
|
|
|
border-radius: 50%; |
|
|
|
background: rgba(255, 255, 255, 0.96); |
|
|
|
color: #e96632; |
|
|
|
font-size: 22rpx; |
|
|
|
height: 36rpx; |
|
|
|
padding: 0 12rpx; |
|
|
|
border-radius: 999rpx; |
|
|
|
background: rgba(255, 255, 255, 0.9); |
|
|
|
color: #ff6f2c; |
|
|
|
font-size: 19rpx; |
|
|
|
font-weight: 900; |
|
|
|
line-height: 42rpx; |
|
|
|
line-height: 36rpx; |
|
|
|
text-align: center; |
|
|
|
position: absolute; |
|
|
|
left: 10rpx; |
|
|
|
top: 10rpx; |
|
|
|
left: 9rpx; |
|
|
|
top: 2rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.shop-info { |
|
|
|
flex: 1; |
|
|
|
min-width: 0; |
|
|
|
padding-left: 20rpx; |
|
|
|
padding-left: 22rpx; |
|
|
|
box-sizing: border-box; |
|
|
|
} |
|
|
|
|
|
|
|
.shop-name { |
|
|
|
padding-right: 90rpx; |
|
|
|
color: #2f2016; |
|
|
|
font-size: 34rpx; |
|
|
|
font-size: 31rpx; |
|
|
|
font-weight: 900; |
|
|
|
line-height: 42rpx; |
|
|
|
line-height: 40rpx; |
|
|
|
white-space: nowrap; |
|
|
|
overflow: hidden; |
|
|
|
text-overflow: ellipsis; |
|
|
|
@ -1711,6 +1716,92 @@ |
|
|
|
align-items: center; |
|
|
|
} |
|
|
|
|
|
|
|
.shop-content-center { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
margin: 16rpx 0 14rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.shop-rate { |
|
|
|
height: 34rpx; |
|
|
|
padding-right: 8rpx; |
|
|
|
border-radius: 17rpx; |
|
|
|
background: rgba(255, 224, 178, 0.5); |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
overflow: hidden; |
|
|
|
} |
|
|
|
|
|
|
|
.shop-rate-num { |
|
|
|
width: 42rpx; |
|
|
|
height: 34rpx; |
|
|
|
margin-right: 6rpx; |
|
|
|
border-radius: 17rpx 8rpx 8rpx 17rpx; |
|
|
|
background: linear-gradient(90deg, #ff7444 0%, #ffb854 100%); |
|
|
|
color: #fff; |
|
|
|
font-size: 18rpx; |
|
|
|
font-weight: 900; |
|
|
|
line-height: 34rpx; |
|
|
|
text-align: center; |
|
|
|
} |
|
|
|
|
|
|
|
.shop-tag { |
|
|
|
flex: 1; |
|
|
|
min-width: 0; |
|
|
|
line-height: 40rpx; |
|
|
|
text-align: right; |
|
|
|
} |
|
|
|
|
|
|
|
.shop-tag text { |
|
|
|
display: inline-block; |
|
|
|
max-width: 180rpx; |
|
|
|
padding: 6rpx 12rpx; |
|
|
|
border-radius: 18rpx; |
|
|
|
background: #fff0dc; |
|
|
|
color: #d65f2c; |
|
|
|
font-size: 20rpx; |
|
|
|
font-weight: 900; |
|
|
|
line-height: 26rpx; |
|
|
|
white-space: nowrap; |
|
|
|
overflow: hidden; |
|
|
|
text-overflow: ellipsis; |
|
|
|
box-sizing: border-box; |
|
|
|
} |
|
|
|
|
|
|
|
.shop-content-bottom { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
} |
|
|
|
|
|
|
|
.shop-deal { |
|
|
|
flex: 1; |
|
|
|
min-width: 0; |
|
|
|
} |
|
|
|
|
|
|
|
.shop-deal text { |
|
|
|
display: inline-block; |
|
|
|
max-width: 100%; |
|
|
|
padding: 7rpx 12rpx; |
|
|
|
border-radius: 16rpx; |
|
|
|
background: rgba(255, 235, 211, 0.88); |
|
|
|
color: #8f684c; |
|
|
|
font-size: 20rpx; |
|
|
|
font-weight: 800; |
|
|
|
line-height: 28rpx; |
|
|
|
white-space: nowrap; |
|
|
|
overflow: hidden; |
|
|
|
text-overflow: ellipsis; |
|
|
|
box-sizing: border-box; |
|
|
|
} |
|
|
|
|
|
|
|
.shop-sale { |
|
|
|
margin-left: 12rpx; |
|
|
|
color: #ff5a35; |
|
|
|
font-size: 21rpx; |
|
|
|
font-weight: 900; |
|
|
|
white-space: nowrap; |
|
|
|
} |
|
|
|
|
|
|
|
.social-row { |
|
|
|
margin-top: 12rpx; |
|
|
|
display: flex; |
|
|
|
@ -1844,51 +1935,58 @@ |
|
|
|
} |
|
|
|
|
|
|
|
.product-strip { |
|
|
|
margin-top: 18rpx; |
|
|
|
width: 100%; |
|
|
|
margin-top: 0; |
|
|
|
padding: 0 0 22rpx; |
|
|
|
border-top: 1rpx solid rgba(255, 126, 39, 0.08); |
|
|
|
display: flex; |
|
|
|
gap: 12rpx; |
|
|
|
position: relative; |
|
|
|
z-index: 1; |
|
|
|
overflow: hidden; |
|
|
|
z-index: 2; |
|
|
|
overflow-x: scroll; |
|
|
|
overflow-y: hidden; |
|
|
|
background: rgba(255, 250, 246, 0.58); |
|
|
|
box-sizing: border-box; |
|
|
|
} |
|
|
|
|
|
|
|
.product-card { |
|
|
|
width: 31.6%; |
|
|
|
flex: 0 0 31.6%; |
|
|
|
width: 148rpx; |
|
|
|
flex: 0 0 148rpx; |
|
|
|
min-width: 0; |
|
|
|
padding: 10rpx; |
|
|
|
border-radius: 22rpx; |
|
|
|
background: #fff7ee; |
|
|
|
border: 1rpx solid rgba(255, 226, 198, 0.82); |
|
|
|
margin: 16rpx 0 0 18rpx; |
|
|
|
padding: 0 4rpx; |
|
|
|
border-radius: 0; |
|
|
|
background: transparent; |
|
|
|
border: 0; |
|
|
|
box-sizing: border-box; |
|
|
|
box-shadow: 0 10rpx 22rpx rgba(178, 102, 48, 0.08); |
|
|
|
box-shadow: none; |
|
|
|
} |
|
|
|
|
|
|
|
.community-products .product-card:first-child { |
|
|
|
transform: rotate(-1deg); |
|
|
|
transform: none; |
|
|
|
} |
|
|
|
|
|
|
|
.community-products .product-card:nth-child(2) { |
|
|
|
transform: rotate(1deg); |
|
|
|
transform: none; |
|
|
|
} |
|
|
|
|
|
|
|
.community-products .product-card:nth-child(3) { |
|
|
|
transform: rotate(-0.6deg); |
|
|
|
transform: none; |
|
|
|
} |
|
|
|
|
|
|
|
.product-card image { |
|
|
|
width: 100%; |
|
|
|
height: 150rpx; |
|
|
|
border-radius: 18rpx; |
|
|
|
width: 136rpx; |
|
|
|
height: 136rpx; |
|
|
|
border-radius: 24rpx; |
|
|
|
background: #fff1df; |
|
|
|
box-shadow: 0 10rpx 22rpx rgba(178, 102, 48, 0.12); |
|
|
|
} |
|
|
|
|
|
|
|
.product-name { |
|
|
|
margin-top: 8rpx; |
|
|
|
margin-top: 10rpx; |
|
|
|
color: #3f2618; |
|
|
|
font-size: 21rpx; |
|
|
|
font-weight: 800; |
|
|
|
line-height: 30rpx; |
|
|
|
font-size: 22rpx; |
|
|
|
font-weight: 900; |
|
|
|
line-height: 32rpx; |
|
|
|
white-space: nowrap; |
|
|
|
overflow: hidden; |
|
|
|
text-overflow: ellipsis; |
|
|
|
@ -1896,24 +1994,62 @@ |
|
|
|
|
|
|
|
.product-price { |
|
|
|
margin-top: 4rpx; |
|
|
|
display: flex; |
|
|
|
min-height: 66rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.origin-price { |
|
|
|
display: block; |
|
|
|
color: #9b9588; |
|
|
|
font-size: 21rpx; |
|
|
|
font-weight: 700; |
|
|
|
line-height: 28rpx; |
|
|
|
text-decoration: line-through; |
|
|
|
} |
|
|
|
|
|
|
|
.group-buy-price { |
|
|
|
display: inline-flex; |
|
|
|
align-items: center; |
|
|
|
max-width: 100%; |
|
|
|
min-height: 32rpx; |
|
|
|
margin-top: 6rpx; |
|
|
|
padding: 0 8rpx 0 6rpx; |
|
|
|
border-radius: 18rpx; |
|
|
|
background: linear-gradient(90deg, #fff1df, #ffe6e1); |
|
|
|
color: #ff5a45; |
|
|
|
font-size: 20rpx; |
|
|
|
font-weight: 900; |
|
|
|
line-height: 32rpx; |
|
|
|
box-shadow: 0 6rpx 12rpx rgba(255, 57, 57, 0.09); |
|
|
|
white-space: nowrap; |
|
|
|
box-sizing: border-box; |
|
|
|
} |
|
|
|
|
|
|
|
.group-buy-price-solo { |
|
|
|
margin-top: 0; |
|
|
|
padding: 0; |
|
|
|
background: transparent; |
|
|
|
box-shadow: none; |
|
|
|
} |
|
|
|
|
|
|
|
.group-label { |
|
|
|
margin-right: 6rpx; |
|
|
|
padding: 2rpx 7rpx; |
|
|
|
border-radius: 8rpx; |
|
|
|
background: #fff0dc; |
|
|
|
color: #b4572d; |
|
|
|
width: 26rpx; |
|
|
|
height: 26rpx; |
|
|
|
margin-right: 5rpx; |
|
|
|
border-radius: 50%; |
|
|
|
background: #ff6d49; |
|
|
|
color: #fff; |
|
|
|
font-size: 18rpx; |
|
|
|
font-weight: 900; |
|
|
|
line-height: 26rpx; |
|
|
|
text-align: center; |
|
|
|
flex-shrink: 0; |
|
|
|
} |
|
|
|
|
|
|
|
.group-price { |
|
|
|
color: #f0441f; |
|
|
|
font-size: 23rpx; |
|
|
|
color: #ff1f1f; |
|
|
|
font-size: 24rpx; |
|
|
|
font-weight: 900; |
|
|
|
white-space: nowrap; |
|
|
|
} |
|
|
|
|
|
|
|
.shop-bottom { |
|
|
|
|
wangfukang
4 weeks ago