mplace_source/pages/my/agent.vue

<template>
	<view>
		<!--标题栏-->
		<bar-title bgColor="bg-white" isBack title="代理">
			<block slot="content">代理</block>
		</bar-title>
		
		<view class="zaiui-user-info-box">
			<view class="cu-list menu-avatar">
				<view class="cu-item">
					<view class="cu-avatar round lg" :style="`background-image:url(${user.avatar || 'http://center.yuandaibao.com/data/yuandaibaov1/upload/1/92/4f/9e/924f9e2d2bd8fcdfea7af989db1a3f8a.jpg'});`"/>
					<view class="content text-xl">
						<view class="flex flex-direction" style="align-items: flex-start;">
							<text class="margin-right">{{user.name}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="zaiui-flex-tab show" style="padding-top: 40upx;">
			<view class="flex">
				<view class="basis-xxl">
					<scroll-view scroll-x class="nav z" scroll-with-animation>
						<block v-for="(item,index) in headTab.list" :key="item.id">
							<view class="cu-item" :class="item.id==headTab.TabCur?'select':''" @click="tabSelect" :data-id="item.id">
								<view>{{item.name}}</view>
								<view class="tab-dot bg-red"/>
							</view>
						</block>
					</scroll-view>
				</view>
			</view>
		</view>
		
		<block v-if="headTab.TabCur == 0">
			<view class="cu-list menu sm-border margin-top">
				<view class="cu-item">
					<view class="content">我的邀请码</view>
					<view class="action">
						<text class="text-gray">{{code}}<text class="cuIcon-copy" style="margin-left: 5px;"></text></text>
					</view>
				</view>
				<view class="cu-item">
					<view class="content">上级代理</view>
					<view class="action">
						<text class="text-red" v-if="parent == 2" @click="bottomModal=true">去绑定</text>
						<text class="text-gray" v-else>----</text>
					</view>
				</view>
			</view>
			<view class="card" v-for="item in agentlist">
				<image class="card-bg" src="@/static/images/my/price_shape.png">
				<view class="flex hd">
					<view class="col">
						<view class="text-white h4">
							<text class="text-white cuIcon-agentcard"></text>
							{{item.name}}
						</view>
					</view>
					<view class="col text-end">
						<button class="cu-btn bg-red" data-type="agent" @click="handleBuy(item.id)">立即购买</button>					    
					</view>
				</view>
				<view class="detail">
					<view class="text-white price">价格<text>￥{{item.price}}</text></view>
				</view>
				<view class="detail">
					<view class="text-white" v-html="item.content"></view>
				</view>
			</view>
		</block>
		<block v-else>
			<view class="bg-white zaiui-news-list-box">
				<view class="margin-bottom cu-list menu-avatar">
					<view class="cu-item goods">
						<view class="cu-avatar round" style="background-image:url(/static/images/avatar/1.jpg);">
						</view>
						<view class="content">
							<view class="text-black">
								<text class="margin-right-xs">仔仔</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</block>
	
		<view class="cu-modal bottom-modal zaiui-bottom-modal-box" :class="bottomModal?'show':''">
			<view class="cu-dialog bg-white">
				<!--标题-->
				<view class="text-black text-center margin-tb text-lg zaiui-title-bar">
					<text>填写上级</text>
					<text class="cuIcon-close close-icon" @tap="bottomModal=false"></text>
				</view>
				
				<!--内容区域-->
				<view class="zaiui-modal-content" style="height: auto;">
					<view class="zaiui-view-box select" >
						<!--商品信息-->
						<view class="cu-list menu-avatar">
							<view class="cu-item" style="align-items: center;">
								<input type="text" style="flex:1" v-model="invite" placeholder="请输入上级邀请码" />
							</view>
						</view>
					</view>
					
					<view class="zaiui-footer-fixed">
						<view class="flex flex-direction">
							<button class="cu-btn bg-red lg" @click="bindParent">确定</button>
						</view>
					</view>
					
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import barTitle from '@/components/zaiui-common/basics/bar-title';
	import _tool from '@/static/zaiui/util/tools.js';	//工具函数
	export default {
		components: {
			barTitle
		},
		data() {
			return {
				skin: true,
				headTab: {
					list: [{
						id: 0,
						name: '代理信息'
					}, {
						id: 1,
						name: '邀请列表'
					}],
					TabCur: 0
				},
				user: {},
				place: {},
				agentlist: [],
				invitedlist: [],
				code: '',
				parent: '',
				bottomModal: false,
				invite: ''
			}
		},
		onLoad() {
			this.loadInfo()
			this.loadList()
		},
		onReady() {
			_tool.setBarColor(true);
			uni.pageScrollTo({
			    scrollTop: 0,
			    duration: 0
			});
		},
		methods: {
			loadInfo() {
				this.reqByuser({
					url: '?l=agent.info', 
					data: {},
					success: res => {
						if(res.data.status == 1) {
							this.user = res.data.data.user;
							this.code = res.data.data.code;
							this.parent = res.data.data.parent;
						}else {
							uni.showToast({
								icon: 'error',
								title: res.data.msg
							})
						}
					}
				})
			},
			loadList() {
				this.reqByuser({
					url: '?l=agent.list', 
					data: {},
					success: res => {
						if(res.data.status == 1) {
							this.agentlist = res.data.data.list;
						}else {
							uni.showToast({
								icon: 'error',
								title: res.data.msg
							})
						}
					}
				})
			},
			loadInvitedList() {
				this.reqByuser({
					url: '?l=agent.getChild', 
					data: {},
					success: res => {
						if(res.data.status == 1) {
							this.invitedlist = res.data.data.list;
						}else {
							uni.showToast({
								icon: 'error',
								title: res.data.msg
							})
						}
					}
				})
			},
			handleBuy(id) {
				this.reqByuser({
					url: '?l=agent.buy', 
					data: {
						id
					},
					success: res => {
						if(res.data.status == 1) {
							console.log(res.data.data)
							location.href = res.data.data.pay.link;
						}else {
							uni.showToast({
								icon: 'error',
								title: res.data.msg
							})
						}
					}
				})
			},
			tabSelect(e) {
				this.headTab.TabCur = e.currentTarget.dataset.id
				if(e.currentTarget.dataset.id == 1) {
					this.loadInvitedList()
				}
			},
			bindParent() {
				this.reqByuser({
					url: '?l=agent.addParent', 
					data: {
						invite: this.invite
					},
					success: res => {
						if(res.data.status == 1) {
							uni.showToast({
								icon: 'success',
								title: '绑定成功'
							})
							this.loadInfo()
						}else {
							uni.showToast({
								icon: 'error',
								title: res.data.msg
							})
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	/* #ifdef APP-PLUS */
		@import "../../static/colorui/main.css";
		@import "../../static/colorui/icon.css";
		@import "../../static/zaiui/style/app.scss";
	/* #endif */
	@import "../../static/zaiui/style/goods.scss";
</style>
<style lang="scss" scoped>
	.card {
		position: relative;
		width: 680upx;
		height: 380upx;
		margin: 32upx auto 0;
		border-radius: 15upx;
		box-sizing: border-box;
		padding: 32upx;
		
		image {
			position: absolute;
			background-color: #0cbc87;
			width: 100%;		
			border-radius: 15upx;
			height: 100%;
			left: 0;
			top: 0;
			opacity: 0.8;
		}
		
		&>view {
			position: relative;
			z-index: 1;
		}
		
		.hd {
			align-items: center;
			justify-content: space-between;
			margin-bottom: 40upx;
			
			.h4 {
				font-size: 40upx;
				font-weight: bolder;
				
				text {
					margin-right: 10upx;
				}
			}
		}
		.detail {
			display: flex;
			margin-bottom: 20upx;
			justify-content: space-between;
			
			.price {
				display: flex;
				flex-direction: column;
				width: 45%;
				font-size: 28upx;
				margin-right: 20upx;
				
				text {
					font-size: 40upx;
					margin-top: 5upx;
					&.through {
						text-decoration: line-through;
						font-size: 28upx;
					}
				}
			}
		}
	}
	
</style>
<style lang="scss" scoped>
	.zaiui-news-box {
		width: 100%;
		display: none;
		.zaiui-follow-box {
			.action-text-cut {
				width: 70%;
			}
		}
		.zaiui-grid-menu {
			.cu-list.grid.no-border>.cu-item {
				.cu-avatar {
					margin: 0 auto;
				}
			}
		}
		.zaiui-news-list-box {
			padding: 0 9.09upx;
			.cu-list.menu-avatar>.cu-item>.cu-avatar {
				width: 81.81upx;
				height: 81.81upx;
			}
			.cu-list.menu-avatar>.cu-item {
				height: 163.63upx;
				align-items: inherit;
				.cu-avatar {
					margin-top: 25.45upx;
					.cu-tag.badge {
					    width: 21.81upx;
					    height: 21.81upx;
					    top: 0;
					    right: 0;
					    border: 1.81upx solid #fff;	
					}
				}
				.content {
				    left: 136.36upx;
					margin-top: 18.18upx;
				    width: calc(100% - 90.9upx - 54.54upx - 18.18upx);
				    line-height: 1.7em;	
					.cu-tag {
						padding: 0 3.63upx;
						text {
							position: relative;
							top: -2upx;
						}
					}
				}
				&:after {
					width: 0;
					height: 0;
					border-bottom: 0;
				}
			}
			.cu-list.menu-avatar>.cu-item.goods {
				.content {
				    width: calc(100% - 309.09upx);
				}
				.action {
					position: absolute;	
				    right: 23.63upx;
					width: 127.27upx;
					.cu-avatar {
						width: 127.27upx;
						height: 127.27upx;
						margin-top: 18.18upx;
					}
				}
			}
		}
	}
	.zaiui-news-box.show {
		display: block;
	}
</style>