sxc-frontend/miniprogram/components/SsNavigation.vue

<template>
	<view class="navigation-modal" :class="{ close: !showModal }" @tap="globalStore.setMenuSwitch(false)"></view>
	<view class="navigation" :class="{ close: !globalStore.menuSwitch, 'no-spread': !globalStore.spread }" :style="{ paddingTop: globalStore.paddingTop + 'px' }">
		<view class="navigation-main">
			<view class="services">
				<template v-if="globalStore.service" v-for="(item, index) in globalStore.service">
					<view class="service-item" :class="getServiceClass(index)" @tap="loadService(item)">
						<image class="service-icon" mode="aspectFit" :src="getImageUrl(item.imgUrl)" />
						<view class="service-content">
							<view class="service-title">{{ item.categoryName }}</view>
							<view class="service-intro">{{ item.profile }}</view>
						</view>
					</view>
				</template>
			</view>
			<div class="common-problem">
				<div class="common-problem-title">
					常见问题
					<button class="refresh" @tap="refresh">
						<uni-load-more class="refresh-icon" v-if="loadingProblems" iconType="circle" :show-text="false" status="loading" color="#7E8AA2" :icon-size="12"></uni-load-more>
						<uni-icons v-else type="refreshempty" size="24rpx" color="#7E8AA2" />
						换一换
					</button>
				</div>
				<div class="problem-list">
					<template v-if="problems" v-for="item in problems">
						<div class="problem-item" @click="quickSend(item.questionContent)">
							<image class="problem-icon" mode="aspectFit" :src="getStaticImageUrl('/images/question-filled.png')" />
							<div class="problem-item-text">{{ item.questionContent }}</div>
						</div>
					</template>
				</div>
			</div>
		</view>
	</view>
</template>

<script>
import { useGlobalStore } from '../stores/global';
import { RequestApi } from '@/api/requestApi';

export default {
	data() {
		return {
			globalStore: useGlobalStore(),
			showModal: false,
			timeoutFlag: null,
			loadingProblems: false,
			problems: [],
			search: {
				keyword: '',
				page: 1,
				size: 6
			}
		};
	},
	mounted() {
		this.getCommonQuestions();
	},
	methods: {
		getServiceClass(index) {
			switch (index % 5) {
				case 1:
					return ' yellow';
				case 2:
					return ' purple';
				case 3:
					return ' yellow2';
				default:
					return '';
			}
		},
		callHotline() {
			this.$emit('callHotline');
		},
		getCommonQuestions() {
			this.loadingProblems = true;
			RequestApi.getCommonQuestionsRandom(this.search.keyword, this.search.page, this.search.size)
				.then((result) => {
					this.problems = result.records;
				})
				.finally(() => {
					this.loadingProblems = false;
				});
		},
		refresh() {
			this.getCommonQuestions();
		},
		quickSend(msg) {
			this.$emit('quickSend', msg);
		},
		loadService(item) {
			this.$emit('loadService', item.id, item.categoryName, item.imgUrl)
		}
	},
	watch: {
		'globalStore.menuSwitch'() {
			if (this.timeoutFlag) {
				clearTimeout(this.timeoutFlag);
			}
			if (this.globalStore.menuSwitch) {
				this.showModal = true;
			} else {
				this.timeoutFlag = setTimeout(() => {
					this.showModal = false;
				}, 300);
			}
		}
	}
};
</script>

<style scoped lang="scss">
@import '@/static/global.scss';

.navigation-modal {
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	z-index: 499;
	background-color: rgba(0, 0, 0, 0.5);
	transition: opacity 0.3s linear;
	display: block;

	&.close {
		display: none !important;
	}
}

.navigation {
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	width: 576rpx;
	z-index: 500;
	display: flex;
	padding-top: 128rpx;
	transition: all 0.3s linear;
	background-color: #ffffff;
	background-repeat: no-repeat;
	background-position: center bottom;
	background-size: cover;
	background-image: url(getImageUrl('/images/background-2.png'));

	.navigation-main {
		width: 100%;
		padding: 0 32rpx;
		overflow: hidden;

		.services {
			padding: 40rpx 0;
			border-bottom: 1px solid #c2dbfd;
			margin-bottom: 20rpx;

			.service-item {
				border-radius: 16rpx;
				padding: 16rpx 24rpx;
				background: linear-gradient(180deg, #fafffd 0%, #e1f5f8 100%);
				margin-bottom: 32rpx;
				display: flex;
				align-items: center;
				box-shadow: 0 8rpx 12rpx 0 #bdd5f4;
				cursor: pointer;

				&.yellow {
					background: linear-gradient(180deg, #ffffff 0%, #f6f0ef 100%);
				}

				&.yellow2 {
					background: linear-gradient(180deg, #fffefd 0%, #fff8e8 100%);
				}

				&.purple {
					background: linear-gradient(180deg, #ffffff 0%, #f2f4ff 57%, #e8ebff 100%);
				}

				&.blue {
					background: linear-gradient(180deg, #f3fbff 0%, #d4efff 100%);
				}

				&:last-child {
					margin-bottom: 0;
				}

				.service-icon {
					width: 80rpx;
					height: 80rpx;
					margin-right: 20rpx;
				}

				.service-content {
					.service-title {
						font-size: 28rpx;
						line-height: 28rpx;
						font-weight: 500;
						color: #101333;
						margin-bottom: 12rpx;
					}

					.service-intro {
						font-size: 24rpx;
						line-height: 24rpx;
						font-weight: 400;
						color: #7e8aa2;
					}
				}
			}
		}

		.common-problem {
			.common-problem-title {
				color: #101333;
				font-size: 0.88rem;
				line-height: 0.88rem;
				font-weight: 600;
				margin-bottom: 1.25rem;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.refresh {
					padding: 0;
					font-size: 0.88rem;
					color: #7e8aa2;
					background-color: transparent;
					height: unset;
					margin: unset;
					border: 0;
					
					&::after {
						display: none;
					}

					.refresh-icon {
						display: inline-block;
					}
				}
			}
			
			.problem-list {
				.problem-item {
					display: flex;
					align-items: center;
					font-size: 0.8rem;
					line-height: 0.8rem;
					margin-bottom: 1.4rem;
					color: #545764;
					cursor: pointer;
					
					.problem-icon {
						margin-right: 0.64rem;
						width: 1rem;
						height: 1rem;
					}
					
					.problem-item-text {
						width: calc(100% - 1.64rem);
						white-space: nowrap; /* 强制文本不换行 */
						overflow: hidden; /* 隐藏超出容器的内容 */
						text-overflow: ellipsis; /* 超出部分显示省略号 */
					}
				}
			}
		}
	}

	&.no-spread {
		transform: translateX(-100%);
	}

	&.close {
		left: -576rpx;

		.navigation-main {
			.services {
				.service-item {
					padding: 0 8rpx;
					justify-content: center;

					.service-icon {
						margin: 0 auto;
					}
				}
			}
		}

		.footer-switch {
			display: block;
		}
	}
}
</style>