ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

前端工作总结239-uni-弹出框显示数据

2022-09-16 23:05:08  阅读:278  来源: 互联网

标签:console log form data value 弹出 239 uni true


<template>
	<view class="wrap">
		<u-form :model="form" :rules="rules" ref="uForm" :errorType="errorType">

			<u-form-item label="标题" label-width="140" style="margin-left:30rpx" prop="title">
				<u-input v-model="form.title" placeholder="请输入要输入的文章标题" />
			</u-form-item>
			<u-form-item label="类别" label-width="140" style="margin-left:30rpx">

				<u-input type="select" v-model="form.cate" placeholder="请选择" @click="show = true"></u-input>
				<u-select v-model="show" mode="single-column" :list="list" @confirm="confirm"></u-select>


			</u-form-item>
				<!-- 渲染页面数据 -->
				<navigator url="../LevineHua-editor/LevineHua-editor" class="single">
			<u-form-item label="请输入内容" prop="content" label-width="150">
				<input  placeholder="请输入内容" v-model="form.content" type="texarea" />
			</u-form-item>
			</navigator>
			<u-form-item label-position="top" label-width="140" label="封面图" prop="coverImage">
				<u-image width="320rpx" height="188rpx" @click="choose" :src="messimg"></u-image>
			</u-form-item>
			<u-form-item label="开始时间" prop="startDate" label-width="200">
				<u-input type="select" v-model="form.startDate" placeholder="请选择" @click="start_time_show = true"></u-input>
				<u-picker mode="time" v-model="start_time_show" @confirm="confirm1" :params="params"></u-picker>
			</u-form-item>
			<u-form-item label="结束时间" prop="endDate" label-width="200">
				<u-input type="select" v-model="form.endDate" placeholder="请选择" @click="end_time_show = true"></u-input>
				<u-picker mode="time" v-model="end_time_show" @confirm="confirm2" :params="params"></u-picker>
			</u-form-item>
		
		</u-form>
		<u-button class="sub-btn" @click="submit">提交</u-button>
	</view>
</template>

<script>
	/* 引入富文本编辑器 */
	import jinEdit from '@/components/jin-edit/jin-edit.vue';
	export default {
		/* 注册组件 */
		components: {
			jinEdit
		},
		data() {
			return {
				params: {
					year: true,
					month: true,
					day: true,
					hour: true,
					minute: true,
					second: true
				},
				messimg: '',
				/* 获取token值 */
				header1: {
					Authorization: this.vuex_token
				},
				/* 存储上传地址 */
				action1: '',
				show: false,
				//控制选择框显示
				end_time_show: false,
				//控制选择框显示
				start_time_show: false,

				form: {

				},
				/* list的数据 */
				list: [{
						value: '市场动态',
						label: '市场动态'
					},
					{
						value: '市场党建',
						label: '市场党建'
					},
					{
						value: '通知公告',
						label: '通知公告'
					},
					{
						value: '生活窍门',
						label: '生活窍门'
					},
					{
						value: '健康饮食',
						label: '健康饮食'
					},
					{
						value: '家政服务',
						label: '家政服务'
					},
					{
						value: '街道服务',
						label: '街道服务'
					},
				],
				//提示
				errorType: ['message'],
				//验证
				rules: {
					title: [{
							required: true,
							message: '请输入姓名',
							trigger: 'blur',
						},
						{
							min: 3,
							max: 5,
							message: '姓名长度在3到5个字符',
							trigger: ['change', 'blur'],
						},
					],
					content: [{
							required: true,
							message: '请输入通知内容',
							trigger: ['change', 'blur'],
						},

					],
				},

			}
		},

		created() {
			/* "loginId": 0,
				"marketId": 0, */
			this.form.loginId = this.vuex_user.id
			this.form.marketId = this.vuex_user.market_id
			console.log(this.vuex_token)
			var url = this.$u.http.config.baseUrl + '/uploadFile/file'
			console.log(url)
			this.action1 = url

		},
		methods: {
			changeList(val){
				console.log(1)
				console.log(val)
			},
			open() {
				this.show = true;
			},
			// 注意返回值为一个数组,单列时取数组的第一个元素即可(只有一个元素)
			confirm(e) {
				console.log(e);
				this.form.cate = e[0].value

			},
			confirm1(e) {
				let date = e.year + '-' + e.month + '-' + e.day + " " + e.hour + ':' + e.minute + ':' + e.second
				this.form.startDate = date
			},
			confirm2(e) {
				console.log(e);
				let date = e.year + '-' + e.month + '-' + e.day + " " + e.hour + ':' + e.minute + ':' + e.second
				this.form.endDate = date
			},
			submit() {
				this.$u.api.getPartyAdd(this.form).then(res => {
					console.log(res)
				})
			},
			
			/* 上传图片 */
			choose() {
				uni.chooseImage({
					success: (chooseImageRes) => {
						var tempFilePaths = chooseImageRes.tempFilePaths;
						uni.uploadFile({
							url: this.$u.http.config.baseUrl + '/uploadFile/file',
							filePath: tempFilePaths[0],
							header: {
								Authorization: this.vuex_token
							},
							name: 'file',
							success: (uploadFileRes) => {
								let data_res = JSON.parse(uploadFileRes.data)
								if (data_res.code == 200) {
									this.messimg = data_res.data;
									this.form.coverImage = data_res.data;
									console.log(this.messimg)

								}
							}
						});
					}
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	.sub-btn {
		width: 684rpx;
		height: 96rpx;
		background: linear-gradient(91deg, #43B9FD 0%, #1FB5FE 100%);
		opacity: 1;
		border-radius: 66rpx;
		border: 0rpx;
		font-size: 36rpx;
		font-family: PingFangSC;
		font-weight: 400;
		line-height: 40rpx;
		color: #FFFFFF;
		position: fixed;
		bottom: 18rpx;
	}

	.title-sm {
		background: #F7F7F7;
		width: 100%;
		padding: 23rpx 0rpx;
	}

	.wrap {
		padding: 30rpx;
	}

	.agreement {
		display: flex;
		align-items: center;
		margin: 40rpx 0;

		.agreement-text {
			padding-left: 8rpx;
			color: $u-tips-color;
		}
	}
</style>

 

标签:console,log,form,data,value,弹出,239,uni,true
来源: https://www.cnblogs.com/yao-655442/p/16701551.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有