groupon-wx/pages/user/index.vue

<template>
	<view class="new-users" :style="{ height: pageHeight }">
		<view class="top" style="background: rgb(254,245,246); color: black;">
			<view class="sys-head">
				<view class="sys-bar" :style="{ height: sysHeight }"></view>
				<view class="sys-title">个人中心</view>
				<view class="bg" ></view>
			</view>
		</view>
		<view class="mid" style="flex:1;overflow: hidden;padding: 30rpx;padding-top: 0; background: rgb(249,249,249);">
			<scroll-view scroll-y="true" style="height: 100%;">

				<view class="head" v-if="currentRole === 'leader'">
					<view class="user-card" :class="member_style == 3 ? 'unBg' : ''">
						<view class="bg"></view>
						<view class="user-info">
							<view>
								<!-- 注释这个是加的bnt -->
								<!-- #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">{{ $t('获取头像') }}</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">{{ $t('获取头像') }}</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 && userInfo.svip_open">
										<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 && userInfo.svip_open">
										<image src="/static/images/headwear.png"></image>
									</view>
								</view>
								<!-- #endif -->
							</view>
							<view class="info">
								<!-- #ifdef MP -->
								<view class="name" v-if="!userInfo.id" @click="openAuto"
									style="height: 100%; display: flex; align-items: center;">
									{{ $t('请点击授权') }}
								</view>
								<!-- #endif -->
								<!-- #ifdef H5 -->
								<view class="name" v-if="!userInfo.id && isWeixin" @click="openAuto"
									style="height: 100%; display: flex; align-items: center;">
									{{ $t('请点击授权') }}
								</view>
								<!-- #endif -->
								<view class="name" v-if="userInfo.id">
									{{ userInfo.name }}
									<image class="live" :src="userInfo.vip_icon" v-if="userInfo.vip_icon"></image>
									<view class="vip" v-if="userInfo.is_money_level > 0 && userInfo.svip_open">
										<image src="/static/images/svip.png"></image>
									</view>
								</view>
								<view class="num" v-if="userInfo.username" @click="goEdit()">
									<view class="num-txt">
										<view v-if="currentRole === 'leader'" class="leader">团长</view>
									</view>
									<!-- <view class="icon">
										<image src="/static/images/edit.png" mode=""></image>
									</view> -->
								</view>
								<!-- <view class="phone" v-if="!userInfo.username && isLogin" @tap="bindPhone">
									{{$t('绑定手机号')}}</view> -->
							</view>
							<view v-if="userInfo.livingHall === 1" class="message" style="    white-space: nowrap;">
								<text v-if="currentRole === 'leader'" style="	color: #75BE00;margin-right: 20rpx;">切换团员</text>
								<u-switch v-model="roleSwitch" activeColor="#75BE00" size="16" @change="changeRole"></u-switch>
							</view>

						</view>

					</view>
					<view class="group-buying-data">

						<view class="group-title">
							团购数据
						</view>

						<view class="group-content">

							<view class="group-content-l">

								<view class="content-num">
									{{grouponStatis.lastNewViewTotal}}
								</view>
								<view class="content-info">
									最新团购浏览总量 (次)
								</view>

							</view>
							<view class="group-content-r">


								<view class="content-num">
									{{grouponStatis.lastNewMake}}
								</view>
								<view class="content-info">
									最新团购成交总额 (元)
								</view>
							</view>
						</view>

					</view>
					<view class="group-buying-btn">

						<view @click="goGroupbuying('pickupVerification')" class="image-text_21" style="margin-right: 30rpx;">
							<image class="icon_10" referrerpolicy="no-referrer"
								src="http://www.gzzzyd.com/groupon/regiment/提货管理@2x(2).png" />
						</view>
						<view @click="goGroupbuying('publish_group')" class="image-text_21">
							<image class="icon_1" referrerpolicy="no-referrer"
								src="http://www.gzzzyd.com/groupon/regiment/提货管理@2x(1).png" />
						</view>
					</view>

					<view class="order-wrapper" :class="userInfo.svip_open ? '' : 'height'">
						<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.src" mode=""></image>
									</view>
									<view class="txt">{{ $t(item.title) }}</view>
								</navigator>
							</block>
						</view>
					</view>

					<view class="tool_list">
						<u-cell-group>

							<navigator url="/pages/columnGoods/HotNewGoods/feedback" hover-class="none">
								<u-cell isLink>
								<view slot="title" class="u-slot-title">
									<image src="http://www.gzzzyd.com/groupon/regiment/编组 6@2x.png" mode=""></image>
									<text class="u-cell-text">建议与反馈</text>
								</view>

							</u-cell>
							</navigator>

							<u-cell isLink>
								<view slot="title" class="u-slot-title" @click="goMyMessage">
									<image src="http://www.gzzzyd.com/groupon/regiment/编组 8@2x.png" mode=""></image>
									<text class="u-cell-text">我的消息</text>
								</view>

							</u-cell>
							<navigator url="/pages/groupbuying/aboutUs/index" hover-class="none">
							<u-cell isLink>
								<view slot="title" class="u-slot-title">
									<image src="http://www.gzzzyd.com/groupon/regiment/编组 8@2x(1).png" mode=""></image>
									<text class="u-cell-text">关于我们</text>
								</view>
							</u-cell>
						</navigator>
							<navigator url="/pages/users/user_info/index" hover-class="none">
								<u-cell isLink>

									<view slot="title" class="u-slot-title">
										<image src="http://www.gzzzyd.com/groupon/regiment/编组 18@2x.png" mode=""></image>
										<text class="u-cell-text">设置</text>
									</view>

								</u-cell>
							</navigator>

						</u-cell-group>
					</view>
					<view class="footer">
						<button @click="outLogin">
							退出登录
						</button>
					</view>
				</view>

				<view class="head" v-if="currentRole === 'employees'">
					<view class="user-card" :class="member_style == 3 ? 'unBg' : ''">
						<view class="bg"></view>
						<view class="user-info">
							<view>
								<!-- 注释这个是加的bnt -->
								<!-- #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">{{ $t('获取头像') }}</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">{{ $t('获取头像') }}</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 && userInfo.svip_open">
										<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 && userInfo.svip_open">
										<image src="/static/images/headwear.png"></image>
									</view>
								</view>
								<!-- #endif -->
							</view>
							<view class="info">
								<!-- #ifdef MP -->
								<view class="name" v-if="!userInfo.id" @click="openAuto"
									style="height: 100%; display: flex; align-items: center;">
									{{ $t('请点击授权') }}
								</view>
								<!-- #endif -->
								<!-- #ifdef H5 -->
								<view class="name" v-if="!userInfo.id && isWeixin" @click="openAuto"
									style="height: 100%; display: flex; align-items: center;">
									{{ $t('请点击授权') }}
								</view>
								<!-- #endif -->
								<view class="name" v-if="userInfo.id">
									{{ userInfo.name }}
									<image class="live" :src="userInfo.vip_icon" v-if="userInfo.vip_icon"></image>
									<view class="vip" v-if="userInfo.is_money_level > 0 && userInfo.svip_open">
										<image src="/static/images/svip.png"></image>
									</view>
								</view>
								<view class="num" v-if="userInfo.username" @click="goEdit()">
									<view class="num-txt">
										<view class="employees">团员</view>
									</view>
									<!-- <view class="icon">
										<image src="/static/images/edit.png" mode=""></image>
									</view> -->
								</view>
								<!-- <view class="phone" v-if="!userInfo.username && isLogin" @tap="bindPhone">
									{{$t('绑定手机号')}}</view> -->
							</view>
							<view  v-if="userInfo.livingHall === 1" class="message" style="    white-space: nowrap;">
								<text style="	color: rgb(174, 33, 56);margin-right: 20rpx;">切换团长</text>
								<u-switch v-model="roleSwitch" activeColor="#75BE00" size="16" @change="changeRole"></u-switch>
							</view>

						</view>

					</view>
					<navigator url="/pages/groupbuying/promotion/index" hover-class="none">

						<view class="group-buying-data2">
							<view class="group-title-2">
								<view>
									累计分享奖励(元) &nbsp; ￥{{statistics.allAccounts || 0}}
								</view>
								<view>
									查看详情 >
								</view>
							</view>
						</view>
					</navigator>

					<view class="my_order">
						<u-cell  value="全部订单" isLink>
							<view slot="title" class="u-slot-title">
								<text class="u-cell-text">我的订单</text>
							</view>

						</u-cell>
					</view>


					<view class="order-wrapper origin" >
						<view class="order-bd">
							<block v-for="(item, index) in orderMenuOrigin" :key="index">
								<view class="order-item" hover-class="none" @click="goRouter(item)">
									<view class="pic">
										<!-- <image :src="item.img" mode=""></image> -->
										<text class="iconfont" :class="item.img"></text>
									</view>
									<view class="txt">{{ item.title}}</view>
								</view>
							</block>
						</view>
					</view>
					<view class="tool_list">
						<u-cell-group>


							<navigator url="/pages/columnGoods/HotNewGoods/feedback" hover-class="none">
								<u-cell isLink>
								<view slot="title" class="u-slot-title">
									<image src="http://www.gzzzyd.com/groupon/regiment/编组 6@2x.png" mode=""></image>
									<text class="u-cell-text">建议与反馈</text>
								</view>

							</u-cell>
							</navigator>

							<u-cell isLink>
								<view slot="title" class="u-slot-title" @click="goMyMessage">
									<image src="http://www.gzzzyd.com/groupon/regiment/编组 8@2x.png" mode=""></image>
									<text class="u-cell-text">我的消息</text>
								</view>

							</u-cell>
							<navigator url="/pages/groupbuying/aboutUs/index" hover-class="none">
							<u-cell isLink>
								<view slot="title" class="u-slot-title">
									<image src="http://www.gzzzyd.com/groupon/regiment/编组 8@2x(1).png" mode=""></image>
									<text class="u-cell-text">关于我们</text>
								</view>
							</u-cell>
						</navigator>
							<navigator url="/pages/users/user_info/index" hover-class="none">
								<u-cell isLink>

									<view slot="title" class="u-slot-title">
										<image src="http://www.gzzzyd.com/groupon/regiment/编组 18@2x.png" mode=""></image>
										<text class="u-cell-text">设置</text>
									</view>

								</u-cell>
							</navigator>
						</u-cell-group>
					</view>

					<view class="footer">
						<button @click="outLogin">
							退出登录
						</button>
					</view>
					<my-swiper :type=4 ></my-swiper>

				</view>


			</scroll-view>
		</view>

	</view>
</template>
<script>
let sysHeight = uni.getSystemInfoSync().statusBarHeight + 'px';
import {
	getMenuList,
	getUserInfo,
	getLogout,
	setVisit,
	updateUserInfo
} from '@/api/user.js';

import {commissionStatistics, grouponMngStatis} from '@/api/groupon.js'

import {
	wechatAuthV2,
	getNavigation,
	silenceAuth
} from '@/api/public.js'
import {
	toLogin
} from '@/libs/login.js';
import {
	mapState,
	mapGetters,
	mapMutations
} from "vuex";

// #ifdef H5
import Auth from '@/libs/wechat';
// #endif
const app = getApp();
import dayjs from '@/plugin/dayjs/dayjs.min.js';
import Routine from '@/libs/routine';
import colors from '@/mixins/color';
import {
	getCustomer
} from '@/utils/index.js'
export default {
	components: {
	},
	computed: {
		...mapGetters({
			cartNum: 'cartNum',
			isLogin: 'isLogin',
			newCurrentRole:'newCurrentRole'
		})
	},
	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 + this.$t('day')
		},
		dateFormat: function (value) {
			return dayjs(value * 1000).format('YYYY-MM-DD');
		}
	},
	mixins: [colors],
	data () {
		return {
			statistics:{},
			grouponStatis:{},
			roleSwitch: false,
			currentRole: 'employees',
			storeMenu: [], // 商家管理
			orderMenu: [{
				img: 'icon-daifukuan',
				src: 'http://www.gzzzyd.com/groupon/regiment/扫码_scan@2x.png',
				title: '到货核销',
				url: '/pages/groupbuying/arrival_verification_list/index?status=1'
			},
			// {
			// 	img: 'icon-daifahuo',
			// 	src: 'http://www.gzzzyd.com/groupon/regiment/01_自提点@2x.png',
			// 	title: '自提点管理',
			// 	url: '/pages/goods/order_list/index?status=2'
			// },
			{
				img: 'icon-daishouhuo',
				src: 'http://www.gzzzyd.com/groupon/regiment/团购@2x.png',

				title: '团购管理',
				url: '/pages/groupbuying/groupbuying_order_list/index?status=3'
			},
			{
				img: 'icon-daipingjia',
				src: 'http://www.gzzzyd.com/groupon/regiment/订单管理@2x.png',
				title: '订单管理',
				url: '/pages/goods/leader_order_list/index?status=4'
			}
			],
			orderMenuOrigin: [{
				img: 'icon-daifukuan',
				title: '待付款',
				url: '/pages/order/index?status=1'
			},
			{
				img: 'icon-daifahuo',
				title: '待提货',
				url: '/pages/order/index?status=2'
			},
			{
				img: 'icon-daipingjia',
				title: '已完成',
				url: '/pages/order/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,
			newData: {},
			activeRouter: '',
			// #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,
			is_diy: uni.getStorageSync('is_diy'),
			copyRightPic: '/static/images/support.png', //版权图片
			loginType: 'h5', //app.globalData.loginType
		}
	},
	onLoad (option) {

		let that = this;




	},
	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.$store.getters.isLogin) {
			this.commissionStatistics();
		}
		this.currentRole=this.$store.getters.newCurrentRole;
		console.log(this.newCurrentRole);
		this.grouponMngStatis();
		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();
		};
		this.getCopyRight();
	},
	onPullDownRefresh () {
		this.onLoadFun();
	},
	methods: {
		...mapMutations(["setNewCurrentRole"]),

		goMyMessage(){
			console.log("++++++++++++++++++++++++")
			uni.switchTab({
				url: '/pages/message/message'
			});
		},

		commissionStatistics(){
			commissionStatistics().then(res => {
				this.statistics =res.data
			})
		},

		grouponMngStatis(){
			grouponMngStatis().then(res => {
				this.grouponStatis = res.data
			})
		},
					/**
			 * 退出登录
			 *
			 */
		outLogin: function() {
				let that = this;
				if (that.loginType == 'h5') {
					uni.showModal({
						title: that.$t(`提示`),
						content: that.$t(`确认退出登录`),
						success: function(res) {
							if (res.confirm) {
								getLogout()
									.then(res => {
										// uni.clearStorage()
										that.$store.commit("LOGOUT");
										uni.reLaunch({
											url: '/pages/index/index'
										})
									})
									.catch(err => {});
							} else if (res.cancel) {}
						}
					});
				}
			},
		changeRole () {
			this.currentRole = this.roleSwitch ? 'leader' : 'employees'
			this.setNewCurrentRole(this.currentRole);
		},
		// 发布团购
		goGroupbuying (url) {
			if (this.isLogin == false) {
				toLogin();
			} else {
				uni.navigateTo({
					url: `/pages/groupbuying/${url}/index`
				})
			}
		},
		getWechatuserinfo () {
			//#ifdef H5
			Auth.isWeixin() && Auth.toAuth('snsapi_userinfo', '/pages/user/index');
			//#endif
		},

		// 记录会员访问
		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.$store.commit("SETUID", res.data.userId);
				// 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
				// 	}
				// })
				uni.stopPullDownRefresh();
			});
		},
		//小程序授权api替换 getUserInfo
		getUserProfile () {
			toLogin();
		},
		/**
		 *
		 * 获取个人中心图标
		 */
		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;
			uni.request({
				url: 'api/mock/menu',
				success: res => {
					let storeMenu = []
					let myMenu = []
					res.data.routine_my_menus.forEach((el, index, arr) => {
						if (el.url == '/pages/admin/order/index' || el.url ==
							'/pages/admin/order_cancellation/index' || el.name ==
							this.$t(`客服接待`)) {
							storeMenu.push(el)
						} else {
							myMenu.push(el)
						}
					})
					this.member_style = Number(res.data.diy_data.value)
					this.my_banner_status = res.data.diy_data.my_banner_status
					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?currentRole=' + this.currentRole
				})
			}

		},


		goRouter (item) {
			var pages = getCurrentPages();
			var page = (pages[pages.length - 1]).$page.fullPath;
			if (item.url == page) return
			getApp().globalData.switchId = item.title
			uni.switchTab({
				url: item.url,
				fail (err) {
					uni.redirectTo({
						url: item.url
					})
				}
			})
		},
		getCopyRight () {
			const copyRight = uni.getStorageSync('copyRight')
			if (copyRight.copyrightImage) {
				this.copyRightPic = copyRight.copyrightImage
			}
		}
	}
}
</script>

<style lang="scss">
page,
body {
	height: 100%;
}

.height {}

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

	.num-wrapper {
		color: #333 !important;
		font-weight: 600;

		.num-item {
			.txt {
				color: rgba(51, 51, 51, 0.7) !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;

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

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

.cardVipA {
	position: absolute;
	// background: url('~@/static/images/member.png') 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;
	}

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

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

.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: var(--view-theme);
			background-size: 100% auto;
			background-position: left bottom;
		}

		.sys-title {
			z-index: 10;
			position: relative;
			height: 43px;
			text-align: left;
			line-height: 43px;
			font-size: 36rpx;
			color: rgba(17, 17, 17, 1);
			font-weight: bolder;
			padding-left: 36rpx;
		}
	}

	.head {
		// background: #fff;

		.user-card {
			position: relative;
			width: 100%;
			height: 180rpx;
			margin: 0 auto;
			background-image: linear-gradient(#FDF5F6, #FBF7F7);
			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: 150rpx;
					height: 150rpx;
					border-radius: 50%;

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

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

				}

				.info {
					max-width: 50%;
					flex: 1;
					display: flex;
					flex-direction: column;
					justify-content: center;
					margin-left: 20rpx;
					padding: 15rpx 0;

					.name {
						display: flex;
						align-items: center;
						font-size: 32rpx;
						margin-top: 30rpx;
						font-weight: bolder;
						color: #333333;

						.vip {
							margin-left: 10rpx;

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

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

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

			.message {
				align-self: flex-start;
				position: relative;
				display: flex;
				margin-right: 20rpx;
				height: 150rpx;
   			 align-items: center;
				.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;
				}
			}

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

				.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: 42rpx;
						font-weight: bold;
					}

					.txt {
						margin-top: 8rpx;
						font-size: 26rpx;
						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;
			}
		}

		.group-buying-data2 {
			position: relative;
			width: 100%;
			height: 140rpx;
			padding: 40rpx;
			margin: 0 auto;
			background-image: url('http://www.gzzzyd.com/groupon/regiment/提货管理@2x.png');
			background-size: 100% auto;
			background-color: var(--view-theme);

			.group-title-2 {
				display: flex;
				justify-content: space-between;
				font-size: 32rpx;
				font-weight: 500;
				color: #B22338;
				line-height: 44rpx;
				height: 44rpx;
			}
		}

		.group-buying-data {
			position: relative;
			width: 100%;
			height: 240rpx;
			padding: 40rpx;
			margin: 0 auto;
			background-image: url('http://www.gzzzyd.com/groupon/regiment/提货管理@2x.png');
			background-size: 100% auto;
			background-color: var(--view-theme);

			.group-title {
				font-size: 32rpx;
				font-weight: 500;
				color: #B22338;
				line-height: 44rpx;
				height: 44rpx;
			}



			.group-content {
				display: flex;

				.group-content-l {

					text-align: center;
					flex: 1;
					border-color: #333333;
					border-right: 1px solid dashed;
				}

				.group-content-r {
					text-align: center;
					flex: 1
				}

				.content-num {
					margin-top: 20rpx;
					height: 48rpx;
					font-size: 40rpx;
					font-weight: bold;
					color: #B22338;
					line-height: 48rpx;
				}

				.content-info {
					margin-top: 20rpx;
					text-align: center;
					width: 100%;
					height: 36rpx;
					font-size: 24rpx;
					font-weight: 400;
					color: #CF7986;
					line-height: 36rpx;
				}

			}
		}

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

			.order-hd {
				justify-content: space-between;
				padding: 30rpx 20rpx 10rpx 30rpx;
				margin-top: 25rpx;
				font-size: 30rpx;
				color: #282828;

				.left {
					font-weight: bold;
				}

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

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

			.order-bd {
				display: flex;
				padding: 0 0;

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

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

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

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

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

	.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: 32%;
			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;
	}
}

.card-vip {
	display: flex;
	align-items: center;
	justify-content: space-between;
	position: relative;
	width: 690rpx;
	height: 134rpx;
	margin: -72rpx auto 0;
	// background: url('~@/static/images/user_vip.png');
	background-size: cover;
	padding-left: 118rpx;
	padding-right: 34rpx;

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

		.big {
			font-size: 28rpx;
		}

		.small {
			opacity: 0.8;
			margin-top: 10rpx;
		}
	}

	.btn {
		height: 52rpx;
		line-height: 52rpx;
		padding: 0 10rpx;
		text-align: center;
		background: #fff;
		border-radius: 28rpx;
		font-size: 26rpx;
		color: #AE5A2A;
	}

}

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

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

.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/

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


		&.active {}
	}
}

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

.group-buying-btn {

	margin-top: 20rpx;
	display: flex;
	width: 100%;
	height: 110rpx;

	.image-text_21 {
		flex: 1;

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





.icon_1 {
	width: 14px;
	height: 14px;
	margin: 3px 0 3px 0;
}

.text-group_1 {
	overflow-wrap: break-word;
	color: rgba(178, 35, 56, 1);
	font-size: 14px;
	font-family: PingFangSC-Semibold;
	font-weight: 600;
	text-align: left;
	white-space: nowrap;
	line-height: 20px;
}


.image-text_22 {
	width: 78px;
}

.icon_10 {
	width: 14px;
	height: 14px;
	margin: 3px 0 3px 0;
}

.text-group_8 {
	overflow-wrap: break-word;
	color: rgba(178, 35, 56, 1);
	font-size: 14px;
	font-family: PingFangSC-Semibold;
	font-weight: 600;
	text-align: left;
	white-space: nowrap;
	line-height: 20px;
}


.leader {
	width: 96rpx;
	height: 40rpx;
	background: #F1F8E5;
	color: #75BE00;
	border-radius: 22rpx;
	text-align: center;
	border: 2rpx solid #75BE00;
}

.employees {
	width: 96rpx;
	height: 40rpx;
	background: rgb(247, 233, 235);
	border-radius: 22rpx;
	color: rgb(174, 33, 56);
	text-align: center;
	border: 2rpx solid rgb(174, 33, 56);
}

.tool_list,
.footer {
	background: #fff;
	border-radius: 16rpx;
	margin-top: 20rpx;
}

.footer {
	height: 100rpx;

	button {
		height: 100%;
		font-size: 28rpx;
		font-weight: 400;
		color: #999999;
		line-height: 100rpx;
	}
}

/deep/ .tool_list .u-line,
.my_order .u-line {
	display: none !important;
}

.my_order{
}
.u-slot-title {

	text {
		vertical-align: text-bottom;
		line-height: 60rpx;
	}

	image {

		margin-right: 20rpx;
		transform: translateY(10rpx);
		width: 60rpx;
		height: 60rpx;

	}
}
.origin{
	margin-top: 0 !important;
}
</style>