shop-applet/pages/index/unregist.vue

<!-- 未开通商户 -->
<template>
	<view class="unregist">

		<view class="icon" @click="handleBack">
			<u-icon name="arrow-left" color="#fff" size="20"></u-icon>
		</view>

		<view class="head">
			<image src="@/static/images/f.png"></image>
			<text>暂无信息</text>
		</view>

		<view class="con">
			<image src="https://lihai001.oss-cn-chengdu.aliyuncs.com/def/e70e7202404021040448288.png"></image>
			<text class="empty">暂无数据</text>
			<text class="no_shop">您还没有开通商户</text>
		</view>

		<view class="btn c_active" @click="handleOpen">
			<text>点击开通</text>
		</view>
	</view>
</template>

<script>
	export default {
		methods: {
			handleBack() {
				console.log(1241)
				// #ifdef APP-PLUS
				uni.sendHostEvent('backApp', (ret) => {
					//发送消息成功回调
					console.log('关闭应用' + JSON.stringify(ret));
				});
				// #endif
			},

			handleOpen() {
				// #ifdef APP-PLUS
				uni.sendHostEvent('closeAppToOpenShop', (ret) => {
					//发送消息成功回调
					console.log('关闭应用' + JSON.stringify(ret));
				});
				// #endif
			}
		}
	}
</script>

<style lang="scss">
	.unregist {
		position: relative;

		.icon {
			position: absolute;
			top: calc(30rpx + var(--status-bar-height));
			left: 30rpx;
			z-index: 10;
		}

		.head {
			display: flex;
			align-items: center;
			width: 100%;
			height: 360rpx;
			background-image: url(https://lihai001.oss-cn-chengdu.aliyuncs.com/def/a2e04202404021019436262.webp);
			background-size: cover;
			background-repeat: no-repeat;
			background-position: center;
			margin-bottom: 200rpx;

			image {
				width: 112rpx;
				height: 112rpx;
				border-radius: 50%;
				margin: 0 12rpx 0 60rpx;
			}

			text {
				font-size: 28rpx;
				color: #FFFFFF;
			}
		}

		.con {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			image {
				width: 512rpx;
				height: 334rpx;
				margin: 0 auto;
			}

			.empty {
				margin-bottom: 16rpx;
				font-size: 34rpx;
				color: #000000;
			}

			.no_shop {
				font-size: 24rpx;
				color: #999999;
				line-height: 0rpx;
			}
		}

		.btn {
			position: fixed;
			left: 50%;
			transform: translateX(-50%);
			bottom: 80rpx;
			width: 650rpx;
			height: 88rpx;
			line-height: 88rpx;
			background: linear-gradient(359deg, #72BE53 0%, #46B03A 100%);
			border-radius: 88rpx;
			text-align: center;

			text {
				font-weight: 600;
				font-size: 30rpx;
				color: #F5F5F5;
			}
		}
	}
</style>