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/order?state=0')">
					<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://api.junhailan.com/img/user/dyq.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://api.junhailan.com/img/user/wddz.png"></image>
					</view>
					<view class="fn-label">我的地址</view>
				</view>
				<view class="fn-li" @click="navTo('/pagesT/user/myyhk')">
					<view class="fn-icon">
						<image src="https://api.junhailan.com/img/user/yhk.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://api.junhailan.com/img/user/wdsc.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://api.junhailan.com/img/user/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" @click="navTo('/pagesT/unit/yhk')">
					<view class="fn-icon">
						<image src="https://api.junhailan.com/img/user/hyk.png" mode="aspectFill"></image>
						<view>优惠卡</view>
					</view>
				</view>
				<view class="list-li clearfix" @click="navTo('/pagesT/user/GetCoupon')">
					<view class="fn-icon">
						<image src="https://api.junhailan.com/img/user/lqzx.png" mode="aspectFill"></image>
						<view>领券中心</view>
					</view>
				</view>
				<view class="list-li clearfix" @click="navTo('/pagesT/order/orderT?state=1')">
					<view class="fn-icon">
						<image src="https://api.junhailan.com/img/user/cgqd.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://api.junhailan.com/img/user/xqtb.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://api.junhailan.com/img/user/gq.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://api.junhailan.com/img/user/tjfx.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://api.junhailan.com/img/user/sz.png" mode="aspectFill"></image>
						<view>设置</view>
					</view>
				</view>
			</view>
		</view>
		<u-modal v-model="show_change_name" @confirm="nameCofirm" @cancel="nameCancel" :show-cancel-button="true"
			content="您的昵称为小程序默认昵称,是否立即修改" confirm-text="去修改" cancel-text="下次再说"></u-modal>
		<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,
				show_change_name: 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;
					}
					if (this.userInfo.name == '微信用户') {
						let show = uni.getStorageSync('showchangename')
						if(show != 1) {
							this.show_change_name = 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;
			},
			nameCancel() {
				uni.setStorageSync('showchangename',1)
				this.show_change_name = false;
				
			},
			// 跳转完善资料页面
			finishCofirm() {
				this.goPage('/pagesT/user/editUserInfo');
			},
			nameCofirm() {
				uni.setStorageSync('showchangename',1)
				this.goPage('/pagesT/selfconfig/selfconfig');
			},
			
		},
		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>