renshou/card/cardDetail/cardDetail.vue

<template>
	<view>
		<view class="card-box clearfix" v-if="!loading">
			<image class="card-bottom" src="/static/images/card_bottom.png" mode="widthFix"></image>
			<view class="hearder">
				<image :src="cardInfo.avatar" style="border-radius: 100%;"></image>
			</view>
			<view class="user-name">{{ cardInfo.realName }}</view>
			<view class="user-tag ddflex">
				<view class="user-tag-item">{{ cardInfo.jobName }}</view>
				<view class="user-tag-item">入司{{cardInfo.inDate?monthDayDiff(cardInfo.inDate):'1年'}}</view>
			</view>
			<view class="pf">
				<view class="pf-title">综合评分</view>
				<uni-rate style="justify-content: center;" class="ddflex" color="#999999" active-color="#FF4600" :readonly="true" size="18" allow-half :value="evaluateInfo.info.avage/2" />
			</view>
			<view class="user-data ddflex">
				<view>
					<view class="user-data-num">{{cardInfo.cntCust?cardInfo.cntCust:0}}</view>
					<view class="user-data-label ddflex">
						<image src="/static/pages/images/fw_hui.png"></image>
						<view>服务客户</view>
					</view>
				</view>
				<view style="margin-left: 109rpx;">
					<view class="user-data-num">{{cardInfo.cntCntr?cardInfo.cntCntr:0}}</view>
					<view class="user-data-label ddflex">
						<image src="/static/pages/images/cy_hui.png"></image>
						<view>保单件数</view>
					</view>
				</view>
				<view style="margin-left: 109rpx;">
					<view class="user-data-num">{{cardInfo.thumbs?cardInfo.thumbs:0}}</view>
					<view class="user-data-label ddflex">
						<image src="/static/pages/images/dz_hui.png"></image>
						<view>点赞量</view>
					</view>
				</view>
			</view>
			<view class="user-des">
				<rich-text :nodes="cardInfo.brief ? cardInfo.brief : ''"></rich-text>
			</view>
			<image class="user-code" :src="code?code:'/static/images/lj_img.png'"></image>
			<block v-if="!noBind">
				<view class="user-btn" @click="submit">
					选TA做专属顾问
				</view>
				<view class="user-btn-text" @click="jumpUrl('/card/cardList/cardList')">
					更多专属顾问>
				</view>
			</block>
			<!-- 解绑 -->
			<block v-else>
				<view class="user-btn" @click="bindCancal">
					解除绑定
				</view>
			</block>
		</view>
		
		<update-userinfo :update-info="isUpdateInfo" :update-mobile="isUpdateMobile" :is-update="true" v-if="isShowUpdate" @closeUpdate="closeUpdate" @updateMobile="updateMobileInfo" @updateInfo="updateInfo"></update-userinfo>
	</view>
</template>

<script>
	const app = getApp();
	const req = require("../../utils/request.js");
	import util from '../../utils/util.js';

	export default {
		components: {},
		props: {},
		data() {
			return {
				systems: {},
				isTop:0,
				id:null,
				cardInfo:{},
				evaluateInfo:{},
				code:'',
				loading:true,
				noBind:false,
				
				isShowUpdate: false, //是否显示更新信息弹窗
				isUpdateInfo: false, //更新用户信息
				isUpdateMobile: false, //绑定手机号
			}
		},
		onLoad(options) {
			this.id = options.id
			if(options.noBind){
				this.noBind = true
			}
			uni.showLoading({
				title:'加载中'
			})
			this.getCardInfo()
		},
		onShow() {
			
		},
		methods: {
			jumpUrl(url){
				uni.navigateTo({
					url:url
				})
			},
			getCardInfo() {
				var url = '';
				var dataP = {
					id:this.id
				};
				url = '/api/visiting/card/info';
				req.getRequest(url, dataP, data => {
					this.cardInfo = data;
					uni.hideLoading()
					this.loading = false
					this.getEvaluate()
					this.getCodeUrl()
				});
			},
			// 获取评论
			getEvaluate(){
				req.getRequest('/api/evaluate/cardInfo',{bindId:this.id,type:2},res=>{
					this.evaluateInfo = res
				})
			},
			getCodeUrl() {
					let that = this; //获取小程序码
					const params = {
						page: 'card/index/index',
						params: this.cardInfo.id
					};
					return new Promise((resolve, reject) => {
						req.getRequest('/api/other/program/code', params, url => {
							// console.log(url);
							this.code = url
							resolve();
						});
					});
				},
			monthDayDiff(date) {
				return util.monthDayDiff(date)
			},
			submit(){
				let userInfo = req.getStorage('userInfo');
				console.log('updateInfo userInfo.avatar',userInfo.avatar)
				if (!userInfo.avatar || !userInfo.nickName || userInfo.avatar.indexOf('thirdwx.qlogo') > -1 || userInfo.nickName.indexOf('用户') > -1) {
					this.isShowUpdate = true
					this.isUpdateInfo = true
					return false
				}
				if(userInfo.avatar&&!userInfo.mobile){
					this.isShowUpdate = true
					this.isUpdateMobile = true
					return false
				}
				uni.showModal({
					title:'提示',
					content:'是否绑定该顾问？',
					success: (con) => {
						if(con.confirm){
							req.postRequest('/api/visiting/card/bindManageSaleNo',{manageSaleNo:this.cardInfo.jobNumber},res=>{
								req.msg('已切换专属顾问')
								let userInfo = req.getStorage('userInfo')
								userInfo.manageSaleNo = this.cardInfo.jobNumber
								req.setStorage('userInfo',userInfo)
								setTimeout(()=>{
									uni.switchTab({
										url:'/pages/index/index'
									})
								},1000)
							})
						}
					}
				})
			},
			showUpdate(){
				this.isShowUpdate = true;
				this.isUpdateInfo = true;
			},
			closeUpdate(){
				this.isShowUpdate = false
				this.isUpdateInfo = false;
			},
			updateInfo(e){
				setTimeout(()=>{
					this.submit()
				},500)
			},
			updateMobileInfo(e){
				setTimeout(()=>{
					this.submit()
				},500)
			},
			// 解绑
			bindCancal(){
				uni.showModal({
					title:'提示',
					content:'确定解除绑定？',
					success: (con) => {
						if(con.confirm){
							req.postRequest('/api/visiting/card/unBindManageSaleNo',{},res=>{
								req.msg('已解除绑定')
								let userInfo = req.getStorage('userInfo')
								userInfo.manageSaleNo = ''
								req.setStorage('userInfo',userInfo)
								setTimeout(()=>{
									uni.navigateBack()
								},1000)
							})
						}
					}
				})
			}
		},
		mounted() {
			const systemInfo = uni.getSystemInfoSync();
			// px转换到rpx的比例
			let pxToRpxScale = 750 / systemInfo.windowWidth;
			let systems = {
				ktxStatusHeight: systemInfo.statusBarHeight * pxToRpxScale, // 状态栏的高度
				navigationHeight: 44 * pxToRpxScale // 导航栏的高度
			};
			systems.barHeight = systems.ktxStatusHeight + systems.navigationHeight;
			this.systems = systems;
		},
		onPageScroll: function(e) {
			if (e.scrollTop > this.systems.barHeight) {
				this.isTop = 1;
			} else {
				this.isTop = 0;
			}
		}
	}
</script>

<style>
	@import "./cardDetail.css";
</style>