h5-elab-open-ownerUnion/components/subComponents/dmUserInfo.vue

<template>
	<view class="item-user">
		<image class="u-header" :src="headUrl || '../../static/icons/icon_placeheader@2x.png'" mode="aspectFit"></image>
		<view class="u-center">
			<view class="u-center-top">
				<text class="u-name">{{name || '未知用户'}}</text>
				<image class="u-gender" v-if="gender=='女'" src="../../static/icons/female.png" mode="aspectFit"></image>
				<image class="u-gender" v-if="gender=='男'" src="../../static/icons/man.png" mode="aspectFit"></image>
				<image class="u-terminal" :src="terminalFlag(terminal)" mode="aspectFit" v-if="isShowTerminal"></image>
			</view>
			<view style="display: flex;flex-direction: row;align-items: center;margin-top: 10rpx;" @click.stop='copyMobile(mobile)'>
				<text class="u-mobile" >{{mobile}}</text>
				<image src="../../static/icons/icon_copy.png" mode="" style="width: 18rpx;height: 18rpx; margin-left: 10rpx;"></image>
			</view>
			
		</view>
		<view v-if="isLevelStyle">
			<view v-if="typeNew!='none'">
				<view class="u-right" v-if="typeNew=='type1'">
					<view class="u-right-t" :style="{'background-color':bgColor}">
						<text class="u-level" :style="{'color':textColor}">{{grade || '-'}}</text>
						<text class="u-score" :style="{'background':'linear-gradient(110deg, transparent 9px, '+scoreBgColor+' 0)'}">{{score || 0}}</text>
					</view>
					<text class="u-score-title">AI等级/客户等级</text>
				</view>
				<view class="u-right" v-if="typeNew=='type2'">
					<view class="u-right-t2" :style="{'background-color':bgColor}">
						<text class="u-level" :style="{'color':textColor}">{{grade || '-'}}</text>
					</view>
					<text class="u-score-title">AI等级</text>
				</view>
				<view class="u-right" v-if="typeNew=='type3'">
					<view class="u-right-t3" :style="{'background-color':scoreBgColor}">
						<text class="u-score">{{score || '-'}}</text>
					</view>
					<text class="u-score-title">客户等级</text>
				</view>
				
			</view>
		</view>
		
		<view v-else>
			<view class="u-right" v-if="type!='none'">
				<view class="u-right-t" :style="{'background-color':bgColor}" v-if="type=='type1'">
					<text class="u-level" :style="{'color':textColor}">{{grade || ' -'}}</text>
					<text class="u-score" :style="{'background':'linear-gradient(110deg, transparent 18rpx, '+scoreBgColor+' 0)'}">{{score || 0}}</text>
				</view>
				<view class="u-right-t2" :style="{'background-color':bgColor}" v-if="type=='type2'">
					<text class="u-level" :style="{'color':textColor}">{{grade || ' -'}}</text>
				</view>
				<view class="u-right-t3" :style="{'background-color':bgColor}" v-if="type=='type3'">
					<text class="u-level" :style="{'color':textColor}">{{grade || ' -'}}</text>
				</view>
				<view class="u-right-t4" :style="{'background-color':themeColor}" v-if="type=='type4'">
					{{type4Mark}}
				</view>
				<block v-if="type != 'type4'">
					<text class="u-score-title">{{describe}}</text>
				</block>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		props: {
			headUrl:String,
			name: String,
			mobile: String,
			grade: {
				type:[String,Number],
				default:'-'
			},
			score:{
				type:[String,Number],
				default:'-'
			},
			terminal:{
				type:[String,Number],
				default:0
			},
			// none:没有
			type: {
				type: String,
				default: 'type1' // type1 : 通用 type2:  只有A、B、C、D这样的 typy3: 纯文字的 
			},
			describe:{
				type:String,
				default:'AI等级/把控分'
			},
			
			bgColor:{ //整个标签的背景色
				type:String,
				default:"#FFF6E5"
			},
			textColor:{ //文字颜色，A，B,C,D 颜色
				type:String,
				default:"#FEC350"
			},
			scoreBgColor:{ //分数背景色
				type:String,
				default:"#FEC350"
			},
			isShowTerminal: {
				type: Boolean,
				default: false
			},
			isLevelStyle: {
				type: Boolean,
				default: true
			},
			type4Mark: {
				type: String,
				default: '多权益人'
			},
			gender: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				themeColor:'',
				themeColor25:'',
				typeNew: "none"
			}
		},
		mounted() {
			let app = getApp();
			this.globalData = app.globalData;
			this.themeColor = this.globalData.themeColor;
			this.themeColor25 = this.globalData.themeColor25;
			this.fuzhuColor = this.globalData.fuzhuColor;
			this.fuzhuColor50 = this.globalData.fuzhuColor50;
			// console.log("主题色",this.themeColor)
			this.judgeCurrentType();
		},
		computed:{
			
		},
        watch:{
			grade:{
				handler(newName, oldName) {
				 this.judgeCurrentType();
				},
				immediate: true
			},
			score:{
				handler(newName, oldName) {
				    this.judgeCurrentType();
				},
    　　        immediate: true
			}
		},
		methods: {
			judgeCurrentType(){
				if (this.grade && this.score) {
					if (this.grade != '-' && this.score != '-') {
						this.typeNew = "type1";
					} else if (this.grade != '-') {
						this.typeNew = "type2";
					} else if (this.score != '-') {
						this.typeNew = "type3";
					} else {
						this.typeNew = "none";
					}
				
				} else {
					if (this.grade && this.grade!= '-') {
						this.typeNew = "type2";
					} else if (this.score && this.score != '-') {
						this.typeNew = "type3";
					} else {
						this.typeNew = "none";
					}
				}	
			},
			terminalFlag(){
				// 平台 1：微信，2：抖音，3：百度，4：头条，5：支付宝，6：QQ小程序，7：其他
				if (this.terminal == 1){
					return '../../static/platforms/platform_weixin.png'
				}else if(this.terminal == 2){
					return '../../static/platforms/platform_douyin.png'
				}else if(this.terminal == 3){
					return '../../static/platforms/platform_baidu.png'
				}else if(this.terminal == 4){
					return '../../static/platforms/platform_toutiao.png'
				}else if(this.terminal == 5){
					return '../../static/platforms/platform_zhifubao.png'
				}else if(this.terminal == 6){
					return '../../static/platforms/platform_QQ.png'
				}else if(this.terminal == 7){
					return '../../static/platforms/platform_qita.png'
				}
			},
			copyMobile(mobile){
				uni.setClipboardData({
					data: mobile,
					success: () => {
						uni.showToast({
							icon:'none',
							title: '已复制手机号码到粘贴板'
						})
					}
				})
			}
		},
	}
</script>

<style scoped lang="scss">
	.item-user{
		display: flex;
		width: 100%;
		padding: 0 30rpx;
		box-sizing: border-box;
		.u-header{
			margin-top: 40rpx;
			width: 72rpx;
			height: 72rpx;
			border-radius: 36rpx;
		}
		.u-center{
			margin-left: 18rpx;
			display: flex;
			flex-direction: column;
			flex: 1;
			.u-center-top{
				margin-top: 38rpx;
				display: flex;
				align-items: center;
				.u-name{
					font-size: 28rpx;
					font-family: Verdana, 'Verdana-Bold';
					font-weight: 700;
					text-align: left;
					line-height: 40rpx;
					color: #666666;
				}
				.u-gender {
					width: 33rpx;
					height: 33rpx;
					margin-left: 8rpx;
				}
				.u-terminal{
					margin-left: 10rpx;
					height: 40rpx;
					width: 50px;
				}
			}
			.u-mobile{
				line-height: 30rpx;
				font-size: 24rpx;
				font-family: Verdana, 'Verdana-Regular';
				font-weight: 400;
				text-align: left;
				color: #666666;
			}
		}
		.u-right{
			margin-top: 30rpx;
			margin-left: 28rpx;
			display: flex;
			flex-direction: column;
			align-items: flex-end;
			.u-right-t{
				width: 152rpx;
				height: 50rpx;
				border-radius: 8rpx;
				display: flex;
				.u-level{
					flex: 1;
					padding-left: 18rpx;
					line-height: 50rpx;
					font-size: 48rpx;
					font-family: 'DIN Alternate', 'DIN Alternate-Bold';
					font-weight: 700;
				}
				.u-score{
					width: 95rpx;
					height: 50rpx;
					padding-left: 15rpx;
					text-align: center;
					line-height: 50rpx;
					font-size: 48rpx;
					font-family: 'DIN Alternate', 'DIN Alternate-Bold';
					font-weight: 700;
					color: #fff;
					border-radius: 0rpx 8rpx 8rpx 0rpx;
					box-sizing: border-box;
				}
			}
			
			.u-right-t2{
				width: 80rpx;
				height: 50rpx;
				border-radius: 8rpx;
				display: flex;
	
				.u-level{
					width: 80rpx;
					line-height: 50rpx;
					font-size: 48rpx;
					font-family: 'DIN Alternate', 'DIN Alternate-Bold';
					font-weight: 700;
					text-align: center;
				}
			}
			
			.u-right-t3{
				
				height: 50rpx;
				border-radius: 8rpx;
				display: flex;
				.u-level{
					padding-left: 10rpx;
					padding-right: 10rpx;
					line-height: 50rpx;
					font-size: 28rpx;
					font-family: Verdana, Verdana-Bold;
					font-weight: 700;
					text-align: center;
				}
				
				.u-score {
					width: 95rpx;
					height: 50rpx;
					text-align: center;
					line-height: 50rpx;
					font-size: 48rpx;
					font-family: 'DIN Alternate', 'DIN Alternate-Bold';
					font-weight: 700;
					color: #fff;
					border-radius: 0rpx 8rpx 8rpx 0rpx;
					box-sizing: border-box;
				}
			}
			
			.u-right-t4 {
				margin-top: 20rpx;
				height: 50rpx;
				padding: 0 12rpx;
				box-sizing: border-box;
				font-size: 28rpx;
				font-family: DIN Alternate, DIN Alternate-Bold;
				font-weight: 700;
				text-align: center;
				color: #ffffff;
				line-height: 50rpx;
				border-radius: 8rpx;
			}
			
			.u-score-title{
				margin-top: 4rpx;
				font-size: 20rpx;
				font-family: Verdana, Verdana-Regular;
				font-weight: 400;
				text-align: right;
				color: #999999;
			}
		}
	}
	
</style>