|
|
@@ -23,7 +23,7 @@
|
|
|
<!-- 骨架 -->
|
|
|
<list-skeleton v-if="showSkeleton"></list-skeleton>
|
|
|
<!-- 商品为空时 -->
|
|
|
- <view class="empty-container" v-if="true">
|
|
|
+ <view class="empty-container" v-if="isShowEmpty">
|
|
|
<image
|
|
|
class="empty-container-image"
|
|
|
src="https://img.caimei365.com/group1/M00/03/71/Cmis2F3wna6AY2ZjAABpmnBICH4247.png"
|
|
|
@@ -39,45 +39,30 @@
|
|
|
v-if="listData.length > 0"
|
|
|
>
|
|
|
<view
|
|
|
- v-for="(item, index) in listData"
|
|
|
+ v-for="(item, index) in 10"
|
|
|
:key="index"
|
|
|
:id="item.id"
|
|
|
class="all-type-list-content commodity-list"
|
|
|
@click.stop="navToDetailPage(item.p_id)"
|
|
|
>
|
|
|
- <image mode="widthFix" :src="item.p_image" class="list-img" alt="list-img"></image>
|
|
|
+ <image
|
|
|
+ mode="widthFix"
|
|
|
+ src="https://img.caimei365.com/group1/M00/03/71/Cmis2F3wna6AY2ZjAABpmnBICH4247.png"
|
|
|
+ class="list-img"
|
|
|
+ alt="list-img"
|
|
|
+ ></image>
|
|
|
<view class="list-details-info">
|
|
|
- <text class="list-details-title">{{ isInterceptHtmlFn(item.p_name) }}</text>
|
|
|
- <text class="list-details-specs">规格：{{ item.p_unit ? item.p_unit : '' }}</text>
|
|
|
- <text class="list-details-miniQuantity list-details-specs">起订量：{{ item.minBuyNumber }}</text>
|
|
|
- <view class="list-details-specs" v-if="item.p_code != '' && item.p_code != null">
|
|
|
- <view>商品编码：{{ item.p_code }}</view>
|
|
|
+ <!-- 商品名称 -->
|
|
|
+ <text class="list-details-title">韩国恩盛进口氢洁气小气泡清韩国恩盛进口氢洁气小气泡清</text>
|
|
|
+ <!-- 商品标签 -->
|
|
|
+ <view class="list-details-tags">
|
|
|
+ <tui-tag type="danger" class="tag" padding="6rpx" size="20rpx" plain>商品标签</tui-tag>
|
|
|
</view>
|
|
|
- <view class="list-details-price">
|
|
|
- <template v-if="priceLoading">
|
|
|
- <view class="list-price-loding">正在获取价格...</view>
|
|
|
- </template>
|
|
|
- <template v-else>
|
|
|
- <view class="list-shop">
|
|
|
- <view class="list-price">
|
|
|
- <text class="price-larger" :class="PromotionsFormat(item.promotions) ? 'none' : ''">
|
|
|
- ￥{{ (PromotionsFormat(item.promotions) ? item.originalPrice : item.price) | NumFormat }}
|
|
|
- </text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <button class="add-cart-btn" @click.stop="operationHanld(item)">数量</button>
|
|
|
- </template>
|
|
|
- </view>
|
|
|
- <view class="list-details-price">
|
|
|
- <view class="floor-item-act" v-if="item.actStatus == 1">
|
|
|
- <view class="floor-tags" v-if="PromotionsFormat(item.promotions)">
|
|
|
- {{ item.promotions.name }}<text>:￥{{ item.price | NumFormat }}</text>
|
|
|
- </view>
|
|
|
- <view class="floor-tags" v-else>{{ item.promotions.name }}</view>
|
|
|
- </view>
|
|
|
- <view class="floor-item-act" v-if="item.actStatus == 0 && item.ladderPriceFlag == 1">
|
|
|
- <view class="floor-tags">阶梯价格</view>
|
|
|
- </view>
|
|
|
+ <text class="list-details-specs">规格：30g×5片/盒</text>
|
|
|
+
|
|
|
+ <!-- 商品价格 -->
|
|
|
+ <view class="goods-price">
|
|
|
+ <view class="price"> ￥23333.00 </view> <view class="shop-btn" @click.stop="showAddCartModal"> 购买 </view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
@@ -101,7 +86,7 @@
|
|
|
>
|
|
|
</cm-drag>
|
|
|
<!-- 透明模态层 -->
|
|
|
- <modal-layer v-if="isModallayer"></modal-layer>
|
|
|
+ <modal-layer v-if="false"></modal-layer>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
@@ -110,6 +95,7 @@ import listSkeleton from '@/components/cm-module/listTemplate/listSkeleton'
|
|
|
import modalLayer from '@/components/modal-layer'
|
|
|
import uniStars from '@/components/uni-stars/uni-stars.vue'
|
|
|
import cmDrag from '@/components/cm-custom/cm-drag.vue'
|
|
|
+import tuiTag from '@/components/thorui/tui-tag/tui-tag'
|
|
|
import { mapState, mapMutations } from 'vuex'
|
|
|
export default {
|
|
|
name: 'productList',
|
|
|
@@ -117,7 +103,8 @@ export default {
|
|
|
listSkeleton,
|
|
|
modalLayer,
|
|
|
uniStars,
|
|
|
- cmDrag
|
|
|
+ cmDrag,
|
|
|
+ tuiTag
|
|
|
},
|
|
|
props: {
|
|
|
searchStatus: {
|
|
|
@@ -159,7 +146,7 @@ export default {
|
|
|
tabIndex: 0,
|
|
|
goodsList: [],
|
|
|
tabBars: [{ name: '单一', id: 'danyi' }, { name: '组合', id: 'zuhe' }],
|
|
|
- isShow: false
|
|
|
+ isShow: false,
|
|
|
}
|
|
|
},
|
|
|
created() {
|
|
|
@@ -190,6 +177,13 @@ export default {
|
|
|
...mapState(['hasLogin', 'userInfo'])
|
|
|
},
|
|
|
methods: {
|
|
|
+ closeDrawer(){
|
|
|
+ this.visible = false
|
|
|
+ },
|
|
|
+ // 数量选择框
|
|
|
+ showAddCartModal() {
|
|
|
+ this.visible = true
|
|
|
+ },
|
|
|
scrolltolower(tabIndex) {
|
|
|
if (tabIndex == 0) {
|
|
|
if (this.totalPage > this.listData.length && this.pullFlag) {
|
|
|
@@ -204,7 +198,7 @@ export default {
|
|
|
setScrollHeight() {
|
|
|
const { windowHeight, pixelRatio } = wx.getSystemInfoSync()
|
|
|
this.windowHeight = windowHeight - 1
|
|
|
- this.scrollHeight = windowHeight - 1
|
|
|
+ this.scrollHeight = windowHeight - 66
|
|
|
},
|
|
|
getProductAgainInfo(loadMore) {
|
|
|
this.showLoading = true
|
|
|
@@ -536,6 +530,7 @@ export default {
|
|
|
.all-zuhe-list {
|
|
|
background: #ffffff;
|
|
|
}
|
|
|
+
|
|
|
.foot_conten {
|
|
|
width: 655rpx;
|
|
|
background: #fff;
|
|
|
@@ -629,6 +624,9 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
.commodity-list-wrapper {
|
|
|
+ .product-container {
|
|
|
+ padding-top: 130rpx;
|
|
|
+ }
|
|
|
scroll-view {
|
|
|
height: 100%;
|
|
|
}
|
|
|
@@ -646,64 +644,32 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
.good-search {
|
|
|
- height: 80rpx;
|
|
|
- width: 100%;
|
|
|
- padding: 24rpx;
|
|
|
- background: #ffffff;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- margin-bottom: 20rpx;
|
|
|
position: fixed;
|
|
|
top: 0;
|
|
|
- left: 0;
|
|
|
- z-index: 19;
|
|
|
+ z-index: 999;
|
|
|
+ background-color: #fff;
|
|
|
+ width: 702rpx;
|
|
|
+ height: 66rpx;
|
|
|
+ padding: 32rpx 24rpx;
|
|
|
.search-from {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding-left: 30rpx;
|
|
|
width: 702rpx;
|
|
|
height: 66rpx;
|
|
|
- background: #f7f7f7;
|
|
|
- border-radius: 40rpx;
|
|
|
- float: left;
|
|
|
- position: relative;
|
|
|
- .input {
|
|
|
- width: 702rpx;
|
|
|
- height: 66rpx;
|
|
|
- float: left;
|
|
|
- line-height: 66rpx;
|
|
|
- color: $text-color;
|
|
|
- font-size: $font-size-24;
|
|
|
- }
|
|
|
- .icon-iconfonticonfontsousuo1 {
|
|
|
+ background-color: #f7f7f7;
|
|
|
+ border-radius: 33rpx;
|
|
|
+ line-height: 64rpx;
|
|
|
+ .icon-sousuo {
|
|
|
width: 64rpx;
|
|
|
- height: 80rpx;
|
|
|
- line-height: 80rpx;
|
|
|
+ height: 64rpx;
|
|
|
text-align: center;
|
|
|
- display: block;
|
|
|
- font-size: $font-size-38;
|
|
|
- float: left;
|
|
|
- color: #999999;
|
|
|
- }
|
|
|
- .icon-shanchu1 {
|
|
|
font-size: $font-size-32;
|
|
|
- color: #999999;
|
|
|
- position: absolute;
|
|
|
- width: 120rpx;
|
|
|
- height: 80rpx;
|
|
|
- line-height: 80rpx;
|
|
|
- top: 0;
|
|
|
- right: 0;
|
|
|
- text-align: center;
|
|
|
- z-index: 10;
|
|
|
}
|
|
|
- }
|
|
|
- .search-btn {
|
|
|
- // width: 120rpx;
|
|
|
- line-height: 64rpx;
|
|
|
- text-align: center;
|
|
|
- font-size: $font-size-28;
|
|
|
- color: $color-system;
|
|
|
- float: left;
|
|
|
- background: #ffffff;
|
|
|
- margin-left: 10rpx;
|
|
|
+ .input {
|
|
|
+ font-size: $font-size-26;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
.all-type-list-content {
|
|
|
@@ -753,11 +719,38 @@ export default {
|
|
|
line-clamp: 2;
|
|
|
-webkit-box-orient: vertical;
|
|
|
}
|
|
|
+ .list-details-tags {
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-start;
|
|
|
+ margin: 10rpx 0;
|
|
|
+ height: 34rpx;
|
|
|
+ }
|
|
|
+ .goods-price {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ .price {
|
|
|
+ font-size: 26rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ color: $uni-text-color-price;
|
|
|
+ }
|
|
|
+ .shop-btn {
|
|
|
+ width: 160rpx;
|
|
|
+ height: 56rpx;
|
|
|
+ border: 1px solid #333333;
|
|
|
+ border-radius: 28rpx;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 56rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+ }
|
|
|
.list-details-specs {
|
|
|
width: 100%;
|
|
|
display: inline-block;
|
|
|
margin: 5rpx 0;
|
|
|
- color: #666666;
|
|
|
+ color: #999;
|
|
|
+ font-size: 20rpx;
|
|
|
+ line-height: 28rpx;
|
|
|
}
|
|
|
.list-details-miniQuantity {
|
|
|
width: 100%;
|
yuwenjun