shop-applet/pages/index/index.vue

<template>
	<view class="content">

		<view class="content-top">
			<view class="content-tops">
				<view class="content-top_img" v-if="Object.keys(userInfoData).length>0">
					<image :src="userInfoData.avatar" mode="aspectFill"></image>
				</view>
				<view class="content-top_img" v-else @click="login">
					<image src="@/static/test/KH.png" mode="aspectFit"></image>
				</view>
				<view class="content-top-title" @click="shopp" v-if="Object.keys(userInfoData).length>0">
					<view class="top-titlea">
						{{userInfoData.mer_info.mer_name}}
					</view>
					<view class="top-titleb">
						<image src="@/static/images/you.png" mode=""></image>
					</view>
				</view>
				<view class="content-top-title" @click="shopp" v-else>
					<view class="top-titlea">
						请登录
					</view>
					<view class="top-titleb">
						<image src="@/static/images/you.png" mode=""></image>
					</view>
				</view>
			</view>
			<retuntop style="margin-top: 20rpx; margin-right: 50rpx;" />
		</view>

		<view class="content-middle">
			<view class="content-middlea" v-for="(item,index) in  list" :key='index'>
				<view class="content-middlea-one">
					{{item.name}}
				</view>
				<view class="content-middlea-two">
					{{item.value}}
				</view>
			</view>

		</view>
		<view class="content-open" v-if='!isshow' @click="open">
			<image src="@/static/images/zk.png" mode="aspectFit"></image>
		</view>

		<div v-if='isshow' style="margin-top: 80rpx;">
			<!-- // type=price&time=today&merId=1 -->
			<view class="tools-one"
				style="font-size: 33rpx;font-family: PingFang SC-Medium, PingFang SC;font-weight: 500;color: #333333; margin-left: 30rpx;margin-bottom: 30rpx;">
				订单数据统计

			</view>
			<ordertime ref='test' type='price' timetype='today' :merid='userInfoData.service.mer_id'></ordertime>
		</div>

		<view class="content-bottom" v-else>
			<view class="content-order">
				<view class="" v-for="(item,i) in order" :key='i'>
					<view class="content-order-two">
						{{item.value}}
					</view>
					<view class="content-order-one">
						{{item.name}}
					</view>

				</view>
			</view>

			<view class="content-tools">
				<view class="tools-one">
					常用工具
					<view class=""></view>
				</view>
				<view class="tools-two">
					<view class="" v-for="(item,k) in typelist" :key='k' @click="navation(item)">
						<view class="tools-two-img">
							<image :src="item.image" mode=""></image>
						</view>
						<view class="tools-two-title"> {{item.name}}</view>
					</view>
				</view>
			</view>


			<view class="content-list">
				<view class="tools-one">
					订单列表
					<view class=""></view>
				</view>

				<view class="content-list-one" v-for="(item,u) in productList" :key="u" @click="shopdetail(item)">
					<view class="list-one">
						<view class="list-one_left">
							<view class="list-one_left-a">
								<image src="@/static/images/f.png" mode="aspectFit"></image>

							</view>
							<view class="list-one_left-b">{{item.real_name}}</view>
							<view class="list-one_left-c">
								<image src="@/static/images/you.png" mode="aspectFit"></image>
							</view>
						</view>

						<view class="list-one_right">
							<view class="list-one_right-a">{{item.pay_time}}拍下 </view>
							<view class="list-one_right-c">

							</view>
							<view class="list-one_right-b">待发货</view>
						</view>
					</view>

					<view class="" v-for="(g,h) in item.orderProduct">


						<view class="list-two">
							<view class="list-two_left">
								<image :src="g.cart_info.product.image" mode=""></image>
							</view>
							<view class="list-two_middle">
								<view class="two_middle-title-a">
									<view class="two_middle-title-a-left">{{ g.cart_info.product.store_name }}</view>
									<view class="two_middle-title-a-right">
										<view class="title-price">￥<span
												style="font-size: 37rpx;font-weight: 600;">{{g.product_price.split('.')[0]}}.</span>
											<span>{{g.product_price.split('.')[1]}}</span><strong></strong>
										</view>
										<view class="title-number">X{{g.product_num}}</view>
									</view>
								</view>
								<view class="two_middle-title-b">
									<view class="title-number">共{{g.product_num}}件 </view>
									<view class="title-price">实收: <span style="color: #F84221;">￥</span><span
											style="font-size: 37rpx;	color: #F84221;">{{g.cart_info.productAttr.price.split('.')[0] }}.</span><span
											style="color: #F84221;">{{g.cart_info.productAttr.price.split('.')[1] }}</span>(含快递:￥0.00）
									</view>
								</view>

							</view>

						</view>

						<view class="list-three">
							<view class="list-three-one">
								<view class="title-img">
									<image src="@/static/images/dz.png" mode="aspectFit"></image>
								</view>
								<view class="order_id">
									订单编号{{item.order_sn}}
								</view>
							</view>
							<view class="list-three-one">
								<view class="title-img">
									<image src="@/static/images/zb.png" mode="aspectFit"></image>
								</view>
								<view class="adress">{{item.real_name}} {{ item.user_phone}} {{item.user_address}}
								</view>
							</view>
						</view>
					</view>
					<view class="list-four">
						<view class="btn">去发货 </view>
					</view>

				</view>

				<view class="conter-img" v-if='productList.length == 0'>
					<image src="@/static/images/noCart.png" mode="aspectFit"></image>
				</view>

				<view class='loadingicon acea-row row-center-wrapper' v-if='productList.length > 0'>
					<text class='loading iconfont icon-jiazai' :hidden='loading==false'></text>{{loadTitle}}
				</view>

			</view>


		</view>

		<authorize @onLoadFun="onLoadFun" :isAuto="isAuto" :isShowAuth="isShowAuth" @authColse="authColse"
			:isGoIndex="false"></authorize>
	</view>
</template>

<script>
	import authorize from '@/components/Authorize';
	import ordertime from './component/timelist.vue'
	import retuntop from '@/components/content-top/index.vue';
	import {
		getUserInfo
	} from '@/api/user.js';
	import image from '../../uni_modules/uview-ui/libs/config/props/image';
	import {
		orderStatistics,
		getOrderList

	} from "@/api/admin";

	export default {
		components: {
			authorize,
			ordertime,
			retuntop

		},
		data() {
			return {
				isAuto: false, //没有授权的不会自动授权
				isShowAuth: false, //是否隐藏授权
				list: [{
					name: '今日成交额',
					value: 0
				}, {
					name: '今日订单数',
					value: 0
				}, {
					name: '本月订单数',
					value: 0
				}],
				order: [{
					name: '待付款',
					value: 0
				}, {
					name: '待发货',
					value: 0
				}, {
					name: '待收货',
					value: 0
				}, {
					name: '待评价',
					value: 0
				}, {
					name: '退款',
					value: 0
				}],

				typelist: [{
						name: '商品管理',
						type: 1,
						image: require('@/static/images/index7.png')
					}, {
						name: '订单管理',
						type: 2,
						image: require('@/static/images/index1.png')
					}, {
						name: '供货采购',
						type: 3,
						image: require('@/static/images/index4.png')
					},
					{
						name: '进货管理',
						type: 4,
						image: require('@/static/images/index5.png')
					}, {
						name: '提现管理',
						type: 5,
						image: require('@/static/images/index8.png')
					}, {
						name: '客服记录',
						type: 6,
						image: require('@/static/images/index6.png')
					}, {
						name: '订单核销',
						type: 7,
						image: require('@/static/images/index2.png')
					}, {
						name: '全部',
						type: 8,
						image: require('@/static/images/index3.png')
					}
				],



				show: false,

				where: {

					page: 1,
					limit: 3,
					status: 2
				},
				loadend: false,
				loading: false,
				loadTitle: '加载更多',

				emptyShow: false,
				productList: [],
				userid: '',
				userInfoData: {},

				isshow: false,
				where1: {
					product_type: 0
				}
			}
		},

		onPullDownRefresh() {
			this.getGoods(true)
			uni.stopPullDownRefresh()
		},

		onLoad() {
			this.selfLocation()
			this.getUserInfo()




		},



		onReachBottom() {

			if (this.productList.length > 0) {
				setTimeout(() => {
					this.getGoods(false);
				}, 1000)
			}

		},

		mounted() {

			this.selfLocation()


		},
		onShow() {
			this.getUserInfo()
		},

		beforeDestroy() {
			// 销毁监听事件
			this.$bus.$off('value-updated')
		},
		methods: {

			login() {
				uni.redirectTo({
					url: '/pages/users/login/login_copy'
				})
			},
			shopp() {
				if (this.userInfoData.mer_info.type_id == 12) {
					uni.navigateTo({
						url: `/pages/nongKe/supply_chain/merchant?id=${this.userInfoData.service.mer_id}`
					})
				} else {
					uni.navigateTo({
						url: `/pages/store/home/index?id=` + this.userInfoData.service.mer_id + `&type=7`
					})

				}
			},
			//界面跳转
			shopdetail(item) {
				uni.navigateTo({
					url: '/pages/admin/orderDetail/index?id=' + item.order_id + '&mer_id=' + this.userInfoData
						.service.mer_id
				})
			},
			//获取订单数据
			getindex() {
				const data = {
					product_type: this.where1.product_type
				}
				orderStatistics(this.userInfoData.service.mer_id, data).then(
					res => {
						this.order[0].value = res.data.order.unpaid
						this.order[1].value = res.data.order.unshipped
						this.order[2].value = res.data.order.untake
						this.order[3].value = res.data.order.unevaluate
						this.order[4].value = res.data.order.refund
						this.list[0].value = res.data.data.today.payPrice
						this.list[1].value = res.data.data.today.orderNum
						this.list[2].value = res.data.data.month.orderNum
					},
					err => {
						that.$util.Tips({
							title: err.msg
						})
					}
				);
			},
			open() {
				this.isshow = !this.isshow
				if (this.isshow) {
					setTimeout((res) => {
						this.$refs.test.timelist()
					}, 1000)
				}
			},
			// 授权回调
			onLoadFun(data) {
				this.getUserInfo();
				this.isShowAuth = false;
			},
			/**
			 * 获取个人用户信息
			 */
			getUserInfo() {
				getUserInfo().then(res => {
					console.log(res)
					this.userid = res.data.uid
					this.userInfoData = res.data
					this.getGoods(true)
					this.getindex()
				});
			},

			// 授权关闭
			authColse: function(e) {
				this.isShowAuth = e
			},
			//路由跳转
			navation(item) {
				if (this.userid) {

					switch (item.type) {
						case 1:

							uni.switchTab({
								url: '/pages/product/list/index'
							})
							break;
						case 2:
							uni.navigateTo({
								url: '/pages/admin/order/index?mer_id=' + this.userInfoData.service.mer_id +
									'&type_id=' + this.userInfoData.mer_info.type_id

							})
							break;
						case 3:
							uni.navigateTo({
								url: '/pages/nongKe/supply_chain/supplier?type_id=12&isDetail=1&product_type=98&cate_id=' +
									this.userInfoData.mer_info.category_id
							})
							break;
						case 4:
							uni.navigateTo({
								url: '/pages/users/order_list/index?status=-1'

							})
							break;
						case 5:
							uni.navigateTo({
								url: '/pages/users/embody/embody?mer_id=' + this.userInfoData.service.mer_id

							})
							break;
						case 6:
							uni.switchTab({
								url: '/pages/chat/customer_list/index?type=1&mer_id=' + this.userInfoData.service
									.mer_id
							})
							break;
						case 7:
							uni.navigateTo({
								url: '/pages/admin/order_cancellation/index?mer_id=' + this.userInfoData.service
									.mer_id

							})
							break;
						case 8:
							uni.navigateTo({
								url: '/pages/moreProject/moreProject'
							})
							break;
					}
				} else {
					this.isAuto = true;
					this.isShowAuth = true
				}
			},


			getGoods: function(isPage) {
				let that = this;
				if (that.loadend) return;
				if (that.loading) return;

				if (isPage === true) that.$set(that, 'productList', []);

				that.loading = true;
				that.loadTitle = '';
				getOrderList(that.where, this.userInfoData.service.mer_id).then(res => {
					let list = res.data.list;
					let productList = that.$util.SplitArray(list, that.productList);
					let loadend = list.length < that.where.limit;
					that.loadend = loadend;
					that.loading = false;
					that.loadTitle = loadend ? '已全部加载' : '加载更多';
					setTimeout(() => {
						that.$set(that, 'productList', productList);
					}, 500)

					// console.log(that.productList)
					that.$set(that.where, 'page', that.where.page + 1);
					if (that.where.page == 1 && res.data.list.length <= 0) that.emptyShow = true
				}).catch(err => {
					that.loading = false;
					that.loadTitle = '加载更多';
				});
			},

			selfLocation() {


				uni.getLocation({
					type: 'wgs84',
					timeout: '1000',
					success: (res) => {

						this.isshow = false
						let latitude, longitude;
						latitude = res.latitude.toString();
						longitude = res.longitude.toString();

					},
					fail: (err) => {


					}
				});
			}



		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #f4f7fe;
		// background: linear-gradient(180deg, #FFFFFF 0%, #F6F6F6 100%);
	}

	/deep/.statistical-page .navs {
		top: 400rpx !important;
	}

	.conter-img {
		width: 650rpx;
		height: 400rpx;
		margin: 0 auto;
		margin-top: 60rpx;


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

	}

	.content {
		padding-top: 80rpx;

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

		}

		.content-tops {
			display: flex;
			height: 96rpx;
			line-height: 96rpx;

			.content-top_img {
				margin-left: 16rpx;
				width: 96rpx;
				height: 96rpx;
				border-radius: 50%;
				image {
					border-radius: 50%;
					width: 100%;
					height: 100%;
				}


			}

			.content-top-title {
				margin-left: 11rpx;
				display: flex;
				font-size: 33rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #333333;

				.top-titleb {
					width: 30rpx;
					height: 30rpx;
					margin-top: 5rpx;
					margin-left: 10rpx;

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

				}
			}
		}

		.content-middle {
			padding: 0 60rpx;
			display: flex;
			justify-content: space-around;
			margin-top: 61rpx;

			.content-middlea {
				width: 161rpx;
				text-align: center;

				.content-middlea-one {
					font-size: 26rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #333333;
				}

				.content-middlea-two {
					font-size: 42rpx;
					font-family: SF Pro Display-Semibold, SF Pro Display;
					font-weight: 600;
					color: #333333;
					margin-top: 11rpx;
				}
			}
		}

		.content-open {
			width: 70rpx;
			height: 15rpx;
			margin: 0 auto;
			margin-top: 53rpx;

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

		.content-bottom {
			background-color: #ffffff;
			border-radius: 32rpx 32rpx 0px 0px;
			margin-top: 41rpx;
			padding-top: 46rpx;

			.content-order {

				display: flex;
				justify-content: space-around;


				view {
					width: 100rpx;

					text-align: center;

					.content-order-one {
						margin-top: 11rpx;
						font-size: 26rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #333333;
					}

					.content-order-two {
						font-size: 42rpx;
						font-family: SF Pro Display-Semibold, SF Pro Display;
						font-weight: 600;
						color: #333333;

					}
				}
			}

			.content-tools {
				margin-top: 70rpx;

				.tools-one {
					width: 133rpx;
					line-height: 50rpx;
					font-size: 33rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #333333;
					margin-left: 16rpx;

					view {
						width: 46rpx;
						height: 5rpx;
						background: #F84221;
						margin: 0 auto;
					}
				}

				.tools-two {

					display: grid;
					grid-template-columns: repeat(4, 1fr);
					padding: 0 44rpx;

					view {
						margin-top: 24rpx;
						text-align: center;

						.tools-two-img {
							width: 120rpx;
							height: 120rpx;
							margin-left: 20rpx;

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

				}
			}

			.content-list {
				margin-top: 70rpx;

				.tools-one {
					width: 133rpx;
					line-height: 50rpx;
					font-size: 33rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #333333;
					margin-left: 16rpx;

					view {
						width: 46rpx;
						height: 5rpx;
						background: #F84221;

						margin: 0 auto;
					}
				}


				.content-list-one {
					padding: 25rpx 25rpx;

					.list-one {
						display: flex;
						justify-content: space-between;

						.list-one_left {
							display: flex;
							height: 49rpx;
							line-height: 49rpx;


							.list-one_left-a {
								width: 49rpx;
								height: 49rpx;
								margin-right: 20rpx;

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

							.list-one_left-c {
								width: 26rpx;
								height: 26rpx;

								margin-top: 5rpx;

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

						.list-one_right {
							display: flex;

							font-size: 26rpx;
							font-family: PingFang SC-Regular, PingFang SC;
							font-weight: 400;

							.list-one_right-a {

								color: #333333;
							}

							.list-one_right-c {
								height: 27rpx;
								width: 2px;
								margin-top: 5rpx;
								background-color: #000;
								margin-left: 15rpx;
								margin-right: 15rpx;
							}

							.list-one_right-b {

								color: #F84221;
							}
						}
					}

					.list-two {

						display: flex;


						margin-top: 26rpx;

						.list-two_left {
							width: 175rpx;
							height: 175rpx;


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

						.list-two_middle {
							margin-left: 20rpx;

							.two_middle-title-a {

								display: flex;
								justify-content: space-between;

								.two_middle-title-a-left {
									width: 387rpx;
									font-size: 30rpx;
									font-family: PingFang SC-Medium, PingFang SC;
									font-weight: 500;
									color: #333333;
								}

								.two_middle-title-a-right {
									text-align: right;

									.title-number {
										font-size: 26rpx;
										font-family: PingFang SC-Regular, PingFang SC;
										font-weight: 400;
										color: #737373;
									}

									.title-price {
										font-size: 26rpx;
										font-family: PingFang SC-Regular, PingFang SC;
										font-weight: 400;
										color: #F84221;
										margin-top: -10rpx;


									}
								}
							}

							.two_middle-title-b {
								display: flex;

								.title-number {
									font-size: 26rpx;
									font-family: PingFang SC-Regular, PingFang SC;
									font-weight: 400;
									color: #737373;
								}

								.title-price {
									font-size: 26rpx;
									font-family: PingFang SC-Regular, PingFang SC;
									font-weight: 400;
									margin-top: -10rpx;

								}
							}
						}


					}

					.list-three {
						margin-top: 46rpx;

						.list-three-one {
							display: flex;
							margin-top: 20rpx;

							.title-img {
								width: 28rpx;
								height: 28rpx;

								margin-top: 5rpx;
								margin-right: 10rpx;

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

							font-size: 26rpx;
							font-family: PingFang SC-Regular,
							PingFang SC;
							font-weight: 400;
							color: #333333;

						}
					}
				}

			}
		}
	}
</style>