uniapp-shikongwang/pages/center/index.vue

<template>
	<view>
		<view class="lf-flex head">
			<image class="user-img" :src="info.avatar" @click="lookImg(info.avatar)" v-if="info.avatar"></image>
			<image class="user-img" src="../../static/logo.png" v-else></image>
			<view class="user-info">
				<view class="lf-font-40 lf-font-bold" style="width: 500rpx;">
					<text>{{ info.nickname }}</text>
					<text class="user-label" v-for="(item, index) in info.tags" :key="index">{{ item }}</text>
				</view>
				<view class="lf-m-t-20 lf-font-28">
					<text>ID {{ info.id }}</text>
					<text class="lf-m-l-30">{{ hidePhone(info.tel) }}</text>
				</view>
			</view>
		</view>
		<view class="list">
			<view class="lf-row-between list-item" hover-class="lf-opacity" @click="$url('/pages/collect/index')">
				<view class="lf-row-center">
					<image class="icon-img" src="../../static/center/collect.png"></image>
					<text class="lf-text-vertical lf-m-l-20 lf-font-32">我的收藏</text>
				</view>
				<view>
					<text class="lf-iconfont lf-icon-xiangyou-copy lf-color-gray lf-font-40"></text>
				</view>
			</view>
			<view class="lf-row-between list-item" hover-class="lf-opacity" @click="$url('/pages/contactService/index')">
				<view class="lf-row-center">
					<image class="icon-img" src="../../static/center/service.png"></image>
					<text class="lf-text-vertical lf-m-l-16 lf-font-32">联系客服</text>
				</view>
				<view>
					<text class="lf-iconfont lf-icon-xiangyou-copy lf-color-gray lf-font-40"></text>
				</view>
			</view>
			<view class="lf-row-between list-item" hover-class="lf-opacity">
				<view class="lf-row-center">
					<image class="icon-img" src="../../static/center/suggestion.png"></image>
					<text class="lf-text-vertical lf-m-l-16 lf-font-32">意见反馈</text>
				</view>
				<view>
					<text class="lf-iconfont lf-icon-xiangyou-copy lf-color-gray lf-font-40"></text>
				</view>
				<button class="feedback-btn" open-type="feedback"></button>
			</view>
			<view class="lf-row-between list-item" hover-class="lf-opacity" @click="$url('/pages/FQA/index')">
				<view class="lf-row-center">
					<image class="icon-img" src="../../static/center/problem.png"></image>
					<text class="lf-text-vertical lf-m-l-16 lf-font-32">常见问题</text>
				</view>
				<view>
					<text class="lf-iconfont lf-icon-xiangyou-copy lf-color-gray lf-font-40"></text>
				</view>
			</view>
			<!-- TODO 退出登录逻辑 -->
			<view class="lf-row-between list-item" hover-class="lf-opacity">
				<view class="lf-row-center">
					<image class="icon-img" src="../../static/center/loginout.png"></image>
					<text class="lf-text-vertical lf-m-l-16 lf-font-32">退出登录</text>
				</view>
				<view>
					<text class="lf-iconfont lf-icon-xiangyou-copy lf-color-gray lf-font-40"></text>
				</view>
			</view>
		</view>
		<!-- 商家工具 -->
		<view class="lf-m-b-20 shop-list" v-if="isRight(info.store)">
			<view class="lf-row-between lf-m-b-20">
				<view class="lf-font-36 lf-font-bold">商家工具</view>
				<view class="lf-font-28" style="color: #555555;">{{ info.store.name }}</view>
			</view>
			<view class="lf-row-between list-item" hover-class="lf-opacity">
				<view class="lf-row-center">
					<image class="icon-img" src="../../static/center/order.png"></image>
					<text class="lf-text-vertical lf-m-l-16 lf-font-32">商家订单</text>
				</view>
				<view>
					<text class="lf-iconfont lf-icon-xiangyou-copy lf-color-gray lf-font-40"></text>
				</view>
			</view>
			<view class="lf-row-between list-item" hover-class="lf-opacity" @click="chargeOff">
				<view class="lf-row-center">
					<image class="icon-img" src="../../static/center/scan.png"></image>
					<text class="lf-text-vertical lf-m-l-16 lf-font-32">卡券核销</text>
				</view>
				<view>
					<text class="lf-iconfont lf-icon-xiangyou-copy lf-color-gray lf-font-40"></text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				info: {
					avatar: '',
					nickname: '',
					id: '',
					tel: '',
					tags: []
				}
			}
		},
		computed: {
			hidePhone(){
				return function(tel){
					if(tel.length == 11){
						var reg = /^(\d{3})\d{4}(\d{4})$/;
						var new_phone = tel.replace(reg, "$1****$2");
						return new_phone;
					}else{
						return tel;
					}
				}
			},
			isRight(){
				return function(val){
					return this.$shared.isRight(val);
				}
			}
		},
		onLoad() {
			this.verifyUserInfo();
			this.getData();
		},
		methods: {
			verifyUserInfo(){
				let userInfo = uni.getStorageSync('userinfo') || {};
				if(!userInfo.id || !userInfo.nickname || !userInfo.avatar){
					this.$url('/pages/login/index?type=userinfo');
				}
			},
			getData(){
				this.$http(this.API.API_USER_CENTER).then(res => {
					console.log("res" , res);
					this.info = res.data;
				})
			},
			// 预览图片
			lookImg(img){
				uni.previewImage({
					urls: [img]
				})
			},
			// 卡券核销
			chargeOff(){
				uni.scanCode({
					complete: result => {
						console.log("resuly", result)
						if(result.errMsg == 'scanCode:ok'){
							let content = result.result; // 核销码
							this.$http(this.API.API_CONFIRM_CODE, {confirm_code: content}).then(res => {
								this.$msg(res.msg);
							});
						}
					}
				})
			}
		}
	}
</script>

<style>
	page{
		overflow-x: hidden;
		background-color: #f5f5f5;
	}
</style>
<style lang="scss" scoped>
	.head{
		height: max-content;
		width: 750rpx;
		background-color: #FFFFFF;
		padding: 30rpx 32rpx;
		box-sizing: border-box;
		display: flex;
		.user-img{
			width: 150rpx;
			height: 150rpx;
			border-radius: 50%;
			// background-color: #EEEEEE;
			margin-right: 20rpx;
		}
		.user-info{
			flex: auto;
			height: max-content;
		}
		.user-label{
			display: inline-block;
			font-size: 24rpx;
			color: #FFFFFF;
			background-color: #1E89FF;
			padding: 4rpx 16rpx;
			border-radius: 30rpx;
			margin-left: 8rpx;
		}
	}
	
	.list{
		margin-top: 20rpx;
		padding: 0 32rpx;
		background-color: #FFFFFF;
		width: 100%;
		height: auto;
	}
	.list-item{
		border-bottom: 1rpx solid #EEEEEE;
		height: 110rpx;
		box-sizing: border-box;
		position: relative;
		.icon-img{
			width: 42rpx;
			height: 42rpx;
		}
		.feedback-btn{
			position: absolute;
			width: 100%;
			height: 100%;
			z-index: 1;
			background: transparent;
		}
		&:last-child{
			border-bottom: none;
		}
	}
	
	.shop-list{
		margin-top: 20rpx;
		width: 750rpx;
		height: auto;
		background-color: #FFFFFF;
		padding: 30rpx 32rpx;
		padding-bottom: 0;
		box-sizing: border-box;
	}
</style>