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" @click="handleGetInfo">
						<u-image
								width="140"
								height="140"
								:src="userData.head_img"
								shape="circle"></u-image>
					</view>
					<view class="nickname">
						<template v-if="userData.nickname !== '微信用户'">{{userData.nickname}}</template>
						<template v-else>
							<u-button @click="handleGetInfo"
									  type="success"
									  size="mini"
									  :custom-style="{backgroundColor: '#097268'}">获取头像/昵称</u-button>
						</template>
					</view>
					<view class="mobile">
						<!--#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>
						<text v-else>{{userData.phone_num}}</text>
						<!--#endif-->
					</view>
				</view>
			</view>
			<u-cell-group :border="false" class="tab-list">
				<u-cell-item title="桥架会员" :border-bottom="false" bg-color="#f9f9f9" @click="handleJumpBuy" v-if="!setting.review_mode">
					<view slot="icon" class="icon bridge"></view>
				</u-cell-item>
				<u-cell-item title="会员购买记录" :border-bottom="false" bg-color="#f9f9f9"  v-if="!setting.review_mode" @click="$jump({url:'/pages/my/member-record',type:'to'})">
					<view slot="icon" class="icon member"></view>
				</u-cell-item>
				<u-cell-item title="分销中心" v-if="setting.open_share" :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">
					{{setting.service_wechat}}
					<view slot="icon" class="icon wechat"></view>
				</u-cell-item>
				<u-cell-item title="在线客服" :border-bottom="false" :use-label-slot="true" bg-color="#f9f9f9" :value-style="{position: 'relative'}">
					<button open-type="contact" class="cell-btn" slot="label"></button>
					<view slot="icon" class="icon kefu"></view>
				</u-cell-item>
				<u-cell-item title="清除缓存" :border-bottom="false" icon="reload" bg-color="#f9f9f9" @click="handleClearCache">
				</u-cell-item>
			</u-cell-group>
			<view class="qrcode dir-top-wrap cross-center">
				<view class="img">
					<u-image
							width="260"
							height="260"
							:src="setting.service_qrcode"
					></u-image>
				</view>
				<text class="title">扫描二维码联系客服</text>
			</view>
		</view>
		<u-modal v-model="modal.show"
				 :show-cancel-button="true"
				 content="确定清除缓存？"
				 cancel-text="取消"
				 cancel-color="#CCCCCC"
				 confirm-text="确定"
				 confirm-color="#046E64"
				 @confirm="sureClearCache"
		>
		</u-modal>
	</app-layout>
</template>

<script>
	import appLayout from "@/components/app-layout"
	export default {
		components:{
			appLayout,
		},
		data() {
			return {
				userData: this.vuex_user_data,
				setting: {},
				modal: {
					show : false
				}
			}
		},
		methods: {
			handleJumpBuy(){
				if(this.$platform === 'ios'){
					uni.showModal({
						title: '提示',
						content: '由于相关规范，iOS功能暂不可用',
						success: function (res) {
							// res.confirm res.cancel
						}
					});
					return false
				}
				this.$jump({url:'/pages/my/member',type:'to'})
			},
			getPhoneNumber(phoneNumber){
				uni.checkSession({
					success: data => {
						this.$u.api.userBindPhone(phoneNumber.detail).then(data => {
							this.$u.vuex(this.$const.USER_DATA,data)
							this.userData = data;
						})
					},
					fail: err => {
						this.sureClearCache()
					}
				})
			},
			handleGetInfo(){
				let _this = this;
				uni.getUserProfile({
					desc: '重新获取用户信息',
					success: data =>  {
						let params = {
							encryptedData: data.encryptedData,
							iv: data.iv,
						}
						_this.$u.api.userUpdate(params).then(res => {
							_this.$u.vuex(_this.$const.USER_DATA, res)
							this.userData = res;
						})
					},
					fail: err => {
						console.log('-->data',err)
						_this.$u.toast('获取用户信息失败')
					}
				});
			},
			getUser(){
				this.$u.api.userGet().then(data => {
					console.log('-->data',data)
				})
			},
			getSetting(){
				this.$u.api.settingGet().then(data => {
					this.setting = data;
				})
			},
			handleClearCache(){
				this.modal.show = true
			},
			sureClearCache(){
				this.$u.vuex(this.$const.USER_TOKEN,null)
				this.$u.vuex(this.$const.USER_DATA,null)
				this.$jump({url:'/pages/login/login?redirect=pages/my/index',type:'redirect'})
			}
		},
		onLoad(){
			this.userData = this.vuex_user_data
			//this.getUser();
		},
		onShow(){
			this.getSetting();
		}
	}
</script>

<style lang="scss" scoped>
	/deep/.u-cell{
		padding: 22rpx 32rpx !important;
	}
	.cell-btn{
		border: 0;
		background: transparent;
		position: absolute;
		height: 80rpx;
		top: 0;
		width: 86%;
		z-index: 0;
		&:after{
			content: unset;
		}
	}
	.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>