其他分享
首页 > 其他分享> > 前端工作总结239-uni-弹出框显示数据

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

作者:互联网

<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