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>
				<button v-if="bind === 0" open-type="getPhoneNumber" @getphonenumber="getphonenumber" class="cu-btn round margin-top-sm bg-green">立即登录</button>
				<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-end justify-between  padding-tb-sm">
					<view class="text-xl text-black text-bold">我的订单</view>
					<view @click="orderFunc(0)" 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 + 1)" 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="flex padding align-center bg-white">
				<view style="flex: 1;border-radius: 20upx;position: relative;overflow: hidden;" class="margin-right-xs padding bg-gray">
					<view class="text-gray padding-bottom-sm text-lg">积分</view>
					<view class="text-xl text-bold">0</view>
					<view style="position: absolute;right: 0;bottom: 0;border-radius: 20upx 0 20upx 0;" class="bg-yellow padding-lr padding-tb-sm">
						<view class="bg-yellow " style=" opacity: 0.5;position: absolute;left:-20upx;bottom:0;border-radius: 20upx 0 20upx 0;width: 40upx;height: 40upx;"></view>
						<text class="cuIcon-coin text-xxl text-white"></text>
					</view>
				</view>
				<view style="flex: 1;border-radius: 20upx;position: relative;overflow: hidden;" class="margin-left-xs padding bg-gray">
					<view class="text-gray padding-bottom-sm text-lg">余额</view>
					<view class="text-xl text-bold">0</view>
					<view style="position: absolute;right: 0;bottom: 0;border-radius: 20upx 0 20upx 0;" class="bg-red padding-lr padding-tb-sm">
						<view class="bg-red" style=" opacity: 0.5;position: absolute;left:-20upx;bottom:0;border-radius: 20upx 0 20upx 0;width: 40upx;height: 40upx;"></view>
						<text class="cuIcon-moneybag text-xxl text-white"></text>
					</view>
				</view>
			</view>
			<!-- 菜单栏 -->
			<view class="padding bg-white">
				<view class="text-xl text-black text-bold">菜单栏</view>
				<view class="grid col-4 margin-bottom text-center">
					<view @click="updateUserInfo" class="padding">
						<text class="cuIcon-refresh text-xxl text-grey"></text>
						<view class="margin-top-sm">更新资料</view>
					</view>
					<view @click="handler('/loginPages/collect/index')" class="padding">
						<text class="cuIcon-likefill text-xxl text-red"></text>
						<view class="margin-top-sm">我的收藏</view>
					</view>
					<view @click="handler('/loginPages/evaluate/index')" class="padding">
						<text class="cuIcon-evaluate_fill text-xxl text-yellow"></text>
						<view class="margin-top-sm">评价中心</view>
					</view>
					<view @click="handler('/loginPages/addressList/index')" class="padding">
						<text class="cuIcon-locationfill text-xxl text-green"></text>
						<view class="margin-top-sm">收货地址</view>
					</view>
				</view>
			</view>
		</view>
		<!-- footer -->
		<cu-bar active="4" />
		<!-- 工具 -->
		<cu-modalB
			:show.sync="show"
			@confirm="getphonenumber"
			title="登录提醒"
			openType="getPhoneNumber"
			confirmText="立即登录"
			concalText="暂不登录"
			content="您还未登录,请先登录再进行操作!"
		/>
		<cu-modalB
			:show.sync="showB"
			@confirm="updateUserInfo"
			title="更新资料"
			confirmText="允许"
			concalText="拒绝"
			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';
import api from "./api.js";
export default {
	computed: {
		...mapState([ 'face', 'name']),
		bind(){
			let bind=this.$store.state.bind;
			if(bind==1) this.show=false;
			return bind;
		}
	},
	data() {
		return {
			show: false,
			showB:false,
			statusBarHeight,
			CustomBarHeight,
			bg,
			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(options) {
		let { status } = options;
		if (status || this.bind==0) this.show = true;
	},
	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'
			});
		},
		async getphonenumber(e){
			await this.wxbind(e.detail);
			this.showB=true;
		},
		async handler(path) {
			if(this.bind!=1) return false;
			uni.navigateTo({
				url: path
			});
		}
	},

};
</script>

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