liedou_uniapp/pages/subPackages/my/scll.vue

<template>
	<view class="page-con u-skeleton">
		<!-- 顶部导航 -->
		<u-navbar class="navbar-wrap" :is-back="true" title="收藏/浏览" :background="background" title-color="#ffffff" back-icon-color="#ffffff" />
		<!-- tab -->
		<view class="scll-tab">
			<view :class="['u-skeleton-fillet', 'scll-tab-block', menuTab == item.id && 'scll-tab-active']" v-for="item in menu" :key="item.id" @click="onClickMenu(item.id)">{{item.label}}</view>
		</view>
		<!-- 我的收藏 -->
		<block v-if="menuTab === 'wdsc'">
			<!-- 我的收藏-商品列表 -->
			<view class="collection-block">
				<view class="goods-list-wrap">
				  <view v-for="item in collect.list" :key="item.goods_id" class="goods-item-wrap" @click="onClickGoodsItem(item,'collectAction')">
					<view class="lt-wrap u-skeleton-fillet">
					  <image class="goods-item-img" :src="item.img" />
					  <view class="outDateImgBock" v-if="item.is_expire==1">
					  	<image class="outDateImg" src="https://ld.726p.com/ldyx_static/imgs/outDateImg.png" mode="widthFix"></image>
					  </view>
					</view>
					<view class="rt-wrap">
					  <view class="title u-skeleton-fillet">
						  <image class="shop-icon" v-if="item.shop_type == 0" src="https://ld.726p.com/ldyx_static/imgs/icon-tb.png" />
						  <image class="shop-icon" v-else-if="item.shop_type == 1" src="https://ld.726p.com/ldyx_static/imgs/icon-tmall.png" />
						  <image class="shop-icon" v-else-if="item.shop_type == 4" src="https://ld.726p.com/ldyx_static/imgs/jd-icon.png" />
						  <image class="shop-icon" v-else-if="item.shop_type == 6" src="https://ld.726p.com/ldyx_static/imgs/pdd-icon.png" />
						  <image class="shop-icon" v-else-if="item.shop_type == 5" src="https://ld.726p.com/ldyx_static/imgs/icon-dy.png" />
						  <image class="shop-icon" v-else-if="item.shop_type == 7" src="https://ld.726p.com/ldyx_static/imgs/icon-wph.png" />
						  {{ item.title }}
					  </view>
					  <view class="shop-wrap u-skeleton-fillet">
						  <text class="shop-name">{{item.is_expire == 1 ? `到期时间${item.coupon_end_time}`: '到期时间无'}}</text>
					  </view>
					  <view class="shop-price-info u-skeleton-fillet">
              <view class="price-wrap">
                <text class="price">￥{{ item.discount_price }}</text>
                <text class="sales sales2">¥{{item.price }}</text>
              </view>
              <view class="coupon-wrap" v-if="item.is_coupon == 1 && item.coupon_price > 0 && item.shop_type != 5">
                <text class="label">券</text>
                <text class="value">{{ item.coupon_price }}元</text>
              </view>
					  </view>
					</view>
				  </view>
				</view>
			</view>
			<!-- 我的收藏 - 无数据展示 -->
			<view class="no-data-blcok" v-if="collect.list.length <= 0 && !collect.loading" style="margin-top: 160rpx;">
				<image class="no-data-img" src="https://ld.726p.com/ldyx_static/imgs/no-order.png" mode="widthFix"></image>
				<view class="no-data-hint">您还没有收藏商品哦～</view>
			</view>

			<!-- 猜你喜欢 -->
			<block v-if="guessYouLike.list.length > 0">
				<image class="guess-like-image u-skeleton-fillet" src="https://ld.726p.com/ldyx_static/imgs/guess-like.png" mode="heightFix"></image>
				<!-- 猜你喜欢 商品列表 -->
				<view class="goods-list-double-wrap u-skeleton-fillet">
					<block v-for="goodsItem in guessYouLike.list">
						<verticalGood class="verticalGoodItem" v-if="goodsItem" :key="goodsItem.goods_id" :goodsItem="goodsItem" path="goodsItemTopRecommendAction" />
					</block>
				</view>
			</block>
		</block>
		<!-- 浏览记录 -->
		<block v-if="menuTab == 'lljl'">
			<!-- 浏览记录 - 无数据展示 -->
			<view class="no-data-blcok" v-if="record.list.length <= 0 && !record.loading" style="margin-top: 160rpx;">
				<image class="no-data-img" src="https://ld.726p.com/ldyx_static/imgs/no-order.png" mode="widthFix"></image>
				<view class="no-data-hint">您还没有浏览记录～</view>
			</view>
			<!-- 浏览记录-商品列表 -->
			<view class="collection-block ll-background u-skeleton-fillet">
				<view class="goods-list-wrap">
					<view v-for="(f_item, idx) in record.list" :key="idx">
						<view v-if="f_item && f_item.length" style="margin-bottom:40rpx">
							<view class="browse-time">{{f_item[0].add_time}}</view>
							<view class="goods-item-wrap ll-goods-item-wrap" v-for="(item) in f_item" :key="item.goods_id" @click="onClickGoodsItem(item,'HistoryAction')">
							<view class="lt-wrap">
								<image class="goods-item-img" :src="item.img" />
							</view>
							<view class="rt-wrap">
								<view class="title">
									<image class="shop-icon" v-if="item.shop_type == 0" src="https://ld.726p.com/ldyx_static/imgs/icon-tb.png" />
									<image class="shop-icon" v-else-if="item.shop_type == 1" src="https://ld.726p.com/ldyx_static/imgs/icon-tmall.png" />
									<image class="shop-icon" v-else-if="item.shop_type == 4" src="https://ld.726p.com/ldyx_static/imgs/jd-icon.png" />
									<image class="shop-icon" v-else-if="item.shop_type == 6" src="https://ld.726p.com/ldyx_static/imgs/pdd-icon.png" />
									<image class="shop-icon" v-else-if="item.shop_type == 5" src="https://ld.726p.com/ldyx_static/imgs/icon-dy.png" />
									<image class="shop-icon" v-else-if="item.shop_type == 7" src="https://ld.726p.com/ldyx_static/imgs/icon-wph.png" />
									{{ item.title }}
								</view>
								<view class="shop-price-info" style="margin-top:30rpx">
								<view class="price-wrap">
									<text class="price">￥{{ item.discount_price }}</text>
									<text class="sales sales2">¥{{ item.price }}</text>
								</view>
								<view class="coupon-wrap" v-if="item.is_coupon==1 && item.shop_type != 5">
									<text class="label">券</text>
									<text class="value">{{ item.coupon_price }}元</text>
								</view>
								</view>
							</view>
							</view>
						</view>
					</view>
				</view>
			</view>

		</block>
		<!-- 回到顶部 -->
		<u-back-top :scroll-top="scrollTop" />

		<!--骨架组件-->
		<u-skeleton :loading="skeletonLoading" :animation="true" bgColor="#FFF" />

	</view>
</template>

<script>
	const app = getApp()
	import verticalGood from '@/components/verticalGood.vue'
	export default {
		components:{
			verticalGood
		},
		data() {
			return {
				background: app.globalData.navbarBackground,
				menu:[
					{
					  label: '我的收藏',
					  id: 'wdsc',
					},
					{
					  label: '浏览记录',
					  id: 'lljl',
					},
				],
				menuTab:'wdsc',
				collect: { // 我的收藏
					list: [{},{},{},{},{}],
					page: 1,
					isEnd: false,
					loading: false,
				},
				guessYouLike: { // 我的收藏 - 猜你喜欢
					list: [],
					loading: false,
				},
				record: {
					list: [],
					loading: true
				},
				user_level: uni.getStorageSync('userInfo') ? uni.getStorageSync('userInfo').user_level : '', // 当前用户等级
				scrollTop: 0,
				skeletonLoading: true,
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		onLoad() {
			this.getFavoriteslist()
			this.getGuessYouLike()
		},
		//上拉加载
		onReachBottom() {
			// 我的收藏
			if(this.menuTab == 'wdsc') {
				if (this.collect.isEnd || this.collect.loading) return; // 我的收藏 或者猜你喜欢正在加载中，不允许上拉加载
				this.collect.loading = true;
				this.collect.page++;
				this.getFavoriteslist()
			}
			// 浏览记录
		},
		methods: {
			// 我的收藏数据获取
			async getFavoriteslist() {
			    try {
			      const url = this.$api.goods_favoriteslist
			      const params = {
							page: this.collect.page,
							type: 'all'
						}
						this.collect.loading = true;
						uni.showLoading({ title: '加载中...', mask: true })
						const { data: res } = await this.$get(url, params)
						this.collect.loading = false;
			      if (res && res.errno == 0) {
							// 限制只展示淘宝、天猫、拼多多商品
							res.rst.data = res.rst.data.filter(goods => {
								return goods.goods_id && [0, 1, 6].includes(Number(goods.shop_type))
							})
							// 判断数据是否是最后一页
							if (res.rst.pageInfo.maxPage <= this.collect.page) {
								this.collect.isEnd = true;
							} else {
								this.collect.isEnd = false
							}
							// 获得数据
							if(this.collect.page == 1) {
								this.collect.list = res.rst.data;
							} else {
								this.collect.list = this.collect.list.concat(res.rst.data)
							}
			      } else {
			        uni.showToast({ title: res.err || '操作失败', icon: 'none' })
			      }
			    } catch (error) {
						this.collect.loading = false;
						uni.showToast({ title: '服务器错误', icon: 'none' })
			    } finally {
						uni.hideLoading()
						this.collect.loading = false;
						this.skeletonLoading = false
			    }
			},
			// 我的收藏 - 猜你喜欢
			async getGuessYouLike() {
				try {
					const url = this.$api.goods_guessYouLike
					const params = {
						page: 1
					}
					this.guessYouLike.loading = true;
					uni.showLoading({ title: '加载中...', mask: true })
					const { data: res } = await this.$postJSON(url, params)
					this.guessYouLike.loading = false;
					if (res && res.errno == 0) {
						// 获得数据
						this.guessYouLike.list = res.rst.data;
					} else {
						uni.showToast({ title: res.err || '操作失败', icon: 'none' })
					}
				} catch (error) {
					uni.showToast({ title: '服务器错误', icon: 'none' })
				} finally {
					uni.hideLoading()
					this.guessYouLike.loading = false;
				}
			},
			// 浏览记录
			async getRecordList() {
				try {
					const url = this.$api.brower_recordList
					const params = {}
				  this.record.loading = true;
				  uni.showLoading({ title: '加载中...', mask: true })
				  const { data: res } = await this.$postJSON(url, params)
				  this.record.loading = false;
					if (res && res.errno == 0) {
						res.rst.data = res.rst.data.map(r => {
							r = r.filter(goods => {
								return goods.goods_id && [0, 1, 6].includes(Number(goods.shop_type))
							})
							return [...r]
						})
						console.log('res.rst.data => ', JSON.parse(JSON.stringify(res.rst.data)))

						this.record.list = res.rst.data;
					} else {
						uni.showToast({ title: res.err || '操作失败', icon: 'none' })
					}
				} catch (error) {
					uni.showToast({ title: '服务器错误', icon: 'none' })
				} finally {
					this.record.loading = false;
					uni.hideLoading()
				}
			},
			//点击导航标签
			onClickMenu (id) {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 300
				});
				if(id === 'wdsc' && this.menuTab !== 'wdsc'){ // 我的收藏
					this.menuTab = 'wdsc'
				}else if (id === 'lljl' && this.menuTab !== 'lljl') { //浏览记录
					this.menuTab = 'lljl'
					if(this.record.list.length <= 0){
						this.getRecordList()
					}
				}
			},
			// 点击商品进入商品详情
			onClickGoodsItem(goodsItem,path) {
				try{ app.categoryNew_countBuy({type:0,path:path,shop_type: goodsItem.shop_type}) }catch(e){} ; // 数据上报
			  const { img = '', goods_id = '', coupon_price = '', discount_price = '', price = '', is_coupon = '', commission_rate = '', is_high_commission = '', coupon_end_time = '', coupon_start_time = '' } = goodsItem
				if(!goods_id){
          uni.showToast({ title: '商品已过期', icon: 'none' })
          return
        }
        if (goodsItem.shop_type == 4) { // 京东
					uni.navigateTo({
					  url: `/pages/subPackages/home/jdGoodsDetail?goods_id=${encodeURIComponent(goods_id)}`
					})
				}else if (goodsItem.shop_type == 6) { // 拼多多
          uni.navigateTo({
            url: `/pages/subPackages/pdd/goodsDetail?goods_id=${encodeURIComponent(goods_id)}`
          })
        } else if (goodsItem.shop_type == 5) { // 抖音
          uni.navigateTo({
            url: `/pages/subPackages/dy/goodsDetail?goods_id=${encodeURIComponent(goods_id)}`
          })
        } else if (goodsItem.shop_type == 7) { // 唯品会
          uni.navigateTo({
            url: `/pages/subPackages/wph/goodsDetail?goods_id=${encodeURIComponent(goods_id)}`
          })
        } else {
					uni.navigateTo({
					  url: `/pages/subPackages/home/goodsDetail?img=${encodeURIComponent(img)}&goods_id=${encodeURIComponent(goods_id)}&coupon_price=${encodeURIComponent(coupon_price)}&discount_price=${encodeURIComponent(discount_price)}&price=${encodeURIComponent(price)}&is_coupon=${encodeURIComponent(is_coupon)}&commission_rate=${encodeURIComponent(commission_rate)}&is_high_commission=${encodeURIComponent(is_high_commission)}&coupon_end_time=${encodeURIComponent(coupon_end_time)}&coupon_start_time=${encodeURIComponent(coupon_start_time)}`
					})
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.scll-tab{
		display: flex;
		justify-content: space-around;
		border-bottom: 2rpx solid #f4f4f4;
		position: fixed;
		width: 100%;
		background-color: #FFFFFF;
		z-index: 9;
		.scll-tab-block{
			line-height: 80rpx;
			text-align: center;
			font-size: 32rpx;
			&.scll-tab-active{
				color: #F52B18;
			}
		}
	}
	.goods-list-wrap {
	  margin-top: 82rpx;
	  .goods-item-wrap {
      margin-bottom: 10rpx;
	    padding: 10rpx;
		border-bottom: 2rpx solid #f9f9f9;
	    display: flex;
	    align-items: center;
	    background-color: #fff;
	    .lt-wrap {
			position: relative;
			width: 180rpx;
			height: 180rpx;
			border-radius: 10rpx;
			overflow: hidden;
	      .goods-item-img {
	        width: 100%;
	        height: 100%;
	        vertical-align: middle; // 解决图片下边框缝隙问题
	      }
		  .outDateImgBock{
			  position: absolute;
			  top: 0;
			  left: 0;
			  width: 100%;
			  height: 100%;
			  background: rgba(0,0,0,0.5);
			  display: flex;
			  align-items: center;
			  justify-content: center;
			  .outDateImg{
				  width: 60%;
				  height: 60%;
			  }
		  }
	    }
	    .rt-wrap {
			flex:1;
	      margin-left: 10rpx;
	      .title {
	        font-size: 28rpx;
	        color: #333;
	        line-height: 32rpx;
	        // 超出两行省略号
	        word-break: break-all;
	        overflow: hidden;
	        -webkit-line-clamp: 2;
	        text-overflow: ellipsis;
	        display: -webkit-box;
	        -webkit-box-orient: vertical;
			.shop-icon{
			  width: 30rpx;
			  height: 30rpx;
			  border-radius: 6rpx;
			  display: inline-block;
			  margin-right: 6rpx;
			  margin-top: -7rpx;
			  vertical-align: middle;//解决图片下边框间隙问题
			}
	      }
	      .shop-wrap {
	        margin-top: 10rpx;
	        display: flex;
	        align-items: center;
	        .shop-icon {
	          width: 30rpx;
	          height: 30rpx;
	          border-radius: 10rpx;
	          vertical-align: middle; // 解决图片下边框缝隙问题
	        }
	        .shop-name {
	          margin-left: 6rpx;
	          font-size: 24rpx;
	          color: #999;
	        }
	      }
	      .price-wrap {
	        margin-top: 10rpx;
	        display: flex;
	        align-items: center;
	        .price {
	          font-size: 28rpx;
	          color: #F51400;
	        }
	        .sales {
	          margin-left: 10rpx;
	          font-size: 16rpx;
	          color: #999;
			  text-decoration: line-through;
	        }
			.sales2{
				font-size: 22rpx;
			}
	      }
		  .shop-price-info{
			  display: flex;
			  justify-content: space-between;
		  }
	      .coupon-wrap {
	        margin-top: 10rpx;
	        display: flex;
	        align-items: center;
	        width: 150rpx;
	        height: 30rpx;
	        background-image: url("https://ld.726p.com/ldyx_static/imgs/bg-quan-small.png");
	        background-repeat: no-repeat;
	        background-size: 100% 100%;
	        color: #F51400;
	        font-size: 20rpx;
	        .label {
	          width: 50rpx;
	          text-align: center;
	        }
	        .value {
	          flex: 1;
	          text-align: center;
	        }
	      }
	    }
	  }
	  .ll-goods-item-wrap{
		  border-bottom: none;
	  }
	}
	.goods-list-double-wrap {
		width: 700rpx;
	  display: flex;
	  justify-content: space-between;
	  flex-wrap: wrap;
	  background: #f5f5f5;
	  margin:auto;
	  margin-top: 22rpx;
	  .verticalGoodItem{
	    margin-bottom: 22rpx;
	  }
	}
	.guess-like-image{
		display: block;
		height: 30rpx;
		margin: 20rpx auto 10rpx;
	}
	.browse-time{
		font-size: 30rpx;
		line-height: 40rpx;
		padding: 10rpx 20rpx;
		color: #666;
	}
	.ll-background{
		background-color: #FFFFFF;
	}
</style>