deepChartVueApp/pages/customerServicePlatform/csPlatformIndex.vue

<template>
	<view class="main">
		<view class="top" :style="{height:iSMT+'px'}"></view>

		<!-- 头部导航 -->
		<view class="header">
			<view class="back-icon">
				<image src="/static/customer-service-platform/cs-platform-back.png" class="header-icon-image"></image>
			</view>
			<view class="title">{{headerTitle}}</view>
			<view class="notification-icon">
				<image src="/static/customer-service-platform/message.png" class="header-icon-image"></image>
			</view>
		</view>
		<!-- 内容区域 - 使用滚动视图 -->
		<scroll-view scroll-y class="content-container">
			<view class="content-header">
				<view class="logo">
					<image mode="aspectFit" src="/static/customer-service-platform/ellipse-dc-img.png"></image>
				</view>
				<view class="greeting">
					<text class="greet-title">嗨，我能为你做点什么？</text>
					<text class="greet-sub">DeepChart随时为您提供服务</text>
				</view>
			</view>
			<!--猜你想问卡片部分-->
			<view class="card">
				<view class="suggest-header">
					<text class="suggest-title">猜你想问</text>
					<view class="swap" @click="shuffleQuestions">
						<image class="swap-icon" src="/static/customer-service-platform/refresh-icon.png"></image>
						<text class="swap-title">换一换</text>
					</view>
				</view>
				<view class="card-line"></view>
				<view class="suggest-list">
					<view class="suggest-item" v-for="(q, idx) in showQuestions" :key="q.id"
						@click="onQuestionClick(q)">
						<view class="left">
							<view :class="['num', 'num-' + ((idx % 5) + 1)]">{{ idx + 1 }}</view>
						</view>

						<view class="mid">
							<text class="q-text">{{ q.text }}</text>
						</view>

						<view class="right">
							<text class="arrow">›</text>
						</view>
					</view>
				</view>
			</view>
			<!--反馈卡片部分-->
			<text class="feedback-card-title">反馈中心</text>
			<view class="card">
				<view class="suggest-header">
					<text class="feedback-title">填写反馈内容</text>
				</view>
				<view class="card-line"></view>
				<textarea class="feedback-input" placeholder="请描述您想反馈的内容 最多可输入200字" maxlength="200"
					v-model="feedbackText" />
				<view class="meta-row">
					<text class="char-count">{{ feedbackText.length }}/200</text>
				</view>
				<view class="suggest-header">
					<text class="upload-img-tip">上传图片</text>
				</view>
				<view class="upload-row">
					<view class="img-slot" v-for="(img, index) in images" :key="index">
						<image :src="img" mode="scaleToFill" class="slot-img" />
						<button v-if="img" class="remove" @click="removeImage(index)">×</button>
					</view>
					<view class="img-slot" v-if="images.length < 9">
						<view class="slot-empty" @click="chooseImage()">
							<image src="/static/customer-service-platform/camera.png" class="camera-icon" />
						</view>
					</view>
					<text class="tip-text" v-if="images.length === 0">最多添加9张图片</text>
				</view>

				<button class="feedback-btn" @click="submit">提交</button>
			</view>
			<!--历史反馈卡片部分-->
			<view class="card">
				<text class="feedback-title">历史反馈内容</text>
				<view class="card-line"></view>
				<button class="feedback-btn" @click="viewHistory">查看</button>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				headerTitle: '智能客服中台',
				iSMT: 0,
				questions: [{
						id: 1,
						text: '如何注册账号？'
					},
					{
						id: 2,
						text: '为什么无法注册账户？'
					},
					{
						id: 3,
						text: 'DeepChart的主要功能有哪些？'
					},
					{
						id: 4,
						text: '什么是机构行为？'
					},
					{
						id: 5,
						text: '为什么机构行为很重要？'
					},
					{
						id: 6,
						text: '如何绑定银行卡？'
					},
					{
						id: 7,
						text: '忘记密码怎么办？'
					}
				],
				showQuestions: [],
				feedbackText: '',
				images: [],
				capacity: 2
			}
		},
		mounted() {
			// 状态栏高度
			this.iSMT = uni.getSystemInfoSync().statusBarHeight;
		},
		created() {
			this.shuffleQuestions();
		},
		methods: {
			onBack() {
				// uni.navigateBack 或自定义
				if (typeof uni !== 'undefined') uni.navigateBack();
			},
			shuffleQuestions() {
				// 随机取前4条或展示5条
				const arr = this.questions.slice();
				for (let i = arr.length - 1; i > 0; i--) {
					const j = Math.floor(Math.random() * (i + 1));
					[arr[i], arr[j]] = [arr[j], arr[i]];
				}
				this.showQuestions = arr.slice(0, 5);
			},
			onQuestionClick(q) {
				// 可跳转到问答页或直接填入反馈
				this.feedbackText = q.text;
			},
			chooseImage() {
				const that = this;
				if (typeof uni === 'undefined' || !uni.chooseImage) return;

				const remain = 9 - (that.images ? that.images.length : 0);
				if (remain <= 0) {
					if (typeof uni !== 'undefined') uni.showToast({
						title: '最多只能上传9张',
						icon: 'none'
					});
					return;
				}

				uni.chooseImage({
					count: remain, // 最多选取剩余可上传数量
					sizeType: ['original', 'compressed'],
					sourceType: ['album', 'camera'],
					success(res) {
						// res.tempFilePaths 是数组（小程序/APP）
						const paths = res.tempFilePaths || (res.tempFiles && res.tempFiles.map(f => f.path)) || [];
						// 追加到 images（Vue2 下 push 是响应式的）
						for (let p of paths) {
							if (that.images.length < 9) {
								that.images.push(p);
							}
						}
						// 可选：若要立即上传到服务器，可在这里调用 uni.uploadFile
					},
					fail(err) {
						// 处理取消或失败（不需要提示太多）
						// console.log('chooseImage fail', err)
					}
				});
			},

			removeImage(index) {
				// 删除并保持响应
				this.images.splice(index, 1);
			},
			submit() {
				if (!this.feedbackText.trim()) {
					if (typeof uni !== 'undefined') uni.showToast({
						title: '请填写反馈内容',
						icon: 'none'
					});
					return;
				}
				// 模拟上传
				if (typeof uni !== 'undefined') uni.showLoading({
					title: '提交中...'
				});
				setTimeout(() => {
					if (typeof uni !== 'undefined') {
						uni.hideLoading();
						uni.showToast({
							title: '提交成功',
							icon: 'success'
						});
					} else {
						console.log('提交数据', {
							text: this.feedbackText,
							images: this.images
						});
					}
					// 清空
					this.feedbackText = '';
					this.images = [null, null];
				}, 1000);
			},
			viewHistory() {
				// 跳转到历史页
				if (typeof uni !== 'undefined') uni.navigateTo({
					url: '/pages/customerServicePlatform/historyRecord'
				});
			}
		}
	}
</script>

<style scoped>
	.main {
		display: flex;
		flex-direction: column;
		height: 100vh;
		background-color: #ffffff;
	}

	.header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 30rpx;
		background-color: #ffffff;
	}

	.title {
		color: #000000;
		text-align: center;
		font-size: 32rpx;
		font-style: normal;
		font-weight: 400;
	}

	.back-icon,
	.notification-icon {
		width: 40rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.header-icon-image {
		width: 40rpx;
		height: 40rpx;
		object-fit: contain;
	}

	.content-container {
		padding: 20rpx;
		width: 100%;
		box-sizing: border-box;
		overflow-x: hidden;
	}


	.content-header {
		display: flex;
		align-items: center;
		gap: 24rpx;
		padding: 0 60rpx;
		width: 100%;
		box-sizing: border-box;
		height: 188rpx;
	}

	.logo {
		width: 120rpx;
		height: 120rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		flex: 0 0 112rpx;
	}

	.greeting {
		display: flex;
		flex-direction: column;
		justify-content: center;
		flex: 1 1 auto;
	}

	.greet-title {
		color: #000;
		font-size: 40rpx;
		font-style: normal;
		font-weight: 500;
		line-height: normal;
		margin: 0;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.greet-sub {
		color: #838383;
		font-size: 28rpx;
		font-style: normal;
		font-weight: 400;
		line-height: normal;
		margin-top: 12rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.card {
		width: 90%;
		margin: 0 auto;
		border-radius: 16rpx;
		padding: 20rpx 40rpx;
		box-sizing: border-box;
		border-radius: 12rpx;
		border: 4rpx solid #FCC8D4;
		background: linear-gradient(180deg, #FCC8D3 0%, #FEF0F3 30%, #FFF 100%);
		margin-bottom: 20rpx;
	}

	.suggest-header {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.suggest-title {
		color: #000000;
		font-size: 32rpx;
		font-style: normal;
		font-weight: 400;
		line-height: normal;
	}

	.swap {
		display: flex;
		align-items: center;
		transition: transform 0.1s ease, background-color 0.1s ease;
	}

	.swap:active {
		transform: scale(0.95);
	}

	.swap-icon {
		width: 30rpx;
		height: 30rpx;
	}

	.swap-title {
		padding-left: 8rpx;
		color: #000000;
		font-size: 24rpx;
		font-style: normal;
		font-weight: 400;
		line-height: normal;
	}

	.suggest-list {
		margin-top: 20rpx;
	}

	.card-line {
		margin-top: 20rpx;
		width: 100%;
		height: 2rpx;
		border-radius: 2rpx;
		background: #FFF;
	}

	.suggest-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-top: 10rpx;
		border-radius: 12rpx;
		margin-bottom: 20rpx;
		width: 100%;
		box-sizing: border-box;
	}

	.left {
		width: 72rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		padding-right: 12rpx;
	}

	.num {
		font-size: 40rpx;
		font-style: normal;
		font-weight: 700;
		line-height: normal;
	}

	.num-1 {
		color: #df5662;
	}

	.num-2 {
		color: #ec6d4f;
	}

	.num-3 {
		color: #f3ba40;
	}

	.num-4 {
		color: #9296a0;
	}

	.num-5 {
		color: #9296a0;
	}

	.mid {
		flex: 1 1 auto;
		min-width: 0;
	}

	.q-text {
		display: block;
		color: #333;
		font-size: 28rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.right {
		width: 48rpx;
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}

	.arrow {
		color: #cfcfcf;
		font-size: 36rpx;
	}

	.suggest-item:active {
		background: rgba(255, 77, 128, 0.06);
	}

	.feedback-card-title {
		display: flex;
		justify-content: center;
		color: #000000;
		font-size: 32rpx;
		font-weight: 700;
		line-height: 40rpx;
		width: 100%;
		margin-bottom: 20rpx;
	}

	.feedback-title {
		color: #000000;
		font-size: 32rpx;
		font-style: normal;
		font-weight: 400;
		line-height: normal;
	}

	.feedback-input {
		width: 100%;
		display: flex;
		padding: 20rpx;
		flex-direction: column;
		box-sizing: border-box;
		align-items: flex-start;
		gap: 12rpx;
		align-self: stretch;
		border-radius: 12rpx;
		border: 2rpx solid #F0F1F1;
		margin-top: 20rpx;
		display: flex;
		background: #FFF;
		color: #8a8a8a;
		font-size: 24rpx;
		font-weight: 700;
		line-height: normal;
	}

	.meta-row {
		display: flex;
		justify-content: flex-end;
		margin-top: 12rpx;
	}

	.char-count {
		color: #999
	}

	.upload-img-tip {
		color: #000000;
		font-size: 24rpx;
		font-style: normal;
		font-weight: 400;
		line-height: normal;
	}

	.upload-row {
		display: flex;
		justify-content: flex-start;
		align-items: flex-start;
		align-content: flex-start;
		flex-wrap: wrap;
		gap: 20rpx;
		margin-top: 20rpx;
		width: 100%;
	}

	.img-slot {
		width: calc((100% - 2 * 30rpx) / 3);
		aspect-ratio: 1 / 1;
		border-radius: 6px;
		border: 1px solid #F0F1F1;
		background: #FFF;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		overflow: hidden;
		box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.08);
		transition: transform 0.2s ease;
	}

	.slot-empty {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.camera-icon {
		width: 34rpx;
		height: 34rpx;
	}

	.slot-img {
		width: 100%;
		height: 100%;
		border-radius: 16rpx;
	}

	.remove {
		position: absolute;
		right: 6rpx;
		top: 6rpx;
		border-radius: 50%;
		background: #fd5c58;
		padding: 0;
		color: #fff;
		width: 36rpx;
		height: 36rpx;
		font-size: 28rpx;
		line-height: 36rpx;
		text-align: center;
		border: none;
		outline: none;
		cursor: pointer;
	}

	.remove:active {
		background: rgba(0, 0, 0, 0.75);
	}

	.image-upload-tip {
		display: flex;
		align-items: center;
	}

	.tip-text {
		color: #999999;
		font-size: 24rpx;
		font-style: normal;
		font-weight: 400;
		line-height: 40rpx;
		padding-top: 64rpx;
	}

	.feedback-btn {
		margin-top: 24rpx;
		width: 180rpx;
		height: 60rpx;
		aspect-ratio: 89/30;
		border-radius: 30rpx;
		background: #090A08;
		color: #ffffff;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 16px;
		font-style: normal;
		font-weight: 700;
		line-height: normal;
	}
</style>