|
@@ -1,65 +1,56 @@
|
|
<template>
|
|
<template>
|
|
<view class="container commodity-list-wrapper" :style="{'overflow':(showSkeleton? 'hidden' : 'auto'),'height': (showSkeleton? windowHeight + 'px' : 'auto')}">
|
|
<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>
|
|
<list-skeleton v-if="showSkeleton" :listType='0'></list-skeleton>
|
|
- <scroll-view :style="{'height':scrollHeight+'px'}" @scrolltolower="toLower" scroll-y v-if="commodityList.length > 0">
|
|
|
|
- <view v-for="(item,index) in commodityList" :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>
|
|
|
|
|
|
+ <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.pid)">
|
|
|
|
+ <image mode='widthFix' :src="item.image" class="list-img" alt="list-img"></image>
|
|
<view class="list-details-info">
|
|
<view class="list-details-info">
|
|
<text class="list-details-title">{{item.name}}</text>
|
|
<text class="list-details-title">{{item.name}}</text>
|
|
<text class="list-details-specs">规格:{{item.unit}}</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-specs" v-if="item.productCode!=''&&item.productCode!=null">商品编码:{{item.productCode}}</view>
|
|
- <text class="list-details-miniQuantity" v-if="fromRegularPurchasePage">起订量:{{item.minBuyNumber}}</text>
|
|
|
|
<view class="list-details-price">
|
|
<view class="list-details-price">
|
|
<view v-if="hasLogin"class="list-price">
|
|
<view v-if="hasLogin"class="list-price">
|
|
<view v-if="userIdentity == 1">
|
|
<view v-if="userIdentity == 1">
|
|
- <text>¥<text class="price-larger">{{item.retailPrice?item.retailPrice.toFixed(2):'0.00'}}</text></text>
|
|
|
|
|
|
+ <text v-if="priceLoading" class="price-larger small">正在获取价格...</text>
|
|
|
|
+ <text v-else>¥<text class="price-larger">{{item.price?item.price :'0.00'}}</text></text>
|
|
</view>
|
|
</view>
|
|
<view v-if="userIdentity == 4">
|
|
<view v-if="userIdentity == 4">
|
|
- <view class="price-larger" v-if="item.price1TextFlag == '1'">
|
|
|
|
|
|
+ <view class="price-larger" v-if="item.priceflag == '1'">
|
|
<text class="txt">未公开价格</text>
|
|
<text class="txt">未公开价格</text>
|
|
</view>
|
|
</view>
|
|
- <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>
|
|
|
|
|
|
+ <text v-else-if="priceLoading" class="price-larger small">正在获取价格...</text>
|
|
|
|
+ <view v-else>
|
|
|
|
+ <view class="price-larger" v-if="item.priceflag == '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.price ?item.price :'0.00'}}</text></text>
|
|
</view>
|
|
</view>
|
|
- <text v-if="item.price1TextFlag == '0'">¥<text class="price-larger">{{item.retailPrice?item.retailPrice.toFixed(2):'0.00'}}</text></text>
|
|
|
|
</view>
|
|
</view>
|
|
<view v-if="userIdentity == 2">
|
|
<view v-if="userIdentity == 2">
|
|
- <view class="price-larger" v-if="item.price1TextFlag == '1'">
|
|
|
|
|
|
+ <view class="price-larger" v-if="item.priceflag == '1'">
|
|
<text class="txt">未公开价格</text>
|
|
<text class="txt">未公开价格</text>
|
|
</view>
|
|
</view>
|
|
- <text v-else>¥<text class="price-larger">{{item.retailPrice?item.retailPrice.toFixed(2):'0.00'}}</text></text>
|
|
|
|
|
|
+ <text v-else-if="priceLoading" class="price-larger small">正在获取价格...</text>
|
|
|
|
+ <text v-else>¥<text class="price-larger">{{item.price ? item.price :'0.00'}}</text></text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
- <view class="list-login-now" v-else>
|
|
|
|
|
|
+ <view v-else class="list-login-now">
|
|
<text class="p-no">价格:</text>
|
|
<text class="p-no">价格:</text>
|
|
- <uni-stars :stars="parseInt(item.price1Grade)" :font-size='36' :width-info="180"></uni-stars>
|
|
|
|
|
|
+ <uni-stars :stars="parseInt(item.pricegrade)" :font-size='36' :width-info="180"></uni-stars>
|
|
</view>
|
|
</view>
|
|
- <button v-if="fromRegularPurchasePage" class="add-cart-btn" @click.stop="operationHanld(item)">选择数量</button>
|
|
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
- <button class="show-more-btn" v-if="showRegularBtn" @click="getListFromServer(true)">查看更多</button>
|
|
|
|
- <view v-if="showLoading && commodityList.length > 4 && !showRegularBtn">
|
|
|
|
|
|
+ <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-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 class="loading-wrapper loading-wrapper-btm" v-else>———<text class="btm-text">已至底部</text>———</view>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
</scroll-view>
|
|
- <view class="cart-icon" v-if="fromRegularPurchasePage" @click="toCartPage">
|
|
|
|
- <text v-if="cartNum > 0" class="uni-badge uni-badge-error uni-small uni-badge--small icon-num">
|
|
|
|
- {{cartNum}}
|
|
|
|
- </text>
|
|
|
|
- <image src='../../../static/icon-cart-active@3x.png' mode="widthFix"></image>
|
|
|
|
- </view>
|
|
|
|
- <view class="empty-container" v-if="showEmpty && !fromRegularPurchasePage">
|
|
|
|
|
|
+ <view class="empty-container" v-if="showEmpty">
|
|
<image class="empty-container-image" src="https://img.caimei365.com/group1/M00/03/71/Cmis2F3wna6AY2ZjAABpmnBICH4247.png"></image>
|
|
<image class="empty-container-image" src="https://img.caimei365.com/group1/M00/03/71/Cmis2F3wna6AY2ZjAABpmnBICH4247.png"></image>
|
|
<text class="error-text">{{emptyText}}</text>
|
|
<text class="error-text">{{emptyText}}</text>
|
|
</view>
|
|
</view>
|
|
- <view class="empty-container" v-if="showEmpty && fromRegularPurchasePage">
|
|
|
|
- <image class="empty-container-image" src="https://img.caimei365.com/group1/M00/03/71/Cmis2F3wna6AWdWzAAGlgAP0das422.png" mode="aspectFit"></image>
|
|
|
|
- <text class="error-text">您还没有购买过任何商品哟~</text>
|
|
|
|
- <button class="submit-btn toIndexPage" @click="toIndexPage">去逛逛</button>
|
|
|
|
- </view>
|
|
|
|
<!-- 透明模态层 -->
|
|
<!-- 透明模态层 -->
|
|
<modal-layer v-if='isModallayer'></modal-layer>
|
|
<modal-layer v-if='isModallayer'></modal-layer>
|
|
</view>
|
|
</view>
|
|
@@ -69,7 +60,7 @@
|
|
import listSkeleton from '@/components/cm-module/listTemplate/listSkeleton'
|
|
import listSkeleton from '@/components/cm-module/listTemplate/listSkeleton'
|
|
import modalLayer from "@/components/modal-layer"
|
|
import modalLayer from "@/components/modal-layer"
|
|
import uniStars from '@/components/uni-stars/uni-stars.vue'
|
|
import uniStars from '@/components/uni-stars/uni-stars.vue'
|
|
- import { queryGoodslist } from "@/api/product.js"
|
|
|
|
|
|
+ import { searchQueryTinyType,querySearchProductPrice} from "@/api/product.js"
|
|
import { mapState,mapMutations } from 'vuex';
|
|
import { mapState,mapMutations } from 'vuex';
|
|
export default{
|
|
export default{
|
|
name:'CommodityList',
|
|
name:'CommodityList',
|
|
@@ -82,6 +73,12 @@
|
|
emptyText: {
|
|
emptyText: {
|
|
type: String
|
|
type: String
|
|
},
|
|
},
|
|
|
|
+ serverUrl: {
|
|
|
|
+ type: String
|
|
|
|
+ },
|
|
|
|
+ typeId: {
|
|
|
|
+ type:Number
|
|
|
|
+ }
|
|
},
|
|
},
|
|
data(){
|
|
data(){
|
|
return{
|
|
return{
|
|
@@ -92,43 +89,44 @@
|
|
showEmpty: false,
|
|
showEmpty: false,
|
|
userID: '',
|
|
userID: '',
|
|
userIdentity:'',
|
|
userIdentity:'',
|
|
|
|
+ priceLoading:true,
|
|
scrollHeight: '',
|
|
scrollHeight: '',
|
|
- commodityList: [],
|
|
|
|
|
|
+ listData: [],
|
|
showLoading: false,
|
|
showLoading: false,
|
|
loadingNow: true,
|
|
loadingNow: true,
|
|
loadingText: '上拉加载更多',
|
|
loadingText: '上拉加载更多',
|
|
pageSize: 10,
|
|
pageSize: 10,
|
|
pageNum: 1,
|
|
pageNum: 1,
|
|
- hasNextPage: false,
|
|
|
|
totalPage: 1,
|
|
totalPage: 1,
|
|
pullFlag: true,
|
|
pullFlag: true,
|
|
- fromRegularPurchasePage: false,
|
|
|
|
cartNum: 0,
|
|
cartNum: 0,
|
|
- showRegularBtn: false
|
|
|
|
|
|
+ identity:2,
|
|
}
|
|
}
|
|
},
|
|
},
|
|
created() {
|
|
created() {
|
|
|
|
+ console.log(this.typeId)
|
|
this.setScrollHeight();
|
|
this.setScrollHeight();
|
|
- this.$api.getStorage().then((resolve) =>{
|
|
|
|
|
|
+ this.$api.getComStorage('userInfo').then((resolve) =>{
|
|
this.clubStatus = resolve.clubStatus
|
|
this.clubStatus = resolve.clubStatus
|
|
|
|
+ this.userID = resolve.userID ? resolve.userID : '';
|
|
|
|
+ this.userIdentity = resolve.userIdentity
|
|
|
|
+ if(this.userIdentity = 1){
|
|
|
|
+ this.identity = 1
|
|
|
|
+ }else{
|
|
|
|
+ this.identity = 2
|
|
|
|
+ }
|
|
|
|
+ this.getListFromServer();
|
|
|
|
+ }).catch(error =>{
|
|
|
|
+ console.log(error)
|
|
})
|
|
})
|
|
},
|
|
},
|
|
computed: {
|
|
computed: {
|
|
...mapState(['hasLogin','userInfo'])
|
|
...mapState(['hasLogin','userInfo'])
|
|
},
|
|
},
|
|
methods:{
|
|
methods:{
|
|
- toLoginPage() {
|
|
|
|
- const {lastPageType, lastPageVal} = this.$parent;
|
|
|
|
- uni.navigateTo({
|
|
|
|
- url:`/pages/login/login?listType=${lastPageType}&listVal=${lastPageVal}`
|
|
|
|
- })
|
|
|
|
- },
|
|
|
|
toLower() {
|
|
toLower() {
|
|
- // 第一次加载排除常用商品
|
|
|
|
- if(!this.showRegularBtn) {
|
|
|
|
- if(this.hasNextPage && this.pullFlag) {
|
|
|
|
- this.getListFromServer(true);
|
|
|
|
- }
|
|
|
|
|
|
+ if(this.totalPage>this.pageNum && this.pullFlag) {
|
|
|
|
+ this.getListFromServer(true);
|
|
}
|
|
}
|
|
},
|
|
},
|
|
setScrollHeight() {
|
|
setScrollHeight() {
|
|
@@ -137,83 +135,83 @@
|
|
this.scrollHeight = windowHeight - 1;
|
|
this.scrollHeight = windowHeight - 1;
|
|
},
|
|
},
|
|
getListFromServer(loadMore) {
|
|
getListFromServer(loadMore) {
|
|
- this.$api.getStorage().then((resolve) =>{
|
|
|
|
- this.userID = resolve.userID ? resolve.userID : '';
|
|
|
|
- this.userIdentity = resolve.userIdentity
|
|
|
|
- this.getQueryGoodslist(loadMore)
|
|
|
|
- }).catch(error =>{
|
|
|
|
- this.getQueryGoodslist(loadMore)
|
|
|
|
- })
|
|
|
|
|
|
+ this.getQueryGoodslist(loadMore)
|
|
},
|
|
},
|
|
getQueryGoodslist(loadMore){
|
|
getQueryGoodslist(loadMore){
|
|
- const thisServerurl = this.$parent.serverUrl;
|
|
|
|
this.showLoading = true;
|
|
this.showLoading = true;
|
|
this.loadingNow = true;
|
|
this.loadingNow = true;
|
|
this.loadingText = '加载中';
|
|
this.loadingText = '加载中';
|
|
- if(loadMore) {
|
|
|
|
- this.pageNum += 1;
|
|
|
|
- }
|
|
|
|
- if(this.$parent.lastPageType === '再次购买') {
|
|
|
|
- this.fromRegularPurchasePage = true;
|
|
|
|
|
|
+ if(loadMore) { this.pageNum += 1; }
|
|
|
|
+ let params ={
|
|
|
|
+ id:this.typeId,
|
|
|
|
+ identity:this.identity,
|
|
|
|
+ pageNum:this.pageNum,
|
|
|
|
+ pageSize:this.pageSize,
|
|
|
|
+ sortField:'',
|
|
|
|
+ sortType:''
|
|
}
|
|
}
|
|
- queryGoodslist(thisServerurl,{userId:this.userID,pageNum:this.pageNum,pageSize:this.pageSize}).then(response=>{
|
|
|
|
- const resData = this.fromRegularPurchasePage ?response.data.page :response.data;
|
|
|
|
- const resList = resData.results,
|
|
|
|
- getCartNum = response.data.count;
|
|
|
|
- this.cartNum = getCartNum > 99 ?'99+' :getCartNum;
|
|
|
|
- if(!loadMore && this.fromRegularPurchasePage && resData.hasNextPage) {
|
|
|
|
- this.showRegularBtn = true;
|
|
|
|
- }
|
|
|
|
|
|
+ searchQueryTinyType(this.serverUrl,params).then(response=>{
|
|
|
|
+ const resData = JSON.parse(response.data);
|
|
|
|
+ const resList = resData.items;
|
|
if(resList && resList.length > 0){
|
|
if(resList && resList.length > 0){
|
|
- this.hasNextPage = resData.hasNextPage;
|
|
|
|
- this.totalPage = resData.totalPage;
|
|
|
|
|
|
+ this.showEmpty = false
|
|
|
|
+ this.totalPage = resData.total;
|
|
if(loadMore) {
|
|
if(loadMore) {
|
|
- this.commodityList = [...this.commodityList,...resList];
|
|
|
|
- this.showRegularBtn = false;
|
|
|
|
|
|
+ this.listData = [...this.listData,...resList];
|
|
|
|
+ this.setProductPrice()
|
|
|
|
+ this.showSkeleton = false
|
|
} else {
|
|
} else {
|
|
- this.commodityList = [...resList];
|
|
|
|
- this.showSkeleton = false;
|
|
|
|
|
|
+ this.listData = [...resList];
|
|
|
|
+ this.setProductPrice()
|
|
|
|
+ this.showSkeleton = false
|
|
}
|
|
}
|
|
// 防上拉暴滑
|
|
// 防上拉暴滑
|
|
this.pullFlag = false;
|
|
this.pullFlag = false;
|
|
- setTimeout(()=>{
|
|
|
|
- this.pullFlag = true;
|
|
|
|
- },500)
|
|
|
|
|
|
+ setTimeout(()=>{ this.pullFlag = true; },500)
|
|
// 底部提示文案
|
|
// 底部提示文案
|
|
- if(this.hasNextPage) {
|
|
|
|
|
|
+ if(this.totalPage>this.pageNum) {
|
|
this.loadingText = '上拉加载更多';
|
|
this.loadingText = '上拉加载更多';
|
|
} else {
|
|
} else {
|
|
this.showLoading = true;
|
|
this.showLoading = true;
|
|
this.loadingNow = false;
|
|
this.loadingNow = false;
|
|
}
|
|
}
|
|
} else {
|
|
} else {
|
|
- if(!loadMore) {
|
|
|
|
- this.showEmpty = true;
|
|
|
|
- }
|
|
|
|
|
|
+ if(!loadMore) { this.showEmpty = true; }
|
|
}
|
|
}
|
|
}).catch(error =>{
|
|
}).catch(error =>{
|
|
this.$util.msg(error.msg,2000);
|
|
this.$util.msg(error.msg,2000);
|
|
})
|
|
})
|
|
},
|
|
},
|
|
- operationHanld(prop){
|
|
|
|
- this.$emit('operationConfim',prop)
|
|
|
|
|
|
+ setProductPrice(){//获取价格
|
|
|
|
+ if (!this.userID) {return false;}
|
|
|
|
+ let productIdArr = [];
|
|
|
|
+ this.listData.map(item=>{// 0公开价格 1不公开价格 2仅对会员机构公开
|
|
|
|
+ if (item.priceflag != 1){ productIdArr.push(item.pid) }
|
|
|
|
+ })
|
|
|
|
+ this.productIds = productIdArr.join(",");
|
|
|
|
+ querySearchProductPrice({userId: this.userID,productIds:this.productIds}).then(response =>{
|
|
|
|
+ if (response.data) {
|
|
|
|
+ let ids = Object.keys(response.data.prices);
|
|
|
|
+ this.listData.map(item=>{
|
|
|
|
+ for (let i = 0; i < ids.length; i++) {
|
|
|
|
+ let id = ids[i];
|
|
|
|
+ let price = response.data.prices[id];
|
|
|
|
+ if (item.priceflag != 1 && item.pid == id){
|
|
|
|
+ item.price = Number(price).toFixed(2);
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ });
|
|
|
|
+ }
|
|
|
|
+ this.priceLoading = false;
|
|
|
|
+ }).catch(error =>{
|
|
|
|
+ this.$util.msg(error.msg,2000)
|
|
|
|
+ })
|
|
},
|
|
},
|
|
navToDetailPage(id) {
|
|
navToDetailPage(id) {
|
|
this.isModallayer = true;
|
|
this.isModallayer = true;
|
|
this.$api.navigateTo(`/pages/goods/product?id=${id}`);
|
|
this.$api.navigateTo(`/pages/goods/product?id=${id}`);
|
|
this.isModallayer = false;
|
|
this.isModallayer = false;
|
|
- },
|
|
|
|
- toCartPage() {
|
|
|
|
- uni.switchTab({
|
|
|
|
- url: '/pages/tabBar/cart/cart'
|
|
|
|
- })
|
|
|
|
- },
|
|
|
|
- toIndexPage() {
|
|
|
|
- uni.switchTab({
|
|
|
|
- url: '/pages/tabBar/home/home'
|
|
|
|
- })
|
|
|
|
}
|
|
}
|
|
-
|
|
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
</script>
|
|
@@ -323,6 +321,9 @@
|
|
width: 100%;
|
|
width: 100%;
|
|
height: 44rpx;
|
|
height: 44rpx;
|
|
font-size: 32rpx;
|
|
font-size: 32rpx;
|
|
|
|
+ &.small{
|
|
|
|
+ font-size: $font-size-24;
|
|
|
|
+ }
|
|
.txt{
|
|
.txt{
|
|
font-size: $font-size-24;
|
|
font-size: $font-size-24;
|
|
display: inline-block;
|
|
display: inline-block;
|