yizhizan-h5/my/feedback/jubao.vue

<template>
	<view v-if="XCXIsSelect == '是'" class="page" style="background-color: #ffffff;">
		<view class="feedback-title">
			<text>问题和意见</text>
			<text @tap="chooseMsg">快速键入</text>
		</view>
		<view class="feedback-body"><textarea placeholder="请详细描述你的问题和意见..." v-model="sendDate.content"
				class="feedback-textare" /></view>
		<view class="feedback-title"><text>电话/微信</text></view>
		<view class="feedback-body"><input class="feedback-input" v-model="sendDate.contact" placeholder="方便我们联系你 " />
		</view>
		<view class="feedback-title"><text>上传图片</text></view>
		<view class="imgs flex align-center justify-between flex-wrap">
			<!-- imgs -->
			<view class="imgs-item" v-for="(item,index) in imgs" :key="index">
				<image :src="item" mode="aspectFill"></image>
				<view class="imgs-item-close" @click="close(index)">
					<u-icon name="close-circle" color="red" size="38"></u-icon>
				</view>
			</view>
			<view class="imgs-item" @click="uploadImg">
				<u-icon name="photo" color="#016BF6" size="58"></u-icon>
				<view class="imgs-item-txt">
					上传图片
				</view>
			</view>
			<view class="imgs-item" style="height: 0;">
			</view>
		</view>
		<button style="" class="feedback-submit" @tap="send">提交</button>
	</view>
	<view class="" v-else>
		帮助中心，联系我们，为你提供帮助
	</view>
</template>

<script>
	import config from '../../common/config';
	export default {
		data() {
			return {
				msgContents: ['岗位不符', '虚假岗位', '内容违规', '虚假招聘'],
				stars: [1, 2, 3, 4, 5],
				imageList: [],
				sendDate: {
					score: 5,
					content: '',
					contact: ''
				},
				postPushId: '',
				XCXIsSelect: '是',
				imgs: [],
				resumesId: '',
			};
		},
		onLoad(e) {
			this.XCXIsSelect = uni.getStorageSync('XCXIsSelect')
			if (e.resumesId) {
				this.resumesId = e.resumesId
			}
			if (e.postPushId) {
				this.postPushId = e.postPushId
			}
			// #ifdef APP
			let deviceInfo = {
				appid: plus.runtime.appid,
				imei: plus.device.imei, //设备标识
				p: plus.os.name === 'Android' ? 'a' : 'i', //平台类型，i表示iOS平台，a表示Android平台。
				md: plus.device.model, //设备型号
				app_version: plus.runtime.version,
				plus_version: plus.runtime.innerVersion, //基座版本号
				os: plus.os.version,
				net: '' + plus.networkinfo.getCurrentType()
			};
			this.sendDate = Object.assign(deviceInfo, this.sendDate);
			// #endif

		},
		methods: {
			//上传图片
			uploadImg() {
				let that = this
					    // 1. 先判断系统类型，区分Android/iOS权限
					    const systemInfo = uni.getSystemInfoSync();
					    const isAndroid = systemInfo.system.includes('Android');
					    const permissionType = isAndroid ? 'storage' : 'photos'; // Android=存储，iOS=相册
					  
					    // 2. 权限检查（复用之前封装的 checkPermission 函数）
					    const hasPermission = this.$queue.checkPermission(
					      permissionType,
					      isAndroid 
					        ? '选择/拍摄照片需要相机/相册权限，用于上传举报证据' // Android 专属提示
					        : '选择/拍摄照片需要相机/相册权限，用于上传举报证据'
					    );
					  
					    if (!hasPermission) {
					      uni.showToast({ title: '未获取权限，无法选择照片', icon: 'none' });
					      return;
					    }
				
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function(res) {
						uni.showLoading({
							title: '上传中...'
						});
						uni.uploadFile({
							url: 'https://h5.bosszan.com/sqx_fast/alioss/upload',
							// url: config.APIHOST + '/alioss/upload',
							filePath: res.tempFilePaths[0],
							name: 'file',
							success: uploadFileRes => {
								uni.hideLoading();
								let url = JSON.parse(uploadFileRes.data);
								console.log(url)
								that.imgs.push(url.data)

							},
							fail() {
								uni.hideLoading()
								uni.showToast({
									title: '上传失败',
									icon: 'none'
								})
							}
						});
					}
				});
			},
			close(e) {
				this.imgs.splice(e, 1);
			},
			chooseMsg() {
				//快速输入
				uni.showActionSheet({
					itemList: this.msgContents,
					success: res => {
						this.sendDate.content = this.msgContents[res.tapIndex];
					}
				});
			},
			chooseStar(e) {
				//点击评星
				this.sendDate.score = e;
			},
			previewImage() {
				//预览图片
				uni.previewImage({
					urls: this.imageList
				});
			},
			send() {
				//发送反馈
				console.log(JSON.stringify(this.sendDate));

				if (!this.sendDate.content) {
					uni.showToast({
						icon: 'none',
						title: '请输入反馈内容'
					});
					return;
				}
				if (!this.sendDate.contact) {
					uni.showToast({
						icon: 'none',
						title: '请填写电话或微信'
					});
					return;
				}
				this.$queue.showLoading('加载中...');
				if (this.imgs.length > 0) {
					this.sendDate.imgs = this.imgs.join(',')
				}
				this.$Request.postJson('/app/message/insertMessage', {
					title: this.sendDate.contact,
					content: JSON.stringify(this.sendDate),
					state: this.postPushId ? 3 : 6, //3:举报岗位 6:举报简历
					byUserId: this.postPushId ? this.postPushId : this.resumesId
				}).then(res => {
					if (res.code === 0) {
						uni.showToast({
							title: '提交成功'
						});
						setTimeout(function() {
							uni.navigateBack();
						}, 1000);
					} else {
						uni.hideLoading();
						uni.showModal({
							showCancel: false,
							title: '投诉失败',
							content: res.msg
						});
					}
				});
			}
		}
	};
</script>

<style>
	@font-face {
		font-family: uniicons;
		font-weight: normal;
		font-style: normal;
		src: url('https://img-cdn-qiniu.dcloud.net.cn/fonts/uni.ttf') format('truetype');
	}

	page {
		background-color: #F5F5F5 !important;
	}

	view {
		font-size: 28upx;
	}


	/*问题反馈*/
	.feedback-title {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		padding: 20upx;
		color: #8f8f94;
		font-size: 28upx;
	}

	.feedback-star-view.feedback-title {
		justify-content: flex-start;
		margin: 0;
	}

	.feedback-body {
		font-size: 32upx;
		padding: 16upx;
		margin: 16upx;
		border-radius: 16upx;
		background: #FFFFFF;
		/* color: #FFF; */
	}

	.feedback-textare {
		height: 200upx;
		font-size: 34upx;
		line-height: 50upx;
		width: 100%;
		box-sizing: border-box;
		padding: 20upx 30upx 0;

	}

	.feedback-input {
		font-size: 32upx;
		height: 60upx;
		padding: 15upx 20upx;
		line-height: 60upx;
	}

	.imgs {
		margin: 20rpx;

	}

	.imgs-item {
		width: 220rpx;
		height: 220rpx;
		background-color: #f5f5f5;
		margin-bottom: 20rpx;
		border-radius: 10rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		position: relative;
	}

	.imgs-item-close {
		position: absolute;
		top: 0;
		right: 0;
	}

	.imgs-item image {
		width: 100%;
		height: 100%;
		border-radius: 10rpx;
	}

	.feedback-submit {
		background: #016BF6;
		color: #ffffff;
		margin: 20upx;
		margin-top: 32upx;
	}
</style>