hongze_yb_xcx/pages/user/user.vue

<template>
	<view class="user-page">
		<view class="top-box">
			<view class="flex" @click="toMySetting">
			<view class="avatar">
				<!-- <open-data type="userAvatarUrl"></open-data> -->
				<image style="width:100%;height:100%;border-radius: 50%;" :src="userInfo.head_img_url" mode="aspectFill"/>
				<image src="@/static/upload_avatar.png" class="avatar_ico"></image>
			</view>
			<view style="padding-top:10rpx">
				<view class="user-name">{{userInfo.real_name||'--'}}</view>
				<view class="nick-name">
					昵称：{{userInfo.nick_name || ''}}
					<text v-if="!userInfo.nick_name" style="color: #E3B377;">设置专属昵称</text>
				</view>
				<view class="tel" v-if="userInfo.mobile">{{userInfo.mobile}}</view>
				<view class="tel" v-else>{{userInfo.email}}</view>
			</view>
			</view>
			<view class="flex company">
				<image src="../../static/company.png" mode="widthFix"/>
				<text>{{userInfo.company_name||'--'}}</text>
			</view>
		</view>
		<view class="content">
			<view class="flex item-card" >
				<image src="../../static/user-icon-1.png" mode="widthFix" />
				<text class="label">品种权限</text>
				<block v-if="userInfo.status=='冻结'||(userInfo.status=='试用'&&userInfo.is_suspend==1)">
					<text style="color:#666666;margin-left:10px">暂无权限</text>
					<van-button 
						custom-class="apply-btn" 
						plain round color="#DDAA6A" 
						size="small" 
						@click.stop="handleContact"
					>联系销售</van-button>
				</block>

				<block v-else-if="userInfo.permission_list.length==0">
					<text style="color:#666666;margin-left:10px">暂无权限</text>
					<van-button 
						custom-class="apply-btn" 
						plain round color="#DDAA6A" 
						size="small" 
						@click.stop="handleGoApplyPermission"
					>立即申请</van-button>
				</block>
				
				<view v-else class="right-text look" @click="handleToUserPermission">
					<text>查看</text>
					<van-icon name="arrow"></van-icon>
				</view>
			</view>
			<view class="flex item-card" >
				<image src="@/static/message_ico.png" mode="widthFix" />
				<view class="label flex" style="align-items: center;">消息通知 
					<text class="unread-ico" v-if="userInfo.un_read">{{userInfo.un_read}}</text> 
				</view>
				<view class="right-text look" @click="toMessageHadle">
					<text>查看</text>
					<van-icon name="arrow"></van-icon>
				</view>
			</view>
			<view class="flex item-card">
				<image src="../../static/calendar.png" mode="widthFix" />
				<text class="label">服务截止日期</text>
				<text class="right-text" v-if="!(userInfo.status=='冻结'||(userInfo.status=='试用'&&userInfo.is_suspend==1))">{{lastTime}}</text>
			</view>
		</view>


		<!-- 弹窗 -->
        <van-popup :show="pupData.show" @close="pupData.show=false" :close-on-click-overlay="false">
            <view class="global-pup">
                <view class="content">
                    <rich-text :nodes="pupData.content"></rich-text>
                </view>
                <view class="flex bot">
                    <view @click="pupData.show=false">知道了</view>
                </view>
            </view>
        </van-popup>
		
	</view>
</template>

<script>
	const moment=require('@/utils/moment-with-locales.min')
	import {apiLastApplyRecord,apiApplyPermission} from '@/api/user'
	export default {
		computed: {
			lastTime(){
				let timeArr=[]
				this.userInfo.permission_list&&this.userInfo.permission_list.forEach(item=>{
					item.permission_list.forEach(item2=>{
						timeArr.push(new Date(item2.end_date))
					})
				})

				let maxTime=Math.max(...timeArr)
				
				if(timeArr.length===0){
					return ''
				}else{
					return moment(maxTime).format('YYYY.MM.DD')
				}
				
			}	
		},
		data () {
			return {
				pupData:{
					show:false,
					content:'',//弹窗html字符串
				}
			}
		},
		onShow() {
			this.$store.dispatch('getUserInfo')
		},
		methods: {
			async handleGoApplyPermission(){
				const res=await apiLastApplyRecord({source:1})
				if(res.code===200){
					if(!res.data){
						// 流失客户主动申请一次
						if(this.userInfo.status=='流失'){
							apiApplyPermission({
								company_name:this.userInfo.company_name,
								real_name:this.userInfo.real_name,
								source:1,
								from_page:'我的'
							}).then(res=>{
								if(res.code===200){
									console.log('主动申请成功');
									this.pupData.show=true
									this.pupData.content=`<p>申请已提交</p><p>请等待销售人员与您联系</p>`
								}
							}) 
							return
						}
						uni.navigateTo({
							url:"/pages-applyPermission/applyPermission?source=1&from_page=我的"
						})
					}else{
						this.pupData.show=true
						this.pupData.content=`<p>您已提交过申请，请耐心等待</p>`
						// uni.navigateTo({
						// 	url:"/pages-applyPermission/applyResult"
						// })
					}
				}		
			},

			handleToUserPermission(){
				if(this.userInfo.permission_list.length==0) return
				uni.navigateTo({ url: '/pages-user/permissionList' })
			},
			
			/* 消息通知页 */
			toMessageHadle() {
				uni.navigateTo({ url: '/pages-user/messageList' })
			},
			
			/* 我的设置 */
			toMySetting() {
				uni.navigateTo({ url: '/pages-user/mysetting' })
			},

			handleContact(){
				apiApplyPermission({
                    company_name:this.userInfo.company_name,
                    real_name:this.userInfo.real_name,
					source:1,
                    from_page:'我的'
                }).then(res=>{
                    if(res.code===200){
                        console.log('主动申请成功');
                    }
                }) 
				uni.makePhoneCall({
					phoneNumber: this.userInfo.seal_mobile
				});
			}
		}
	}
</script>

<style lang="scss">
	.user-page{
		min-height: calc(100vh - calc(50px + constant(safe-area-inset-bottom)));
    	min-height: calc(100vh - calc(50px + env(safe-area-inset-bottom)));
		background-color: #EDEDED;
	}
	.top-box{
		height: 392rpx;
		background-color: #fff;
		padding: 98rpx 50rpx 0 50rpx;
		.avatar{
			width: 154rpx;
			height: 154rpx;
			border-radius: 50%;
			// overflow: hidden;
			margin-right: 40rpx;
			position: relative;
			.avatar_ico {
				width: 40rpx;
				height: 40rpx;
				position: absolute;
				bottom: 0;
				right: 0;
				z-index: 2;
			}
		}
		.user-name{
			font-size: 24px;
			font-weight: bold;
			color: #060606;
		}
		.tel{
			color: #999;
		}
		.company{
			margin-top: 50rpx;
			image{
				width: 32rpx;
				height: 32rpx;
				margin-right: 8rpx;
			}
			color:#DBA665;
		}
		.nick-name {
			font-size: 28rpx;
			margin: 20rpx 0;
		}
	}
	.content{
		background-color: #fff;
		margin-top: 12rpx;
		padding: 0 34rpx;
		.item-card{
			position: relative;
			padding: 30rpx 0;
			border-bottom: 1px solid $global-border-color;
			image{
				width: 36rpx;
				height: 36rpx;
			}
			.label{
				font-weight: bold;
				margin-left: 20rpx;
			}
			.apply-btn{
				position: absolute;
				top: 50%;
				right: 0;
				transform: translateY(-50%);
				height: 50rpx;
				width: 156rpx;
			}
			.right-text{
				position: absolute;
				top: 50%;
				right: 0;
				transform: translateY(-50%);
				color: #666666;
			}
			.look{
				width: 100rpx;
				height: 100rpx;
				text-align: right;
				line-height: 100rpx;
			}
			.unread-ico {
				width: 30rpx;
				height: 30rpx;
				display: inline-block;
				border-radius: 50%;
				color: #ffff;
				background: #D62020;
				line-height: 30rpx;
				text-align: center;
				font-size: 24rpx;
				margin-left: 20rpx;
			}
		}
		.item-card:last-child{
			border: none;
		}
	}
</style>