yunshengtai-uniapp/pages/user/myShop/index.vue

<template>
	<view class="my-shop-box">
		<!-- <view class="nav acea-row row-around">
		  <view class="item" :class="{ on: type === 0 }" @click="changeType(0)">
		    <view>今日数据</view>
		  </view>
		  <view class="item" :class="{ on: type === 1 }" @click="changeType(1)">
		    <view>总数据</view>
		  </view>
		</view> -->
		<!-- <view class="set-icon" @click="toOpenStore"><image src="../../../static/images/set.png"></image></view> -->
		<view class="card-box">
			<view class="shop-info acea-row row-middle">
				<view class="shop-logo"><image :src="storeInfo.storeDto.image" mode="aspectFill"></image></view>
				<view class="shop-name">
					<view class="name">{{storeInfo.storeDto.name}}</view>
					<view class="edit-btn" @click="toOpenStore">信息修改</view>
				</view>
			</view>
			<view class="count-box acea-row row-between">
				<view class="count-item">
					<view class="t">总收入(元)</view>
					<countup :num="totalIncome" color="#fff" width='14' height='26' fontSize='25'></countup>
				</view>
				<view class="count-item">
					<view class="t">今日收入(元)</view>
					<countup :num="todayIncome" color="#fff" width='14' height='26' fontSize='25'></countup>
				</view>
			</view>
		</view>
		<view class="canuse-money-box acea-row row-between row-middle">
			<view class="acea-row row-middle">
				<view style="margin-right: 12rpx;margin-top:-2rpx;">可用金额(元) </view>
				<countup :num="validMoney" color="#000" width='13' height='20' fontSize='20'></countup>
			</view>
			<view class="withdraw-btn" @click="toWithDraw">提现</view>
		</view>
		<view class="white-box">
			<view class="title-box acea-row row-middle">
				<image src="../../../static/images/store-icon1.png"></image>
				<text>今日数据</text>
			</view>
			<view class="data-box acea-row row-between">
				<view class="data-item">
					<view class="t">订单总量</view>
					<countup :num="totalOrderCount" color="#000" width='13' height='23' fontSize='20'></countup>
				</view>
				<view class="data-item" @click="toOrderManage(1)">
					<view class="t">今日待发货</view>
					<countup :num="paid" color="#000" width='13' height='23' fontSize='20'></countup>
				</view>
				<view class="data-item" @click="toOrderManage(4)">
					<view class="t">今日待退货</view>
					<countup :num="nowRefund" color="#000" width='13' height='23' fontSize='20'></countup>
				</view>
			</view>
		</view>
		<view class="white-box">
			<view class="title-box acea-row row-middle">
				<image src="../../../static/images/store-icon1.png"></image>
				<text>总数据</text>
			</view>
			<view class="data-box acea-row row-between">
				<view class="data-item">
					<view class="t">订单总量</view>
					<countup :num="totalIncome" color="#000" width='13' height='23' fontSize='20'></countup>
				</view>
				<view class="data-item">
					<view class="t">退单量</view>
					<!-- <view>2098</view> -->
					<countup :num="totalRefund" color="#000" width='13' height='23' fontSize='20'></countup>
				</view>
				<view class="data-item">
					<view class="t">商品商家数</view>
					<countup :num="productCount" color="#000" width='13' height='23' fontSize='20'></countup>
				</view>
			</view>
		</view>
		
		<view class="add-btn" @click="toAddGoods('')">新增商品</view>
	</view>
</template>

<script>
	const app = getApp();
	import countup from '@/components/p-countUp/countUp.vue'
	import { myStore } from '@/api/store'
	export default{
		components:{ countup },
		data(){
			return {
				storeInfo: {},
				type: 0,
				todayIncome: 0, //今日收入
				todayOrderCount: 0, //今日订单
				totalIncome: 0, //总收入
				totalOrderCount: 0, //金额订单总数
				totalRefund: 0, //	总退款
				validMoney:0, //	有效金额
				nowRefund: 0, //	退款
				paid:0 , //今日已支付待发货
				productCount: 0, //商品总数
				
			}
		},
		onLoad(){
			// this.getInfo()
			this.getStore()
		},
		onPullDownRefresh() {
			this.getStore()
		},
		methods:{
			toAddGoods(){
				this.$yrouter.push({
				  path: '/pages/life/addGoods/index',
					query:{
						id: ''
					}
				})
			},
			getStore(){
				myStore().then((res)=>{
					if(res.success){
						this.storeInfo = res.data
						uni.stopPullDownRefresh()
					}
				})
			},
			// getInfo() {
			//   app.http('get', 'userinfo').then(res => {
			//     if (res.data.success) {
			//       this.setData({
			//         userInfo: res.data.data
			//       });
			// 			uni.setStorageSync('userInfo',res.data.data)
			// 			uni.stopPullDownRefresh()
			//     }
			//   });
			// },
			changeType(idx){
				this.type = idx
			},
			toOpenStore(){
				this.$yrouter.push({
					path: '/pages/user/openStore/index'
				})
			},
			toOrderManage(idx){
				this.$yrouter.push({
					path: '/pages/user/orderManage/index',
					query:{
						type: idx
					}
				})
			},
			toWithDraw(){
				this.$yrouter.push({
					path: '/pages/user/withdraw/index'
				})
			},
		}
	}
</script>

<style lang="less">
	.my-shop-box{
		width: 100%;
		min-height: 100vh;
		background: #EEEEEE;
		
		.nav{
			width: 100%;
			background-color: #fff;
			color: #1D1D1D;
			font-size: 28rpx;
			.item{
				padding-bottom: 12rpx;
			}
			.on{
				font-weight: 500;
				color: #000;
				border-bottom: 6rpx solid #000;
			}
		}
		.card-box{
			width: 100%;
			height: 460rpx;
			background: linear-gradient(180deg, #FE6620 0%, #F89C75 100%);
			padding: 36rpx 56rpx;
			font-size: 32rpx;
			color: #FFFFFF;
			font-weight: 500;
			.shop-info{
				.shop-name{
					.name{
						font-size: 44rpx;
						line-height: 60rpx;
						font-weight: 600;
						margin-bottom: 10rpx;
					}
					.edit-btn{
						width: 140rpx;
						height: 46rpx;
						border: 2rpx solid #FFFFFF;
						border-radius: 8rpx;
						text-align: center;
						line-height: 42rpx;
						color: #fff;
						font-size: 24rpx;
					}
				}
				image{
					width: 140rpx;
					height: 140rpx;
					border-radius:50%;
					margin-right: 36rpx;
				}
			}
			.title,.money{
				font-size: 40rpx;
				line-height: 56rpx;
			}
			.count-box{
				margin-top: 50rpx;
				padding: 0 28rpx;
				.count-item{
					text-align: center;
					font-size: 36rpx;
					font-weight: 500;
					.t{
						margin-bottom: 12rpx;
					}
				}
			}
		}
		.canuse-money-box{
			width: 670rpx;
			height: 124rpx;
			background: #FFFFFF;
			border-radius: 12rpx;
			color: #1d1d1d;
			font-weight: 600;
			padding: 0 28rpx;
			margin: -62rpx auto 0;
			.withdraw-btn{
				width: 152rpx;
				height: 68rpx;
				border: 2rpx solid #FF590E;
				border-radius: 8rpx;
				text-align: center;
				line-height: 68rpx;
				color: #ff590e;
				font-weight: 500;
			}
		}
		.white-box{
			width: 670rpx;
			height: 254rpx;
			background: #fff;
			border-radius: 12rpx;
			margin: 32rpx auto;
			.title-box{
				width: 100%;
				height: 66rpx;
				padding: 0 16rpx;
				border-bottom: 2rpx solid #ECECEC;
				font-size: 28rpx;
				color: #1d1d1d;
			}
			image{
				width: 28rpx;
				height: 28rpx;
				margin-right: 10rpx;
			}
			.data-box{
				padding: 40rpx 40rpx 32rpx;
				.data-item{
					font-size: 40rpx;
					color: #1d1d1d;
					.t{
						font-size: 28rpx;
						margin-bottom: 12rpx;
					}
					text-align: center;
				}
			}
		}
		.add-btn{
			width: 670rpx;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			color: #fff;
			background: #000;
			border-radius: 40rpx;
			position: absolute;
			bottom: 50rpx;
			left: 50%;
			margin-left: -335rpx;
		}
	}
</style>