|
|
@@ -0,0 +1,347 @@
|
|
|
+<template>
|
|
|
+ <view class="container commodity-list-wrapper" :style="{'overflow':(showSkeleton? 'hidden' : 'auto'),'height': (showSkeleton? windowHeight + 'px' : 'auto')}">
|
|
|
+ <list-skeleton v-if="showSkeleton" :listType='0'></list-skeleton>
|
|
|
+ <scroll-view :style="{'height':scrollHeight+'px'}" @scrolltolower="toLower" scroll-y v-if="listData.length > 0">
|
|
|
+ <view v-for="(item,index) in listData" :key="index" :id="item.id" class="all-type-list-content commodity-list" @click.stop="navToDetailPage(item.productID)">
|
|
|
+ <image mode='widthFix' :src="item.mainImage" class="list-img" alt="list-img"></image>
|
|
|
+ <view class="list-details-info">
|
|
|
+ <text class="list-details-title">{{item.name}}</text>
|
|
|
+ <text class="list-details-specs">规格：{{item.unit}}</text>
|
|
|
+ <view class="list-details-specs" v-if="item.productCode!=''&&item.productCode!=null">商品编码：{{item.productCode}}</view>
|
|
|
+ <view class="list-details-price">
|
|
|
+ <view v-if="hasLogin" class="list-price">
|
|
|
+ <view v-if="userIdentity == 1">
|
|
|
+ <text>￥<text class="price-larger">{{item.retailPrice ? item.retailPrice.toFixed(2) : '0.00'}}</text></text>
|
|
|
+ </view>
|
|
|
+ <view v-if="userIdentity == 4">
|
|
|
+ <view class="price-larger" v-if="item.price1TextFlag == '1'">
|
|
|
+ <text class="txt">未公开价格</text>
|
|
|
+ </view>
|
|
|
+ <view v-else>
|
|
|
+ <view class="price-larger" v-if="item.price1TextFlag == '2'">
|
|
|
+ <text class="txt">价格仅会员可见</text>
|
|
|
+ <text class="btn" @click.stop="this.$api.navigateTo(`/pages/login/apply?clubStatus=${clubStatus}`)">去升级</text>
|
|
|
+ </view>
|
|
|
+ <text v-else>￥<text class="price-larger">{{item.retailPrice ? item.retailPrice.toFixed(2) :'0.00'}}</text></text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view v-if="userIdentity == 2">
|
|
|
+ <view class="price-larger" v-if="item.price1TextFlag == '1'">
|
|
|
+ <text class="txt">未公开价格</text>
|
|
|
+ </view>
|
|
|
+ <text>￥<text class="price-larger">{{item.retailPrice ? item.retailPrice.toFixed(2) :'0.00'}}</text></text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view v-else class="list-login-now">
|
|
|
+ <text class="p-no">价格:</text>
|
|
|
+ <uni-stars :stars="parseInt(item.price1Grade)" :font-size='36' :width-info="180"></uni-stars>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view v-if="showLoading && listData.length > 4">
|
|
|
+ <view class="loading-wrapper loading-wrapper-now" v-if="loadingNow">{{loadingText}}<text v-if="loadingText === '已至底部'">‧ ‧ ‧</text></view>
|
|
|
+ <view class="loading-wrapper loading-wrapper-btm" v-else>———<text class="btm-text">已至底部</text>———</view>
|
|
|
+ </view>
|
|
|
+ </scroll-view>
|
|
|
+ <view class="empty-container" v-if="showEmpty">
|
|
|
+ <image class="empty-container-image" src="https://img.caimei365.com/group1/M00/03/71/Cmis2F3wna6AY2ZjAABpmnBICH4247.png"></image>
|
|
|
+ <text class="error-text">{{emptyText}}</text>
|
|
|
+ </view>
|
|
|
+ <!-- 透明模态层 -->
|
|
|
+ <modal-layer v-if='isModallayer'></modal-layer>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import listSkeleton from '@/components/cm-module/listTemplate/listSkeleton'
|
|
|
+ import modalLayer from "@/components/modal-layer"
|
|
|
+ import uniStars from '@/components/uni-stars/uni-stars.vue'
|
|
|
+ import { searchQueryTinyType,querySearchProductPrice} from "@/api/product.js"
|
|
|
+ import { mapState,mapMutations } from 'vuex';
|
|
|
+ export default{
|
|
|
+ name:'CommodityList',
|
|
|
+ components:{
|
|
|
+ listSkeleton,
|
|
|
+ modalLayer,
|
|
|
+ uniStars
|
|
|
+ },
|
|
|
+ props: {
|
|
|
+ emptyText: {
|
|
|
+ type: String
|
|
|
+ },
|
|
|
+ serverUrl: {
|
|
|
+ type: String
|
|
|
+ },
|
|
|
+ classifyID: {
|
|
|
+ type:Number
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data(){
|
|
|
+ return{
|
|
|
+ clubStatus:'',
|
|
|
+ isModallayer:false,
|
|
|
+ windowHeight: '',
|
|
|
+ showSkeleton: true,
|
|
|
+ showEmpty: false,
|
|
|
+ userID: '',
|
|
|
+ userIdentity:'',
|
|
|
+ scrollHeight: '',
|
|
|
+ listData: [],
|
|
|
+ showLoading: false,
|
|
|
+ loadingNow: true,
|
|
|
+ loadingText: '上拉加载更多',
|
|
|
+ pageSize: 20,
|
|
|
+ pageNum: 1,
|
|
|
+ totalPage: 1,
|
|
|
+ hasNextPage:false,
|
|
|
+ pullFlag: true,
|
|
|
+ cartNum: 0,
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ // console.log(this.typeId)
|
|
|
+ this.setScrollHeight();
|
|
|
+ this.$api.getComStorage('userInfo').then((resolve) =>{
|
|
|
+ this.clubStatus = resolve.clubStatus
|
|
|
+ this.userID = resolve.userID ? resolve.userID : '';
|
|
|
+ this.userIdentity = resolve.userIdentity
|
|
|
+ console.log(this.clubStatus)
|
|
|
+ console.log(this.userID)
|
|
|
+ console.log(this.userIdentity)
|
|
|
+ this.getListFromServer();
|
|
|
+ }).catch(error =>{
|
|
|
+ this.getListFromServer();
|
|
|
+ })
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ ...mapState(['hasLogin','userInfo'])
|
|
|
+ },
|
|
|
+ methods:{
|
|
|
+ toLower() {
|
|
|
+ if(this.totalPage>this.listData.length && this.pullFlag) {
|
|
|
+ this.getListFromServer(true);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ setScrollHeight() {
|
|
|
+ const {windowHeight, pixelRatio} = wx.getSystemInfoSync();
|
|
|
+ this.windowHeight = windowHeight - 1;
|
|
|
+ this.scrollHeight = windowHeight - 1;
|
|
|
+ },
|
|
|
+ getListFromServer(loadMore) {
|
|
|
+ this.getQueryGoodslist(loadMore)
|
|
|
+ },
|
|
|
+ getQueryGoodslist(loadMore){
|
|
|
+ this.showLoading = true;
|
|
|
+ this.loadingNow = true;
|
|
|
+ this.loadingText = '加载中';
|
|
|
+ if(loadMore) { this.pageNum += 1; }
|
|
|
+ let params ={
|
|
|
+ classifyId:this.classifyID,
|
|
|
+ userId:this.userID,
|
|
|
+ pageNum:this.pageNum,
|
|
|
+ pageSize:this.pageSize,
|
|
|
+ }
|
|
|
+ this.CommonService.GetHomeClassify(params).then(response =>{
|
|
|
+ const resList = response.data.results;
|
|
|
+ if(resList && resList.length > 0){
|
|
|
+ this.showEmpty = false
|
|
|
+ this.hasNextPage = response.data.hasNextPage;
|
|
|
+ if(loadMore) {
|
|
|
+ this.listData = [...this.listData,...resList];
|
|
|
+ this.showSkeleton = false
|
|
|
+ } else {
|
|
|
+ this.listData = [...resList];
|
|
|
+ this.showSkeleton = false
|
|
|
+ }
|
|
|
+ // 防上拉暴滑
|
|
|
+ this.pullFlag = false;
|
|
|
+ setTimeout(()=>{ this.pullFlag = true; },500)
|
|
|
+ // 底部提示文案
|
|
|
+ if(this.hasNextPage) {
|
|
|
+ this.loadingText = '上拉加载更多';
|
|
|
+ } else {
|
|
|
+ this.showLoading = true;
|
|
|
+ this.loadingNow = false;
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ if(!loadMore) { this.showEmpty = true; }
|
|
|
+ }
|
|
|
+
|
|
|
+ }).catch(error =>{
|
|
|
+ this.$util.msg(error.msg,2000);
|
|
|
+ })
|
|
|
+ },
|
|
|
+ navToDetailPage(id) {
|
|
|
+ this.isModallayer = true;
|
|
|
+ this.$api.navigateTo(`/pages/goods/product?id=${id}`);
|
|
|
+ this.isModallayer = false;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+ .commodity-list-wrapper {
|
|
|
+ scroll-view {
|
|
|
+ height: 100%;
|
|
|
+ border-top: 2rpx solid rgba(0,0,0,0.07);
|
|
|
+ }
|
|
|
+ .empty-container-image {
|
|
|
+ margin-top: -300rpx;
|
|
|
+ }
|
|
|
+ .toIndexPage {
|
|
|
+ bottom: 390rpx;
|
|
|
+ }
|
|
|
+ .show-more-btn {
|
|
|
+ width: 276rpx;
|
|
|
+ height: 52rpx;
|
|
|
+ line-height: 52rpx;
|
|
|
+ border: 2rpx solid #D8D8D8;
|
|
|
+ background: #F7F7F7;
|
|
|
+ font-size: 26rpx;
|
|
|
+ margin: 26rpx 0;
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ margin-left: -138rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .all-type-list-content {
|
|
|
+ height: 216rpx;
|
|
|
+ padding: 24rpx;
|
|
|
+ background: #fff;
|
|
|
+ margin-bottom: 2rpx;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ box-sizing: content-box;
|
|
|
+ .list-img {
|
|
|
+ width: 210rpx;
|
|
|
+ height: 218rpx !important;
|
|
|
+ margin-right: 26rpx;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ border: 2rpx solid #f3f3f3;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .list-details-info {
|
|
|
+ width: 466rpx;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ font-size: 26rpx;
|
|
|
+ position: relative;
|
|
|
+ .list-details-title {
|
|
|
+ line-height: 38rpx;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ overflow: hidden;
|
|
|
+ display: -webkit-box;
|
|
|
+ -webkit-line-clamp: 2;
|
|
|
+ line-clamp: 2;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ }
|
|
|
+ .list-details-specs {
|
|
|
+ margin-top: 8rpx;
|
|
|
+ color: #666666;
|
|
|
+ }
|
|
|
+ .list-details-miniQuantity {
|
|
|
+ margin-top: 7rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .list-details-price {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ justify-content: space-between;
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ right: 0;
|
|
|
+ .price-icon {
|
|
|
+ width: 22rpx;
|
|
|
+ height: 28rpx;
|
|
|
+ vertical-align: middle;
|
|
|
+ margin-right: 10rpx;
|
|
|
+ }
|
|
|
+ .price-icon + text {
|
|
|
+ font-size: 25rpx;
|
|
|
+ vertical-align: middle;
|
|
|
+ }
|
|
|
+ .list-login-now {
|
|
|
+ width: 375rpx;
|
|
|
+ color: #F8C499;
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ .p-no{
|
|
|
+ float: left;
|
|
|
+ font-size: $font-size-24;
|
|
|
+ color: $color-system;
|
|
|
+ margin-right: 10rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .login-now {
|
|
|
+ padding: 10rpx 10rpx 10rpx 0;
|
|
|
+ }
|
|
|
+ .list-price {
|
|
|
+ color: #FF2A2A;
|
|
|
+ width: 100%;
|
|
|
+ height: 44rpx;
|
|
|
+ .price-larger {
|
|
|
+ width: 100%;
|
|
|
+ height: 44rpx;
|
|
|
+ font-size: 32rpx;
|
|
|
+ &.small{
|
|
|
+ font-size: $font-size-24;
|
|
|
+ }
|
|
|
+ .txt{
|
|
|
+ font-size: $font-size-24;
|
|
|
+ display: inline-block;
|
|
|
+ line-height: 44rpx;
|
|
|
+ text-align: left;
|
|
|
+ float: left;
|
|
|
+ }
|
|
|
+ .btn{
|
|
|
+ width: 112rpx;
|
|
|
+ height: 44rpx;
|
|
|
+ display: inline-block;
|
|
|
+ float: right;
|
|
|
+ background: $btn-confirm;
|
|
|
+ line-height: 44rpx;
|
|
|
+ text-align: center;
|
|
|
+ color: #FFFFFF;
|
|
|
+ font-size: $font-size-24;
|
|
|
+ border-radius: 22rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .add-cart-btn {
|
|
|
+ width: 156rpx;
|
|
|
+ height: 64rpx;
|
|
|
+ line-height: 64rpx;
|
|
|
+ border-radius: 32rpx;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 26rpx;
|
|
|
+ margin-right: 0;
|
|
|
+ background:linear-gradient(45deg,rgba(255,41,41,1) 0%,rgba(255,109,27,1) 100%);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .cart-icon {
|
|
|
+ width: 92rpx;
|
|
|
+ height: 92rpx;
|
|
|
+ border-radius: 50%;
|
|
|
+ background: rgba(255, 147, 0, 0.5);
|
|
|
+ position: fixed;
|
|
|
+ right: 24rpx;
|
|
|
+ bottom: 30%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ cursor: pointer;
|
|
|
+ image {
|
|
|
+ width: 58rpx;
|
|
|
+ height: 58rpx;
|
|
|
+ }
|
|
|
+ text {
|
|
|
+ font-size: 28rpx;
|
|
|
+ position: absolute;
|
|
|
+ top: -10rpx;
|
|
|
+ right: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
