liedou_uniapp/pages/optimization/optimization...

<template>
	<view>
		<!-- 顶部导航 -->
		<u-navbar class="navbar-wrap" title="优选圈" title-color="#333" :title-size="36" :title-bold="false" :is-back="false" :background="navbarBackground" >
			<view class="slot-wrap" style="margin-left:44rpx;"><u-icon name="search" color="#3D3D3D" size="44"></u-icon></view>
		</u-navbar>
		<!-- 优选内容 -->
		<swiper class="swiper" :style="'height:' + swiperHeight + 'px' " v-if="goodsList && goodsList.length" circular vertical previous-margin="0rpx" :next-margin="nextMargin">
			<swiper-item v-for="goodsItem in goodsList" :key="goodsItem.goods_id">
				<view class="goods-item-wrap">
					<u-lazy-load class="goods-img" :image="goodsItem.img" border-radius="10" />
					<!-- S 商品信息 -->
					<view class="info-wrap con-block">
					  <view class="tp-wrap">
					    <view class="lt-wrap">
						  <text class="price-title">{{goodsItem.is_coupon == 1 && goodsItem.coupon_price > 0 ? '券后价' : '' }} ¥</text>
					      <text class="price">{{ goodsItem.discount_price }}</text>
					      <text class="price-old">￥{{ goodsItem.price }}</text>
					    </view>
					    <view class="rt-wrap">
							<view class="salesVolume" v-if="goodsItem.volume > 100">
								月销:{{ $NumberHandle({value:goodsItem.volume,comma:true}) }}+
							</view>
					    </view>
					  </view>
					  <view class="bm-wrap">
					    <image class="shop-icon" v-if="goodsItem.shop_type == 0" src="https://ld.726p.com/ldyx_static/imgs/icon-tb.png" />
					    <image class="shop-icon" v-else-if="goodsItem.shop_type == 1" src="https://ld.726p.com/ldyx_static/imgs/icon-tmall.png" />
					    {{ goodsItem.title }}
					  </view>
					  <view class="btm-wrap">
					  	<view v-if="goodsItem.coupon_price > 0" class="coupon-wrap">
					  	  <text class="label">券</text>
					  	  <text class="value">¥{{ goodsItem.coupon_price }}</text>
					  	</view>
					  	<view v-if="user_level > 1 && goodsItem.commission_price > 0" class="coupon-wrap commission-wrap">
					  	  <text class="label">返</text>
					  	  <text class="value">¥{{ goodsItem.commission_price }}</text>
					  	</view>
					  </view>
					</view>
					<!-- E 商品信息 -->

					<!-- 底部按钮 -->
					<view class="footer-wrap" :style="{ 'padding-bottom': isIphoneX ? '66rpx' : '22rpx' }">
						<view class="btn-collect-wrap" v-if="goodsItem.is_favorites == 1" @click="onClickSetFavorites">
						  <image class="btn-collect-img" src="https://ld.726p.com/ldyx_static/imgs/icon-collect-on.png" />
						  <text class="btn-collect-text">已收藏</text>
						</view>
						<view class="btn-collect-wrap" v-else @click="onClickSetFavorites">
						  <image class="btn-collect-img" src="https://ld.726p.com/ldyx_static/imgs/icon-collect.png" />
						  <text class="btn-collect-text">收藏</text>
						</view>
					  <!-- 已登录按钮 -->
					  <view v-if="isLogin" class="btn-wrap">
					    <view class="btn-item lt-btn" @click="onClickFXZQ">
					      <!-- <image class="btn-icon" src="https://ld.726p.com/ldyx_static/imgs/icon-share.png" /> -->
					      <text class="btn-text">{{ user_level == 1 ? '分享' : '分享赚钱' }}</text>
					    </view>
					    <view class="btn-item rt-btn" @click="onClickGWSQ">
					      <!-- <image class="btn-icon" src="https://ld.726p.com/ldyx_static/imgs/icon-money.png" /> -->
					      <text class="btn-text">购物省钱</text>
					    </view>
					  </view>
					  <!-- 未登录按钮 -->
					  <view v-else class="btn-wrap">
					    <view class="btn-item lt-btn" @click="onClickZJGM">
					      <!-- <image class="btn-icon" src="https://ld.726p.com/ldyx_static/imgs/icon-buy.png" /> -->
					      <text class="btn-text">直接购买</text>
					    </view>
					    <view class="btn-item rt-btn" @click="onClickFYJGM">
					      <!-- <image class="btn-icon" src="https://ld.726p.com/ldyx_static/imgs/icon-money.png" /> -->
					      <text class="btn-text">省钱购买</text>
					    </view>
					  </view>
					</view>
				</view>
			</swiper-item>
		</swiper>
		<!-- <u-loadmore :status="loadmoreStatus" /> -->
	</view>

</template>
<script>
	const app = getApp()
	import { loadmoreOptions } from '../../utils/tools'
	export default {
		data() {
			return {
				navbarBackground: {
					// background: 'linear-gradient(90deg, #F57C29 0%, #F13641 100%)'
				},
				user_level: uni.getStorageSync('userInfo') ? uni.getStorageSync('userInfo').user_level : '', // 当前用户等级
				filter: {
					page: 1,
					hasNext: true,
				},
				loadmoreStatus: loadmoreOptions.LOAD_MORE,
				goodsList: [], // 商品列表数据
				swiperHeight: '800', // swiper的高度
				nextMargin: '0px', // 轮播图的后边距
			}
		},
		watch: {
			user_level() { // 监听用户等级变化 => 更新页面列表数据
				// this.handleRefreshGoodsList()
			}
		},
		onLoad() {
			this.swiperHeight = `${uni.getSystemInfoSync().windowHeight - app.globalData.statusBarHeight - app.globalData.navigationBarHeight - 14}`;
			this.nextMargin = `${Number(this.swiperHeight) - uni.upx2px(1120)}px`
			this.handleGetGoodsList()
		},
		methods: {
			// 获取商品获取商品列表数据列表
			async handleGetGoodsList() {
				if (!this.filter.hasNext) return false
				try {
					uni.showLoading({
						title: '加载中...',
						mask: true
					})
					this.loadmoreStatus = loadmoreOptions.LOADING
					const url = this.$api.optimization_youXuanGoodsList
					const params = {
						page: this.filter.page,
					}
					const { data: res = {} } = await this.$postJSON(url, params)
					this.loadmoreStatus = loadmoreOptions.LOAD_MORE
					if (res && res.errno == 0 && Array.isArray(res.rst)) {
						if (!res.rst.length) { // 当前页无数据 => 更改下一页标识
							this.filter.hasNext = false
							this.loadmoreStatus = loadmoreOptions.NO_MORE
						}
						this.goodsList = [...this.goodsList, ...res.rst]
					} else {
						uni.showToast({
							title: res.err || '操作失败',
							icon: 'none'
						})
					}
				} catch (error) {
					console.log('error => ', error)
				} finally {
					uni.hideLoading()
					// if (this.isOnPullDownRefresh) { // 如果正在下拉刷新 => 停止
					// 	uni.stopPullDownRefresh()
					// 	this.isOnPullDownRefresh = false
					// }
				}
			},
		}
	}
</script>
<style scoped lang="scss">
	.swiper {
		width: 710rpx;
		height: 1180rpx;
		margin: auto;
		margin-top: 10px;
	}
	.goods-item-wrap{
		display: block;
		height: 1100rpx;
		border-radius: 40rpx;
		background-color: #fff;
		margin-bottom: 20rpx;
		overflow: hidden;
		.goods-img{
			width: 100%;
			height: 710rpx;
		}
	}
	.info-wrap {
		margin: 32rpx 26rpx 0;
	  .tp-wrap {
	    display: flex;
	    align-items: center;
	    justify-content: space-between;
	    .lt-wrap {
	      display: flex;
	      align-items: baseline;
			.price-title{
				color: #FF4040;
				font-size: 28rpx;
				line-height: 40rpx;
			}
	      .price {
	        font-size: 48rpx;
	        color: #FF4040;
			  font-weight: bold;
			  line-height: 66rpx;
			  margin-left: 12rpx;
	      }
	      .price-old {
	        margin-left: 16rpx;
	        font-size: 24rpx;
			  line-height: 34rpx;
	        text-decoration: line-through;
	        color: #999999;
	      }

	    }
	    .rt-wrap {
	      display: flex;
	      align-items: center;
	      .btn-wrap {
	        display: flex;
	        align-items: center;
	        .btn-img {
	          width: 32rpx;
	          height: 32rpx;
	        }
	        .btn-text {
	          font-size: 25rpx;
	          color: #999;
	        }
	      }
	    }
	  }
	  .bm-wrap {
	    margin-top: 20rpx;
	    font-size: 34rpx;
		  font-weight: bold;
		  line-height: 48rpx;
	    color: #333333;
	    .shop-icon {
	      margin-right: 6rpx;
	      width: 32rpx;
	      height: 32rpx;
			margin-top: -10rpx;
	      border-radius: 10rpx;
	      vertical-align: middle; // 解决图片下边框缝隙问题
	    }
	  }
		.quan-block{
			width: 100%;
			height: 132rpx;
			background: url('https://ld.726p.com/ldyx_static/imgs/quan-bg.png') no-repeat;
			background-size: 100%;
			margin-top: 44rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.quan-button{
				width: 214rpx;
				color: #FFFFFF;
				font-size: 36rpx;
				line-height: 50rpx;
				text-align: center;
			}
			.quan-info{
				flex:1;
				padding-left: 20rpx;
				.quan-info-1{
					color: #FFFFFF;
					font-size: 24rpx;
					line-height: 34rpx;
					.quan-price{
						color:#FFFFFF;
						font-size:56rpx;
						line-height: 70rpx;
					}
				}
				.quan-time{
					color: #FFFFFF;
					font-size: 22rpx;
					line-height: 32rpx;
				}
			}
		}
		.btm-wrap {
		    display: flex;
		    align-items: center;
		    margin-top: 20rpx;
		    .coupon-wrap {
		      display: flex;
		      align-items: center;
		      width: 144rpx;
		      height: 36rpx;
		      background-image: url("https://ld.726p.com/ldyx_static/imgs/bg-quan-small.png");
		      background-repeat: no-repeat;
		      background-size: 100% 100%;
		      color: #FF4040;
		      font-size: 25rpx;
		  			  line-height: 36rpx;
		      .label {
		        width: 46rpx;
		        text-align: center;
		      }
		      .value {
		        flex: 1;
		        text-align: center;
		      }
		    }
			.commission-wrap {
				background-image: url("https://ld.726p.com/ldyx_static/imgs/fan.png");
				color: #AE4300;
				margin-left: 12rpx;
			}
		}
	}
	.footer-wrap {
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 150rpx;
		padding: 25rpx;
		border-top: 1rpx solid #eee;
		margin-top: 44rpx;
		position: absolute;
		bottom: 20rpx;
		left: 0;
	  .btn-wrap {
	    background-color: #FFBB93;
	    display: flex;
	    align-items: center;
		  width: 600rpx;
		  height: 84rpx;
	    border-radius: 84rpx;
	    overflow: hidden;
	    .btn-item {
	      height: 100%;
	      flex: 1;
	      display: flex;
	      justify-content: center;
	      align-items: center;
	      .btn-icon {
	        margin-right: 10rpx;
	      }
	      .btn-text {
	        color: #fff;
	        font-size: 36rpx;
			  font-weight: bold;
			  line-height: 84rpx;
	      }
	      &.lt-btn {
	        .btn-icon {
	          width: 42rpx;
	          height: 38rpx;
	        }
	      }
	      &.rt-btn {
				background: linear-gradient(90deg, #FF9048 0%, #FB3F3C 100%);
				border-radius: 42rpx;
	        .btn-icon {
	          width: 42rpx;
	          height: 44rpx;
	        }
	      }
	    }
	  }
	}
	.btn-collect-wrap{
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-right: 28rpx;
		.btn-collect-img{
			width: 42rpx;
			height: 42rpx;
		}
		.btn-collect-text{
			color: #666666;
			font-size: 20rpx;
			line-height: 28rpx;
		}
	}
	.swiper-list {
		margin-top: 40rpx;
		margin-bottom: 0;
	}
	.uni-common-mt {
		margin-top: 60rpx;
		position: relative;
	}
	.info {
		position: absolute;
		right: 20rpx;
	}
	.uni-padding-wrap {
		width: 550rpx;
		padding: 0 100rpx;
	}
</style>