qjd-shell-uniapp/pages/user/index.vue

<template>
	<view class="content">
		<view class="user-info-box">
			<image class="user-image" :src="userData.headImage"></image>
			<view class="user-info">
				<view class="user-logoin-title">{{userData.userName}}</view>
				<view class="user-type">
					<view class="iconfont iconshangjia-shanghu"></view>
					<view>商家用户</view>
				</view>
			</view>
		</view>
		<view class="order-box">
			<view class="order-item" @click="orderClick(2)">
				<view class="iconfont icondaifahuo order-item-icon">
					<view v-if="false" class="order-item-icon-num">10</view>
				</view>
				<view class="order-item-text">待发货</view>
			</view>
			<view class="order-item" @click="orderClick(3)">
				<view class="iconfont icondaishouhuo order-item-icon"></view>
				<view class="order-item-text">已发货</view>
			</view>
			<view class="order-item" @click="orderClick(4)">
				<view class="iconfont iconyishouhuo order-item-icon"></view>
				<view class="order-item-text">已收货</view>
			</view>
			<view class="order-item" @click="orderClick(5)">
				<view class="iconfont icondaipingjia order-item-icon"></view>
				<view class="order-item-text">已评价</view>
			</view>
		</view>
		<view class="cell-group">
			<view class="item-btn" @click="pickClick()">
				<view class="iconfont iconcaizhai item-btn-icon"></view>
				<view class="item-btn-text">自助采摘</view>
				<view class="iconfont iconfangxiang"></view>
			</view>
			<view class="item-btn" @click="authorizeClick()" v-if="userData.isMaster">
				<view class="iconfont iconquanxian item-btn-icon"></view>
				<view class="item-btn-text">授权</view>
				<view class="iconfont iconfangxiang"></view>
			</view>
			<view class="item-btn" @click="couponClick()">
				<view class="iconfont iconyouhuiquan item-btn-icon"></view>
				<view class="item-btn-text">优惠券管理</view>
				<view class="iconfont iconfangxiang"></view>
			</view>
		</view>
		<view class="cell-group">
			<view class="item-btn" @click="infoClick()">
				<view class="iconfont icondianpu item-btn-icon"></view>
				<view class="item-btn-text">商户信息</view>
				<view class="iconfont iconfangxiang"></view>
			</view>
			<view class="item-btn" @click="aboutUsClick()">
				<view class="iconfont iconguanyu item-btn-icon"></view>
				<view class="item-btn-text">关于我们</view>
				<view class="iconfont iconfangxiang"></view>
			</view>
			<view class="item-btn" @click="modalShow=true">
				<view class="iconfont iconguanyu item-btn-icon"></view>
				<view class="item-btn-text">后台管理信息</view>
				<view class="iconfont iconfangxiang"></view>
			</view>
		</view>
		<u-top-tips ref="uTips"></u-top-tips>
		<u-modal v-model="modalShow" title="后台管理信息" :content="'账号:'+manageInfo.account+',密码'+ manageInfo.password"></u-modal>
	</view>
</template>

<script>
	const NET = require('@/utils/request')
	const API = require('@/config/api')
	export default {
		data() {
			return {
				integral: '',
				userData: {
					userId: '',
					userName: '',
					headImage: '',
					isMaster: 0,
				},
				manageInfo: {},
				modalShow: false
			}
		},
		onLoad() {
			this.userData = uni.getStorageSync("userData")
			console.log('是否授权', this.userData.isMaster)
		},
		onShow() {
			NET.request(API.getManageInfo, {}, 'POST').then(res => {
				this.manageInfo = res.data
			}).catch(error => {
				this.$refs.uTips.show({
					title: error.data.msg,
					type: 'warning',
				})
			})
		},
		methods: {
			//  我的订单
			orderClick(type) {
				uni.navigateTo({
					url: '/pagesMain/orderList?type=' + type
				});
			},
			//  自助采摘
			pickClick() {
				uni.navigateTo({
					// url: '/pagesMedia/pickVideo',
					url: '/pagesMain/pickOrderList?type=' + 6
				});
			},
			//  授权
			authorizeClick() {
				uni.navigateTo({
					url: '/pagesMain/authorizeList'
				});
			},
			//  优惠券管理
			couponClick() {
				uni.navigateTo({
					url: '/pagesMain/couponList'
				});
			},
			//  商户信息
			infoClick() {
				uni.navigateTo({
					url: '/pagesMain/registerForm'
				});
			},
			//  关于我们
			aboutUsClick() {
				uni.navigateTo({
					url: '/pagesMain/aboutUs'
				});
			},
			// 获取后台管理账号密码
			manageInfoClick(){
				this.modalShow = true
			}
		}
	}
</script>

<style lang='scss'>
	page {
		width: 100%;
		height: 100%;
	}

	.content {
		width: 100%;
		height: 100%;
		float: left;
		background-color: #F3F3F3;

		.user-info-box {
			width: 100%;
			height: 120px;
			float: left;
			box-sizing: border-box;
			padding: 15px;
			position: relative;
			background-size: 100% 195px;
			background-position: center top;
			background-repeat: no-repeat;
			background-image: url(@/static/images/userBg.png);

			.user-image {
				width: 65px;
				height: 65px;
				object-fit: cover;
				border-radius: 50%;
				float: left;
			}

			.user-info {
				width: calc(100% - 85px);
				float: left;
				display: flex;
				flex-direction: column;
				padding: 10px 15px;
				box-sizing: border-box;
				z-index: 10;

				.user-logoin-title {
					font-size: 36upx;
					font-weight: 500;
					color: rgba(255, 255, 255, 1);
				}

				.user-type {
					width: 70px;
					height: 20px;
					background: #FFFFFF;
					color: #55AF3D;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 12px;
				}
			}
		}

		.order-box {
			width: 690upx;
			height: 170upx;
			float: left;
			background: rgba(255, 255, 255, 1);
			box-shadow: 0px 0px 10upx 0px rgba(51, 51, 51, 0.1);
			border-radius: 10upx;
			display: flex;
			flex-direction: row;
			align-items: center;
			z-index: 10;
			position: relative;
			left: 50%;
			transform: translateX(-50%);
			margin-top: -20px;
			margin-bottom: 10px;

			.order-line {
				width: 12upx;
				height: 106upx;
			}

			.order-item {
				flex: 1;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;

				.order-item-icon {
					color: #52A63A;
					font-size: 30px;
					display: flex;
					position: relative;
					.order-item-icon-num {
						background: #ffffff;
						width: 22px;
						height: 20px;
						font-size: 12px;
						border-radius: 50%;
						color: #52A63A;
						text-align: center;
						position: absolute; 
						left: 20px;
						border: 1px solid #52A63A;
						line-height: 20px;
					}
				}

				.order-item-text {
					font-size: 28upx;
					margin-top: 10upx;
					font-weight: 500;
				}
			}
		}

		.cell-group {
			width: 100%;
			float: left;
			margin-bottom: 10px;

			.item-btn {
				width: 100%;
				height: 50px;
				display: flex;
				flex-direction: row;
				align-items: center;
				box-sizing: border-box;
				background-color: #fff;
				padding: 0 15px;

				.item-btn-icon {
					color: #52A63A;
					font-size: 20px;
				}

				.item-btn-text {
					font-size: 28upx;
					margin-left: 20upx;
					font-weight: 500;
					flex: 1;
					color: rgba(102, 102, 102, 1);
				}

			}
		}
	}
</style>