fangliaoxiaochengxv/pages/mine/index.vue

<template>
	<view class="app-page">
		<view class="top-bar-view">
			<view class="top-bg" :style="{background: bgImg ? null : 'linear-gradient(138deg, #ffecaf 0%, #fbf5e3 59%, #f5f6f8 100%)',
		opacity: '0.8'}">
				<image v-if="bgImg" style="width: 100%;display: block;" mode="widthFix" :src="bgImg"></image>
			</view>
			<view class="top-box">
				<view class="top-bar" :style="
            'height:' +
            topData.height +
            'px;' +
            'padding-top:' +
            topData.top +
            'px;padding-bottom:20rpx'
          ">
					<u--text customStyle="font-weight: 800;" color="#282B39" align="center" size="34rpx" text="个人中心" />
				</view>
				<view class="login-box" @click="checkShowUserRegister()">
					<view class="avatar-wrap">
						<u--image width="126rpx" height="126rpx" radius="100%" shape="circle" bgColor="#d3c6b5"
							customStyle="border-radius:100%;" :src="
                avatarUrl != defaultAvatarUrl
                  ? avatarUrl
                  : `/static/defaultAvatar.png`
              " :fade="true" duration="450"></u--image>
						<view class="vip-tag"
							:style="{background: `url(${user_grade_bg}) no-repeat center left`, backgroundSize: '154rpx 40rpx',}">
							<!-- <u--image width="38rpx" height="38rpx" radius="100%" shape="circle"
								customStyle="border-radius:100%;margin-right: -12rpx;" src="/static/vip_tag.png"
								:fade="true" duration="450"></u--image> -->
							<view class="vip-text">{{userInfo.vip_name}}</view>
						</view>
					</view>
					<view class="user-info-wrap">
						<view class="userName-wrap">
							<text class="userName">{{
                userName ? userName : "登录/注册"
              }}</text>
							<u--image width="30rpx" height="30rpx" customStyle="margin-left: 12rpx;"
								src="/static/ic-editor-org.png" :fade="true" duration="450"></u--image>
						</view>
						<view class="info-list">
							<text class="info-list-item">{{userInfo.phone}}</text>
							<text class="info-list-item">余额: {{userInfo.rebate_total - userInfo.rebate_used}}</text>
						</view>
						<view class="info-list">积分：{{userInfo.integral_total - userInfo.integral_used}}</view>
						<view class="info-list" style="color: #999"
							v-if="userInfo.pid &&userInfo.agent && userInfo.agent.username ">
							推荐人：{{userInfo.agent.username}}
						</view>
					</view>
				</view>
				<view class="jion-vip-wrap" @click="checkShowUserRegister()"
					:style="{backgroundImage: `url(${jion_vip_bg})`}">
					<!-- <view class="left"> -->
					<!-- <view class="title">加入VIP会员</view> -->
					<!-- <view class="docs">获取更多福利内容</view> -->
					<!-- </view> -->
					<!-- <view class="right-btn">立即加入</view> -->
				</view>
				<view class="orders-info-card">
					<view class="orders-card">
						<view class="card-title">
							<text>我的订单</text>
							<view class="right" @click="toOrderList(0)">查看全部<u-icon name="arrow-right" size="13"
									color="#858585"></u-icon>
							</view>
						</view>
						<u-line color="#F4F4F4"></u-line>
						<view class="menu-box">
							<view class="menu-item" @click="toOrderList(item.index)" v-for="(item, index) in shopList">
								<view style="position: relative;">
									<image :src="item.url" mode="heightFix"></image>
									<u-badge :absolute="true" :offset="[-5,-10]" :value="orderNumber[item.numKey]">
									</u-badge>
								</view>
								<text>{{ item.name }}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="member-info-card">
					<view class="member-card">
						<text class="card-title">分销商</text>
						<u-line color="#F4F4F4"></u-line>
						<view class="menu-box">
							<view class="menu-item" @click="goToPath(item)" v-for="(item, index) in menuList">
								<image :src="item.url" mode="heightFix"></image>
								<text>{{ item.name }}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="member-other-card">
					<text class="card-title">其他功能</text>
					<u-line color="#F4F4F4"></u-line>
					<view class="menu-other-box">
						<view class="menu-other-item" v-for="(item, index) in otherList" :key="index"
							@click="goToPath(item)">
							<image :src="item.url" mode="heightFix"></image>
							<text>{{ item.name }}</text>
							<button style="position: absolute;width: 100%;height: 100%;z-index: 999;opacity: 0;"
								v-if="item.value == 'concat'" open-type="contact" @contact="contact"></button>
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-popup :show="showUserRegister" @close="showUserRegister = false" round="18rpx">
			<form v-if="!isUserRegister" @submit="saveUserData">
				<view class="m-content-view">
					<text class="top-view"> {{shopName}} </text>
					<text class="tips">请您授权头像昵称信息，您授权的信息将受到严格保护，请放心使用。</text>
					<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar"
						style="border: 0">
						<u--image v-if="avatarUrl !== defaultAvatarUrl" width="149rpx" height="149rpx" radius="100%"
							shape="circle" :src="avatarUrl" :fade="true" duration="450" mode="heightFix"></u--image>
						<view class="v1" v-else>
							<u--image width="80rpx" height="80rpx" radius="100%" shape="circle" :src="avatarUrl"
								:fade="true" duration="450" mode="heightFix"></u--image>
							<text v-if="avatarUrl === defaultAvatarUrl">获取头像</text>
						</view>
					</button>
					<input name="nickname" v-model="userName" type="nickname" class="m-input" placeholder="请输入昵称" />
					<button class="red-btn" form-type="submit">确认授权</button>
				</view>
			</form>
		</u-popup>

		<tabbarCom current="4"></tabbarCom>
	</view>
</template>

<script>
	import tabbarCom from "@/components/tabbar/tabbar.vue"
	import {
		uploadBase64File,
		getNewRemindCnt,
		addAddress,
	} from "@/common/api/common.js";

	import {
		getOrderList
	} from "@/common/api/order.js";
	import {
		updateUserInfo,
		getUserInfo,
		userBindNickname
	} from "@/common/api/user.js";

	const defaultAvatarUrl =
		"https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0";
	import $C from "@/common/utils/config.js";
	export default {
		components: {
			tabbarCom
		},
		data() {
			return {
				topData: {
					top: 0,
					height: 0,
				},
				shopName: "六感熟眠商城",
				bgImg: null,
				jion_vip_bg: 'https://work.hkmop.com/static/imgs/jion_vip_bg.png',
				user_grade_bg: '', //#f4c530
				tips: "登录/注册",
				defaultAvatarUrl,
				avatarUrl: defaultAvatarUrl,
				isUserRegister: false,
				showUserRegister: false,
				userName: "",
				userInfo: undefined,
				badgeValue: 0,
				userData: {},
				newRemindCnt: 0,
				orderNumber: {},
				menuList: [{
						name: "推广海报",
						url: require("@/static/ic-menu-a.png"),
						path: "/subPages/poster/poster",
						isVip: true
					},
					{
						name: "我的团队",
						url: require("@/static/ic-menu-b.png"),
						path: "/subPages/myTeam/myTeam",
						isVip: true
					},
					{
						name: "分销订单",
						url: require("@/static/ic-menu-c.png"),
						path: "/subPages/distribution/distribution",
						isVip: true
					},
					{
						name: "提现记录",
						url: require("@/static/ic-menu-d.png"),
						path: "/subPages/withdrawalManagement/withdrawalManagement",
						isVip: true
					},
					{
						name: "提现",
						url: require("@/static/ic-menu-e.png"),
						path: "/subPages/applyWithdrawal/applyWithdrawal",
						isVip: true
					},
				],
				shopList: [{
						name: "待付款",
						url: require("@/static/ic-shop-a.png"),
						value: '1,2',
						index: 1,
						numKey: 'toPay'
					},
					{
						name: "待发货",
						url: require("@/static/ic-shop-b.png"),
						value: '3',
						index: 2,
						numKey: 'toSend'
					},
					{
						name: "待收货",
						url: require("@/static/ic-shop-c.png"),
						value: '4',
						index: 3,
						numKey: 'toConfirm'
					},
					{
						name: "已完成",
						url: require("@/static/ic-shop-d.png"),
						value: '6,9',
						index: 4,
						numKey: 'complate'
					},
					{
						name: "退款/售后",
						url: require("@/static/ic-shop-e.png"),
						index: 5,
						numKey: 'afterSales'
					},
				],
				otherList: [{
						name: "优惠券",
						url: require("@/static/ic-other-a.png"),
						path: "/subPages/coupon/coupon",
						isVip: true
					},
					{
						name: "地址管理",
						url: require("@/static/ic-other-b.png"),
						path: "/subPages/addressMg/addressMg",
						isVip: true
					},
					{
						name: "我的收藏",
						url: require("@/static/ic-other-cooprule.png"),
						path: "/subPages/collectList/collectList",
						isVip: true
					},
					{
						name: "帮助中心",
						url: require("@/static/ic-other-c.png"),
						path: "/subPages/helpCenter/helpCenter",
					},
					{
						name: "关于我们",
						url: require("@/static/ic-other-d.png"),
						path: "/pages/singlePage/index?name=3",
					},
					{
						name: "在线客服",
						url: require("@/static/ic-other-e.png"),
						value: 'concat'
					},
				],
			};
		},
		computed: {
			displayBalance() {
				const {
					balance_total,
					balance_used
				} = this.userInfo || {};
				return balance_total - balance_used;
			},
		},
		created() {
			const configs = uni.getStorageSync("configs");
			if (configs) {
				this.shopName = configs.shop_name
				this.bgImg = configs.ucenter_bg
				this.jion_vip_bg = configs.user_in_bg
				this.user_grade_bg = configs.user_grade_bg
			}


		},
		mounted() {},

		//发送给朋友
		onShareAppMessage(res) {
			let configs = uni.getStorageSync('configs') || {}
			return {
				title: configs.shop_share_title,
				imageUrl: configs.shop_share_img,
				path: `/pages/home/dashboard/index?id=${
        JSON.parse(uni.getStorageSync("userInfo")).id
      }`,
			};
		},
		// 分享到朋友圈
		onShareTimeline() {
			let configs = uni.getStorageSync('configs') || {}
			return {
				title: configs.shop_share_title,
				imageUrl: configs.shop_share_img,
				path: `/pages/home/dashboard/index?id=${
        JSON.parse(uni.getStorageSync("userInfo")).id
      }`
			};
		},
		onShow() {
			const topData = uni.getMenuButtonBoundingClientRect();
			this.topData.top = topData.top;
			this.topData.height = topData.height;
			this.reUserInfo();
			this.getUserInfo();

			// this.getOrderListCount()
		},
		methods: {
			contact(res) {
				console.log(345555, res)
			},
			getOrderStatics() {
				this.$api.getOrderStatics().then(res => {
					const {
						t1 = 0, t2 = 0, t3 = 0, t4 = 0, t6 = 0, t9 = 0
					} = res.data
					this.orderNumber = {
						toPay: t1 + t2,
						toSend: t3,
						toConfirm: t4,
						complate: t6 + t9,
						afterSales: res.data.t - 1 + res.data.t - 2,
					}
				})
			},
			checkShowUserRegister() {
				if (!this.isUserRegister) {
					this.showUserRegister = true;
					return true;
				} else {
					// if (this.userInfo.vip_code && this.userInfo.vip_code != "0") {
					// 	this.toSubPages("personalDataManagement");
					// } else {
					// 	this.toSubPages("register");
					// }
					this.toSubPages("personalDataManagement");
					return false;
				}
			},
			reUserInfo() {
				const userInfo = uni.getStorageSync("userInfo");
				if (
					userInfo &&
					JSON.parse(userInfo).nickname != "" &&
					JSON.parse(userInfo).headimg != ""
				) {
					this.userInfo = JSON.parse(userInfo);
					const {
						headimg,
						nickname,
						base_sex,
						realname,
						region_area,
						region_city,
						region_province,
						phone
					} =
					this.userInfo
					this.avatarUrl = this.userInfo.headimg;
					this.userName = this.userInfo.nickname;
					this.isUserRegister = true;
					this.getOrderStatics()
				} else {
					this.isUserRegister = false;
				}
				console.log("reUserInfo==>", this.userInfo);
			},
			toOrderList(str = 0) {
				if (!this.isUserRegister) {
					this.showUserRegister = true;
					return true;
				}
				uni.setStorageSync("orderIndex", str);
				uni.navigateTo({
					url: "/subPages/myOrder/myOrder",
				});
			},
			goToPath(item) {
				if (item.isVip) {
					if (!this.isUserRegister) {
						this.showUserRegister = true;
						return true;
					}
				}
				if (!item.path) {
					return;
				}
				uni.navigateTo({
					url: item.path,
				});
			},
			toSubPages(index) {
				uni.navigateTo({
					url: `/subPages/${index}/index`,
				});
			},
			// 获取未支付数量
			getOrderListCount() {
				uni.showLoading();
				const data = {
					status: 2,
					page: this.page,
					limit: this.limit,
				};
				getOrderList(data)
					.then((res) => {
						uni.hideLoading();
						console.log("getOrderList==>", res.data.list);
						if (res.data) {
							this.badgeValue = res.data.page.total;
						}
					})
					.catch(() => {
						uni.hideLoading();
					});
			},
			bindNickname(url) {
				this.isUserRegister = true;
				this.showUserRegister = false;
				const data = {
					nickname: this.userName,
					username: this.userName,
					headimg: url,
				};
				userBindNickname(data).then((res) => {
					console.log("绑定昵称等==>", res.data);
					if (res.data) {
						uni.setStorageSync("token", res.data.token.token);
						if (!res.data.headimg) {
							res.data.headimg = url;
						}
						uni.setStorageSync("userInfo", JSON.stringify(res.data));
						this.isUserRegister = true;
						this.showUserRegister = false;
						this.toSubPages("register");
					}
				});
			},
			addAddress(addressData) {
				this.isUserRegister = true;
				this.showUserRegister = false;
				const data = {
					type: 1,
					name: addressData.userName,
					phone: addressData.telNumber,
					province: addressData.provinceName,
					city: addressData.cityName,
					area: addressData.countyName,
					address: addressData.detailInfo,
				};
				addAddress(data).then((res) => {
					console.log("addAddress==>", res.data);
					if (res.data) {
						uni.showToast({
							title: "添加成功",
							success: (res) => {},
						});
					}
				});
			},
			async getUserInfo() {
				const data = {};
				await getUserInfo(data)
					.then((res) => {
						if (res.data) {
							// uni.clearStorageSync()
							uni.setStorageSync("token", res.data.token.token);
							uni.setStorageSync("userInfo", JSON.stringify(res.data));
							this.userInfo = res.data;
							console.log("getUserInfo==>", this.userInfo);
						}
					})
					.catch(() => {
						uni.hideLoading();
					});
				await this.reUserInfo();
			},
			getNewRemindCnt() {
				const data = {};
				getNewRemindCnt(data)
					.then((res) => {
						console.log("getNewRemindCnt==>", res.data);
						// if (res.data) {
						this.newRemindCnt = res.data || 0;
						// }
					})
					.catch(() => {
						uni.hideLoading();
					});
			},
			onChooseAvatar(e) {
				const {
					avatarUrl
				} = e.detail;
				console.log("成功授权", avatarUrl);
				this.avatarUrl = avatarUrl;
			},
			saveUserData(e) {
				console.log(e.detail.value.nickname);
				if (
					this.avatarUrl === this.defaultAvatarUrl ||
					!e.detail.value.nickname
				) {
					uni.showToast({
						icon: "none",
						title: "请先授权完善信息",
					});
					return;
				}
				this.userName = e.detail.value.nickname;
				this.showUserRegister = false;
				this.getImageInfo();
			},
			getImageInfo() {
				// 获取当前图片信息
				uni.getImageInfo({
					src: this.avatarUrl,
					success: (image) => {
						// 做png/jpeg的类型判断————对不同类型的图像添加不同的转换头信息
						if (image.type == "png" || image.type == "jpeg") {
							// 对符合类型的图片转换为base64类型
							uni.getFileSystemManager().readFile({
								// 【重点来啦】人家自提供的转码API
								filePath: image.path, // 所需转码图像路径
								encoding: "base64", // 转码类型
								success: (res) => {
									// 生成base64
									let imageBase64 =
										"data:image/" + image.type + ";base64," + res.data;
									console.log("转base64后：", imageBase64);
									this.uploadBase64File(imageBase64);
								},
							});
						} else {
							// 友好一点，不是以上类型做出提醒
							uni.showToast({
								title: "当前只支持png/jpeg格式",
								duration: 2500,
								icon: "none",
							});
						}
					},
				});
			},
			uploadBase64File(imageBase64) {
				uploadBase64File({
						base64: imageBase64,
					}, {
						"Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
					})
					.then((res) => {
						console.log("uploadFile==>", res.data.url);
						this.avatarUrl = res.data.url;
						this.bindNickname(res.data.url);
					})
					.catch(() => {
						uni.hideLoading();
					});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.app-page {
		width: 100%;
		display: flex;
		flex-direction: column;
	}

	.top-bg {
		width: 750rpx;
		height: 634rpx;
		overflow: hidden;
	}

	.not-regis-box,
	.regis-box {
		margin-left: 20rpx;
		margin-top: 7rpx;
		height: 36rpx;
		line-height: 36rpx;
		padding: 0 10rpx;
		font-size: 22rpx;
		font-weight: bold;
		color: #9a9a9a;
		background: #e3e3e3;
		border-radius: 7rpx;
		display: inline-flex;
		align-items: center;

		.user-name-text {
			margin-left: 6rpx;
		}
	}

	.regis-box {
		background: rgba(231, 224, 255, 0.85);
		color: #815bff;
	}

	.top-bar-view {
		width: 100%;
		position: relative;
		display: flex;
		align-items: center;
		flex-direction: column;
	}

	.top-box {
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		display: flex;
		flex-direction: column;
	}

	.top-bar {
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: row;
	}

	.m-content-view {
		width: 100%;
		display: flex;
		align-items: center;
		flex-direction: column;
		background-color: #f7f7f7;
		border-radius: 24rpx 24rpx 0 0;
	}

	.top-view {
		font-size: 32rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #1d161f;
		line-height: 34rpx;
		text-align: left;
		margin: 55rpx 49rpx 0;
		width: calc(100% - 98rpx);
	}

	.tips {
		font-size: 26rpx;
		font-weight: 400;
		color: #858585;
		line-height: 34rpx;
		margin: 21rpx 49rpx 0;
	}

	.red-btn {
		color: white;
		background: #f39800;
		width: calc(100% - 98rpx);
		margin-top: 52rpx;
		margin-bottom: 52rpx;
		font-size: 32rpx;
		line-height: 84rpx;
		border-radius: 40rpx;
		text-align: center;
	}

	.red-btn:active {
		opacity: 0.7;
	}

	.v1 {
		height: 149rpx;
		width: 149rpx;
		display: flex;
		flex-direction: column;
		background: rgba(244, 244, 246, 1);
		border-radius: 100%;
		align-items: center;
		justify-content: center;
	}

	.avatar-wrapper {
		margin-top: 26rpx;
	}

	.avatar-wrapper button::before {
		padding: 0;
		border-radius: 20rpx;
		border: 0;
	}

	.avatar {
		height: 100rpx;
		width: 100rpx;
	}

	.v1 text {
		font-size: 22rpx;
		margin-top: -16rpx;
	}

	// 去掉烦人的边框
	button::after {
		border: 0; // 或者 border: none;
	}

	.m-input {
		width: calc(100% - 138rpx);
		line-height: 117rpx;
		padding: 0 20rpx;
		margin-top: 44rpx;
		background: #ffffff;
		border-radius: 15rpx;
		height: 117rpx;
	}

	.mine-box {
		width: 100%;
		display: flex;
		flex-direction: column;
		position: relative;
	}

	.mine-bg {
		width: 100%;
		display: block;
		height: 1334rpx;
	}

	.mine-view {
		left: 0;
		top: 0;
		right: 0;
		width: 100%;
		display: flex;
		flex-direction: column;
		position: absolute;
	}

	.top-title-view {
		display: flex;
		width: 100%;
		flex-direction: row;
		align-items: center;
	}

	.login-box {
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 10px 30rpx 0;
	}

	.avatar-wrap {
		position: relative;

		.vip-tag {
			position: absolute;
			bottom: -22rpx;
			left: -10rpx;
			display: flex;
			align-items: center;

			.vip-text {
				font-size: 20rpx;
				font-weight: 500;
				margin-left: 34rpx;
				color: #632400;
				width: 122rpx;
				line-height: 38rpx;
				text-align: center;
				border-radius: 0rpx 20rpx 20rpx 0rpx;
			}
		}
	}

	.user-info-wrap {
		flex: 1;
		margin-left: 28rpx;

		.userName-wrap {
			display: flex;
			align-items: center;
		}

		.info-list {
			margin-top: 10rpx;
			height: 34rpx;
			font-size: 24rpx;
			font-weight: 400;
			color: #1d161f;
			line-height: 34rpx;

			.info-list-item {
				&:nth-child(n + 2) {
					&::before {
						content: "|";
						color: #b6b6b6;
						margin: 0 12rpx;
					}
				}
			}
		}
	}

	.userName-box {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
	}

	.userName {
		font-size: 32rpx;
		// margin-left: 26rpx;
		font-family: PingFang;
		font-weight: 600;
		color: #000000;
	}

	.right-box {
		padding-right: 56rpx;
		position: relative;
	}

	.jion-vip-wrap {
		background-size: 100% 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 128rpx;
		margin: 60rpx 20rpx 25rpx;
		padding: 0 45rpx 0 42rpx;

		.title {
			font-size: 36rpx;
			font-family: YouSheBiaoTiHei;
			font-weight: 500;
			color: #ffffff;
			line-height: 38rpx;
		}

		.docs {
			margin-top: 8px;
			font-size: 24rpx;
			font-weight: 400;
			color: #ffffff;
			line-height: 34rpx;
		}

		.right-btn {
			width: 141rpx;
			height: 54rpx;
			background: #ffffff;
			border-radius: 27rpx;
			font-size: 24rpx;
			font-weight: 500;
			color: #632400;
			line-height: 54rpx;
			text-align: center;
		}
	}

	.kthy {
		flex: 1;
		font-size: 26rpx;
		font-family: PingFang;
		font-weight: 400;
		color: #000000;
	}

	.kthy-btn {
		width: 106rpx;
		height: 40rpx;
		border: 1rpx solid #000000;
		border-radius: 4rpx;
		font-size: 22rpx;
		font-family: PingFang;
		font-weight: 400;
		color: #010101;
		text-align: center;
		margin-right: 20rpx;
		line-height: 40rpx;
	}

	.card-box {
		width: 690rpx;
		margin: 20rpx auto 0 auto;
		background: #ffffff;
		border-radius: 21rpx;
		display: flex;
		flex-direction: column;
	}

	.bottom-item {
		width: 100%;
		display: flex;
		flex-direction: column;
		position: relative;

		.bottom-item-h {
			width: 100%;
			display: flex;
			flex-direction: row;

			text {
				flex: 1;
				font-size: 26rpx;
				margin: 30rpx 40rpx;
				font-family: PingFang;
				font-weight: 400;
				color: #333333;
				line-height: 28rpx;
			}
		}
	}

	.orders-info-card {
		width: 710rpx;
		margin: 25rpx auto 0;
		background: linear-gradient(45deg, #cfcff5 0%, #efebff 61%, #cac9ec 100%);
		border-radius: 18rpx;
		overflow: hidden;
		display: flex;
		flex-direction: column;

		.orders-card {
			width: 710rpx;
			height: 273rpx;
			background: #ffffff;
			display: flex;
			flex-direction: column;
			border-radius: 18rpx 18rpx 18rpx 18rpx;

			.card-title {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding-right: 34rpx;

				.right {
					display: flex;
					align-items: center;
					font-size: 24rpx;
					font-weight: 400;
					color: #858585;
					line-height: 1;
				}
			}

			.menu-box {
				flex: 1;
				width: 100%;
				display: flex;
				flex-direction: row;
				align-items: center;

				.menu-item {
					flex: 1;
					height: 100%;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					position: relative;

					image {
						width: 46rpx;
						margin-bottom: 14rpx;
						height: 46rpx;
					}

					text {
						font-size: 26rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 500;
						color: #1d161f;
					}
				}
			}
		}
	}

	.member-info-card {
		width: 710rpx;
		margin: 20rpx auto;
		// height: 349rpx;
		background: linear-gradient(45deg, #cfcff5 0%, #efebff 61%, #cac9ec 100%);
		border-radius: 18rpx 18rpx 18rpx 18rpx;
		overflow: hidden;
		display: flex;
		flex-direction: column;

		.member-card {
			width: 710rpx;
			height: 273rpx;
			background: #ffffff;
			display: flex;
			flex-direction: column;
			border-radius: 18rpx 18rpx 18rpx 18rpx;

			.menu-box {
				flex: 1;
				width: 100%;
				display: flex;
				flex-direction: row;
				align-items: center;

				.menu-item {
					flex: 1;
					height: 100%;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					position: relative;

					image {
						width: 46rpx;
						margin-bottom: 14rpx;
						height: 46rpx;
					}

					text {
						font-size: 26rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 500;
						color: #1d161f;
					}
				}
			}
		}
	}

	.card-title {
		font-size: 28rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #1d161f;
		padding-left: 34rpx;
		line-height: 91rpx;
	}

	.member-other-card {
		width: 710rpx;
		// height: 273rpx;
		margin: 0 auto 20rpx auto;
		background: #ffffff;
		display: flex;
		flex-direction: column;
		border-radius: 18rpx 18rpx 18rpx 18rpx;

		.menu-other-box {
			width: 100%;
			display: flex;
			flex-direction: row;
			align-items: center;
			flex-wrap: wrap;
			padding: 50rpx 0 0;

			.menu-other-item {
				// flex: auto;
				position: relative;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				width: 25%;
				flex-shrink: 0;
				margin-bottom: 40rpx;

				image {
					width: 46rpx;
					margin-bottom: 14rpx;
					height: 46rpx;
				}

				text {
					font-size: 26rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #1d161f;
				}
			}
		}
	}
</style>