mdapp/pages/agent/activity/join.vue

<template>
	<view class="page">
		<view class="scoped-header" v-if="curObj.estate_name">
			<view class="p1" style="color: #f00;font-weight: bold;">{{ curObj.estate_name || '' }} {{ curObj.remark || '' }}</view>
			<view class="p2" style="color: #f00;font-weight: bold;">截至时间：{{ curObj.end_at || '' }}</view>
			<view class="img">
				<view class="t">点击二维码进群：</view>
				<image class="i" :src="curObj.image" mode="widthFix" @click="codePreview" />
			</view>
		</view>
		<view class="form">
			<u-form :model="form" ref="uForm">
				<u-form-item label-width="150" label="抖音名" prop="info1" required>
					<u-input placeholder="请输入抖音名" v-model="form.info1" type="text"></u-input>
				</u-form-item>
				<u-form-item label-width="150" label="抖音账号" prop="info2" required>
					<u-input placeholder="请输入抖音账号" v-model="form.info2" type="text"></u-input>
				</u-form-item>
				<u-form-item label-width="150" label="姓名" prop="info3" required>
					<u-input placeholder="请输入姓名" v-model="form.info3" type="text"></u-input>
				</u-form-item>
				<u-form-item label-width="150" label="电话" prop="info4" required>
					<u-input placeholder="请输入电话" v-model="form.info4" type="number"></u-input>
				</u-form-item>
				<u-form-item label-width="150" label="微信号" prop="info5" required>
					<u-input placeholder="请输入微信号" v-model="form.info5" type="text"></u-input>
				</u-form-item>
				<u-form-item label-width="150" label="粉丝数量" prop="info6" required>
					<u-input style="width: 100px;display: inline-block;" placeholder="请输入粉丝数量" v-model="form.info6" type="number"></u-input>个(单位)
				</u-form-item>
				<u-form-item label-width="150" label="获赞数量" prop="info7" required>
					<u-input style="width: 100px;display: inline-block;" placeholder="请输入获赞数量" v-model="form.info7" type="number"></u-input>个(单位)
				</u-form-item>
				<u-form-item label-width="150" label="所属区域" prop="info8" required>
					<u-input placeholder="请输入所属区域" v-model="form.info8" type="text" disabled @click="areaOpen"></u-input>
				</u-form-item>
			</u-form>
			<u-gap height="60"></u-gap>
			<u-button type="primary" @click="submitHandle">提交</u-button>
		</view>

		<u-select v-model="isareaShow" :list="areaList" label-name="dict_label" @confirm="areaClose"></u-select>
	</view>
</template>
<script>
import { arrToObj } from '@/utils'
export default {
	data() {
		return {
			curId: '',
			curObj: {},
			isareaShow: false,
			areaList: [],
			form: {
				info1: null,
				info2: null,
				info3: null,
				info4: null,
				info5: null,
				info6: null,
				info7: null,
				info8: null,
			},
			eIds: [],
			eArr: [],
			phoneBefore3: '',
			phoneAfter4: '',
			customer_id: null,
			submitButtonDisabled: true,
			rules: {
				info1: [
					{
						required: true,
						message: '抖音名不得为空',
						trigger: ['change', 'blur']
					},
				],
				info2: [
					{
						required: true,
						message: '抖音账号不得为空',
						trigger: ['change', 'blur']
					},
				],
				info3: [
					{
						required: true,
						message: '姓名不得为空',
						trigger: ['change', 'blur']
					},
				],
				info4: [
					{
						required: true,
						message: '电话不得为空',
						trigger: ['change', 'blur']
					},
				],
				info5: [
					{
						required: true,
						message: '微信号不得为空',
						trigger: ['change', 'blur']
					},
				],
				info6: [
					{
						required: true,
						message: '粉丝数量不得为空',
						trigger: ['change', 'blur']
					},
				],
				info7: [
					{
						required: true,
						message: '获赞数量不得为空',
						trigger: ['change', 'blur']
					},
				],
			},
			
			propertySelectShow: false,
			propertySelectList: [],
			estateList: [],
			areaTypeObj: {},
			userInfo2: {},
			curEstateName: '',

			salerSelectShow: false,
			salerSelectList: [],
			submitModalShow: false,
			modalShow: false,
			modalContent: ''
		};
	},
	onLoad(data) {
		const curId = data.id
		this.curId = curId || ''
		uni.api.cust.apiactivityinfo({id: this.curId}).then(res => {
			this.curObj = res.activity || {}
		})
	},
	onShareAppMessage(options) {
		var shareObj = {
			title: `${this.curObj.estate_name}${this.curObj.remark}`,
			path: `/pages/agent/activity/join?id=${this.curId}`,
			success: function(res) {
			},
			complete: function(res) {
				console.log(res)
			},
		}
		return shareObj
	},
	onShareTimeline(options) {
		var shareObj = {
			title: `${this.curObj.estate_name}${this.curObj.remark}`,
			path: `/pages/agent/activity/join?id=${this.curId}`,
			success: function(res) {
			},
			complete: function(res) {
				console.log(res)
			},
		}
		return shareObj
	},
	created () {
		const dictObj = uni.getStorageSync('MD_dict') || {}
		const atArr = dictObj.area_type || []
		let areaList = []
		atArr.forEach(item => {
			if (item.dict_label !== '独家合作' && item.dict_label !== '安义县' && item.dict_label !== '宜春' ) {
				areaList.push(item)
			}
		})
		this.areaList = [...areaList]
	},
	// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
	onReady() {
		this.$refs.uForm.setRules(this.rules);
	},
	methods: {
		codePreview () {
			const imgUrl = this.curObj.image
			if (imgUrl) {
				uni.previewImage({
					current: imgUrl,
					urls: [imgUrl]
				})
			}
		},
		areaOpen () {
			this.isareaShow = true
		},
		areaClose (arr) {
			this.isareaShow = false
			if (arr) {
				this.form.info8 = arr[0].label
			}
		},
		phoneHandle () {
			let p = this.form.phone
			p = p.replace(/ /g, '')
			this.form.phone = p
			this.form = {...this.form}
		},
		
		getEstateList () {
			uni.api.estate.apiestatelist({page_size: 100, report_open: 1, is_inner: 2, estate_name: this.curEstateName}).then(res => {
				let list = res.list || []
				this.estateList = [...list]
			})
		},
		listItemHandle (val) {
			let eIds = [...this.eIds]
			let eArr = [...this.eArr]
			let cIndex = eIds.indexOf(val.estate_id)
			if (cIndex > -1 ) {
				eIds.splice(cIndex,1)
				eArr.splice(cIndex,1)
			} else {
				eIds.push(val.estate_id)
				eArr.push(val)
			}
			this.eIds = [...eIds]
			this.eArr = [...eArr]
		},
		clearListHandle () {
			this.propertySelectShow = false
			this.eIds = []
			this.eArr = []
			this.form.estate_name = ''
		},
		saveListHandle () {
			let errMsg = ''
			let eNames = this.eArr.map(item => {
				if (item.phone_type == '2') {
					errMsg = item.estate_name
				}
				return item.estate_name
			})
			this.form.estate_name = eNames.join(',')
			if (this.eArr.length === 1 && this.eArr[0].phone_type == '2') {
				this.form.phone_type = '2'
			} else {
				this.form.phone_type = '1'
			}
			if (errMsg && this.eArr.length > 1) {
				uni.$msg(`${errMsg}是前三后四报备项目，请单独报备`)
			} else {
				this.propertySelectShow = false
			}
		},
		// // 选择所属项目回调
		// propertySelectConfirm(e) {
		// 	e.map((val, index) => {
		// 		this.form.estate_id = val.value;
		// 		this.form.estate_name = val.label;
		// 	});
		// },
		// openEstateList () {
		// 	uni.navigateTo({
		// 		url: `/pages/estate/list?eid=${this.form.estate_id}&ename=${this.form.estate_name}`
		// 	})
		// },
		submitHandle() {
			const that = this
			this.$refs.uForm.validate(valid => {
				if (valid) {
					// 验证成功
					let params = {
						activity_id: that.curId,
						info1: that.form.info1,
						info2: that.form.info2,
						info3: that.form.info3,
						info4: that.form.info4,
						info5: that.form.info5,
						info6: that.form.info6,
						info7: that.form.info7,
						info8: that.form.info8,
					}
					uni.api.cust.apiactivityenroll(params).then(res => {
						uni.$msgConfirm('报名成功', () => {
							uni.redirectTo({
								url: `/pages/index/index`
							})
						}, () => {
							uni.redirectTo({
								url: `/pages/index/index`
							})
						})
					})
					



				} else {
					console.log('验证失败');
				}
			});
		},

		// 获取手机号
		getPhoneNumber: function(e) {
			// 点击获取手机号码按钮
			let _that = this;
			if (e.detail.errMsg == 'getPhoneNumber:fail user deny') {
				_that.$refs.uToast.show({
					title: '您可以在个人设置中再次绑定',
					type: 'warning'
				});
				setTimeout(() => {
					_that.reLunchUser();
				}, 1500);
				return; // 即用户拒绝授权
			}
			console.log(e.detail.errMsg);
			console.log(e.detail.iv);
			console.log(e.detail.encryptedData);
			let iv = e.detail.iv;
			let encryptedData = e.detail.encryptedData;
			// 不是登陆完第一时间授权
			wx.login({
				success(res) {
					if (res.code) {
						// 设置用户手机号
						_that.setUserPhoneNumber(encryptedData, iv, res.code);
					} else {
						this.$refs.uToast.show({
							title: res.errMsg,
							type: 'warning'
						});
						console.log('登录失败！' + res.errMsg);
					}
				}
			});
		},
		// 以下是工具函数
		// 关闭键盘
		hideKeyboard() {
			uni.hideKeyboard();
		},
		// 格式化日期的月份或天数的显示（小于10，在前面增加0）
		getFormatDate(value) {
			if (value == undefined || value == '') {
				return '';
			}
			var str = value;
			if (parseInt(value) < 10) {
				str = '0' + value;
			}
			return str;
		}
	}
};
</script>
<style lang="scss">
.scoped-header {
	.img {
		display: flex;
		align-content: center;
		align-items: center;
		.i {
			width: 200rpx;
			height: 200rpx;
		}
	}
}

.page {
	padding: 20rpx;
	background-color: #ffffff;
}

.form {
	border-radius: 10rpx;
	padding: 0 40rpx;
}

.popup-body {
	.tips-title {
		font-size: $u-p;
		margin-bottom: 20rpx;
	}

	.tips-content {
		font-size: $u-p2;
		color: $u-tips-color;
		margin-bottom: 60rpx;
	}
}

.id_card {
	color: #606266;
	width: 100%;
	height: 350rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background-color: #f4f5f6;
	font-size: $u-p2;
}

.footer {
	position: absolute;
	text-align: center;
	bottom: 40rpx;
	font-size: $u-p2;

	.agreement {
		color: $u-type-error;
	}
}

.slot-content {
	font-size: 28rpx;
	color: $u-content-color;
	padding: 20rpx;
}



.scoped-estate-list {
	.sel-item {
		display: flex;
		border-bottom: 1PX solid #dcdcdc;
		padding: 20rpx;
		&.cur {
			background: #369af7;
			border-radius: 10rpx;
			overflow: hidden;
			.img {
				opacity: .6;
			}
			.p1 {
				color: #fff;
			}
			.p3 {
				color: #fff;
			}
		}
	}
	.sel-left {
		width: 180rpx;
		border-radius: 10rpx;
		.img {
			width: 180rpx;
			height: 120rpx;
			border-radius: 10rpx;
		}
	}
	.sel-right {
		// width: 450rpx;
		margin-left: 20rpx;
		.p1 {
			font-size: 30rpx;
			font-weight: bold;
			margin-bottom: 10rpx;
		}
		.p2 {
			margin-bottom: 10rpx;
		}
		.p3 {
			color: #369af7;
			font-size: 24rpx;
			font-weight: bold;
		}
	}
}

.scoped-estate-popup {
	height: 100%;
	padding-bottom: 100rpx;
	.popup-body {
		box-sizing: border-box;
		border-bottom: 1PX solid #dcdcdc;
	}
}

.scoped-popup-header-input {
	position: fixed;
	width: 90%;
	display: flex;
	border-bottom: 1PX solid #dcdcdc;
	.input {
		flex: 1;
		padding-left: 20rpx;
		height: 80rpx;
		.u-input__input {
			height: 80rpx;
		}
	}
	.b {
		width: 200rpx;
		height: 80rpx;
		line-height: 80rpx;
		background: #2d8cf0;
		color: #fff;
		text-align: center;
		margin-left: 20rpx;
	}
}
</style>