QianNiaoUser/pages/user/user.vue

<template>
	<view class="user-index" :class="['qn-page-' + theme]">
		<view class="user-top" :style="{ height: vip_data.name ? '418rpx' : '348rpx' }">
			<!-- 装饰 -->
			<view class="circle-big" :style="{ height: vip_data.name ? '418rpx' : '348rpx' }">
				<view class="circle-one"></view>
				<view class="circle-two"></view>
				<view class="vip-view clearfix" v-if="vip_data.name">
					<view class="float_left">
						<view class="vip-name">
							<text class="ibonfont ibonhuiyuan" style="margin-right: 16rpx;"></text>
							{{ vip_data.name }}
						</view>
						<view class="desc" v-if="vip_data.vipDiscount === 5">享受全场{{ vip_data.discount - 0 }}折</view>
						<view class="desc" v-else>专享会员权益</view>
					</view>
					<view class="float_right vip-btn" @click="navTo(`/pagesT/user/VipDetail?id=${vip_data.id}`)">
						<block v-if="vip_data.isSelf">立即查看</block>
						<block v-else>立即开通</block>
					</view>
				</view>
			</view>
			<uniStatusBar />
			<!-- 未登录 -->
			<view class="user-info clearfix" v-if="!isLogin">
				<view class="ui-img float_left">
					<u-image shape="circle" width="120rpx" height="120rpx" error-icon="photo" src="https://onlineimg.qianniao.vip/user-re.png"></u-image>
				</view>
				<view class="user-name float_left" style="padding-top: 20rpx;">
					<Login @loginSuccess="loginSuccess"><view class="login-btn" slot="lBtn">登录/注册</view></Login>
				</view>
				<view class="float_right right-icon" @click="setUserInfo">
					<view><text class="ibonfont ibonshezhi21"></text></view>
					<view class="text">设置</view>
				</view>
			</view>
			<!-- 已登录 -->
			<view class="user-info clearfix" v-else>
				<view class="ui-img float_left" @click="setUserInfo">
					<u-image error-icon="photo" shape="circle" width="120rpx" height="120rpx" :src="userInfo.avatar"></u-image>
					<view class="edit-bth">{{ userStatus === 0 ? '去完善' : '编辑' }}</view>
				</view>
				<view class="user-name float_left">
					<view class="un-text ellipsis" v-if="userInfo.name">{{ userInfo.name || '匿名用户' }}</view>
					<view class="un-text-desc" v-if="(personnelReview === 5 || finishData === 5) && (userStatus !== 2 || enableStatus === 4)">
						<text v-if="enableStatus === 4">已禁用</text>
						<text v-else-if="userStatus === 0">待完善资料</text>
						<text v-else-if="userStatus === 1">审核中</text>
						<text v-else-if="userStatus === 3">已驳回,请重新完善资料</text>
					</view>
					<view class="un-text-desc" v-else>
						<text class="customer-type-name">{{ userInfo.customerSourceTypeName || '默认类型' }}</text>
					</view>
					<view class="un-text-desc" style="margin-left: 20rpx;" v-if="vip_data.isSelf"><text class="customer-type-name">VIP会员</text></view>
				</view>
				<view class="float_right right-icon" @click="setUserInfo">
					<view><text class="ibonfont ibonshezhi21"></text></view>
					<view class="text">设置</view>
				</view>
			</view>
			<block v-if="personnelReview === 5 && userStatus === 3">
				<u-notice-bar mode="horizontal" :list="['审核失败，原因：' + userInfo.auditFailReason]" :speed="100" :volume-icon="false" :more-icon="true"></u-notice-bar>
			</block>
		</view>

		<view class="num-view" v-if="isLogin">
			<view class="num-li" v-if="en_token !== aier_en_token" @click="navTo('/pagesT/money/Balance')">
				<view class="num-text">{{ Number(userInfo.memberBalance) || 0 }}</view>
				<view class="num-tit">余额</view>
			</view>
			<view class="num-li" @click="navTo('/pagesT/pointsMall/index')">
				<view class="num-text">{{ userInfo.integral || 0 }}</view>
				<view class="num-tit">积分</view>
			</view>
			<view class="num-li" @click="navTo('/pagesT/user/DiscountCoupon')">
				<view class="num-text">{{ userInfo.couponNum || 0 }}</view>
				<view class="num-tit">优惠券</view>
			</view>
			<view class="num-li" @click="navTo('/pagesT/user/Collection')">
				<view class="num-text">{{ userInfo.collNum || 0 }}</view>
				<view class="num-tit">收藏</view>
			</view>
		</view>
		<view class="model-view">
			<view class="model-tit clearfix">
				<view class="float_left">我的订单</view>
				<view class="float_right" @click="navTo('/pagesT/order/orderT?state=1')">
					<text>查看全部</text>
					<text class="ibonfont ibonjinru"></text>
				</view>
			</view>
			<view class="model-main fn-ul order-ul">
				<view class="fn-li" @click="navTo('/pagesT/order/order?state=' + 1)">
					<u-badge v-if="order_num['2'] > 0 && isLogin" type="error" :offset="[-16, 18]" :count="order_num['2']"></u-badge>
					<view class="fn-icon"><image :src="'https://onlineimg.qianniao.vip/ic-dfk-' + theme + '.png'"></image></view>
					<view class="fn-label">待付款</view>
				</view>
				<view class="fn-li" @click="navTo('/pagesT/order/order?state=' + 2)">
					<u-badge v-if="order_num['3'] > 0 && isLogin" type="error" :offset="[-16, 18]" :count="order_num['3']"></u-badge>
					<view class="fn-icon"><image :src="'https://onlineimg.qianniao.vip/ic-dfh-' + theme + '.png'"></image></view>
					<view class="fn-label">待发货</view>
				</view>
				<view class="fn-li" @click="navTo('/pagesT/order/order?state=' + 3)">
					<u-badge v-if="order_num['4'] > 0 && isLogin" type="error" :offset="[-16, 18]" :count="order_num['4']"></u-badge>
					<view class="fn-icon"><image :src="'https://onlineimg.qianniao.vip/ic-dsh-' + theme + '.png'"></image></view>
					<view class="fn-label">待收货</view>
				</view>
				<view class="fn-li" @click="navTo('/pagesT/order/order?state=' + 4)">
					<u-badge v-if="order_num['5'] > 0 && isLogin" type="error" :offset="[-16, 18]" :count="order_num['5']"></u-badge>
					<view class="fn-icon"><image :src="'https://onlineimg.qianniao.vip/ic-finish-' + theme + '.png'"></image></view>
					<view class="fn-label">已完成</view>
				</view>
				<!-- <view class="fn-li" v-if="en_token !== aier_en_token" @click="navTo('/pagesT/order/ReturnOrder')">
					<u-badge v-if="order_num['10'] > 0 && isLogin" type="error" :offset="[-16, 18]" :count="order_num['10']"></u-badge>
					<view class="fn-icon"><image :src="'https://onlineimg.qianniao.vip/ic-service-' + theme + '.png'"></image></view>
					<view class="fn-label">售后服务</view>
				</view> -->
			</view>
		</view>
		<!-- 负责代表信息 -->
		<!-- <view class="model-view" v-if="isLogin">
			<view class="information-top">
				<image src="https://onlineimg.qianniao.vip/ic-db.png" class="img"></image>
				<view class="text">负责代表信息</view>
			</view>
			<view class="information-bottom">
				<ul class="ul-list">
					<li class="ul-item ellipsis">
						<text class="left">出货门店：</text>
						<text class="right">{{ userInfo.shopDate.name }}</text>
					</li>
					<li class="ul-item">
						<text class="left">业代姓名：</text>
						<text class="right">{{ userInfo.salesManName || '客服' }}</text>
					</li>
					<li class="ul-item">
						<text class="left">服务时间：</text>
						<text class="right">全天</text>
					</li>
					<li class="ul-item">
						<text class="left">门店电话：</text>
						<text class="right right-last" @click="lianxi(userInfo.salesManMobile || userInfo.shopDate.mobile)">
							{{ userInfo.salesManMobile || userInfo.shopDate.mobile }}
						</text>
					</li>
				</ul>
			</view>
		</view> -->
		<view class="model-view" v-if="en_token !== aier_en_token">
			<view class="model-tit">我的服务</view>
			<view class="model-main fn-ul">
				<view class="fn-li" @click="navTo('/pagesT/user/VipList')">
					<view class="fn-icon"><image :src="'https://onlineimg.qianniao.vip/ic-vip-' + theme + '.png'"></image></view>
					<view class="fn-label">会员卡</view>
				</view>
				<view class="fn-li" @click="navTo('/pagesT/user/dyquan')">
					<view class="fn-icon"><image :src="'https://onlineimg.qianniao.vip/ic-vip-' + theme + '.png'"></image></view>
					<view class="fn-label">我的抵用券</view>
				</view>
				<view class="fn-li" @click="navTo('/pagesT/address/address')">
					<view class="fn-icon"><image :src="'https://onlineimg.qianniao.vip/ic-address-' + theme + '.png'"></image></view>
					<view class="fn-label">我的地址</view>
				</view>
				<view class="fn-li" @click="navTo('/pagesT/user/DiscountCoupon')">
					<view class="fn-icon"><image :src="'https://onlineimg.qianniao.vip/ic-coupon-' + theme + '.png'"></image></view>
					<view class="fn-label">我的优惠券</view>
				</view>
			<!-- 	<view class="fn-li" @click="goDistribution">
					<view class="fn-icon"><image :src="'https://onlineimg.qianniao.vip/ic-fen-' + theme + '.png'"></image></view>
					<view class="fn-label">分销中心</view>
				</view> -->
				<view class="fn-li" @click="navTo('/pagesT/user/Collection')">
					<view class="fn-icon"><image :src="'https://onlineimg.qianniao.vip/ic-fen-' + theme + '.png'"></image></view>
					<view class="fn-label">我的收藏</view>
				</view>
			</view>
		</view>
		<view class="model-view list-model-view">
			<view class="model-tit">工具与服务</view>
			<view class="model-main list-ul new-class">
				<!-- <view class="list-li clearfix" @click="openpop">
					<view class="fn-icon">
						<image src="https://onlineimg.qianniao.vip/ic-kf.png" mode="aspectFill"></image>
						<view>{{ userInfo.salesManName ? '专属客服' : '客服中心' }}</view>
					</view>
				</view> -->
				<view class="list-li clearfix" v-if="en_token === aier_en_token" @click="navTo('/pagesT/address/address')">
					<view class="fn-icon">
						<image src="https://onlineimg.qianniao.vip/ic-dz.png" mode="aspectFill"></image>
						<view>我的地址</view>
					</view>
				</view>
				<view class="list-li clearfix" v-if="en_token === aier_en_token" @click="navTo('/pagesT/money/CustomerBalanceDetail')">
					<view class="fn-icon">
						<image src="https://onlineimg.qianniao.vip/ic-3.png" mode="aspectFill"></image>
						<view>往来查询</view>
					</view>
				</view>
				<view class="list-li clearfix" v-if="en_token !== aier_en_token" @click="navTo('/pagesT/user/myyhk')">
					<view class="fn-icon">
						<image src="https://onlineimg.qianniao.vip/ix-lj.png" mode="aspectFill"></image>
						<view>优惠卡</view>
					</view>
				</view>
				<view class="list-li clearfix" v-if="en_token !== aier_en_token" @click="navTo('/pagesT/user/GetCoupon')">
					<view class="fn-icon">
						<image src="https://onlineimg.qianniao.vip/ix-lj.png" mode="aspectFill"></image>
						<view>领券中心</view>
					</view>
				</view>
				<view class="list-li clearfix" v-if="en_token !== aier_en_token" @click="navTo('/pagesT/user/Collection')">
					<view class="fn-icon">
						<image src="https://onlineimg.qianniao.vip/ix-order.png" mode="aspectFill"></image>
						<view>常购清单</view>
					</view>
				</view>
				<view class="list-li clearfix" @click="navTo('/pagesT/user/needSubmit')">
					<view class="fn-icon">
						<image src="https://onlineimg.qianniao.vip/ic-xq.png" mode="aspectFill"></image>
						<view>需求提报</view>
					</view>
				</view>
				<view class="list-li clearfix" @click="navTo('/pagesT/user/guquan')">
					<view class="fn-icon">
						<image src="https://onlineimg.qianniao.vip/ic-xq.png" mode="aspectFill"></image>
						<view>股权</view>
					</view>
				</view>
				<!-- #ifdef MP -->
				<view class="list-li">
					<button class="clearfix share-btn" open-type="share">
						<view class="fn-icon">
							<image src="https://onlineimg.qianniao.vip/ix-tj.png" mode="aspectFill"></image>
							<view class="share">推荐分享</view>
						</view>
					</button>
				</view>
				<!-- #endif -->
				<!-- #ifdef APP-PLUS -->
				<!-- <view class="list-li clearfix"  @click="share">
					<view class="fn-icon">
						<image src="https://onlineimg.qianniao.vip/ic-5.png" mode="aspectFill"></image>
						<view>推荐分享</view>
					</view>
				</view> -->
				<!-- <view class="list-li clearfix" @click="share">
					<view class="float_left">
						<view class="fn-icon"><image src="https://onlineimg.qianniao.vip/ic-5.png" mode="aspectFill"></image></view>
						<text>推荐分享</text>
					</view>
					<view class="float_right"><text class="ibonfont ibonjinru"></text></view>
				</view> -->
				<!-- #endif -->

				<view class="list-li clearfix" v-if="en_token !== aier_en_token" @click="setUserInfo">
					<view class="fn-icon">
						<image src="https://onlineimg.qianniao.vip/ic-sz.png" mode="aspectFill"></image>
						<view>设置</view>
					</view>
				</view>
			</view>
		</view>
		<u-modal
			v-model="tip_model"
			@confirm="finishCofirm"
			@cancel="tipCancel"
			:show-cancel-button="true"
			content="请先完善资料,再进行购物"
			confirm-text="去完善"
			cancel-text="逛逛商城"
		></u-modal>
		<Tabbar v-model="current"></Tabbar>

		<u-popup v-model="call_show" width="600rpx" mode="center" border-radius="20">
			<view class="call-pop">
				<view class="title">
					<text>专属客户经理</text>
					<view class="close-icon" @click="cancalCall"><u-icon name="close" size="28" color="#6c6c6c"></u-icon></view>
				</view>
				<view class="call-ul">
					<view class="call-li">
						<text class="label">客户经理：</text>
						<text class="value">{{ userInfo.salesManName }}</text>
					</view>
					<view class="call-li">
						<text class="label">联系方式：</text>
						<text class="value">{{ userInfo.salesManMobile }}</text>
					</view>
				</view>
				<view class="call-btn primary-btn" @click="lianxi(userInfo.salesManMobile)">一键通话</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
import Login from '@/components/Login.vue';
import uniStatusBar from '@/components/uni-status-bar/uni-status-bar.vue';
import { getEnToken ,getToken} from '@/access/common.js';

export default {
	components: {
		Login,
		uniStatusBar
	},
	// 下拉刷新
	onPullDownRefresh() {
		if (this.$store.state.hasLogin) {
			this.getCustomerInfo();
			this.getMyVipCards();
			// 获取分销文字设置
			this.getTxtSetting();
			this.getDistributionSetting();
		} else {
			uni.stopPullDownRefresh();
		}
	},
	data() {
		return {
			tip_model: false,
			call_show: false,
			current: 3,
			distributionSet: {},
			userInfo: {},
			avatar: '',
			vip_data: {},
			vip_num: 0,
			// 爱尔
			aier_en_token: '8ecdecee648713391dc144f29bea5ca7',
			en_token: getEnToken(),
			order_num: {}
		};
	},
	watch: {
		'$store.state.locationObj'(val) {
			if (JSON.stringify(val) === '{}') {
				this.getAuthorizeInfo();
				return;
			}
			if (this.$store.state.hasLogin) {
				this.getCustomerInfo();
			}
		},
		isLogin(val) {
			if (val) {
				// 获取用户详情
				this.getCustomerInfo();
				// 获取分销文字设置
				this.getTxtSetting();
				// 获取分销基础设置
				this.getDistributionSetting();
				this.getOrderStatusNum();
			} else {
				this.vip_data = {};
			}
		}
	},
	computed: {
		// 业代姓名
		salesManName() {
			if (this.$store.state.userStatus.salesManName) {
				return this.$store.state.userStatus.salesManName;
			} else {
				return '客服';
			}
		},
		// 门店电话
		salesManMobile() {
			if (this.$store.state.userStatus.salesManMobile) {
				return this.$store.state.userStatus.salesManMobile;
			} else {
				return this.$store.state.userStatus.enterpriseMobile;
			}
		},
		// 门店
		enterpriseName() {
			return this.$store.state.enterpriseInfo.enterpriseName;
		},
		baseSet() {
			return this.$store.state.baseSet;
		},
		enterprisemobile() {
			return this.$store.state.enterpriseInfo.mobile;
		},
		isLogin() {
			return this.$store.state.hasLogin;
		},
		// 客户审核
		personnelReview() {
			return this.baseSet.personnelReview;
		},
		userStatus() {
			return this.$store.state.userStatus.status;
		},
		enableStatus() {
			return this.$store.state.userStatus.enableStatus;
		},
		// 完善资料 4禁用 5启用
		finishData() {
			return this.baseSet.finishData;
		}
	},
	onLoad() {
		if (JSON.stringify(this.$store.state.locationObj) === '{}') {
			this.getAuthorizeInfo();
			return;
		}
		if (this.$store.state.hasLogin) {
			// 获取分销文字设置
			this.getTxtSetting();
			// 获取分销基础设置
			this.getDistributionSetting();
			// this.avatar = this.$common.getAvator();
		}
		// #ifdef MP-WEIXIN
		// 小程序的原生菜单中显示分享按钮
		uni.showShareMenu({
			withShareTicket: false,
			menus: ['shareAppMessage', 'shareTimeline']
		});
		// #endif
	},
	onShow() {
		if (this.$store.state.hasLogin) {
			// 获取用户详情
			this.getCustomerInfo();
			this.getOrderStatusNum();
		}
	},
	methods: {
		// #ifdef APP-PLUS
		share() {
			uni.share({
				provider: 'weixin',
				scene: 'WXSceneSession',
				type: 5,
				title: this.baseSet.shop,
				imageUrl: this.baseSet.images,
				success: function(res) {
					console.log('success:' + JSON.stringify(res));
				},
				fail: function(err) {
					console.log('fail:' + JSON.stringify(err));
				}
			});
		},
		// #endif
		// 设置用户信息
		setUserInfo() {
			if (!(this.finishData === 5 && this.userInfo.status !== 2)) {
				this.navTo('/pagesT/selfconfig/selfconfig');
			} else {
				this.navTo('/pagesT/user/editUserInfo');
			}
		},
		loginSuccess() {
			// this.isLogin = this.$store.state.hasLogin;
			// this.getCustomerInfo();
			// this.getMyVipCards();
		},
		/**
		 * 统一跳转接口,拦截未登录路由
		 * navigator标签现在默认没有转场动画，所以用view
		 */
		navTo(url) {
			// console.log(this.hasLogin)
			// return
			if (!this.$store.state.hasLogin) {
				// #ifdef APP-PLUS
				uni.reLaunch({
					url: '/pagesT/public/wxLogin'
				});
				// #endif
				// #ifdef MP-WEIXIN
				uni.reLaunch({
					url: '/pagesT/binding/bindInfo'
				});
				//#endif
				// #ifdef H5
				uni.navigateTo({
					url: '/pagesT/public/wxLogin?loginType=2'
				});
				// #endif
			} else {
				uni.navigateTo({
					url
				});
			}
		},
		async goDistribution() {
			if (!this.$store.state.hasLogin) {
				// #ifdef APP-PLUS || H5
				uni.reLaunch({
					url: '/pagesT/public/wxLogin'
				});
				// #endif
				// #ifdef MP-WEIXIN
				uni.reLaunch({
					url: '/pagesT/binding/bindInfo'
				});
				//#endif
			} else {
				if (this.distributionSet.level && this.distributionSet.level > 0) {
					this.getInfoBusinessman();
				} else {
					this.$api.msg('抱歉，当前商家暂未开启分销功能');
				}
			}
		},
		// 获取文字设置
		async getTxtSetting() {
			this.$u.api.getTxtSetting().then(({ data }) => {
				this.$store.commit('commit_distributionTextSet', data.base_form || {});
			});
		},
		// 获取分销商详情
		async getInfoBusinessman() {
			if (this.userInfo.status !== 2) {
				this.$api.msg('抱歉，您的账号未通过审核');
				return;
			}
			this.$u.api.getInfoBusinessman().then(({ data }) => {
				if (JSON.stringify(data) === '{}') {
					// 不是分销商进入申请分销商页面
					this.goPage('/pagesT/Distribution/ApplyTerm');
				} else {
					if (data.auditStatus === 2) {
						// 进入分销中心页面
						this.goPage('/pagesT/Distribution/Distribution');
					} else {
						this.goPage('/pagesT/Distribution/ApplyAudit?auditStatus=1&applicationCondition=' + data.applicationCondition);
					}
				}
			});
		},
		getDistributionSetting() {
			this.$u.api.getDistributionSetting().then(({ data }) => {
				this.$store.commit('commit_distributionSet', data);
				this.distributionSet = data;
			});
		},
		// 获取我的会员卡
		getMyVipCards() {
			this.$u.api
				.getMyVipCards({
					page: 1,
					pageSize: 1
				})
				.then(({ data, pageTotal }) => {
					if (data.length) {
						this.vip_num = pageTotal;
						this.vip_data = {
							...data[0],
							isSelf: true
						};
					} else {
						this.getAllVipCard();
					}
				});
		},
		// 获取会员列表
		getAllVipCard() {
			this.$u.api
				.getAllVipCard({
					page: 1,
					pageSize: 1
				})
				.then(({ data }) => {
					if (data.length) {
						this.vip_data = data[0];
					}
				});
		},
		//用户订单状态数量统计
		getOrderStatusNum() {
			this.$u.api.getOrderStatusNum().then(res => {
				this.order_num = res.data;
			});
		},
		// 获取用户信息
		getCustomerInfo() {
			this.$u.api.getCustomerInfo().then(({ data }) => {
				uni.stopPullDownRefresh();
				this.userInfo = data;
				if (this.userInfo.status === 2) {
					this.getMyVipCards();
				}
				this.$store.commit('commit_userStatus', data);
				if (this.baseSet.finishDataGo && data.status === 0) {
					this.tip_model = true;
				}
			});
		},
		// 联系客服
		async lianxi(phone) {
			this.cancalCall();
			uni.makePhoneCall({
				phoneNumber: phone || this.enterprisemobile
			});
		},
		cancalCall() {
			this.call_show = false;
		},
		openpop() {
			if (this.userInfo.salesManName) {
				this.call_show = true;
			} else {
				this.lianxi(this.enterprisemobile);
			}
		},
		// 完善资料提示取消
		tipCancel() {
			this.tip_model = false;
		},
		// 跳转完善资料页面
		finishCofirm() {
			this.goPage('/pagesT/user/editUserInfo');
		}
	},
	onShareAppMessage(options) {
		return {
			title: this.$store.state.baseSet.shop,
			path: '/pages/index/index?businessmanId=' + (this.$store.state.userStatus.id || ''),
			success: res => {
				console.log(res);
			}
		};
	},
	// #ifdef MP-WEIXIN
	// 分享到朋友圈
	onShareTimeline(obj) {},
	// 收藏小程序
	onAddToFavorites() {}
	// #endif
};
</script>

<style lang="scss">
page {
	background-color: #ffffff;
}

.user-index {
	overflow-x: hidden;
	width: 750upx;
}

.user-top {
	color: #ffffff;
	position: relative;
	width: 100%;
	height: 418rpx;
	overflow: hidden;

	.circle-big {
		content: '';
		display: block;
		width: 180%;
		height: 418rpx;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		top: 0;
		overflow: hidden;
		border-radius: 0 0 50% 50%;
		background: linear-gradient(156deg, #ff6b2c 0%, #ec2723 100%);

		.circle-one {
			position: absolute;
			top: 0;
			left: 20%;
			border-bottom-right-radius: 100%;
			width: 557rpx;
			height: 60rpx;
			background: linear-gradient(180deg, rgba(255, 60, 58, 0.62) 10%, #ff6d2f 100%);
		}

		.circle-two {
			width: 155rpx;
			height: 155rpx;
			background: linear-gradient(211deg, #ff8d33 0%, #ff633b 62%);
			border-radius: 100%;
			position: absolute;
			bottom: -12rpx;
			left: 19%;
		}

		.vip-view {
			width: 670upx;
			padding: 26rpx 40rpx;
			height: 98rpx;
			border-radius: 15rpx;
			background: linear-gradient(90deg, #8e0e15 0%, #550609 100%);
			border-top: 4rpx solid rgba(255, 219, 153, 1);
			color: #ffe285;
			z-index: 1;
			position: absolute;
			bottom: 0;
			left: 50%;
			transform: translateX(-50%);
			overflow: hidden;

			.vip-name {
				display: inline-block;
				font-size: 32rpx;
				font-weight: 500;
			}

			.desc {
				font-size: 28rpx;
				font-weight: 400;
				margin-left: 16rpx;
				display: inline-block;
			}

			.vip-btn {
				width: 140rpx;
				font-size: 24rpx;
				font-weight: 400;
				height: 42rpx;
				background: linear-gradient(90deg, #ffbf59 0%, #ff3b2d 100%);
				border-radius: 21rpx;
				color: #ffefc5;
				text-align: center;
				line-height: 42rpx;
			}
		}
	}

	.user-info {
		padding: 0 40rpx;
		padding-top: 80rpx;
		position: relative;
		z-index: 9;

		.ui-img {
			border-radius: 100%;
			border: 4upx solid #ffffff;
			position: relative;

			.edit-bth {
				position: absolute;
				width: 86rpx;
				height: 32rpx;
				background: #b620e0;
				border-radius: 16rpx;
				text-align: center;
				font-size: 20rpx;
				line-height: 32rpx;
				left: 50%;
				transform: translateX(-50%);
				bottom: -8rpx;
			}
		}

		.right-icon {
			text-align: center;
			padding-top: 22rpx;

			.ibonfont {
				font-size: 40rpx;
			}

			.text {
				font-size: 20rpx;
				font-weight: 400;
				color: #ffffff;
				line-height: 28rpx;
				margin-top: 9rpx;
			}
		}

		.user-name {
			font-size: 32upx;
			padding-left: 10upx;
			margin-top: 14rpx;
			width: 450rpx;

			.login-btn {
				color: #fff;
				font-size: 32rpx;
				width: 100%;
				text-align: left;
			}

			.un-text {
				-webkit-line-clamp: 1;
			}

			.un-text-desc {
				float: left;
				font-size: 20upx;
				margin-top: 12rpx;
				width: 120rpx;
				height: 36rpx;
				line-height: 36rpx;
				text-align: center;
				background: rgba(255, 139, 130, 0.38);
				border-radius: 18rpx;
			}

			.ulogin-bth {
				text-align: left;
				height: 46upx;
				line-height: 46upx;
				border-radius: 46upx;
				padding: 0;
				color: #ffffff;
				float: left;
				background-color: transparent;
				margin-top: 20upx;

				&::after {
					border: 0 none;
				}
			}
		}
	}
}

.num-view {
	display: flex;
	padding-bottom: 10upx;
	border-bottom: 16rpx solid #f9f9f9;
	padding: 30rpx 0;

	.num-li {
		flex: 4;
		text-align: center;
		position: relative;

		.num-text {
			font-size: 32upx;
			font-weight: 600;
			padding-bottom: 10upx;
			font-family: DIN-Medium;
		}

		.num-tit {
			font-size: 24upx;
			font-weight: 400;
		}

		&::after {
			content: '';
			display: block;
			position: absolute;
			width: 1px;
			height: 40upx;
			background-color: #ffffff;
			right: 0;
			top: 50%;
			transform: translateY(-50%);
		}
	}

	.num-li:last-child {
		&::after {
			background-color: transparent;
		}
	}
}

.model-view {
	border-bottom: 16rpx solid #f9f9f9;
	border-radius: 12upx;
	padding-bottom: 40upx;
	background-color: #ffffff;
	position: relative;
	z-index: 1;

	.information-bottom {
		// width: 750rpx;
		height: 100rpx;
		text-align: center;
		padding-left: 48rpx;

		.ul-list {
			display: flex;
			flex-wrap: wrap;
			margin-top: 32rpx;

			.ul-item {
				text-align: left;
				width: 50%;
				-webkit-line-clamp: 1;

				&:nth-child(3),
				&:nth-child(4) {
					margin-top: 24rpx;
				}

				.left {
					font-size: 24rpx;
					line-height: 33rpx;
					color: #9d9d9d;
					font-weight: 500;
				}

				.right {
					font-size: 24rpx;
					line-height: 33rpx;
					color: #000000;
					font-weight: 600;
				}

				.right-last {
					color: #fa6400;
					font-weight: 600;
				}
			}
		}
	}

	// 负责信息
	.information-top {
		// width:750rpx ;
		height: 72rpx;
		background: url(https://onlineimg.qianniao.vip/bck.png) no-repeat;
		background-position: -24rpx 0, 0 0;
		background-size: 800rpx 99rpx;
		padding-top: 17rpx;

		.img {
			display: inline-block;
			width: 33rpx;
			height: 33rpx;
			vertical-align: middle;
			margin-left: 56rpx;
		}

		.text {
			font-size: 32rpx;
			font-weight: 600;
			color: #2a2a2a;
			line-height: 45rpx;
			vertical-align: middle;
			display: inline-block;
			margin-left: 6rpx;
		}
	}

	.model-tit {
		padding: 32upx;
		font-size: 32rpx;
		font-weight: 600;
		color: #000000;

		.float_right {
			font-size: 28upx;
			color: #9d9d9d;
			font-weight: 400;

			.ibonjinru {
				margin-left: 10upx;
				font-size: 24upx;
			}
		}
	}

	.list-ul {
		padding: 0 30upx;
		display: flex;
		flex-wrap: wrap;

		.list-li {
			line-height: 90upx;
			font-size: 28upx;
			color: #2a2a2a;
			width: 25%;
			text-align: center;
			.fn-icon {
				// margin-right: 24upx;
				// display: inline-block;
				text-align: center;

				.share {
					line-height: 95rpx;
					padding-left: 8rpx;
				}

				image {
					width: 89rpx;
					height: 89rpx;
					vertical-align: middle;
					transform: translateY(3rpx); // width: 50upx;
					// height: 50upx;
					// vertical-align: middle;
					// transform: translateY(-2upx);
				}
			}

			.ibonjinru {
				font-size: 28upx;
				color: #9d9d9d;
			}

			.share-btn {
				background-color: #ffffff;
				font-size: 28rpx;
				padding-left: 0;
				padding-right: 0;
				padding-top: 2rpx;
				text-align: left;
				color: #2a2a2a;
			}
		}
	}

	.fn-ul {
		display: flex;
		flex-wrap: wrap;

		.fn-li {
			width: 25%;
			flex-grow: 1;
			text-align: center;
			font-size: 26upx;
			margin-top: 16upx;

			.fn-label {
				color: #6a6a6a;
				font-size: 26rpx;
			}

			.fn-icon {
				image {
					width: 70upx;
					height: 70upx;
				}

				.ibonfont {
					color: #000000;
					font-size: 50upx;
					padding-bottom: 10upx;
					display: inline-block;
				}
			}
		}
	}

	.order-ul {
		.fn-li {
			width: 20%;
			position: relative;
			.fn-icon {
				image {
					width: 64upx;
					height: 64upx;
					margin-bottom: 10rpx;
				}
			}
		}
	}
}

.list-model-view {
	margin-bottom: 0;
	border-bottom: 0;
	padding-bottom: 0;
}

.call-pop {
	.title {
		text-align: center;
		padding: 0 30rpx;
		line-height: 90rpx;
		height: 90rpx;
		font-weight: bold;
		position: relative;

		.close-icon {
			position: absolute;
			font-weight: normal;
			right: 30rpx;
			top: 50%;
			transform: translateY(-50%);
		}
	}

	.call-ul {
		padding: 0 30rpx 30rpx;

		.call-li {
			line-height: 80rpx;
			height: 80rpx;
		}
	}

	.call-btn {
		width: 100%;
		line-height: 80rpx;
		height: 80rpx;
		text-align: center;
	}
}
</style>