Homestay_manage_app/packageShang/pages/tabbar/user.vue

<template>
	<view class="user-area">
		<view style="width: 100%;height: 320px;">
		<view class="header-area padding-lr-sm" :class="(is_mp && !is_alipay) ? 'padding-top-big' : 'padding-top'">
			<view>
				<view class="member-area padding-top-use pos-r">
					 <!-- @click="to('/packageShang/pages/user/setting/personal')" -->
					<view>
						<image class="headimg border-radius-c" :src="list.avatarUrl || '/static/images/user/default.png'"></image>
					</view>
					<view class="margin-left-user">
						<view class="info-box">
							<text class="fs-lg">{{ list.nickName || '大魏' }}</text>
						</view>
						<view v-if="member.member_city"><text class="fs-xxs">{{ member.member_city }}</text></view>
					</view>
				</view>
				<!-- <view class="border-radius-big bg-base dflex-c padding-lr"
				 style="z-index: 99;position: fixed;"
				 @click="to('/packageShang/pages/user/integral/sign')">
					<view class="iconfont fs-xl iconqiandao margin-right-xs"></view>
					<view>签到</view>
				</view> -->
			</view>

			<view class="border-radius">
				<view class="stats-area dflex-c">
					<view class="item dflex dflex-flow-c" @click="toOrder('/packageShang/pages/user/order/order', '全部')">
						<text class="num">{{ member.member_monetary / 100 || 0 }}</text>
						<text>我的余额</text>
					</view>
					<view class="item dflex dflex-flow-c" @click="toOrder('/packageShang/pages/user/order/order', '全部')">
						<text class="num">{{ pointsAmount || 0 }}</text>
						<text>我的积分</text>
					</view>
					<!-- <view class="item dflex dflex-flow-c" @click="to('/packageShang/pages/user/coupon/coupon')">
						<text class="num">{{ member.member_coupon_cnt || 6 }}</text>
						<text>优惠券</text>
					</view> -->
				</view>
				
				<view class="vip-card-area pos-r padding-lr padding-tb-sm">
					<!-- <view style="margin: 28rpx 0 0 4rpx;width: 100%;height: 100%;">
						<image class="vip" src="../../static/images/user/VIP.png"></image>
						<text class="margin-left-sm" style="line-height: 42rpx;">会员立享5大权益</text>
						<view class="margin-left-kai">立即开通</view>
					</view> -->
				</view>
			</view>
		</view>
		</view>

		<view class="container-area padding-lr-sm padding-bottom-sm">
			<!-- 我的订单 -->
			<view class="border-radius margin-top-sm bg-main">
				<use-list-title title="我的订单" iconfont="none" fwt="600" tip="查看全部订单"
					@goto="toOrder('/packageShang/pages/user/order/order', '全部')"></use-list-title>

				<view class="order-area padding-bottom-sm padding-lr dflex-c">
					<view class="item dflex dflex-flow-c" @click="toOrder('/packageShang/pages/user/order/order', '待付款')">
						<view class="iconfont">&#xe6da;<view class="badge badge-small"
								v-if="stats && stats.order_state && stats.order_state['待付款'] > 0">
								{{stats.order_state['待付款']}}
							</view>
						</view>
						<text>待付款</text>
					</view>
					<view class="item dflex dflex-flow-c" @click="toOrder('/packageShang/pages/user/order/order', '待发货')">
						<view class="iconfont">&#xe6d9;<view class="badge badge-small"
								v-if="stats && stats.order_state && stats.order_state['待发货'] > 0">
								{{stats.order_state['待发货']}}
							</view>
						</view>
						<text>待发货</text>
					</view>
					<view class="item dflex dflex-flow-c" @click="toOrder('/packageShang/pages/user/order/order', '待收货')">
						<view class="iconfont">&#xe6d7;<view class="badge badge-small"
								v-if="stats && stats.order_state && stats.order_state['待收货'] > 0">
								{{stats.order_state['待收货']}}
							</view>
						</view>
						<text>待收货</text>
					</view>
					<view class="item dflex dflex-flow-c" @click="toOrder('/packageShang/pages/user/order/order', '待评价')">
						<view class="iconfont">&#xe6db;<view class="badge badge-small"
								v-if="stats && stats.order_state && stats.order_state['待评价'] > 0">
								{{stats.order_state['待评价']}}
							</view>
						</view>
						<text>待评价</text>
					</view>
					<view class="item dflex dflex-flow-c" @click="toOrder('/packageShang/pages/user/order/order', '已完成')">
						<view class="iconfont">&#xe6db;<view class="badge badge-small"
								v-if="stats && stats.order_state && stats.order_state['已完成'] > 0">
								{{stats.order_state['已完成']}}
							</view>
						</view>
						<text>已完成</text>
					</view>
					<!-- <view class="item dflex dflex-flow-c" @click="toOrder('/packageShang/pages/user/order/order', '退款')">
						<view class="iconfont">&#xe715;<view class="badge badge-small"
								v-if="stats && stats.order_state && stats.order_state['退款'] > 0">
								{{stats.order_state['退款']}}
							</view>
						</view>
						<text>售后/退款</text>
					</view> -->
				</view>
			</view>

			<view class="border-radius margin-top-sm bg-main">
				<!-- 我的足迹 -->
				<use-list-title title="我的足迹" iconfont="iconzuji" color="rgba(36, 147, 241, 1)" fwt="600" :tip="stats.browsing"
					@goto="to('/packageShang/pages/user/browsing/browsing')"></use-list-title>
				<scroll-view scroll-x class="browsing-area padding-lr">
					<view class="dflex">
						<view v-for="(item, index) in historyDatas" :key="index">
							<image class="border-radius-sm margin-right-sm" @click="togoods(item)" :src="item.goodsMainImageUrl"
								mode="aspectFill"></image>
						</view>
					</view>
				</scroll-view>

				<use-list-title title="我的收藏" iconfont="iconshoucang-" color="#ff6a6c" fwt="600" :tip="stats.collect"
					@goto="to('/packageShang/pages/user/collect/collect')"></use-list-title>
				<!-- <use-list-title title="分销中心" iconfont="iconyixiaoshou" color="#ffab6c" fwt="600" tip="分享赚钱"
					@goto="to('/packageShang/pages/user/distribution/distribution')"></use-list-title> -->
				<use-list-title title="收货人" iconfont="icondizhi-" color="#5a9ded" fwt="600"
					@goto="to('/packageShang/pages/user/address/address')"></use-list-title>
				<!-- <use-list-title title="设置" iconfont="iconshezhi-" color="#58bc8a" fwt="600"
					@goto="to('/packageShang/pages/user/setting/setting')"></use-list-title> -->
			</view>

			<view v-if="list.avatarUrl" class="border-radius margin-top-sm padding-sm dflex-c bg-main log-out-btn"
				@click="openActionSheet">
				<text class="cell-tit">退出登录</text>
			</view>
			<!-- <view v-else class="border-radius margin-top-sm padding-sm dflex-c bg-main log-out-btn"
				@click="to('/pages/login/login')">
				<text class="cell-tit">去登录</text>
			</view> -->
			<view style="width: 100%;height: 70px;"></view>

			<!-- 操作菜单 -->
			<!-- <use-action-sheet v-model="actionSheetShow" :list="actionSheetList" :tips="actionSheetTips"
				@click="actionSheetClick" @close="actionSheetClose"></use-action-sheet> -->
		</view>

		<tabbar :current-page="3"></tabbar>
	</view>
</template>
<script>
	import {
		orserlist,
		footlist
	} from '../../utils/api_user.js'
	import tabbar from '../tabbar.vue'
	import common from '../../../static/comon.js'
	import useListTitle from '../../components/use-list-title/use-list-title.vue'
	import useActionSheet from '../../components/use-action-sheet/use-action-sheet.vue'
	const db = uniCloud.database();
	
	const _history = 'usemall-goods-history'
	export default {
		components:{
			useListTitle,
			useActionSheet,
			tabbar
		},
		data() {
			return {
				list: {},
				pointsAmount: '',//积分
				isreq: false,
				// 浏览历史
				historyDatas: [],
				// 统计数据
				stats: {},

				actionSheetShow: false,
				actionSheetList: [],
				actionSheetTips: {
					text: "",
					color: "#9a9a9a",
					size: 24
				},

				is_mp: false,
				is_alipay: false,
			};
		},
		onLoad() {
			var token = uni.getStorageSync('tokenId');
			this.isReal(token)
			var _self = this
			if(token){
				this.getIndex()
				uni.getUserInfo({
				  provider: 'weixin',
				  success: function (infoRes) {
					_self.list = infoRes.userInfo
				  }
				})
			}else{
				_self.list = {}
			}
			
			_self.$nextTick(() => {
				_self.is_mp = _self.$env.is_mp;
				_self.is_alipay = _self.$env.platform == 'alipay';
			})
		},
		onShow() {

			this.loadData();
		},
		methods: {
			// 获取积分
			getIndex(){
				var token = uni.getStorageSync('tokenId');
				var _self = this;
				uni.request({
					url: common.url + 'integral/user/integralIndex',
					header: {"User-Token": token},
					success(res) {
						res = res.data
						if(res.status == 'success'){
							_self.pointsAmount = res.data.pointsAmount
						}else{
							if (res.data.errCode == '10006'){
								common.isOverdue()
							}
						}
					}
				})
			},
			// 获取用户实名信息进行判断是否已实名
			isReal(token) {
				var _self = this;
				uni.request({
					url: common.url + 'user/getUserRealName',
					header: {
					   'User-Token': token
					},
					success(res){
						res = res.data
						if (res.status == 'success'){
							// _self.text = '已认证'
							_self.isRight(token)
						}else if(res.status == 'fail') {
							// _self.text = '未认证'
						} 
					}
				})
			},
			// 判断有无绑定房产
			isRight(token) {
				var _self = this;
				uni.request({
					url: common.url + 'user/getUserIsBindHouse',
					header:{
						"User-Token": token
					},
					success(res) {
						res = res.data
						if(res.status == 'success') {
							_self.haveHouseInfo = res.data.haveHouseInfo
						} else {
							if (res.data.errCode == '10006'){
								common.isOverdue()
							}
						}
					}
				})
			},
			
			// 加载数据
			loadData() {
				var _self = this;
				// 订单列表
				var header={
					"Mall-Token": uni.getStorageSync('tokenId')
				}
				orserlist(header).then((res) => {
					if (res.success) {
						this.stats = res.data;
					}
				})

				// 浏览历史足迹
				footlist().then((res) => {
					if (res.success) {
						res.data.list.forEach(x => {
							this.historyDatas.push(x);
						});
					}
				})
			},

			// 打开操作菜单
			openActionSheet() {
				try {
				    uni.removeStorageSync('tokenId');
					uni.removeStorageSync('houseInfo');
					uni.removeStorageSync('address');
					uni.removeStorageSync('latitude');
					uni.removeStorageSync('longitude');
					uni.removeStorageSync('communityName');
					uni.removeStorageSync('communityId');
					uni.removeStorageSync('streetOfficeId');
					uni.removeStorageSync('streetOfficeName');
					uni.removeStorageSync('centerId');
					uni.navigateTo({
						url: '/pages/login/login'
					})
				} catch (e) {
				    // error
				}
			},
			// 关闭操作菜单
			actionSheetClose() {
				console.log(this.actionSheetShow);
			},
			// 点击操作菜单
			actionSheetClick(index) {
				switch (index) {
					case 0:
						this.$api.msg('退出成功');
						this.logout();
						this.$api.timerout(() => {
							this.$api.tohome();
						}, 200);
						break;
					case 1:
						this.$api.tologin();
						break;
				}
			},

			// 统一跳转接口，拦截未登录路由
			to(url) {
				// if (!this.list.avatarUrl) {
				// 	this.$api.tologin()
				// 	return;
				// }
				console.log(url,'0')

				uni.navigateTo({
					url
				});
			},
			// 跳转到 订单
			toOrder(url, state) {
				// if (!this.list.avatarUrl) {
				// 	this.$api.tologin()
				// 	return;
				// }

				uni.setStorage({
					key: '__order_state',
					data: state,
					success(res) {
						console.log(res);
					},
					complete() {
						uni.navigateTo({
							url
						});
					}
				});
			},

			// 跳转商品详情
			togoods(item) {
				this.$api.togoods({
					id: item.goodsId
				});
			}
		}
	};
</script>
<style lang="scss">
	@import url('/packageShang/components/iconfont/iconfont.css');
	@import url('/packageShang/common/common.scss');
	page {
		min-height: 100%;
		background: $page-color-base;
	}
	.header-area{
		padding: 0px;
		width: 750rpx;
		height: 560rpx;
		background-image: url('../../static/images/user/user-bg.png');
		background-size: 100%;
	}

	.member-area {
		image {
			width: 130rpx;
			height: 130rpx;
			border: 5rpx solid #fff;
		}
	}

	.vip-card-area {
		margin-left: 30rpx;
		width: 690rpx;
		height: 136rpx;
		opacity: 1;
		border-radius: 20rpx;
		background: rgba(35, 39, 52, 1);
		font-size: 32rpx;
		color: rgba(255, 225, 192, 1);
		.vip{
			width: 98rpx;
			height: 42rpx;
			line-height: 50rpx;
		}
		.margin-left-kai{
			float: right;
			width: 136rpx;
			height: 56rpx;
			opacity: 1;
			border-radius: 28rpx;
			background: linear-gradient(270deg, rgba(226, 162, 92, 1) 0%, rgba(247, 229, 195, 1) 100%);
			font-size: 26rpx;
			line-height: 56rpx;
			color: rgba(35, 39, 52, 1);
			text-align: center;
		}
	}

	.stats-area {
		.item {
			padding: 30rpx 0;
			color: rgba(255, 255, 255, 1);
			position: relative;
			font-size: $font-sm;
			flex: 1;
		}

		.num {
			font-size: 40rpx;
			color: $font-color-dark;
			margin-bottom: 6rpx;
		}
	}

	.order-area {
		.item {}

		.iconfont {
			position: relative;
			font-size: $font-lg + 8upx;

			.badge {
				right: initial;
			}
		}
	}

	
	.order-area .item {
		position: relative;
		font-size: $font-sm;
		color: $font-color-base;
		flex: 1;
	}

	.browsing-area {
		image {
			width: 160rpx;
			height: 160rpx;
		}
	}

	::-webkit-scrollbar {
		width: 0;
		height: 0;
		color: transparent;
		display: none;
	}

	.log-out-btn {
		color: $font-color-base;
	}
	.iconfont {
	    font-size: 36rpx;
	}
</style>