uniapp 父子组件交互

布满荆棘的人生 2021-09-19 04:10 467阅读 0赞

<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>