|
|
@@ -1,480 +0,0 @@
|
|
|
-<!-- 分类商品模块 -->
|
|
|
-<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.p_id)">
|
|
|
- <image mode='widthFix' :src="item.p_image" class="list-img" alt="list-img"></image>
|
|
|
- <view class="list-details-info">
|
|
|
- <text class="list-details-title">{{item.p_name}}</text>
|
|
|
- <text class="list-details-specs">规格：{{item.p_unit}}</text>
|
|
|
- <view class="list-details-specs" v-if="item.p_code!=''&& item.p_code!=null">商品编码：{{item.p_code}}</view>
|
|
|
- <view class="list-details-price">
|
|
|
- <template v-if="userIdentity == 3">
|
|
|
- <view class="floor-item-act">
|
|
|
- <view class="coupon-tags" v-if="item.couponsLogo">优惠券</view>
|
|
|
- <template v-if="item.actStatus==1">
|
|
|
- <view class="floor-tags" v-if="PromotionsFormat(item.promotions)">
|
|
|
- {{item.promotions.name}}<text v-if="item.p_price_flag != '1' && item.supplierId === shopId">:￥{{ item.price | NumFormat }}</text>
|
|
|
- </view>
|
|
|
- <view class="floor-tags" v-else>{{item.promotions.name}}</view>
|
|
|
- </template>
|
|
|
- </view>
|
|
|
- <view class="floor-item-act">
|
|
|
- <view class="coupon-tags" v-if="item.couponsLogo">优惠券</view>
|
|
|
- <view class="floor-tags" v-if="item.actStatus ==0 && item.ladderPriceFlag==1">阶梯价格</view>
|
|
|
- </view>
|
|
|
- </template>
|
|
|
- <template v-else>
|
|
|
- <view class="floor-item-act">
|
|
|
- <view class="coupon-tags" v-if="item.couponsLogo">优惠券</view>
|
|
|
- <template v-if="item.actStatus==1">
|
|
|
- <view class="floor-tags" v-if="PromotionsFormat(item.promotions)">
|
|
|
- {{item.promotions.name}}<text v-if="hasLogin && item.p_price_flag != '1'">:￥{{ item.price | NumFormat }}</text>
|
|
|
- </view>
|
|
|
- <view class="floor-tags" v-else>{{item.promotions.name}}</view>
|
|
|
- </template>
|
|
|
- </view>
|
|
|
- <view class="floor-item-act">
|
|
|
- <view class="coupon-tags" v-if="item.couponsLogo">优惠券</view>
|
|
|
- <view class="floor-tags" v-if="item.actStatus ==0 && item.ladderPriceFlag==1">阶梯价格</view>
|
|
|
- </view>
|
|
|
- </template>
|
|
|
- <view v-if="hasLogin" class="list-price">
|
|
|
- <template v-if="userIdentity == 1">
|
|
|
- <text v-if="priceLoading" class="price-larger small">正在获取价格...</text>
|
|
|
- <template v-else>
|
|
|
- <text class="price-larger" :class="PromotionsFormat(item.promotions) ? 'none' : ''">
|
|
|
- ￥{{ (PromotionsFormat(item.promotions) ? item.originalPrice : item.price) | NumFormat}}
|
|
|
- </text>
|
|
|
- </template>
|
|
|
- </template>
|
|
|
- <template v-if="userIdentity == 4">
|
|
|
- <view class="price-larger" v-if="item.p_price_flag == '1'">
|
|
|
- <text class="txt">￥未公开价格</text>
|
|
|
- </view>
|
|
|
- <view class="price-larger" v-if="item.p_price_flag == '2'">
|
|
|
- <text class="txt">￥价格仅会员可见</text>
|
|
|
- </view>
|
|
|
- <text v-else-if="priceLoading" class="price-larger small">正在获取价格...</text>
|
|
|
- <template v-else>
|
|
|
- <text class="price-larger" :class="PromotionsFormat(item.promotions) ? 'none' : ''">
|
|
|
- ￥{{ (PromotionsFormat(item.promotions) ? item.originalPrice : item.price) | NumFormat}}
|
|
|
- </text>
|
|
|
- </template>
|
|
|
- </template>
|
|
|
- <template v-if="userIdentity == 3">
|
|
|
- <template v-if="item.supplierId === shopId">
|
|
|
- <view class="price-larger" v-if="item.p_price_flag == '1'">
|
|
|
- <text class="txt">￥未公开价格</text>
|
|
|
- </view>
|
|
|
- <text v-else-if="priceLoading" class="price-larger small">正在获取价格...</text>
|
|
|
- <text v-else class="price-larger" :class="PromotionsFormat(item.promotions) ? 'none' : ''">
|
|
|
- ￥{{ (PromotionsFormat(item.promotions) ? item.originalPrice : item.price) | NumFormat}}
|
|
|
- </text>
|
|
|
- </template>
|
|
|
- <template v-else>
|
|
|
- <view class="list-login-now">
|
|
|
- <text class="p-no">￥</text>
|
|
|
- <uni-grader :grade="Number(item.p_price_grade)"></uni-grader>
|
|
|
- </view>
|
|
|
- </template>
|
|
|
- </template>
|
|
|
- <template v-if="userIdentity == 2">
|
|
|
- <view class="price-larger" v-if="item.p_price_flag == '1'">
|
|
|
- <text class="txt">￥未公开价格</text>
|
|
|
- </view>
|
|
|
- <text v-else-if="priceLoading" class="price-larger small">正在获取价格...</text>
|
|
|
- <template v-else>
|
|
|
- <text class="price-larger" :class="PromotionsFormat(item.promotions) ? 'none' : ''">
|
|
|
- ￥{{ (PromotionsFormat(item.promotions) ? item.originalPrice : item.price) | NumFormat}}
|
|
|
- </text>
|
|
|
- </template>
|
|
|
- </template>
|
|
|
- </view>
|
|
|
- <view v-else class="list-login-now">
|
|
|
- <text class="p-no">￥</text>
|
|
|
- <uni-grader :grade="Number(item.p_price_grade)"></uni-grader>
|
|
|
- </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 uniGrader from '@/components/uni-grade/uni-grade.vue'
|
|
|
- import { searchQueryTinyType} from "@/services/public.js"
|
|
|
- import { mapState,mapMutations } from 'vuex';
|
|
|
- export default{
|
|
|
- name:'CommodityList',
|
|
|
- components:{
|
|
|
- listSkeleton,
|
|
|
- modalLayer,
|
|
|
- uniGrader
|
|
|
- },
|
|
|
- props: {
|
|
|
- emptyText: {
|
|
|
- type: String
|
|
|
- },
|
|
|
- serverUrl: {
|
|
|
- type: String
|
|
|
- },
|
|
|
- typeId: {
|
|
|
- type:Number
|
|
|
- }
|
|
|
- },
|
|
|
- data(){
|
|
|
- return{
|
|
|
- clubStatus:'',
|
|
|
- isModallayer:false,
|
|
|
- windowHeight: '',
|
|
|
- showSkeleton: true,
|
|
|
- showEmpty: false,
|
|
|
- userID:0,
|
|
|
- shopId:0,
|
|
|
- userIdentity:'',
|
|
|
- priceLoading:true,
|
|
|
- scrollHeight: '',
|
|
|
- listData: [],
|
|
|
- showLoading: false,
|
|
|
- loadingNow: true,
|
|
|
- loadingText: '上拉加载更多',
|
|
|
- pageSize: 20,
|
|
|
- pageNum: 1,
|
|
|
- totalPage: 1,
|
|
|
- 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 : 0;
|
|
|
- this.shopId = resolve.shopId ? resolve.shopId : 0;
|
|
|
- this.userIdentity = resolve.userIdentity
|
|
|
- this.getListFromServer();
|
|
|
- }).catch(error =>{
|
|
|
- this.getListFromServer();
|
|
|
- })
|
|
|
- },
|
|
|
- filters: {
|
|
|
- NumFormat:function(text) {//处理金额
|
|
|
- return Number(text).toFixed(2);
|
|
|
- },
|
|
|
- },
|
|
|
- computed: {
|
|
|
- ...mapState(['hasLogin','userInfo','identity'])
|
|
|
- },
|
|
|
- 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 ={
|
|
|
- id:this.typeId,
|
|
|
- identity:this.identity,
|
|
|
- pageNum:this.pageNum,
|
|
|
- pageSize:this.pageSize,
|
|
|
- sortField:'',
|
|
|
- sortType:''
|
|
|
- }
|
|
|
- searchQueryTinyType(this.serverUrl,params).then(response=>{
|
|
|
- const resData = JSON.parse(response.data);
|
|
|
- const resList = resData.items;
|
|
|
- if(resList && resList.length > 0){
|
|
|
- this.showEmpty = false
|
|
|
- this.totalPage = resData.total;
|
|
|
- if(loadMore) {
|
|
|
- this.listData = [...this.listData,...resList];
|
|
|
- this.getProductPrice()
|
|
|
- this.showSkeleton = false
|
|
|
- } else {
|
|
|
- this.listData = [...resList];
|
|
|
- this.getProductPrice()
|
|
|
- this.showSkeleton = false
|
|
|
- }
|
|
|
- // 防上拉暴滑
|
|
|
- this.pullFlag = false;
|
|
|
- setTimeout(()=>{ this.pullFlag = true; },500)
|
|
|
- // 底部提示文案
|
|
|
- if(this.totalPage>this.listData.length) {
|
|
|
- this.loadingText = '上拉加载更多';
|
|
|
- } else {
|
|
|
- this.showLoading = true;
|
|
|
- this.loadingNow = false;
|
|
|
- }
|
|
|
- } else {
|
|
|
- if(!loadMore) { this.showEmpty = true; }
|
|
|
- }
|
|
|
-
|
|
|
- }).catch(error =>{
|
|
|
- this.$util.msg(error.msg,2000);
|
|
|
- })
|
|
|
- },
|
|
|
- getProductPrice(){//获取价格
|
|
|
- let productIdArr = [];
|
|
|
- this.listData.map(item=>{// 0公开价格 1不公开价格 2仅对会员机构公开
|
|
|
- productIdArr.push(item.p_id)
|
|
|
- })
|
|
|
- this.productIds = productIdArr.join(",");
|
|
|
- this.ProductService.querySearchProductPrice(
|
|
|
- {
|
|
|
- userId: this.userID,
|
|
|
- productIds:this.productIds,
|
|
|
- source: 2
|
|
|
- }
|
|
|
- ).then(response =>{
|
|
|
- if (response.data) {
|
|
|
- this.listData = this.ReturnNewProducts(this.listData,response.data);
|
|
|
- }
|
|
|
- this.priceLoading = false;
|
|
|
- }).catch(error =>{
|
|
|
- this.$util.msg(error.msg,2000)
|
|
|
- })
|
|
|
- },
|
|
|
- ReturnNewProducts(Array,list){//处理对应商品ID的商品价格
|
|
|
- let NewArray = []
|
|
|
- Array.map(item=>{
|
|
|
- for (let i = 0; i < list.length; i++) {
|
|
|
- if( item.p_id == list[i].productId ){
|
|
|
- NewArray.push(Object.assign(item,list[i]))
|
|
|
- }
|
|
|
- }
|
|
|
- });
|
|
|
- return NewArray
|
|
|
- },
|
|
|
- navToDetailPage(id) {
|
|
|
- this.isModallayer = true;
|
|
|
- this.$api.navigateTo(`/pages/goods/product?id=${id}`);
|
|
|
- this.isModallayer = false;
|
|
|
- },
|
|
|
- PromotionsFormat(promo){//促销活动类型数据处理
|
|
|
- if(promo!=null){
|
|
|
- if(promo.type == 1 && promo.mode == 1){
|
|
|
- return true
|
|
|
- }else{
|
|
|
- return false
|
|
|
- }
|
|
|
- }
|
|
|
- return 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: 36rpx;
|
|
|
- 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%;
|
|
|
- height: 54rpx;
|
|
|
- line-height: 54rpx;
|
|
|
- .floor-item-act{
|
|
|
- height: 54rpx;
|
|
|
- text-align: center;
|
|
|
- box-sizing: border-box;
|
|
|
- float: right;
|
|
|
- padding: 11rpx 0;
|
|
|
- .coupon-tags{
|
|
|
- height: 32rpx;
|
|
|
- box-sizing: border-box;
|
|
|
- border-radius: 8rpx;
|
|
|
- background-color: #fff1eb;
|
|
|
- line-height: 28rpx;
|
|
|
- color: #f94b4b;
|
|
|
- text-align: center;
|
|
|
- display: inline-block;
|
|
|
- padding:0 10rpx;
|
|
|
- font-size: $font-size-20;
|
|
|
- border: 1px solid #f94b4b;
|
|
|
- float: left;
|
|
|
- margin-right: 12rpx;
|
|
|
- }
|
|
|
- .floor-tags{
|
|
|
- height: 32rpx;
|
|
|
- box-sizing: border-box;
|
|
|
- border-radius: 8rpx;
|
|
|
- background-color: #FFFFFF;
|
|
|
- line-height: 28rpx;
|
|
|
- color: $color-system;
|
|
|
- text-align: center;
|
|
|
- display: inline-block;
|
|
|
- padding:0 16rpx;
|
|
|
- font-size: $font-size-20;
|
|
|
- border: 1px solid #E15616;
|
|
|
- float: left;
|
|
|
- }
|
|
|
- }
|
|
|
- .price-icon {
|
|
|
- width: 22rpx;
|
|
|
- height: 28rpx;
|
|
|
- vertical-align: middle;
|
|
|
- margin-right: 10rpx;
|
|
|
- }
|
|
|
- .price-icon + text {
|
|
|
- font-size: 25rpx;
|
|
|
- vertical-align: middle;
|
|
|
- }
|
|
|
- .list-login-now {
|
|
|
- color: #F8C499;
|
|
|
- float: left;
|
|
|
- line-height: 54rpx;
|
|
|
- .p-no{
|
|
|
- float: left;
|
|
|
- font-size: $font-size-24;
|
|
|
- color: $text-color;
|
|
|
- }
|
|
|
- }
|
|
|
- .login-now {
|
|
|
- padding: 10rpx 10rpx 10rpx 0;
|
|
|
- }
|
|
|
- .list-price {
|
|
|
- color: #FF2A2A;
|
|
|
- height: 44rpx;
|
|
|
- float: left;
|
|
|
- .price-larger {
|
|
|
- width: 100%;
|
|
|
- height: 44rpx;
|
|
|
- font-size: 32rpx;
|
|
|
- &.none{
|
|
|
- text-decoration: line-through;
|
|
|
- color: #999999;
|
|
|
- }
|
|
|
- &.small{
|
|
|
- font-size: $font-size-24;
|
|
|
- }
|
|
|
- .txt{
|
|
|
- font-size: $font-size-24;
|
|
|
- display: inline-block;
|
|
|
- line-height: 44rpx;
|
|
|
- text-align: left;
|
|
|
- float: left;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .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>
|
