myc/pages/merchant/merchant.vue

<template>
	<view class="body">
		<view class="background"></view>
		<view class="content">
			<view class="userInfo">
				<view class="userInfo-box">
					<view class="userInfo-img"><image class="portrait" src="../../static/error/missing-face.png"></image></view>
					<view class="userInfo-xinxi">
						<view class="title"><text>满园春泰州店</text></view>
						<view class="phone"><text>19999999999</text></view>
					</view>
					<view class="balance">可用余额￥20000</view>
				</view>
			</view>
			<view class="userInfoList">
				<view class="userInfoList-top" @click="sao()">
					<view class="top"><image src="../../static/merchant/saoma.png" mode=""></image></view>
					扫码核销
				</view>
				<view class="userInfoList-top" @click="navTo('/pages/merchant/storeQr')">
					<view class="top"><image src="../../static/merchant/erweima.png" mode=""></image></view>
					店铺二维码
				</view>
				<view class="userInfoList-bottom" @click="navTo('/pages/merchant/finance')">
					<view class="bottom"><image src="../../static/merchant/money.png" mode=""></image></view>
					店铺财务
				</view>
				<view class="userInfoList-bottom" @click="navTo('/pages/merchant/order')">
					<view class="bottom"><image src="../../static/merchant/order.png" mode=""></image></view>
					订单管理
				</view>
				<view class="userInfoList-bottom" @click="navTo('/pages/merchant/commodity')">
					<view class="bottom"><image src="../../static/merchant/shop.png" mode=""></image></view>
					商品管理
				</view>
				<view class="userInfoList-bottom">
					<view class="bottom"><image src="../../static/merchant/xiadan.png" mode=""></image></view>
					在线下单
				</view>
				<view class="userInfoList-bottom" @click="navTo('/pages/merchant/vipDetail')">
					<view class="bottom"><image src="../../static/merchant/vip.png" mode=""></image></view>
					店铺会员
				</view>
				<view class="userInfoList-bottom" @click="navTo('/pages/merchant/storeData')">
					<view class="bottom"><image src="../../static/merchant/dianpu.png" mode=""></image></view>
					店铺数据
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {};
	},
	methods: {
		//跳转
		navTo(url) {
			uni.navigateTo({
				url
			});
		},
		//调取扫描二维码
		sao() {
			let obj = this;
			// #ifndef H5
			uni.scanCode({
				success(e) {
					obj.orderVerific(e.result);
				}
			});
			// #endif
			// #ifdef H5
			this.weichatObj.scanQRCode({
				needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
				scanType: ['qrCode', 'barCode'], // 可以指定扫二维码还是一维码，默认二者都有
				success: function(res) {
					obj.orderVerific(res.resultStr); // 当needResult 为 1 时，扫码返回的结果
				}
			});
			// #endif
		}
	}
};
</script>

<style lang="scss">
page {
	height: 100%;
	background-color: #eeeded;
	padding: 0;
	margin: 0;
}

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

.background {
	width: 100%;
	height: 220rpx;
	background-color: #75e5b6;
}

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

	.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 {
				width: 100%;
				height: 100%;
			}
		}

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

			.phone {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #666666;
				line-height: 21rpx;
				margin-bottom: 40rpx;
			}
		}

		.balance {
			text-align: center;
			width: 500rpx;
			height: 60rpx;
			background: #52c696;
			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-top {
		position: relative;
		margin: 15rpx 0;
		display: flex;

		justify-content: center;
		align-items: center;
		width: 340rpx;
		height: 100rpx;
		background: #ffffff;
		border-radius: 20rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #4d4d4d;
		line-height: 21rpx;

		.top {
			position: absolute;
			margin-left: -230rpx;
			width: 50rpx;
			height: 50rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}
	}
	.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;
		.bottom {
			margin-bottom: 20rpx;
			width: 68rpx;
			height: 68rpx;
			image {
				width: 100%;
				height: 100%;
			}
		}
	}
}
</style>