MeiMeiZhuan/pages/user/user.vue

<template>
	<view class="container">
		<!-- #ifdef APP-PLUS -->
		<view class="app-status"></view>
		<!-- #endif -->
		<view class="content-box">
			<view class="user-section">
				<view class="bg"><image class="bg-img" src="https://mmz.liuniu946.com/statics/img/img15.png"></image></view>
				<view class="user-info-box ">
					<view class="detail flex" @click="navTo('/pages/userinfo/userinfo')">
						<view class="portrait-box"><image class="portrait" :src="userInfo.avatar || '/static/error/missing-face.png'"></image></view>
						<view class="info-box">
							<view class="flex_item">
								<view class="username">{{ userInfo.nickname || '游客' }}</view>
								<view
									class="flex_item"
									:class="userInfo.level_info && userInfo.level_info.level_id == null ? 'level1' : 'level'"
									v-if="userInfo.level_info && userInfo.super_partner == 0"
								>
									<!-- <view class="level_img"><image :src="userInfo.vip_icon"></image></view> -->
									<text class="level_text">{{ userInfo.level_info.name }}</text>
								</view>
								<view
									class="flex_item"
									:class="userInfo.level_info && userInfo.level_info.level_id == null ? 'level1' : 'level'"
									v-if="userInfo.level_info && userInfo.super_partner == 1"
								>
									<!-- <view class="level_img"><image :src="userInfo.vip_icon"></image></view> -->
									<text class="level_text">超级合伙人</text>
								</view>
							</view>
							<!-- <view class="font-size-sm">邀请人：代勇明</view> -->
							<view class="font-size-sm" v-if="userInfo.spread_nickname">邀请人：{{ userInfo.spread_nickname }}</view>
							<!-- <view class="font-size-sm" v-if="userInfo.uid" >会员ID：{{userInfo.uid}}</view> -->
						</view>
					</view>
					<view class="config iconfont">
						<image src="https://mmz.liuniu946.com/statics/img/img19.png" @click="navTo('/pages/set/set')"></image>
						<!-- <image src="../../static/img/img20.png" ></image> -->
					</view>
				</view>
			</view>
			<view class="cover-container">
				<view class="flex thighday">
					<view class="thighday-background-img flex">
						<view class="row-2">
							<view class="row-2-1 flex1">
								<view class="flex1">
									<image class="row-img2" src="../../static/img/img17.png"></image>
									<text class="row-word2">升级享更多优惠权益</text>
								</view>
								<view class="row-button flex1" @click="navTo('/pages/partner/partner')">
									<text class="button-word">立即升级</text>
									<view class="button-img"></view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 订单 -->
				<view class="item-box">
					<view class="box-title flex borde-b">
						<view class="title"><text>我的订单</text></view>
						<view class="link" @click="navTo('/pages/order/order?state=0')" hover-class="common-hover">
							<text>全部订单</text>
							<text class="iconfont iconenter"></text>
						</view>
					</view>
					<view class="order-section" style="justify-content: space-around;">
						<view class="order-item" @click="navTo('/pages/order/order?state=0')" hover-class="common-hover" :hover-stay-time="50">
							<view class=" icon position-relative">
								<image class="icon-img" src="/static/img/img21.png" mode="aspectFit"></image>
								<view class="corner" v-if="orderInfo.unpaid_count > 0">
									<text>{{ orderInfo.unpaid_count }}</text>
								</view>
							</view>
							<text>待付款</text>
						</view>
						<view class="order-item" @click="navTo('/pages/order/order?state=1')" hover-class="common-hover" :hover-stay-time="50">
							<view class=" icon position-relative">
								<image class="icon-img" src="/static/img/img22.png" mode="aspectFit"></image>
								<view class="corner" v-if="orderInfo.unshipped_count > 0">
									<text>{{ orderInfo.unshipped_count }}</text>
								</view>
							</view>
							<text>待发货</text>
						</view>
						<view class="order-item" @click="navTo('/pages/order/order?state=2')" hover-class="common-hover" :hover-stay-time="50">
							<view class="icon position-relative">
								<image class="icon-img" src="/static/img/img23.png" mode="aspectFit"></image>
								<view class="corner" v-if="orderInfo.received_count > 0">
									<text>{{ orderInfo.received_count }}</text>
								</view>
							</view>
							<text>待收货</text>
						</view>
						<view class="order-item" @click="navTo('/pages/order/order?state=3')" hover-class="common-hover" :hover-stay-time="50">
							<view class="icon position-relative">
								<image class="icon-img" src="/static/img/img24.png" mode="aspectFit"></image>
								<view class="corner" v-if="orderInfo.evaluated_count > 0">
									<text>{{ orderInfo.evaluated_count }}</text>
								</view>
							</view>
							<text>待评价</text>
						</view>
					</view>
				</view>
			</view>
			<view class="buttom-box flex">
				<view class="buttom" @click="navTo('/pages/wallet/wallet')">
					<view class="money">￥{{ userInfo.now_money || 0 }}</view>
					<text class="text">余额</text>
				</view>
				<view class="interval"></view>
				<view class="buttom" @click="navTo('/pages/wallet/wallets')">
					<view class="money">￥{{ userInfo.brokerage_price || 0 }}</view>
					<text class="text">推广收益</text>
				</view>
			</view>
			<view class="item-box margin" style="width: 94%;">
				<!-- <view class="order-section1">
					<view class="order-item" @click="navTo('/pages/wallet/accounts')" hover-class="common-hover" :hover-stay-time="50">
						<view class="item-1">
							<image class="icon-img" src="https://mmz.liuniu946.com/statics/img/img25.png" mode="aspectFit"></image>
							<text class="word-1">账号管理</text>
						</view>
						<view class="item-1">
							<image class="img" src="../../static/img/img13.png"></image>
						</view>
					</view>
				</view> -->
				<view class="order-section1">
					<view class="order-item" @click="navTo('/pages/address/address')" hover-class="common-hover" :hover-stay-time="50">
						<view class="item-1">
							<image class="icon-img" src="https://mmz.liuniu946.com/statics/img/img26.png" mode="aspectFit"></image>
							<text class="word-1">收货地址</text>
						</view>
						<view class="item-1"><image class="img" src="../../static/img/img13.png"></image></view>
					</view>
				</view>
				<view class="order-section1">
					<view class="order-item" @click="navTo('/pages/activity/bargain/index')" hover-class="common-hover" :hover-stay-time="50">
						<view class="item-1">
							<image class="icon-img" src="https://mmz.liuniu946.com/statics/img/img30.png" mode="aspectFit"></image>
							<text class="word-1">砍价记录</text>
						</view>
						<view class="item-1"><image class="img" src="../../static/img/img13.png"></image></view>
					</view>
				</view>
				<view class="order-section1">
					<view class="order-item" @click="navTo('/pages/user/spread')" hover-class="common-hover" :hover-stay-time="50">
						<view class="item-1">
							<image class="icon-img" src="https://mmz.liuniu946.com/statics/img/img27.png" mode="aspectFit"></image>
							<text class="word-1">我的推广</text>
						</view>
						<view class="item-1">
							<!-- {{userInfo.now_money||''}} -->
							<image class="img" src="../../static/img/img13.png"></image>
						</view>
					</view>
				</view>
				<view class="order-section1">
					<view class="order-item" @click="navTo('/pages/favorites/favorites')" hover-class="common-hover" :hover-stay-time="50">
						<view class="item-1">
							<image class="icon-img" src="https://mmz.liuniu946.com/statics/img/img28.png" mode="aspectFit"></image>
							<text class="word-1">我的收藏</text>
						</view>
						<view class="item-1"><image class="img" src="../../static/img/img13.png"></image></view>
					</view>
				</view>

				<!-- #ifdef MP -->
				<button class="contact" open-type="contact" style=" border-style :none;">
					<view class="item-1">
						<image class="icon-img" src="https://mmz.liuniu946.com/statics/img/img29.png" mode="aspectFit"></image>
						<text class="word-1">联系客服</text>
					</view>
					<view class="item-1"><image class="img" src="../../static/img/img13.png"></image></view>
				</button>
				<!-- #endif -->

				<!-- #ifdef MP -->
				<view class="order-section1" style=" border-top: 1px solid #F2F2F2;">
					<view class="order-item" @click="navTo('/pages/contact/merchants')" hover-class="common-hover" :hover-stay-time="50">
						<view class="item-1">
							<image class="icon-img" src="https://mmz.liuniu946.com/statics/img/img28.png" mode="aspectFit"></image>
							<text class="word-1">联系商家</text>
						</view>
						<view class="item-1"><image class="img" src="../../static/img/img13.png"></image></view>
					</view>
				</view>
				<!-- #endif -->

				<!-- #ifndef MP -->
				<view class="order-section1">
					<view class="order-item" hover-class="common-hover" :hover-stay-time="50" @click="shareMp">
						<view class="item-1">
							<image class="icon-img" src="https://mmz.liuniu946.com/statics/img/img29.png" mode="aspectFit"></image>
							<text class="word-1">联系客服</text>
						</view>
						<view class="item-1"><image class="img" src="../../static/img/img13.png"></image></view>
					</view>
				</view>
				<!-- #endif -->

				<!-- #ifdef APP-PLUS -->
				<view class="order-section1">
					<view class="order-item" @click="navTo('/pages/contact/merchants')" hover-class="common-hover" :hover-stay-time="50">
						<view class="item-1">
							<image class="icon-img" src="https://mmz.liuniu946.com/statics/img/img28.png" mode="aspectFit"></image>
							<text class="word-1">联系商家</text>
						</view>
						<view class="item-1"><image class="img" src="../../static/img/img13.png"></image></view>
					</view>
				</view>
				<!-- #endif -->
			</view>
		</view>
	</view>
</template>
<script>
import { mapState, mapMutations } from 'vuex';
import uniList from '@/components/uni-list/uni-list.vue';
import uniListItem from '@/components/uni-list-item/uni-list-item.vue';
import { orderData, userinfo, commission } from '@/api/user.js';
import { getAddressList } from '@/api/address.js';
import { saveUrl, interceptor } from '@/utils/loginUtils.js';
// #ifdef H5
import { weixindata } from '@/utils/wxAuthorized';
// #endif
let startY = 0,
	moveY = 0,
	pageAtTop = true;
export default {
	components: {
		uniList,
		uniListItem
	},
	data() {
		return {
			brokerage_price: 0, //现有佣金
			coverTransform: 'translateY(0px)',
			coverTransition: '0s',
			list: '',
			moving: false,
			userDowm: 0, //卡片升级专属高度
			userMaxDowm: 0, //卡片最高高度
			addressinfo: '',
			orderInfo: {
				complete_count: 0,
				received_count: 0,
				unshipped_count: 0,
				order_count: 0
			}
		};
	},
	onLoad(option) {
		if (option.spread) {
			// alert(option.spread);
			// 存储邀请人
			uni.setStorage({
				key: 'spread',
				data: option.spread
			});
		}
		if (option.spread_uid) {
			// alert(option.spread_uid);
			// 存储邀请人
			uni.setStorage({
				key: 'spread_uid',
				data: option.spread_uid
			});
		}
	},
	onShow() {
		console.log(this);
		// 判断是否已经登录
		if (this.hasLogin) {
			this.loadBaseData();
		}
		// 保存当前页面
		// #ifndef APP-PLUS
		saveUrl();
		// #endif
	},

	computed: {
		...mapState(['hasLogin', 'userInfo'])
	},
	methods: {
		...mapMutations(['setUserInfo']),

		// 加载初始数据
		loadBaseData() {
			userinfo({}).then(({ data }) => {
				console.log(data, 666);
				this.setUserInfo(data);
				// this.userInfo = data
				this.brokerage_price = data.brokerage_price;
			});
			orderData({})
				.then(({ data }) => {
					this.orderInfo = data;
				})
				.catch(e => {
					this.orderinfo = {};
				});
			// commission({})
			// 	.then(({ data }) => {
			// 		// console.log(data, 4);
			// 		this.list = data;
			// 	})
			// 	.catch(e => {});
			getAddressList({})
				.then(({ data }) => {
					this.addressinfo = data;
				})
				.catch(e => {});
			// #ifdef H5
			weixindata();
			// #endif
		},
		shareMp() {
			uni.navigateTo({
				url: '/pages/customer_list/index'
			});
		},
		/**
		 * 统一跳转接口,拦截未登录路由
		 * navigator标签现在默认没有转场动画，所以用view
		 */
		navTo(url) {
			if (!this.hasLogin) {
				uni.showModal({
					title: '登录',
					content: '您未登录，是否马上登陆?',
					success: e => {
						if (e.confirm) {
							interceptor();
						}
					},
					fail: e => {
						console.log(e);
					}
				});
				return;
			}
			uni.navigateTo({
				url
			});
		},
		navTos() {
			let money = this.brokerage_price;
			if (!this.hasLogin) {
				uni.showModal({
					title: '登录',
					content: '您未登录，是否马上登陆?',
					success: e => {
						if (e.confirm) {
							interceptor();
						}
					},
					fail: e => {
						console.log(e);
					}
				});
				return;
			}
			uni.navigateTo({
				url: '/pages/wallet/wallets?money=' + money
			});
		}
		/**
		 *  会员卡下拉和回弹
		 *  1.关闭bounce避免ios端下拉冲突
		 *  2.由于touchmove事件的缺陷（以前做小程序就遇到，比如20跳到40，h5反而好很多），下拉的时候会有掉帧的感觉
		 *    transition设置0.1秒延迟，让css来过渡这段空窗期
		 *  3.回弹效果可修改曲线值来调整效果，推荐一个好用的bezier生成工具 http://cubic-bezier.com/
		 */
		// coverTouchstart(e) {
		// 	// console.log(e);
		// 	if (pageAtTop === false) {
		// 		return;
		// 	}

		// 	this.coverTransition = 'transform .1s linear';
		// 	startY = e.touches[0].clientY;
		// },
		// coverTouchmove(e) {
		// 	// console.log(e);
		// 	moveY = e.touches[0].clientY;
		// 	let moveDistance = moveY - startY;
		// 	let maxDowm = this.userMaxDowm;
		// 	let Dowm = this.userDowm;
		// 	if (moveDistance < 0) {
		// 		this.moving = false;
		// 		return;
		// 	}
		// 	this.moving = true;
		// 	if (moveDistance >= Dowm && moveDistance < maxDowm) {
		// 		moveDistance = Dowm;
		// 	}

		// 	if (moveDistance > 0 && moveDistance <= Dowm) {
		// 		this.coverTransform = `translateY(${moveDistance}px)`;
		// 	}
		// },
		// coverTouchend() {
		// 	if (this.moving === false) {
		// 		return;
		// 	}
		// 	this.moving = false;
		// 	this.coverTransition = 'transform 0.3s cubic-bezier(.21,1.93,.53,.64)';
		// 	this.coverTransform = 'translateY(0px)';
		// }
	}
};
</script>
<style lang="scss">
page {
	height: 100%;
	// line-height: 1;
}
%flex-center {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
%section {
	display: flex;
	justify-content: space-around;
	align-content: center;
	background: #fff;
	border-radius: 10rpx;
}
.container {
	margin-top: -1rpx;
	background-color: $page-color-base;
	.content-box {
		height: 100%;
	}
	/* #ifdef APP-PLUS */
	.app-status {
		height: var(--status-bar-height);
		background-color: $base-color;
	}
	/* #endif */
}
.buttom-box {
	background-color: #ffffff;
	text-align: center;
	margin: 30rpx;
	padding: 20rpx 0;
	border-radius: $border-radius-sm;
	.buttom {
		font-size: 42rpx;
		font-weight: 500;
		color: #222222;
		flex-grow: 1;
		.text {
			font-size: 24rpx;
			font-weight: 400;
			color: #666666;
		}
	}
	.interval {
		width: 1px;
		height: 125rpx;
		background-color: #eeeeee;
	}
	.icon {
		height: 50rpx;
		width: 48rpx;
		margin: 0 auto;
		.icon-img {
			width: 100%;
			height: 100%;
		}
	}
}
.m-t20 {
	margin-top: 20rpx;
}
.user-section {
	height: 400rpx;
	padding: 15rpx 30rpx 0;
	position: relative;
	.bg {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		overflow: hidden;
		.bg-img {
			width: 100%;
			height: 100%;
		}
	}
}
.user-info-box {
	height: 240rpx;
	color: white;
	display: flex;
	align-items: center;
	justify-content: space-between;
	position: relative;
	z-index: 1;
	.detail {
		height: 130rpx;
		.portrait-box {
			height: 100%;
			.portrait {
				width: 130rpx;
				height: 100%;
				border: 5rpx solid #fff;
				border-radius: 50%;
			}
		}
		.info-box {
			margin-left: 20rpx;
			line-height: 1.5;
			.username {
				font-size: $font-lg + 6rpx;
				height: 100%;
				max-width: 300rpx;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
			.level {
				background: linear-gradient(90deg, #f8ecc6 0%, #d5b861 100%);
				border-radius: 50rpx;
				font-size: 20rpx;
				font-weight: 500;
				color: #93794b;
				margin-left: 20rpx;
				padding: 0rpx 20rpx 0rpx 20rpx;
			}
			.level_img {
				image {
					width: 25rpx;
					height: 29rpx;
					position: absolute;
					margin-top: -14rpx;
					margin-left: -28rpx;
				}
			}
			.level_text {
			}
			.level1 {
				border-radius: 50rpx;
				font-size: 20rpx;
				font-weight: 500;
				color: #ffffff;
				margin-left: 20rpx;
				padding: 0rpx 20rpx 0rpx 20rpx;
				border: 1px solid #ffffff;
			}
		}
	}
	.config {
		image {
			width: 45rpx;
			height: 45rpx;
			margin-left: 20rpx;
		}
	}
}

.cover-container {
	z-index: 99;
	position: relative;
	margin-top: -130rpx !important;
	width: 94%;
	margin: 0rpx auto;
	.thighday {
		.thighday-background-img {
			margin: 0 auto;
			width: 650rpx;
			height: 88rpx;
			background-image: url(https://mmz.liuniu946.com/statics/img/img16.png);
			background-repeat: no-repeat;
			background-size: 100% auto;
			overflow: hidden;
			.row-1 {
				padding-left: 19rpx;
				line-height: 40rpx;
				.row-img {
					width: 24rpx;
					height: 21rpx;
					margin-right: 8rpx;
				}
				.row-word {
					font-size: 20rpx;
					font-weight: 500;
					color: #84592f;
					line-height: 31rpx;
				}
			}
			.row-2 {
				padding: 0px 40rpx;
				width: 100%;
				.row-2-1 {
					width: 100%;
					display: flex;
					align-items: center;
					.row-img1 {
						width: 25rpx;
						height: 20rpx;
						margin-right: 10rpx;
					}
					.row-img2 {
						width: 29rpx;
						height: 25rpx;
						margin-right: 20rpx;
					}
					.row-word1 {
						font-size: 20rpx;
						font-weight: 500;
						color: #84592f;
						line-height: 36rpx;
					}
					.row-word2 {
						font-size: 24rpx;
						font-weight: 500;
						color: #f3d184;
						line-height: 36rpx;
					}
				}
				.row-button {
					display: flex;
					align-items: center;
					justify-content: center;
					border-radius: 22rpx;
					height: 36rpx;
					.button-word {
						font-size: 24rpx;
						font-weight: 500;
						color: #ffcc66;
						margin-right: 10rpx;
					}
					.button-img {
						width: 16rpx;
						height: 16rpx;
						background: url(https://mmz.liuniu946.com/statics/img/img18.png);
						background-size: 16rpx 16rpx;
					}
				}
			}
		}
	}
}
.button-group {
	width: 94%;
	margin: 0px auto;
	margin-top: 50rpx;
	.group-1 {
		line-height: 1;
		padding: 25rpx 30rpx;
		background: #ffffff;
		box-shadow: 0rpx 2rpx 10rpx 0rpx rgba(180, 183, 187, 0.8);
		border-radius: 36rpx;
		font-size: 30rpx;
		font-weight: 500;
		color: #fa2740;
	}
	.m-r50 {
		margin-right: 50rpx;
	}
}

.tj-sction {
	@extend %section;
	padding: 25rpx 0rpx;
	margin-top: 21rpx;
	box-shadow: 0px 0px 20px 0px rgba(50, 50, 52, 0.06);
	.tj-item {
		@extend %flex-center;
		flex-direction: column;
		height: 100%;
		font-size: $font-sm;
		color: #75787d;
		.tj-img {
			width: 100%;
			height: 50rpx;
			text-align: center;
			image {
				width: 48rpx;
				height: 48rpx;
			}
		}
		.tj-img1 {
			image {
				width: 40rpx;
				height: 48rpx;
			}
		}
		.tj-text {
			padding: 15rpx 0rpx;
			font-size: 30rpx;
			font-weight: 500;
			color: rgba(51, 51, 51, 1);
		}
		.num {
			color: #999999;
			margin-bottom: 8rpx;
		}
	}
}
.margin {
	margin: 0 3% 50rpx 3%;
}
.item-box {
	border-radius: 10rpx;
	background-color: white;
	margin-bottom: 20rpx;
	box-shadow: 0px 0px 20px 0px rgba(50, 50, 52, 0.06);
	&:nth-of-type(1) {
		margin-bottom: 0rpx;
	}
	.box-title {
		line-height: 1;
		padding: 30rpx 30rpx 20rpx 30rpx;
		.title {
			font-size: 30rpx;
			font-weight: bold;
			color: #1d2023;
		}
		.link {
			font-size: $font-base - 2rpx;
			color: #3f454b;
		}
	}
	.gongju {
		flex-wrap: wrap;
		.gongju-item {
			margin-bottom: 25rpx;
		}
	}
	.order-section {
		// @extend %section;
		display: flex;
		align-items: center;
		padding: 25rpx 0;
		&.gongju {
			padding: 25rpx 0 0 0;
		}
		.order-item {
			@extend %flex-center;
			width: 25%;
			height: 120rpx;
			font-size: $font-sm;
			color: #3f454b;
		}
		.icon {
			height: 48rpx;
			width: 48rpx;
			margin-bottom: 18rpx;
			background-size: 100%;
			background-repeat: no-repeat;
			background-position: center;
			.icon-img {
				width: 100%;
				height: 100%;
			}
		}
	}
	.order-section1 {
		width: 100%;
		height: 100%;
		border-bottom: 1px solid #f2f2f2;
		.order-item {
			display: flex;
			justify-content: space-between;
			padding: 30rpx;
			.item-1 {
				display: flex;
				align-items: center;
				font-size: $font-sm;
				color: $font-color-light;
				.icon-img {
					height: 44rpx;
					width: 44rpx;
					margin-right: 20rpx;
				}
				.word-1 {
					font-size: $font-lg - 2rpx;
					color: #3f454b;
				}
				.word-2 {
					font-size: $font-base - 2rpx;
					color: #888888;
					margin-right: 10rpx;
				}
				.img {
					width: 13rpx;
					height: 24rpx;
				}
			}
		}
		.line {
			padding: 0px 15rpx;
			.line-1 {
				width: 100%;
				height: 1px;
				background: #f2f2f2;
			}
		}
		&:nth-last-child(1) {
			margin-bottom: 120rpx;
		}
	}

	/* #ifdef MP */
	.contact:after {
		border: none !important;
		outline: none;
		// background-color: pink;
		padding: 30rpx 0;
	}
	/* #endif */

	.contact {
		background-color: #fff;
		border: none !important;
		display: flex;
		// display: block;
		height: 104rpx;
		justify-content: space-between;
		padding-left: 30rpx;
		padding-top: 10rpx;
		padding-bottom: 10rpx;
		.item-1 {
			display: flex;
			align-items: center;
			font-size: $font-sm;
			color: $font-color-light;
			.icon-img {
				height: 44rpx;
				width: 44rpx;
				margin-right: 20rpx;
			}
			.word-1 {
				font-size: $font-lg - 2rpx;
				color: #3f454b;
			}
			.word-2 {
				font-size: $font-base - 2rpx;
				color: #888888;
				margin-right: 10rpx;
			}
			.img {
				width: 13rpx;
				height: 24rpx;
				float: right;
			}
		}
	}
}
</style>