NN2025081602/addons/min-exam/pages/group/create.vue

<template>
	<!-- 注册 -->
	<view class="app" :style="'width: '+boxWidth+'px;height: '+boxHeight+'px'">
		<navbar title="创建群聊" :showLeft="true" :bgColor="'transparent'" :place="false">
		</navbar>
		<view class="main">
			<view class="form-box">
				<view class="form">
					<uv-form class="login-form" labelPosition="left" :errorType="'toast'" :model="formData"
						:rules="rules" ref="form" label-width="5rem">
						<view class="form-item">
							<uv-form-item v-if="formData.pay_type==1" clearable label="上传群头像" label-width="5rem">
								<template v-slot:right>
									<uv-upload class="upload" :action="uploadConfig.url" :header="uploadConfig.header"
										:accept="'image'" @afterRead="afterRead" @delete="deletePic"
										imageMode="scaleToFill‌" width="3.25rem" height="3.25rem"
										:file-list="fileList.image" name="" multiple :maxCount="1" uploadText="上传">
									</uv-upload>
								</template>
							</uv-form-item>
						</view>
						<view class="form-item">
							<uv-form-item prop="title" clearable label="群名称" label-width="5rem">
								<uv-input v-model="formData.title" type="text" placeholder="请输入群名称" border="none"
									inputAlign="right" maxlength="100">
								</uv-input>
							</uv-form-item>
							<uv-form-item label="地区" @click="showCityPopup()" label-width="5rem">
								<uv-input v-model="formData.area" disabled color="var(--color)" disabledColor="#ffffff"
									placeholder="请选择" border="none" inputAlign="right">
								</uv-input>
								<template v-slot:right>
									<uv-icon name="arrow-right" color="#b1b6bd"></uv-icon>
								</template>
							</uv-form-item>


						</view>
						<view class="form-item">
							<uv-form-item label="邀请群成员入群" @click="showUserPopup()" label-width="7rem">
								<uv-input v-model="formData.users" disabled color="var(--color)" disabledColor="#ffffff"
									placeholder="去邀请" border="none" inputAlign="right">
								</uv-input>
								<template v-slot:right>
									<uv-icon name="arrow-right" color="#999"></uv-icon>
								</template>
							</uv-form-item>
						</view>

						<view class="form-item">
							<view class="input-box">
								<view class="label">
									群简介
								</view>
								<uv-textarea v-model="formData.content" placeholder="请输入群简介" count border="none"
									maxlength="500"></uv-textarea>
							</view>
						</view>
						<view class="form-item">
							<view class="tips-box">
								<view class="tips">
									驳回原因
								</view>
								<view class="remark">
									1、发布后不可删除,每个人仅能发布5个交流群
								</view>
							</view>
						</view>
						<view class="form-item">
							<uv-form-item prop="fee" clearable label="群聊费用" label-width="5rem">
								<uv-input v-model="formData.fee" type="number" border="none" placeholder="请输入加入群聊的费用"
									inputAlign="right" maxlength="10">
								</uv-input>
								<template v-slot:right>
									<uv-icon name="" size="20"></uv-icon>
								</template>
							</uv-form-item>
						</view>

						<view class="form-submit">
							<uv-button class="btn" throttleTime="1200" size="normal" shape="circle"
								:customStyle="{height:'3.25rem',fontWeight: '500',marginBottom: '.75rem'}"
								color="linear-gradient(to right, var(--button-color), var(--button-color1))"
								:loading="submitLoading" loadingText="提交中..." @click="submit">发布
							</uv-button>

							<view class="agree-box">
								<uv-checkbox-group placement="row">
									<view class="checkbox-box">
										<uv-checkbox activeColor="var(--icon-color)" size="1rem" inactiveColor="#999"
											name="agree" shape="circle" :name="1" @change="changAgree">
											<view class="agree">
												发布信息即表示您同意<text class="text"
													@click.stop="agreeTo('/pages/agree/index?id=1')">《发布须知》</text>
											</view>
										</uv-checkbox>
									</view>
								</uv-checkbox-group>
							</view>
						</view>
					</uv-form>
				</view>
			</view>
		</view>

		<!-- 地址 -->
		<pickerCity ref="pickerCity" @confirm="pickerCity"></pickerCity>

		<!-- 有效时间 -->
		<!-- <uv-action-sheet ref="dayTypes" :actions="expDaysList" round="8" cancelText="取消" title="请选择有效时间"
			@select="selectTime" style="z-index:10096;">
		</uv-action-sheet> -->

		<!-- 有效时间 -->
		<uv-picker ref="pickerTime" :columns="[expDaysList]" keyName="title" @confirm="selectTime"
			confirmColor="var(--color)"></uv-picker>



		<showModal ref="uvModal"></showModal>
		<uv-loading-icon class="loading" :show="loading" textSize="30rpx" color="var(--color)"
			:customStyle="{position:'absolute',top:'50%',left:0,right:0}"></uv-loading-icon>
	</view>

</template>

<script>
	import {
		getToken,
	} from '../../config/cache';
	import navbar from "../../components/navbar.vue"
	import showModal from "../../components/showModal.vue"
	import pickerCity from "../../components/pickerCity.vue"
	export default {
		components: {
			navbar,
			showModal,
			pickerCity
		},
		data() {
			return {
				loading: false,
				submitLoading: false,
				boxHeight: 800,
				boxWidth: 360,
				leftIconStyle: {
					width: '1.5rem',
					height: '1.5rem'
				},
				agree: false,
				payTypes: [{
						id: 1,
						name: '图片'
					},
					{
						id: 2,
						name: '其他信息'
					},
				],
				expDaysList: [{
					title: '长期',
					value: 9999
				}, {
					title: '30天',
					value: 30
				}, {
					title: '7天',
					value: 7
				}],
				cateList: [],
				cateInfo: {
					id: 0,
					name: '全部',
					list: [],
				},
				userInfo: {
					id: 0,
				},
				defaultCityList: [0, 0, 0],
				formData: {
					id: 0,
					req_type: 1, //1 供应， 2需求, 3群聊
					req_type_str: '供应',
					exp_days: 9999,
					exp_days_str: '长期',
					info_type: '',
					info_type_str: '',
					pay_type: 1,
					pay_type_str: '图片',
					fee: '',
					cate_id: '',
					area: '',
					province_id: '',
					city_id: '',
					district_id: '',
					image: '',
					images: [],
					content: '',
					project_descr: '',
					phone: '',
					state: 1,
					secret_info: [],
					action: 'add'
				},
				rules: {
					title: [{
						required: true,
						message: '请填写标题',
						// blur和change事件触发检验
						trigger: ['blur', 'change'],
					}],
					project_descr: [{
						required: true,
						message: '请填写信息内容',
						// blur和change事件触发检验
						trigger: ['blur', 'change'],
					}],
					info_type: [{
						required: true,
						message: '请选择类型',
						// blur和change事件触发检验
						trigger: ['blur', 'change'],
					}],
				},
				fileList: {
					images: [],
					payImages: [],
				},
				uploadConfig: {
					url: this.baseUrl + '/v1/user/uploadImg',
					header: {
						token: getToken()
					}
				},
			}
		},
		onLoad(e) {
			const windowInfo = uni.getWindowInfo();
			this.boxHeight = windowInfo.windowHeight
			this.boxWidth = windowInfo.windowWidth
			this.formData.id = typeof(e.id) != 'undefined' ? e.id : 0;
			this.formData.action = typeof(e.action) != 'undefined' && e.action ? e.action : 'add';
			this.init();
		},
		onHide() {
			this.$refs.uvModal.close();
		},
		onPullDownRefresh() {
			uni.stopPullDownRefresh()
		},
		methods: {
			async init() {
				this.getInfo();
				if (this.formData.action == 'edit') {
					if (this.formData.id <= 0) {
						uni.showToast({
							title: '参数错误',
							icon: 'none',
							success() {
								setTimeout(function() {
									uni.navigateBack(-1);
								}, 1200)
							}
						})
						return false;
					}

					await this.getInfoDetail();
				}

				this.getCateList();
			},
			changAgree(e) {
				this.agree = e;
			},
			// 查看协议
			agreeTo(url) {
				this.agree = false;
				uni.navigateTo({
					url: url
				})
			},
			// 类型
			selectType(e) {
				this.formData.info_type_str = e.name
				this.formData.info_type = e.id
				this.cateInfo = e;
				let subCate = this.cateInfo && typeof(this.cateInfo['list']) != 'undefined' ? this.cateInfo[
					'list'][0] : {
					sub_id: 0
				};
				this.formData.cate_id = subCate.sub_id;
			},
			showTimePicker() {
				const timestamp = (new Date().getTime()) / 1000;
				if (this.formData.id > 0 && this.formData.end_time > timestamp) {
					uni.showToast({
						title: '当前信息未过期无法修改',
						icon: 'none'
					})
					return false;
				}
				this.$refs.pickerTime.open();
			},
			// 选择有效时间
			selectTime(e) {
				let data = typeof(e.value[0]) != 'undefined' ? e.value[0] : {};
				if (data) {
					this.formData.exp_days = data.value;
					this.formData.exp_days_str = data.title;
				}

			},
			// 付费类型
			selectPayType(e) {
				this.formData.pay_type = e.id;
				if (e.id == 1 && this.userInfo.qrcode) {
					this.formData.image = this.userInfo.qrcode
					this.fileList.payImages = [{
						status: 'success',
						message: '',
						url: this.formData.image
					}]
					this.formData.secret_info = [{
						name: 'qrcode',
						value: this.userInfo.qrcode
					}]
				}
			},
			showCityPopup() {
				this.$refs.pickerCity.open(this.defaultCityList);
			},
			// 地址
			pickerCity(region) {
				this.formData.area = region.value.map(item => item?.name).join('/')
				this.formData.province_id = region.value[0].code + '0000'
				this.formData.city_id = region.value[1]?.code + '00'
				this.formData.district_id = region.value[2]?.code
			},
			// 用户信息
			async getInfo() {
				this.loading = true;
				this.userInfo = await this.$request.apiGetUserInfo(this, true);
				this.loading = false;
				this.loaded = true;
				if (!this.userInfo || this.userInfo.id <= 0) {
					this.$refs.uvModal.open({
						title: '提示',
						content: '您暂未登录，请先登录～',
						confirmText: '立即登录',
						confirmColor: "#15B3B2",
						confirm: function(e) {
							uni.navigateTo({
								url: '/pages/login/login'
							})
						}
					});
					return false;
				}
			},
			// 详情
			async getInfoDetail() {
				const res = await this.$request.api('/index/infoDetail', {
					id: this.formData.id,
					type: 1,
				});
				if (res.code == 200) {
					this.formData = Object.assign(this.formData, res.data);
					this.formData.image = this.formData.secret_info ? this.formData.secret_info[0].value : '';
					let exp_days = this.formData.exp_days;
					let exp_data = this.expDaysList.find(item => item.value === exp_days);
					this.formData.exp_days_str = typeof(exp_data['title']) != 'undefined' ? exp_data['title'] : '长期';
					this.fileList['images'] = this.formData.images;
					this.fileList['payImages'] = this.formData.secret_info;
					this.defaultCityList = [this.formData.province_id, this.formData.city_id, 0];
					//console.log(this.formData)

				} else if (res.code == 510) {
					this.$refs.uvModal.open({
						title: '提示',
						content: '您暂未登录，请先登录～',
						confirmText: '立即登录',
						confirmColor: "#15B3B2",
						confirm: function(e) {
							uni.navigateTo({
								url: '/pages/login/login'
							})
						}
					});
				}
			},
			// 分类
			async getCateList() {
				let _this = this
				const res = await this.$request.api('/index/infoCate', {});
				if (res.code == 200) {
					this.cateList = res.data;
					this.cateInfo = {
						id: 0,
						name: '全部',
						list: []
					}
					if (this.cateList.length > 0) {
						this.cateList = this.cateList.splice(0, 2);
						this.cateList.forEach((item, k) => {
							if (_this.formData.info_type == item.id) {
								_this.cateInfo = item;
								item.color = '#15B3B2';
							} else {
								item.color = '#303133';
							}
						})
					}

					if (this.cateInfo['list'].length > 0) {
						this.cateInfo['list'].forEach((item, k) => {
							if (item.sub_id == _this.formData.cate_id || (_this.formData.cate_id == 0 && k ==
									0)) {
								_this.formData.cate_id = item.sub_id;
							}
						})
					}
				} else if (res.code == 510) {
					this.$refs.uvModal.open({
						title: '提示',
						content: '您暂未登录，请先登录～',
						confirmText: '立即登录',
						confirmColor: "#15B3B2",
						confirm: function(e) {
							uni.navigateTo({
								url: '/pages/login/login'
							})
						}
					});
				}
			},
			// 保存草稿
			draftSave() {
				this.formData.state = 2;
				this.$refs.form.validate().then(res => {
					this._submit();
				}).catch(errors => {

				})
			},
			// 提交
			submit() {
				this.formData.state = 1;
				this.$refs.form.validate().then(res => {
					this._submit();
				}).catch(errors => {

				})
			},
			// 提交处理
			async _submit() {
				let _this = this

				if (!this.formData.cate_id) {
					uni.showToast({
						title: '请选择内容分类',
						icon: 'none'
					})
					return false;
				}

				if (!this.formData.title) {
					uni.showToast({
						title: '请填写标题',
						icon: 'none'
					})
					return false;
				}

				if (!this.formData.content) {
					uni.showToast({
						title: '请填写发布内容',
						icon: 'none'
					})
					return false;
				}

				if (!this.formData.info_type) {
					uni.showToast({
						title: '请选择类型',
						icon: 'none'
					})
					return false;
				}

				if (!this.formData.area) {
					uni.showToast({
						title: '请选择地区',
						icon: 'none'
					})
					return false;
				}

				if (this.formData.fee <= 0) {
					uni.showToast({
						title: '费用不能为0',
						icon: 'none'
					})
					return false;
				}

				if (this.formData.pay_type == 1 && !this.formData.image) {
					uni.showToast({
						title: '请上传收款码',
						icon: 'none'
					})
					return false;
				}

				if (this.formData.pay_type == 2) {
					if (!this.formData.project_descr) {
						uni.showToast({
							title: '请填写隐私信息',
							icon: 'none'
						})
						return false;
					}
					this.formData.secret_info = [{
						value: this.formData.project_descr,
						name: 'other_info'
					}]
				}


				if (!this.agree && this.formData.state == 1) {
					uni.showToast({
						title: '请阅读并勾选发布须知',
						icon: 'none'
					})
					return false;
				}

				_this.loading = true
				_this.submitLoading = this.formData.state == 1 ? true : false;
				const res = await this.$request.api('/user/infoManage', this.formData);
				_this.loading = false
				_this.submitLoading = false
				if (res.code == 200) {
					if (this.formData.id <= 0) {
						this.formData.project_descr = '';
						this.formData.content = '';
						this.formData.pay_type = 1;
						this.formData.title = '';
						this.formData.fee = '';
						this.formData.image = [];
						this.formData.secret_info = [];
						this.formData.images = [];
						this.fileList.images = [];
						this.fileList.payImages = [];
					}

					uni.showToast({
						title: _this.formData.state == 2 ? '保存成功' : res.msg,
						icon: 'none',
						success() {
							if (_this.formData.state == 1) {
								setTimeout(function() {
									uni.navigateBack(-1)
								}, 1200)
							}
						}
					})
				} else if (res.code == 510) {
					this.$refs.uvModal.open({
						title: '提示',
						content: '您暂未登录，请先登录～',
						confirmText: '立即登录',
						confirmColor: "#15B3B2",
						confirm: function(e) {
							uni.navigateTo({
								url: '/pages/login/login'
							})
						}
					});
					return false;
				} else {
					let msg = typeof(res.msg) != 'undefined' ? res.msg : '请求失败'
					uni.showToast({
						title: msg,
						icon: 'none'
					})
				}
			},
			// 删除图片
			deletePic(event) {
				this.fileList[event.name].splice(event.index, 1)
				this.formData.images.splice(event.index, 1)
			},
			// 预读图片
			async afterRead(event) {
				let _this = this
				let lists = [].concat(event.file)
				let fileListLen = this.fileList[event.name].length
				lists.map((item) => {
					_this.fileList[event.name].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(event.name, lists[i].url)
					let item = this.fileList[event.name][fileListLen]
					this.fileList[event.name].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}

			},

			uploadFilePromise(name, url) {
				let _this = this
				_this.loading = true
				return new Promise((resolve, reject) => {
					let system = {
						uuid: uni.getSystemInfoSync().deviceId,
						sys_time: (Date.parse(new Date()) / 1000),
					};
					let a = uni.uploadFile({
						url: _this.uploadConfig.url,
						filePath: url,
						name: 'image',
						header: _this.uploadConfig.header,
						success: (res) => {
							_this.loading = false
							const response = JSON.parse(res.data)
							const data = response.data
							if (name == 'images') {
								_this.formData[name].push(data.image_url);
							} else if (_this.formData.pay_type == 1 && name == 'payImages') {
								_this.formData.image = data.image_url;
								_this.formData.secret_info = [{
									name: 'qrcode',
									value: data.image_url
								}];
							}

							resolve(data.image_url)
						}
					});
				})
			},

		}
	}
</script>
<style lang="scss" scoped>
	page {
		height: 100%;
		width: 100%;
	}

	.app {
		height: 100%;
	}

	.main {
		margin: 4rem .75rem;
		position: relative;

		.form-box {
			position: relative;
			z-index: 2;
			height: 100%;
			padding-top: 1.75rem;

			.form {
				position: relative;
				z-index: 2;
				padding: 1rem 0rem 1rem;

				.uv-form-item--left__content__label {
					color: #060518;
				}

				.form-item {
					margin: .75rem 0;
					background-color: #fff;
					border-radius: 1rem;

					::v-deep .uv-form-item {
						padding: 0.25rem .75rem;
						margin-bottom: .5rem;
					}

					.type-box {
						display: flex;
						flex-direction: row;
						align-items: center;
						justify-content: flex-end;

						.type {
							min-width: 1rem;
							text-align: center;
							padding: 0.1rem .5rem;
							border: .05rem solid #F9F9F9;
							font-size: .75rem;
							color: #999;
							background-color: #F9F9F9;
							border-radius: 2rem;
							margin-right: .5rem;

							&.selected {
								border-color: var(--color);
								background-color: #E7FFFB;
								color: var(--color);
							}
						}
					}

					.input-box {
						padding: .75rem;
						font-size: 0.875rem;

						.label {
							color: #000;
							padding-bottom: 0.75rem;

						}

						.cate-box {
							display: flex;
							flex-direction: row;
							align-items: center;
							width: 100%;

							.cate {
								min-width: 1rem;
								text-align: center;
								padding: 0.1rem .2rem;
								border: .05rem solid #F9F9F9;
								background-color: #F9F9F9;
								font-size: .75rem;
								color: #999;
								border-radius: .5rem;
								margin-right: .25rem;

								&.selected {
									border-color: var(--color);
									background-color: #E7FFFB;
									color: var(--color);
								}
							}
						}

						.uv-textarea {
							padding: 0;
							font-size: 0.875rem !important;

							::v-deep .uv-textarea__field {
								font-size: 0.875rem;
							}
						}
					}

				}

				.upload-box {
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: space-between;

					::v-deep .uv-form-item__body {
						padding: 0;

						.uv-upload__button {
							background-color: #fff;
							padding: .5rem;
						}
					}
				}

				.form-submit {
					margin: 1.25rem 2rem 1.25rem;
				}

			}
		}

		.agree-box {
			padding: .5rem 1.75rem;
			// background-color: #FFFAEE;

			::v-deep .uv-checkbox-group {
				justify-content: center;

				.checkbox-box {
					display: flex;
					flex-direction: row;
					align-items: inherit;
					justify-content: center;

					:first-child {
						align-items: center;
						flex-direction: row;

						// margin-top: 4rpx;
						.uv-checkbox__label-wrap {
							flex-shrink: inherit;
						}

					}

					:nth-child(1) {
						flex-shrink: inherit;
					}

					.agree {
						color: #ADADAD;
						font-size: .75rem;

						.text {
							color: #F48431;
						}
					}
				}
			}

		}
	}
</style>