cosmetics_shop_wxapp/pages/login/index.vue

<template>
	<view class="login">
		<!-- header -->
		<cu-custom custom bgColor="bg-gradual-blue"><view slot="content">我的</view></cu-custom>
		<!-- header -->
		<view class="header  flex align-center justify-center" :style="{ backgroundImage: 'url(' + bg + ')', padding: CustomBarHeight + 'px 0px' }">
			<view class="userInfo flex align-center justify-center flex-direction">
				<view v-if="face" class="userInfo-image flex align-center justify-center" :style="{ backgroundImage: 'url(' + face + ')' }">
				</view>
				<view v-else class="userInfo-image flex align-center justify-center">
					<text  class="cuIcon-picfill text-xxl text-gray"></text>
				</view>
				<view v-if="bind == 0" @click="show = true" class="userInfo-nickname padding-top-sm text-white text-lg">立即登录</view>
				<view v-else class="userInfo-nickname padding-top-sm text-white text-lg">{{ name }}</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 @click="updateUserInfo" class="cu-item">
					<view class="content">
						<text class="cuIcon-profilefill  text-red"></text>
						<text class="text-grey">更新资料</text>
					</view>
					<view class=" cuIcon-refresh text-grey"></view>
				</view>
				<!-- 我的收藏 -->
				<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-yellow"></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 @click="handler('/loginPages/distribution/index')" class="cu-item arrow">
					<view class="content">
						<text class="cuIcon-fork  text-red"></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" />
		<!-- 工具 -->
		<cu-modalB
			:show.sync="show"
			@confirm="e => wxbind(e.detail)"
			title="登录提醒"
			openType="getPhoneNumber"
			confirmText="微信快捷登录"
			content="您还未登录,请先登录再进行操作!"
		/>
	</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';
import bg from '@/static/bg.png';
import { mapState, mapActions } from 'vuex';
export default {
	computed: {
		...mapState(['bind', 'face', 'name'])
	},
	data() {
		return {
			show: false,
			statusBarHeight,
			CustomBarHeight,
			bg,
			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: {
		...mapActions(['getUserProfile', 'wxbind', 'getUserProfile']),
		orderFunc(val) {
			uni.navigateTo({
				url: `/pages/order/index?key=${val}`
			});
		},
		// 更新用户资料
		async updateUserInfo() {
			if (this.bind == 0) {
				this.show = true;
			}
			await this.getUserProfile();
			uni.showToast({
				title: '更新完成',
				icon: 'success'
			});
		},
		handler(path) {
			uni.navigateTo({
				url: path
			});
		}
	},
	onShareAppMessage() {
		return {};
	},
	onShareTimeline() {
		return {};
	}
};
</script>

<style lang="scss" scoped>
.login {
	.header {
		box-sizing: border-box;
		background-position: center;
		background-size: cover;
		.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>