front-end/mobile-code/src/pages/interest/invite.vue

<template>
	<div class="app-content">
		<div class="invite-top-wrap">
			<div class="invite-top-img">
				<img src="../../static/images/interest/invite.png" alt mode="widthFix" />
			</div>
			<div class="invite-top-price-wrap">
				<div class="flex-end-center">
					<span class="money-text">100</span>
					<span class="app-price">元</span>
				</div>
                <div class="app-color-2">
                    <span>受邀朋友可以得</span>
                    <span class="app-price">80元优惠券</span>
                </div>
			</div>
		</div>
		<div class="list-content">
			<div class="invite-tabs">
				<div class="tabs-list">
					<div class="tabs-img">
						<img src="../../static/images/interest/invited.png" alt mode="widthFix" />
					</div>
					<div class="tab-list-right">
						<div class>已邀请(人)</div>
						<div class="tabs-num">29</div>
					</div>
				</div>
				<div class="tabs-list">
					<div class="tabs-img">
						<img src="../../static/images/interest/ordered.png" alt mode="widthFix" />
					</div>
					<div class="tabs-list-right">
						<div class>已下单(人)</div>
						<div class="tabs-num">6</div>
					</div>
				</div>
			</div>
			<!-- 邀请记录 -->
			<div class="invite-list-blo">
				<div class="invite-list-tit flex-center-between">
					<div class="app-size-30">邀请记录</div>
					<div class="flex-center-end app-color-3">
						<span>规则说明</span>
						<i class="iconfont iconchangjianwentixiangguanwenti2"></i>
					</div>
				</div>
				<div class="invite-list-wrap">
					<div class="invite-list flex-center-between" v-for="(item, index) in 6" :key="index">
						<div class="list-left flex-center-start">
							<div class="list-img">
								<img src="../../static/images/user/attr-default.png" alt mode="widthFix" />
							</div>
							<div class>
								<div class="app-size-30">冯宝宝</div>
								<div class="app-color-3">
									<span>2019-10-10 10:00 下单</span>
									<span class="app-price">¥198</span>
								</div>
							</div>
						</div>
						<div class="app-size-26">已兑奖</div>
					</div>
					<div class="load-more flex-center-center app-color-3">加载更多...</div>
				</div>
			</div>
		</div>
		<!-- 弹窗 -->
		<alert-module :show="showAlert" @click="hideAlert" @cancel="hideAlert">
			<div class="alt-wrap">
				<div class="alt-tit app-size-34">规则说明</div>
				<div class="alt-content">
					<div>1、邀请有礼活动老客可以获得奖励，新客可以获得超值的优惠券；</div>
					<div>2、只有本店老客户才能发起邀请；</div>
					<div>3、接受邀请的人需本店新客户；</div>
					<div>4、本活动只能邀请自己的朋友，请勿滥发邀请链接，否则取消邀请权力。</div>
				</div>
			</div>
		</alert-module>
		<app-share-mask :show="showShare" @click="hideShare" />
	</div>
</template>

<script>
import alertModule from '@/components/plugin/alert'
import appShareMask from '@/components/module/app-share-mask'
export default {
	name: 'invite',
	components: {
		alertModule,
		appShareMask
	},
	data() {
		return {
			showAlert: false,
			showShare: false
		}
	},
	methods: {
		hideAlert() {
			this.showAlert = false
		},
		hideShare() {
			this.showShare = false
		}
	}
}
</script>

<style lang="scss" scoped>
	.app-content {
		width: 100%;
		// position: relative;
		// 弹窗
		/deep/.tui-alert-content {
			padding: 40px 40px 0;
		}
		.alt-wrap {
			.alt-content {
				margin-top: 30px;
				margin-bottom: 30px;
				text-align: left;
				color: $fontColor2;
			}
		}
	}
	.invite-top-wrap {
		position: relative;
		.invite-top-price-wrap {
			position: absolute;
			top: 120px;
			left: 0;
            right: 0;
            text-align: center;
            .flex-end-center {
                margin-bottom: 30px;
            }
            .money-text {
                color: $mainColor;
                font-size: 110px;
            }
		}
	}
	.list-content {
		position: relative;
		top: -100px;
		width: 96%;
		margin: 0 auto;
	}
	.invite-tabs {
		padding: 20px 60px 24px;
		// border-bottom: 20px solid #f5f5f5;
		margin-bottom: 20px;
		color: $fontColor3;
		border-radius: 10px;
		background-color: #fff;
		@include disFlex(center, space-between);
		.tabs-list {
			@include disFlex(center, flex-end);
		}
		.tabs-img {
			width: 90px;
			margin-right: 20px;
		}
		.tabs-num {
			font-size: 40px;
			color: #ff5400;
			margin-top: 8px;
		}
	}
	.invite-list-blo {
		padding: 20px 20px 24px;
		border-radius: 10px;
		background-color: #fff;
		.invite-list-tit {
			margin-bottom: 20px;
			.iconfont {
				margin-left: 10px;
				font-size: 34px;
			}
		}
		.invite-list-wrap {
			.invite-list {
				padding: 14px 0;
				border-bottom: 1px solid $borderColor;
			}
			.list-img {
				width: 80px;
				margin-right: 20px;
			}
			// 加载更多
			.load-more {
				padding: 24px 0 6px;
			}
		}
	}
</style>