QianNiaoShop/pages/index/index.vue

<template>
	<view class="home">
		<view class="top_view">
			<u-navbar :title-bold="true" :border-bottom="false"
				:background="{ background: `rgba(14, 9, 21, ${scroll_top / 100})` }" :is-back="false" title=" ">
				<view class="title">{{ enterprise.enterpriseName || '工作台' }}</view>
			</u-navbar>
			<!-- <uniStatusBar></uniStatusBar> -->
			<!-- <view class="title">{{ enterprise.enterpriseName || '--' }}</view> -->
			<view class="user_img clearfix">
				<view class="img" @click="setYg()">
					<image :src="enterprise.logo" mode="aspectFill"></image>
					<span class="img_title">{{ userInfo.name }}</span>
				</view>
				<view class="Icon">
					<view class="btn-li" @click="goPage('/pages/enterprise/index', 'reLaunch')">
						<u-icon name="qiehuan-" custom-prefix="custom-icon" size="36" color="#4076D6"></u-icon>
					</view>
					<view class="btn-li" @click="overview('reset')">
						<u-icon name="shuaxin" size="36" color="#4076D6" custom-prefix="custom-icon"></u-icon>
					</view>
					<view class="btn-li" @click="goPage('/pages/index/WxCode')">
						<u-icon name="erweima" size="32" custom-prefix="custom-icon" color="#4076D6"></u-icon>
					</view>
					<view class="btn-li" @click="goPage('/pagesT/notice/notice')">
						<u-icon name="bell" size="36" color="#4076D6"></u-icon>
					</view>
					<view class="btn-li" @click="logout">
						<u-icon name="zhuxiao" custom-prefix="custom-icon" size="34" color="#4076D6"></u-icon>
					</view>
				</view>
			</view>
			<!-- <view class="top_money clearfix" v-if="$accessCheck($Access.overview)">
				<view class="float_left" style="font-weight: 400;">
					<u-icon name="jinbi" size="36" color="#ffffff" margin-left="12" label-color="#ffffff" label-size="24" label="应收账款" custom-prefix="custom-icon"></u-icon>
				</view>
				<view class="float_right">
					<text class="rmb-icon">¥</text>
					{{ $utils.formatNub(now.totalShouldReceive) }}
				</view>
			</view> -->
		</view>
		<!-- <view class="top_bottom" v-if="$accessCheck($Access.overview)">
			<view class="money-li">
				<view>
					<u-icon name="jinbi" size="36" color="#f69844" margin-left="12" label-color="#BABBC6" label-size="24" label="应付账款" custom-prefix="custom-icon"></u-icon>
				</view>
				<view class="num">
					¥
					<text class="written">{{ $utils.formatNub(now.totalShouldPay) }}</text>
				</view>
			</view>
			<view class="money-li">
				<navigator open-type="switchTab" url="/pages/customer/CustomerList">
					<view>
						<u-icon
							name="customer"
							size="36"
							color="#7a15ff"
							margin-left="12"
							label-color="#BABBC6"
							label-size="24"
							label="当前客户数"
							custom-prefix="custom-icon"
						></u-icon>

						<view class="num">
							<text class="written">{{ Number(now.customerTotalNum) || 0 }}</text>
						</view>
					</view>
				</navigator>
			</view>
			<view class="money-li">
				<view>
					<u-icon
						name="shangpin1"
						size="36"
						color="#3f64d9"
						margin-left="12"
						label-color="#BABBC6"
						label-size="24"
						label="库存商品数"
						custom-prefix="custom-icon"
					></u-icon>
				</view>
				<view class="num">
					<text class="written">{{ Number(now.numberOfProductsInStock) || 0 }}</text>
				</view>
			</view>
			<view class="money-li">
				<view>
					<u-icon name="jine" size="36" color="#f54957" margin-left="12" label-color="#BABBC6" label-size="24" label="库存总金额" custom-prefix="custom-icon"></u-icon>
				</view>
				<view class="num">
					¥
					<text class="written">{{ $utils.formatNub(now.totalMoneyOfInventory) }}</text>
				</view>
			</view>
		</view> -->
		<!-- 内容 -->
		<view class="content" >
			<!-- 工作台 -->
			<view class="content_main" style="margin-top: 0;" v-if="roleType == 2">
				<view class="content_top clearfix"
					style="background: linear-gradient(270deg, #FDFFFE 0%, #EAFEEE 100%);">
					<image src="../../static/img/ic-work.png" class="img"></image>
					<text class="title-text">工作台</text>
					<!-- <view class="edit-btn float_right" @click="goPage('/pages/app/index')">
						<u-icon name="edit-pen-fill" color="#4076D6" label-color="#4076D6" size="28" label="编辑"
							label-size="28"></u-icon>
					</view> -->
				</view>
				<view class="cont">
					<swiper class="swiper" indicator-color="#B8C0C8" indicator-active-color="#4076D6" :autoplay="false"
						:interval="2000" :duration="500">
						<swiper-item v-for="(item, index) in nav_list_yg" :key="index">
							<view class="app-ul">
								<block v-for="(app, appi) in item" :key="appi">
									<view class="app-li" @click="goPage(app.url)"
										v-if="$accessCheck($Access[app.access])">
										<view class="icon-view" :style="{ background: app.color }"><text
												:class="[app.icon]" class="custom-icon"></text></view>
										<view class="label ellipsis">{{ app.label }}</view>
									</view>
								</block>
							</view>
						</swiper-item>
					</swiper>
				</view>
			</view>
			<view class="content_main" style="margin-top: 0;" v-if="roleType != 2">
				<view class="content_top clearfix"
					style="background: linear-gradient(270deg, #FDFFFE 0%, #EAFEEE 100%);">
					<image src="../../static/img/ic-work.png" class="img"></image>
					<text class="title-text">工作台</text>
					<!-- <view class="edit-btn float_right" @click="goPage('/pages/app/index')">
						<u-icon name="edit-pen-fill" color="#4076D6" label-color="#4076D6" size="28" label="编辑"
							label-size="28"></u-icon>
					</view> -->
				</view>
				<view class="cont">
					<swiper class="swiper" indicator-color="#B8C0C8" indicator-active-color="#4076D6" :autoplay="false"
						:interval="2000" :duration="500">
						<swiper-item v-for="(item, index) in nav_list" :key="index">
							<view class="app-ul">
								<block v-for="(app, appi) in item" :key="appi">
									<view class="app-li" @click="goPage(app.url)"
										v-if="$accessCheck($Access[app.access])">
										<view class="icon-view" :style="{ background: app.color }"><text
												:class="[app.icon]" class="custom-icon"></text></view>
										<view class="label ellipsis">{{ app.label }}</view>
									</view>
								</block>
							</view>
						</swiper-item>
					</swiper>
				</view>
			</view>
			<view class="content_main" v-if="$accessCheck($Access.overview) && roleType != 2">
				<view class="content_top">
					<image src="../../static/img/ic-jy.png" class="img" mode="aspectFill"></image>
					<text class="title-text">经营概况</text>
				</view>
				<!-- 经营概况 -->
				<view class="content_text">
					<ul class="content-ul">
						<li class="li-list">
							<view class="order_money">下单金额</view>
							<view class="num">{{ businessOverview.orderTotalMoney }}</view>
							<!-- 	<view class='txt'>同比<span style='margin-left: 3rpx;color: #2CB244;'>+10%</span><span>
										<image src="../../static/img/ic-sh.png" style="width: 16rpx;height: 16rpx;">
										</image>
									</span></view> -->
							<!-- <view class="time">
								昨日
								<span style="margin-left: 4rpx;">13409.00</span>
							</view> -->
						</li>
						<li class="li-list">
							<view class="order_money">营业金额</view>
							<view class="num">{{ businessOverview.orderConfirmedMoney }}</view>
							<!-- 	<view class='txt'>同比<span style='margin-left: 8rpx;color: #FA6400;'>+10%</span><span>
										<image src="../../static/img/ic-xd.png" style="width: 16rpx;height: 16rpx;">
										</image>
									</span></view> -->
							<!-- <view class="time">
								昨日
								<span style="margin-left: 4rpx;">13409.00</span>
							</view> -->
						</li>
						<li class="li-list">
							<view class="order_money">今日毛利</view>
							<view class="num">{{ businessOverview.todayGrossProfit }}</view>
							<!-- <view class='txt'>同比<span style='margin-left: 3rpx;color: #2CB244;'>+10%</span><span>
										<image src="../../static/img/ic-sh.png" style="width: 16rpx;height: 16rpx;">
										</image>
									</span></view> -->
							<!-- <view class="time">
								昨日
								<span style="margin-left: 4rpx;">13409.00</span>
							</view> -->
						</li>
						<li class="li-list bottom-li">
							<view class="order_money">今日收款</view>
							<view class="num">{{ businessOverview.todayReceivedMoney }}</view>
							<!-- <view class='txt'>同比<span style='margin-left: 3rpx;color: #2CB244;'>+10%</span><span>
										<image src="../../static/img/ic-sh.png" style="width: 16rpx;height: 16rpx;">
										</image>
									</span></view> -->
							<!-- <view class="time">
								昨日
								<span style="margin-left: 4rpx;">13409.00</span>
							</view> -->
						</li>
						<li class="li-list bottom-li">
							<view class="order_money">今日新增客户数</view>
							<view class="num">{{ businessOverview.todayNewCustomerNum }}</view>
							<!-- <view class='txt'>同比<span style='margin-left: 3rpx;color: #2CB244;'>+10%</span><span>
										<image src="../../static/img/ic-sh.png" style="width: 16rpx;height: 16rpx;">
										</image>
									</span></view> -->
							<!-- <view class="time">
								昨日
								<span style="margin-left: 4rpx;">13409.00</span>
							</view> -->
						</li>
					</ul>
				</view>
			</view>
			<!-- 	订单概况 -->
			<view class="content_main" v-if="$accessCheck($Access.overview) && roleType != 2">
				<view class="content_top clearfix"
					style="background: linear-gradient(270deg, #FFFFFF 0%, #FDF6E8 100%); ">
					<view class="float_left">
						<image src="../../static/img/ic-jyh3.png" class="img" mode="aspectFill"></image>
						<text class="title-text">订单概况</text>
					</view>
					<!-- <view class="float_right" style="color: #B8C0C8;">选择店铺</view> -->
				</view>
				<view class="content_text">
					<ul class="content-ul">
						<li class="li-list">
							<view class="order_money">今日订单</view>
							<view class="num">{{ businessOverview.todayConfirmedOrderNum }}</view>
							<!-- 	<view class='txt'>同比<span style='margin-left: 3rpx;color: #2CB244;'>+10%</span><span>
										<image src="../../static/img/ic-sh.png" style="width: 16rpx;height: 16rpx;">
										</image>
									</span></view> -->
							<!-- <view class="time">
								昨日
								<span style="margin-left: 4rpx;">13409.00</span>
							</view> -->
						</li>
						<li class="li-list">
							<view class="order_money">下单客户</view>
							<view class="num">{{ businessOverview.todayConfirmedOrderCustomerNum }}</view>
							<!-- 	<view class='txt'>同比<span style='margin-left: 8rpx;color: #FA6400;'>+10%</span><span>
										<image src="../../static/img/ic-xd.png" style="width: 16rpx;height: 16rpx;">
										</image>
									</span></view> -->
							<!-- <view class="time">
								昨日
								<span style="margin-left: 4rpx;">13409.00</span>
							</view> -->
						</li>
						<li class="li-list">
							<view class="order_money">今日客单价</view>
							<view class="num">{{ businessOverview.customerAverageMoney }}</view>
							<!-- <view class='txt'>同比<span style='margin-left: 3rpx;color: #2CB244;'>+10%</span><span>
										<image src="../../static/img/ic-sh.png" style="width: 16rpx;height: 16rpx;">
										</image>
									</span></view> -->
							<!-- <view class="time">
								昨日
								<span style="margin-left: 4rpx;">13409.00</span>
							</view> -->
						</li>
						<li class="li-list bottom-li">
							<view class="order_money">未出库订单</view>
							<view class="num">{{ businessOverview.orderNumOfNotOutOfStock }}</view>
							<!-- <view class='txt'>同比<span style='margin-left: 3rpx;color: #2CB244;'>+10%</span><span>
										<image src="../../static/img/ic-sh.png" style="width: 16rpx;height: 16rpx;">
										</image>
									</span></view> -->
							<!-- <view class="time">
								昨日
								<span style="margin-left: 4rpx;">13409.00</span>
							</view> -->
						</li>
						<li class="li-list bottom-li">
							<view class="order_money">今日取消订单</view>
							<view class="num">{{ businessOverview.todayCanceledOrder }}</view>
							<!-- <view class='txt'>同比<span style='margin-left: 3rpx;color: #2CB244;'>+10%</span><span>
										<image src="../../static/img/ic-sh.png" style="width: 16rpx;height: 16rpx;">
										</image>
									</span></view> -->
							<!-- <view class="time">
								昨日
								<span style="margin-left: 4rpx;">13409.00</span>
							</view> -->
						</li>
					</ul>
				</view>
			</view>
			<!-- 近7日交易统计图 -->
			<view class="content_main" v-if="$accessCheck($Access.overview) && roleType != 2">
				<view class="content_top" style="background: linear-gradient(270deg, #FDFFFF 0%, #EAFAFE 100%);">
					<image src="../../static/img/ic-jyh2.png" class="img" style="vertical-align: middle;"></image>
					<text class="title-text">近7日交易趋势</text>
				</view>
				<view class="charts-box">
					<qiun-data-charts type="area" :chartData="chartData" :echartsH5="true" :echartsApp="true"
						background="none" :animation="false" />
				</view>
			</view>
			<!-- tab -->
			<view class="content_main" v-if="$accessCheck($Access.overview) && roleType != 2">
				<view class="content_top tabs-ul">
					<ul class="ul_tag">
						<li v-for="(item, index) in tag" :key="index" @click="changeTag(item.value)" class="ul_tag_item"
							:class="[item.value === rank_on ? 'hover' : '']">
							{{ item.label }}
						</li>
					</ul>
				</view>
				<view class="content_bottom">
					<view class="bottom_top clearfix">
						<view class="float_left">
							<text class="sale" @click="changeSel(1)"
								:class="[ranking_sel === 1 ? 'show-on' : '']">销额</text>
							<text
								style="width: 1rpx;height: 24rpx;display: inline-block;border-left: 1rpx solid #ECF0F7;"></text>
							<text class="sale_num" @click="changeSel(2)"
								:class="[ranking_sel === 2 ? 'show-on' : '']">销量</text>
						</view>
						<view v-if="false" class="float_right" @click="goPage('/pagesT/shop/selShop')">
							<u-icon name="arrow-down-fill" color="#B8C0C8" margin-right="20" label-size="28rpx"
								label-color="#B8C0C8" size="14" label="选择店铺" label-pos="left"></u-icon>
						</view>
					</view>
					<view style="margin-top:40rpx">
						<ul class="progress-ul" v-if="rank_on === 1">
							<li class="clearfix progress-li" v-for="(item, index) in ranking.categoryRanking"
								:key="index">
								<view class="float_left label ellipsis">{{ item.categoryName }}</view>
								<view class="float_left line">
									<u-line-progress active-color="#4076D6" :percent="item.percent"
										:show-percent="false" height="16prx" width="423prx" :round="true">
									</u-line-progress>
								</view>
								<view class="float_right num">{{ item.numberOrMoney }}</view>
							</li>
						</ul>
						<ul class="progress-ul" v-if="rank_on === 2">
							<li class="clearfix progress-li" v-for="(item, index) in ranking.goodsRanking" :key="index">
								<view class="float_left label ellipsis">{{ item.goodsName || '未设置' }}</view>
								<view class="float_left line">
									<u-line-progress active-color="#4076D6" :percent="item.percent"
										:show-percent="false" height="16prx" width="423prx" :round="true">
									</u-line-progress>
								</view>
								<view class="float_right num">{{ item.numberOrMoney }}</view>
							</li>
						</ul>
						<ul class="progress-ul" v-if="rank_on === 3">
							<li class="clearfix progress-li" v-for="(item, index) in ranking.customerRanking"
								:key="index">
								<view style="width: 450rpx;border: 0;" class="float_left label ellipsis">
									{{ item.customerName }}
								</view>
								<view style="width: 200rpx;text-align: left;" class="float_right num">
									{{ item.numberOrMoney }}
								</view>
							</li>
						</ul>
						<ul class="progress-ul" v-if="rank_on === 4">
							<li class="clearfix progress-li ellipsis" v-for="(item, index) in ranking.supplierRanking"
								:key="index">
								<view style="width: 450rpx;border: 0;" class="float_left label">{{ item.supplierName }}
								</view>
								<view style="width: 200rpx;text-align: left;" class="float_right num">
									{{ item.numberOrMoney }}
								</view>
							</li>
						</ul>
					</view>
				</view>
			</view>
			<!-- 员工订单 -->
			<view class="ygdd" v-if="ygYyList.length > 0">
				<view class="dd-tit">
					<view class="tit-left">
						<view class="sx">

						</view>
						<view class="">
							我的订单
						</view>
					</view>
					<view class="tit-right" @click="goPage('/pagesS/order/allorder')">
						全部订单
						<image src="../../static/img/down-right-w.png" mode=""></image>
					</view>
				</view>
				<view class="dd-wrap" v-for="yyitem in ygYyList" @click="goPage('/pagesS/order/orderinfo?id=' + yyitem.id)">
					<view class="dd-id-status">
						<view class="dd-stata">
							{{yyitem.status == 1 ? '已完成': '待服务'}}
						</view>
						<view class="dd-id">
							{{yyitem.order_id}}
						</view>
						<view class="dd-status">
							已预约
						</view>
					</view>
					<view class="dd-info" style="margin-top: 20rpx;">
						客户名称<text>{{yyitem.customer}}</text>
					</view>
					<view class="dd-info">
						下单时间<text>{{$utils.formatDate(yyitem.createTime)}}</text>
					</view>
					<view class="dd-info">
						预约时间<text class="chs" style="color:#FF5600;">{{$utils.formatDate(yyitem.time)}}</text>
					</view>
					<view class="dd-btm">
						<view class="btm-price">
							订单金额： <text>￥{{yyitem.to_price}}</text>
						</view>
						<view class="btm-btn" @click.stop="goCall(yyitem.customer_mobile)">
							联系客户
						</view>
					</view>
					<view class="add-dd" @click.stop="goPage('/pagesS/order/addorder?id=' + yyitem.id)" v-if="yyitem.status == 0">
						<image src="../../static/img/add-dd.png" mode=""></image>
						<view class="">
							添加项目
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-popup v-model="noticePop" border-radius="18" mode="center" height="905" :custom-style="{
				background: 'rgba(0,0,0,0)'
			}">
			<view class="mag-view">
				<view class="mag-top">
					<image class="notice-i" src="../../static/img/notice-i.png" mode=""></image>
				</view>
				<view class="msg-cont">
					<image class="msg-yun" src="../../static/img/notice-bg.png" mode=""></image>
					<view class="mag-tit">{{ notice_data.title }}</view>
					<scroll-view class="mag-main" scroll-y>{{ notice_data.content }}</scroll-view>
				</view>
				<view class="confirm-btn primary-btn-pain" @click="noticePop = false">我知道了</view>
			</view>
		</u-popup>
		<!-- 底部tabbar -->
		<Tabbar v-model="tabbar_current"></Tabbar>
	</view>
</template>

<script>
	import {
		mapActions
	} from 'vuex';
	import uniStatusBar from '../../components/uni-status-bar.vue';
	export default {
		data() {
			return {
				tabbar_current: 0,
				notice_data: {
					title: '',
					content: ''
				},
				noticePop: false,
				shopData: '',
				ranking: [],
				now: {}, //
				type: true,
				businessOverview: {},
				active: false,
				rank_on: 1,
				list: ['快销品', '包装食品', '饼干糕点', '保健品', '营养保健品', '速冻面店', '办公器材', '美容化妆'],
				tag: [{
						value: 1,
						label: '类目排行',
						active: true
					},
					{
						value: 2,
						label: '商品排行',
						active: false
					},
					{
						value: 3,
						label: '客户排行',
						active: false
					},
					{
						value: 4,
						label: '供应商排行',
						active: false
					}
				],
				chartData: {
					categories: [],
					series: []
				},
				tabs_current: 0,
				tabs_list: [{
						name: '订单金额'
					},
					{
						name: '客户统计'
					},
					{
						name: '资金统计'
					},
					{
						name: '订单数'
					}
				],
				ranking_sel: 1,
				nav_list_yg: [
					[{
							url: '/pagesT/customer/StaffList',
							label: '销售排行',
							icon: 'custom-icon-paihangbang',
							color: '#f29611',
							access: 'salesRanking'
						},
						{
							url: '/pagesS/yg/dkdetail?type=yg',
							label: '考勤记录',
							icon: 'custom-icon-liulanjilu-tianchong',
							color: '#7747EE',
							access: 'salesRanking'
						},
						{
							url: '/pagesS/yg/gqdetail',
							label: '股权管理',
							icon: 'custom-icon-group_fill',
							color: '#4076D6',
							access: 'OrderAdd'
						},
						{
							url: '/pagesS/yg/yjjl',
							label: '业绩奖励',
							icon: 'custom-icon-xiaoshouyuce',
							color: '#5c6aff',
							access: 'OrderAdd'
						},
						{
							// url: '/pagesS/yg/gztx',
							url: '/pagesS/yg/gzdetail?type=yg',
							label: '工资提现',
							icon: 'custom-icon-mingxi',
							color: '#5c6aff',
							access: 'OrderAdd'
						},
						{
							url: '/pagesS/yg/ygdetail?type=yg',
							label: '我的评价',
							icon: 'custom-icon-quehuoshangpinshu',
							color: '#5c6aff',
							access: 'OrderAdd'
						},
						{
							url: '/pagesS/yg/myteam',
							label: '我的转介绍',
							icon: 'custom-icon-tiaobodanguanli',
							color: '#7747EE',
							access: 'OrderAdd'
						}
					]
				],
				nav_list: [
					[{
							url: '/pagesT/customer/StaffList',
							label: '销售排行',
							icon: 'custom-icon-paihangbang',
							color: '#f29611',
							access: 'salesRanking'
						},
						{
							url: '/pagesT/customer/selCustomert',
							label: '客户拜访',
							icon: 'custom-icon-baifang',
							color: '#5c6aff',
							access: 'CustomerListvisitedLogs'
						},
						{
							url: '/pagesS/goods/xhplist',
							label: '消耗品管理',
							icon: 'custom-icon-shangpin2',
							color: '#f29611',
							access: 'CustomerListvisitedLogs'
						},
						{
							url: '/pagesS/goods/valetbuy',
							label: '代客预约',
							icon: 'custom-icon-tuikuan',
							color: '#e8443c',
							access: 'CustomerListvisitedLogs'
						},
						{
							url: '/pagesS/yg/dklist',
							label: '员工打卡',
							icon: 'custom-icon-liulanjilu-tianchong',
							color: '#7747EE',
							access: 'CustomerListvisitedLogs'
						},
						{
							url: '/pagesS/yg/yglist?type=yg',
							label: '门店员工',
							icon: 'custom-icon-quehuoshangpinshu',
							color: '#5c6aff',
							access: 'CustomerListvisitedLogs'
						},
						{
							url: '/pagesS/yg/yglist?type=gz',
							label: '工资表',
							icon: 'custom-icon-yue',
							color: '#7747EE',
							access: 'CustomerListvisitedLogs'
						},
						{
							url: '/pages/order/OrderAdd',
							label: '代客下单',
							icon: 'custom-icon-shoukuandanguanli',
							color: '#5c6aff',
							access: 'OrderAdd'
						}
					]
				],
				scroll_top: 0,
				ygYyList: [],
				roleType: 1,
			};
		},
		onPageScroll(e) {
			this.scroll_top = e.scrollTop;
		},
		components: {
			uniStatusBar
		},
		computed: {
			hasLogin() {
				return this.$store.state.hasLogin;
			},
			userInfo() {
				return this.$store.state.userInfo;
			},
			enterprise() {
				return this.$store.state.enterprise;
			}
		},
		watch: {
			shopData(val) {}
		},
		async onLoad() {
			// this.noticePop=true
			if (!this.hasLogin) {
				this.logout();
				return;
			}
			await this.overview();
			await this.getupStatusAnnouncementInfo();
			await this.getBasicSetup();
		},
		async onShow() {
			this.roleType = uni.getStorageSync('roleType')
			if(this.roleType == 2) {
				this.getYgYyList()
			}
			// await this.getCommonAppInfo();
			
		},
		async onPullDownRefresh() {
			await this.overview();
			await this.getupStatusAnnouncementInfo();
			await this.getBasicSetup();
		},
		onShareAppMessage(res) {},
		methods: {
			setYg() {
				let roleType = uni.getStorageSync('roleType')
				if(roleType == 2) {
					this.goPage('/pagesS/yg/setInfo')
				}
			},
			goCall(phone) {
				console.log(phone,'打电话');
				uni.makePhoneCall({
					phoneNumber: phone
				})
			},
			getYgYyList() {
				this.$u.api.getYgYyList({
					"page": 1, //分页页码，数字类型
					"pageSize": 3,
					"name": "", //搜索条件
					"type": ''
				}).then(({
					data
				}) => {
					console.log(data, '员工订单')
					this.ygYyList = data
				})
			},
			...mapActions({
				logout: 'logout'
			}),
			setChartData(timeData, orderMoney, goodsNum, orderNum) {
				this.chartData = {
					categories: timeData,
					series: [{
							name: '金额',
							data: orderMoney,
							// pointShape: 'circle',
							legendShape: 'line'
						},
						{
							name: '商品数量',
							data: goodsNum,
							// pointShape: 'circle',
							legendShape: 'line'
						},
						{
							name: '订单数量',
							data: orderNum,
							// pointShape: 'circle',
							legendShape: 'line'
						}
					]
				};
			},
			changeTag(val) {
				this.rank_on = val;
			},
			changeSel(val) {
				this.ranking_sel = val;
				this.overview();
			},
			async overview(isReset) {
				if (isReset) {
					uni.showLoading({
						title: '加载中...'
					});
				}
				await this.$u.api
					.overview({
						ranking: this.ranking_sel, // "1销量排行 2销额排行",
						businessOverviewShopId: '', // "经营概况按店铺筛选：为空则筛选全店",
						categoryRankingShopId: '', // "类目排行按店铺筛选：为空则筛选全店",
						goodsRankingShopId: '', // "商品排行按店铺筛选：为空则筛选全店",
						supplierRankingShopId: '' // 供应商排行按店铺筛选：为空则筛选全店"
					})
					.then(res => {
						uni.stopPullDownRefresh();
						uni.hideLoading();
						this.businessOverview = res.data.businessOverview;
						this.now = res.data.aggregateStatistics;
						this.ranking = res.data.ranking;
						const timeData = [];
						const goodsNumData = [];
						const orderMoneyData = [];
						const orderNumData = [];
						this.$nextTick(() => {
							res.data.chartData.forEach(value => {
								const arr = value.date.split('-');
								timeData.push(arr[1] + '-' + arr[2]);
								goodsNumData.push(Number(value.goodsNum));
								orderMoneyData.push(Number(value.orderMoney));
								orderNumData.push(Number(value.orderNum));
							});
							this.setChartData(timeData, orderMoneyData, goodsNumData, orderNumData);
						});
					})
					.catch(err => {
						uni.hideLoading();
						uni.stopPullDownRefresh();
					});
			},
			async getupStatusAnnouncementInfo() {
				await this.$u.api.getupStatusAnnouncementInfo().then(res => {
					if (res.data.upStatus === 5) {
						this.noticePop = true;
						this.notice_data.title = res.data.title;
						this.notice_data.content = res.data.content;
					} else {
						this.noticePop = false;
					}
				});
			},
			async getCommonAppInfo() {
				await this.$u.api.getCommonAppInfo(this.userInfo.userCenterId).then(res => {
					if (res.data.jsonKey) {
						const jsonKey = res.data.jsonKey;
						if (jsonKey[0].icon.indexOf('ibon') > -1) {
							return;
						}
						//可对一个数进行上舍入
						let num = Math.ceil(jsonKey.length / 8);
						let arr = [];
						for (let i = 0; i < num; i++) {
							arr[i] = jsonKey.slice(i * 8, i * 8 + 8);
						}
						this.nav_list = arr;
					}
				});
			},
			// 获取基本设置
			async getBasicSetup() {
				await this.$u.api.getBasicSetup().then(res => {
					if (res.data.basicData) {
						this.$store.commit('commit_basicSet', res.data.basicData);
					}
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.charts-box {
		width: 710rpx;
		height: 530rpx;
		padding: 24rpx 24rpx 0 0;
		background-color: #ffffff;
	}

	.show {
		color: #2d405e;
	}

	.home {
		font-family: DIN-Medium;
		height: 100vh;
		background-color: #0e0915;
		.top_bottom {
			width: 686rpx;
			margin: 0 auto;
			background-color: #ffffff;
			border-radius: 8rpx;
			display: flex;
			padding: 32rpx;
			flex-wrap: wrap;
			transform: translateY(-146rpx);

			.money-li {
				padding-left: 42rpx;
				width: 50%;
				color: #2d405e;
				padding-top: 20rpx;

				&:nth-child(odd) {
					border-right: 1px solid #ecf0f7;
				}

				&:nth-child(2) {
					padding-top: 0;
					border-bottom: 1px solid #ecf0f7;
				}

				&:first-child {
					padding-top: 0;
					border-bottom: 1px solid #ecf0f7;
				}

				.num {
					padding-top: 8px;
					font-size: 24rpx;
					font-weight: 500;
					color: #2d405e;
					line-height: 50rpx;

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

		.top_view {
			padding: 0 32rpx 164rpx;
			// height: calc(500rpx + var(--status-bar-height));
			// background: linear-gradient(#4076d6, #4076d6, #4076d6, #4076d6, #f5f5f6 100%);

			.title {
				padding-left: 32rpx;
				font-size: 32rpx;
				font-weight: 500;
				color: #ffffff;
			}

			.user_img {
				margin-top: 52rpx;
				.img {
					float: left;

					image {
						margin-right: 8rpx;
						vertical-align: middle;
						width: 68rpx;
						height: 68rpx;
						border-radius: 100%;
						border: 4rpx solid #ffffff;
						background-color: #ffffff;
					}

					.img_title {
						line-height: 68rpx;
						vertical-align: middle;
						font-size: 28rpx;
						font-weight: 500;
						color: #ffffff;
					}
				}

				.Icon {
					float: right;
					line-height: 72rpx;

					.btn-li {
						font-weight: bold;
						width: 50rpx;
						height: 50rpx;
						background-color: #ffffff;
						display: inline-block;
						text-align: center;
						vertical-align: middle;
						margin-left: 30rpx;
						line-height: 50rpx;
						border-radius: 6rpx;
					}
				}
			}

			.top_money {
				color: #ffffff;
				margin-top: 52rpx;

				.float_right {
					font-size: 34rpx;
					font-weight: 400;
					font-family: DINPro-Regular;

					.rmb-icon {
						margin-right: 4rpx;
						font-size: 24rpx;
					}
				}
			}

			.txst {
				width: 141rpx;
				height: 33px;
				font-size: 24px;
				font-weight: 400;
				color: #2d405e;
				line-height: 33px;
			}
		}

		.content {
			transform: translateY(-120rpx);

			.content_main {
				margin: 24rpx auto;
				width: 710rpx;
				border-radius: 12rpx;
				overflow: hidden;

				.content_top {
					background: linear-gradient(270deg, #fcfdff 0%, #e2ebff 100%);
					line-height: 40rpx;
					height: 80rpx;
					line-height: 80rpx;
					padding: 0 24rpx;
					overflow: hidden;

					.img {
						width: 40rpx;
						height: 40rpx;
						display: inline-block;
						margin-right: 16rpx;
						vertical-align: middle;
					}

					.title-text {
						font-size: 32rpx;
						font-weight: 600;
						color: #2d405e;
						vertical-align: middle;
					}

					.edit-btn {
						margin-left: 20rpx;
						display: inline-block;
					}

					&.tabs-ul {
						overflow: auto;
						height: 88rpx;
						padding: 0rpx;
						background: transparent;

						.ul_tag {
							display: flex;
							width: 710rpx;
							height: 72rpx;
							line-height: 72rpx;
							transform: translateY(16rpx);
							background: linear-gradient(217deg, #ffffff 0%, #ecf0f7 100%);

							.ul_tag_item {
								flex: 4;
								width: 177rpx;
								text-align: center;
								font-size: 24rpx;
								font-weight: 400;
								color: #62738e;
							}

							.hover {
								font-weight: 400;
								height: 88rpx;
								line-height: 88rpx;
								background-color: #4076d6;
								color: #ffffff;
								font-size: 28rpx;
								transform: translateY(-16rpx);
								border-radius: 8rpx 8rpx 0rpx 0rpx;
							}
						}
					}
				}

				.content_bottom {
					width: 710rpx;
					background-color: #ffffff;
					padding-top: 38rpx;

					.bottom_top {
						padding: 0 32rpx;
						height: 50rpx;
						line-height: 50rpx;
						font-size: 28rpx;

						.float_right {
							width: 210rpx;
							height: 50rpx;
							border-radius: 25rpx;
							border: 2rpx solid #b8c0c8;
							text-align: center;
							line-height: 36rpx;
						}

						.sale {
							font-size: 28rpx;
							width: 56rpx;
							height: 40rpx;
							color: #b8c0c8;
							margin-left: 32rpx;
							margin-right: 20rpx;
						}

						.sale_num {
							font-size: 28rpx;
							width: 56rpx;
							font-weight: 400;
							color: #b8c0c8;
							margin-left: 20rpx;
						}

						.show-on {
							font-size: 28rpx;
							font-weight: 500;
							color: #2d405e;
						}

						.sel {
							padding: 10rpx;
							font-size: 28rpx;
							width: 210rpx;
							border-radius: 25rpx;
							border: 2rpx solid #b8c0c8;
							margin-left: 320rpx;
							color: #b8c0c8;
						}
					}
				}

				.content_text {
					background-color: #ffffff;

					.content-ul {
						display: flex;
						flex-wrap: wrap;
						padding: 0 24rpx;

						.li-list {
							width: 33.3333%;
							text-align: center;
							margin-top: 10rpx;
							padding-bottom: 32rpx;
							padding-top: 40rpx;
							border-bottom: 1px solid #ecf0f7;
							position: relative;

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

							&:nth-child(5),
							&:nth-child(4) {
								padding-top: 32rpx;
								padding-bottom: 40rpx;
								border-bottom: 0;
							}

							&:nth-child(3),
							&:last-child {
								&::after {
									height: 0;
									width: 0;
								}
							}

							.num {
								font-size: 44rpx;
								font-weight: 500;
								color: #2d405e;
								line-height: 56rpx;
								height: 56rpx;
								padding-top: 12rpx;
							}

							.order_money {
								font-size: 24rpx;
								font-weight: 400;
								color: #b8c0c8;
								line-height: 33rpx;
							}

							.txt {
								font-size: 20rpx;
								font-weight: 400;
								color: #62738e;
								line-height: 28rpx;
							}

							.time {
								font-size: 20rpx;
								font-weight: 400;
								color: #62738e;
								line-height: 45rpx;
							}

							&.bottom-li {
								width: 50%;
							}
						}
					}
				}
			}
		}
	}

	.cont {
		.swiper {
			width: 710rpx;
			height: 400rpx;

			.app-ul {
				padding: 40rpx 0 0;
				display: flex;
				flex-wrap: wrap;
				background-color: #ffffff;
				height: 400rpx;

				.app-li {
					text-align: center;
					width: 25%;
					margin-bottom: 40rpx;

					.icon-view {
						width: 72rpx;
						height: 72rpx;
						line-height: 72rpx;
						border-radius: 30rpx;
						margin: 0 auto;

						.custom-icon {
							font-size: 42rpx;
							color: #ffffff;
						}
					}

					.label {
						font-size: 26rpx;
						line-height: 36rpx;
						padding-top: 16rpx;
						color: #2d405e;
					}
				}
			}
		}
	}

	.progress-ul {
		padding-bottom: 40rpx;

		.progress-li {
			line-height: 90rpx;

			.label {
				width: 152rpx;
				text-align: right;
				border-right: 1px solid #dddddd;
				padding-right: 12rpx;
				color: #2d405e;
				font-size: 24rpx;
				font-weight: 400;
			}

			.line {
				width: 400rpx;
			}

			.num {
				color: #5c79b0;
				font-size: 24rpx;
				margin-right: 30rpx;
			}
		}
	}

	.mag-view {
		text-align: center;
		transform: translateY(100rpx);
		background-color: #ffffff;
		width: 612rpx;
		border-radius: 18rpx;
		padding-bottom: 46rpx;

		.mag-top {
			height: 242rpx;
			border-radius: 18rpx;
			background-color: $uni-color-primary;
			width: 100%;
			position: relative;

			.notice-i {
				width: 422rpx;
				height: 312rpx;
				position: absolute;
				top: -100rpx;
				left: 140rpx;
			}
		}

		.msg-cont {
			padding: 0 50rpx;
			padding-top: 56rpx;
			position: relative;

			.msg-yun {
				position: absolute;
				width: 622rpx;
				height: 215rpx;
				left: 0;
				top: -116rpx;
				z-index: 1;
			}

			.mag-main {
				height: 200rpx;
			}

			.mag-tit {
				position: relative;
				z-index: 9;
				font-size: 38upx;
				font-weight: bold;
				padding-bottom: 30rpx;
			}
		}

		.confirm-btn {
			line-height: 90rpx;
			height: 90rpx;
			font-size: 34rpx;
			width: 506rpx;
			margin: 30rpx auto 0;
			border: 1px solid $uni-color-primary;
			color: $uni-color-primary;
			border-radius: 12rpx;
		}
	}

	.ygdd {
		width: 100%;
		background-color: #0c0a16;
		padding-bottom: 20rpx;

		.dd-tit {
			padding: 0 37rpx;
			height: 95rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.tit-left,
			.tit-right {
				display: flex;
				align-items: center;
			}

			.tit-left {
				color: #e3c4a5;
				font-size: 30rpx;
				font-weight: bold;

				.sx {
					background-color: #e3c4a5;
					width: 7rpx;
					height: 36rpx;
					border-radius: 4rpx;
					margin-right: 20rpx;
				}
			}

			.tit-right {
				font-size: 24rpx;
				font-weight: 500;
				color: #FFFFFF;

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

		.dd-wrap {
			margin: auto;
			width: 713rpx;
			height: 314rpx;
			border-radius: 20rpx;
			background-color: #fff;
			padding-top: 35rpx;
			position: relative;
			margin-bottom: 27rpx;

			.dd-id-status {
				height: 40rpx;
				display: flex;
				align-items: center;
				width: 100%;
				font-size: 24rpx;
				padding: 0 23rpx 0 43rpx;

				.dd-stata {
					flex-shrink: 0;
					width: 123rpx;
					height: 39rpx;
					background: #FF5600;
					border-radius: 5rpx;
					text-align: center;
					line-height: 39rpx;

					font-weight: 400;
					color: #FFFFFF;
				}

				.dd-id {
					margin-left: 15rpx;
					flex-grow: 1;
					color: #1e395a;

				}

				.dd-status {
					flex-shrink: 0;
					font-weight: 400;
					color: #FCA930;
				}
			}

			.dd-info {
				font-size: 28rpx;
				font-weight: 500;
				color: #A0A0A0;
				padding-left: 42rpx;

				text {
					padding-left: 32rpx;
					font-size: 26rpx;
					font-weight: 500;
					color: #173456;
				}

			}

			.dd-btm {
				position: absolute;
				bottom: 0;
				height: 90rpx;
				width: 713rpx;
				background: linear-gradient(to right, #fbf5eb, #ffffff);
				border-radius: 0 0 20rpx 20rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 0 20rpx 0 42rpx;

				.btm-price {
					font-size: 26rpx;
					color: #56687f;

					text {
						color: #ff1e00;
					}
				}

				.btm-btn {
					width: 126rpx;
					height: 48rpx;
					line-height: 48rpx;
					background: #ebccae;
					border-radius: 10rpx;
					font-size: 24rpx;
					font-weight: 400;
					color: #0C0A15;
					text-align: center;

				}

			}

			.add-dd {
				position: absolute;
				bottom: 90rpx;
				right: 20rpx;
				width: 110rpx;
				height: 100rpx;
				font-size: 24rpx;
				font-weight: 500;
				color: #FF5600;
				text-align: center;

				image {
					display: block;
					margin: auto;
					width: 36rpx;
					height: 45rpx;
				}

			}
		}
	}
</style>