fanyunAi/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;
						console.log('that.ruleInfo', that.ruleInfo);
						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>