<template>
	<view :style="viewColor">
		<skeleton :show="showSkeleton" :isNodes="isNodes" ref="skeleton" loading="chiaroscuro" selector="skeleton"
			bgcolor="transparent"></skeleton>
			<!-- 自定义顶部背景颜色 -->
		<view class="top">
			<!-- #ifdef MP || APP-PLUS -->
			<view class="sys-head">
				<view class="sys-bar" :style="{height:sysHeight}"></view>
				<!-- #ifdef MP -->
				<view class="sys-title">个人中心</view>
				<!-- #endif -->
				<view class="bg"></view>
			</view>
			<!-- #endif -->
		</view>
			<!-- 自定义顶部背景颜色 -->
		<view class="new-users skeleton" :style="{visibility: showSkeleton ? 'hidden' : 'visible'}">
			<view class="head">
				<view class="user-card" :class="svip_switch_status == 1 ? 'svip-card' : ''">
					<view class="bg"></view>
					<view class="user-info">
						<view class="avatar-box" :class="{on:userInfo.is_svip > 0 && svip_switch_status == 1}">
							<image class="avatar skeleton-radius" :src="userInfo.avatar ? userInfo.avatar : '/static/images/f.png'" @click="goEdit"></image>
							<view class="headwear" v-if="userInfo.is_svip > 0 && svip_switch_status == 1">
								<image src="/static/images/headwear.png"></image>
							</view>
						</view>
						<view class="info">
							<!--#ifdef MP-->
							<view class="name" v-if="!userInfo.uid" @click="openAuto">
								请点击授权
							</view>
							<!--#endif-->
							<!--#ifdef APP-PLUS-->
							<view class="name" v-if="!userInfo.uid" @click="openAuto">
								请点击登录
							</view>
							<!--#endif-->
							<!--#ifdef H5-->
							<view  class="name" v-if="!userInfo.uid" @click="openAuto">
								<text v-if="isWeixin">请点击授权</text>
								<text v-else>请点击登录</text>
							</view>
							<!--#endif-->
							<view class="name" v-if="userInfo.uid">
								{{userInfo.nickname}}<image v-if="member_status" class="level_icon" :src="userInfo.member_icon" alt="">
								<view class="vip" v-if="userInfo.is_svip > 0 && svip_switch_status == 1">
									<image src="/static/images/svip.png"></image>
								</view>
							</view>
							<view class="num" v-if="userInfo.phone" @click="goEdit()">
								<!-- <view class="num-txt">ID：{{userInfo.uid}}</view> -->
								<view class="num-txt">{{userInfo.phone}}</view>
								<view class="icon">
									<image src="/static/images/edit.png" mode=""></image>
								</view>
							</view>
							<view class="phone" v-if="!userInfo.phone && isLogin" @tap="bindPhone">绑定手机号</view>
						</view>
					</view>
					<view class="num-wrapper skeleton-rect">
						<!--<view class="num-item" @click="goMenuPage('/pages/users/user_goods_collection/index')">
							<text class="num">{{userInfo.total_collect_product || 0}}</text>
							<view class="txt">我的收藏</view>
						</view>`-->
						<!--<view v-if="hide_mer_status == 0" class="num-item" @click="goMenuPage('/pages/users/user_goods_collection/index?tab=2')">-->
						<!--	<text class="num">{{userInfo.total_collect_store || 0}}</text>-->
						<!--	<view class="txt">关注店铺</view>-->
						<!--</view>-->
						<!--<view class="num-item" @click="goMenuPage('/pages/users/browsingHistory/index')">-->
						<!--	<text class="num">{{userInfo.total_visit_product || 0}}</text>-->
						<!--	<view class="txt">浏览记录</view>-->
						<!--</view>-->
            <view class="num-item" @click="goMenuPage('/pages/users/online_payment/record/quota?quota_type=2')">
              <text class="num">{{userInfo.vegetable_available || 0}}</text>
              <view class="txt">菜卡额度</view>
            </view>
            <view class="num-item" @click="goMenuPage('/pages/users/online_payment/record/quota')">
              <text class="num">{{userInfo.available || 0}}</text>
              <view class="txt">酒卡额度</view>
            </view>
            <view class="num-item" @click="goMenuPage('/pages/users/online_payment/record/integral')">
              <text class="num">{{userInfo.exchange_integral || 0}}</text>
              <view class="txt">酒水卡积分</view>
            </view>
						<!--<view class="num-item" @click="goMenuPage('/pages/users/user_coupon/index')">-->
						<!--	<text class="num">{{userInfo.total_coupon || 0}}</text>-->
						<!--	<view class="txt">优惠券</view>-->
						<!--</view>-->
					</view>
				<!--	<navigator hover-class="none" :url="userInfo.is_svip > 0 ? '/pages/annex/vip_center/index' : '/pages/annex/vip_paid/index'" class="cardVipA acea-row row-between-wrapper" v-if="svip_switch_status == 1">
						<image class="svip_user" src="/static/images/svip_user.png"></image>
						<view class="left-box">
							<view v-if="userInfo.is_svip > 0" class="small">累计为您节省{{userInfo.svip_save_money}}元</view>
							<view v-else-if="userInfo.is_svip <= 0" class="small">开通享六大特权，省钱又省心
							</view>
						</view>
						<view class="acea-row row-middle">
							<view class="btn-open">{{userInfo.is_svip > 0 && userInfo.is_svip != 3  ? '立即续费' : userInfo.is_svip == 3 ? '终身会员' : '立即开通'}}</view>
						</view>
					</navigator>-->
					<view class="right-btn">
            <!--<view class="iconfont icon-erweima1" v-if="isLogin" @click="showQrCode()"></view>-->
            <view class="iconfont icon-saoyisao" v-if="isLogin" @click="scanCode()"></view>
						<view class="iconfont icon-shezhi" v-if="isLogin" @click="goSetting()"></view>
						<view class="btn" @click="authTo('/pages/chat/customer_list/index?type=0')" hover-class="none">
							<view class="iconfont icon-xiaoxi"></view>
							<text class="iconnum" v-if="userInfo.total_unread">{{userInfo.total_unread}}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="wrapper">
				<view class="order-wrapper">
					<view class="order-hd flex skeleton-rect">
						<view class="left">我的订单</view>
						<view class="right flex" @click="authTo('/pages/users/order_list/index?status=-1')" hover-class="none" open-type="navigate">
							全部订单
							<text class="iconfont icon-xiangyou"></text>
						</view>
					</view>
					<view class="order-bd">
						<block v-for="(item,index) in orderMenu" :key="index">
							<view class="order-item" @click="authTo(item.url)" hover-class="none">
								<view class="pic">
									<text class="iconfont" :class="item.icon"></text>
									<text class="order-status-num" v-if="item.num > 0">{{ item.num }}</text>
								</view>
								<view class="txt skeleton-rect">{{item.title}}</view>
							</view>
						</block>
					</view>
				</view>
				<!-- 轮播 -->
				<view class="slider-wrapper skeleton-rect" v-if="imgUrls.length>0">
					<swiper
              indicator-dots="true"
              :autoplay="autoplay"
              :circular="circular"
              :interval="interval"
              :duration="duration"
              @change="changeSwiper"
              :style="{ height: swiperHeight + 'px' }"
              indicator-color="rgba(255,255,255,0.6)"
              indicator-active-color="#fff">
						<block v-for="(item,index) in imgUrls" :key="index">
							<swiper-item>
								<view @click="goUrl(item.url)" class='slide-navigator acea-row row-between-wrapper'>
									<image :src="item.pic" :id="'wrap'+index" class="slide-image" :style="{ height: swiperHeight + 'px' }"></image>
								</view>
							</swiper-item>
						</block>
					</swiper>
				</view>
				<!-- 会员菜单 -->
				<view class="user-menus" style="margin-top: 20rpx;">
					<view class="title skeleton-rect">我的服务</view>
					<view class="menu-box">
						<block v-for="(item,index) in personalMenu" :key="index">
							<view v-if="item.isShow" class="item">
								<view @click="authTo(item.url)" class="item-count">
									<image v-if="showSkeleton" class="skeleton_image skeleton-radius"></image>
									<image v-else :src="item.pic"></image>
									<text>{{item.name}}</text>
								</view>
							</view>
						</block>
					</view>
				</view>
        <!-- 运营中心 -->
        <view class="user-menus" v-if="isLogin && identityShow" style="margin-top: 20rpx;">
          <view class="title skeleton-rect">运营中心</view>
          <view class="menu-box operation-center">
            <view class="item" @click="clickOperationCenterMenu('headquarters')" v-if="Object.keys(identity.headquarters_list).length > 0">
              <view class="item-count">
                <image :src="operation_center.headquarters_image"></image>
                <text>{{ operation_center.headquarters_title }}</text>
              </view>
            </view>
            <view class="item" @click="clickOperationCenterMenu('province')" v-if="Object.keys(identity.province_list).length > 0">
              <view class="item-count">
                <image :src="operation_center.province_image"></image>
                <text>{{ operation_center.province_title }}</text>
              </view>
            </view>
            <view class="item" @click="clickOperationCenterMenu('county')" v-if="Object.keys(identity.county_list).length > 0 || userInfo.service || userInfo.shopMerService">
              <view class="item-count">
                <image :src="operation_center.county_image"></image>
                <text>{{ operation_center.county_title }}</text>
              </view>
            </view>
          </view>
        </view>
        <!--商户员工端、平台客服端、酒道馆员工端入口-->
				<!--<view class="menus-list-item" v-if="userInfo.service" @click="toService(0)">-->
				<!--	<view class="item-text">-->
				<!--		<view class="title">-->
				<!--			<text class="merchant">商家</text>管理-->
				<!--		</view>-->
				<!--		<view class="info">进入商家管理中心</view>-->
				<!--	</view>-->
				<!--	<view class="image merchant-image"></view>-->
				<!--</view>-->
				<view class="menus-list-item" v-if="userInfo.topService" @click="toService(1)">
					<view class="item-text">
						<view class="title">
							<text class="plantform">平台</text>管理
						</view>
						<view class="info">进入平台客服中心</view>
					</view>
					<view class="image plantform-image"></view>
				</view>
        <!--<view class="menus-list-item" v-if="userInfo.shopMerService" @click="toService(2)">-->
        <!--  <view class="item-text">-->
        <!--    <view class="title">-->
        <!--      <text class="plantform">酒道馆</text>管理-->
        <!--    </view>-->
        <!--    <view class="info">进入酒道馆管理中心</view>-->
        <!--  </view>-->
        <!--  <view class="image plantform-image"></view>-->
        <!--</view>-->
				<!--<view class="menu-list-count" v-if="userInfo.topService && userInfo.service">
					<view class="menu-item" @click="toService(0)">
						<view class="image merchant-image"></view>
						<view class="menu-text">
							<view class="title">
								<text class="merchant">商家</text>管理
							</view>
							<view class="info">进入商家管理中心</view>
						</view>
					</view>
					<view class="menu-item" @click="toService(1)">
						<view class="menu-text">
							<view class="title">
								<text class="plantform">平台</text>管理
							</view>
							<view class="info">进入平台客服中心</view>
						</view>
						<view class="image plantform-image"></view>
					</view>
				</view>-->
			</view>
			<view v-if="copyright.status !== -1" class="copy-right">
				<image class="img-copyright" :src="copyright.image" mode="widthFix"></image>
				<view class="text">{{copyright.Copyright}}</view>
			</view>
			<view style="height: 50rpx;"></view>
			<authorize @onLoadFun="onLoadFun" :isAuto="isAuto" :isShowAuth="isShowAuth" @authColse="authColse" :isGoIndex="false"></authorize>
			<!-- #ifndef H5 -->
			<passwordPopup></passwordPopup>
			<!-- #endif -->
		</view>
		<!--自定义底部tab栏-->
		<customTab :newData="newData" :activeRouter="activeRouter"></customTab>
    <!--二维码-->
    <uni-popup ref="qrCodePopup" type="center">
      <view class="qr-code-content">
        <image class="image" :src="qrCode"></image>
        <view class="close-qr-code" @click="$refs.qrCodePopup.open.close()">关闭</view>
      </view>
    </uni-popup>
    <!-- 代理身份选择 -->
    <uni-popup ref="agentIdentitySelect" type="bottom" :is-mask-click="false">
      <view class="agent-identity-list">
        <view class="_list">
          <!--固定菜单-->
          <template v-if="identityCurrentName == 'county'">
            <view class="_list-item" v-if="userInfo.service" @click="toService(0)">
              <view class="top">商家管理</view>
              <view class="tag-list">
                <view class="tag-list-item">商家管理中心</view>
              </view>
            </view>
            <view class="_list-item" v-if="userInfo.shopMerService" @click="toService(2)">
              <view class="top">酒道馆管理</view>
              <view class="tag-list">
                <view class="tag-list-item">酒道馆管理中心</view>
              </view>
            </view>
          </template>
          <!--类型：1=总部发起人,2=省公司发起人,3=省合伙人(外勤),4=省合伙人(内勤),5=区县运营商,6=区县合伙人,7=餐厅,8=配送商,9=总部外勤,10=总部内勤-->
          <view class="_list-item" v-for="(item,index) in identityCurrent" :key="index" @click="goToAgentCenter(item)">
            <!--餐厅-->
            <template v-if="item.agent_type == 7">
              <view class="top">{{ item.mer ? item.mer.mer_name : '' }}</view>
              <view class="tag-list">
                <view class="tag-list-item">{{ item.agent_type_text }}</view>
                <!--<view class="tag-list-item">{{ item.address }}</view>-->
              </view>
            </template>
            <!--配送商-->
            <template v-else-if="item.agent_type == 8">
              <view class="top">{{ item.agent_type_text }}</view>
              <view class="tag-list delivery-tag">
                <view class="tag-list-item" v-for="(merItem,merIndex) in item.merList" :key="merIndex">{{ merItem.mer_name || '' }}</view>
              </view>
            </template>
            <!--其他角色-->
            <template v-else>
              <view class="top">{{ item.corporate_name || '' }}</view>
              <view class="tag-list" v-if="item.agent_type_list">
                <view class="tag-list-item" v-for="(tagItem,tagIndex) in Object.values(item.agent_type_list)" :key="tagIndex">{{ tagItem || '' }}</view>
              </view>
            </template>
          </view>
        </view>
        <view class='close-btn' @click="closeAgentIdentitySelect">取消</view>
      </view>
    </uni-popup>



	</view>
</template>

<script>
	import spread from "../../libs/spread";

  let sysHeight = uni.getSystemInfoSync().statusBarHeight + 'px';
	import { getMenuList, getUserInfo, setVisit, vipExchangeCode } from '@/api/user.js';
	import { getVersion, getNavigation } from "@/api/public";
	import { orderData } from '@/api/order.js'
	import { mapGetters } from "vuex";
	import authorize from '@/components/Authorize';
	import dayjs from '@/plugin/dayjs/dayjs.min.js';
	// #ifndef H5
	import passwordPopup from '@/components/passwordPopup';
	// #endif
	import customTab from '@/components/customTab';
	import { configMap } from '@/utils';
	import { HTTP_REQUEST_URL } from '@/config/app';
  import { getUserExchangeQrcode } from '@/api/exchange.js';
  import {identityList} from "@/api/agent";

	const app = getApp();
	export default {
		components: {
			// #ifndef H5
			passwordPopup,
			// #endif
			authorize,
			customTab
		},
		computed: configMap({
			mer_intention_open: 0,
			hide_mer_status: 1,
			recharge_switch: 0,
			integral_status: 0,
			member_status: 0,
			balance_func_status: 0,
			svip_switch_status: 0,
			navigation: {}
		} , mapGetters(['isLogin','uid','viewColor','keyColor'])),
		filters: {
			dateFormat: function(value) {
				return dayjs(value * 1000).format('YYYY-MM-DD');
			}
		},
		data() {
			return {
				//#ifdef H5
				isWeixin: this.$wechat.isWeixin(),
				//#endif
				domain: HTTP_REQUEST_URL,
				showSkeleton: true, //骨架屏显示隐藏
				isNodes: 0, //控制什么时候开始抓取元素节点,只要数值改变就重新抓取
				orderMenu: [{
						icon: 'icon-daifukuan1',
						title: '待付款',
						url: '/pages/users/order_list/index?status=0',
						num: 0
					},
					{
						icon: 'icon-daifahuo1',
						title: '待发货',
						url: '/pages/users/order_list/index?status=1',
						num: 0
					},
					{
						icon: 'icon-daishouhuo1',
						title: '待收货',
						url: '/pages/users/order_list/index?status=2',
						num: 0
					},
					{
						icon: 'icon-daipingjia1',
						title: '待评价',
						url: '/pages/users/order_list/index?status=3',
						num: 0
					},
					{
						icon: 'icon-a-shouhoutuikuan1',
						title: '售后/退款',
						url: '/pages/users/refund/list',
						num: 0
					},
				],
				imgUrls: [{url:'',pic:''}],
				userMenu: [],
				skeletonMenu: [],
				personalMenu: [
					{pic: '',name: '',isShow: true},
					{pic: '',name: '',isShow: true},
					{pic: '',name: '',isShow: true},
					{pic: '',name: '',isShow: true},
					{pic: '',name: '',isShow: true},
					{pic: '',name: '',isShow: true},
					{pic: '',name: '',isShow: true},
					{pic: '',name: '',isShow: true},
					{pic: '',name: '',isShow: true},
					{pic: '',name: '',isShow: true},
					{pic: '',name: '',isShow: true},
					{pic: '',name: '',isShow: true}
				],
        operation_center: {},
				autoplay: true,
				circular: true,
				interval: 3000,
				duration: 500,
				isAuto: false, //没有授权的不会自动授权
				isShowAuth: false, //是否隐藏授权
				orderStatusNum: {},
				userInfo: {aratar: '/static/f.png',is_svip:0},
				MyMenus: [],
				is_promoter: 0, //推广人开关  1开
        is_exchange_saff: false,// 是否为兑换管理员
        is_agent: false,// 是否为代理人员
				extension_status: 0,
				copyright: {
					copyright_status: 1
				},
				newData: {},
				activeRouter: '',
				sysHeight: sysHeight,
        currIndex: 0, // 当前索引
        swiperHeight: 0, // 滑块的高度(单位px)
        // 二维码
        qrCode: '',
        // 身份信息
        identityShow: false,
        identity: {
          county_list: 0,
          headquarters_list: 0,
          province_list: 0
        },
        identityCurrent:{},
        identityCurrentName: '',
			}
		},
		onLoad(options) {
      this.$nextTick(() => {
        this.setSwiperHeight(); // 动态设置 swiper 的高度
      });
      // 关系处理
      if(options.spread) spread(options.spread, this.isLogin)
		},
		onReady() {
			this.isNodes++;
		},
		mounted: function() {
			this.getVersion()
		},
		onShow: function() {
			let that = this;
			let routes = getCurrentPages();
			let curRoute = routes[routes.length - 1].route
			this.activeRouter = '/' + curRoute
			this.getNav();
			if (that.isLogin) {
				this.getUserInfo();
				this.orderNum();
        this.getIdentityList();
			} else {
				// this.userInfo = {
				// 	is_svip: 0
				// }
				this.orderMenu.forEach(v=>{
					v.num = 0
				})
				this.getMyMenus();
			}
			setTimeout(() => {
				this.showSkeleton = false
			}, 500)
		},
		methods: {
			authTo(url){
				if(this.isLogin){
					uni.navigateTo({
						url
					})
				}else{
					this.openAuto()
				}
			},
			goRouter(item) {
				var pages = getCurrentPages();
				var page = (pages[pages.length - 1]).$page.fullPath;
				if (item.link == page) return
				uni.switchTab({
					url: item.link,
					fail(err) {
						uni.redirectTo({
							url: item.link
						})
					}
				})
			},
			getNav() {
				getNavigation().then(res => {
					this.newData = res.data
					if (this.newData.status && this.newData.status.status) {
						uni.hideTabBar()
					} else {
						uni.showTabBar()
					}
				})
			},
			toService(is_sys){
        // 判断：如果为0 || 2 清除商户登录状态
        if(is_sys == 0 || is_sys == 2){
          this.$store.commit("SHOP_LOGIN", {
            'token': null,
            'time': null,
            'shop_mer_id': null,
          });
        }
				uni.navigateTo({
					url: '/pages/admin/business/index?is_sys=' + is_sys
				})
			},
			getVersion() {
				getVersion().then(data => {
					this.copyright = data.data;
				});
			},
			// 菜单显示
			filterMenus: function(item){
				let that = this;
				if(item.url=='/pages/users/user_money/index') item.isShow =  that.balance_func_status == 1
        else if(item.url == '/pages/agent/center'){
          console.log('是否为代理人员：',that.is_agent)
          item.isShow = that.is_agent || false;
        }
				else if(item.url=='/pages/users/user_spread_user/index'){
					if(that.extension_status == 0){
						item.isShow = false
					} else if(that.extension_status == 1){
						if(that.is_promoter == 1){
							item.isShow = that.is_promoter == 1 && that.extension_status == 1
						}else if(that.is_promoter == 0 ){
							item.isShow = that.is_promoter == 0 && that.extension_status == 1
							item.url="/pages/users/distributor/index"
						}
					}
				}
				else if(item.url=='/pages/store/settled/index')item.isShow = that.mer_intention_open == 1
				else if(item.url=='/pages/users/user_grade/index') item.isShow = that.member_status == 1
				else if(item.url=='/pages/users/user_integral/index') item.isShow = that.integral_status == 1
        else if(item.url=='/pages/users/online_payment/site/index') item.isShow = this.is_exchange_saff == 1
				else item.isShow = true
			},
			showMenu(menu){
				return !menu || ['integral','service','admin_order','verify_order','intention','promoter','balance'].indexOf(menu) === -1;
			},
			goUrl(url){
				if(url.indexOf("http") != -1){
					// #ifdef H5
					location.href = url
					// #endif
				}else{
					if(['/pages/goods_cate/goods_cate','/pages/order_addcart/order_addcart','/pages/user/index','/pages/plant_grass/index'].indexOf(url) == -1){
						uni.navigateTo({
							url:url
						})
					}else{
						uni.switchTab({
							url:url
						})
					}
				}
			},
			// 去聊天列表
			goChat() {
				let type = this.userInfo.service ? 1 : 0
				uni.navigateTo({
					url: `/pages/chat/customer_list/index?type=${type}`
				})
			},
			// 记录会员访问
			setVisit() {
				setVisit({
					url: '/pages/user/index'
				}).then(res => {})
			},
			// 打开授权
			openAuto() {
				this.isAuto = true;
				this.isShowAuth = true
			},
			// 授权回调
			onLoadFun(data) {
				this.getUserInfo();
				this.getMyMenus();
				this.orderNum();
        this.getIdentityList();
				this.isShowAuth = false;
			},
			Setting: function() {
				uni.openSetting({
					success: function(res) {}
				});
			},
			// 授权关闭
			authColse: function(e) {
				this.isShowAuth = e
			},
			// 绑定手机
			bindPhone() {
				uni.navigateTo({
					url: '/pages/users/user_phone/index'
				})
			},
			/**
			 * 获取个人用户信息
			 */
			getUserInfo: function() {
				let that = this;
				getUserInfo().then(res => {
					that.userInfo = res.data;
					that.is_promoter = res.data.is_promoter;
          that.is_exchange_saff = res.data.is_exchange_saff || false;
          that.is_agent = res.data.is_agent || false;
					that.extension_status = res.data.extension_status;
					that.getMyMenus();
				});
			},
			// 订单数字
			orderNum() {
				orderData().then(({
					data
				}) => {
					this.orderMenu.forEach((item, index) => {
						switch (item.title) {
							case '待付款':
								item.num = data.noPay
								break
							case '待发货':
								item.num = data.noPostage
								break
							case '待收货':
								item.num = data.noDeliver
								break
							case '待评价':
								item.num = data.noComment
								break
							case '售后/退款':
								item.num = data.refund
								break
						}
					})
				})
			},
			/**
			 *
			 * 获取个人中心图标
			 */
			getMyMenus: function() {
				let that = this;
				if (this.MyMenus.length) return;
				getMenuList().then(res => {
					that.personalMenu = []
					res.data.menu.forEach((item,index)=>{
						that.filterMenus(item)
						that.personalMenu.push(item)
					})
					that.imgUrls = res.data.banner
          that.operation_center = res.data.operation_center || {};
					uni.stopPullDownRefresh(); //结束下拉刷新
				});
			},
			// 编辑页面
			goEdit() {
				if(this.isLogin){
					uni.navigateTo({
						url: '/pages/users/user_info/index'
					})
				}else{
					this.openAuto()
				}
			},
			goSetting() {
				if(this.isLogin){
					uni.navigateTo({
						url: '/pages/users/user_setting/index'
					})
				}else{
					this.openAuto()
				}
			},
			// 签到
			goSignIn() {
				uni.navigateTo({
					url: '/pages/users/user_sgin/index'
				})
			},
			goMenuPage(url) {
				if (this.isLogin) {
					uni.navigateTo({
						url
					})
				} else {
					this.openAuto()
				}
			},

      /* 切换 swiper 滑块 */
      changeSwiper(e) {
        this.currIndex = e.detail.current;
        this.$nextTick(() => {
          this.setSwiperHeight(); // 动态设置 swiper 的高度
        });
      },
      /* 动态设置 swiper 的高度 */
      setSwiperHeight() {
        const element = "#wrap" + this.currIndex;
        const query = uni.createSelectorQuery().in(this);
        query.select(element).boundingClientRect(data => {
          this.swiperHeight = data.width * 7 / 20;
        }).exec();

        // query.select(element).boundingClientRect();
        // query.exec(res => {
        //   console.log(res);
        //   if (res && res[0]) this.swiperHeight = res[0].height;
        // });
      },
      // 用户兑换二维码
      showQrCode(){
        let _this = this;
        getUserExchangeQrcode().then(res => {
          if(res.status == 200){
            _this.qrCode = res.data.qr_code || ''
            _this.$refs.qrCodePopup.open('center');
          }
        }).catch(err => {
          this.$util.Tips({
            title: err
          });
        });
      },
      // 获取用户某个代理身份是否有效
      getIdentityList(){
        let _this = this;
        identityList().then(res => {
          if(res.status == 200){
            _this.identity = res.data || {}
            // 计算长度  是否允许显示
            let headquarters = Object.keys(_this.identity.headquarters_list).length || 0;
            let province = Object.keys(_this.identity.province_list).length || 0;
            let county = Object.keys(_this.identity.county_list).length || 0;
            let total = Number(headquarters) + Number(province) + Number(county);
            _this.identityShow = Number(total) > 0;
          }
        }).catch(err => {
          // this.$util.Tips({ title: err });
        });
      },
      // 运营中心 - 点击菜单
      clickOperationCenterMenu(type){
        this.identityCurrentName = type || '';
        let keyName = type + '_list';
        this.identityCurrent = this.identity[keyName] || {};
        let len = Object.keys(this.identityCurrent).length || 0;
        // 根据数据进行对应的操作
        if(len <= 0 && (type != 'county' || (type == 'county' && !this.userInfo.service && !this.userInfo.shopMerService))) return false;
        else if(len == 1 || type == 'headquarters') this.goToAgentCenter(this.identityCurrent[0]);
        else this.$refs.agentIdentitySelect.open('bottom');
      },
      // 运营中心 - 关闭弹框
      closeAgentIdentitySelect(){
        this.$refs.agentIdentitySelect.close();
      },
      // 运营中心 - 跳转代理中心
      goToAgentCenter(agentInfo){
        let path = `/pages/agent/centerV2?agent_id=${agentInfo.id}`; // 默认为跳转代理中心
        if(agentInfo.agent_type == 7) path = `/pages/admin/business/index?is_sys=0&mer_id=${agentInfo.mer_id}`; // 进入餐厅管理
        // 页面跳转
        uni.navigateTo({
          // url: `/pages/agent/center?agent_id=${agentInfo.id}`
          url: path
        })
      },
      // 扫码
      scanCode(){
        let _this = this;
        wx.scanCode({
          success(res) {
            let result = res.result || '';
            if(result){
              vipExchangeCode({
                exchange_code: result
              }).then(res => {
                if(res.status == 200){
                  uni.showModal({
                    title: '开通成功',
                    success: (res) => {
                      uni.navigateTo({
                        url: '/pages/annex/vip_center/index'
                      });
                    }
                  });
                }
              }).catch(err => {
                _this.$util.Tips({title: err});
              });
            }
          },
          fail(res) {
            console.log(res);
          },
        })
      },




		},
		onPullDownRefresh: function(){
			this.getNav();
			if (this.isLogin) {
				this.getUserInfo();
				this.orderNum();
			} else {
				this.userInfo = {}
				this.orderMenu.forEach(v=>{
					v.num = 0
				})
				this.getMyMenus();
			}
		},
    // #ifdef MP
    // 分享给好友
    onShareAppMessage () {
      let pages = getCurrentPages();
      let page = pages[pages.length - 1]
      let shareData = {
        title: '个人中心',
        path: page.$page.fullPath || '/' + page.route,
      };
      // 判断：用户是否登录  已经登录则添加分享人信息，未登录则正常分享
      if (this.isLogin) shareData.path = shareData.path + '?spread=' + this.uid;
      // 返回最终的分享配置信息
      return shareData
    },
    // 分享到朋友圈
    onShareTimeline() {
      let shareData = {
        title: '个人中心',
        query: {},
      };
      // 判断：用户是否登录  已经登录则添加分享人信息，未登录则正常分享
      if (this.isLogin) shareData.query.spread = this.uid;
      // 返回最终的分享配置信息
      return shareData
    },
    // #endif
	}
</script>

<style lang="scss" scoped>
.agent-identity-list{
  --list-padding-: 30rpx;

  background: #f6f6f6;
  width: 100vw;
  height: 80vh;
  padding: var(--list-padding-);
  position: relative;

  ._list{
    height: calc(100% - 160rpx);
    width: calc(100% - (var(--list-padding-) * 2));
    position: fixed;
    top: var(--list-padding-);
    left: var(--list-padding-);
    overflow-y: auto;
    ._list-item{
      width: 100%;
      background: #FFFFFF;
      border-radius: 15rpx;
      padding: 20rpx;
      .top{
        width: 100%;
        height: 50rpx;
        display: inline-flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: flex-start;
        align-items: center;
        font-size: 30rpx;
        font-weight: bold;
        .top-tag{
          background-color: #f3e6e8;
          color: #926c6b;
          margin-left: 15rpx;
          height: 35rpx;
          line-height: 35rpx;
          font-size: 24rpx;
          padding: 0 10rpx;
          border-radius: 5rpx;
          font-weight: normal;
        }
      }
      .address{
        height: 35rpx;
        line-height: 35rpx;
        font-size: 25rpx;
      }
      .tag-list{
        display: inline-flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: flex-start;
        align-items: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        width: 100%;
        .tag-list-item{
          background-color: #f3e6e8;
          color: #926c6b;
          height: 35rpx;
          line-height: 35rpx;
          font-size: 24rpx;
          padding: 0 10rpx;
          border-radius: 5rpx;
          font-weight: normal;
          margin-right: 15rpx;
          max-width: 100%;
        }
        .tag-list-item:last-child{
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
      .delivery-tag{
        .tag-list-item{
          color: #fff;
          background-color: #e6a23c;
          border-color: #e6a23c;
        }
      }
    }
    ._list-item:not(:last-child){
      margin-bottom: 20rpx;
    }
  }
  .close-btn{
    width: calc(100% - (var(--list-padding-) * 2));
    height: 70rpx;
    line-height: 70rpx;
    text-align: center;
    font-size: 35rpx;
    border: 2rpx solid #CCCCCC;
    border-radius: 100rpx;
    position: fixed;
    bottom: var(--list-padding-);
    left: var(--list-padding-);
  }
}
.cardVipA {
  position: absolute;
  background: linear-gradient(145deg, #F8E3A8 0%, #E8C077 100%);
  background-size: 100% 100%;
  width: 710rpx;
  height: 84rpx;
  bottom: -2rpx;
  left: 20rpx;
  padding: 0 30rpx 0 105rpx;
  border-radius: 16rpx 16rpx 0 0;
  box-sizing: border-box;

  .svip_user {
    width: 52rpx;
    height: 52rpx;
    border-radius: 100%;
    position: absolute;
    left: 30rpx;
    top: 17rpx;
  }

  .left-box {
    font-size: 26rpx;
    color: #905100;
    font-weight: 400;
  }

  .btn {
    color: #905100;
    font-weight: 400;
    font-size: 24rpx;
  }

  .btn-open {
    background: #282828;
    border-radius: 40rpx;
    color: #F7E1A6;
    font-size: 24rpx;
    width: 140rpx;
    height: 50rpx;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
.new-users {
  .head {
    background: #fff;

    .user-card {
      position: relative;
      width: 100%;
      padding: 35rpx 0 50rpx;
      background-image: linear-gradient(90deg, var(--view-bntColor21) 0%, var(--view-bntColor22) 100%);

      &.svip-card {
        //padding: 35rpx 0 120rpx;
        padding: 35rpx 0;
      }

      .bg {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-size: 100% 100%;
      }

      .user-info {
        z-index: 20;
        position: relative;
        display: flex;
        padding: 0 28rpx;

        .level_icon {
          width: 34rpx;
          height: 32rpx;
          margin: 4rpx 0 0 6rpx;
          border: none;
        }

        .avatar-box {
          width: 120rpx;
          height: 120rpx;
          border-radius: 50%;
          position: relative;

          .avatar, image {
            width: 120rpx;
            height: 120rpx;
            border-radius: 50%;
          }

          &.on {
            .avatar {
              border: 2px solid #FFAC65;
              border-radius: 50%;
              box-sizing: border-box;
            }
          }
        }

        .headwear {
          position: absolute;
          right: -4rpx;
          top: -14rpx;
          width: 44rpx;
          height: 44rpx;
          z-index: -1;

          image {
            width: 100%;
            height: 100%;
          }
        }

        .info {
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          margin-left: 20rpx;
          padding: 15rpx 0;

          .name {
            display: flex;
            align-items: center;
            color: #fff;
            font-size: 31rpx;

            .vip {
              width: 82rpx;
              height: 36rpx;
              margin-left: 12rpx;

              image {
                width: 82rpx;
                height: 36rpx;
              }
            }
          }

          .num {
            display: flex;
            align-items: center;
            font-size: 26rpx;
            color: rgba(255, 255, 255, 0.6);

            image {
              width: 22rpx;
              height: 23rpx;
              margin-left: 20rpx;
            }
          }
        }
      }

      .num-wrapper {
        z-index: 30;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 30rpx 20rpx 0;
        color: #fff;

        .num-item {
          width: 25%;
          text-align: center;

          .num {
            font-size: 42rpx;
            font-weight: bold;
          }

          .txt {
            margin-top: 8rpx;
            font-size: 22rpx;
            color: rgba(255, 255, 255, 0.6);
          }
        }
      }

      .sign {
        z-index: 200;
        position: absolute;
        right: -12rpx;
        top: 80rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 120rpx;
        height: 60rpx;
        background: linear-gradient(90deg, rgba(255, 225, 87, 1) 0%, rgba(238, 193, 15, 1) 100%);
        border-radius: 29rpx 4rpx 4rpx 29rpx;
        color: #282828;
        font-size: 28rpx;
        font-weight: bold;
      }
    }
  }

  .wrapper {
    position: relative;
    padding: 0 20rpx;
    margin-top: 20rpx;
  }

  .order-wrapper {
    background-color: #fff;
    border-radius: 16rpx;

    .order-hd {
      height: 80rpx;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px dashed #DDDDDD;
      padding: 0 30rpx;
      color: #282828;

      .left {
        font-weight: bold;
      }

      .right {
        align-items: center;
        color: #666666;
        font-size: 26rpx;

        .icon-xiangyou {
          margin-left: 5rpx;
          margin-top: 6rpx;
          font-size: 26rpx;
        }
      }
    }

    .order-bd {
      display: flex;

      .order-item {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 20%;
        height: 160rpx;

        .pic {
          position: relative;
          text-align: center;

          .iconfont {
            font-size: 62rpx;
            color: var(--view-theme);
          }
        }

        .txt {
          margin-top: 8rpx;
          font-size: 26rpx;
          color: #454545;
        }
      }
    }
  }

  .slider-wrapper {
    margin: 20rpx 0;

    swiper,
    swiper-item {
      height: 100%;
    }

    image {
      width: 100%;
      //height: auto!important;
    }
  }

  .user-menus {
    padding-bottom: 30rpx;
    background-color: #fff;
    border-radius: 16rpx;

    .title {
      height: 80rpx;
      line-height: 80rpx;
      padding: 0 30rpx;
      border-bottom: 1px dashed #DDDDDD;
      font-weight: bold;
    }

    .item {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      width: 25%;
      line-height: 28rpx;
      height: 90rpx;
      margin-top: 40rpx;
      text-align: center;

      .item-count {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
      }

      image {
        width: 52rpx;
        height: 52rpx;
      }

      .skeleton_image {
        width: 80rpx;
        height: 80rpx;
      }

      text {
        margin-top: 10rpx;
        font-size: 26rpx;
        color: #282828;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        width: 78%;
      }

      &:last-child::before {
        display: none;
      }
    }

    button {
      font-size: 28rpx;
    }
  }

  .phone {
    color: #fff;
  }

  .order-status-num {
    background-color: #fff;
    color: var(--view-theme);
    border-radius: 200rpx;
    position: absolute;
    right: -12rpx;
    top: -12rpx;
    font-size: 20rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 30rpx;
    height: 30rpx;
    padding: 0 8rpx;
    box-sizing: border-box;
    border: 1px solid var(--view-theme);
  }
}
.sys-head {
  position: relative;
  width: 100%;
  // background: linear-gradient(90deg, $bg-star1 0%, $bg-end1 100%);

  .bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(90deg, var(--view-bntColor21) 0%, var(--view-bntColor22) 100%);
    background-size: 100% auto;
    background-position: left bottom;
  }

  .sys-title {
    z-index: 10;
    position: relative;
    height: 43px;
    text-align: center;
    line-height: 43px;
    font-size: 32rpx;
    color: #FFFFFF;
  }
}
.menus-list-item {
  background: #fff;
  border-radius: 12rpx;
  padding: 30rpx 50rpx 30rpx 40rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 20rpx;

  .title {
    font-size: 34rpx;
    color: #282828;
    font-weight: bold;

    .merchant {
      color: #E93323;
    }

    .plantform {
      color: #FFC552;
    }
  }

  .info {
    margin-top: 15rpx;
    color: #666666;
    font-size: 22rpx;
  }

  .image {
    width: 180rpx;
    height: 108rpx;
    background-size: 100%;
    background-repeat: no-repeat;

  }
}
.merchant-image {
  background-image: url('data:image/png;base64, ');
}
.plantform-image {
  background-image: url('data:image/png;base64, ');
}
.copy-right {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #CCCCCC;
  font-size: 22rpx;
  margin-top: 40rpx;
  margin-bottom: 98rpx;
  margin-bottom: calc(98rpx + constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
  margin-bottom: calc(98rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/
  .iconfont {
    font-size: 60rpx;
  }

  .img-copyright {
    width: 120rpx;
    height: 60rpx;
  }
}
.menu-box {
  display: flex;
  flex-wrap: wrap;
}
.right-btn {
  z-index: 99;
  position: absolute;
  right: 30rpx;
  top: 40rpx;
  display: flex;
  align-items: center;
  color: #fff;

  .iconfont {
    font-size: 40rpx;
    margin-left: 33rpx;
  }

  .btn {
    position: relative;
  }

  .iconnum {
    min-width: 6px;
    background-color: #fff;
    color: var(--view-theme);
    border-radius: 15rpx;
    position: absolute;
    right: -10rpx;
    top: -10rpx;
    font-size: 10px;
    padding: 0 4px;
  }
}
.menu-list-count {
  background-color: #fff;
  margin-top: 20rpx;
  border-radius: 12rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .menu-item {
    width: 50%;
    padding: 25rpx 15rpx;
    display: flex;
    align-items: center;
    position: relative;

    &:first-child {
      &::after {
        content: "";
        display: block;
        border-right: 1rpx solid #E2E2E2;
        height: 56%;
        position: absolute;
        right: 0;
      }
    }

    .image {
      width: 106rpx;
      height: 64rpx;
      background-size: 100%;
      background-repeat: no-repeat;

      &.merchant-image {
        margin-right: 15rpx;
      }

      &.plantform-image {
        margin-left: 15rpx;
      }
    }

    .menu-text {
      margin-left: 10rpx;

      .title {
        color: #333333;
        font-weight: bold;
        font-size: 26rpx;

        .merchant {
          color: #E93323;
        }

        .plantform {
          color: #FFC552;
        }
      }

      .info {
        color: #999999;
        font-size: 22rpx;
        margin-top: 5rpx;
      }
    }
  }
}
.page-footer {
  position: fixed;
  bottom: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-around;
  width: 100%;
  height: calc(98rpx + constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
  height: calc(98rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/
  box-sizing: border-box;
  border-top: solid 1rpx #F3F3F3;
  background-color: #fff;
  box-shadow: 0px 0px 17rpx 1rpx rgba(206, 206, 206, 0.32);
  padding-bottom: constant(safe-area-inset-bottom); ///兼容 IOS<11.2/
  padding-bottom: env(safe-area-inset-bottom); ///兼容 IOS>11.2/
  &.filter {
    filter: blur(2rpx);
  }

  .foot-item {
    display: flex;
    width: max-content;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    position: relative;

    .count-num {
      position: absolute;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 40rpx;
      height: 40rpx;
      top: 0rpx;
      right: -15rpx;
      color: #fff;
      font-size: 20rpx;
      background-color: #FD502F;
      border-radius: 50%;
      padding: 4rpx;
    }
  }

  .foot-item image {
    height: 50rpx;
    width: 50rpx;
    text-align: center;
    margin: 0 auto;
  }

  .foot-item .txt {
    font-size: 24rpx;
  }
}
.qr-code-content {
  width: 80vw;

  .image {
    width: 80vw;
    height: 80vw;
  }

  .close-qr-code {
    position: fixed;
    top: 35rpx;
    right: 70rpx;
    color: #FFFFFF;
    border: 2rpx solid #FFFFFF;
    height: 40rpx;
    line-height: 36rpx;
    padding: 0 20rpx;
    border-radius: 50rpx;
  }
}
.operation-center{
  .item{
    width: calc(100% / 3) !important;
  }
}
</style>
