cosmetics_shop_wxapp/pages/login/index.vue

<template>
	<view class="login">
		<!-- header -->
		<view class="header bg-gradual-blue flex align-center justify-center" :style="{paddingTop:statusBarHeight+'px'}">
			<view class="userInfo text-center">
				<view class="userInfo-image flex align-center justify-center" :style="{backgroundImage: 'url(' + userInfo.avator + ')' }">
					<text v-if="!userInfo.avator" class="cuIcon-picfill text-xxl text-gray"></text>
				</view>
				<view class="userInfo-nickname padding-top-sm text-lg">{{userInfo.nickname}}</view>
			</view>
		</view>
		<!-- section -->
		<view class="section">
			<!-- 我的订单 -->
			<view class="order bg-white radius">
				<view class="order-header flex align-center justify-between  padding-tb-sm">
					<view class="text-black">
						我的订单
					</view>
					<view @click="orderFunc(1)" class="text-grey">
						全部订单
						<text  class="cuIcon-right lg text-gray"></text>
					</view>
				</view>
				<view class="cu-list grid col-5 no-border">
				   <view @click="orderFunc(index+2)" class="cu-item text-center" v-for="(item,index) in  order" :key="index" >
				     <view class="list-icon" :style="{backgroundImage:'url('+item.icon+')'}">
				       <view class="cu-tag badge" v-if="item.badge">
				         {{item.badge>99?"99+":item.badge}}
				       </view>
				     </view>
				     <text class="text-black margin-top-sm">{{item.label}}</text>
				   </view>
				 </view>
			</view>
		    <!-- 功能列表 -->
			<view class="cu-list menu">
				<!-- 我的收藏 -->
				<view class="cu-item arrow">
					<view class="content">
						<text class="cuIcon-likefill  text-red"></text>
						<text class="text-grey">我的收藏</text>
					</view>
					<view class="text-grey">999+</view>
				</view>
				<!-- 评价中心 -->
				<view @click="handler('/loginPages/evaluate/index')" class="cu-item arrow">
					<view class="content">
						<text class="cuIcon-evaluate_fill  text-red"></text>
						<text class="text-grey">评价中心</text>
					</view>
				</view>
				<!-- 收货地址 -->
				<view @click="handler('/loginPages/addressList/index')" class="cu-item arrow">
					<view class="content">
						<text class="cuIcon-locationfill  text-green"></text>
						<text class="text-grey ">收货地址</text>
					</view>
				</view>
				<!-- 余额-->
				<view class="cu-item arrow">
					<view class="content">
						<text class="cuIcon-moneybag  text-yellow"></text>
						<text class="text-grey">余额</text>
					</view>
					<view class="text-price text-red">999</view>
				</view>
				<!-- 积分-->
				<view class="cu-item arrow">
					<view class="content">
						<text class="cuIcon-coin  text-yellow"></text>
						<text class="text-grey">积分</text>
					</view>
					<view class="text-yellow">999+</view>
				</view>
			</view>
		</view>
		<!-- footer -->
		<cu-bar active="3" />
	</view>
</template>

<script>
	import {statusBarHeight,
	CustomBarHeight} from "@/common/device/index.js"
	import dzf from "@/static/login/dzf.png";
	import dfh from "@/static/login/dfh.png";
	import ysz from "@/static/login/ysz.png";
	import ywc from "@/static/login/ywc.png";
	import dpj from "@/static/login/dpj.png";
export default {
	data() {
		return {
			statusBarHeight,CustomBarHeight,
			userInfo:{
				avator:"https://gd-hbimg.huaban.com/1f50f2135ba51e4b9aa20caef41860b15005c9386f0b-LxqWsh_fw658/format/webp",
				nickname:"用户昵称"
			},
			order:[
				{
					id:2,
					icon:dzf,
					badge:99,
					label:'待支付',
		
				},
				{
					id:3,
					icon:dfh,
					label:'待发货'
				},
				{
					id:4,
					icon:ysz,
					label:'运输中'
				},
				{
					id:5,
					icon:ywc,
					label:'已完成'
				},
				{
					id:6,
					icon:dpj,
					label:'待评价'
				}
			]
		};
	},
	onLoad() {},
	methods: {
		orderFunc(val){
			uni.navigateTo({
				url:`/pages/order/index?key=${val}`
			})
		},
		handler(path){
			uni.navigateTo({
				url:path
			})
		}
	},
	onShareAppMessage() {
		return {};
	},
	onShareTimeline() {
		return {};
	}
};
</script>

<style lang="scss" scoped>
.login{
	.header{
		min-height: 500upx;
		box-sizing: border-box;
		.userInfo{
			.userInfo-image{
				width: 120upx;
				height: 120upx;
				background-color: #fff;
				border-radius: 50%;
				background-position: center;
				background-size: cover;
			}
		}
	}
    .section{
		.order{
			padding: 20upx 30upx;
			.list-icon{
				position: relative;
				width: 80upx;height: 80upx;
				margin: 0 auto;
				margin-top: 20upx;
				background-position: center;
				background-size: cover;
			}
		}
	}
}
</style>