cbz/page_shop/pages/mine/mine.vue

<template>
	<view class="content">
		<view class="box">
			<u-navbar title="我的" titleStyle="color: #fff;" @leftClick="leftClick" height="44px" bgColor="rgb(255,255,255,0)" :placeholder="true"></u-navbar>
			<view class="top hflex acenter">
				<image :src="user.headimg" mode="aspectFill" class="avatar"></image>
				<view class="top_text text_hide">{{user.nickname}}</view>
			</view>
			<view class="hflex acenter jbetween tabs">
				<block v-for="(item,index) in tabs" :key="index">
					<view class="vflex acenter tab_item" @click="toDetail(item.url)">
						<image :src="item.src" class="tab_icon"></image>
						<view class="tab_text">{{item.name}}</view>
					</view>
				</block>
			</view>
			<view class="order">
				<view class="hflex acenter jbetween">
					<view class="title">我的订单</view>
					<view class="right" @click="toOrder(0)">查看全部</view>
				</view>
				<view class="hflex acenter jbetween" style="margin-top: 32rpx;">
					<block v-for="(item,index) in orderList" :key="index">
						<view class="vflex acenter order_item" @click="toOrder(item.id)">
							<view class="order_icon">
								<image :src="item.src" mode="aspectFill" style="width: 100%;height: 100%;"></image>
								<view class="num" v-if="item.num > 0">{{item.num}}</view>
							</view>
							<view class="order_text">{{item.name}}</view>
						</view>
					</block>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import $api from '@/static/js/api.js'
	var that = ''
	export default {
		data() {
			return {
				user: {},
				tabs: [
					{
						src: '/static/images/shop/consulting.png',
						name: '消息',
						url: '/page_shop/pages/mine/chat'
					},
					{
						src: '/static/images/shop/collect.png',
						name: '收藏',
						url: '/page_shop/pages/mine/collect'
					},
					{
						src: '/static/images/shop/address.png',
						name: '地址',
						url: '/page_shop/pages/address/list'
					}
				],
				orderList: [
					{
						src: 'https://ship.shipcc.cn/common/order_icon1.png',
						name: '待付款',
						num: 0,
						id: 1,
					},
					{
						src: 'https://ship.shipcc.cn/common/order_icon2.png',
						name: '待发货',
						num: 0,
						id: 2,
					},
					{
						src: 'https://ship.shipcc.cn/common/order_icon3.png',
						name: '待收货',
						num: 0,
						id: 3,
					},
					{
						src: 'https://ship.shipcc.cn/common/order_icon4.png',
						name: '退款/售后',
						num: 0,
						id: 4,
					}
				]
			}
		},
		onLoad() {
			that = this
			that.getUser()
		},
		onShow() {
			var token = uni.getStorageSync('token') 
			if(!token) {
				$api.info('请先登录')
				setTimeout(() =>{
					$api.jump('/pages/login/password_login')
				}, 1000)
			}
			that.getNum()
		},
		onPullDownRefresh() {
			that.getNum()
		},
		methods: {
			// 返回
			leftClick() {
				console.log('返回');
				$api.jump(-1)
			},
			getUser() {
				$api.req({
					url: '/data/api.auth.Center/get',
					method: 'POST'
				}, function(res) {
					if(res.code == 1) {
						that.user = res.data
					}
				})
			},
			getNum() {
				$api.req({
					url: '/data/api.Order/order_num'
				}, function(res) {
					uni.stopPullDownRefresh();
					if(res.code == 1) {
						for(var i=0;i<that.orderList.length;i++) {
							console.log(res.data[i]);
							that.$set(that.orderList[i],'num',res.data[i])
						}
					}
				})
			},
			// 进入详情页面
			toDetail(url) {
				$api.jump(url)
			},
			toOrder(id) {
				if(id == 4) {
					$api.jump('/page_shop/pages/order/refund')
				} else {
					id = id + 1
					$api.jump('/page_shop/pages/order/list?id=' + id)
				}
			}
		},
	}
</script>

<style lang="scss" scoped>
	.content {
		background: #F5F5F5;
		.box {
			width: 100%;
			background: linear-gradient(360deg, #F5F5F5 0%, #506DFF 100%);
			box-sizing: border-box;
			padding: 0 30rpx;
			.top {
				width: 100%;
				padding: 8rpx 0 30rpx;
				.avatar {
					width: 120rpx;
					height: 120rpx;
					border-radius: 50%;
					border: 2px solid #FFFFFF;
				}
				.top_text {
					max-width: 400rpx;
					font-size: 40rpx;
					font-weight: 500;
					color: #FFFFFF;
					line-height: 56rpx;
					margin-left: 12rpx;
				}
			}
			.tabs {
				padding: 30rpx 0 40rpx;
				.tab_item {
					width: 33%;
					text-align: center;
					.tab_icon {
						width: 52rpx;
						height: 52rpx;
					}
					.tab_text {
						font-size: 26rpx;
						font-weight: 400;
						color: #FFFFFF;
						line-height: 36rpx;
						padding-top: 12rpx;
					}
				}
			}
			.order {
				width: 100%;
				box-sizing: border-box;
				padding: 24rpx 20rpx;
				background: #FFFFFF;
				border-radius: 10px;
				.title {
					font-size: 28rpx;
					font-weight: 500;
					color: #0A0A0A;
					line-height: 40rpx;
				}
				.right {
					font-size: 24rpx;
					font-weight: 400;
					color: #B4B4B4;
					line-height: 34rpx;
				}
				.order_item{
					width: 25%;
					text-align: center;
					.order_icon {
						width: 52rpx;
						height: 52rpx;
						position: relative;
						.num {
							position: absolute;
							right: -10rpx;
							top: 0;
							width: 26rpx;
							height: 24rpx;
							background-color: #fb3e32;
							border-radius: 12rpx 12rpx 12rpx 4rpx;
							font-size: 20rpx;
							color: #fff;
							text-align: center;
						}
					}
					.order_text {
						padding-top: 24rpx;
						font-size: 26rpx;
						font-weight: 400;
						color: #0A0A0A;
						line-height: 36rpx;
					}
				}
			}
		}
	}
</style>