book-shop/pages/mine/index.vue

<template>
	<view class="minepage">
		<!-- 用户 -->
		<UserInfo :data="userInfo" :isLogin="token"></UserInfo>
		<!-- 用户数据 -->
		<!-- <view class="user-count"><LabelCount :ops="mineCountOps"></LabelCount></view> -->
		<!-- 我的订单 -->
		<view class="order-nav">
			<DialNav :mode="5" shadow :list="orderNavOps" nameSize="24rpx" imgSize="72rpx">
				<TitleOperate
					padding="30rpx 30rpx 0 30rpx"
					showMore
					title="我的订单"
					moreLabel="全部订单"
					@clickMore="$u.route({ url: '/pages-mall/pages/order/list' })"
				></TitleOperate>
			</DialNav>
		</view>
		
	
		<view class="oparbox shadow">
			<!-- <view class="oparTit">
				常用工具
			</view> -->
			<!--  title="常用工具" -->
			<u-cell-group :border="false">
				<u-cell-item icon="star" title="我的收藏" :border-bottom="false" @click="goUrl('/pages-mine/pages/collection')"></u-cell-item>
				<u-cell-item icon="clock" title="我的足迹" :border-bottom="false" @click="goUrl('/pages-mine/pages/history')"></u-cell-item>
				<u-cell-item icon="coupon" title="我的优惠券" :border-bottom="false" @click="goUrl('/pages-mine/pages/discounts')"></u-cell-item>
				<u-cell-item icon="map" title="地址管理" :border-bottom="false" @click="goUrl('/pages-mine/pages/address/list')"></u-cell-item>
			</u-cell-group>
		</view>
		<view class="oparbox shadow">
			<!-- <view class="oparTit">
				常用工具
			</view> -->
			<!--  title="常用工具" -->
			<u-cell-group :border="false">
				<u-cell-item icon="info-circle" title="关于我们" :border-bottom="false" @click="goArticleDetail('about_us','关于我们')"></u-cell-item>
				<u-cell-item icon="error-circle" title="投诉/建议" :border-bottom="false" @click="goUrl('/pages-mine/pages/feedback')"></u-cell-item>
				<u-cell-item icon="setting" title="设置中心" :border-bottom="false" @click="goUrl('/pages-mine/pages/setting')"></u-cell-item>
			</u-cell-group>
		</view>
		<!-- <view class="loginBox">
			<u-button type="primary" shape="circle" @click="logout"><text>退出登录</text></u-button>
		</view> -->
	</view>
</template>

<script>
import UserInfo from '@/pages/mine/components/user-info.vue';
import LabelCount from '@/components/nav/label-count.vue';
import DialNav from '@/components/nav/dial-nav.vue';
import TitleOperate from '@/components/title-operate.vue';
import {articleOpar} from '@/pages-pub/mixins/article.js'
export default {
	mixins:[articleOpar],
	components: {
		UserInfo,
		LabelCount,
		DialNav,
		TitleOperate
	},
	data() {
		return {
			token:'',
			isLogin:false,
			// 用户信息
			userInfo: {
				nickname: '',
				avatar: ''
			},
			// 订单导航配置
			orderNavOps: [
				{ name: '待付款', img: require('../../static/nav/mine-order-1.png'), url: '/pages-mall/pages/order/list?tabIndex=1' },
				{ name: '待发货', img: require('../../static/nav/mine-order-2.png'), url: '/pages-mall/pages/order/list?tabIndex=2' },
				{ name: '待收货', img: require('../../static/nav/mine-order-3.png'), url: '/pages-mall/pages/order/list?tabIndex=3' },
				{ name: '已完成', img: require('../../static/nav/mine-order-4.png'), url: '/pages-mall/pages/order/list?tabIndex=4' },
				{ name: '退款售后', img: require('../../static/nav/mine-order-5.png'), url: '/pages-mall/pages/after-sales/list' },
			],
		};
	},
	onShow() {
		this.token = uni.getStorageSync('token');
	},
	onLoad(){
		this.getUserInfo();
		uni.$on('getUserInfo',()=>{
			this.getUserInfo();
		})
	},
	methods: {
		getUserInfo(){
			this.$u.api.getUserBaseInfoAjax().then(({code,data}) => {
				console.log({code,data});
				if(code==1){
					this.userInfo = data;
					// this.isLogin = true;
				}
			}).catch((error)=>{
				console.log('error>>>>',error)
			})
		},
		goUrl(url){
			uni.navigateTo({
				url:url
			})
		},
		// 退出登录
		logout() {
			console.log(11)
			uni.showModal({
				title: '提示',
				content: '是否退出当前账号？',
				confirmColor: this.$appTheme.appThemeColor,
				success(res) {
					if (res.confirm) {
						uni.removeStorageSync('token');
						uni.navigateTo({
							url:'/pages/login/index'
						})
					}
				}
			});
		},
	}
};
</script>

<style lang="scss" scoped>
	.minepage{
		padding-bottom: 20rpx;
	}
.order-nav{
	margin-top: -70rpx;
}
.user-count,
.order-nav,
.other-nav {
	position: relative;
	z-index: $app-zIndex-normal;
	padding: 0 30rpx 30rpx 30rpx;
}
.oparbox{
	border-radius: 16rpx;
	background-color: $app-theme-bg-color;
	overflow: hidden;
	margin: 0 30rpx 20rpx;
	&.shadow {
		box-shadow: $app-theme-shadow;
	}
	.oparTit{
		padding: 30rpx 30rpx 20rpx;
		font-size: 34rpx;
	}
}
.loginBox {
	padding: 60rpx;
}
</style>