tjqPhone/pages/user/index.vue

<template>
	<!-- 个人中心模块 -->
	<view class="new-users copy-data" :style="{height:pageHeight}">
		<!-- 自定义顶部背景颜色 -->
		<view class="top" :style="colorStyle">
			<!-- #ifdef MP || APP-PLUS -->
			<view class="sys-head">
				<view class="sys-bar" :style="{height:sysHeight}"></view>
				<!-- #ifdef MP -->
				<view class="sys-title" :style="member_style==3?'color:#333':''">个人中心</view>
				<!-- #endif -->
				<view class="bg" :style="member_style==3?'background:#f5f5f5':''"></view>
			</view>
			<!-- #endif -->
		</view>
		<!-- 自定义顶部背景颜色 -->
		<view class="mid style-add" :style="colorStyle">
			<scroll-view scroll-y="true" class="height-add">
				<view class="head">
					<view class="user-card" :class="member_style==3?'unBg':''"
						:style="{backgroundImage:'url('+imgHost+'/statics/images/user01.png'+')'}">
						<view class="bg"></view>
						<!-- 个人资料展示 -->
						<view class="user-info">
							<view>
								<!-- 公众号未授权时显示 -->
								<!-- #ifdef H5 -->
								<button class="bntImg" v-if="userInfo.is_complete == 0 && isWeixin"
									@click="getWechatuserinfo">
									<image class="avatar" src='/static/images/f.png'></image>
									<view class="avatarName">获取头像</view>
								</button>
								<!-- #endif -->
								<!-- #ifdef MP -->
								<button class="bntImg" v-if="userInfo.is_complete == 0" @tap="getUserProfile">
									<image class="avatar" src='/static/images/f.png'></image>
									<view class="avatarName">获取头像</view>
								</button>
								<!-- #endif -->
								<!-- #ifndef APP-PLUS -->
								<view v-else class="avatar-box" :class="{on:userInfo.is_money_level}">
									<image class="avatar" :src='userInfo.avatar' v-if="userInfo.avatar"
										@click="goEdit()">
									</image>
									<image v-else class="avatar" src="/static/images/f.png" mode="" @click="goEdit()">
									</image>
									<view class="headwear" v-if="userInfo.is_money_level && stu">
										<image src="/static/images/headwear.png"></image>
									</view>
								</view>
								<!-- #endif -->
								<!-- #ifdef APP-PLUS -->
								<view class="avatar-box" :class="{on:userInfo.is_money_level}">
									<image class="avatar" :src='userInfo.avatar' v-if="userInfo.avatar"
										@click="goEdit()">
									</image>
									<image v-else class="avatar" src="/static/images/f.png" mode="" @click="goEdit()">
									</image>
									<view class="headwear" v-if="userInfo.is_money_level && stu">
										<image src="/static/images/headwear.png"></image>
										<view>
											未登录
										</view>
									</view>
								</view>
								<!-- #endif -->
							</view>
							<view class="info">
								<!-- #ifdef MP -->
								<view class="name display-add" v-if="!userInfo.uid" @click="openAuto">
									请点击授权
								</view>
								<!-- #endif -->
								<!-- #ifdef H5 -->
								<view class="name display-add" v-if="!userInfo.uid" @click="openAuto">
									请点击授权
								</view>
								<!-- #endif -->
								<view class="name" v-if="userInfo.uid">
									{{userInfo.nickname}}
									<image class="live" :src="userInfo.vip_icon" v-if="userInfo.vip_icon"></image>
									<view class="vip" v-if="userInfo.is_money_level> 0 && stu">
										<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="icon">
										<image src="/static/images/edit.png" mode=""></image>
									</view>
								</view>
								<view class="phone" v-if="!userInfo.phone && isLogin" @tap="bindPhone">绑定手机号</view>
							</view>
							<view class="qrCode message iconfont icon-erweima-xingerenzhongxin" @click="tapQrCode">
							</view>
							<view class="message">
								<navigator url="/pages/users/user_info/index" hover-class="none">
									<view class="iconfont icon-shezhi"></view>
								</navigator>
							</view>
							<view class="message">
								<navigator url="/pages/users/message_center/index" hover-class="none">
									<view v-if="userInfo.service_num" class="num">
										{{userInfo.service_num >= 100 ? '99+' : userInfo.service_num}}
									</view>
									<view class="iconfont icon-s-kefu"></view>
								</navigator>
							</view>
							<!-- #ifdef MP -->
							<!-- <view class="setting" @click="Setting"><text class="iconfont icon-shezhi"></text></view> -->
							<!-- #endif -->

						</view>
						<view class="achsac">
						</view>
						<!-- <view class="sign" @click="goSignIn">签到</view> -->
						<!-- 会员权益 -->
						<view class="cardVipA acea-row row-between-wrapper" v-if="member_style==1 && stu && vip_type==2"
							:style="{backgroundImage:'url('+imgHost+'/statics/images/member.png'+')'}">
							<view class="left-box">
								<view v-if="vipStatus == 1" class="small">永久</view>
								<view v-else-if="vipStatus == 3" class="small">会员到期
									{{ userInfo.overdue_time | dateFormat }}
								</view>
								<view v-else-if="vipStatus == -1" class="small">已过期</view>
								<view v-else-if="vipStatus == 2" class="small">未开通会员</view>
							</view>
							<view class="acea-row row-middle">
								<navigator v-if="vipStatus == 1" url="/pages/annex/vip_paid/index" hover-class="none"
									class="btn">查看会员权益
								</navigator>
								<navigator v-else url="/pages/annex/vip_paid/index" hover-class="none" class="btn">
									{{ userInfo.overdue_time ? '立即续费' : '立即激活' }}
								</navigator>
								<text class="iconfont icon-xiangyou"></text>
							</view>
						</view>
						<view class="cardVipB acea-row row-between" v-if="member_style==3 && stu && vip_type==2">
							<view class="left-box acea-row">
								<view class="pictrue">
									<image src="../../static/images/member01.png"></image>
								</view>
								<view v-if="vipStatus == 1" class="small">永久</view>
								<view v-else-if="vipStatus == 3" class="small">会员到期
									{{ userInfo.overdue_time | dateFormat }}
								</view>
								<view v-else-if="vipStatus == -1" class="small">已过期</view>
								<view v-else-if="vipStatus == 2" class="small">未开通会员</view>
							</view>
							<view class="acea-row">
								<navigator v-if="vipStatus == 1" url="/pages/annex/vip_paid/index" hover-class="none"
									class="btn">
									会员可享多项权益</navigator>
								<navigator v-else url="/pages/annex/vip_paid/index" hover-class="none" class="btn">
									{{ userInfo.overdue_time ? '立即续费' : '立即激活' }}
								</navigator>
								<text class="iconfont icon-xiangyou btn"></text>
							</view>
						</view>
						<!-- <view class="cardVipA acea-row row-between-wrapper"
							:style="{backgroundImage:'url('+imgHost+'/statics/images/grade.png'+')'}"
							v-if="member_style==1 && memberStatus && vip_type==1">
							<view class="left-box on">
								<view class="small">{{userInfo.level_status==1?userInfo.vip_name:'激活会员卡 解锁更多权益'}}</view>
							</view>
							<view class="acea-row row-middle">
								<navigator
									:url="userInfo.level_status==1?'/pages/annex/vip_grade/index':'/pages/annex/vip_grade_active/index'"
									hover-class="none" class="btn on">{{userInfo.level_status==1?'查看会员卡':'去激活'}}
								</navigator>
								<text class="iconfont icon-xiangyou on"></text>
							</view>
						</view> -->
						<!-- <view class="cardVipB acea-row row-between on"
							:style="{backgroundImage:'url('+imgHost+'/statics/images/grade01.png'+')'}"
							v-if="member_style==3 && memberStatus && vip_type==1">
							<view class="small">{{userInfo.level_status==1?userInfo.vip_name:'激活会员卡 解锁更多权益'}}</view>
							<view class="acea-row">
								<navigator
									:url="userInfo.level_status==1?'/pages/annex/vip_grade/index':'/pages/annex/vip_grade_active/index'"
									hover-class="none" class="btn on">{{userInfo.level_status==1?'查看会员卡':'去激活'}}
								</navigator>
								<text class="iconfont icon-xiangyou"></text>
							</view>
						</view> -->
					</view>
					<view class="card-vip" v-if="member_style==2 && stu && vip_type==2">
						<view class="left-box">
							<!-- <view class="big">会员可享多项权益</view> -->
							<view v-if="vipStatus == 1" class="small">永久</view>
							<view v-else-if="vipStatus == 3" class="small">会员到期
								{{ userInfo.overdue_time | dateFormat }}
							</view>
							<view v-else-if="vipStatus == -1" class="small">已过期</view>
							<view v-else-if="vipStatus == 2" class="small">未开通会员</view>
						</view>
						<view class="acea-row">
							<navigator v-if="vipStatus == 1" url="/pages/annex/vip_paid/index" hover-class="none"
								class="btn">查看会员权益
							</navigator>
							<navigator v-else url="/pages/annex/vip_paid/index" hover-class="none" class="btn">
								{{ userInfo.overdue_time ? '立即续费' : '立即激活' }}
							</navigator>
							<text class="iconfont icon-xiangyou"></text>
						</view>
					</view>
					<!-- <view class="card-vip on" v-if="member_style==2 && memberStatus && vip_type==1"
						:style="{backgroundImage:'url('+imgHost+'/statics/images/grade01.png'+')'}">
						<view class="left-box">
							<view class="small">{{userInfo.level_status==1?userInfo.vip_name:'激活会员卡 解锁更多权益'}}</view>
						</view>
						<view class="acea-row">
							<navigator
								:url="userInfo.level_status==1?'/pages/annex/vip_grade/index':'/pages/annex/vip_grade_active/index'"
								hover-class="none" class="btn">{{userInfo.level_status==1?'查看会员卡':'去激活'}}</navigator>
							<text class="iconfont icon-xiangyou"></text>
						</view>
					</view> -->
					<view class="num-wrapper"
						:class="[member_style==3?'unNum-wrapper':member_style==2?'Tnum-wrapper':'',((vip_type==2 && stu) || (vip_type==1 && memberStatus))?'':'height']"
						v-if="userInfo.uid">
						<view class="num-item" v-show="userInfo.balance_func_status"
							@click="goMenuPage('/pages/users/user_money/index')">
							<text class="num">{{userInfo.now_money || 0}}</text>
							<view class="txt">余额</view>
						</view>
						<!-- <view class="num-item" @click="goMenuPage('/pages/users/user_coupon/index')">
							<text class="num">{{userInfo.couponCount || 0}}</text>
							<view class="txt">优惠券</view>
						</view> -->
						<!-- <view class="num-item" @click="goMenuPage('/pages/users/user_integral/index')">
							<text class="num">{{userInfo.integral || 0}}</text>
							<view class="txt">积分</view>
						</view> -->
						<view class="num-item" @click="goMenuPage('/pages/users/user_goods_collection/index')">
							<text class="num">{{userInfo.collectCount || 0}}</text>
							<view class="txt">收藏</view>
						</view>
						<view class="num-item" @click="goMenuPage('/pages/users/visit_list/index')">
							<text class="num">{{userInfo.visit_num || 0}}</text>
							<view class="txt">浏览记录</view>
						</view>
					</view>
					<!-- 新人礼物 -->
					<view class="num-wrapper on" v-if="!userInfo.uid">
						<image :src="giftPic" mode="" class="img"></image>
						<view class="text">
							登录即获得<text class="gift">新人大礼包</text>
						</view>
						<view class="btn-login" @click="openAuto">去登录</view>
					</view>
					<!-- 新人专享 -->
					<view class="newcomersCon" :class="newcomer_style==1?'':'on'" v-if="newList.length">
						<view class="newcomers"
							:style="{backgroundImage:'url('+ (newcomer_style==1?imgHost+'/statics/images/new-bg.png':newBg) +')'}">
							<view class="title">
								<view class="tl">
									新人专享
								</view>
								<view class="tr" @click="goNewcomers">
									更多 <text class="iconfont icon-xiangyou"></text>
								</view>
							</view>
							<scroll-view scroll-x="true" class="scroll">
								<view class="scroll-item" v-for="(item,index) in newList" :key="index"
									@click="goDetail(item)">
									<view class="pictrue">
										<image :src='item.image'></image>
										<view class="label">新人价</view>
									</view>
									<view class="money">¥{{item.price}}</view>
								</view>
							</scroll-view>
						</view>
					</view>
					<!-- 订单中心 -->
					<view class="order-wrapper">
						<view class="order-hd flex">
							<view class="left">订单中心</view>
							<navigator class="right flex" hover-class="none" url="/pages/goods/order_list/index"
								open-type="navigate">
								查看全部
								<text class="iconfont icon-xiangyou"></text>
							</navigator>
						</view>
						<view class="order-bd">
							<block v-for="(item,index) in orderMenu" :key="index">
								<navigator class="order-item" hover-class="none" :url="item.url">
									<view class="pic">
										<!-- <image :src="item.img" mode=""></image> -->
										<text class="iconfont" :class="item.img"></text>
										<text class="order-status-num" v-if="item.num > 0">{{ item.num }}</text>
									</view>
									<view class="txt">{{item.title}}</view>
								</navigator>
							</block>
						</view>
					</view>
				</view>
				<!-- 轮播 -->
				<view class="slider-wrapper" v-if="imgUrls.length>0 && my_banner_status">
					<swiper indicator-dots="true" :autoplay="autoplay" :circular="circular" :interval="interval"
						:duration="duration" indicator-color="rgba(255,255,255,0.6)" indicator-active-color="#fff">
						<block v-for="(item,index) in imgUrls" :key="index">
							<swiper-item>
								<navigator @click="goMenuPage(item.url)"
									class='slide-navigator acea-row row-between-wrapper' hover-class='none'>
									<image :src="item.pic" class="slide-image"></image>
								</navigator>
							</swiper-item>
						</block>
					</swiper>
				</view>
				<!-- 会员菜单二 -->
				<view class="menus-list" v-if="menu_status == 2 && MyMenus.length">
					<view class="title">我的服务</view>
					<!-- #ifdef APP-PLUS || H5 -->
					<block v-for="(item,index) in MyMenus" :key="index">
						<view class="item acea-row row-between-wrapper"
							v-if="item.url!='#' && item.url!='/pages/service/index'"
							@click="goMenuPage(item.url, item.name)">
							<image :src="item.pic"></image>
							<view class="text acea-row row-between-wrapper">
								<view>{{item.name}}</view>
								<view class="iconfont icon-xiangyou"></view>
							</view>
						</view>
					</block>
					<!-- #endif -->
					<!-- #ifdef MP -->
					<block v-for="(item,index) in MyMenus" :key="index">
						<view class="item acea-row row-between-wrapper" v-if="item.url!='#'
							&& item.url!='/pages/service/index' 
							&& item.url!='/pages/extension/customer_list/chat' 
							|| (item.url=='/pages/extension/customer_list/chat' && routineContact == 0)"
							@click="goMenuPage(item.url, item.name)">
							<image :src="item.pic"></image>
							<view class="text acea-row row-between-wrapper">
								<view>{{item.name}}</view>
								<view class="iconfont icon-xiangyou"></view>
							</view>
						</view>
					</block>
					<button class="item acea-row row-between-wrapper" open-type='contact' v-if="routineContact == 1">
						<image src="/static/images/contact.png"></image>
						<view class="text acea-row row-between-wrapper">
							<view>联系客服</view>
							<view class="iconfont icon-xiangyou"></view>
						</view>
					</button>
					<!-- #endif -->
					<!-- #ifdef APP-PLUS -->
					<view class="item acea-row row-between-wrapper" hover-class="none"
						@click="goMenuPage('/pages/users/privacy/index')">
						<image src="/static/images/menu.png"></image>
						<view class="text acea-row row-between-wrapper">
							<view>隐私协议</view>
							<view class="iconfont icon-xiangyou"></view>
						</view>
					</view>
					<!-- #endif -->
				</view>
				<!-- 会员菜单一 -->
				<view class="user-menus" style="margin-top: 25rpx;" v-if="menu_status == 1 && MyMenus.length">
					<view class="menu-title">我的服务</view>
					<view class="list-box">
						<!-- #ifdef APP-PLUS || H5 -->
						<block v-for="(item,index) in MyMenus" :key="index">
							<view class="item" v-if="item.url!='#' && item.url!='/pages/service/index'"
								@click="goMenuPage(item.url, item.name)">
								<image :src="item.pic"></image>
								<text>{{item.name}}</text>
							</view>
						</block>
						<!-- #endif -->
						<!-- #ifdef MP -->
						<block v-for="(item,index) in MyMenus" :key="index">
							<view class="item" v-if="item.url!='#' 
								&& item.url!='/pages/service/index' 
								&& item.url!='/pages/extension/customer_list/chat' 
								|| (item.url=='/pages/extension/customer_list/chat' && routineContact == 0)"
								@click="goMenuPage(item.url, item.name)">
								<image :src="item.pic"></image>
								<text>{{item.name}}</text>
							</view>
						</block>
						<button class="item" open-type='contact' v-if="routineContact == 1">
							<image src="/static/images/contact.png"></image>
							<text>联系客服</text>
						</button>
						<!-- #endif -->
						<!-- #ifdef APP-PLUS -->
						<view class="item" hover-class="none"
							@click="goMenuPage('/pages/users/privacy/index?type=privacy')">
							<image src="/static/images/menu.png"></image>
							<text>隐私协议</text>
						</view>
						<!-- #endif -->
					</view>
				</view>
				<view class="user-menus" style="margin-top: 25rpx;" v-if="service_status == 1 && storeMenu.length">
					<view class="menu-title">商家管理</view>
					<view class="list-box">
						<block v-for="(item,index) in storeMenu" :key="index">
							<view class="item" :url="item.url" v-if="item.url!='#' && item.url!='/pages/service/index'"
								@click="goMenuPage(item.url, item.name)">
								<image :src="item.pic"></image>
								<text>{{item.name}}</text>
							</view>
						</block>
					</view>
				</view>
				<view class="menus-list" v-if="service_status == 2 && storeMenu.length">
					<view class="title">商家管理</view>
					<block v-for="(item,index) in storeMenu" :key="index">
						<view class="item acea-row row-between-wrapper" :url="item.url" hover-class="none"
							v-if="item.url!='#' && item.url!='/pages/service/index'"
							@click="goMenuPage(item.url, item.name)">
							<image :src="item.pic"></image>
							<view class="text acea-row row-between-wrapper">
								<view>{{item.name}}</view>
								<view class="iconfont icon-xiangyou"></view>
							</view>
						</view>
					</block>
				</view>
				<!-- <view class="copy_right">
					<template v-if='copyRightText'>
						<image :src="copyRightImg" mode="" class="copyRightImg"></image>
						<view class="copyRightText">
							{{copyRightText}}
						</view>
					</template>
					<image v-else src="/static/images/support.png" alt="" class='support'></image>
				</view> -->
				<view class="uni-p-b-98"></view>
			</scroll-view>
		</view>
		<view class="codePopup" :style="colorStyle" v-show="isCode">
			<view class="header acea-row row-between-wrapper">
				<view class="title" :class="{'on': codeIndex == index,'onLeft':codeIndex == 1}"
					v-for="(item, index) in codeList" :key="index" @click="tapCode(index)">{{item.name}}</view>
			</view>
			<view>
				<view class="acea-row row-center-wrapper">
					<w-barcode :options="config.bar"></w-barcode>
				</view>
				<view class="acea-row row-center-wrapper" style="margin-top: 35rpx;">
					<w-qrcode :options="config.qrc" @generate="hello"></w-qrcode>
				</view>
				<view class="codeNum">{{config.bar.code}}</view>
				<view class="tip">如遇到扫码失败请将屏幕调至最亮重新扫码</view>
			</view>
			<view class="iconfont icon-guanbi2" @click="closeCode"></view>
		</view>
		<view class="mark" v-if="isCode"></view>
		<pageFooter></pageFooter>
		<!-- 店员推广码 extension-->
		<view class="codePopup heg" :style="colorStyle" v-show="isextension">
			<view class="header">
				<view class="title on" style="width: 100%;">店员推广码</view>
			</view>
			<view>
				<view class="acea-row row-center-wrapper" style="margin-top: 25rpx;" @click="hah">
					<w-qrcode id="hah" :options="extension"></w-qrcode>
				</view>
				<view class="tip">如遇到扫码失败请将屏幕调至最亮重新扫码</view>
			</view>
			<view class="iconfont icon-guanbi2" @click="closeCode"></view>
		</view>
		<view class="mark" v-show="isextension"></view>
		<ewcomerPop v-if="isComerGift" :comerGift="comerGift" @comerPop="comerPop"></ewcomerPop>
	</view>
</template>
<script>
	let sysHeight = uni.getSystemInfoSync().statusBarHeight + 'px';
	import {
		storeCardApi
	} from '@/api/store.js';
	import {
		newcomerGift
	} from '@/api/new_store.js';
	import {
		newcomerList
	} from '@/api/api.js';
	import {
		getMenuList,
		getUserInfo,
		setVisit,
		updateUserInfo,
		getRandCode,
		updateWechatInfo
	} from '@/api/user.js';
	import {
		wechatAuthV2,
		silenceAuth
	} from '@/api/public.js'
	import {
		toLogin
	} from '@/libs/login.js';
	import {
		mapState,
		mapGetters
	} from "vuex";
	// #ifdef H5
	import Auth from '@/libs/wechat';
	// #endif
	import {
		HTTP_REQUEST_URL
	} from '@/config/app';
	const app = getApp();
	import ewcomerPop from '@/components/ewcomerPop/index.vue'
	import pageFooter from '@/components/pageFooter/index.vue'
	import dayjs from '@/plugin/dayjs/dayjs.min.js';
	import Routine from '@/libs/routine';
	import colors from '@/mixins/color';
	export default {
		components: {
			pageFooter,
			ewcomerPop
		},
		computed: {
			...mapGetters({
				cartNum: 'cartNum',
				isLogin: 'isLogin'
			})
		},
		filters: {
			coundTime(val) {
				var setTime = val * 1000
				var nowTime = new Date()
				var rest = setTime - nowTime.getTime()
				var day = parseInt(rest / (60 * 60 * 24 * 1000))
				// var hour = parseInt(rest/(60*60*1000)%24) //小时
				return day + '天'
			},
			dateFormat: function(value) {
				return dayjs(value * 1000).format('YYYY-MM-DD');
			}
		},
		mixins: [colors],
		data() {
			return {
				vipStatus: 0,
				stu: false,
				storeMenu: [], // 商家管理
				orderMenu: [{
						img: 'icon-daifukuan',
						title: '待付款',
						url: '/pages/goods/order_list/index?status=0'
					},
					{
						img: 'icon-daifahuo',
						title: '待发货',
						url: '/pages/goods/order_list/index?status=1'
					},
					{
						img: 'icon-daishouhuo',
						title: '待收货',
						url: '/pages/goods/order_list/index?status=2'
					},
					{
						img: 'icon-daipingjia',
						title: '待评价',
						url: '/pages/goods/order_list/index?status=3'
					},
					{
						img: 'icon-a-shouhoutuikuan',
						title: '售后/退款',
						url: '/pages/users/user_return_list/index'
					},
				],
				imgUrls: [],
				autoplay: true,
				circular: true,
				interval: 3000,
				duration: 500,
				isAuto: false, //没有授权的不会自动授权
				isShowAuth: false, //是否隐藏授权
				orderStatusNum: {},
				userInfo: {},
				MyMenus: [],
				sysHeight: sysHeight,
				mpHeight: 0,
				showStatus: 1,
				// #ifdef H5 || MP
				pageHeight: '100%',
				routineContact: 0,
				// #endif
				// #ifdef APP-PLUS
				pageHeight: app.globalData.windowHeight,
				// #endif
				// #ifdef H5
				isWeixin: Auth.isWeixin(),
				//#endif
				footerSee: false,
				member_style: 1,
				my_banner_status: 1,
				menu_status: 1,
				service_status: 1,
				codeList: [{
					name: '会员码'
				}, {
					name: '付款码'
				}],
				codeIndex: 0,
				config: {
					bar: {
						code: '',
						color: ['#000'],
						bgColor: '#FFFFFF', // 背景色
						width: 480, // 宽度
						height: 110 // 高度
					},
					qrc: {
						code: '',
						size: 380, // 二维码大小
						level: 3, //等级 0～4
						bgColor: '#FFFFFF', //二维码背景色 默认白色
						border: {
							color: ['#eee', '#eee'], //边框颜色支持渐变色
							lineWidth: 3, //边框宽度
						},
						// img: '/static/logo.png', //图片
						// iconSize: 40, //二维码图标的大小
						color: ['#333', '#333'], //边框颜色支持渐变色
					}
				},
				isCode: false,
				isextension: false,
				extension: {
					code: "",
					size: 380, // 二维码大小
					level: 3, //等级 0～4
					bgColor: '#FFFFFF', //二维码背景色 默认白色
					border: {
						color: ['#eee', '#eee'], //边框颜色支持渐变色
						lineWidth: 3, //边框宽度
					},
					// img: '/static/logo.png', //图片
					// iconSize: 40, //二维码图标的大小
					color: ['#333', '#333'], //边框颜色支持渐变色
				},
				imgHost: HTTP_REQUEST_URL,
				copyRightText: "",
				copyRightImg: '',
				giftPic: '',
				vip_type: 1,
				newcomer_style: 1,
				newList: [],
				newBg: '',
				comerGift: {},
				isComerGift: false,
				memberStatus: 0
			}
		},
		created() {
			let that = this;
			// #ifdef MP
			// 小程序静默授权
			if (!this.$store.getters.isLogin) {
				Routine.getCode()
					.then(code => {
						Routine.silenceAuth(code).then(res => {
							this.onLoadFun();
						})
					})
					.catch(res => {
						uni.hideLoading();
					});
			}
			// #endif
			// #ifdef H5 || APP-PLUS
			if (that.isLogin == false) {
				toLogin()
			}
			// #endif
			// #ifdef APP-PLUS
			that.$set(that, 'pageHeight', app.globalData.windowHeight);
			// #endif
		},
		async onLoad(option) {
			if (this.isLogin) {
				this.getNewcomerGift();
			}
			// #ifdef H5 
			if (this.isLogin && Auth.isWeixin() && option.code) {
				try {
					let res = await updateWechatInfo({
						code: option.code
					});
					this.userInfo.nickname = res.data.nickname;
					this.userInfo.avatar = res.data.avatar;
					this.userInfo.is_complete = 1;
				} catch (e) {}
			}
			// #endif
			this.getNewList();
			this.colorData();
			let giftList = [
				this.imgHost + '/statics/images/gift01.png',
				this.imgHost + '/statics/images/gift02.png',
				this.imgHost + '/statics/images/gift03.png',
				this.imgHost + '/statics/images/gift04.png',
				this.imgHost + '/statics/images/gift05.png'
			];
			let newBg = [
				this.imgHost + '/statics/images/blue-bg.png',
				this.imgHost + '/statics/images/green-bg.png',
				this.imgHost + '/statics/images/red-bg.png',
				this.imgHost + '/statics/images/pink-bg.png',
				this.imgHost + '/statics/images/orange-bg.png'
			]
			setTimeout(() => {
				switch (this.colorNum) {
					case 1:
						this.giftPic = giftList[2];
						this.newBg = newBg[0];
						break;
					case 2:
						this.giftPic = giftList[1];
						this.newBg = newBg[1];
						break;
					case 3:
						this.giftPic = giftList[4];
						this.newBg = newBg[2];
						break;
					case 4:
						this.giftPic = giftList[0];
						this.newBg = newBg[3];
						break;
					case 5:
						this.giftPic = giftList[3];
						this.newBg = newBg[4];
						break;
					default:
						this.giftPic = giftList[4];
						this.newBg = newBg[2];
						break
				}
			}, 1)
		},
		onReady() {
			let self = this
			// #ifdef MP
			let info = uni.createSelectorQuery().select(".sys-head");
			info.boundingClientRect(function(data) { //data - 各种参数
				self.mpHeight = data.height
			}).exec()
			// #endif
		},
		onShow: function() {
			if (this.cartNum > 0) {
				uni.setTabBarBadge({
					index: 3,
					text: this.cartNum + ''
				})
			} else {
				uni.hideTabBarRedDot({
					index: 3
				})
			}
			this.copyRightText = uni.getStorageSync('copyNameInfo');
			this.copyRightImg = uni.getStorageSync('copyImageInfo');
			uni.removeStorageSync('form_type_cart');
			let that = this;
			// #ifdef APP-PLUS
			uni.getSystemInfo({
				success: function(res) {
					that.pageHeight = res.windowHeight + 'px'
				}
			});
			// #endif
			if (that.isLogin) {
				this.getUserInfo();
				this.getMyMenus();
				this.setVisit();
			};
		},
		methods: {
			goDetail(item) {
				uni.navigateTo({
					url: `/pages/goods_details/index?id=${item.id}&fromPage='newVip'`
				});
			},
			comerPop() {
				this.isComerGift = false;
			},
			getNewcomerGift() {
				if (uni.getStorageSync('newcomerGift')) {
					return this.isComerGift = false;
				}
				newcomerGift().then(res => {
					this.comerGift = res.data;
					if (Object.prototype.toString.call(this.comerGift) == '[object Object]') {
						if (res.data.coupon_count || res.data.product_count || res.data.register_give_money || res
							.data.first_oder_discount || res.data.register_give_integral) {
							uni.setStorageSync('newcomerGift', true);
							this.isComerGift = true;
						}
					}
				}).catch(err => {
					return this.$util.Tips({
						title: err
					});
				})
			},
			getNewList() {
				newcomerList({
					page: 1,
					limit: 6,
					priceOrder: '',
					salesOrder: ''
				}).then(res => {
					this.newList = res.data;
				}).catch(err => {
					return this.$util.Tips({
						title: err
					});
				})
			},
			hah() {
				let that = this
				// #ifdef H5
				var canvas = document.getElementById("hah").getElementsByTagName("canvas")
				var imgURL = canvas[0].toDataURL("image/png")
				var dlLink = document.createElement('a');
				dlLink.download = "店员推广码";
				dlLink.href = imgURL;
				dlLink.dataset.downloadurl = ["image/png", dlLink.download, dlLink.href].join(':');

				document.body.appendChild(dlLink);
				dlLink.click();
				document.body.removeChild(dlLink);
				// #endif
				// #ifdef MP
				// let ctx = uni.createCanvasContext("WQrcode")

				// let ctx = uni.createSelectorQuery().in(this).select("canvas")
				// uni.canvasToTempFilePath({
				// 	canvasId: "WQrcode",
				// 	fileType: 'image/png',
				// 	success: (res) => {
				// 	 // 保存当前绘制推广码
				// 	that.savePic(res.tempFilePath)
				// 	},
				// 	fail: function(err) {
				// 	console.log(err, '推广码生成失败')
				// 	}
				// },that)

				//  ctx.draw(false, uni.canvasToTempFilePath({
				// 			canvasId: 'WQrcode',
				// 			success: function (res) {
				// 			that.savePic(res.tempFilePath)
				// 			},
				// 			fail: function (err) {
				// 				console.log(err, '推广码生成失败')
				// 			}
				// },that))
				// console.log("222222",ctx)
				// #endif
				// #ifdef APP-PLUS
				uni.canvasToTempFilePath({
					canvasId: 'WQrcode',
					success: (res) => {
						uni.hideLoading()
						// 保存当前绘制推广码
						that.savePic(res.tempFilePath)
					},
					fail: function(err) {
						console.log(err, '推广码生成失败')
					}
				})
				// #endif
			},
			//保存推广码到本地
			savePic(filePath) {
				// #ifdef APP-PLUS
				uni.showLoading({
					title: '正在保存'
				});
				uni.saveImageToPhotosAlbum({
					filePath: filePath,
					success: function() {
						uni.showToast({
							title: '推广码保存成功～'
						});
					},
					fail: function(e) {
						console.log(e, '推广码保存失败')
					},
					complete: function() {
						uni.hideLoading()
					}
				});
				// #endif
			},
			hello(res) {
				// console.log(321,res)

			},
			// 前往新人专享
			goNewcomers() {
				uni.navigateTo({
					url: '/pages/store/newcomers/index'
				})
			},

			getCode() {
				getRandCode().then(res => {
					let code = res.data.code;
					this.config.bar.code = code;
					this.config.qrc.code = code;
				}).catch(err => {
					return this.$util.Tips(err);
				})
			},
			tapQrCode() {
				this.isCode = true;
				this.codeIndex = 0;
				this.$nextTick(function() {
					let code = this.userInfo.bar_code;
					this.config.bar.code = code;
					this.config.qrc.code = code;
				})
			},
			closeCode() {
				this.isCode = false
				this.isextension = false
			},
			tapCode(index) {
				this.codeIndex = index;
				if (index == 1) {
					this.getCode();
				} else {
					let code = this.userInfo.bar_code;
					this.config.bar.code = code;
					this.config.qrc.code = code;
				}
			},
			getWechatuserinfo() {
				//#ifdef H5
				Auth.isWeixin() && Auth.toAuth('snsapi_userinfo', '/pages/user/index');
				//#endif
			},
			getRoutineUserInfo(e) {
				updateUserInfo({
					userInfo: e.detail.userInfo
				}).then(res => {
					this.getUserInfo();
					return this.$util.Tips('更新用户信息成功');
				}).catch(err => {
					return this.$util.Tips(err);
				})
			},
			// 记录会员访问
			setVisit() {
				setVisit({
					url: '/pages/user/index'
				}).then(res => {})
			},
			// 打开授权
			openAuto() {
				toLogin();
			},
			// 授权回调
			onLoadFun() {
				this.getUserInfo();
				this.getMyMenus();
				this.setVisit();
			},
			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.stu = res.data.svip_open
					that.memberStatus = parseInt(res.data.member_func_status)
					that.vipStatus = res.data.vip_status
					that.$store.commit("SETUID", res.data.uid);
					that.$store.commit("UPDATE_USERINFO", res.data);
					that.orderMenu.forEach((item, index) => {
						switch (item.title) {
							case '待付款':
								item.num = res.data.orderStatusNum.unpaid_count
								break
							case '待发货':
								item.num = res.data.orderStatusNum.unshipped_count
								break
							case '待收货':
								item.num = res.data.orderStatusNum.received_count
								break
							case '待评价':
								item.num = res.data.orderStatusNum.evaluated_count
								break
							case '售后/退款':
								item.num = res.data.orderStatusNum.refunding_count
								break
						}
					})
				});
			},
			//小程序授权api替换 getUserInfo
			getUserProfile() {
				uni.showLoading({
					title: '获取中'
				});
				let self = this;
				Routine.getUserProfile()
					.then(res => {
						Routine.getCode()
							.then(code => {
								let userInfo = res.userInfo;
								userInfo.code = code;
								userInfo.spread_spid = app.globalData.spid; //获取推广人ID
								userInfo.spread_code = app.globalData.code; //获取推广人分享二维码ID
								Routine.authUserInfo(userInfo)
									.then(res => {
										if (res.data.key !== undefined && res.data.key) {
											uni.hideLoading();
											self.authKey = res.data.key;
											self.isPhoneBox = true;
										} else {
											uni.hideLoading();
											let time = res.data.expires_time - self.$Cache.time();
											self.$store.commit('LOGIN', {
												token: res.data.token,
												time: time
											});
											this.getUserInfo()
										}
									})
									.catch(res => {
										uni.hideLoading();
										uni.showToast({
											title: res.msg,
											icon: 'none',
											duration: 2000
										});
									});
							})
							.catch(res => {
								uni.hideLoading();
							});
					})
					.catch(res => {
						uni.hideLoading();
					});
			},
			/**
			 * 
			 * 获取个人中心图标
			 */
			switchTab(order) {
				this.orderMenu.forEach((item, index) => {
					switch (item.title) {
						case '待付款':
							item.img = order.dfk
							break
						case '待发货':
							item.img = order.dfh
							break
						case '待收货':
							item.img = order.dsh
							break
						case '待评价':
							item.img = order.dpj
							break
						case '售后/退款':
							item.img = order.sh
							break
					}
				})
			},
			getMyMenus: function() {
				let that = this;
				// if (this.MyMenus.length) return;
				getMenuList().then(res => {
					let storeMenu = []
					let myMenu = []
					res.data.routine_my_menus.forEach((el, index, arr) => {
						if (el.type == '2') {
							storeMenu.push(el)
						} else {
							myMenu.push(el)
						}
					})
					this.member_style = Number(res.data.diy_data.status)
					this.my_banner_status = res.data.diy_data.my_banner_status
					this.menu_status = res.data.diy_data.menu_status
					this.service_status = res.data.diy_data.service_status
					this.vip_type = res.data.diy_data.vip_type;
					this.newcomer_style = res.data.diy_data.newcomer_style;
					let order01 = {
						dfk: 'icon-daifukuan',
						dfh: 'icon-daifahuo',
						dsh: 'icon-daishouhuo',
						dpj: 'icon-daipingjia',
						sh: 'icon-a-shouhoutuikuan'
					}
					let order02 = {
						dfk: 'icon-daifukuan-lan',
						dfh: 'icon-daifahuo-lan',
						dsh: 'icon-daishouhuo-lan',
						dpj: 'icon-daipingjia-lan',
						sh: 'icon-shouhou-tuikuan-lan'
					}
					let order03 = {
						dfk: 'icon-daifukuan-ju',
						dfh: 'icon-daifahuo-ju',
						dsh: 'icon-daishouhuo-ju',
						dpj: 'icon-daipingjia-ju',
						sh: 'icon-shouhou-tuikuan-ju'
					}
					let order04 = {
						dfk: 'icon-daifukuan-fen',
						dfh: 'icon-daifahuo-fen',
						dsh: 'icon-daishouhuo-fen',
						dpj: 'icon-daipingjia-fen',
						sh: 'icon-a-shouhoutuikuan-fen'
					}
					let order05 = {
						dfk: 'icon-daifukuan-lv',
						dfh: 'icon-daifahuo-lv',
						dsh: 'icon-daishouhuo-lv',
						dpj: 'icon-daipingjia-lv',
						sh: 'icon-shouhou-tuikuan-lv'
					}
					switch (res.data.diy_data.order_status) {
						case 1:
							this.switchTab(order01)
							break
						case 2:
							this.switchTab(order02)
							break
						case 3:
							this.switchTab(order03)
							break
						case 4:
							this.switchTab(order04)
							break
						case 5:
							this.switchTab(order05)
							break
					}
					that.$set(that, 'MyMenus', myMenu);
					that.$set(that, 'storeMenu', storeMenu);
					this.imgUrls = res.data.routine_my_banner
					this.routineContact = Number(res.data.routine_contact_type)
				});
			},
			// 编辑页面
			goEdit() {
				if (this.isLogin == false) {
					toLogin();
				} else {
					uni.navigateTo({
						url: '/pages/users/user_info/index'
					})
				}

			},
			// 签到
			goSignIn() {
				uni.navigateTo({
					url: '/pages/users/user_sgin/index'
				})
			},
			goMenuPage(url, name) {
				if (this.isLogin) {
					if (url == '/pages/extension/customer_list/chat' || url == 'https://chat.crmeb.net/chat/mobile') {
						this.$util.getCustomer(this.userInfo)
					} else {
						if (url.indexOf('http') === -1) {
							// #ifdef H5
							if (name && name === '订单核销') {
								return window.location.href = `${location.origin}${url}`
							}
							// #endif
							// #ifdef MP
							if (url != '#' && url == '/pages/users/user_info/index') {
								uni.openSetting({
									success: function(res) {}
								});
							}
							// #endif
							if (url == '/pages/store_spread/index') {
								storeCardApi().then(res => {
									this.isextension = true
									this.$nextTick(function() {
										this.extension.code = res.data.url
									})
								}).catch(err => {
									uni.hideLoading()
									this.$util.Tips({
										title: err
									})
								})
							}
							uni.navigateTo({
								url: url
							})
						} else {
							uni.navigateTo({
								url: `/pages/annex/web_view/index?url=${url}`
							});
						}
					}
				} else {
					// #ifdef MP
					this.openAuto()
					// #endif
				}
			}
		}
	}
</script>

<style lang="scss">
	.style-add {
		flex: 1;
		overflow: hidden;
	}

	.height-add {
		height: 100%;
	}

	.display-add {
		height: 100%;
		display: flex;
		align-items: center;
	}

	page,
	body {
		height: 100%;
	}

	.heg {
		height: 670rpx !important;
	}

	.mark {
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		background: rgba(0, 0, 0, 0.5);
		z-index: 30;
	}

	.height {
		margin-top: -84rpx !important;
	}

	.menus-list {
		width: 690rpx;
		background-color: #fff;
		border-radius: 14rpx;
		margin: 25rpx auto 0 auto;

		.title {
			font-weight: 600;
			font-size: 30rpx;
			color: #333;
			padding: 30rpx 30rpx 10rpx 30rpx;
		}

		.item {
			margin-left: 30rpx;
			font-size: 30rpx;
			color: #333;

			image {
				width: 42rpx;
				height: 42rpx;
				display: block;
			}

			.text {
				width: 590rpx;
				border-bottom: 1rpx solid #EEEEEE;
				padding: 28rpx 30rpx 28rpx 0;

				.iconfont {
					font-size: 20rpx;
					color: #8A8A8A;
				}
			}
		}
	}

	.num-wrapper {
		background-color: #fff;
		z-index: 29;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 22rpx;
		color: #333;
		margin: 30rpx 30rpx 25rpx 30rpx;
		border-radius: 16rpx;
		height: 160rpx;

		&.on {
			height: 128rpx;
			margin-top: -68rpx;

			.gift {
				color: var(--view-theme);
				margin-left: 10rpx;
				font-weight: bold;
			}
		}

		.img {
			margin-left: 38rpx;
			width: 76rpx;
			height: 68rpx;
		}

		.text {
			font-size: 28rpx;
			font-weight: 400;
			color: #333333;
			margin-left: -60rpx;
		}

		.btn-login {
			width: 144rpx;
			height: 56rpx;
			// background: linear-gradient(270deg, #FF7931 0%, #E93323 100%);
			background-color: var(--view-theme);
			border-radius: 28rpx;
			text-align: center;
			line-height: 56rpx;
			margin-right: 32rpx;
			font-size: 28rpx;
			font-weight: 500;
			color: #FFFFFF;

		}

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

			&~.num-item {
				position: relative;

				&:before {
					content: '';
					position: absolute;
					width: 1rpx;
					height: 28rpx;
					top: 50%;
					margin-top: -14rpx;
					background-color: rgba(255, 255, 255, 0.4);
					left: 0;
				}
			}

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

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

	// 新人专享
	.newcomersCon {
		background-color: var(--view-theme);
		width: 690rpx;
		height: 296rpx;
		margin: 0 30rpx;
		border-radius: 16rpx;

		&.on {
			background-color: #fff;

			.newcomers {
				.title {
					.tl {
						color: #333;
					}

					.tr {
						width: unset;
						color: #666666;
						background: unset;
					}
				}

				.scroll {
					.scroll-item {
						background-color: var(--view-minorColorT);
					}
				}
			}
		}

		.newcomers {
			padding: 24rpx 30rpx;
			width: 100%;
			height: 100%;
			background-repeat: no-repeat;
			background-size: 100% 100%;

			.title {
				display: flex;
				justify-content: space-between;

				.tl {
					font-size: 30rpx;
					font-weight: 600;
					color: #FFFFFF;
				}

				.tr {
					width: 90rpx;
					height: 36rpx;
					background: linear-gradient(135deg, #FFCA52 0%, #FE960F 100%);
					border-radius: 18rpx;
					font-size: 24rpx;
					text-align: center;
					line-height: 36rpx;
					font-weight: 400;
					color: #FFFFFF;

					.icon-xiangyou {
						font-size: 16rpx;
					}
				}
			}

			.scroll {
				width: 690rpx;
				margin-top: 20rpx;
				white-space: nowrap;
				padding-right: 60rpx;

				.scroll-item {
					display: inline-block;
					width: 162rpx;
					height: 194rpx;
					background-color: #fff;
					border-radius: 12rpx;
					margin-right: 10rpx;
					padding: 12rpx;

					.pictrue {
						width: 138rpx;
						height: 138rpx;
						position: relative;

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

						.label {
							width: 98rpx;
							height: 32rpx;
							background: var(--view-theme);
							border-radius: 16rpx;
							color: #FFFFFF;
							font-size: 24rpx;
							text-align: center;
							line-height: 32rpx;
							position: absolute;
							bottom: 2rpx;
							left: 50%;
							margin-left: -49rpx;
						}
					}

					.money {
						font-size: 24rpx;
						color: var(--view-priceColor);
						margin-top: 6rpx;
					}
				}
			}
		}
	}

	.Tnum-wrapper {
		margin: -34rpx 30rpx 25rpx 30rpx;
	}

	.unNum-wrapper {
		margin: 0 30rpx 25rpx 30rpx;
	}

	.unBg {
		background-color: unset !important;

		.user-info {
			.info {
				.name {
					color: #333333 !important;
					font-weight: 600;
				}

				.num {
					color: #333 !important;

					.num-txt {
						height: 38rpx;
						background-color: rgba(51, 51, 51, 0.13);
						padding: 0 12rpx;
						border-radius: 16rpx;
					}
				}
			}
		}

		.qrCode {
			color: #333 !important;
		}

		.message {
			.iconfont {
				color: #333 !important;
			}

			.num {
				color: #fff !important;
				background-color: var(--view-theme) !important;
			}
		}

		.setting {
			.iconfont {
				color: #333 !important;
			}
		}
	}

	.cardVipB {
		background-color: #343A48;
		width: 100%;
		height: 124rpx;
		border-radius: 16rpx 16rpx 0 0;
		padding: 22rpx 30rpx 0 30rpx;
		margin-top: 16px;

		&.on {
			width: 690rpx;
			height: 130rpx;
			background-repeat: no-repeat;
			background-size: 100% 100%;
			color: #fff;
			margin-left: auto;
			margin-right: auto;
			padding: 22rpx 30rpx 0 90rpx;

			.iconfont {
				font-size: 24rpx;
				margin-left: 6rpx;
			}
		}

		.left-box {
			.small {
				color: #F8D5A8;
				font-size: 28rpx;
				margin-left: 18rpx;
			}

			.pictrue {
				width: 40rpx;
				height: 45rpx;

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

		.btn {
			color: #BBBBBB;
			font-size: 26rpx;

			&.on {
				color: #fff;
			}
		}

		.icon-xiangyou {
			margin-top: 6rpx;
		}
	}

	.cardVipA {
		position: absolute;
		background-repeat: no-repeat;
		background-size: 100% 100%;
		width: 750rpx;
		height: 84rpx;
		bottom: -2rpx;
		left: 0;
		padding: 0 56rpx 0 135rpx;

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

			&.on {
				color: #fff;
			}
		}

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

			&.on {
				color: #fff;
			}
		}

		.iconfont {
			font-size: 20rpx;
			margin: 4rpx 0 0 4rpx;

			&.on {
				color: #fff;
				margin-top: 0;
			}
		}
	}

	.new-users {
		display: flex;
		flex-direction: column;
		height: 100%;

		.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: url("~@/static/images/user-sys.png") no-repeat;
				background: var(--view-theme);
				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: 36rpx;
				color: #FFFFFF;
			}
		}

		.head {
			// background: #fff;

			.user-card {
				position: relative;
				width: 100%;
				height: 220rpx;
				margin: 0 auto;
				padding: 35rpx 28rpx;
				background-size: 100% auto;
				background-color: var(--view-theme);

				.user-info {
					z-index: 20;
					position: relative;
					display: flex;

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

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

					.live {
						width: 28rpx;
						height: 28rpx;
						margin-left: 20rpx;
					}

					.bntImg {
						width: 120rpx;
						height: 120rpx;
						border-radius: 50%;
						text-align: center;
						line-height: 120rpx;
						background-color: unset;
						position: relative;

						.avatarName {
							font-size: 16rpx;
							color: #fff;
							text-align: center;
							background-color: rgba(0, 0, 0, 0.6);
							height: 37rpx;
							line-height: 37rpx;
							position: absolute;
							bottom: 0;
							left: 0;
							width: 100%;
						}
					}

					.avatar-box {
						position: relative;
						display: flex;
						align-items: center;
						justify-content: center;
						width: 120rpx;
						height: 120rpx;
						border-radius: 50%;

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

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

					}

					.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 {
								margin-left: 10rpx;

								image {
									width: 78rpx;
									height: 30rpx;
									display: block;
								}
							}
						}

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

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

				.qrCode {
					color: #fff;
					margin-top: 16rpx !important;
					font-size: 38rpx;
					margin-right: 36rpx !important;
				}

				.message {
					align-self: flex-start;
					position: relative;
					margin-top: 15rpx;
					margin-right: 20rpx;

					.num {
						position: absolute;
						top: -8rpx;
						left: 18rpx;
						padding: 0 6rpx;
						height: 28rpx;
						border-radius: 12rpx;
						background-color: #fff;
						font-size: 18rpx;
						line-height: 28rpx;
						text-align: center;
						color: var(--view-theme);
					}

					.iconfont {
						font-size: 40rpx;
						color: #fff;
					}
				}

				.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;
				}
			}

			.order-wrapper {
				background: #fff;
				margin: 0 30rpx;
				border-radius: 16rpx;
				position: relative;

				.order-hd {
					justify-content: space-between;
					padding: 30rpx 20rpx 10rpx;
					margin-top: 25rpx;
					font-size: 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;
					padding: 0 0;

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

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

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

							image {
								width: 58rpx;
								height: 48rpx;
							}
						}

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

		.slider-wrapper {
			margin: 20rpx 30rpx;
			height: 130rpx;

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

			image {
				width: 100%;
				height: 130rpx;
				border-radius: 16rpx;
			}
		}

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

			.menu-title {
				padding: 30rpx 30rpx 40rpx;
				font-size: 30rpx;
				color: #282828;
				font-weight: bold;
			}

			.list-box {
				display: flex;
				flex-wrap: wrap;
				padding: 0;
			}

			.item {
				position: relative;
				display: flex;
				align-items: center;
				justify-content: space-between;
				flex-direction: column;
				width: 25%;
				margin-bottom: 47rpx;
				font-size: 26rpx;
				color: #333333;

				image {
					width: 52rpx;
					height: 52rpx;
					margin-bottom: 18rpx;
				}


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

			button {
				font-size: 28rpx;
			}
		}

		.phone {
			color: #fff;
			background-color: #CCC;
			border-radius: 15px;
			width: max-content;
			padding: 0 10px;
		}

		.order-status-num {
			min-width: 12rpx;
			background-color: #fff;
			color: var(--view-theme);
			border-radius: 15px;
			position: absolute;
			right: -14rpx;
			top: -15rpx;
			font-size: 20rpx;
			padding: 0 8rpx;
			border: 1px solid var(--view-theme);
		}

		.support {
			width: 219rpx;
			height: 74rpx;
			margin: 54rpx auto;
			display: block;
		}

		.copyRightImg {
			width: 219rpx;
			height: 74rpx;
			margin: 16rpx auto;
			display: block;
		}

		.copy_right {
			text-align: center;
			color: #ccc;
			font-size: 22rpx;
			margin-top: 40rpx;

			.copyRightText {
				margin-top: 0rpx;
				color: #ccc;
				font-size: 20rpx;
				margin-bottom: 20rpx;
			}
		}
	}

	.card-vip {
		display: flex;
		justify-content: space-between;
		position: relative;
		width: 690rpx;
		height: 125rpx;
		margin: -72rpx auto 0;
		background: url('~@/static/images/user_vip.png');
		background-size: cover;
		padding: 28rpx 30rpx 0 92rpx;

		&.on {
			.left-box {
				color: #fff;
			}

			.btn {
				color: #fff;
			}

			.iconfont {
				color: #fff;
			}
		}

		.left-box {
			font-size: 28rpx;
			color: #AE5A2A;

			.big {
				font-size: 28rpx;
			}

			.small {
				opacity: 0.8;
			}
		}

		.btn {
			color: #AE5A2A;
			font-weight: 400;
			font-size: 26rpx;
		}

		.iconfont {
			font-size: 20rpx;
			margin: 4rpx 0 0 4rpx;
			color: #AE5A2A;
		}
	}

	.setting {
		margin-top: 15rpx;
		margin-left: 15rpx;
		color: #fff;

		.iconfont {
			font-size: 40rpx;
		}
	}

	.new-users {
		padding-bottom: 0;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
	}
</style>