reservation-uniapp-250509/service-uniapp-client/pages/index/center.vue

<template>
	<view class="content">

		<view class="banner">
			
			<view class="head-div flex">
				
				<view style="width: 118rpx;height: 118rpx;">
					<image style="width: 118rpx;height: 118rpx;border-radius: 50%;" :src="userInfo.headImage"></image>
				</view>
				
				<view style="padding: 10rpx 34rpx;">
					<view class="nickname">{{ userInfo.nickName }}</view>
					<view class="days">
						手机号：
						<view class="phone">{{ userInfo.phone }}</view>
					</view>
				</view>
				
			</view>
			
			<view style="position: absolute; top: 96rpx;right: 32rpx;" @click="toSetting">
				<image src="/static/icons/icon8.png" mode="aspectFit" style="width: 32rpx; height: 32rpx"></image>
			</view>
			
		</view>

		<view class="one-card b-relative">
			
			<view style="position: absolute; top: -65rpx;left: 50%;z-index: 9;
			transform: translate(-50%);">
				<image style="width: 605rpx;height: 200rpx;margin-left: 8px;" src="/static/ms/tx.png"></image>
				
				<view class="font-4">
					<view>账号余额</view>
					<view class="font-5">
						<span style="font-size: 32rpx;margin-right: 10rpx">¥</span>
						{{ userInfo.price }}
					</view>
				</view>
				
				<view class="button-cz" @click="clickWallet">立即充值</view>
			</view>
			
			<view class="cart-top">

			</view>
			<view class="cart">
				<view class="collect" @click="clickCollect">
					<view class="tx">
						我的收藏
					</view>
					<view class="info">
						{{ collectNum }}位
					</view>
				</view>
				
				<view class="coupon" @click="clickCoupon">
					<view class="tx">
						我的优惠劵
					</view>
					<view class="info">
						{{ couponNum }}张
					</view>
				</view>
			</view>
		</view>

		<view class="two-card">
			<view class="flex">
				<view style="width: 10rpx;height: 30rpx;background: #4a9ca6;border-radius: 6rpx;" />
				<view class="head-title">常用功能</view>
			</view>
			
			<view class="flex flex-sb icons">
				<view @click="clickAddress">
					<image class="icon" src="/static/icons/m1.png" />
					<view class="title">地址管理</view>
				</view>
				
				<view @click="clickSettled">
					<image class="icon" src="/static/icons/m2.png" />
					<view class="title">技师入驻</view>
				</view>
				
				<view @click="clickService">
					<image class="icon" src="/static/icons/m3.png" />
					<view class="title">联系客服</view>
				</view>
				
				<view @click="clickDistribute">
					<image class="icon" src="/static/icons/m4.png" />
					<view class="title">分销代理</view>
				</view>
			</view>
			
		</view>

		<view style="text-align: center;color: #aaa;padding: 20px;line-height: 22px;">
			{{ copyright }}
			<br />
			{{ gs_name }}
			<br />
			{{ beian }}
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				couponNum: 0,
				collectNum: 0,
				copyright  : '',
				gs_name : '',
				beian : ''
			}
		},
		onShow() {
			this.$store.commit('getUserInfo')
			this.getCouponNum()
			this.getCollectNum()
			this.getConfig()
		},
		methods: {
			//跳转设置页面
			toSetting() {
				uni.navigateTo({
					url: '/pages/mine/setting'
				})
			},
			
			//跳转收藏页面
			clickCollect() {
				uni.navigateTo({
					url: '/pages/mine/collect'
				})
			},
			
			//跳转优惠券页面
			clickCoupon() {
				uni.navigateTo({
					url: '/pages/mine/coupon'
				})
			},
			
			//跳转地址管理页面
			clickAddress() {
				uni.navigateTo({
					url: '/pages/mine/address'
				})
			},
			
			//跳转技师招募页面
			clickSettled() {
				uni.navigateTo({
					url: '/pages/mine/settled'
				})
			},
			
			//跳转我的钱包页面
			clickWallet() {
				uni.navigateTo({
					url: '/pages/mine/wallet'
				})
			},
			
			//跳转分销代理页面
			clickDistribute() {
				uni.navigateTo({
					url: '/pages/mine/distribution'
				})
			},
			
			//联系客服
			clickService() {
				if (this.phone.includes('http')) {
					window.open(this.phone, true)
					return
				}
				
				uni.makePhoneCall({
					phoneNumber: this.phone,
					success: () => {},
					fail: () => {}
				});
			},
			
			//获取优惠券数量
			getCouponNum() {
				this.$api('getCouponList', {}, res => {
					if (res.code == 200) {
						this.couponNum = res.result.total;
					}
				})
			},
			
			//获取收藏技师数量
			getCollectNum() {
				this.$api('getCollectList', this.queryParams, res => {
					if (res.code == 200) {
						this.collectNum = res.result.total;
					}
				})
			},
			
			//获取配置信息
			getConfig() {
				this.$api('getConfig', {} ,res => {
					if(res.code == 200){
						res.result.forEach(item => {
							if(item.keyValue == 'phone'){
								this.phone = this.deleteTag(item.content);
							}
							if(item.keyValue == 'copyright'){
								this.copyright = item.content
							}
							if(item.keyValue == 'gs_name'){
								this.gs_name = item.content
							}
							if(item.keyValue == 'beian'){
								this.beian = item.content
							}
						})
					}
				})
			},
			
			//删除html标签
			deleteTag(html){		
				return html.replace(/<[^>]*>/g, '');
			},
			
			//跳转绑定手机页面
			toPhoneDetail(){
				uni.reLaunch({
					url : '/pages/mine/phoneDetail'
				})
			}
		}
	}
</script>

<style scoped>
	body {
		background-color: #f5f5f5;
	}

	.banner {
		width: 100%;
		height: calc(392rpx -160rpx);
		background: linear-gradient(to top right, #4899a6, #6fc6ad);
	}

	.head-div {
		width: calc(100vw - 72rpx);
		height: 268rpx;
		padding: 72rpx 36rpx 0;
		margin: 0 auto;
	}

	.nickname {
		font-size: 36rpx;
		font-family: PingFang SC, PingFang SC-Bold;
		font-weight: 700;
		text-align: left;
		color: #fff;
		line-height: 42rpx;
	}

	.days {
		display: flex;
		font-size: 20rpx;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: 400;
		text-align: left;
		color: #fff;
		line-height: 28px;
		margin-top: 10rpx;
	}

	.bind{
		background: #e2e2e2;
		padding: 0rpx 10rpx;
		border-radius: 10rpx;
	}

	.one-card {
		width: calc(100% - 80px);
		height: 116px;
		border-radius: 16rpx;
		margin: -30rpx auto 0;
		background-color: #fff;
		padding: 20px;
	}

	.two-card {
		width: calc(100% - 60px);
		border-radius: 16rpx;
		margin: 20rpx auto;
		padding: 40rpx 10px;
		background: #ffffff;
		border-radius: 16px;
	}

	.title {
		height: 40rpx;
		line-height: 40rpx;
		font-size: 24rpx;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: 400;
		text-align: center;
		color: #2f2e2e;
		margin-top: 15rpx;
	}

	.icons {
		width: calc(100% - 20px);
		height: 98rpx;
		padding: 30rpx 20rpx;
		margin-top: 30rpx;
	}

	.icon {
		margin: 0 32rpx;
		width: 48rpx;
		height: 48rpx;
		border-radius: 50%;
	}

	.head-title {
		font-size: 30rpx;
		font-family: PingFang SC, PingFang SC-Bold;
		color: #2f2e2e;
		line-height: 30rpx;
		margin-left: 10rpx;
		font-weight: 700;
	}


	.font-4 {
		font-size: 28rpx;
		font-family: PingFang SC, PingFang SC-Bold;
		text-align: left;
		color: #ffffff;
		text-shadow: 0 4rpx 6rpx 0 rgba(40, 170, 133, 0.81);
		line-height: 44rpx;
		position: absolute;
		top: 32rpx;
		left: 72rpx;
		z-index: 1;
	}

	.font-5 {
		font-size: 30rpx;
		font-family: PingFang SC, PingFang SC-Bold;
		text-align: left;
		color: #ffffff;
		line-height: 72rpx;
		text-shadow: 0 4rpx 6rpx 0 rgba(0, 0, 0, 0.16);
	}

	.button-cz {
		width: 200rpx;
		height: 58rpx;
		line-height: 58rpx;
		background: linear-gradient(182deg, #ffffff 2%, #a6fce3 88%);
		border-radius: 30rpx;
		box-shadow: 0 6rpx 12rpx 0 rgba(129, 209, 186, 0.66);

		font-size: 28rpx;
		font-family: PingFang SC, PingFang SC-Bold;
		font-weight: 700;
		text-align: center;
		color: #3fc791;

		position: absolute;
		top: 72rpx;
		right: 52rpx;
		z-index: 1;
	}

	.cart {
		width: calc(100% - 15px);
		background-color: #fff;
		position: absolute;
		top: 60px;
		left: 10px;
		z-index: 10;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.cart>view {
		width: calc(50% - 10px);
		height: 140rpx;
		background-color: #2f2e2e;
		border-radius: 20rpx;
		background-size: 100% 100%;
		box-sizing: border-box;
		padding: 20rpx;
		font-size: 26rpx;
		line-height: 46rpx;
	}

	.cart>view>view {}

	.cart>view>.info {
		color: #666;
		font-size: 20rpx;
	}

	.cart>view>view>text {
		font-size: 30rpx;
		font-weight: 600;
	}

	.collect {
		margin-top: 10px;
		background: url(/static/ms/merit.png);
		margin-right: 5px;
	}

	.coupon {
		margin-left: 5px;
		margin-top: 10px;
		background: url(/static/ms/meleft.png);
	}

	.cart-top {
		width: calc(100% - 20px);
		height: 30px;
		display: block;
		position: absolute;
		left: 14px;
		background-color: #666;
		top: 45px;
		border-radius: calc(30% + 10px);
	}
</style>