bawangcan-shop/pages/index/shopIndex.vue

<template>
	<view class="container">
		<view class="header">
			<view class="shopName">
				<u-dropdown :active-color="colors" title-size='34' style="position: absolute;width: 70%;left:35rpx;top:30rpx">
					<u-dropdown-item v-model="value1" height='600rpx' :title="title" :options="options1"
						@change="changes">
					</u-dropdown-item>
				</u-dropdown>
			</view>
			<view style="height: 120rpx;">
				<view class="header_Left">
					<view class="left_top">
						<image class="logo" :src="merchantLogo"></image>
					</view>
					<view class="left_down">
						<image class="icons1" src="../../static/img/home/calendar.png"></image>
						<view class="times"><span @tap="times(1)" >{{startTime}}
							</span>至<span @tap="times(2)" >{{endTime}}</span></view>
						<u-picker mode="time" v-model="show1" title="开始时间" @confirm="times1()" :params="params">
						</u-picker>
						<u-picker mode="time" v-model="show2" title="截止时间" @confirm="times2()" :params="params">
						</u-picker>
					</view>
				</view>
				<view class="header_Right" @tap="release()">
					<image class="showaddImg" src="../../static/img/home/xinzeng.png"></image>
					<view class="showAdd">+新增店铺</view>
				</view>
			</view>

			<view class="home-bgi">
			<view style="display: flex;">
				<view class="top">
					<view style="font-size: 12px;">报名数量</view>
					<view style="font-size: 24px;margin-top: 5px;">{{baoMingCount}}</view>
				</view>
				<view class="picture">
					<image src="../../static/img/home/money.png" style="width: 128px;height: 104.09px;"></image>
				</view>
			</view>
			<view style="display: flex;color: #FFFFFF;" class="bottom">
				<view class="item">
					<view style="margin-bottom: 5px;">提交任务数</view>
					<view>0</view>
				</view>
				<view class="item">
					<view style="margin-bottom: 5px;">审核通过订单</view>
					<view>{{shenHeCount}}</view>
				</view>
				<view class="item">
					<view style="margin-bottom: 5px;">返利金额</view>
					<view>{{fanLiMoney}}</view>
				</view>
			</view>
			</view>

			<view class="header_cont">
				<view class="title">订单查询</view>
				<view class="line"></view>
				<view class="header_datas" v-for="(item,index) in headerData" :key="index">
					<view class="numbers">{{item.num}}</view>
					<view class="shuoming">{{item.name}}</view>
				</view>
			</view>
		</view>
		<!-- <view class="conters">
			<view class="title">活动数据</view>
			<view class="dosj">
				<view class="dosj_cont" v-for="(item,index) in activityData" :key="index">
					<view class="hdsj">{{item.num}}</view>
					<view class="hdsj_sm">{{item.name}}</view>
				</view>
			</view>
			<view style="margin-top: 40rpx;">
				<view class="title">账单查询</view>
				<view class="dosj">
					<!-- <view class="dosj_cont" v-for="(item,index) in zhangdanData" :key="index" @tap="goOrder">
						<view class="hdsj">{{item.num}}</view>
						<view class="hdsj_sm">{{item.name}}</view>
					</view> -->
					<!-- <view v-for="(item,index) in zhangdanData" :key="index" @tap="goOrder">
						<view style="display: flex;width: 100%;padding: 30rpx;align-content: center;">
							<view style="width: 45%;text-align: left;">
								<view class="hdsj">{{item.name}}</view>
							</view>
							<view style="width: 50%;text-align: right;">
								<view class="hdsj_sm">{{item.num}}</view>
							</view>
							<view style="width: 5%;text-align: right;">
								<image src="../../static/img/my/right_icon.png" style="width: 12rpx;height: 22rpx;">
								</image>
							</view>
						</view>
					</view>
				</view>
			</view> --> 
			<view class="shop-list-box" v-if="options1.length > 0">
				<view class="title">
					<image src="@/static/img/home/title-logo.png"></image>
					<text>店铺管理</text>
				</view>
				<view class="shop-item" v-for="(item,index) in options1">
					<image class="shopLoge" :src="item.merchantLogo"></image>
					<view class="shop_r">
						<view class="shop_name">{{item.merchantName}}</view>
						<view class="shuoDz">
							<image class="dizhiIcon" src="../../static/img/home/dizhi.png"></image>
							<text>{{item.merchantAddress}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import RenDropdownFilter from '@/components/ren-dropdown-filter/ren-dropdown-filter.vue'
	import wPicker from "@/components/w-picker/w-picker.vue";
	import notifyMsg from "@/common/notifyMsg.js"
	export default {
		components: {
			wPicker,
			RenDropdownFilter
		},
		data() {
			return {
				colors: '#FF4701',
				merchantLogo: 'https://download.cyjyyjy.com/fq-logo.jpg',
				baoMingCount: 0, //报名数量
				shenHeCount: 0, //审核通过数量
				fanLiMoney: 0, //返利金额
				
				merchantId: 0,
				startDate: 0,
				endDate: 0,
				title: '暂无店铺',
				headerData: [{
						name: '今日预估金额', //fanLiMoney
						num: 0
					},
					{
						name: '已出订单', //shenHeCount
						num: 0
					},
					{
						name: '未出订单', //shenHeCount
						num: 0
					}
				],
				activityData: [{
						name: '活动总数据', //huoDongCount
						num: 0
					},
					{
						name: '报名数量', //baoMingCount
						num: 0
					},
					{
						name: '曝光量', //baoGuangCount
						num: 0
					},
					{
						name: '客户支付金额', //keHuMoney
						num: 0
					},
					{
						name: '提交作业数', //keHuCount
						num: 0
					}
				],
				zhangdanData: [{
						name: '今日活动预估金额', //dayMoney
						num: 0
					},
					{
						name: '已出账单', //yiMoney
						num: 0
					},
					{
						name: '未出账单', //weiMoney
						num: 0
					}
				],
				options1: [],
				banners: [],
				show: false,
				value1: 1,
				page: 1,
				limit: 15,
				show1: false,
				show2: false,
				params: {
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false
				},
				startTime: new Date().toISOString().slice(0, 10),
				endTime: new Date().toISOString().slice(0, 10),
				arr: [],
				showModal: true
			}
		},
		onLoad(e) {
			let that = this;
			this.startDate = parseInt(new Date().toISOString().slice(0, 10).replace(/-/g, ""));
			// 商家提现审核提醒 210
			// 商家审核结果通知 211
			// 商家订单完成通知 212
			// 商家活动反馈推送提醒 213
			that.$Request.getT('/common/type/213').then(res => { //订单审核提醒
				if (res.code == 0) {
					if (res.data && res.data.value) {
						// that.orderStart = res.data;
						that.arr.push(res.data.value)
					}
				}
			})
			that.$Request.getT('/common/type/211').then(res => { //最新活动通知
				if (res.code == 0) {
					if (res.data && res.data.value) {
						// that.orderStart = res.data;
						that.arr.push(res.data.value)
					}
				}
			})
			that.$Request.getT('/common/type/212').then(res => { //积分变动提醒
				if (res.code == 0) {
					if (res.data && res.data.value) {
						// that.orderStart = res.data;
						that.arr.push(res.data.value)
					}
				}
			})
			// console.log("data_____:" + parseInt(data.toISOString().slice(0, 10).replace(/-/g,"")))
		},
		onShow() {
			let startTime = this.$queue.getData('startTime');
			let endTime = this.$queue.getData('endTime');
			if(startTime){
				this.startTime = startTime;
			}
			if(endTime){
				this.endTime = endTime;
			}
			
			let userId = this.$queue.getData('userId');
			if (userId) {
				this.getShopList(userId);
				//订阅
				if (this.showModal) {
					notifyMsg.openMsg();
				}
			}
			this.getBannerList();
		},
		methods: {
			getBannerList() {
				this.$Request.getT('/banner/selectBannerList?state=-1&classify=7').then(res => {
					if (res.code === 0) {
						this.banners = [];
						res.data.forEach(d => {
							if (d.state == 1) {
								this.banners.push(d);
							}
						});
					}
				});
			},
			// 轮播图跳转小程序
			toGoodsInfo: function(url) {
				let token = this.$queue.getData('token');
				let userId = this.$queue.getData('userId');
				if (token) {
					if (uni.getStorageSync('sendindexMsg')) {
						uni.requestSubscribeMessage({
							tmplIds: this.arr,
							success(re) {
								// console.log(re,'**********')
								var datas = JSON.stringify(re);
								if (datas.indexOf("accept") != -1) {
									console.log(re)
								}
							},
							fail: (res) => {
								console.log(res)
							}
						})
					}
					if (url) {
						if (url.indexOf('/pages/') !== -1) {
							uni.navigateTo({
								url
							});
						} else {
							//#ifndef H5
							uni.navigateTo({
								url: '/pages/public/webview?url=' + url
							});
							//#endif
							//#ifdef H5
							window.location.href = url;
							//#endif
						}
					}
				} else {
					this.goLogin();
				}
			},
			goLogin() {
				uni.navigateTo({
					url: '/pages/public/login'
				});
			},
			goOrder() {
				if (uni.getStorageSync('sendindexMsg')) {
					uni.requestSubscribeMessage({
						tmplIds: this.arr,
						success(re) {
							// console.log(re,'**********')
							var datas = JSON.stringify(re);
							if (datas.indexOf("accept") != -1) {
								console.log(re)
							}
						},
						fail: (res) => {
							console.log(res)
						}
					})
				}
				if (this.merchantId != 0) {
					uni.navigateTo({
						url: '/pages/my/toExamine'
					});
				}
			},
			selectMerchantDataAnalysis() {
				this.$Request.getT('/goodsMerchant/selectMerchantDataAnalysis?merchantId=' + this.merchantId +
					'&startTime=' + this.startTime + '&endTime=' + this.endTime).then(res => {
					if (res.code == 0) {
						this.headerData[0].num = res.fanLiMoney ? res.fanLiMoney : 0;
						this.headerData[1].num = res.shenHeCount ? res.shenHeCount : 0;
						this.activityData[0].num = res.huoDongCount ? res.huoDongCount : 0;
						this.activityData[1].num = res.baoMingCount ? res.baoMingCount : 0;
						this.activityData[2].num = res.baoGuangCount ? res.baoGuangCount : 0;
						this.activityData[3].num = res.keHuMoney ? res.keHuMoney : 0;
						this.activityData[4].num = res.keHuCount ? res.keHuCount : 0;
						this.zhangdanData[0].num = res.dayMoney ? res.dayMoney : 0;
						this.zhangdanData[1].num = res.yiMoney ? res.yiMoney : 0;
						this.zhangdanData[2].num = res.weiMoney ? res.weiMoney : 0;
						
						this.baoMingCount = res.baoMingCount
						this.fanLiMoney = res.fanLiMoney
						this.shenHeCount = res.shenHeCount
					}
				});
			},
			getShopList(userId) {
				this.$Request.getT('/goodsMerchant/selectGoodsMerchantPage?page=' + this.page + '&limit=' + this.limit +
					'&userId=' + userId + '&status=2').then(res => {
					if (res.code == 0) {
						if (res.data.records.length > 0) {
							if (this.options1.length == 0) {
								this.title = res.data.records[0].merchantName;
								this.merchantLogo = res.data.records[0].merchantLogo;
								this.merchantId = res.data.records[0].merchantId;
								this.$queue.setData('merchantId', this.merchantId);
							}
							this.selectMerchantDataAnalysis();
							this.options1 = [];
							this.options1 = res.data.records;
						}
					}
				});
			},
			changeDate(data) {
				console.log(data)
			},
			shopBtn() {
				this.show = true
				console.log('1111')
			},
			release() {
				let token = this.$queue.getData('token');
				if (token) {
					if (uni.getStorageSync('sendindexMsg')) {
						uni.requestSubscribeMessage({
							tmplIds: this.arr,
							success(re) {
								// console.log(re,'**********')
								var datas = JSON.stringify(re);
								if (datas.indexOf("accept") != -1) {
									console.log(re)
								}
							},
							fail: (res) => {
								console.log(res)
							}
						})
					}
					uni.navigateTo({
						url: '/pages/index/addShop'
					});
				} else {
					this.goLogin();
				}
			},
			changes(item) {
				console.log(item)
				this.title = item.merchantName;
				this.merchantLogo = item.merchantLogo;
				this.merchantId = item.merchantId;
				this.selectMerchantDataAnalysis();
				this.$queue.setData('merchantId', item.merchantId);
				// this.value1 = index
				// for (var i in this.options1) {
				// 	if (index == this.options1[i].value) {
				// 		this.title = this.options1[i].label
				// 	}
				// }
			},
			times(index) {
				if (index == 1) {
					this.show1 = true
				}
				if (index == 2) {
					this.show2 = true
				}

			},
			times1(e) {
				this.startTime = e.year + '-' + e.month + '-' + e.day
				this.$queue.setData('startTime', this.startTime);
				this.startDate = parseInt(e.year + e.month + e.day);

				console.log(this.startDate)
				console.log('shijian', e, this.startTime);
				let userId = this.$queue.getData('userId');
				if (userId) {
					this.selectMerchantDataAnalysis();
				}
			},
			times2(e) {
				if (this.startDate == 0) {
					this.$queue.showToast('请先选择开始时间！')
					return;
				}

				this.endDate = parseInt(e.year + e.month + e.day);
				console.log(this.endDate - this.startDate)
				if ((this.endDate - this.startDate) < 0) {
					this.$queue.showToast('结束时间不能小于开始时间！')
					return;
				}

				this.endTime = e.year + '-' + e.month + '-' + e.day
				this.$queue.setData('endTime', this.endTime);
				console.log('shijian', e, this.endTime);
				let userId = this.$queue.getData('userId');
				if (userId) {
					this.selectMerchantDataAnalysis();
				}
			},
		}
	}
</script>

<style lang="scss">
	page {
		width: 100%;
		// background: #000000;
		background: #F5F5F5;
	}
	
	.tui-scroll-h {
		height: 100%;
	}

	.home-bgi {
		width: 100%;
		height: 260rpx;
		background: linear-gradient(48deg, #FF5656 0%, #FF9F74 100%);
		opacity: 1;
		border-radius: 8px;
		
		.top{
			margin-top: 10px;
			margin-left: 10px;
			color: #FFFFFF;
		}
		
		.picture{
			position: absolute;
			top:45px;
			right:20px;
		}
		
		.bottom{
			margin-left: 10px;
			color: #FFFFFF;
			font-size: 14px;
			margin-top: 20px;
			
			.item{
				width: 33%;
			}
		}
		

		.swiper {
			width: 100%;
			height: 100%;

			.swiper-wrap {
				width: 100%;
				height: 100%;

				image {
					width: 100%;
					height: 100%;
					border-radius: 20rpx;
					display: block;
				}
			}

		}
	}

	.hdsj {
		font-size: 28rpx;
		font-weight: 600;
	}

	.hdsj_sm {
		font-size: 28rpx;
	}

	.container {
		.header {
			width: 100%;
			background:#F5F5F5;
			padding: 30rpx;

			.header_Left {
				height: 120rpx;
				width: 70%;
				float: left;

				.left_top {

					.logo {
						width: 60rpx;
						height: 60rpx;
						border-radius: 10rpx;
						// float: left;
						margin-right: 20rpx;
					}

					.shopName {
						position: relative;
						line-height: 60rpx;
						font-size: 36rpx;
						font-weight: 600;

						.icons {
							width: 30rpx;
							margin-left: 10rpx;
							padding-left: 10rpx;
						}
					}
				}

				.left_down {
					clear: both;
					display: flex;
					align-items: center;
					height: 40rpx;
					color: #999;
					font-size: 32rpx;

					.icons1 {
						width: 28rpx;
						height: 28rpx;
						margin-right: 10rpx;
					}

					.times {
						font-size: 28rpx;
						color: #777777;
					}
				}
			}

			.header_Right {
				// float: right;
				width: 111px;
				height: 32px;
				background: #FFFFFF;
				opacity: 1;
				border-radius: 20px 0px 0px 20px;
				position: absolute;
				right: 0;
				top: 10px;
				z-index: 999999;

				.showaddImg {
					width: 21px;
					height: 21px;
					margin-top: 5px;
					margin-left: 10px;
				}
				
				.showAdd{
					position: absolute;
					top:8px;
					right: 20px;
					font-size: 12px;
					font-family: PingFang SC;
					font-weight: 500;
					line-height: 17px;
					color: #FF605A;
				}
			}

			.header_cont {
				clear: both;
				background-color: #FFFFFF;
				width: 100%;
				border-radius: 10rpx;
				height: 120px;
				margin-top: 20rpx;
				color:#333333;
				
				.title{
					font-size: 16px;
					font-family: PingFang SC;
					font-weight: 500;
					line-height: 22px;
					color: #333333;
					padding: 13px;
				}
				
				.line{
					height: 1px;
					background-color: #999999;
					width: 100%;
					opacity: 0.22;
				}

				.header_datas {
					display: inline-block;
					width: 33%;
					text-align: center;
					padding: 10rpx 0;
					padding-left: 20px;

					.numbers {
						font-size: 40rpx;
						color: #FF605A;
					}
				}
			}
		}

		.conters {
			width: 100%;
			background: #FFFFFF;
			padding: 10rpx 30rpx 30rpx;

			.title {
				color: #474747;
				font-size: 30rpx;
				margin: 20rpx 0;
				font-weight: 600;
			}

			.dosj {
				background: #FFF6F2;
				border-radius: 15rpx;

				.dosj_cont {
					display: inline-block;
					width: 33.3%;
					text-align: center;
					padding: 20rpx 0;
					color: #333333;

					.hdsj {
						font-size: 40rpx;
						font-weight: 600;
					}

					.hdsj_sm {
						font-size: 26rpx;
					}
				}
			}
		}
	}

	.shop-list-box{
		width: 686rpx;
		border-radius: 16rpx;
		background: #fff;
		margin: 0 auto;
		.title{
			width: 100%;
			height: 96rpx;
			display: flex;
			align-items: center;
			padding: 0 32rpx;
			image{
				width: 32rpx;
				height: 32rpx;
				margin-right: 8rpx;
			}
		}
		.shop-item{
			width: 100%;
			padding: 32rpx;
			display: flex;
			border-top: 2rpx solid #E8E8E8;;
			image{
				width: 112rpx;
				height: 112rpx;
				margin-right: 32rpx;
				border-radius: 16rpx;
			}
			.shop_r{
				width: calc(100% - 160rpx);
				font-size: 22rpx;
				color: #333;
				.shop_name{
					width: 100%;
					overflow:hidden;
					text-overflow:ellipsis;
					white-space:nowrap;
					font-size: 28rpx;
					font-weight: 500;
					margin-bottom: 20rpx;
				}
			}
			.dizhiIcon{
				width: 16rpx;
				height: 19rpx;
				margin-right: 10rpx;
			}
		}
	}

	.u-dropdown__menu__item.data-v-4e830e53 {
		position: absolute !important;
		left: 70rpx !important;
	}

	.u-dropdown__menu__item {
		position: absolute !important;
		left: 70rpx !important;
		bottom: 30rpx !important;
	}
</style>