sange-bridge/pages/my/index.vue

<template>
	<app-layout class="app-my">
		<view class="container">
			<view class="customer">
				<view class="bg"></view>
				<view class="info dir-top-wrap cross-center main-center">
					<view class="head-img">
						<u-image
								width="140"
								height="140"
								:src="userData.head_img"
								shape="circle"></u-image>
					</view>
					<view class="nickname">{{userData.nickname}}</view>
					<view class="mobile">
						{{userData.phone_num}}
						<!--#ifdef MP-WEIXIN-->
						<u-button size="mini"
								  v-if="!userData.phone_num"
								  :custom-style="{backgroundColor: '#097268'}"
								  type="success" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">获取手机号</u-button>
						<!--#endif-->
					</view>
				</view>
			</view>
			<u-cell-group :border="false" class="tab-list">
				<u-cell-item title="桥架会员" :border-bottom="false" bg-color="#f9f9f9" @click="$jump({url:'/pages/my/member',type:'to'})">
					<view slot="icon" class="icon bridge"></view>
				</u-cell-item>
				<u-cell-item title="会员购买记录" :border-bottom="false" bg-color="#f9f9f9" @click="$jump({url:'/pages/my/member-record',type:'to'})">
					<view slot="icon" class="icon member"></view>
				</u-cell-item>
				<u-cell-item title="分销中心" :border-bottom="false" bg-color="#f9f9f9" @click="$jump({url:'/pages/share/index',type:'to'})">
					<view slot="icon" class="icon share"></view>
				</u-cell-item>
				<u-cell-item title="微信号" :border-bottom="false" bg-color="#f9f9f9">
					<view slot="icon" class="icon wechat"></view>
				</u-cell-item>
				<u-cell-item title="在线客服" :border-bottom="false" bg-color="#f9f9f9">
					<view slot="icon" class="icon kefu"></view>
				</u-cell-item>
			</u-cell-group>
			<view class="qrcode dir-top-wrap cross-center">
				<view class="img">
					<u-image
							width="260"
							height="260"
							src="https://xiansin.oss-cn-shenzhen.aliyuncs.com/sange-bridge/images/sample.jpg"
					></u-image>
				</view>
				<text class="title">扫描二维码联系客服</text>
			</view>
		</view>
	</app-layout>
</template>

<script>
	import appLayout from "@/components/app-layout"
	export default {
		components:{
			appLayout,
		},
		data() {
			return {
				userData: this.vuex_user_data
			}
		},
		methods: {
			getPhoneNumber(phoneNumber){
				console.log('-->data',phoneNumber)
			},
			getUser(){
				this.$u.api.userGet().then(data => {
					console.log('-->data',data)
				})
			},
			getSetting(){
				this.$u.api.settingGet().then(data => {
					console.log('-->data',data)
				})
			}
		},
		onLoad(){
			this.userData = this.vuex_user_data
			//this.getUser();
			this.getSetting();
		}
	}
</script>

<style lang="scss" scoped>
	/deep/.u-cell{
		padding: 22rpx 32rpx !important;
	}
	.container{
		padding: 0;
		height: 100vh;
		.customer{
			position: relative;
			.bg{
				position: absolute;
				background: url("@/static/images/bg.png") no-repeat center;
				background-size: 100% 100%;
				height: 300rpx;
				left: 0;
				top: 0;
				width: 750rpx;
				z-index: 0;
			}
			.info{
				height: 300rpx;
				position: relative;
				color: #ffffff;
				z-index: 1;
				.nickname{
					margin: 8rpx 0;
					font-weight: 600;
				}
			}
		}
		.tab-list{
			margin-top: 32rpx;
			.icon{
				width: 32rpx;
				height: 32rpx;
				background-size: cover;
				background-repeat: no-repeat;
				background-position: center;
				margin-right: 8rpx;
				&.bridge{
					background-image: url("@/static/images/icons/bridge.png");
				}
				&.kefu{
					background-image: url("@/static/images/icons/kefu.png");
				}
				&.member{
					background-image: url("@/static/images/icons/member.png");
				}
				&.share{
					background-image: url("@/static/images/icons/share.png");
				}
				&.wechat{
					background-image: url("@/static/images/icons/wechat.png");
				}
			}
		}
		.qrcode{
			margin-top: 32rpx;
			>.title{
				padding: 8rpx 0;
				color: #6e6e6e;
			}
		}
	}
</style>