封装商品展示模块，全局统一管理格式，将旧版商品展示部分优化。
lemon橪
学习很差啦
parent
3aa5b21d49
commit
73e4ba9994
|
|
@ -0,0 +1,10 @@
|
||||||
|
## 商品列表展示
|
||||||
|
|
||||||
|
### OBJECT 参数说明
|
||||||
|
|
||||||
|
| 属性 | 说明 | 类型 | 必填 |
|
||||||
|
| ----------- | ---------------------------------------------------------- | ------- | ---- |
|
||||||
|
| `res` | 显示数据 | Array | 是 |
|
||||||
|
| `type` | 商品展示类型 oneColumns twoColumns ，默认展示一行两列商品 | String | 否 |
|
||||||
|
| `storeName` | 是否展示店铺名称，默认展示 | Boolean | 否 |
|
||||||
|
|
||||||
|
|
@ -0,0 +1,293 @@
|
||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
<!-- 一行两列商品展示 -->
|
||||||
|
<view class="goods-list" v-if="type == 'twoColumns'">
|
||||||
|
<view v-for="(item, index) in res" :key="index" class="goods-item">
|
||||||
|
<view class="image-wrapper" @click="navigateToDetailPage(item)">
|
||||||
|
<u-image :src="item.content.thumbnail" width="100%" height='330rpx' mode="aspectFill">
|
||||||
|
<u-loading slot="loading"></u-loading>
|
||||||
|
</u-image>
|
||||||
|
</view>
|
||||||
|
<view class="goods-detail">
|
||||||
|
<div class="title clamp" @click="navigateToDetailPage(item)">{{ item.content.goodsName }}</div>
|
||||||
|
<view class="price-box" @click="navigateToDetailPage(item)">
|
||||||
|
<div class="price" v-if="item.content.price!=undefined">
|
||||||
|
¥<span>{{ formatPrice(item.content.price )[0] }} </span>.{{
|
||||||
|
formatPrice(item.content.price )[1]
|
||||||
|
}}
|
||||||
|
</div>
|
||||||
|
</view>
|
||||||
|
<div class="promotion" @click="navigateToDetailPage(item)">
|
||||||
|
<div v-if="item.content.salesModel == 'WHOLESALE'">
|
||||||
|
<span>批</span>
|
||||||
|
</div>
|
||||||
|
<div v-for="(promotionItem,promotionIndex) in getPromotion(item)" :key="promotionIndex">
|
||||||
|
<span v-if="promotionItem.indexOf('COUPON') != -1">劵</span>
|
||||||
|
<span v-if="promotionItem.indexOf('FULL_DISCOUNT') != -1">满减</span>
|
||||||
|
<span v-if="promotionItem.indexOf('SECKILL') != -1">秒杀</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="count-config" @click="navigateToDetailPage(item)">
|
||||||
|
<span>已售 {{ item.content.buyCount || "0" }}</span>
|
||||||
|
<span>{{ item.content.commentNum || "0" }}条评论</span>
|
||||||
|
</div>
|
||||||
|
<div class="store-seller-name" v-if="storeName" @click="navigateToStoreDetailPage(item)">
|
||||||
|
<div class="text-hidden" >
|
||||||
|
<u-tag style="margin-right: 10rpx" size="mini" mode="dark" v-if="item.selfOperated"
|
||||||
|
text="自营" type="error" />
|
||||||
|
<span >{{ item.content.storeName || "暂无" }}</span>
|
||||||
|
</div>
|
||||||
|
<span>
|
||||||
|
<u-icon name="arrow-right"></u-icon>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- 一行一列商品展示 -->
|
||||||
|
<div v-if="type == 'oneColumns'">
|
||||||
|
<div v-for="(item, index) in res" :key="index" class="goods-row">
|
||||||
|
<div class="flex goods-col">
|
||||||
|
<div class="goods-img" @click="navigateToDetailPage(item)">
|
||||||
|
<u-image width="230rpx" border-radius='16' height="230rpx" :src="item.content.thumbnail">
|
||||||
|
<u-loading slot="loading"></u-loading>
|
||||||
|
</u-image>
|
||||||
|
</div>
|
||||||
|
<div class="goods-detail">
|
||||||
|
<div class="title clamp3" @click="navigateToDetailPage(item)">{{ item.content.goodsName }}</div>
|
||||||
|
<view class="price-box" @click="navigateToDetailPage(item)">
|
||||||
|
<div class="price" v-if="item.content.price!=undefined">
|
||||||
|
¥<span>{{ formatPrice(item.content.price )[0] }} </span>.{{
|
||||||
|
formatPrice(item.content.price )[1]
|
||||||
|
}}
|
||||||
|
</div>
|
||||||
|
</view>
|
||||||
|
<div class="promotion" @click="navigateToDetailPage(item)">
|
||||||
|
<div v-if="item.content.salesModel == 'WHOLESALE'">
|
||||||
|
<span>批</span>
|
||||||
|
</div>
|
||||||
|
<div v-for="(promotionItem,promotionIndex) in getPromotion(item)" :key="promotionIndex">
|
||||||
|
<span v-if="promotionItem.indexOf('COUPON') != -1">劵</span>
|
||||||
|
<span v-if="promotionItem.indexOf('FULL_DISCOUNT') != -1">满减</span>
|
||||||
|
<span v-if="promotionItem.indexOf('SECKILL') != -1">秒杀</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div style="overflow: hidden" @click="navigateToDetailPage(item)" class="count-config">
|
||||||
|
<span style="float: left; font-size: 22rpx">已售 {{ item.content.buyCount || '0' }}</span>
|
||||||
|
<span style="float: right; font-size: 22rpx">{{ item.content.commentNum || '0' }}条评论</span>
|
||||||
|
</div>
|
||||||
|
<div style="overflow: hidden" @click="navigateToStoreDetailPage(item)" class="count-config">
|
||||||
|
<div class="text-hidden" v-if="storeName">
|
||||||
|
<u-tag style="margin-right: 10rpx" size="mini" mode="dark" v-if="item.selfOperated"
|
||||||
|
text="自营" type="error" />
|
||||||
|
<span class="line1-store-name">{{ item.content.storeName }}</span>
|
||||||
|
<span class="to-store">进店<u-icon size="24" name="arrow-right" color="#666"></u-icon>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<span>
|
||||||
|
<u-icon name="arrow-right" color="#c5c5c5"></u-icon>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {}
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
// 遍历的数据
|
||||||
|
res: {
|
||||||
|
type: Array,
|
||||||
|
default: () => {
|
||||||
|
return []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 一行两列还是一行一列显示
|
||||||
|
type: {
|
||||||
|
type: String,
|
||||||
|
default: 'twoColumns',
|
||||||
|
validator() {
|
||||||
|
return ['twoColumns', 'oneColumns']
|
||||||
|
}
|
||||||
|
},
|
||||||
|
storeName: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true
|
||||||
|
}
|
||||||
|
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 格式化金钱 1999 --> [1999,00]
|
||||||
|
formatPrice(val) {
|
||||||
|
if (typeof val == "undefined") {
|
||||||
|
return val;
|
||||||
|
}
|
||||||
|
return val.toFixed(2).split(".");
|
||||||
|
},
|
||||||
|
|
||||||
|
// 数据去重一下 只显示一次 减免 劵 什么的
|
||||||
|
getPromotion(item) {
|
||||||
|
if (item.promotionMap) {
|
||||||
|
let array = [];
|
||||||
|
Object.keys(item.promotionMap).forEach((child) => {
|
||||||
|
if (!array.includes(child.split("-")[0])) {
|
||||||
|
array.push(child.split("-")[0]);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
return array;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 跳转到商品详情
|
||||||
|
navigateToDetailPage(item) {
|
||||||
|
uni.navigateTo({
|
||||||
|
url: `/pages/product/goods?id=${item.content.id}&goodsId=${item.content.goodsId}`,
|
||||||
|
});
|
||||||
|
},
|
||||||
|
// 跳转地址
|
||||||
|
navigateToStoreDetailPage(item) {
|
||||||
|
uni.navigateTo({
|
||||||
|
url: `/pages/product/shopPage?id=${item.content.storeId}`,
|
||||||
|
});
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang='scss' scoped>
|
||||||
|
/* 商品列表 */
|
||||||
|
.goods-list {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
margin: 10rpx 20rpx 284rpx;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
>.goods-item {
|
||||||
|
background-color: #ffffff;
|
||||||
|
display: flex;
|
||||||
|
border-radius: 16rpx;
|
||||||
|
flex-direction: column;
|
||||||
|
width: calc(50% - 30rpx);
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
padding-bottom: 20rpx;
|
||||||
|
|
||||||
|
&:nth-child(2n + 1) {
|
||||||
|
margin-right: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.image-wrapper {
|
||||||
|
width: 100%;
|
||||||
|
height: 330rpx;
|
||||||
|
border-radius: 16rpx 16rpx 0 0;
|
||||||
|
overflow: hidden;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.count-config,
|
||||||
|
.store-seller-name {
|
||||||
|
font-size: $font-sm;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-hidden {
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.goods-row {
|
||||||
|
background: #fff;
|
||||||
|
padding: 16rpx;
|
||||||
|
|
||||||
|
>.goods-col {
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
>.goods-img {
|
||||||
|
overflow: hidden;
|
||||||
|
flex: 4;
|
||||||
|
}
|
||||||
|
|
||||||
|
>.goods-detail {
|
||||||
|
flex: 7;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.goods-detail {
|
||||||
|
margin: 0 20rpx;
|
||||||
|
|
||||||
|
>.title {
|
||||||
|
font-size: $font-base;
|
||||||
|
color: $font-color-dark;
|
||||||
|
line-height: 1.5;
|
||||||
|
height: 84rpx;
|
||||||
|
padding: 10rpx 0 0;
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
-webkit-line-clamp: 2;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.promotion {
|
||||||
|
margin-top: 4rpx;
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
div {
|
||||||
|
span {
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: $light-color;
|
||||||
|
margin-right: 10rpx;
|
||||||
|
padding: 0 4rpx;
|
||||||
|
border-radius: 2rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.store-seller-name {
|
||||||
|
color: #666;
|
||||||
|
overflow: hidden;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.count-config {
|
||||||
|
padding: 5rpx 0;
|
||||||
|
color: #666;
|
||||||
|
display: flex;
|
||||||
|
font-size: 24rpx;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
>.price-box {
|
||||||
|
margin-top: 10rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding-right: 10rpx;
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: $font-color-light;
|
||||||
|
|
||||||
|
>.price {
|
||||||
|
font-size: 26rpx;
|
||||||
|
line-height: 1;
|
||||||
|
color: $main-color;
|
||||||
|
font-weight: bold;
|
||||||
|
|
||||||
|
/deep/ span:nth-of-type(1) {
|
||||||
|
font-size: 38rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -1,27 +1,11 @@
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<div class="goods-recommend">{{title ? `--${title}-- `:''}}</div>
|
<div class="goods-recommend">{{title ? `--${title}-- `:''}}</div>
|
||||||
<div class="goods-list">
|
<goodsTemplate :res='goodsList' />
|
||||||
<div @click="handleClick(item)" class="goods-item" v-for="(item, item_index) in goodsList" :key="item_index">
|
|
||||||
<div class="goods-img">
|
|
||||||
<u-image :src="item.content.thumbnail" mode="aspectFill" height="350rpx" width="100%">
|
|
||||||
<u-loading slot="loading"></u-loading>
|
|
||||||
</u-image>
|
|
||||||
</div>
|
|
||||||
<div class="goods-desc">
|
|
||||||
<div class="goods-title">
|
|
||||||
{{ item.content.goodsName }}
|
|
||||||
</div>
|
|
||||||
<div class="goods-bottom">
|
|
||||||
<div class="goods-price">￥{{ item.content.price | unitPrice }}</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import goodsTemplate from '@/components/m-goods-list/list'
|
||||||
import { getGoodsList } from "@/api/goods.js";
|
import { getGoodsList } from "@/api/goods.js";
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
|
|
@ -50,6 +34,7 @@ export default {
|
||||||
default: "",
|
default: "",
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
components:{goodsTemplate},
|
||||||
mounted() {
|
mounted() {
|
||||||
this.initGoods();
|
this.initGoods();
|
||||||
},
|
},
|
||||||
|
|
|
||||||
|
|
@ -22,19 +22,6 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.promotion {
|
|
||||||
margin-top: 4rpx;
|
|
||||||
display: flex;
|
|
||||||
div {
|
|
||||||
span {
|
|
||||||
font-size: 24rpx;
|
|
||||||
color: $light-color;
|
|
||||||
margin-right: 10rpx;
|
|
||||||
padding: 0 4rpx;
|
|
||||||
border-radius: 2rpx;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.status_bar {
|
.status_bar {
|
||||||
height: var(--status-bar-height);
|
height: var(--status-bar-height);
|
||||||
background: #fff !important;
|
background: #fff !important;
|
||||||
|
|
@ -437,180 +424,13 @@ view {
|
||||||
margin-left: 4rpx;
|
margin-left: 4rpx;
|
||||||
font-size: 26rpx;
|
font-size: 26rpx;
|
||||||
color: #888;
|
color: #888;
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.xia {
|
.xia {
|
||||||
transform: scaleY(-1);
|
transform: scaleY(-1);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.cate-item {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
height: 100%;
|
|
||||||
width: 80rpx;
|
|
||||||
position: relative;
|
|
||||||
font-size: 44rpx;
|
|
||||||
|
|
||||||
&:after {
|
|
||||||
content: "";
|
|
||||||
position: absolute;
|
|
||||||
left: 0;
|
|
||||||
top: 50%;
|
|
||||||
transform: translateY(-50%);
|
|
||||||
border-left: 1px solid #ddd;
|
|
||||||
width: 0;
|
|
||||||
height: 36rpx;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 分类 */
|
|
||||||
.cate-mask {
|
|
||||||
position: fixed;
|
|
||||||
left: 0;
|
|
||||||
top: var(--window-top);
|
|
||||||
bottom: 0;
|
|
||||||
width: 100%;
|
|
||||||
background: rgba(0, 0, 0, 0);
|
|
||||||
z-index: 95;
|
|
||||||
transition: 0.3s;
|
|
||||||
|
|
||||||
.cate-content {
|
|
||||||
width: 630rpx;
|
|
||||||
height: 100%;
|
|
||||||
background: #fff;
|
|
||||||
float: right;
|
|
||||||
transform: translateX(100%);
|
|
||||||
transition: 0.3s;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.none {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.show {
|
|
||||||
background: rgba(0, 0, 0, 0.4);
|
|
||||||
|
|
||||||
.cate-content {
|
|
||||||
transform: translateX(0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.cate-list {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
height: 100%;
|
|
||||||
|
|
||||||
.cate-item {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
height: 90rpx;
|
|
||||||
padding-left: 30rpx;
|
|
||||||
font-size: 28rpx;
|
|
||||||
color: #555;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.two {
|
|
||||||
height: 64rpx;
|
|
||||||
color: #303133;
|
|
||||||
font-size: 30rpx;
|
|
||||||
background: #f8f8f8;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.price-box {
|
|
||||||
margin-top: 10rpx;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
padding-right: 10rpx;
|
|
||||||
font-size: 24rpx;
|
|
||||||
color: $font-color-light;
|
|
||||||
}
|
|
||||||
|
|
||||||
.price {
|
|
||||||
font-size: 26rpx;
|
|
||||||
line-height: 1;
|
|
||||||
color: $main-color;
|
|
||||||
font-weight: bold;
|
|
||||||
/deep/ span:nth-of-type(1) {
|
|
||||||
font-size: 38rpx;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
/* 商品列表 */
|
|
||||||
.goods-list {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
margin: 10rpx 20rpx 284rpx;
|
|
||||||
|
|
||||||
|
|
||||||
// background: #fff;
|
|
||||||
width: 100%;
|
|
||||||
.goods-item {
|
|
||||||
background-color: #ffffff;
|
|
||||||
display: flex;
|
|
||||||
border-radius: 16rpx;
|
|
||||||
flex-direction: column;
|
|
||||||
width: calc(50% - 30rpx);
|
|
||||||
margin-bottom: 20rpx;
|
|
||||||
padding-bottom: 20rpx;
|
|
||||||
|
|
||||||
&:nth-child(2n + 1) {
|
|
||||||
margin-right: 20rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.goods-detail {
|
|
||||||
margin: 0 20rpx;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.image-wrapper {
|
|
||||||
width: 100%;
|
|
||||||
height: 330rpx;
|
|
||||||
border-radius: 16rpx 16rpx 0 0;
|
|
||||||
overflow: hidden;
|
|
||||||
padding: 0;
|
|
||||||
image {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
opacity: 1;
|
|
||||||
border-radius: 16rpx 16rpx 0 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.title {
|
|
||||||
font-size: $font-base;
|
|
||||||
color: $font-color-dark;
|
|
||||||
line-height: 1.5;
|
|
||||||
height: 84rpx;
|
|
||||||
padding: 10rpx 0 0;
|
|
||||||
display: -webkit-box;
|
|
||||||
|
|
||||||
-webkit-box-orient: vertical;
|
|
||||||
|
|
||||||
-webkit-line-clamp: 2;
|
|
||||||
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.count-config,
|
|
||||||
.store-seller-name {
|
|
||||||
font-size: $font-sm;
|
|
||||||
}
|
|
||||||
|
|
||||||
.text-hidden {
|
|
||||||
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.status_bar {
|
.status_bar {
|
||||||
height: var(--status-bar-height);
|
height: var(--status-bar-height);
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
|
||||||
|
|
@ -82,50 +82,7 @@
|
||||||
<div v-if="isSWitch">
|
<div v-if="isSWitch">
|
||||||
<scroll-view :style="{ height: goodsHeight }" enableBackToTop="true" lower-threshold="250"
|
<scroll-view :style="{ height: goodsHeight }" enableBackToTop="true" lower-threshold="250"
|
||||||
@scrolltolower="loadmore()" scroll-with-animation scroll-y class="scoll-page">
|
@scrolltolower="loadmore()" scroll-with-animation scroll-y class="scoll-page">
|
||||||
<div class="goods-class">
|
<goodsList :res='goodsList' type='oneColumns' />
|
||||||
<div v-for="(item, index) in goodsList" :key="index" class="goods-row">
|
|
||||||
<div class="flex goods-col">
|
|
||||||
<div class="goods-img" @click="navigateToDetailPage(item)">
|
|
||||||
<u-image width="230rpx" height="230rpx" :src="item.content.thumbnail">
|
|
||||||
<u-loading slot="loading"></u-loading>
|
|
||||||
</u-image>
|
|
||||||
</div>
|
|
||||||
<div class="goods-detail">
|
|
||||||
<div class="title clamp3" @click="navigateToDetailPage(item)">{{ item.content.goodsName }}</div>
|
|
||||||
<view class="price-box" @click="navigateToDetailPage(item)">
|
|
||||||
<div class="price" v-if="item.content.price!=undefined">
|
|
||||||
¥<span>{{ formatPrice(item.content.price )[0] }} </span>.{{
|
|
||||||
formatPrice(item.content.price )[1]
|
|
||||||
}}
|
|
||||||
</div>
|
|
||||||
</view>
|
|
||||||
<div class="promotion" @click="navigateToDetailPage(item)">
|
|
||||||
<div v-for="(promotionItem,promotionIndex) in getPromotion(item)" :key="promotionIndex">
|
|
||||||
<span v-if="promotionItem.indexOf('COUPON') != -1">劵</span>
|
|
||||||
<span v-if="promotionItem.indexOf('FULL_DISCOUNT') != -1">满减</span>
|
|
||||||
<span v-if="promotionItem.indexOf('SECKILL') != -1">秒杀</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div style="overflow: hidden" @click="navigateToDetailPage(item)" class="count-config">
|
|
||||||
<span style="float: left; font-size: 22rpx">已售 {{ item.content.buyCount || '0' }}</span>
|
|
||||||
<span style="float: right; font-size: 22rpx">{{ item.content.commentNum || '0' }}条评论</span>
|
|
||||||
</div>
|
|
||||||
<div style="overflow: hidden" @click="navigateToStoreDetailPage(item)" class="count-config">
|
|
||||||
<div class="text-hidden">
|
|
||||||
<u-tag style="margin-right: 10rpx" size="mini" mode="dark" v-if="item.selfOperated" text="自营"
|
|
||||||
type="error" />
|
|
||||||
<span class="line1-store-name">{{ item.content.storeName }}</span>
|
|
||||||
<span class="to-store">进店<u-icon size="24" name="arrow-right" color="#666"></u-icon></span>
|
|
||||||
</div>
|
|
||||||
<span>
|
|
||||||
<u-icon name="arrow-right" color="#c5c5c5"></u-icon>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<uni-load-more :status="loadingType" @loadmore="loadmore()"></uni-load-more>
|
<uni-load-more :status="loadingType" @loadmore="loadmore()"></uni-load-more>
|
||||||
</scroll-view>
|
</scroll-view>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -136,49 +93,7 @@
|
||||||
">
|
">
|
||||||
<scroll-view :style="{ height: goodsHeight }" scroll-anchoring enableBackToTop="true"
|
<scroll-view :style="{ height: goodsHeight }" scroll-anchoring enableBackToTop="true"
|
||||||
@scrolltolower="loadmore()" scroll-with-animation scroll-y lower-threshold="250" class="scoll-page">
|
@scrolltolower="loadmore()" scroll-with-animation scroll-y lower-threshold="250" class="scoll-page">
|
||||||
<view class="goods-list">
|
<goodsList :res='goodsList' />
|
||||||
<view v-for="(item, index) in goodsList" :key="index" class="goods-item">
|
|
||||||
<view class="image-wrapper" @click="navigateToDetailPage(item)">
|
|
||||||
<image :src="item.content.thumbnail" mode="aspectFill"></image>
|
|
||||||
</view>
|
|
||||||
<view class="goods-detail">
|
|
||||||
<div class="title clamp" @click="navigateToDetailPage(item)">{{ item.content.goodsName }}</div>
|
|
||||||
<view class="price-box" @click="navigateToDetailPage(item)">
|
|
||||||
<div class="price" v-if="item.content.price!=undefined">
|
|
||||||
¥<span>{{ formatPrice(item.content.price )[0] }} </span>.{{
|
|
||||||
formatPrice(item.content.price )[1]
|
|
||||||
}}
|
|
||||||
</div>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<div class="promotion" @click="navigateToDetailPage(item)">
|
|
||||||
<div v-if="item.content.salesModel == 'WHOLESALE'">
|
|
||||||
<span>批</span>
|
|
||||||
</div>
|
|
||||||
<div v-for="(promotionItem,promotionIndex) in getPromotion(item)" :key="promotionIndex">
|
|
||||||
<span v-if="promotionItem.indexOf('COUPON') != -1">劵</span>
|
|
||||||
<span v-if="promotionItem.indexOf('FULL_DISCOUNT') != -1">满减</span>
|
|
||||||
<span v-if="promotionItem.indexOf('SECKILL') != -1">秒杀</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="count-config" @click="navigateToDetailPage(item)">
|
|
||||||
<span>已售 {{ item.content.buyCount || "0" }}</span>
|
|
||||||
<span>{{ item.content.commentNum || "0" }}条评论</span>
|
|
||||||
</div>
|
|
||||||
<div class="store-seller-name" @click="navigateToStoreDetailPage(item)">
|
|
||||||
<div class="text-hidden">
|
|
||||||
<u-tag style="margin-right: 10rpx" size="mini" mode="dark" v-if="item.selfOperated" text="自营"
|
|
||||||
type="error" />
|
|
||||||
<span>{{ item.content.storeName || "暂无" }}</span>
|
|
||||||
</div>
|
|
||||||
<span>
|
|
||||||
<u-icon name="arrow-right"></u-icon>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<uni-load-more :status="loadingType"></uni-load-more>
|
<uni-load-more :status="loadingType"></uni-load-more>
|
||||||
</scroll-view>
|
</scroll-view>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -277,7 +192,7 @@
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { getGoodsList, getGoodsRelated } from "@/api/goods.js";
|
import { getGoodsList, getGoodsRelated } from "@/api/goods.js";
|
||||||
|
import goodsList from '@/components/m-goods-list/list.vue'
|
||||||
import { getHotKeywords } from "@/api/home.js";
|
import { getHotKeywords } from "@/api/home.js";
|
||||||
import mSearch from "@/components/m-search-revision/m-search-revision.vue";
|
import mSearch from "@/components/m-search-revision/m-search-revision.vue";
|
||||||
import storage from "@/utils/storage";
|
import storage from "@/utils/storage";
|
||||||
|
|
@ -343,6 +258,7 @@ export default {
|
||||||
routerVal: "",
|
routerVal: "",
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
|
||||||
onPageScroll(e) {
|
onPageScroll(e) {
|
||||||
console.log(e);
|
console.log(e);
|
||||||
this.scrollTop = e.scrollTop;
|
this.scrollTop = e.scrollTop;
|
||||||
|
|
@ -375,6 +291,7 @@ export default {
|
||||||
},
|
},
|
||||||
components: {
|
components: {
|
||||||
mSearch,
|
mSearch,
|
||||||
|
goodsList
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
/**
|
/**
|
||||||
|
|
@ -766,6 +683,9 @@ export default {
|
||||||
doSearchSwitch() {
|
doSearchSwitch() {
|
||||||
this.isSWitch = !this.isSWitch;
|
this.isSWitch = !this.isSWitch;
|
||||||
this.isShowSeachGoods = true;
|
this.isShowSeachGoods = true;
|
||||||
|
this.params.pageNumber = 1
|
||||||
|
this.params.pageSize = 10
|
||||||
|
this.loadData("refresh", 1);
|
||||||
},
|
},
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
|
||||||
|
|
@ -1,169 +1,20 @@
|
||||||
<template>
|
<template>
|
||||||
<view class="recommend-box" >
|
<view class="recommend-box" >
|
||||||
<h4 class="goods-recommend-title">宝贝推荐</h4>
|
<h4 class="goods-recommend-title">宝贝推荐</h4>
|
||||||
<view class="like-goods-list">
|
<goodsList :res='res' :storeName="false" />
|
||||||
<view class="like-goods-list">
|
</view>
|
||||||
<view
|
|
||||||
class="like-goods-item"
|
|
||||||
@click="clickGoods(item)"
|
|
||||||
v-for="(item, index) in res"
|
|
||||||
:key="index"
|
|
||||||
>
|
|
||||||
<u-image
|
|
||||||
:fade="true"
|
|
||||||
duration="450"
|
|
||||||
:lazy-load="true"
|
|
||||||
:src="item.content.thumbnail"
|
|
||||||
width="330rpx"
|
|
||||||
height="330rpx"
|
|
||||||
class="like-goods-uimage"
|
|
||||||
>
|
|
||||||
<u-loading slot="loading"></u-loading>
|
|
||||||
</u-image>
|
|
||||||
<view style="background-color: #ffffff; width: 100%">
|
|
||||||
<view class="name">{{ item.content.goodsName }}</view>
|
|
||||||
<view class="price-sales">
|
|
||||||
<div class="item-price" v-if="item.content.price != undefined">
|
|
||||||
￥
|
|
||||||
<span>{{ formatPrice(item.content.price)[0] }}</span>
|
|
||||||
.{{formatPrice(item.content.price)[1]}}
|
|
||||||
<!-- <text v-if="item.point != undefined">+{{ item.point }}积分</text> -->
|
|
||||||
</div>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import goodsList from '@/components/m-goods-list/list.vue'
|
||||||
export default {
|
export default {
|
||||||
props: ["res"],
|
props: ["res"],
|
||||||
|
components:{goodsList},
|
||||||
methods: {
|
methods: {
|
||||||
// 点击店铺推荐
|
|
||||||
clickGoods(val) {
|
|
||||||
uni.navigateTo({
|
|
||||||
url: `/pages/product/goods?id=${val.content.id}&goodsId=${val.content.goodsId}`
|
|
||||||
});
|
|
||||||
},
|
|
||||||
// 格式化金钱 1999 --> [1999,00]
|
|
||||||
formatPrice(val) {
|
|
||||||
if (typeof val == "undefined") {
|
|
||||||
return val;
|
|
||||||
}
|
|
||||||
|
|
||||||
return val.toFixed(2).split(".");
|
|
||||||
}
|
}
|
||||||
}
|
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
@import "../mp-goods.scss";
|
|
||||||
@import "../product.scss";
|
@import "../product.scss";
|
||||||
|
|
||||||
.goods_recomm {
|
|
||||||
padding: 12px 0 20rpx 20rpx;
|
|
||||||
color: #000;
|
|
||||||
font-size: 30rpx;
|
|
||||||
font-weight: 400;
|
|
||||||
margin-bottom: 28rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.like-goods-uimage {
|
|
||||||
/deep/ .u-image {
|
|
||||||
height: 350rpx !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.recommend-box {
|
|
||||||
background-color: #ffffff;
|
|
||||||
|
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
padding-bottom: 120rpx;
|
|
||||||
|
|
||||||
.title {
|
|
||||||
width: 120rpx;
|
|
||||||
height: 42rpx;
|
|
||||||
font-size: 30rpx;
|
|
||||||
font-weight: 700;
|
|
||||||
text-align: left;
|
|
||||||
color: #333333;
|
|
||||||
margin-left: 20rpx;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.like-goods-list {
|
|
||||||
display: flex;
|
|
||||||
width: 100%;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
}
|
|
||||||
.like-goods-item {
|
|
||||||
padding: 0 !important;
|
|
||||||
width: 48%;
|
|
||||||
margin: 0 1% 10rpx 1%;
|
|
||||||
background: #f7f7f7;
|
|
||||||
border-radius: 12rpx;
|
|
||||||
|
|
||||||
overflow: hidden;
|
|
||||||
|
|
||||||
/deep/ .u-image {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.like-goods-list {
|
|
||||||
// background-color: #f8f8f8;
|
|
||||||
width: 100%;
|
|
||||||
margin-bottom: 100rpx;
|
|
||||||
|
|
||||||
.name {
|
|
||||||
padding: 14rpx 8rpx 0 8rpx;
|
|
||||||
|
|
||||||
color: #333;
|
|
||||||
font-size: 24rpx;
|
|
||||||
display: -webkit-box;
|
|
||||||
overflow: hidden;
|
|
||||||
-webkit-box-orient: vertical;
|
|
||||||
|
|
||||||
-webkit-line-clamp: 2;
|
|
||||||
|
|
||||||
background: #f7f7f7;
|
|
||||||
height: 80rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.price-sales {
|
|
||||||
padding: 8rpx;
|
|
||||||
background: #f7f7f7;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
.item-price {
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
white-space: nowrap;
|
|
||||||
font-size: 26rpx;
|
|
||||||
text-align: left;
|
|
||||||
color: $price-color;
|
|
||||||
line-height: 23px;
|
|
||||||
font-weight: bold;
|
|
||||||
> span {
|
|
||||||
font-size: 32rpx;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.sales {
|
|
||||||
line-height: 23px;
|
|
||||||
font-size: 22rpx;
|
|
||||||
text-align: left;
|
|
||||||
letter-spacing: 0;
|
|
||||||
color: #cccccc;
|
|
||||||
// padding-right: 10rpx;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -60,18 +60,7 @@
|
||||||
<!-- 商品 -->
|
<!-- 商品 -->
|
||||||
<div class="contant" v-if="current == 0">
|
<div class="contant" v-if="current == 0">
|
||||||
<view v-if="!goodsList.length" class="empty">暂无商品信息</view>
|
<view v-if="!goodsList.length" class="empty">暂无商品信息</view>
|
||||||
<view v-else class="item" v-for="(item,index) in goodsList" :key="index" @click="navigateToGoodsDetail(item)">
|
<goodsTemplate :res="goodsList" :storeName="false" />
|
||||||
<u-image width="100%" height="330rpx" mode="aspectFit" :src="item.content.thumbnail">
|
|
||||||
<u-loading slot="loading"></u-loading>
|
|
||||||
</u-image>
|
|
||||||
<div class="name wes-2">{{ item.content.goodsName }}</div>
|
|
||||||
<div class="price">
|
|
||||||
<div>￥{{ item.content.price | unitPrice }}</div>
|
|
||||||
</div>
|
|
||||||
<view class="buyCount">
|
|
||||||
<div>已售 {{ item.content.buyCount || "0" }}</div>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</div>
|
</div>
|
||||||
<!-- 全部分类 -->
|
<!-- 全部分类 -->
|
||||||
<div class="category" v-if="current == 1">
|
<div class="category" v-if="current == 1">
|
||||||
|
|
@ -94,7 +83,8 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { getStoreBaseInfo, getStoreCategory } from "@/api/store.js";
|
import { getStoreBaseInfo, getStoreCategory } from "@/api/store.js";
|
||||||
|
import goodsTemplate from '@/components/m-goods-list/list'
|
||||||
import {
|
import {
|
||||||
receiveCoupons,
|
receiveCoupons,
|
||||||
deleteStoreCollection,
|
deleteStoreCollection,
|
||||||
|
|
@ -128,7 +118,8 @@ export default {
|
||||||
current(val) {
|
current(val) {
|
||||||
val == 0 ? ()=>{ this.goodsList = []; this.getGoodsData()} : this.getCategoryData();
|
val == 0 ? ()=>{ this.goodsList = []; this.getGoodsData()} : this.getCategoryData();
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
components:{goodsTemplate},
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 加载
|
* 加载
|
||||||
|
|
@ -277,15 +268,6 @@ export default {
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
/**
|
|
||||||
* 跳转到商品详情
|
|
||||||
*/
|
|
||||||
navigateToGoodsDetail(val) {
|
|
||||||
uni.navigateTo({
|
|
||||||
url: `/pages/product/goods?id=${val.content.id}&goodsId=${val.content.goodsId}`,
|
|
||||||
});
|
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 是否收藏
|
* 是否收藏
|
||||||
*/
|
*/
|
||||||
|
|
@ -404,42 +386,6 @@ export default {
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
margin-top: 40rpx;
|
margin-top: 40rpx;
|
||||||
}
|
}
|
||||||
.item {
|
|
||||||
overflow: hidden;
|
|
||||||
|
|
||||||
background: #fff;
|
|
||||||
width: 49%;
|
|
||||||
height: 484rpx;
|
|
||||||
font-size: 26rpx;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
border: 1px solid #f8f8f8;
|
|
||||||
margin-bottom: 20rpx;
|
|
||||||
|
|
||||||
.name {
|
|
||||||
text-align: left !important;
|
|
||||||
color: #333;
|
|
||||||
padding: 0 20rpx;
|
|
||||||
margin-top: 20rpx;
|
|
||||||
height: 80rpx;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
.price {
|
|
||||||
font-weight: 500;
|
|
||||||
color: $main-color;
|
|
||||||
font-size: 30rpx;
|
|
||||||
padding: 0 20rpx;
|
|
||||||
margin-top: 20rpx;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
.buyCount {
|
|
||||||
display: flex;
|
|
||||||
padding: 0 20rpx;
|
|
||||||
font-size: 24upx;
|
|
||||||
justify-content: space-between;
|
|
||||||
color: #999;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
.discount {
|
.discount {
|
||||||
height: 154rpx;
|
height: 154rpx;
|
||||||
|
|
|
||||||
|
|
@ -1,127 +1,77 @@
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<u-navbar :title="title"></u-navbar>
|
<u-navbar :title="title"></u-navbar>
|
||||||
<!-- 商品 -->
|
<!-- 商品 -->
|
||||||
<div class="contant">
|
<div class="contant">
|
||||||
<view v-if="!goodsList.length" class="empty">暂无商品信息</view>
|
<view v-if="!goodsList.length" class="empty">暂无商品信息</view>
|
||||||
<view v-else class="item" v-for="(item,index) in goodsList" :key="index" @click="navigateToGoodsDetail(item)">
|
<goodsTemplate :res='goodsList' :storeName='false' />
|
||||||
<u-image width="100%" mode="aspectFit" height="324rpx" :src="item.content.thumbnail">
|
</div>
|
||||||
<u-loading slot="loading"></u-loading>
|
</div>
|
||||||
</u-image>
|
|
||||||
<div class="name">{{ item.content.goodsName }}</div>
|
</template>
|
||||||
<div class="price">
|
|
||||||
<div>￥{{ item.content.price | unitPrice }}</div>
|
<script>
|
||||||
</div>
|
import {
|
||||||
<view class="buyCount">
|
getGoodsList
|
||||||
<div>已售 {{ item.content.buyCount || "0" }}</div>
|
} from "@/api/goods.js";
|
||||||
</view>
|
import goodsTemplate from '@/components/m-goods-list/list'
|
||||||
</view>
|
export default {
|
||||||
</div>
|
data() {
|
||||||
</div>
|
return {
|
||||||
|
title: "",
|
||||||
</template>
|
routerVal: "",
|
||||||
|
goodsList: [],
|
||||||
<script>
|
params: {
|
||||||
import { getGoodsList } from "@/api/goods.js";
|
pageNumber: 1,
|
||||||
export default {
|
pageSize: 10,
|
||||||
data() {
|
keyword: "",
|
||||||
return {
|
storeCatId: "",
|
||||||
title: "",
|
storeId: "",
|
||||||
routerVal: "",
|
},
|
||||||
goodsList: [],
|
};
|
||||||
params: {
|
},
|
||||||
pageNumber: 1,
|
components: {
|
||||||
pageSize: 10,
|
goodsTemplate
|
||||||
keyword: "",
|
},
|
||||||
storeCatId: "",
|
onLoad(options) {
|
||||||
storeId: "",
|
this.routerVal = options;
|
||||||
},
|
this.params.storeId = options.storeId;
|
||||||
};
|
this.params.storeCatId = options.id;
|
||||||
},
|
this.title = options.title;
|
||||||
onLoad(options) {
|
},
|
||||||
this.routerVal = options;
|
onShow() {
|
||||||
this.params.storeId = options.storeId;
|
this.goodsList = []
|
||||||
this.params.storeCatId = options.id;
|
this.params.pageNumber = 1;
|
||||||
this.title = options.title;
|
this.getGoodsData();
|
||||||
},
|
},
|
||||||
onShow() {
|
onReachBottom() {
|
||||||
this.goodsList =[]
|
this.params.pageNumber++;
|
||||||
this.params.pageNumber = 1;
|
this.getGoodsData();
|
||||||
this.getGoodsData();
|
},
|
||||||
},
|
methods: {
|
||||||
onReachBottom(){
|
async getGoodsData() {
|
||||||
this.params.pageNumber ++;
|
// #TODO
|
||||||
this.getGoodsData();
|
let goodsList = await getGoodsList(this.params);
|
||||||
},
|
if (goodsList.data.success) {
|
||||||
methods: {
|
this.goodsList.push(...goodsList.data.result.content);
|
||||||
/**
|
}
|
||||||
* 跳转到商品详情
|
},
|
||||||
*/
|
},
|
||||||
navigateToGoodsDetail(val) {
|
};
|
||||||
uni.navigateTo({
|
</script>
|
||||||
url: `/pages/product/goods?id=${val.content.id}&goodsId=${val.content.goodsId}`,
|
|
||||||
});
|
<style lang="scss" scoped>
|
||||||
},
|
.contant {
|
||||||
|
margin-top: 20rpx;
|
||||||
async getGoodsData() {
|
display: flex;
|
||||||
// #TODO
|
flex-wrap: wrap;
|
||||||
let goodsList = await getGoodsList(this.params);
|
justify-content: space-between;
|
||||||
if (goodsList.data.success) {
|
|
||||||
this.goodsList.push(...goodsList.data.result.content);
|
>.empty {
|
||||||
}
|
width: 100%;
|
||||||
},
|
display: flex;
|
||||||
},
|
justify-content: center;
|
||||||
};
|
margin-top: 40rpx;
|
||||||
</script>
|
}
|
||||||
|
}
|
||||||
<style lang="scss" scoped>
|
</style>
|
||||||
.contant {
|
|
||||||
margin-top: 20rpx;
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
justify-content: space-between;
|
|
||||||
> .empty {
|
|
||||||
width: 100%;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
margin-top: 40rpx;
|
|
||||||
}
|
|
||||||
.item {
|
|
||||||
overflow: hidden;
|
|
||||||
|
|
||||||
background: #fff;
|
|
||||||
width: 49%;
|
|
||||||
height: 484rpx;
|
|
||||||
font-size: 26rpx;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
border: 1px solid #f8f8f8;
|
|
||||||
margin-bottom: 20rpx;
|
|
||||||
|
|
||||||
.name {
|
|
||||||
text-align: left !important;
|
|
||||||
color: #333;
|
|
||||||
padding: 0 20rpx;
|
|
||||||
margin-top: 20rpx;
|
|
||||||
line-height: 1.4em;
|
|
||||||
max-height: 2.8em; //height是line-height的整数倍，防止文字显示不全
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
.price {
|
|
||||||
font-weight: 500;
|
|
||||||
color: $main-color;
|
|
||||||
font-size: 30rpx;
|
|
||||||
padding: 0 20rpx;
|
|
||||||
margin-top: 20rpx;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
.buyCount {
|
|
||||||
display: flex;
|
|
||||||
padding: 0 20rpx;
|
|
||||||
font-size: 24upx;
|
|
||||||
justify-content: space-between;
|
|
||||||
color: #999;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue