baozhida-deliver-medicine-app/pages/homePage.vue

<template>
	<view class="home_app_bgc">
		<u-navbar placeholder bgColor="#a9e3f1" leftIcon="" @rightClick="rightClick">
			<!-- <view class="u-nav-slot" slot="left">
				贵州宝智达科技有限公司
			</view> -->
			<view class="u-nav-slot" slot="right">
				<u-icon name="list-dot" size="30" color="#fff"></u-icon>
			</view>
		</u-navbar>
		<view class="column_center_card">
			<view class="mine_bg_card">
				<view class="card_mine">
					<view class="card_avatar" v-if="token != ''">
						<image class="mine_image" src="../static/portrait.png" mode=""></image>
						<view class="card_user_title">
							<view class="mine_phone">{{userInfo.username}}</view>
							<view class="mine_phone1">{{userInfo.nickName}}</view>
						</view>
					</view>
					<view class="card_avatar" v-else @click="login">
						<image class="mine_image" src="../static/portrait.png" mode=""></image>
						<view class="mine_title">登录/注册</view>
					</view>
				</view>
				<view class="order_card_home">
					<view class="order_title_head" @click="getOperate('order',0)">
						<span>我的订单</span>
						<u-icon name="arrow-right-double" size="20" color="#000"></u-icon>
					</view>
					<view class="card_order">
						<view class="item_order" v-for="(item,index) in tableList" :key="index"
							@click="getOperate('order',index)">
							<view class="card_tab_image center_in"
								:style="{background: item.bgColor,backgroundColor:item.colorBg}">
								<span class="iconfont icon_image" :class="item.icon"></span>
							</view>
							<view class="order_title">{{item.title}}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="bp_Card_width">
				<view class="bpzs_card" @click="getOperate('manage')">
					<span class="iconfont image_bp icon-bingpaiguanli"></span>
					<span class="title_bpzs">冰排追溯管理</span>
				</view>
				<view class="right_bpzs_card">
					<view class="bpcrk_card" @click="getOperate('enter','冰排入库')">
						<span class="iconfont image_cr icon-bingpairuku"></span>
						<span class="title_bpzs">冰排入库</span>
					</view>
					<view class="bpcrk_card" @click="getOperate('out','冰排出库')">
						<span class="iconfont image_cr icon-bingpaichuku"></span>
						<span class="title_bpzs">冰排出库</span>
					</view>
				</view>
			</view>
			<view class="card_bottom_add" @click="getOperate('iceCold')" v-if="iceColdFlag">
				<view style="display: flex;align-items: center;">
					<span class="iconfont icon-binggui icon_bottom"></span>
					<span>冷冻柜管理</span>
				</view>
				<u-icon name="arrow-right" size="20"></u-icon>
			</view>
			<view class="card_bottom_add" @click="getOperate('incubator')">
				<view style="display: flex;align-items: center;">
					<span class="iconfont icon-incubator icon_bottom"></span>
					<span>保温箱管理</span>
				</view>
				<u-icon name="arrow-right" size="20"></u-icon>
			</view>
			<view class="card_bottom_add" @click="getOperate('iceRaft')">
				<view style="display: flex;align-items: center;">
					<span class="iconfont icon-bingpaiguanli icon_bottom"></span>
					<span>冰排管理</span>
				</view>
				<u-icon name="arrow-right" size="20"></u-icon>
			</view>
			<view class="card_bottom_add" @click="getOperate('add')">
				<view style="display: flex;align-items: center;">
					<span class="iconfont icon-tianjiadingdan icon_bottom"></span>
					<span>添加订单</span>
				</view>
				<u-icon name="arrow-right" size="20"></u-icon>
			</view>
			<view class="card_bottom_add" @click="getOperate('book')">
				<view style="display: flex;align-items: center;">
					<span class="iconfont icon-dizhibu icon_bottom"></span>
					<span>地址簿</span>
				</view>
				<u-icon name="arrow-right" size="20"></u-icon>
			</view>
			<view style="width: 100%;height: 100rpx;"></view>
		</view>
		<clh-popup position="right" round="0rpx" v-model="personalShow">
			<view :style="{paddingTop:height + 'px'}">
				<view class="head_mine">
					<view class="card_mine_message">
						<view class="card_rectangle">
							<view class="card_circle"></view>
							<view class="left_order_head" @click="getOperate('order',0)">
								<!-- <u-icon name="order" size="30" color="#5ac725"></u-icon> -->
								<span class="iconfont icon_fast icon-quanbudingdan"></span>
							</view>
							<view class="right_exit_head" @click="getOperate('wait')">
								<!-- <u-icon name="edit-pen" size="30" color="#5ac725"></u-icon> -->
								<span class="iconfont icon_fast icon-bianji"></span>
							</view>
							<view class="card_content_area">
								<view class="card_name">姓名: <span>{{userInfo.username}}</span></view>
								<view class="card_name">账号: <span>{{userInfo.nickName}}</span></view>
							</view>
						</view>
					</view>
					<image class="card_mine_image" src="../static/portrait.png" mode=""></image>
				</view>
				<view class="classify_card" @click="getOperate('book')">
					<span>地址簿</span>
					<u-icon name="arrow-right"></u-icon>
				</view>
				<view class="classify_card" @click="getOperate('password')">
					<span>修改密码</span>
					<u-icon name="arrow-right"></u-icon>
				</view>
				<view class="btn_exit" @click="logOut">
					<u-button text="退出登录"></u-button>
				</view>
			</view>
		</clh-popup>
		<u-modal :show="logoutShow" showCancelButton :title="title" :content='content' @cancel="cancel"
			@confirm="confirm"></u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				personalShow: false,
				token: '',
				userInfo: {},
				tableList: [{
					title: '全部',
					icon: 'icon-dingdan',
					colorBg: '#4bc7fc',
					bgColor: 'linear-gradient(to right, #84d4f6, #4bc7fc)',
				}, {
					title: '待配送',
					icon: 'icon-cancel',
					colorBg: '#9ddd54',
					bgColor: 'linear-gradient(to right, #b9f377, #9ddd54)',
				}, {
					title: '配送中',
					icon: 'icon-delivery',
					colorBg: '#4bc7fc',
					bgColor: 'linear-gradient(to right, #84d4f6, #4bc7fc)',
				}, {
					title: '已送达',
					icon: 'icon-yisongda',
					colorBg: '#1cc723',
					bgColor: 'linear-gradient(to right, #54ef5a, #1cc723)',
				}, {
					title: '已拒收',
					icon: 'icon-yiquxiao',
					colorBg: '#fe880e',
					bgColor: 'linear-gradient(to right, #f69f45, #fe880e)',
				}],
				logoutShow: false,
				title: '确定退出？',
				content: '退出登录后将无法查看运单，重新登录后即可查看',
				height: '',
				// 是否释冷
				iceColdFlag: true,
			}
		},
		onShow() {
			const arr = uni.getSystemInfoSync().statusBarHeight
			this.height = arr
			var token = this.$cache.getToken()
			this.token = token
			var userInfo = this.$cache.getCache('userInfo')
			if (userInfo) {
				this.userInfo = userInfo
			} else {
				this.userInfo = {}
			}
		},
		mounted() {
			this.getUserInfo()
		},
		methods: {
			getUserInfo() {
				this.$api.get('/api/user/profile').then(res => {
					if (res.code == 200) {
						this.userInfo = res.data.user
						this.$cache.setCache('userInfo', this.userInfo)
					} else {
						this.$cache.removeToken()
						this.$cache.removeCache('userInfo')
						uni.showToast({
							title: '当前用户不存在',
							icon: 'none'
						});
					}
				})
			},
			rightClick() {
				this.personalShow = true
			},
			// 登录注册
			login() {
				uni.navigateTo({
					url: '/pages/login'
				});
			},
			getOperate(type, value) {
				if (this.token) {
					if (type == 'book') {
						uni.navigateTo({
							url: '/pages/order/addressBook'
						});
					} else if (type == 'add') {
						uni.navigateTo({
							url: '/pages/order/addWaybill?title=添加运单&type=1'
						});
					} else if (type == 'password') {
						uni.navigateTo({
							url: '/pages/mine/password'
						});
					} else if (['truck', 'unload', 'signfor', 'enter', 'out'].includes(type)) {
						uni.navigateTo({
							url: '/pages/order/delivery?id=' + type + '&title=' + value
						});
					} else if (type == 'manage') {
						uni.navigateTo({
							url: '/pages/home/IceManagement'
						});
					} else if (type == 'order') {
						uni.navigateTo({
							url: '/pages/order/index?current=' + value
						});
					} else if (type == 'incubator') {
						uni.navigateTo({
							url: '/pages/order/Incubator?detailsFlag=true'
						});
					} else if (type == 'iceRaft') {
						uni.navigateTo({
							url: '/pages/order/iceRaft'
						});
					} else if (type == 'iceCold') {
						uni.navigateTo({
							url: '/pages/order/iceCold?detailsFlag=true'
						});
					} else if (type == 'wait') {
						uni.$u.toast('敬请期待！')
					}
				} else {
					uni.$u.toast('请先登录')
				}
			},
			// 退出登录
			logOut() {
				if (this.token) {
					this.logoutShow = true
				} else {
					uni.$u.toast('请先登录')
				}
			},
			// 确定退出登录
			confirm() {
				this.$cache.removeToken()
				this.$cache.removeCache('userInfo')
				uni.redirectTo({
					url: '/pages/login'
				})
			},
			// 取消
			cancel() {
				this.logoutShow = false
			},
			close() {
				this.personalShow = false
			}
		}
	}
</script>

<style lang="scss">
	.home_app_bgc {
		background-image: linear-gradient(#a9e3f1, #a9e3f1, #f3f4f6);
	}

	// page {
	// 	background-image: linear-gradient(#a9e3f1, #a9e3f1, #f3f4f6);
	// }

	.column_center_card {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.mine_bg_card {
		width: 95%;
		border-radius: 10rpx;
		background-image: url(../static/task/mine.jpg);
		background-repeat: no-repeat;
		background-position: center top;
		background-size: cover;
		background-attachment: scroll;
		// background-color: #fff;
		// background-image: linear-gradient(#7edfe4, #ffffff);
	}

	.card_mine {
		padding: 0rpx 20rpx;
		border-bottom: 1rpx solid #f4f4f5;
	}

	.mine_image {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
	}

	.mine_phone {
		margin-left: 20rpx;
		font-size: 35rpx;
		color: #fff;
	}

	.mine_phone1 {
		margin-left: 20rpx;
		font-size: 30rpx;
		color: #f4f4f5;
	}

	.mine_title {
		margin-left: 20rpx;
		font-size: 40rpx;
		font-weight: bold;
	}

	.card_avatar {
		display: flex;
		align-items: center;
		padding-top: 30rpx;
		padding-bottom: 30rpx;
	}

	.order_title_head {
		display: flex;
		align-items: center;

		span {
			color: #000;
			font-weight: bold;
			font-size: 30rpx;
			padding: 15rpx 0rpx 8rpx 20rpx;
		}
	}

	.order_card_home {
		margin: 20rpx;
		padding-bottom: 20rpx;
		border-radius: 10rpx;
		background-color: rgba(255, 255, 255, 0.5);
	}

	.card_order {
		position: relative;
		margin-top: 20rpx;
		display: flex;
		justify-content: space-around;
	}

	.item_order {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.card_tab_image {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
	}

	.order_title {
		color: #000;
		margin-top: 6rpx;
		font-size: 25rpx;
	}

	.icon_image {
		color: #fff;
		font-size: 37rpx;
	}

	.bp_Card_width {
		display: flex;
		width: calc(100% - 40rpx);
		margin: 20rpx;
	}

	.bpzs_card {
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: center;
		width: 45%;
		height: 300rpx;
		// background-color: #fff;
		border-radius: 10rpx;
		background-image: linear-gradient(-225deg, #7edfe4 0%, #ffffff 48%, #7edfe4 100%);
	}

	.image_bp {
		font-size: 70px;
		color: #19be6b;
		margin-bottom: 10rpx;
	}

	.title_bpzs {
		font-size: 36rpx;
		color: #19be6b;
	}

	.right_bpzs_card {
		display: flex;
		width: 55%;
		flex-direction: column;
		justify-content: space-between;
		align-items: flex-end;
	}

	.bpcrk_card {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 97%;
		height: 145rpx;
		border-radius: 10rpx;
		background-image: linear-gradient(-225deg, #7edfe4 0%, #ffffff 48%, #7edfe4 100%);
	}

	.image_cr {
		margin-right: 20rpx;
		font-size: 30px;
		color: #19be6b;
	}

	.card_bottom_add {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: calc(100% - 80rpx);
		margin: 10rpx 20rpx;
		padding: 30rpx 20rpx;
		border-radius: 10rpx;
		background-color: rgba(255, 255, 255, 0.5);
	}

	.icon_bottom {
		font-size: 40rpx;
		margin-right: 10rpx;
	}

	.head_mine {
		position: relative;
		height: 378rpx;
		margin-bottom: 10rpx;
	}

	.card_mine_image {
		position: absolute;
		width: 125rpx;
		height: 125rpx;
		border-radius: 50%;
		top: 68rpx;
		left: calc(50% - 59rpx);
	}

	.card_mine_message {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		overflow: hidden;
		margin-top: 130rpx;
		border-bottom: 1rpx solid #f4f4f5;
		padding: 0rpx 50rpx 30rpx 50rpx;
	}

	.card_rectangle {
		position: relative;
		width: 100%;
		height: 200rpx;
		border: 2rpx solid #5ac725;
	}

	.card_circle {
		position: absolute;
		top: -73rpx;
		left: calc(50% - 70rpx);
		width: 140rpx;
		height: 140rpx;
		border-radius: 50%;
		background-color: #fff;
		border: 2rpx solid #5ac725;
	}

	.left_order_head {
		position: absolute;
		top: 10rpx;
		left: 10rpx;
	}

	.icon_fast {
		font-size: 45rpx;
		color: #5ac725;
	}

	.right_exit_head {
		position: absolute;
		top: 12rpx;
		right: 10rpx;
	}

	.card_content_area {
		position: absolute;
		top: 80rpx;
		left: 20rpx;
		right: 0;
		bottom: 0;
		display: flex;
		flex-direction: column;
	}

	.card_name {
		margin-top: 10rpx;
		font-size: 30rpx;

		span {
			margin-left: 10rpx;
		}
	}

	.classify_card {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx;
	}

	.btn_exit {
		position: absolute;
		bottom: 30rpx;
		left: 30rpx;
		right: 30rpx;
		padding-bottom: env(safe-area-inset-bottom);
	}
</style>