sxc-frontend/miniprogram/pages/index/index.vue

<template>
	<view class="contanier" :class="{ spread: spread }">
		<view class="main-contanier">
			<ss-header />
			<template v-if="global.networkIsConnected">
				<ss-navigation @quick-send="quickSend" @call-hotline="callServiceHotline" @load-service="loadService" />
				<view class="main-body" :class="{ show: pagePaddingTop }" :style="bodyStyle">
					<view class="main-scroll">
						<view class="scroll-content">
							<ss-headline />
							<ss-chat ref="chat" @edit-message="editMessage" @quick-send="quickSend" @change-chat="changeChat" />
							<ss-input-box ref="inputBox" @change-chat="changeChat" @new-message="newMessage" />
							<ss-service @load-service="loadService" />
							<ss-common-problem @quick-send="quickSend" />
							<view class="ss-row ss-flex no-margin-bottom">
								<view class="ss-col">
									<ss-grid-entrance title="意见反馈" subject="诚谢建言，共筑精品" :image="getStaticImageUrl('/images/bg07.png')" @tap="navigatorToFeedback" />
								</view>
								<view class="ss-col">
									<ss-grid-entrance title="服务热线" :subject="serviceHotline" :image="getStaticImageUrl('/images/bg08.png')" sub-class="yellow" @tap="callServiceHotline" />
								</view>
							</view>
						</view>
					</view>
				</view>
			</template>
			<view v-else class="no-network">
				<view class="network-center">
					<image class="no-network-image" mode="aspectFit" src="/static/images/no-network.png" />
					<view class="no-network-text">哎呀，网络连接失败~</view>
					<button class="no-network-button" @tap="checkNetwork">刷新试试</button>
				</view>
			</view>
		</view>
		<image class="background-image" mode="aspectFill" :src="getStaticImageUrl('/images/bg-page.png')"></image>
		<ss-disclaimer />
	</view>
</template>

<script>
import SsHeader from '@/components/SsHeader.vue';
import SsNavigation from '@/components/SsNavigation.vue';
import SsHeadline from '@/components/SsHeadline.vue';
import SsInputBox from '@/components/SsInputBox.vue';
import SsService from '@/components/SsService.vue';
import SsCommonProblem from '@/components/SsCommonProblem.vue';
import SsGridEntrance from '@/components/SsGridEntrance.vue';
import SsChat from '@/components/ss_chat/SsChat.vue';
import SsDisclaimer from '@/components/SsDisclaimer.vue';

import { useGlobalStore } from '@/stores/global';
import { watch } from 'vue';

export default {
	components: {
		SsHeader,
		SsNavigation,
		SsHeadline,
		SsInputBox,
		SsService,
		SsCommonProblem,
		SsGridEntrance,
		SsChat,
		SsDisclaimer
	},
	data() {
		return {
			global: useGlobalStore(),
			timeoutFlag: null
		};
	},
	computed: {
		serviceHotline() {
			return this.global.basic?.serviceHotline ?? '';
		},
		spread() {
			return this.global.spread;
		},
		pagePaddingTop() {
			return this.global.paddingTop;
		},
		bodyStyle() {
			let style = {};
			if (this.global.paddingTop > 0) {
				style = {
					paddingTop: this.global.paddingTop + 'px',
					height: 'calc(100% - ' + this.global.paddingTop + 'px)'
				};
			}
			return style;
		}
	},
	mounted() {},
	methods: {
		toggleSpread() {
			this.spread = !this.spread;
		},
		setSpread(val) {
			this.spread = val;
		},
		callServiceHotline() {
			uni
				.makePhoneCall({
					phoneNumber: this.serviceHotline
				})
				.then(() => {})
				.catch(() => {});
		},
		navigatorToFeedback() {
			uni.navigateTo({
				url: '/pages/index/feedback'
			});
		},
		quickSend(msg) {
			if (this.$refs.inputBox) {
				this.$refs.inputBox.quickSend(msg);
			}
		},
		loadService(categoryId, title, avatar) {
			if (this.$refs.inputBox) {
				this.$refs.inputBox.loadService(categoryId, title, avatar);
			}
		},
		editMessage(msg) {
			if (this.$refs.inputBox) {
				this.$refs.inputBox.editMessage(msg);
			}
		},
		changeChat() {
			if (this.$refs.chat) {
				this.$refs.chat.scrollToBottom();
			}
		},
		newMessage() {
			if (this.$refs.chat) {
				this.$refs.chat.newMessage();
			}
		},
		checkNetwork() {
			uni.getNetworkType({
				success: (e) => {
					if (e.networkType == 'none') {
						this.global.setNetworkIsConnected(false);
						uni.showToast({
							title: '未检测到网络',
							icon: 'none'
						});
					} else {
						this.global.setNetworkIsConnected(true);
						this.loadBasic();
						this.loadService();
					}
				},
				fail: () => {
					uni.showToast({
						title: '网络刷新失败',
						icon: 'none'
					});
				}
			});
		}
	}
};
</script>

<style scoped lang="scss">
.contanier {
	width: 100%;
	height: 100vh;

	.background-image {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 20;
		opacity: 1;
		transition: opacity 0.3s linear;
	}

	.main-contanier {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 100;

		.main-body {
			position: relative;
			opacity: 0;
			transition: opacity 0.3s linear;

			&.show {
				opacity: 1;
			}

			.main-scroll {
				width: 100%;
				height: 100%;
				overflow: hidden auto;

				.scroll-content {
					padding: 32rpx;
					padding-bottom: 64rpx;

					.ss-row {
						display: flex;
						justify-content: space-between;
						margin-bottom: 1.6rem;

						&.no-margin-bottom {
							margin-bottom: 0;
						}

						&.ss-flex {
							display: flex;

							.ss-col {
								width: calc(50% - 0.47rem);
								margin-bottom: 0;
							}
						}

						.ss-col {
							width: calc(50% - 0.9rem);
						}
					}
				}
			}
		}

		.no-network {
			position: fixed;
			top: 0;
			left: 0;
			bottom: 0;
			right: 0;
			z-index: 1000;
			background-color: rbga(255, 255, 255, 0.3);

			.network-center {
				position: absolute;
				top: 40%;
				left: 50%;
				width: 80%;
				text-align: center;
				transform: translate(-50%, -50%);

				.no-network-image {
					display: block;
					width: 360rpx;
					height: 240rpx;
					margin: 0 auto 32rpx auto;
				}

				.no-network-text {
					font-size: 32rpx;
					text-align: center;
					margin-bottom: 36rpx;
					color: #7e8aa2;
				}

				.no-network-button {
					border-radius: 100rpx;
					display: inline-block;
					padding: 0 120rpx;
					color: #ffffff;
					margin: 0 auto;
					background-color: #2943d6;

					&::after {
						display: none;
					}
				}
			}
		}
	}

	&.spread {
		.background-image {
			opacity: 0;
		}

		.main-contanier {
			.main-body {
				.main-scroll {
					overflow: hidden;
				}
			}
		}
	}
}
</style>