cgst/pages/shop/shop.vue

<template>
	<view class="body">
		<view class="vheigh"></view>
		<view class="background"></view>
		<view class="content">
			<view class="userInfo">
				<view class="userInfo-box">
					<view class="userInfo-img" v-if="store_info"><image class="portrait" :src="store_info.image"></image></view>
					<view class="userInfo-img" v-else><image class="portrait" src="../../static/error/missing-face.png"></image></view>
					<view class="userInfo-xinxi">
						<view class="title clamp">
							<text>{{ store_info ? store_info.name : '总店' }}</text>
						</view>
						<view class="phone">
							<text>{{ store_info ? store_info.phone : '' }}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="saoma" @click="sao()">
				<view class="saoma-left">
					<image class="saoma-icon" src="../../static/img/shop1.png" mode=""></image>
					<view class="saoma-font">扫码登录</view>
				</view>
				<view class="saoma-jt"><image src="../../static/img/shop2.png" mode=""></image></view>
			</view>
			<view class="userInfoList">
				<view class="userInfoList-bottom" @click="navTo('/pages/shop/turnover')">
					<view class="bottom"><image class="bottom-icon1" src="../../static/img/shop3.png" mode=""></image></view>
					<view class="num">￥{{ achievement }}</view>
					<view class="font">成交金额</view>
				</view>
				<view class="userInfoList-bottom" @click="navTo('/pages/shop/order?id=' + userInfo.store_id)">
					<view class="bottom"><image class="bottom-icon2" src="../../static/img/shop4.png" mode=""></image></view>
					<view class="num">{{ order_count }}</view>
					<view class="font">订单总数</view>
				</view>
				<view class="userInfoList-bottom" @click="navTo('/pages/shop/employee?id=' + userInfo.store_id)">
					<view class="bottom"><image class="bottom-icon3" src="../../static/img/shop5.png" mode=""></image></view>
					<view class="num">￥{{ achievement_waiter || 0 }}</view>
					<view class="font">员工业绩</view>
				</view>
				<!-- <view class="userInfoList-bottom" @click="navTo('/pages/shop/vipDetail')"> -->
				<view class="userInfoList-bottom">
					<view class="bottom"><image class="bottom-icon4" src="../../static/img/shop6.png" mode=""></image></view>
					<view class="num">{{ store_info ? store_info.valid_time : 0 }}</view>
					<view class="font">曝光量</view>
				</view>
				<view class="userInfoList-bottom" @click="navTo('/pages/shop/myriad?id=' + userInfo.store_id)">
					<view class="bottom"><image class="bottom-icon5" src="../../static/img/shop7.png" mode=""></image></view>
					<view class="num">{{ over }}</view>
					<view class="font">破万大神</view>
				</view>
				<view class="userInfoList-bottom" @click="navTo('/pages/shop/product')">
					<view class="bottom"><image class="bottom-icon6" src="../../static/img/shop8.png" mode=""></image></view>
					<view class="num">{{ productNum }}</view>
					<view class="font">热卖项目排行</view>
				</view>
				<!-- <view class="userInfoList-bottom" @click="navTo('/pages/shop/fissioned')"> -->
				<view class="userInfoList-bottom">
					<view class="bottom"><image class="bottom-icon7" src="../../static/img/shop9.png" mode=""></image></view>
					<view class="num">{{ user_explode }}</view>
					<view class="font">已裂变客数</view>
				</view>
				<!-- <view class="userInfoList-bottom" @click="navTo('/pages/shop/fission')">
					<view class="bottom"><image class="bottom-icon8" src="../../static/img/shop10.png" mode=""></image></view>
					<view class="num">30</view>
					<view class="font">待裂变客数</view>
				</view> -->
				<view class="userInfoList-bottom" @click="navTo('/pages/shop/subbranch')" v-if="userInfo.user_rule == 'admin'">
					<view class="bottom"><image class="bottom-icon9" src="../../static/img/shop11.png" mode=""></image></view>
					<view class="num">{{ shopNum }}</view>
					<view class="font">分店数据</view>
				</view>
				<view class="userInfoList-bottom" @click="navTo('/pages/shop/group')">
					<view class="bottom"><image class="bottom-icon8" src="../../static/img/shop10.png" mode=""></image></view>
					<view class="num"></view>
					<view class="font">分组数据</view>
				</view>
				<view class="userInfoList-bottom" @click="navTo('/pages/dp/infoOne')" v-if="userInfo.user_rule == 'admin'">
					<view class="bottom"><image class="bottom-icon10" src="../../static/img/shop12.png" mode=""></image></view>
					<view class="num"></view>
					<view class="font">大屏数据1</view>
				</view>
				<view class="userInfoList-bottom" @click="navTo('/pages/dp/infoTwo')" v-if="userInfo.user_rule == 'admin'">
					<view class="bottom"><image class="bottom-icon10" src="../../static/img/shop12.png" mode=""></image></view>
					<view class="num"></view>
					<view class="font">大屏数据2</view>
				</view>
			</view>
		</view>
		<uni-popup ref="popuphx" class="agree-wrapper">
			<view class="hx-wrapper">
				<view class="hx-img"><image src="../../static/img/hxbg.png" mode=""></image></view>
				<view class="hx-body">
					<view class="hx-title">输入核销码核销</view>
					<input type="text" v-model="code" placeholder="请输入核销码" placeholder-class="hx-placeholder" />
					<view class="hx-btn" @click="qhx">立即核销</view>
				</view>
				<view class="hx-close" @click="close"><image src="../../static/icon/close.png" mode=""></image></view>
			</view>
		</uni-popup>
		<u-tabbar
			v-if="userInfo.user_rule == 'leader' || userInfo.user_rule == 'admin'"
			v-model="current"
			:list="tabbar"
			active-color="#FF4C4C"
			inactive-color="#666666"
		></u-tabbar>
		<u-tabbar v-else v-model="current" :list="tabbar1" active-color="#FF4C4C" inactive-color="#666666"></u-tabbar>
	</view>
</template>

<script>
import { mapState, mapMutations } from 'vuex';
import { tabbar, tabbar1 } from '@/utils/tabbar.js';
import { getStoreGoods } from '@/api/product.js';
import { userinfo, h5Auth } from '@/api/user.js';
import { store, over10000, store_list, product } from '@/api/info.js';
// #ifdef H5
import { weixindata } from '@/utils/wxAuthorized';
// #endif
export default {
	// #ifdef MP
	onShareAppMessage: function(res) {
		if (res.from === 'button') {
			// 来自页面内分享按钮
			let pages = getCurrentPages();
			// 获取当前页面
			let page = pages[pages.length - 1];
			let path = '/' + page.route + '?';
			// 保存传值
			for (let i in page.options) {
				path += i + '=' + page.options[i] + '&';
			}
			// 保存邀请人
			path += 'shopId=' + this.userInfo.store_info.id + '&spread=' + this.userInfo.uid;
			let data = {
				path: path,
				imageUrl: this.userInfo.store_info.image,
				title: this.userInfo.store_info.name
			};
			console.log('data', data);
			return data;
		}
	},
	// #endif
	data() {
		return {
			current: 1,
			tabbar: tabbar,
			tabbar1: tabbar1,
			code: '',
			achievement: '',
			order_count: '',
			user_explode: '',
			store_info: {},
			over: '',
			shopNum: '',
			productNum: '',
			achievement_waiter: '',
			store_id: ''
		};
	},
	computed: {
		...mapState(['userInfo'])
	},
	onLoad(option) {
		// this.loadData();
	},
	// 进入页面刷新数据
	onShow() {
		this.loadData();
	},
	methods: {
		loadData() {
			store({}, this.userInfo.store_id).then(({ data }) => {
				this.achievement = data.achievement;
				this.order_count = data.order_count;
				this.user_explode = data.user_explode;
				this.store_info = data.store_info;
				this.achievement_waiter = data.achievement_waiter;
				console.log(data, '123456');
			});
			over10000({}).then(e => {
				this.over = e.data.count;
				console.log(this.over, 111);
			});
			console.log(this.userInfo.user_rule == 'admin');
			if (this.userInfo.user_rule == 'admin') {
				store_list({}).then(e => {
					this.shopNum = e.data.count;
					console.log(this.shopNum, 111);
				});
			}
			product({}).then(e => {
				this.productNum = e.data.count;
				console.log(this.productNum, 111);
			});
		},

		//调取扫描二维码
		sao() {
			let obj = this;

			// #ifndef H5
			uni.scanCode({
				success(e) {
					obj.code = e.result;
					obj.qhx();
					// obj.$refs.popuphx.open();
					// console.log(obj.$refs.popuphx);
				}
			});
			// #endif
			// #ifdef H5
			let wx = require('jweixin-module');
			wx.scanQRCode({
				needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
				scanType: ['qrCode', 'barCode'], // 可以指定扫二维码还是一维码，默认二者都有
				success: function(res) {
					obj.code = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
					obj.$refs.popuphx.open();
				}
			});
			// #endif
		},
		qhx() {
			console.log('进入');
			h5Auth({}, this.code)
				.then(e => {
					this.$api.msg('登录成功');
					this.close();
				})
				.catch(e => {
					console.log(e);
				});
		},
		//跳转
		navTo(url) {
			console.log(url, '123456');
			uni.navigateTo({
				url
			});
		},
		close() {
			this.$refs.popuphx.close();
			this.code = '';
		}
	}
};
</script>

<style lang="scss">
page {
	height: auto;
	min-height: 100%;
	background-color: #eeeded;
	padding: 0;
	margin: 0;
}
// 弹窗
.hx-wrapper {
	width: 536rpx;
	height: 630rpx;
	position: relative;

	// background-color: #fff;
	.hx-img {
		width: 536rpx;
		height: 281rpx;

		image {
			width: 536rpx;
			height: 281rpx;
		}
	}

	.hx-close {
		position: absolute;
		left: 243rpx;
		bottom: -80rpx;
		width: 52rpx;
		height: 52rpx;

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

	.hx-body {
		width: 536rpx;
		height: 349rpx;
		background-color: #fff;
		border-radius: 0 0 10rpx 10rpx;

		.hx-title {
			width: 536rpx;
			font-size: 36rpx;
			font-weight: 500;
			color: #333333;
			line-height: 1;
			padding-top: 42rpx;
			text-align: center;
		}

		input {
			width: 439rpx;
			height: 68rpx;
			background: #dbf3e9;
			border-radius: 10rpx;
			margin: 39rpx auto 0;
			padding-left: 26rpx;

			.hx-placeholder {
				font-size: 26rpx;
				font-weight: 500;
				color: #ff4c4c;
			}
		}

		.hx-btn {
			margin: 44rpx auto 0;
			width: 353rpx;
			height: 71rpx;
			background: #ff4c4c;
			border-radius: 34rpx;
			font-size: 36rpx;
			font-weight: 500;
			color: #f8f9f9;
			line-height: 71rpx;
			text-align: center;
		}
	}
}

.saoma {
	width: 690rpx;
	background: #ffffff;
	border-radius: 20rpx;
	margin: 20rpx auto;
	display: flex;
	justify-content: space-between;
	padding: 24rpx 46rpx;
	align-items: center;
	.saoma-left {
		display: flex;
		justify-content: center;
		align-items: center;
		.saoma-icon {
			width: 50rpx;
			height: 50rpx;
		}
		.saoma-font {
			margin-left: 20rpx;
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #4d4d4d;
		}
	}
	.saoma-jt {
		width: 18rpx;
		height: 30rpx;
		image {
			width: 100%;
			height: 100%;
		}
	}
}

.content {
	background-color: #eeeded;
	margin: 0 auto;
	width: 690rpx;
	display: flex;
	flex-direction: column;
}

.background {
	width: 750rpx;
	height: 220rpx;
	background-color: #ff4c4c;
}
.vheigh {
	height: var(--status-bar-height);
	background-color: #ff4c4c;
}

.userInfo {
	margin-top: -110rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	background-color: #f9f9f9;
	border-radius: 19rpx;
	width: 100%;
	height: 220rpx;

	.userInfo-box {
		display: flex;
		flex-direction: column;
		align-items: center;

		.userInfo-img {
			margin: -65rpx 0 0 0;
			width: 130rpx;
			height: 130rpx;
			border: 5rpx solid #fff;
			border-radius: 50%;

			image {
				border-radius: 50%;
				width: 100%;
				height: 100%;
			}
		}

		.userInfo-xinxi {
			.title {
				margin: 20rpx 0;
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #333333;
				text-align: center;
			}

			.phone {
				text-align: center;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #666666;
				line-height: 21rpx;
			}
		}

		.balance {
			margin-top: 10rpx;
			text-align: center;
			width: 500rpx;
			height: 60rpx;
			background: #ff4c4c;
			border-radius: 30rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #ffffff;
			line-height: 60rpx;
		}
	}
}

.userInfoList {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	.userInfoList-bottom {
		margin-bottom: 15rpx;
		width: 340rpx;
		height: 250rpx;
		background: #f9f9f9;
		border-radius: 20rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		line-height: 1;
		.bottom {
			.bottom-icon1 {
				width: 68rpx;
				height: 68rpx;
			}
			.bottom-icon2 {
				width: 60rpx;
				height: 68rpx;
			}
			.bottom-icon3 {
				width: 66rpx;
				height: 74rpx;
			}
			.bottom-icon4 {
				width: 76rpx;
				height: 62rpx;
			}
			.bottom-icon5 {
				width: 56rpx;
				height: 52rpx;
			}
			.bottom-icon6 {
				width: 66rpx;
				height: 70rpx;
			}
			.bottom-icon7 {
				width: 70rpx;
				height: 60rpx;
			}
			.bottom-icon8 {
				width: 74rpx;
				height: 52rpx;
			}
			.bottom-icon9 {
				width: 74rpx;
				height: 68rpx;
			}
			.bottom-icon10 {
				width: 74rpx;
				height: 74rpx;
			}
		}
		.num {
			margin-top: 16rpx;
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333333;
		}
		.font {
			margin-top: 10rpx;
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #4d4d4d;
		}
	}
}
</style>