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.avatar" class="avatar"></image>
				<view class="top_text">{{user.name}}</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)">
							<image :src="item.src" class="order_icon"></image>
							<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: {
					avatar: '/static/images/mine/avatar1.jpg',
					name: 'Dxy_Leo'
				},
				tabs: [
					{
						src: '/static/images/shop/consulting.png',
						name: '消息',
						url: ''
					},
					{
						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: '/static/images/shop/order_icon1.png',
						name: '待付款',
						id: 1,
					},
					{
						src: '/static/images/shop/order_icon2.png',
						name: '待发货',
						id: 2,
					},
					{
						src: '/static/images/shop/order_icon3.png',
						name: '待收货',
						id: 3,
					},
					{
						src: '/static/images/shop/order_icon4.png',
						name: '退款/售后',
						id: 4,
					}
				]
			}
		},
		onLoad() {
			that = this
		},
		methods: {
			// 返回
			leftClick() {
				console.log('返回');
				$api.jump(-1)
			},
			// 进入详情页面
			toDetail(url) {
				$api.jump(url)
			},
			toOrder(id) {
				if(id == 4) {
					$api.jump('/page_shop/pages/order/refund')
				} else {
					$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 {
					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;
					}
					.order_text {
						padding-top: 24rpx;
						font-size: 26rpx;
						font-weight: 400;
						color: #0A0A0A;
						line-height: 36rpx;
					}
				}
			}
		}
	}
</style>