uniapp 父子组件交互

<template>
	<view>
		<view class="uni-list">
			<view class="uni-list-cell">
				<view class="uni-list-cell-left">
					活动地点：
				</view>
				<input class="actBox" @input="locayionChange" :value="locayion" placeholder="请输入活动地点..." />
			</view>
		</view>

		<view class="uni-list">
			<view class="uni-list-cell">
				<view class="uni-list-cell-left">
					活动时间：
				</view>
				<view class="uni-list-cell-db">
					<picker mode="time" :value="time" start="09:01" end="21:01" @change="bindTimeChange">
						<view class="uni-input">{{time}}</view>
					</picker>
				</view>
			</view>
		</view>

		<view class="uni-list">
			<view class="uni-list-cell">
				<view class="uni-list-cell-left">
					活动日期：
				</view>
				<view class="uni-list-cell-db">
					<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
						<view class="uni-input">{{date}}</view>
					</picker>
				</view>
			</view>
		</view>
		<view class="uni-list">
			<view class="uni-list-cell">
				<view class="uni-list-cell-left">
					活动人数：
				</view>
				<view class="uni-list-cell-db">
					<picker @change="bindPickerChange" :value="index" :range="array">
						<view class="uni-input">{{array[index]}}</view>
					</picker>
				</view>
			</view>
		</view>
    </view>
	</view>
</template>
<script>
	import Pickers from '../../components/picker-view.vue'

	export default {
		props: {
            showModal: {
                type: String,
                default: 'hello'
            }
        },

		components: {
			Pickers
		},
		data() {
			const currentDate = this.getDate({
				format: true
			});
			return {
				title: 'picker',
				index: 0,
				date: currentDate,
				time: '12:01',
				locayion: '',
				persons: '',
				array: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29,
					30
				],
			}
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		methods: {
			locayionChange: function(e) {
				this.locayion = e.target.value
				this.$emit("locayion",this.locayion);
			},
			bindPickerChange: function(e) {
				this.index = e.target.value
				this.persons = this.array[e.target.value]
				this.$emit("persons",this.persons);
			},
			bindDateChange: function(e) {
				this.date = e.target.value
				this.$emit("date",this.date);
			},
			bindTimeChange: function(e) {
				this.time = e.target.value
				this.$emit("time",this.time);
			},
			getDate(type) {
				const date = new Date();

				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;;
				day = day > 9 ? day : '0' + day;

				return `${year}-${month}-${day}`;
			}
		}
	}
</script>

<style>
	.actBox {
		width: 70%;
	}
</style>

<template>
	<view>
		<view class="inputsBox">

			<view class="inputTitleBox">
				<input @input="inputTitleShow" :value="actTitle" class="inputTitle" placeholder="请输入活动标题" />
			</view>

			<view class="textBox">
				<textarea @input="textUserInputShow" class="sendDesc" placeholder="请输入活动流程等..."></textarea>
			</view>
		</view>

		<view class="imagesBox">
			<SystemCamera></SystemCamera>
		</view>

		<view class="acMon">
			<view class="acSpe">¥</view>
			<view>
				<view class="inputMonBox">
					<input @input="inputactMonShow" :value="actMon" class="inputmon" placeholder="活动金额" />
				</view>
			</view>
			<view class="acSpels">元</view>
		</view>

		<view>
			<Picker @time="bindTimeChange" @date="bindDateChange" @locayion="locayionChange" @persons="bindPickerChange"></Picker>
		</view>

		<view class="circles">
			<view :data-current="index" :class="['circleItem',tabIndex==index ? 'active' : '']" @click="artCleClick" :data-id="item.id"
			 v-for="(item,index) in circles" :key="index">
				#{{item.circle_title}}
			</view>
		</view>

		<view class="sendBtnBox">
			<view class="sendBtn" @click="sendClick">
				发布
			</view>
		</view>

	</view>
</template>

<script>
	import CommFunction from '../../components/common/common.vue'
	import Config from '../../components/config/config.vue'
	import SystemCamera from '../components/system-camera.vue'
	import Picker from '../components/picker.vue'
	export default {
		components: {
			SystemCamera,
			Picker
		},
		data() {
			return {
				circles: [],
				chooseSignId: '',
				textInput: '',
				tabIndex: 0,
				actTitle: '',
				actMon: '',
				showModal: " parent say",
				locayion: '',
				persons: '',
				date: '',
				time: ''
			}
		},
		onLoad() {

			let that = this;

			const url = Config.ALLCIRCLES;

			let param = {

			}
			const method = 'GET';
			CommFunction.net_request(url, param, method, function(e) {
				that.circles = e.data.data
			})
		},
		methods: {
			locayionChange(e) {
				this.locayion = e
			},
			bindPickerChange(e) {
				this.persons = e
			},
			bindDateChange(e) {
				this.date = e
			},
			bindTimeChange(e) {
				this.time = e
			},
			inputactMonShow: function(e) {
				this.actMon = e.mp.detail.value;
			},
			pickerClick: function(e) {
				console.log(e)
			},
			// 获取标题文本
			inputTitleShow: function(e) {
				this.actTitle = e.mp.detail.value;
			},
			// 获取文本数据
			textUserInputShow: function(e) {
				this.textInput = e.mp.detail.value;
			},
			// 标签选择
			artCleClick: function(e) {
				this.tabIndex = e.currentTarget.dataset.current;
				this.chooseSignId = e.currentTarget.dataset.id;

			},
			// 发布
			sendClick: function() {
				let that = this;

				let userId = '';
				let pic = '';

				uni.getStorage({
					key: 'userId',
					success: function(e) {
						userId = e.data
					}
				})
				uni.getStorage({
					key: 'upPicUrl',
					success: function(e) {
						pic = e.data
					}
				})

				let param = {
					user_id: userId,
					amount: that.actMon,
					title: that.actTitle,
					desc: that.textInput,
					location: that.locayion,
					time: that.time,
					person: that.persons,
					pic: pic,
					date: that.date,
					circle_id: that.chooseSignId
				}
				const url = Config.SENDACT;
				const method = 'GET';
				CommFunction.net_request(url, param, method, function(e) {
					if (e.data.data == 1) {
						uni.reLaunch({
							url: '../index/index'
						})
					} else if (e.data.data == 0) {
						uni.showToast({
							title: e.data.msg,
							duration: 2000
						});
					}
				})


			}
		}
	}
</script>

<style>
	page {
		background: #FFFFFF;
	}

	.sendTitle {
		background: #FFFFFF;
		margin: .3rem;
	}

	.sendDesc {
		background: #FFFFFF;
	}

	.textBox {
		background: #FFFFFF;
		margin: .3rem;
	}

	.circleItem {
		background: rgb(249, 249, 249, 249);
		width: 20%;
		text-align: center;
		border: 1px solid rgb(249, 249, 249, 249);
		border-radius: 10px;
		margin-right: .2rem;
	}

	.circles {
		margin: .3rem;
		color: #666666;
		display: flex;
		white-space: nowrap;
	}

	.sendBtnBox {
		background: #007AFF;
		color: #FFFFFF;
		display: flex;
		justify-content: center;
		align-items: center;
		bottom: 80px;
		left: 2.5rem;
		right: 2.5rem;
		border-radius: 3rem;
	}

	.sendBtn {
		padding: .5rem 0;
		font-size: 14px;
	}

	.active {
		color: #FFFFFF;
		background: #007AFF;
	}

	.inputTitleBox {
		margin: .3rem;
	}

	.acMon {
		display: flex;
		align-items: flex-end;
		justify-content: flex-end;
		padding: 0 .3rem;
	}

	.acSpe {
		color: #FF3333;
		font-size: 18px;
		margin-right: 10px;
	}

	.acSpels {
		color: #333333;
	}

	.inputMonBox {
		width: 50px;
		margin-right: 10px;
	}
</style>