sadjv3_user/pages/my/index.vue

<template>
	<view class="content">
		<view class="my-head">
			<view class="my-head-top back-width">
				<image src="../../static/jinggao.png" mode="widthFix"></image>
				<view class="my-head-top-view">
					<view class="my-head-top-text">
						<span>盛安小仙女</span>
						<span>13833882588</span>
					</view>
					<view class="my-head-top-id">ID:2536436</view>
				</view>
			</view>
			<view class="my-head-mian back-width">
				<view class="my-head-mian-top">
					<view class="my-head-mian-top-view">
						<view class="my-head-mian-top-view-qian">我的钱包</view>
						<view class="my-head-mian-top-view-chong" @click="chonghi('充值')">充值</view>
						<view class="my-head-mian-top-view-ming" @click="chonghi('明细')">明细</view>
					</view>
					<view class="my-head-mian-top-yuE">520 000 00</view>
				</view>
				<view class="my-head-mian-bottom">
					<view class="my-head-mian-bottom-list" @click="youhui('/my/hongbao/youhuijuan')">
						<image src="../../static/my-yuehui.png" mode="widthFix"></image>
						<span class="my-head-mian-bottom-list-text">优惠券</span>
					</view>
					<view class="my-head-mian-bottom-list">
						<image src="../../static/my-juanma.png" mode="widthFix"></image>
						<span class="my-head-mian-bottom-list-text">券码兑换</span>
					</view>
					<view class="my-head-mian-bottom-list">
						<image src="../../static/my-jifen.png" mode="widthFix"></image>
						<span class="my-head-mian-bottom-list-text">积分兑换</span>
					</view>
				</view>
			</view>
			<view class="my-head-bottom back-width" @click="kaitong">
				<image src="../../static/my-kaitonghuiyuan.png" mode="widthFix"></image>
			</view>
		</view>
		<view class="my-serve width">
			<view class="my-serve-title">我的服务</view>
			<view class="my-serve-view">
				<view class="my-serve-list" @click="meServe('服务套餐')">
					<image src="../../static/my-fuwu.png" mode="widthFix"></image>
					<span class="my-serve-list-text">服务套餐</span>
				</view>
				<view class="my-serve-list" @click="meServe('项目次卡')">
					<image src="../../static/my-cika.png" mode="widthFix"></image>
					<span class="my-serve-list-text">项目次卡</span>
				</view>
				<view class="my-serve-list" @click="meServe('服务疗程')">
					<image src="../../static/my-liaocheng.png" mode="widthFix"></image>
					<span class="my-serve-list-text">服务疗程</span>
				</view>
			</view>
		</view>
		<view class="my-use width">
			<view class="my-use-title">常用功能</view>
			<view class="my-use-view">
				<view class="my-use-list" v-for="(item,index) in useList" :key="index" @click="useToUrl(item)">
					<image :src="item.urlImg" mode=""></image>
					<span class="my-use-list-text">{{item.text}}</span>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return {
				useList:[
					{urlImg:'../../static/my-gong-1.png',text:'我的收藏',link:''},
					{urlImg:'../../static/my-gong-2.png',text:'成为理疗师',link:''},
					{urlImg:'../../static/my-gong-3.png',text:'分享好友',link:'/pages/my/invitationUser'},
					{urlImg:'../../static/my-gong-4.png',text:'成为代理商',link:''},
					{urlImg:'../../static/my-gong-5.png',text:'地址管理',link:'/my/address/address'},
					{urlImg:'../../static/my-gong-6.png',text:'帮助中心',link:'/my/help/feedbackIndex'},
					{urlImg:'../../static/my-gong-7.png',text:'设置中心',link:'/my/setting/index'},
					{urlImg:'../../static/my-gong-8.png',text:'浏览历史',link:''},
					{urlImg:'../../static/my-gong-9.png',text:'我的团队',link:''},
				]
			}
		},
		methods:{
			kaitong(){//开通会员
				uni.navigateTo({
					url:'/my/vip/index'
				})
			},
			chonghi(link){//我的钱包
				if(link=='充值'){
					uni.navigateTo({
						url:'/my/wallet/index'
					})
				}else{
					uni.navigateTo({
						url:'/my/wallet/mymoneydetail'
					})
				}
				
			},
			youhui(link){//优惠劵，券码兑换，积分兑换 跳页
					uni.navigateTo({
						url:link
					})
			},
			useToUrl(item){//常用功能跳转页面
				var link=item.link
					uni.navigateTo({
						url:link
					})
			},
			meServe(item){
				if(item=="服务套餐"){
					uni.navigateTo({
						url:'/pages/my/servicePackage'
					})
				}else if(item=="项目次卡"){
					uni.navigateTo({
						url:'/pages/my/onceCardPackage'
					})
				}else if(item=="服务疗程"){
					uni.navigateTo({
						url:'/pages/my/curePackage'
					})
				}
			},
		}
	}
</script>

<style scoped>
	.my-use-list-text{
		font-weight: bold;
		font-size: 30rpx;
		color: #6C6C6C;
		margin-top: 6px;
	}
	.my-use-list image{
		width: 64.58rpx;
		height: 72.22rpx;
	}
	.my-use{
		height: 597rpx;
		background: #FFFFFF;
		border-radius: 21rpx;
		padding: 10px;
		display: flex;
		flex-direction: column;
		margin: 0px auto 20px auto;
	}
	.my-use-view{
		width: 90%;
		margin: 5px auto;
		display: flex;
		flex-direction: row;
		align-items: center;
		flex-wrap: wrap;
	}
	.my-serve-view{
		width: 90%;
		margin: 0 auto;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
	.my-use-list{
		width: 25%;
		margin-top: 20px;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.my-serve-list{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.my-serve-list image{
		width: 119.44rpx;
		height: 130.56rpx;
	}
	.my-serve-list-text{
		font-weight: bold;
		font-size: 32rpx;
		color: #6C6C6C;
		margin-top: 5px;
	}
	
	.my-serve-title,.my-use-title{
		width: 100%;
		font-weight: bold;
		font-size: 35rpx;
		color: #333333;
	}
	.width{
		width: 95%;
	}
	.my-serve{
		height: 597rpx;
		background: #FFFFFF;
		border-radius: 21rpx;
		padding: 10px;
		display: flex;
		flex-direction: column;
		margin: 0px auto 20px auto;
	}
	.my-serve,.my-serve{
		height: 297rpx;
		background: #FFFFFF;
		border-radius: 21rpx;
		padding: 10px;
		display: flex;
		flex-direction: column;
		margin: 20px auto;
	}
	.my-head-bottom{
		width: 95%;
		height: 121.53rpx;
	}
	.my-head-bottom image{
		width: 100%;
		height: 100%;
	}
	.my-head-mian-bottom-list image{
		width: 88.13rpx;
		height: 65.28rpx;
	}
	.my-head-mian-bottom-list-text{
		font-weight: bold;
		font-size: 33rpx;
		color: #6C6C6C;
		margin-top: 10px;
	}
	.my-head-mian-bottom-list{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.my-head-mian-bottom{
		width: 95%;
		margin: 0 auto;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}
	.my-head-mian-top-yuE{
		font-weight: bold;
		font-size: 43rpx;
		color: #333333;
	}
	.my-head-mian-top-view-chong,.my-head-mian-top-view-ming{
		width: 92rpx;
		height: 42rpx;
		line-height: 42rpx;
		text-align: center;
		border-radius: 21rpx;
		font-weight: bold;
		font-size: 26rpx;
	}
	.my-head-mian-top-view-chong{
		background: linear-gradient(90deg, #019C88, #28BA92, #35C495);
		color: #fff;
		margin: 0px 5px;
	}
	.my-head-mian-top-view-ming{
		background: #F5F7FB;
		color: #333;
	}
	.my-head-mian-top-view-qian{
		font-weight: bold;
		font-size: 35rpx;
		color: #333333;
	}
	.my-head-mian-top-view{
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.my-head-mian-top{
		width: 95%;
		margin: 0 auto;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
	.my-head-mian{
		width: 100%;
		height: 298rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		background: #FFFFFF;
		border-radius: 21rpx;
		padding: 10px;
	}
	.my-head-top-id{
		margin-top: 10px;
		font-weight: bold;
		font-size: 19rpx;
		color: #0E050A;
	}
	.my-head-top-text{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		font-weight: bold;
		font-size: 33rpx;
		color: #000000;
	}
	.my-head-top-view{
		display: flex;
		flex-direction: column;
		width: 80%;
	}
	.my-head-top image{
		width: 106rpx;
		height: 106rpx;
	}
	.my-head-top{
		width: 100%;
		margin: 20px 0px;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
	.my-head{
		width: 100%;
		/* background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), #f7f7f7), url('../../static/background-img.png');
		background-position: center center;
		background-repeat: no-repeat;
		background-size: cover; */
	}
	.content {
		width: 100%;
		height: 100vh;
		background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), #f7f7f7), url('../../static/background-img.png');
		background-position: center center;
		background-repeat: no-repeat;
		background-size: cover;
		/* background: #f7f7f7; */
		overflow: auto;
	}
	.div-with-background {
	 
	  width: 300px; /* 你的容器宽度 */
	  height: 200px; /* 你的容器高度 */
	}
	.back-width{
		width: 95%;
		display: flex;
		margin: 0px auto;
		padding: 10px 0px;
	}
	
</style>