massage-front/pages/index/center.vue

<template>
	<view class="page">

		<view class="flex flex-column header">
			<view class="user">
				<image class="user-avatar" :src="userInfo.headImage" mode="aspectFill"></image>
				<view class="user-name">{{ userInfo.nickName }}</view>
			</view>
			<view class="member">
				<view class="flex member-overview" :class="[role ? 'is-member' : '']">
					<template v-if="role">
						<!-- todo: 缺切图 "皇冠" -->
						<image class="icon icon-crown" src="" mode="widthFix"></image>
						<template v-if="role === 'member-personal'">
							<image class="icon icon-role" src="@/static/image/center/icon-member-personal.png" mode="widthFix"></image>
						</template>
						<template v-else-if="role === 'member-business'">
							<image class="icon icon-role" src="@/static/image/center/icon-member-business.png" mode="widthFix"></image>
						</template>
						<!-- todo: 换回接口字段 -->
						<text class="member-tips">{{ `将于${'2026-12-12'} 到期` }}</text>
					</template>
					<template v-else>
						<view class="flex">
							<!-- todo: 缺切图 "皇冠" -->
							<image class="icon icon-crown" src="" mode="widthFix"></image>
							<!-- todo: 缺切图 "会员" -->
							<image class="icon icon-member" src="" mode="widthFix"></image>
							<text class="member-tips">成为会员可获得会员卡，享受会员福利哟~</text>
						</view>
						<button plain class="btn member-btn" @click="$utils.navigateTo('/pages_order/mine/memberCenter')">立即开通</button>
					</template>
				</view>
				<view class="member-rights">
					<image class="member-rights-bg" src="@/static/image/center/member-bg.png" mode="top" ></image>

					<view class="flex member-rights-content">
						<view class="flex">
							<image class="icon icon-rights" src="@/static/image/center/icon-member-weal.png" mode="widthFix"></image>
							<view>
								<view class="member-rights-label">会员福利</view>
								<view class="member-rights-value">会员折扣</view>
							</view>
						</view>
						<view class="flex">
							<!-- todo: 缺切图 -->
							<image class="icon icon-rights" src="@/static/image/center/icon-member-weal.png" mode="widthFix"></image>
							<view>
								<view class="member-rights-label">会员积分</view>
								<view class="member-rights-value">兑换礼品</view>
							</view>
						</view>
							<!-- todo: 缺切图 -->
							<view class="flex">
							<image class="icon icon-rights" src="@/static/image/center/icon-member-weal.png" mode="widthFix"></image>
							<view>
								<view class="member-rights-label">会员优惠券</view>
								<view class="member-rights-value">满减折扣</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- todo: check -> @click="$utils.navigateTo('/pages_order/mine/withdraw') -->
		<view class="card flex account">
			<view class="flex flex-column">
				<view class="account-value">{{ riceInfo.balance || 0 }}<text class="account-unit">元</text></view>
				<view class="account-label">我的余额</view>
			</view>
			<view class="flex flex-column">
				<!-- todo: 字段对接 -->
				<view class="account-value">{{ riceInfo.balance || 0 }}</view>
				<view class="account-label">我的积分</view>
			</view>
			<view class="flex flex-column">
				<view class="account-value">{{ riceInfo.canWithdraw || 0 }}<text class="account-unit">元</text></view>
				<view class="account-label">推广佣金</view>
			</view>
			<view class="flex flex-column">
				<!-- todo: 字段对接 -->
				<view class="account-value">{{ riceInfo.balance || 0 }}<text class="account-unit">张</text></view>
				<view class="account-label">优惠券</view>
			</view>
		</view>

		<view class="card fun-common">
			<view v-if="role === 'merchant'" class="fun-header">
				<cardTitle>常用功能</cardTitle>
			</view>
			<view class="fun-content fun-common-content">
				<view class="flex flex-column" @click="$utils.navigateTo('/pages_order/mine/memberCenter')">
					<image class="fun-common-icon" src="@/static/image/center/icon-member-center.png" mode="widthFix"></image>
					<text class="fun-common-label">会员中心</text>
				</view>
				<view class="flex flex-column" @click="$utils.navigateTo('/pages_order/mine/partner')">
					<image class="fun-common-icon" src="@/static/image/center/icon-team.png" mode="widthFix"></image>
					<text class="fun-common-label">我的团队</text>
				</view>
				<view class="flex flex-column" @click="$utils.navigateTo('/pages_order/mine/promotion')">
					<image class="fun-common-icon" src="@/static/image/center/icon-invite.png" mode="widthFix"></image>
					<text class="fun-common-label">邀请好友</text>
				</view>
				<view class="flex flex-column" @click="$utils.navigateTo('/pages_order/mine/coupon')">
					<image class="fun-common-icon" src="@/static/image/center/icon-coupon.png" mode="widthFix"></image>
					<text class="fun-common-label">优惠券</text>
				</view>
				<view class="flex flex-column" @click="$utils.navigateTo('/pages_order/mine/voucher')">
					<image class="fun-common-icon" src="@/static/image/center/icon-voucher.png" mode="widthFix"></image>
					<text class="fun-common-label">代金券</text>
				</view>
				<!-- todo: navigateTo -->
				<view class="flex flex-column" @click="$utils.navigateTo('/pages_order/mine/memberCenter')">
					<image class="fun-common-icon" src="@/static/image/center/icon-service.png" mode="widthFix"></image>
					<text class="fun-common-label">联系客服</text>
				</view>
				<!-- todo: navigateTo -->
				<view class="flex flex-column" @click="$utils.navigateTo('/pages_order/mine/memberCenter')">
					<image class="fun-common-icon" src="@/static/image/center/icon-sign-in.png" mode="widthFix"></image>
					<text class="fun-common-label">每日签到</text>
				</view>
				<!-- todo: navigateTo -->
				<view class="flex flex-column" @click="$utils.navigateTo('/pages_order/mine/memberCenter')">
					<image class="fun-common-icon" src="@/static/image/center/icon-cooperation.png" mode="widthFix"></image>
					<text class="fun-common-label">商家合作</text>
				</view>
			</view>
		</view>

		<view v-if="role === 'merchant'" class="card fun-merchant">
			<view class="fun-header">
				<cardTitle>商家功能</cardTitle>
			</view>
			<view class="flex fun-content fun-merchant-content">
				<view class="left">
					<image class="left-bg" src="@/static/image/center/bg-verify.png"></image>

					<view class="flex left-content">
						<text>核销明细</text>
						<image class="left-icon" src="@/static/image/center/icon-arrow.png" mode="widthFix"></image>
					</view>
				</view>

				<view class="right" @click="onScan">
					<image class="right-bg" src="@/static/image/center/bg-scan.png"></image>
				</view>
			</view>
		</view>
	
		<!-- todo: delete -->
		<template v-if="false">

			<!-- 我的服务 -->
			<view class="myServer">
				<view class="server-title">
					我的服务
				</view>

				<view class="box">
					<view class="boxs" @click="$utils.navigateTo('/pages/index/order?type=0')">
						<image src="@/static/image/center/1.png" mode="aspectFill" />
						<view class="title">我的订单</view>
					</view>
					<view class="boxs" @click="$utils.navigateTo('/pages_order/home/contact')">
						<image src="@/static/image/center/3.png" mode="aspectFill" />
						<view class="title">联系客服</view>
					</view>
				</view>

				<view class="box">
					<view class="boxs" @click="$utils.navigateTo('/pages_order/mine/recruit')">
						<image src="@/static/image/center/5.png" mode="aspectFill" />
						<view class="title">合伙人招募</view>
					</view>
					<view class="boxs" @click="$utils.navigateTo('/pages_order/mine/help')">
						<image src="@/static/image/center/8.png" mode="aspectFill" />
						<view class="title">帮助与反馈</view>
					</view>
				</view>

				<view class="box">
					<view class="boxs" @click="$utils.navigateTo('/pages_order/mine/address')">
						<image src="@/static/image/center/address.png" mode="aspectFill" />
						<view class="title">我的地址</view>
					</view>
					<view class="boxs" @click="$utils.navigateTo('/pages_order/order/giftList')">
						<image src="@/static/image/center/9.png" mode="aspectFill" />
						<view class="title">礼包列表</view>
					</view>
					<view class="boxs" @click="logout">
						<image src="@/static/image/center/logout.png" mode="aspectFill" />
						<view class="title">退出登录</view>
					</view>
				</view>
			</view>

			<!-- 广告 -->
			<div v-if="showAdvertising" class="ad"
			@click="$utils.navigateTo('/pages_order/mine/recruit')">
				<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="true" :interval="2000"
					:duration="duration">
					<swiper-item v-for="(item, index) in adList" :key="index">
						<view class="swiper-main">
							<view @click="closeAdvertising" class="close">
								<image src="@/static/image/center/close.png" mode="aspectFill" class="close-img"></image>
							</view>
							<image :src="item" mode="aspectFill" class="swiper-main-img"></image>
							<div class="ad-tag">
								<image src="@/static/image/center/ad-tag.png" mode="aspectFill" class="ad-tag-img"></image>
							</div>
						</view>
					</swiper-item>
				</swiper>
			</div>

			<customerServicePopup ref="customerServicePopup" />

		</template>

		<tabber select="center" />
	</view>
</template>

<script>
	import cardTitle from '@/components/base/cardTitle.vue'
	import tabber from '@/components/base/tabbar.vue'
	import {
		mapState
	} from 'vuex'
	import customerServicePopup from '@/components/config/customerServicePopup.vue'

	export default {
		components: {
			cardTitle,
			tabber,
			customerServicePopup,
		},
		computed: {
			...mapState(['userInfo', 'riceInfo']),
			adList() {
				let arr = [];
				if (this.configList?.shop_get_image) {
					arr = this.configList?.shop_get_image?.split(',')
				}
				return arr
			}
		},
		data() {
			return {
        role: '', // member-personal | member-business | merchant
				
				vipType: ['普通会员', '黄金会员', '渠道商'],
				vipImage: ['vip_vip', 'vip_user', 'vip_shop'],
				vipList: [],
				showAdvertising: true,
				userRole: ['会员', '用户', '渠道']
			}
		},
		onShow() {
			this.$store.commit('getUserInfo')
			this.$store.commit('getRiceInfo')
			this.getMemberCardData();
		},
		methods: {
			clickNo() {
				uni.showModal({
					title: '暂未开放',
				})
			},
			logout(){
					uni.showModal({
						title: '确认退出登录吗',
						success : (r) => {
							if (r.confirm) {
								this.$store.commit('logout', true)
							}
						}
					})
			},
			//关闭广告
			closeAdvertising() {
				this.showAdvertising = false;
			},

			//获取会员卡片数据
			getMemberCardData() {
				this.$api('getRiceVipList', res => {
					if (res.code == 200) {
						this.vipList = res.result
					}
				})
			},

			onScan() {
				// todo
			},
		}
	}
</script>

<style scoped lang="scss">
	.page {
		background-color: #F5F5F5;

		.header {
			height: 550rpx;
			background-image: linear-gradient(#84A73F, #D8FF8F);
			justify-content: flex-start;
			position: relative;
		}

		// 佣金数据
		.brokerage-data {
			padding: 20rpx;
			background: white;
			border-radius: 20rpx;
			display: flex;
			flex-wrap: wrap;
			box-sizing: border-box;
			margin: 20rpx 20rpx 20rpx 20rpx;

			.brokerage,
			.balance {
				display: flex;
				flex-wrap: wrap;
				width: 50%;

				.brokerage-img,
				.balance-img {
					width: 50%;
					height: auto;
				}

				.main {
					display: flex;
					flex-direction: column;
					justify-content: space-around;
					width: 50%;
					box-sizing: border-box;
					padding: 30rpx 0rpx;

					.title {
						font-size: 34rpx;
					}

					.money {
						font-size: 40rpx;
						color: $uni-color;
						font-weight: bold;
					}
				}
			}
		}

		.brokerage-data-mt {
			margin-top: 50rpx;
		}

		// 我的服务
		.myServer {
			margin: 0rpx 20rpx 20rpx 20rpx;
			background: white;
			border-radius: 20rpx;
			padding: 30rpx 20rpx;
			box-sizing: border-box;
			box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);

			.server-title {
				margin-bottom: 30rpx;
				font-size: 36rpx;
				font-weight: 600;
				color: #333;
				position: relative;
				padding-left: 20rpx;
				
				&::before {
					content: '';
					position: absolute;
					left: 0;
					top: 50%;
					transform: translateY(-50%);
					width: 8rpx;
					height: 32rpx;
					background: $uni-color;
					border-radius: 4rpx;
				}
			}

			.box {
				display: flex;
				width: 100%;
				margin-bottom: 30rpx;
                gap: 20rpx;
				.boxs {
					width: 23%;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					padding: 20rpx 0;
					border-radius: 16rpx;
					transition: all 0.3s ease;
					position: relative;
					overflow: hidden;
					
					&::after {
						content: '';
						position: absolute;
						top: 0;
						left: 0;
						width: 100%;
						height: 100%;
						background: rgba(227, 68, 26, 0.05);
						opacity: 0;
						transition: opacity 0.3s ease;
						z-index: 1;
					}
					
					&:active {
						transform: scale(0.95);
						
						&::after {
							opacity: 1;
						}
					}

					image {
						width: 70rpx;
						height: 70rpx;
						display: block;
						margin: 0rpx auto 16rpx auto;
						position: relative;
						z-index: 2;
						transition: transform 0.3s ease;
					}
					
					.title {
						font-size: 26rpx;
						color: #333;
						position: relative;
						z-index: 2;
						transition: color 0.3s ease;
					}
					
					&:active {
						image {
							transform: translateY(-4rpx);
						}
						
						.title {
							color: $uni-color;
						}
					}
				}

				&:last-child {
					margin-bottom: 0rpx;
				}
			}
		}

		// 广告
		.ad {
			margin: 0rpx 20rpx;

			.swiper {
				.swiper-main {
					position: relative;

					.close {
						position: absolute;
						top: 20rpx;
						right: 20rpx;

						.close-img {
							width: 40rpx;
							height: 40rpx;
						}
					}

					.swiper-main-img {
						width: 100%;
						height: 200rpx;
						border-radius: 20rpx;
					}

					.ad-tag {
						position: absolute;
						left: 20rpx;
						bottom: 20rpx;

						.ad-tag-img {
							width: 120rpx;
							height: auto;
						}
					}
				}
			}
		}
	}

	.user {
		margin-top: 123rpx;

		&-avatar {
			width: 115rpx;
			height: 115rpx;
			border-radius: 50%;
		}
		&-name {
			margin-top: 4rpx;
			color: $uni-text-color-inverse;
			font-size: 30rpx;
		}
	}

	.member {
		width: calc(100vw - 13rpx*2);
		position: absolute;
		bottom: 0;
		left: 13rpx;

		color: #F5F5F5;
		font-size: 22rpx;

		background-color: #2B2C30;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;

		&-overview {
			min-height: 81rpx;
			justify-content: space-between;

			&.is-member {
				justify-content: flex-start;
			}
		}

		.icon {
			height: auto;

			&-crown {
				width: 35rpx;
				margin-left: 20rpx;
			}

			&-member {
				width: 62rpx;
			}

			&-role {
				width: 156rpx;
				margin-right: 15rpx;
			}

			&-rights {
				width: 56rpx;
				margin-right: 11rpx;
			}
		}

		&-btn {
			padding: 9rpx 17rpx;
			color: #000000;
			font-size: 22rpx;
			background-image: linear-gradient(131deg, #F8EDE1, #B3997E);
			box-shadow: 0rpx 3rpx 6rpx 0rpx rgba(0,0,0,0.16);
			border-radius: 24rpx;
			margin-right: 18rpx;
		}

		&-tips {
			margin-left: 6rpx;
		}

		&-rights {
			background-color: #37393D;
			position: relative;
			width: 100%;
			height: 142rpx;
			box-sizing: border-box;

			&-bg {
				width: 100%;
				height: 100%;
			}

			&-content {
				position: absolute;
				bottom: 0;
				width: 100%;
				height: 100%;
				box-sizing: border-box;
				padding: 0 35rpx 6rpx 35rpx;
				justify-content: space-between;
			}

			&-label {
				color: #CBAD8F;
				font-size: 22rpx;
				font-weight: 700;
			}
			&-value {
				color: #F5F5F5;
				font-size: 18rpx;
			}
		}
	}

	.card {
		margin: 20rpx 13rpx 0 13rpx;
	}

	.account {
		padding: 40rpx 40rpx 23rpx 40rpx;
		justify-content: space-between;

		&-label {
			color: #666666;
			font-size: 28rpx;
			margin-top: 9rpx;
		}

		&-value {
			color: #000000;
			font-size: 32rpx;
		}

		&-unit {
			color: #666666;
			font-size: 18rpx;
			margin-left: 2rpx;
		}
	}

	.fun {

		&-header {
			text-align: left;
			padding-left: 12rpx;
			margin-bottom: 19rpx;

			/deep/ .title__view {
				display: inline-flex;
			}
		}

		&-content {
			margin-top: 24rpx;			
		}

		&-common {
			padding: 30rpx 40rpx 67rpx 40rpx;

			&-content {
				display: grid;
				grid-template-columns: repeat(4, 1fr);
				grid-column-gap: 71rpx;
				grid-row-gap: 81rpx;
			}

			&-icon {
				width: 66rpx;
				height: auto;
			}

			&-label {
				color: #000000;
				font-size: 28rpx;
				margin-top: 5rpx;
			}
		}

		&-merchant {
			padding: 33rpx 30rpx 28rpx 30rpx;
			margin-bottom: 10rpx;

			&-content {
				justify-content: space-between;
			}

			.left {
				width: 198rpx;
				height: 139rpx;
				position: relative;

				&-bg {
					width: 100%;
					height: 100%;
				}

				&-content {
					position: absolute;
					top: 13rpx;
					left: 14rpx;

					color: $uni-text-color-inverse;
					font-size: 28rpx;
				}

				&-icon {
					width: 23rpx;
					height: auto;
					margin-left: 9rpx;
				}
			}

			.right {
				width: 429rpx;
				height: 164rpx;
				margin-top: -25rpx;
				&-bg {
					width: 100%;
					height: 100%;
				}
			}
		}
	}
</style>