digitalMen/pages/user/commission/goods.vue

<!-- 推广商品 -->
<template>
	<view>
		<view style="color: #000000;">
			<tn-nav-bar backgroundColor="#ffffff" :bottomShadow="false">推广套餐</tn-nav-bar>
			<view :style="{height: tobheight+'px'}"></view>
		</view>
		
		
		<view class="promotion-goods-wrap">
			<view class="goods-list u-flex" v-for="(item, index) in goodsList" :key="item.goods_id" @tap="jump('/pages/goods/detail', { id: item.id })">
				<view class="img-box">
					<!-- <image class="goods-img" :src="appInfo.share_img_path" mode="aspectFill"></image> -->
					<u--image :showLoading="true" :src="appInfo.share_img_path" width="100px" height="100px" ></u--image>
					</view>
				<view class="goods-info u-flex-col u-row-between">
					<view class="goods-title u-ellipsis-1">{{ item.title }}</view>
					<view class="goods-des u-ellipsis-1">{{ item.subtitle }}</view>
					<view class="goods-price u-flex font-OPPOSANS">
						<view class="price">￥{{ item.price }}</view>
						<view class="origin-price">￥{{ item.original_price }}</view>
					</view>
					<view class="commission-num">预计佣金：￥{{ Math.round(((item.price * (ruleInfo.first/100))) * 100) / 100 == 0?'低于0.01': Math.round(((item.price * (ruleInfo.first/100))) * 100) / 100}}</view>
					<!-- <view class="">{{Math.round((0.1*(ruleInfo.first/100)) * 100) / 100}}</view> -->
				</view>
				<!-- #ifdef H5 -->
				<button class="share-btn u-reset-button" @click.stop="h5share = true">分享赚</button>
				<!-- #endif -->
				<!-- #ifdef MP-WEIXIN -->
				<button class="share-btn u-reset-button" open-type="share">分享赚</button>
				<!-- #endif -->
			</view>
		
			<!-- 	分享组件 -->
			<!-- <shopro-share v-model="showShare" :posterInfo="posterInfo" :posterType="'goods'"></shopro-share> -->
			<!-- 缺省页 -->
			<!-- <shopro-empty v-if="isEmpty" :image="$IMG_URL + '/imgs/empty/no_data.png'" tipText="暂无数据"></shopro-empty> -->
			<!-- 更多 -->
			<u-loadmore  height="80rpx" status="'nomore'" icon-type="flower" color="#ccc" />
		</view>
		
		<!-- #ifdef H5 -->
		<u-popup :show="h5share" mode="center" @close="h5share = false">
			<view class="cu-dialog">
				<image class="guide-img" src="http://shopro.7wpp.com/imgs/modal/share_guide.png" mode=""></image>
			</view>
		</u-popup>
		<!-- #endif -->
		<wike-loading-page :isLoading="isLoading"></wike-loading-page>
	</view>
	
</template>

<script>
	import { mapMutations, mapActions, mapState, mapGetters } from 'vuex';
export default {
	components: {},
	data() {
		return {
			tobheight:45,
			platform: this.$platform.get(),
			showShare: false, //是否分享
			posterInfo: {}, //分享信息
			goodsList: [], //分销商品
			loadStatus: 'nomore', //loadmore-加载前的状态，loading-加载中的状态，nomore-没有更多的状态
			currentPage: 1,
			lastPage: 1,
			isEmpty: false,
			ruleInfo:{},
			h5share:false,
			type: 1,
			isLoading:true
		};
	},
	
	computed: {
		...mapGetters(['appInfo', 'userInfo', 'isLogin'])
	},
	onLoad() {
		const that = this;
		if(this.platform == 'wxMiniProgram'){
		var menumtop = uni.getMenuButtonBoundingClientRect().top - uni.getSystemInfoSync().statusBarHeight
		var paddingtop = uni.getSystemInfoSync().statusBarHeight + menumtop
		this.tobheight = (menumtop+paddingtop+uni.getMenuButtonBoundingClientRect().height)
		}
		this.getWithdrawRules();
		this.getGoodList()
	},
	// onUnload() {
	// 	share.setShareInfo();
	// },
	// onReachBottom() {
	// 	if (this.currentPage < this.lastPage) {
	// 		this.currentPage += 1;
	// 		this.getGoodList();
	// 	}
	// },
	onShow() {
		
		if (!this.isLogin) {
			uni.navigateTo({
				url: '../user/signin'
			});
		}
	},
	methods: {
		
		getWithdrawRules() {
			let that = this;
			that.$http('conf.getGroupConf',{group:'system.commission'}).then(res => {
				if (res.code === 0) {
					that.ruleInfo = res.data;
					uni.setNavigationBarTitle({
						title: that.appInfo.site_name
					});
					
					// that.selectedWithdrawType = that.ruleInfo.methods[0];
				}
			});
		},
		
		jump(path, parmas) {
			this.$Router.push({
				path: path,
				query: parmas
			});
		},
		
		getGoodList() {
			let that = this;
			that.loadStatus = 'loading';
			that.$http('member.list', {
				type: that.type
			}).then(res => {
				if (res.code === 0) {
					if(that.type<2){
						that.type++
						that.getGoodList()
					}
					
					that.goodsList = [...that.goodsList, ...res.data];
					// that.lastPage = res.data.last_page;
					// that.isEmpty = !that.goodsList.length;
					// that.loadStatus = that.currentPage < res.data.last_page ? 'loadmore' : 'nomore';
				}else{
					uni.showToast({
						title:'暂无数据',
						icon:'none'
					})
				}
				this.isLoading = false
			});
		}
	}
};
</script>

<style lang="scss">
page {
	background-color: #fff;
}
// 推广商品列表
.goods-list {
	padding: 30rpx;
	border-bottom: 1rpx solid rgba(#dfdfdf, 0.5);
	position: relative;
	.share-btn {
		position: absolute;
		bottom: 30rpx;
		right: 30rpx;
		width: 160rpx;
		line-height: 60rpx;
		background: linear-gradient(90deg, #a36fff, #5336ff);
		box-shadow: 0px 7rpx 11rpx 2rpx rgba(124, 103, 214, 0.34);
		border-radius: 30rpx;
		font-size: 28rpx;
		color: #fff;
		font-weight: 500;
	}
	.img-box {
		// border: 1rpx solid rgba(223, 223, 223, 0.43);
		margin-right: 30rpx;
		.goods-img {
			width: 200rpx;
			height: 200rpx;
		}
	}
	.goods-info {
		align-items: flex-start;
		height: 200rpx;

		.goods-title {
			width: 400rpx;
			font-size: 28rpx;
			font-weight: 500;
			color: #333333;
			margin-bottom: 10rpx;
		}
		.goods-des {
			width: 400rpx;
			font-size: 22rpx;
			font-weight: 500;
			color: #a8700d;
			margin-bottom: 10rpx;
		}
		.goods-price {
			margin-bottom: 10rpx;
			.price {
				font-size: 28rpx;
				font-weight: 500;
				color: #333333;
				margin-right: 16rpx;
			}
			.origin-price {
				font-size: 24rpx;

				font-weight: 400;
				text-decoration: line-through;
				color: #999999;
			}
		}
		.commission-num {
			font-size: 24rpx;
			font-weight: 500;
			color: #5e4ddf;
		}
	}
}
.cu-dialog {
		position: fixed;
		top: 60rpx;
		left: 100rpx;
	}
	.guide-img {
		width: 580rpx;
		height: 430rpx;
	}
</style>