mplace_source/components/zaiui-common/view/my.vue

<template>
	<view class="zaiui-my-box" :class="show?'show':''">
		<view class="bg-gradual-red zaiui-head-box">
			<!--标题栏-->
			<!--小程序端不显示-->
			<!-- #ifndef MP -->
			<bar-title :isBack="false" :fixed="false">
				<!-- <block slot="right">
					<text class="cuIcon-camera"/>
					<text class="cuIcon-settings" @tap="setupTap"/>
				</block> -->
			</bar-title>
			<!-- #endif -->
			
			<!--用户信息-->
			<view class="zaiui-user-info-box">
				<!--未登陆-->
				<view class="login-user-view" v-if="isLogin">
					<view class="login-user-avatar-view">
						<view class="cu-avatar round lg" style="background-image:url(/static/images/avatar/1.jpg);"/>
					</view>
					<button class="cu-btn sm radius" @tap="loginUrlTap">立即登录</button>
				</view>
				
				<!--已登陆-->
				<view class="cu-list menu-avatar" v-else>
					<view class="cu-item">
						<view class="cu-avatar round lg" :style="`background-image:url(${user.avatar});`"/>
						<view class="content text-xl">
							<view class="text-white">
								<text class="margin-right">{{user.name}}</text>
								<!-- <text class="text-sm" @tap="loginTap">切换未登陆页面</text> -->
							</view>
							<!-- <view class="text-white-bg text-sm">
								<text class="text-border-x">关注 2</text>
								<text>粉丝 9</text>
							</view> -->
						</view>
					</view>
				</view>
			</view>
			
			<!--用户数据-->
			<view class="zaiui-user-info-num-box">
				<view class="cu-list grid col-4 no-border" style="justify-content: space-around;">
					<view class="cu-item" @tap="cartTap">
						<view class="text-xl" v-if="isLogin">-</view>
						<view class="text-xl" v-else>{{user.cash}}</view>
						<text class="text-sm">钱包</text>
					</view>
					<view class="cu-item" @tap="footmarkTap">
						<view class="text-xl" v-if="isLogin">-</view>
						<view class="text-xl" v-else>{{user.score_cash}}</view>
						<text class="text-sm">积分</text>
					</view>
				</view>
			</view>
			
			<!--用户提示-->
			<!-- <view class="text-sm zaiui-user-info-tip-box" v-if="!login" @tap="realNameTap">
				<view class="text-cut">偷偷告诉你，实名认证后宝贝更易卖出哦~</view>
				<text class="cuIcon-right icon"/>
			</view>	 -->
		</view>
		
		
		<view class="zaiui-view-content">
			<!--用户数据-->
			<view class="padding-xs bg-white zaiui-user-info-order-box">
				<view class="text-black text-lg text-bold padding-sm">我的交易</view>
				<view class="cu-list grid col-4 no-border">
					<view class="cu-item" v-for="item in orderInfo" :key="item.name" @click="order_list_tap(item)">
						<view class="text-xxl text-red" v-if="isLogin">
							<text class="cuIcon-presentfill"></text>
						</view>
						<view class="text-xxl text-black" v-else>{{item.num}}</view>
						<text class="text-sm">{{item.name}}</text>
					</view>
				</view>
			</view>
			
			<!--天天有钱-->
			<!-- <view class="padding-xs bg-white margin-top zaiui-user-info-money-box">
				<view class="text-black text-lg text-bold padding-sm">天天有钱</view>
				<view class="grid col-2 money-col">
					<view class="money-item">
						<view class="money-item-view">
							<view class="cu-avatar lg" style="background-image:url(/static/images/my/1.png);"/>
							<view class="money-content">
								<view class="text-black text-cut">边逛边赚钱</view>
								<view class="text-gray text-sm text-cut">最高提现20元</view>
							</view>
						</view>
					</view>
					<view class="money-item">
						<view class="money-item-view">
							<view class="cu-avatar lg" style="background-image:url(/static/images/my/2.png);"/>
							<view class="money-content">
								<view class="text-black text-cut">发条借钱</view>
								<view class="text-gray text-sm text-cut">最高额度50000</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			 -->
			<!--推荐工具-->
			<view class="padding-xs bg-white margin-top zaiui-user-info-tools-box">
				<view class="padding-sm tools-view">
					<view class="text-black text-bold text-lg tools-title">工具</view>
					<!-- <view class="text-gray text-sm tools-right">
						<text>更多</text>
						<text class="cuIcon-right"/>
					</view> -->
				</view>
				
				<view class="zaiui-tools-list-box">
					<view class="cu-list grid col-4 no-border">
						<block v-for="(item,index) in toolsList" :key="index">
							<view class="cu-item" v-if="index < 12" @click="gridTap(item)">
								<view class="text-black" :class="['cuIcon-' + item.icon]"/>
								<text>{{item.name}}</text>
							</view>
						</block>
					</view>
				</view>
				
			</view>
			
		</view>
		
		<!--占位底部距离-->
		<view class="cu-tabbar-height"></view>
	</view>
</template>

<script>
	import barTitle from '@/components/zaiui-common/basics/bar-title';
	
	import _my_data from '@/static/zaiui/data/my.js';	//虚拟数据
	import _tool from '@/static/zaiui/util/tools.js';	//工具函数
	export default {
		name: 'my',
		components: { 
			barTitle
		},
		data() {
			return {
				toolsList: [{
					id: 1,
					icon: 'service',
					name: '会员',
					path: '/pages/my/vip'
				},{
					id: 2,
					icon: 'squarecheck',
					name: '代理',
					path: '/pages/my/agent'
				},{
					id: 3,
					icon: 'friend',
					name: '收藏'
				},{
					id: 4,
					icon: 'moneybag',
					name: '评价'
				},{
					id: 5,
					icon: 'read',
					name: '下载'
				},{
					id: 6,
					icon: 'settings',
					name: '设置',
					path: '/pages/my/personal-data'
				}],
				isLogin: false,
				user: {},
				orderInfo: []
			}
		},
		props: {
			show: {
				type: Boolean,
				default: true
			},
			scrollY: {
				type: Number,
				default: 0
			},
			scrollBottom: {
				type: Number,
				default: 0
			}
		},
		watch: {
			scrollY() {
				//通知他妈的滚动了。
				this.setPageScroll(this.scrollY);
			},
			scrollBottom() {
				if(this.scrollBottom != 0) {
					//通知他妈的触底了
					this.setReachBottom();
				}
			},
		},
		created() {
			//加载虚拟数据
			// this.toolsList = _my_data.toolsListData();
			this.loadUserInfo().then(res => {
				this.orderInfo = res.order;
			})
		},
		mounted() {
			_tool.setBarColor(false);
			uni.pageScrollTo({
			    scrollTop: 0,
			    duration: 0
			});
		},
		methods: {
			//页面被滚动
			setPageScroll(scrollTop) {
				//console.log(scrollTop);
			},
			//触底了
			setReachBottom() {
				console.log('触底了');
			},
			//购物车
			cartTap() {
				uni.navigateTo({
					url: "/pages/goods/my_cart"
				});
			},
			//足迹
			footmarkTap() {
				uni.navigateTo({
					url: "/pages/my/footmark"
				});
			},
			//我买到的
			order_list_tap(item) {
				uni.navigateTo({
					url: "/pages/order/list?type="+item.status
				});
			},
			loginUrlTap() {
				uni.navigateTo({
					url: "/pages/login/login"
				});
			},
			loginTap() {
				if(this.isLogin) {
					this.isLogin = false;
				} else {
					this.isLogin = true;
				}
			},
			realNameTap() {
				uni.navigateTo({
					url: "/pages/real_name/index"
				});
			},
			setupTap() {
				uni.navigateTo({
					url: "/pages/my/set-up"
				});
			},
			gridTap(item) {
				uni.navigateTo({
					url: item.path
				});
			},
			sponsoredTap() {
				uni.navigateTo({
					url: "/pages/my/sponsored"
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.zaiui-my-box {
		width: 100%;
		display: none;
		.zaiui-head-box {
			padding-top: 0;
			padding-bottom: 72.72upx;
			.zaiui-user-info-box {
				/* #ifdef MP */
				padding-top: calc(var(--status-bar-height) + 50upx);
				/* #endif */
				.login-user-view {
					position: relative;
					text-align: center;
					.login-user-avatar-view {
						position: relative;
						margin-bottom: 18.18upx;
					}
				}
				.cu-list.menu-avatar>.cu-item {
					background-color: inherit;
					.content {
						width: calc(100% - 94.54upx - 59.99upx - 20upx);
						.text-white-bg {
							color: #e8e8e8;
							.text-border-x {
								margin-right: 25.45upx;
							    position: relative;
								&:after {
									position: absolute;
									background: #dddddd;
								    top: 5.45upx;
								    width: 1.81upx;
									right: -12.72upx;
								    height: 16.36upx;
								    content: " ";
								}
							}
						}
					}
					&:after {
						width: 0;
						height: 0;
						border-bottom: 0;
					}
				}
				.cu-list.menu-avatar>.cu-item .content>view:first-child {
					font-size: 34.54upx;
				}
			}
			.zaiui-user-info-num-box {
				.cu-list.grid.no-border {
					padding: 0;
				}
				.cu-list.grid.no-border>.cu-item {
				    padding-top: 27.27upx;
				    padding-bottom: 9.09upx;
				}
				.cu-list.grid {
					background-color: inherit;
				}
				.cu-list.grid>.cu-item text {
					color: #e8e8e8;
					font-size: 20upx;
					line-height: 27.27upx;
				}
			}
			.zaiui-user-info-tip-box {
				position: relative;
				margin: 18.18upx 27.27upx;
				border-radius: 9.09upx;
				padding: 18.18upx 27.27upx;
				background: #ea8d8d;
				background-image: linear-gradient(45deg, #f7615f, #f553b3);
				.text-cut {
					padding-right: 45.45upx;
				}
				.icon {
					position: absolute;
					right: 27.27upx;
					top: 23.63upx;
				}
			}
		}
		.zaiui-view-content {
			padding: 0 27.27upx 54.54upx;
			margin-top: -63.63upx;
			.zaiui-user-info-order-box {
				border-radius: 18.18upx;
				.cu-list.grid.no-border {
				    padding: 0;
				}
				.cu-list.grid.no-border>.cu-item {
				    padding-bottom: 9.09upx;
				}
			}
			.cu-list.grid>.cu-item text {
			    color: inherit;
			}
			.zaiui-user-info-money-box {
				border-radius: 18.18upx;
				.money-col {
					padding: 0 9.09upx 9.09upx;
					.money-item {
						position: relative;
						padding: 9.09upx;
						.money-item-view {
							border: 1.81upx solid #f3f2f3;
							border-radius: 18.18upx;
							position: relative;
							padding: 9.09upx;
							.cu-avatar {
								position: absolute;
								left: 9.09upx;
							}
							.money-content {
								position: relative;
							    margin-left: 109.09upx;
							    margin-bottom: 27.27upx;
							    top: 12.72upx;
							}
						}
					}
				}
			}
			.zaiui-user-info-tools-box {
				border-radius: 18.18upx;
				.tools-view {
					position: relative;
					.tools-title {
						padding-right: 81.81upx;	
					}
					.tools-right {
						position: absolute;
					    right: 9.09upx;
					    bottom: 23.63upx;	
					}
				}
				
			}
		}
	}
	.zaiui-my-box.show {
		display: block;
	}
</style>